plass-ui 0.0.1 → 1.0.0

package/dist/tailwind.css

@@ -21,10 +21,11 @@
  * Dark mode responds to `prefers-color-scheme`, and can be forced either way
  * with `.dark` / `[data-theme='dark'|'light']` on any ancestor.
  *
- * The surface model is **a moulded plastic key resting on a sheet of glass**: a
- * control is a gradient fill with a specular highlight along its top edge and a
- * drop shadow tinted with its own colour; everything that holds content is a
- * translucent, heavily blurred sheet with a white hairline around it.
+ * The surface model is **a key of tinted glass resting on a clear sheet**: a
+ * control is a smooth two-stop gradient with a drop shadow tinted by its own
+ * colour and a bloom of light that follows the pointer across it; everything
+ * that holds content is a translucent, heavily blurred sheet with a white
+ * hairline around it. Depth is carried by the gradient, not by a highlight.
  */
 
 /*
@@ -47,41 +48,61 @@
  *
  * These sit outside every theme block on purpose, and it is the one place Plass
  * departs hardest from the libraries it was learned from: **a key's own colour
- * does not change with the theme.** A piece of plastic is the same piece of
- * plastic in a dark room. What changes is the sheet it rests on, the glass
- * around it, and the `accent` — the one value that has to be *read* off a
+ * does not change with the theme.** What changes is the sheet it rests on, the
+ * glass around it, and the `accent` — the one value that has to be *read* off a
  * surface rather than looked at.
  *
- * Two values are hand-picked per family and everything else is derived with
+ * Three values are hand-picked per family and everything else is derived with
  * `color-mix()`, so **adding a colour family is two edits**: one entry in
- * `PlassColor` and two lines here (plus its `accent` in each theme).
+ * `PlassColor` and three lines here (plus its `accent` in each theme).
  *
- * Every `solid` was chosen against one number: the *lightest* stop of the
- * gradient derived from it has to clear 4.5:1 against its own `on-solid`. That
- * stop is a 5% lift toward white, which is why the fills sit where they do —
- * they are not "dark blue", they are as bright as a white label allows.
+ * `solid` and `solid-to` are the two ends of the gradient, at 135° — the
+ * top-left corner and the bottom-right one. They are a **hue sweep at one
+ * lightness**, not a shade: primary runs indigo to azure, danger vermilion to
+ * rose, success green to teal, info blue to cyan. Nothing gets lighter and
+ * nothing gets darker.
+ *
+ * That is the whole reason there is no highlight layer over the top of a
+ * control. A gradient that darkens toward one corner is a moulded object
+ * catching a lamp, and it needs a specular highlight to finish the illusion —
+ * which is what made every filled control read as lacquer. A gradient that
+ * *turns* is a piece of tinted glass, and it needs nothing else.
+ *
+ * Both ends clear 4.5:1 against their own `on-solid`, and they sit as close to
+ * that floor as the arithmetic allows: every one of them is within 0.15 of 4.5,
+ * because a family held further above the floor than it has to be is a family
+ * that is darker than it has to be. `warning` is the exception on both counts —
+ * its ink is dark, so it runs the other way and has room to spare.
  * ------------------------------------------------------------------------- */
 
 :root {
-  --plass-primary-solid: #3558ef;
+  --plass-primary-solid: #3f63f2;
+  --plass-primary-solid-to: #1b78cb;
   --plass-primary-on-solid: #ffffff;
 
-  --plass-secondary-solid: #4f5a70;
+  --plass-secondary-solid: #6b7488;
+  --plass-secondary-solid-to: #59637a;
   --plass-secondary-on-solid: #ffffff;
 
-  --plass-success-solid: #157845;
+  --plass-success-solid: #1b8649;
+  --plass-success-solid-to: #12866a;
   --plass-success-on-solid: #ffffff;
 
-  /* The one family with dark ink. White on amber does not reach 4.5:1 at any
-     lightness worth calling amber, and changing the ink is the right answer —
-     distorting the family to preserve a white label is not. */
-  --plass-warning-solid: #e2921c;
+  /* The one family with dark ink, and the one whose sweep is a change of
+     lightness rather than of hue — amber has nowhere to turn that is still
+     amber. White on it does not reach 4.5:1 at any lightness worth the name,
+     and changing the ink is the right answer; distorting the family to preserve
+     a white label is not. */
+  --plass-warning-solid: #f0a63e;
+  --plass-warning-solid-to: #d98613;
   --plass-warning-on-solid: #3b2405;
 
-  --plass-danger-solid: #c4383e;
+  --plass-danger-solid: #d04246;
+  --plass-danger-solid-to: #d53c54;
   --plass-danger-on-solid: #ffffff;
 
-  --plass-info-solid: #186cb3;
+  --plass-info-solid: #2379bd;
+  --plass-info-solid-to: #157aa9;
   --plass-info-on-solid: #ffffff;
 }
 
@@ -127,6 +148,26 @@
   --plass-glass-press: rgb(255 255 255 / 0.88);
   --plass-glass-line: rgb(255 255 255 / 0.6);
 
