plass-ui 0.0.1 → 1.0.0

package/dist/tokens.css

@@ -0,0 +1,1275 @@
+/**
+ * Plass design tokens.
+ *
+ * This file ships as `plass-ui/tailwind.css`, for a project that runs Tailwind
+ * itself and wants the components' utilities generated in the same pass as its
+ * own:
+ *
+ *   @import 'tailwindcss';
+ *   @import 'plass-ui/tailwind.css';
+ *
+ * Two lines, and no `@source` of their own — the `@source` below does that job.
+ *
+ * A project with no Tailwind imports `plass-ui/styles.css` instead, which is this
+ * file plus a reset plus the compiled utilities, built by
+ * `scripts/build-styles.mjs` from `src/standalone.css`. The tokens below are
+ * the same in both.
+ *
+ * Components never hardcode a colour; they map a `color` prop onto the `--p-*`
+ * local slots and let the cascade resolve the rest.
+ *
+ * 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 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.
+ */
+
+/*
+ * The components' classes are Tailwind utilities, so Tailwind has to see the
+ * files that spell them out — otherwise every component renders unstyled.
+ *
+ * `@source` resolves relative to the file it is written in, not to whatever
+ * imported it. In a consumer's install that is `node_modules/plass-ui/dist/`, next
+ * to the compiled components; in this repository it is `src/`, next to the
+ * `.tsx`. One line covers both, and an explicitly registered source is scanned
+ * even inside `node_modules`, which automatic detection skips.
+ *
+ * This is why consumers do not need an `@source '../node_modules/plass-ui'` of
+ * their own — a path that would depend on where their CSS file happens to sit.
+ */
+/* No `@source` here: this file is the tokens on their own.
+ * Register the components you import — `plass-ui/css/base.css` plus one
+ * `plass-ui/css/<component>.css` per component — or import
+ * `plass-ui/tailwind.css` instead, which scans all of them. */
+
+/* ---------------------------------------------------------------------------
+ * The colour families
+ *
+ * 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.** 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.
+ *
+ * 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 three lines here (plus its `accent` in each theme).
+ *
+ * `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: #3f63f2;
+  --plass-primary-solid-to: #1b78cb;
+  --plass-primary-on-solid: #ffffff;
+
+  --plass-secondary-solid: #6b7488;
+  --plass-secondary-solid-to: #59637a;
+  --plass-secondary-on-solid: #ffffff;
+
+  --plass-success-solid: #1b8649;
+  --plass-success-solid-to: #12866a;
+  --plass-success-on-solid: #ffffff;
+
+  /* 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: #d04246;
+  --plass-danger-solid-to: #d53c54;
+  --plass-danger-on-solid: #ffffff;
+
+  --plass-info-solid: #2379bd;
+  --plass-info-solid-to: #157aa9;
+  --plass-info-on-solid: #ffffff;
+}
+
+/* ---------------------------------------------------------------------------
+ * Light theme (default)
+ *
+ * `.light` and `[data-theme='light']` carry the same block rather than only
+ * `:root`, because forcing light has to work on a nested element too — a
+ * preview box inside a dark page has nowhere else to get these values from.
+ * Everything here that is not a colour (the radii, the motion) is identical in
+ * both themes, so re-declaring it costs a duplicate that resolves to what was
+ * inherited anyway.
+ * ------------------------------------------------------------------------- */
+
+:root,
+.light,
+[data-theme='light'] {
+  /* Neutral surfaces and content */
+  --plass-surface: #ffffff;
+  --plass-fg: #1b1e27;
+  --plass-muted-fg: #5b6376;
+  --plass-border: #d5deef;
+
+  /* The page a Plass screen is laid on. Not used by any component — a library
+     has no business painting the body — but it is what the docs, the demos and
+     the focus ring's offset are drawn against, and it is the backdrop the glass
+     was tuned over. */
+  --plass-bg-from: #eef2fb;
+  --plass-bg-to: #dfe8f8;
+
+  /* Glass ---------------------------------------------------------------
+
+     Three strengths of one translucent sheet, and the ladder is **opacity
+     rather than lightness**: as a surface is engaged it holds more light,
+     instead of turning grey.
+
+     Undyed on purpose. A sheet holds other people's content, which arrives
+     with its own colours; tinting it puts every one of them on a background
+     they were not chosen against. The family shows up in the hairline, the
+     focus ring and the caret, and the glass stays clear. */
+  --plass-glass: rgb(255 255 255 / 0.62);
+  --plass-glass-hover: rgb(255 255 255 / 0.76);
+  --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
+     to make the sheet look thick. Below about 14px the glass reads as a flat
+     white box with an alpha on it. */
+  --plass-blur: blur(22px) saturate(160%);
+
+  /* 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);
+
+  /* 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 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 — 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);
+
+  /* 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
+     not a chamfer. */
+  --plass-radius-xs: 0.5rem;
+  --plass-radius-sm: 0.625rem;
+  --plass-radius-md: 0.75rem;
+  --plass-radius-lg: 0.875rem;
+  --plass-radius-xl: 1rem;
+
+  /* Motion. One duration, one curve, and the same both ways — a key going down
+     and a key coming back up are the same spring. */
+  --plass-ease: cubic-bezier(0.16, 0.9, 0.3, 1);
+  --plass-duration: 150ms;
+  --plass-duration-slow: 260ms;
+
+  /* Readable on a surface. This is the one family value that is per-theme,
+     because it is the one that has to be read rather than looked at. */
+  --plass-primary-accent: #2c49d6;
+  --plass-secondary-accent: #46506a;
+  --plass-success-accent: #146b41;
+  --plass-warning-accent: #96600c;
+  --plass-danger-accent: #bb3339;
+  --plass-info-accent: #1668ae;
+}
+
+/* ---------------------------------------------------------------------------
+ * Dark theme
+ *
+ * The fills do not move — see the note above the families. What moves is the
+ * ground under them: the glass loses its white and becomes a smoked pane, the
+ * shadow goes black and deepens, and the accents lighten far enough to be read
+ * off the dark sheet.
+ * ------------------------------------------------------------------------- */
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not([data-theme='light']) {
+    --plass-surface: #141b30;
+    --plass-fg: #e7eaf3;
+    --plass-muted-fg: #99a2ba;
+    --plass-border: rgb(255 255 255 / 0.12);
+
+    --plass-bg-from: #111731;
+    --plass-bg-to: #0a0e1c;
+
+    --plass-glass: rgb(255 255 255 / 0.07);
+    --plass-glass-hover: rgb(255 255 255 / 0.11);
+    --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-well: inset 0 1px 2px rgb(0 0 0 / 0.45);
+
+    --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.42);
+    --plass-tint-strength: 55%;
+
+    --plass-scrim: rgb(0 0 0 / 0.6);
+
+    --plass-primary-accent: #93a8ff;
+    --plass-secondary-accent: #aab3c6;
+    --plass-success-accent: #4fd08d;
+    --plass-warning-accent: #f2b74e;
+    --plass-danger-accent: #ff8a8f;
+    --plass-info-accent: #5fb4ee;
+  }
+}
+
+.dark,
+[data-theme='dark'] {
+  --plass-surface: #141b30;
+  --plass-fg: #e7eaf3;
+  --plass-muted-fg: #99a2ba;
+  --plass-border: rgb(255 255 255 / 0.12);
+
+  --plass-bg-from: #111731;
+  --plass-bg-to: #0a0e1c;
+
+  --plass-glass: rgb(255 255 255 / 0.07);
+  --plass-glass-hover: rgb(255 255 255 / 0.11);
+  --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-well: inset 0 1px 2px rgb(0 0 0 / 0.45);
+
+  --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.42);
+  --plass-tint-strength: 55%;
+
+  --plass-scrim: rgb(0 0 0 / 0.6);
+
+  --plass-primary-accent: #93a8ff;
+  --plass-secondary-accent: #aab3c6;
+  --plass-success-accent: #4fd08d;
+  --plass-warning-accent: #f2b74e;
+  --plass-danger-accent: #ff8a8f;
+  --plass-info-accent: #5fb4ee;
+}
+
+/* ---------------------------------------------------------------------------
+ * 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.
+ *
+ * **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-*-tint` to the light theme's
+ * `--plass-tint-strength` inside a `.dark` subtree.
+ * ------------------------------------------------------------------------- */
+
+:root,
+.dark,
+.light,
+[data-theme='dark'],
+[data-theme='light'] {
+  /* 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 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,
+    var(--plass-primary-solid) 0%,
+    var(--plass-primary-solid-to) 100%
+  );
+  --plass-primary-tint: color-mix(
+    in srgb,
+    var(--plass-primary-solid) var(--plass-tint-strength),
+    transparent
+  );
+  --plass-primary-soft: color-mix(in srgb, var(--plass-primary-accent) 10%, transparent);
+  --plass-primary-soft-hover: color-mix(in srgb, var(--plass-primary-accent) 18%, transparent);
+  --plass-primary-soft-press: color-mix(in srgb, var(--plass-primary-accent) 26%, transparent);
+  --plass-primary-line: color-mix(in srgb, var(--plass-primary-accent) 30%, transparent);
+  --plass-primary-line-hover: color-mix(in srgb, var(--plass-primary-accent) 48%, transparent);
+  --plass-primary-ring: color-mix(in srgb, var(--plass-primary-solid) 55%, transparent);
+
+  --plass-secondary-fill: linear-gradient(
+    135deg,
+    var(--plass-secondary-solid) 0%,
+    var(--plass-secondary-solid-to) 100%
+  );
+  --plass-secondary-tint: color-mix(
+    in srgb,
+    var(--plass-secondary-solid) var(--plass-tint-strength),
+    transparent
+  );
+  --plass-secondary-soft: color-mix(in srgb, var(--plass-secondary-accent) 10%, transparent);
+  --plass-secondary-soft-hover: color-mix(in srgb, var(--plass-secondary-accent) 18%, transparent);
+  --plass-secondary-soft-press: color-mix(in srgb, var(--plass-secondary-accent) 26%, transparent);
+  --plass-secondary-line: color-mix(in srgb, var(--plass-secondary-accent) 30%, transparent);
+  --plass-secondary-line-hover: color-mix(in srgb, var(--plass-secondary-accent) 48%, transparent);
+  --plass-secondary-ring: color-mix(in srgb, var(--plass-secondary-solid) 55%, transparent);
+
+  --plass-success-fill: linear-gradient(
+    135deg,
+    var(--plass-success-solid) 0%,
+    var(--plass-success-solid-to) 100%
+  );
+  --plass-success-tint: color-mix(
+    in srgb,
+    var(--plass-success-solid) var(--plass-tint-strength),
+    transparent
+  );
+  --plass-success-soft: color-mix(in srgb, var(--plass-success-accent) 10%, transparent);
+  --plass-success-soft-hover: color-mix(in srgb, var(--plass-success-accent) 18%, transparent);
+  --plass-success-soft-press: color-mix(in srgb, var(--plass-success-accent) 26%, transparent);
+  --plass-success-line: color-mix(in srgb, var(--plass-success-accent) 30%, transparent);
+  --plass-success-line-hover: color-mix(in srgb, var(--plass-success-accent) 48%, transparent);
+  --plass-success-ring: color-mix(in srgb, var(--plass-success-solid) 55%, transparent);
+
+  --plass-warning-fill: linear-gradient(
+    135deg,
+    var(--plass-warning-solid) 0%,
+    var(--plass-warning-solid-to) 100%
+  );
+  --plass-warning-tint: color-mix(
+    in srgb,
+    var(--plass-warning-solid) var(--plass-tint-strength),
+    transparent
+  );
+  --plass-warning-soft: color-mix(in srgb, var(--plass-warning-accent) 12%, transparent);
+  --plass-warning-soft-hover: color-mix(in srgb, var(--plass-warning-accent) 20%, transparent);
+  --plass-warning-soft-press: color-mix(in srgb, var(--plass-warning-accent) 28%, transparent);
+  --plass-warning-line: color-mix(in srgb, var(--plass-warning-accent) 34%, transparent);
+  --plass-warning-line-hover: color-mix(in srgb, var(--plass-warning-accent) 52%, transparent);
+  --plass-warning-ring: color-mix(in srgb, var(--plass-warning-solid) 55%, transparent);
+
+  --plass-danger-fill: linear-gradient(
+    135deg,
+    var(--plass-danger-solid) 0%,
+    var(--plass-danger-solid-to) 100%
+  );
+  --plass-danger-tint: color-mix(
+    in srgb,
+    var(--plass-danger-solid) var(--plass-tint-strength),
+    transparent
+  );
+  --plass-danger-soft: color-mix(in srgb, var(--plass-danger-accent) 10%, transparent);
+  --plass-danger-soft-hover: color-mix(in srgb, var(--plass-danger-accent) 18%, transparent);
+  --plass-danger-soft-press: color-mix(in srgb, var(--plass-danger-accent) 26%, transparent);
+  --plass-danger-line: color-mix(in srgb, var(--plass-danger-accent) 30%, transparent);
+  --plass-danger-line-hover: color-mix(in srgb, var(--plass-danger-accent) 48%, transparent);
+  --plass-danger-ring: color-mix(in srgb, var(--plass-danger-solid) 55%, transparent);
+
+  --plass-info-fill: linear-gradient(
+    135deg,
+    var(--plass-info-solid) 0%,
+    var(--plass-info-solid-to) 100%
+  );
+  --plass-info-tint: color-mix(
+    in srgb,
+    var(--plass-info-solid) var(--plass-tint-strength),
+    transparent
+  );
+  --plass-info-soft: color-mix(in srgb, var(--plass-info-accent) 10%, transparent);
+  --plass-info-soft-hover: color-mix(in srgb, var(--plass-info-accent) 18%, transparent);
+  --plass-info-soft-press: color-mix(in srgb, var(--plass-info-accent) 26%, transparent);
+  --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);
+}
+
+/* ---------------------------------------------------------------------------
+ * Sheet titles
+ *
+ * A `title` is styled by the element the component renders around it, so a
+ * plain string needs nothing. But a sheet that belongs in the document outline
+ * has to be given a real heading, `title={<h2>…</h2>}`, and that heading
+ * arrives with the browser's own 1.5em bold and its margins, which would ignore
+ * the type scale just set.
+ *
+ * This is in CSS rather than in Tailwind because the selector is the point:
+ * `[&_:where(h1,h2,h3,h4,h5,h6)]:[font:inherit]` is expressible and nobody
+ * would want to read it twice.
+ * ------------------------------------------------------------------------- */
+
+.plass-title :where(h1, h2, h3, h4, h5, h6) {
+  font: inherit;
+  margin: 0;
+}
+
+/* ---------------------------------------------------------------------------
+ * 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
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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 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-glow::before,
+.plass-glow::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  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-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))));
+  }
+}
+
+@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;
+}
+
+/* ---------------------------------------------------------------------------
+ * Reduced motion
+ *
+ * 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, 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-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;
+  }
+}