+  /* The marks a sheet makes on *itself*, and the one place the glass ladder
+     above cannot be used.
+
+     `--plass-glass-line` is white light on a cut edge: it reads because the
+     pane behind it is the page wash. Turn it inward — a rule between two table
+     rows, a groove a switch runs in, a striped row — and it is white on white,
+     which is nothing at all. Every one of these is therefore a *neutral ink*
+     laid on the surface rather than more light: the same blue-grey the border
+     is, at the weight the job needs, and it reads on a white card and on the
+     wash alike.
+
+     `divider` rules one row off the next. `stripe` is the wash on every other
+     one. `track` is the groove a thumb runs along — a switch's, a slider's —
+     and it is the one of the three that has to be seen from across a room,
+     because a switch nobody can find in its off state is a switch that only
+     exists half the time. */
+  --plass-divider: rgb(20 40 90 / 0.1);
+  --plass-stripe: rgb(20 40 90 / 0.03);
+  --plass-track: rgb(20 40 90 / 0.14);
+
   /* How hard the backdrop is blurred, and how much colour is pulled out of it.
      22px is a deliberate, generous smear: unlike a frosted-acrylic language,
      Plass is not trying to let you read what is behind the sheet — it is trying
@@ -134,32 +175,35 @@
      white box with an alpha on it. */
   --plass-blur: blur(22px) saturate(160%);
 
-  /* The two edges. `gloss-glass` is the light lying along the top of a sheet;
-     `gloss-solid` is the same light on a moulded key, which is dimmer because
-     the key is not clear. There is deliberately **no dark bevel underneath**:
-     the drop shadow is what puts the key above the sheet. */
+  /* The light lying along the top edge of a sheet. There is one of these and it
+     belongs to **glass only**: a pane has a real cut edge for light to catch.
+     A gradient key does not get one — a bright line across the top of a filled
+     control is the single thing that makes it read as moulded plastic, and the
+     gradient is already saying everything about the form that needs saying.
+     There is deliberately no dark bevel underneath either. */
   --plass-gloss-glass: inset 0 1px 0 rgb(255 255 255 / 0.55);
-  --plass-gloss-solid: inset 0 1px 0 rgb(255 255 255 / 0.34);
 
   /* A well cut into the glass — what a filled field is drawn as. The only
      inset shadow in the library that goes *downward*. */
   --plass-well: inset 0 1px 2px rgb(20 40 90 / 0.1);
 
-  /* The specular highlight `.plass-gloss` lays over a key. It stops at 62%
-     rather than running the whole height, because a gradient that reaches the
-     bottom edge reads as a colour change and not as light. */
-  --plass-specular: linear-gradient(
-    180deg,
-    rgb(255 255 255 / 0.3) 0%,
-    rgb(255 255 255 / 0.06) 46%,
-    rgb(255 255 255 / 0) 62%
-  );
+  /* The bloom that follows the pointer across a control, and the brighter flash
+     the moment it is pressed. These are the two colours `.plass-glow` reads on
+     a *filled* surface; a glass or a ghost control uses its own family tint
+     instead, because white light on a near-white sheet is invisible.
+
+     The flash is only a shade brighter than the bloom it replaces: the press is
+     carried by the whole control dimming, and this is the highlight riding on
+     top of it rather than the effect itself. */
+  --plass-glow-on-fill: rgb(255 255 255 / 0.18);
+  --plass-flash-on-fill: rgb(255 255 255 / 0.26);
 
   /* 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. */
-  --plass-shadow-ambient: rgb(20 40 90 / 0.16);
-  --plass-glow-strength: 35%;
+     a blue-tinted page reads as dirt — and it is faint, because the tint below
+     is what a control's shadow is actually made of. */
+  --plass-shadow-ambient: rgb(20 40 90 / 0.1);
+  --plass-tint-strength: 35%;
 
   /* The scrim behind a modal surface. */
   --plass-scrim: rgb(16 24 40 / 0.4);
@@ -213,24 +257,23 @@
     --plass-glass-press: rgb(255 255 255 / 0.15);
     --plass-glass-line: rgb(255 255 255 / 0.12);
 
+    --plass-divider: rgb(255 255 255 / 0.1);
+    --plass-stripe: rgb(255 255 255 / 0.035);
+    --plass-track: rgb(255 255 255 / 0.16);
+
     --plass-blur: blur(22px) saturate(150%);
 
     --plass-gloss-glass: inset 0 1px 0 rgb(255 255 255 / 0.1);
-    --plass-gloss-solid: inset 0 1px 0 rgb(255 255 255 / 0.22);
 
     --plass-well: inset 0 1px 2px rgb(0 0 0 / 0.45);
 
-    --plass-specular: linear-gradient(
-      180deg,
-      rgb(255 255 255 / 0.18) 0%,
-      rgb(255 255 255 / 0.04) 46%,
-      rgb(255 255 255 / 0) 62%
-    );
+    --plass-glow-on-fill: rgb(255 255 255 / 0.15);
+    --plass-flash-on-fill: rgb(255 255 255 / 0.22);
 
     /* A tinted shadow has almost nothing to sit on over a near-black page, so
        the tint is turned up rather than the shadow being made bigger. */
-    --plass-shadow-ambient: rgb(0 0 0 / 0.5);
-    --plass-glow-strength: 55%;
+    --plass-shadow-ambient: rgb(0 0 0 / 0.42);
+    --plass-tint-strength: 55%;
 
     --plass-scrim: rgb(0 0 0 / 0.6);
 
@@ -258,22 +301,21 @@
   --plass-glass-press: rgb(255 255 255 / 0.15);
   --plass-glass-line: rgb(255 255 255 / 0.12);
 
+  --plass-divider: rgb(255 255 255 / 0.1);
+  --plass-stripe: rgb(255 255 255 / 0.035);
+  --plass-track: rgb(255 255 255 / 0.16);
+
   --plass-blur: blur(22px) saturate(150%);
 
   --plass-gloss-glass: inset 0 1px 0 rgb(255 255 255 / 0.1);
-  --plass-gloss-solid: inset 0 1px 0 rgb(255 255 255 / 0.22);
 
   --plass-well: inset 0 1px 2px rgb(0 0 0 / 0.45);
 
-  --plass-specular: linear-gradient(
-    180deg,
-    rgb(255 255 255 / 0.18) 0%,
-    rgb(255 255 255 / 0.04) 46%,
-    rgb(255 255 255 / 0) 62%
-  );
+  --plass-glow-on-fill: rgb(255 255 255 / 0.15);
+  --plass-flash-on-fill: rgb(255 255 255 / 0.22);
 
-  --plass-shadow-ambient: rgb(0 0 0 / 0.5);
-  --plass-glow-strength: 55%;
+  --plass-shadow-ambient: rgb(0 0 0 / 0.42);
+  --plass-tint-strength: 55%;
 
   --plass-scrim: rgb(0 0 0 / 0.6);
 
@@ -293,8 +335,8 @@
  *
  * **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
- * on `:root` would freeze `--plass-*-glow` to the light theme's
- * `--plass-glow-strength` inside a `.dark` subtree.
+ * on `:root` would freeze `--plass-*-tint` to the light theme's
+ * `--plass-tint-strength` inside a `.dark` subtree.
  * ------------------------------------------------------------------------- */
 
 :root,
@@ -302,32 +344,36 @@
 .light,
 [data-theme='dark'],
 [data-theme='light'] {
-  /* The elevation ladder. Neutral, and it climbs by *blur* far more than by
-     offset: a key that moves 20px down the page when it is raised has left the
-     sheet, and everything in this library is still sitting on one. */
+  /* The elevation ladder. Neutral, wide and faint — it climbs by *blur* far
+     more than by offset, because a surface that moves 20px down the page when
+     it is raised has left the sheet, and everything in this library is still
+     sitting on one. A control's shadow is mostly the tint below rather than
+     this; what this adds is the small amount of grey that says the sheet is
+     above the page rather than printed on it. */
   --plass-shadow-0: 0 0 #0000;
-  --plass-shadow-1: 0 2px 8px -2px var(--plass-shadow-ambient);
-  --plass-shadow-2: 0 6px 20px -4px var(--plass-shadow-ambient);
-  --plass-shadow-3: 0 12px 32px -8px var(--plass-shadow-ambient);
-  --plass-shadow-4: 0 20px 48px -12px var(--plass-shadow-ambient);
-
-  /* The moulded fill. Three stops rather than two: light lands on the top-left
-     corner, the family's own colour holds the middle where the label sits, and
-     the far corner falls away. 135deg is the light direction the whole library
-     agrees on — the specular highlight, the gloss line and this all assume it.
-
-     The lift is 5% and the fall is 10%, which is smaller than it looks like it
-     should be. Anything more and the top-left corner stops clearing 4.5:1
-     against the label. */
+  --plass-shadow-1: 0 4px 14px -3px var(--plass-shadow-ambient);
+  --plass-shadow-2: 0 8px 24px -5px var(--plass-shadow-ambient);
+  --plass-shadow-3: 0 14px 36px -9px var(--plass-shadow-ambient);
+  --plass-shadow-4: 0 22px 52px -13px var(--plass-shadow-ambient);
+
+  /* The fill: the family's two ends, swept across the control at 135deg.
+
+     Two stops and not three, and a *sweep* rather than a shade. Three stops
+     with a light one at the corner is how a moulded key is drawn, and a moulded
+     key was the wrong object — it needs a highlight over the top of it to
+     finish the illusion, and that highlight is what made every control look
+     lacquered. Two ends that turn in hue do the same work with none of the
+     shine, which is also the more modern of the two pictures.
+
+     135deg is the one direction the whole library agrees on. */
   --plass-primary-fill: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--plass-primary-solid) 95%, white) 0%,
-    var(--plass-primary-solid) 46%,
-    color-mix(in srgb, var(--plass-primary-solid) 90%, black) 100%
+    var(--plass-primary-solid) 0%,
+    var(--plass-primary-solid-to) 100%
   );
-  --plass-primary-glow: color-mix(
+  --plass-primary-tint: color-mix(
     in srgb,
-    var(--plass-primary-solid) var(--plass-glow-strength),
+    var(--plass-primary-solid) var(--plass-tint-strength),
     transparent
   );
   --plass-primary-soft: color-mix(in srgb, var(--plass-primary-accent) 10%, transparent);
@@ -339,13 +385,12 @@
 
   --plass-secondary-fill: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--plass-secondary-solid) 95%, white) 0%,
-    var(--plass-secondary-solid) 46%,
-    color-mix(in srgb, var(--plass-secondary-solid) 90%, black) 100%
+    var(--plass-secondary-solid) 0%,
+    var(--plass-secondary-solid-to) 100%
   );
-  --plass-secondary-glow: color-mix(
+  --plass-secondary-tint: color-mix(
     in srgb,
-    var(--plass-secondary-solid) var(--plass-glow-strength),
+    var(--plass-secondary-solid) var(--plass-tint-strength),
     transparent
   );
   --plass-secondary-soft: color-mix(in srgb, var(--plass-secondary-accent) 10%, transparent);
@@ -357,13 +402,12 @@
 
   --plass-success-fill: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--plass-success-solid) 95%, white) 0%,
-    var(--plass-success-solid) 46%,
-    color-mix(in srgb, var(--plass-success-solid) 90%, black) 100%
+    var(--plass-success-solid) 0%,
+    var(--plass-success-solid-to) 100%
   );
-  --plass-success-glow: color-mix(
+  --plass-success-tint: color-mix(
     in srgb,
-    var(--plass-success-solid) var(--plass-glow-strength),
+    var(--plass-success-solid) var(--plass-tint-strength),
     transparent
   );
   --plass-success-soft: color-mix(in srgb, var(--plass-success-accent) 10%, transparent);
@@ -375,13 +419,12 @@
 
   --plass-warning-fill: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--plass-warning-solid) 95%, white) 0%,
-    var(--plass-warning-solid) 46%,
-    color-mix(in srgb, var(--plass-warning-solid) 90%, black) 100%
+    var(--plass-warning-solid) 0%,
+    var(--plass-warning-solid-to) 100%
   );
-  --plass-warning-glow: color-mix(
+  --plass-warning-tint: color-mix(
     in srgb,
-    var(--plass-warning-solid) var(--plass-glow-strength),
+    var(--plass-warning-solid) var(--plass-tint-strength),
     transparent
   );
   --plass-warning-soft: color-mix(in srgb, var(--plass-warning-accent) 12%, transparent);
@@ -393,13 +436,12 @@
 
   --plass-danger-fill: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--plass-danger-solid) 95%, white) 0%,
-    var(--plass-danger-solid) 46%,
-    color-mix(in srgb, var(--plass-danger-solid) 90%, black) 100%
+    var(--plass-danger-solid) 0%,
+    var(--plass-danger-solid-to) 100%
   );
-  --plass-danger-glow: color-mix(
+  --plass-danger-tint: color-mix(
     in srgb,
-    var(--plass-danger-solid) var(--plass-glow-strength),
+    var(--plass-danger-solid) var(--plass-tint-strength),
     transparent
   );
   --plass-danger-soft: color-mix(in srgb, var(--plass-danger-accent) 10%, transparent);
@@ -411,13 +453,12 @@
 
   --plass-info-fill: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--plass-info-solid) 95%, white) 0%,
-    var(--plass-info-solid) 46%,
-    color-mix(in srgb, var(--plass-info-solid) 90%, black) 100%
+    var(--plass-info-solid) 0%,
+    var(--plass-info-solid-to) 100%
   );
-  --plass-info-glow: color-mix(
+  --plass-info-tint: color-mix(
     in srgb,
-    var(--plass-info-solid) var(--plass-glow-strength),
+    var(--plass-info-solid) var(--plass-tint-strength),
     transparent
   );
   --plass-info-soft: color-mix(in srgb, var(--plass-info-accent) 10%, transparent);
@@ -448,38 +489,707 @@
 }
 
 /* ---------------------------------------------------------------------------
- * The gloss
+ * Links
+ *
+ * `<a>` is, with `<td>`, one of the two tags a host stylesheet still styles by
+ * name — `.prose a`, `.vp-doc a`, every CSS framework — and all of those are a
+ * class plus a type, which outranks a plain one-class utility. A PlTextLink
+ * that lost its line and its colour inside a `.prose` block would have lost the
+ * only two things it is.
+ *
+ * So the selector is doubled. `.plass-link.plass-link` is two classes and
+ * matches nothing extra, which puts these declarations above a host's `a` rule
+ * and still below anything a caller writes with two classes of their own. Only
+ * the invariants are here — the parts of a link that no prop changes. The
+ * colour and whether the line is drawn at all stay in the component, written
+ * through the same doubled class.
+ *
+ * The thickness has a `max()` floor because a hairline that lands between two
+ * device pixels is antialiased into a grey smudge: 0.055em is a real line from
+ * about 18px up, and 1px below that.
+ * ------------------------------------------------------------------------- */
+
+.plass-link.plass-link {
+  font-weight: inherit;
+  text-decoration-thickness: max(1px, 0.055em);
+  text-underline-offset: 0.2em;
+  text-underline-position: from-font;
+  text-decoration-color: var(--p-underline);
+}
+
+.plass-link.plass-link:hover {
+  text-decoration-color: var(--p-underline-hover);
+}
+
+/* ---------------------------------------------------------------------------
+ * Interaction light
  *
- * One layer over a moulded surface: the specular highlight that says the light
- * is coming from the top-left and that the thing under it is not flat.
+ * Two stacked layers on an interactive surface, both reading `--p-mx`/`--p-my`
+ * — the pointer position, written straight to the element's inline style on
+ * `pointermove` — and both no-ops until those slots have colour in them.
  *
- * It is **the material, not a state** — it is there when nothing is happening,
- * which is exactly what makes it plastic rather than an effect. The only thing
- * that moves it is a press: the key tips away from the light and the highlight
- * drops out, which is the whole of the press signature together with the
- * shadow contracting under it.
+ * This is the one thing a conventional toolkit's controls do not do, and it is
+ * here because a surface made of glass should answer where it is being touched. It replaces
+ * a static specular highlight that used to sit over every filled control: a
+ * highlight that is always on is a claim about a lamp somewhere off-screen,
+ * and it read as lacquer. Light that arrives with the pointer is a claim about
+ * the pointer, which is true.
  *
- * This lives in CSS rather than in Tailwind arbitrary variants because the
- * selector is a pseudo-element carrying a gradient: `[&::before]:[background:
- * linear-gradient(...)]` is technically expressible and completely unreadable.
+ * It lives in CSS rather than in Tailwind arbitrary variants because the
+ * selectors are pseudo-elements carrying gradients: `[&::before]:[background:
+ * radial-gradient(...)]` is technically expressible and completely unreadable.
  *
- * Cost per control: one composited layer that never repaints. There is no
- * pointer tracking, no ripple element, no timer and no JavaScript.
+ * Cost per hovered control: two composited layers and a gradient repaint of one
+ * small box, on frames the pointer already moved in. Nothing reflows, and React
+ * never re-renders — the component writes the two custom properties directly.
  * ------------------------------------------------------------------------- */
 
-.plass-gloss::before {
+.plass-glow::before,
+.plass-glow::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
-  background-image: var(--plass-specular);
+  opacity: 0;
+}
+
+/* The bloom trailing the pointer across the surface. */
+.plass-glow::before {
+  background: radial-gradient(
+    6rem circle at var(--p-mx, 50%) var(--p-my, 50%),
+    var(--p-glow, transparent),
+    transparent 70%
+  );
+  transition: opacity 240ms var(--plass-ease);
+}
+
+@media (hover: hover) {
+  .plass-glow:hover::before {
+    opacity: 1;
+  }
+}
+
+/*
+ * The press, and the release afterglow. The asymmetry is the whole trick: 0ms
+ * in, ~700ms out, so the flash lands on the frame of the press and is still
+ * visibly draining a beat after the finger lifts. No JavaScript, no ripple
+ * element, no timers.
+ *
+ * This layer is also what carries the effect on a touch screen, where there is
+ * no hover at all: `:active` holds for as long as the finger is down, and
+ * `pointermove` keeps writing the coordinates, so the light follows a finger
+ * dragged across the control.
+ */
+.plass-glow::after {
+  background: radial-gradient(
+    5rem circle at var(--p-mx, 50%) var(--p-my, 50%),
+    var(--p-flash, transparent),
+    transparent 72%
+  );
+  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.plass-glow:active::after {
   opacity: 1;
-  transition: opacity var(--plass-duration) var(--plass-ease);
+  transition-duration: 0ms;
+}
+
+/* ---------------------------------------------------------------------------
+ * The three dots in a bubble somebody is typing into
+ *
+ * Colour only. The dots never move, so a message being written does not bounce
+ * in a thread somebody else is reading — the same restraint every other
+ * indeterminate indicator here keeps, and the reason the spinner is the one
+ * thing in the library allowed to turn.
+ *
+ * `currentColor` throughout, because a bubble's ink is `--p-on-solid` on a
+ * filled surface and the page's own on the other two, and the dots have to be
+ * legible on both. The delay is carried per dot in `--p-i`.
+ * ------------------------------------------------------------------------- */
+
+@keyframes plass-typing {
+  0%,
+  60%,
+  100% {
+    background-color: color-mix(in oklab, currentColor 28%, transparent);
+  }
+  30% {
+    background-color: currentColor;
+  }
+}
+
+.plass-typing-dot {
+  background-color: color-mix(in oklab, currentColor 28%, transparent);
+  animation: plass-typing 1.25s var(--plass-ease) infinite;
+  animation-delay: calc(var(--p-i, 0) * 160ms);
+}
+
+/* ---------------------------------------------------------------------------
+ * The three indeterminate indicators
+ *
+ * A determinate bar, ring or row of plates needs nothing here: it is a width, a
+ * dash offset and a set of opacities, all of which the component writes. This
+ * is the other case — something is happening and nobody knows how much of it is
+ * left — and an indicator that does not move while saying so is a decoration.
+ *
+ * They are in CSS rather than in Tailwind for the reason `.plass-glow` is: a
+ * keyframe is not a variant, so there is nothing to express one with.
+ *
+ * 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.
+ * ------------------------------------------------------------------------- */
+
+@keyframes plass-progress-sweep {
+  from {
+    inset-inline-start: -45%;
+  }
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+.plass-progress-sweep {
+  position: absolute;
+  inset-block: 0;
+  inline-size: 45%;
+  animation: plass-progress-sweep 1.15s var(--plass-ease) infinite;
+}
+
+/* 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
+   on the element is overwritten. */
+@keyframes plass-ring-spin {
+  to {
+    rotate: 360deg;
+  }
+}
+
+.plass-ring-spin {
+  transform-origin: center;
+  animation: plass-ring-spin 900ms linear infinite;
+}
+
+/*
+ * The plates light in sequence, each held back by its own index.
+ *
+ * The gradient is on the layer underneath at full strength the whole time and
+ * what cycles is its `opacity`, which is what lets a plate light *in* rather
+ * than snapping: `background-image` has no interpolation between a gradient and
+ * nothing. The plates never move — a row of them reads as a surface being
+ * written to rather than as something bouncing in the corner of a page somebody
+ * is reading.
+ */
+@keyframes plass-plate-wave {
+  0%,
+  70%,
+  100% {
+    opacity: 0;
+  }
+  35% {
+    opacity: 1;
+  }
+}
+
+.plass-plate-wave {
+  animation: plass-plate-wave 1.2s var(--plass-ease) infinite;
+  animation-delay: calc(var(--p-i, 0) * 120ms);
+}
+
+/* The reduced-motion stand-in for the travelling segment: it stops travelling,
+   fills the groove, and breathes instead. */
+@keyframes plass-progress-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * 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.
+ *
+ * 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
+ * is symmetric, so it needs no direction of its own.
+ *
+ * This is in CSS rather than in Tailwind for the reason `.plass-glow` is: a
+ * keyframe is not a Tailwind variant, so there is nothing to express one with.
+ * ------------------------------------------------------------------------- */
+
+@keyframes plass-skeleton-sweep {
+  from {
+    inset-inline-start: -60%;
+  }
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+.plass-skeleton::after {
+  content: '';
+  position: absolute;
+  inset-block: 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;
+}
+
+/* The reduced-motion stand-in: the highlight stops travelling and the whole
+   placeholder breathes instead. Colour, which is the axis every other state in
+   the library already uses. */
+@keyframes plass-skeleton-pulse {
+  0%,
+  100% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: var(--p-soft-press);
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * The grid
+ *
+ * `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
+ * still the only shape where an item can carry a start offset without an
+ * explicit line number, and where the row can be told to stop wrapping.
+ *
+ * This is real CSS rather than Tailwind for the reason the rest of this file
+ * is: `columns` is a number a caller picks and `span` changes at four widths,
+ * so the class name would have to be assembled at runtime — and a class name
+ * assembled at runtime is a class name Tailwind never sees. The per-instance
+ * numbers arrive as inline `--p-*` slots, exactly as colours do, and the
+ * arithmetic lives here once.
+ *
+ * `min(span, columns)` is the clamp: `span={99}` fills its row instead of
+ * overflowing the page, which is what the caller meant.
+ *
+ * Every slot cascades upward — each breakpoint falls back through the ones
+ * below it — so `span={{ md: 6 }}` sets one custom property and not five. The
+ * 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.
+ * ------------------------------------------------------------------------- */
+
+.plass-grid {
+  --p-cols: var(--p-cols-xs, 12);
+  --p-gap-x: var(--p-gap-x-xs, 0px);
+  --p-gap-y: var(--p-gap-y-xs, 0px);
+}
+
+.plass-grid-item {
+  --p-span: var(--p-span-xs, var(--p-cols, 12));
+  --p-offset: var(--p-offset-xs, 0);
+
+  /* One column plus one gutter. `--p-cols` and `--p-gap-x` are inherited from
+     the grid, so this re-resolves on its own at every breakpoint. */
+  --p-track: calc((100% + var(--p-gap-x, 0px)) / var(--p-cols, 12));
+
+  /* Inseparable from the width below them: `flex` stops the row from resizing
+     the item, `min-width` stops a long unbroken word from doing the same, and
+     `box-sizing` is what makes the percentage mean the whole item. */
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 0;
+  width: calc(var(--p-track) * min(var(--p-span), var(--p-cols, 12)) - var(--p-gap-x, 0px));
+  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));
+    --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-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)));
+    --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-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))));
+    --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-item {
+    --p-span: var(
+      --p-span-lg,
+      var(--p-span-md, var(--p-span-sm, var(--p-span-xs, var(--p-cols, 12))))
+    );
+    --p-offset: var(--p-offset-lg, var(--p-offset-md, var(--p-offset-sm, var(--p-offset-xs, 0))));
+  }
 }
 
-.plass-gloss:active::before {
-  opacity: 0.3;
+@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))))
+    );
+    --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))))
+    );
+    --p-gap-y: var(
+      --p-gap-y-xl,
+      var(--p-gap-y-lg, var(--p-gap-y-md, var(--p-gap-y-sm, var(--p-gap-y-xs, 0px))))
+    );
+  }
+
+  .plass-grid-item {
+    --p-span: var(
+      --p-span-xl,
+      var(--p-span-lg, var(--p-span-md, var(--p-span-sm, var(--p-span-xs, var(--p-cols, 12)))))
+    );
+    --p-offset: var(
+      --p-offset-xl,
+      var(--p-offset-lg, var(--p-offset-md, var(--p-offset-sm, var(--p-offset-xs, 0))))
+    );
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Motion
+ *
+ * The `PlAnimate*` components. Real CSS for the reason the loading indicators
+ * above are: a keyframe is not a Tailwind variant, so there is nothing to
+ * express one with.
+ *
+ * The whole set is built on one idea. An effect is a single `@keyframes` that
+ * runs from a state written entirely in `--p-anim-*` custom properties to the
+ * element's natural one — so `src/internal/animate.ts` never generates CSS, it
+ * only fills slots, and running an effect backwards is `animation-direction:
+ * reverse` rather than a second keyframe. That is what makes `mode="out"` cost
+ * nothing.
+ *
+ * `fill-mode` is `both` throughout, which is what lets an animation that has
+ * not been triggered yet sit paused on its own first frame. Without it, an
+ * element waiting to be scrolled into view would be fully drawn and then blink
+ * out the moment it arrived.
+ *
+ * This is also where the rule against transforms is at its narrowest. A
+ * *control* never moves — that rule is about a key resampling its label under
+ * the pointer, and it holds without exception. A `PlAnimate*` wraps content a
+ * caller asked to have moved, and it moves it with the independent `translate`,
+ * `scale` and `rotate` properties rather than the `transform` shorthand, so a
+ * caller's own transform on the same element survives.
+ * ------------------------------------------------------------------------- */
+
+.plass-anim {
+  animation-duration: var(--p-anim-duration, 300ms);
+  animation-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);
+  animation-fill-mode: both;
+  animation-play-state: var(--p-anim-state, running);
+}
+
+@keyframes plass-anim-fade {
+  from {
+    opacity: var(--p-anim-opacity, 0);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.plass-anim-fade {
+  animation-name: plass-anim-fade;
+}
+
+/* Grow and Zoom share this one: they are the same arithmetic at two strengths,
+   separated by their defaults and by their origin rather than by their maths. */
+@keyframes plass-anim-scale {
+  from {
+    opacity: var(--p-anim-opacity, 0);
+    scale: var(--p-anim-scale, 0.8);
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+.plass-anim-scale {
+  animation-name: plass-anim-scale;
+}
+
+@keyframes plass-anim-slide {
+  from {
+    opacity: var(--p-anim-opacity, 0);
+    translate: var(--p-anim-x, 0px) var(--p-anim-y, 0px);
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+.plass-anim-slide {
+  animation-name: plass-anim-slide;
+}
+
+/* Two angles rather than one, so the same keyframe covers both the quarter turn
+   something arrives on and the endless one a badge spins through. */
+@keyframes plass-anim-rotate {
+  from {
+    opacity: var(--p-anim-opacity, 0);
+    rotate: var(--p-anim-angle, -180deg);
+  }
+  to {
+    opacity: 1;
+    rotate: var(--p-anim-angle-to, 0deg);
+  }
+}
+
+.plass-anim-rotate {
+  animation-name: plass-anim-rotate;
+}
+
+/* Symmetric on purpose: a blink that ended anywhere but where it started would
+   leave the element half drawn whenever the count ran out. */
+@keyframes plass-anim-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: var(--p-anim-opacity, 0);
+  }
+}
+
+.plass-anim-blink {
+  animation-name: plass-anim-blink;
+}
+
+/*
+ * The light travelling around the outside of something.
+ *
+ * What moves is the `from` angle of a conic gradient, which is only animatable
+ * because the angle is a registered custom property with a type. The
+ * alternative — rotating the pseudo-element itself — swings its corners out
+ * past the element on every quarter turn.
+ *
+ * The arc **turns in hue along its length**, between the two ends of the family
+ * at one lightness, exactly as a `solid` fill does. A flat arc would be the one
+ * place in the library where a coloured surface is paint rather than glass.
+ *
+ * `z-index: -1` inside an isolated stacking context puts the light behind the
+ * content but still inside the component, so it reads as a glow escaping from
+ * under a sheet rather than as a border drawn around one.
+ */
+@property --plass-glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes plass-anim-lighting {
+  to {
+    --plass-glow-angle: 360deg;
+  }
+}
+
+.plass-anim-lighting {
+  position: relative;
+  isolation: isolate;
+}
+
+.plass-anim-lighting::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: calc(-1 * var(--p-anim-glow-width, 3px));
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--plass-glow-angle),
+    transparent 0deg,
+    var(--p-anim-glow-from) calc(var(--p-anim-glow-arc, 50deg) * 0.5),
+    var(--p-anim-glow-to) var(--p-anim-glow-arc, 50deg),
+    transparent calc(var(--p-anim-glow-arc, 50deg) * 2),
+    transparent 360deg
+  );
+  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-timing-function: linear;
+  animation-iteration-count: var(--p-anim-repeat, infinite);
+  animation-direction: var(--p-anim-direction, normal);
+  animation-fill-mode: both;
+  animation-play-state: var(--p-anim-state, running);
+}
+
+/*
+ * Marquee: two identical copies, both moving by exactly one copy plus the gap.
+ *
+ * Which is the whole trick — when the first copy has travelled its own width,
+ * the second is standing precisely where the first began, so there is no seam
+ * and no frame where the strip is empty. A percentage `translate` resolves
+ * against the element's own box, so neither copy has to be measured for this to
+ * hold; measuring only ever decides how *fast* it goes.
+ */
+@keyframes plass-anim-marquee-x {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: calc(-100% - var(--p-anim-gap, 0px)) 0;
+  }
+}
+
+@keyframes plass-anim-marquee-y {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: 0 calc(-100% - var(--p-anim-gap, 0px));
+  }
+}
+
+.plass-marquee {
+  display: flex;
+  overflow: hidden;
+  gap: var(--p-anim-gap, 0px);
+}
+
+.plass-marquee-vertical {
+  flex-direction: column;
+}
+
+.plass-marquee-track {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  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);
+  /* 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);
+  animation-iteration-count: var(--p-anim-repeat, infinite);
+  animation-direction: var(--p-anim-direction, normal);
+  animation-fill-mode: both;
+  animation-play-state: var(--p-anim-state, running);
+}
+
+.plass-marquee-vertical .plass-marquee-track {
+  flex-direction: column;
+  animation-name: plass-anim-marquee-y;
+}
+
+.plass-marquee[data-pause-on-hover]:hover .plass-marquee-track {
+  animation-play-state: paused;
+}
+
+/*
+ * Headline: one line replacing another from below.
+ *
+ * Every item is in the same grid cell, so the box is as tall as the tallest of
+ * them and never resizes as the reel turns. The ones not on screen keep their
+ * space with `visibility` rather than `display`, which is what makes that true.
+ */
+@keyframes plass-anim-headline-in {
+  from {
+    translate: 0 var(--p-anim-rise, 100%);
+    opacity: 0;
+  }
+  to {
+    translate: 0 0;
+    opacity: 1;
+  }
+}
+
+@keyframes plass-anim-headline-out {
+  from {
+    translate: 0 0;
+    opacity: 1;
+  }
+  to {
+    translate: 0 calc(-1 * var(--p-anim-rise, 100%));
+    opacity: 0;
+  }
+}
+
+.plass-headline {
+  display: grid;
+  overflow: hidden;
+}
+
+.plass-headline-item {
+  grid-area: 1 / 1;
+  visibility: hidden;
+  animation-duration: var(--p-anim-duration, 460ms);
+  animation-timing-function: var(--p-anim-ease, var(--plass-ease));
+  animation-fill-mode: both;
+}
+
+.plass-headline-item[data-state='active'] {
+  visibility: visible;
+  animation-name: plass-anim-headline-in;
+}
+
+.plass-headline-item[data-state='leaving'] {
+  visibility: visible;
+  animation-name: plass-anim-headline-out;
+}
+
+/* The block after a typewriter. `step-end` rather than a fade, because a caret
+   that eases is a caret that looks like it is being rendered slowly.
+
+   `.plass-caret` and not `.plass-typing-*`, which is already taken by the three
+   dots in a bubble somebody is writing into — two unrelated things, one of them
+   a state and the other an effect. */
+@keyframes plass-anim-caret {
+  0%,
+  45% {
+    opacity: 1;
+  }
+  55%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.plass-caret {
+  display: inline-block;
+  animation: plass-anim-caret 1s step-end infinite;
 }
 
 /* ---------------------------------------------------------------------------
@@ -488,11 +1198,75 @@
  * Nothing in Plass animates on its own except a spinner, so this is about the
  * 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.
+ * simply stop easing, and the light stops trailing the pointer across the
+ * surface — it is either on the control or it is not.
  * ------------------------------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
-  .plass-gloss::before {
+  .plass-glow::before,
+  .plass-glow::after {
     transition-duration: 1ms;
   }
+
+  /* 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;
+  }
+
+  /* Slowed rather than stopped, for the same reason: the dots are what say
+     somebody is still typing, and dots that hold still say the opposite. */
+  .plass-typing-dot {
+    animation-duration: 2.6s;
+  }
+
+  /* The indicators are not switched off either, and for the same reason again:
+     one that holds still says the opposite of what it is for. The travelling
+     segment stops travelling, fills the groove and breathes instead, and the
+     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;
+  }
+
+  .plass-ring-spin {
+    animation-duration: 2.4s;
+  }
+
+  .plass-plate-wave {
+    animation-duration: 2.4s;
+  }
+
+  /*
+   * 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.
+   *
+   * `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.
+   */
+  .plass-anim,
+  .plass-marquee-track,
+  .plass-headline-item,
+  .plass-caret {
+    animation: none;
+  }
+
+  /* The arc stops travelling and becomes an even glow. The same trade the
+     skeleton makes: the decoration survives, the motion does not. */
+  .plass-anim-lighting::before {
+    background: var(--p-anim-glow-to);
+    animation: none;
+  }
 }