@blakesteve/roster 5.9.0 → 5.10.0

package/README.md

@@ -269,7 +269,7 @@ changes nothing.
 | ----- | ------- | -------- |
 | `--roster-radius-sm` | `0.25rem` | `Button` `xs`, `Checkbox` `sm` and `md`, `InlineCode`, `Link`, `MultiSelect`'s chip dismiss, the dismiss and reveal buttons in `Alert`, `Toast` and `PasswordInput` |
 | `--roster-radius-md` | `0.375rem` | `Button`, `Input`, `Textarea`, `Select`, `MultiSelect`, `Badge`, `Avatar` and its popover, `Checkbox` `lg`, `CheckboxGroup`'s panel, `Disclosure`, `Dialog`'s and `Sheet`'s close buttons, `Navbar`'s links and menu, popup panels, `Table` |
-| `--roster-radius-lg` | `0.5rem` | `Alert`, `Toast`, `Tooltip`, `CallToAction`, `EmptyState`, `ErrorState`, `LiquidTabs`, `MatchupCard`, `Navbar`'s mobile panel |
+| `--roster-radius-lg` | `0.5rem` | `Alert`, `Toast`, `Tooltip`, `CallToAction`, `EmptyState`, `ErrorState`, `LiquidTabs`, `MatchupCard`, `Navbar`'s mobile panel, `Skeleton` blocks (unless `--roster-skeleton-radius` is set) |
 | `--roster-radius-xl` | `0.75rem` | `Card`, `LiquidTabs`' `pill` strip |
 | `--roster-radius-2xl` | `1rem` | `Dialog`, the top of `Sheet` |
 | `--roster-radius-3xl` | `1.5rem` | nothing yet; wired for the first component that uses it |
@@ -607,10 +607,14 @@ its `label` (default "loading") says so.
 The loading system has its own: `--roster-skeleton` and
 `--roster-skeleton-highlight` are the skeleton's fill and the light that
 crosses it, and the empty part of every progress bar (gray-200 and gray-100,
-gray-700 and gray-600 in dark). Three durations, unset by default, change the
-pace: `--roster-skeleton-duration` (1.8s), `--roster-progress-travel-duration`
-(1.4s, the indeterminate pill) and `--roster-dots-duration` (1.2s). Under
-reduced motion all three stop on a resting frame.
+gray-700 and gray-600 in dark). Four durations, unset by default, change the
+pace: `--roster-skeleton-duration` (1.8s, the shimmer),
+`--roster-skeleton-pulse-duration` (2s, the pulse),
+`--roster-progress-travel-duration` (1.4s, the indeterminate pill) and
+`--roster-dots-duration` (1.2s). `--roster-skeleton-pulse-opacity` (0.5) is
+how far a pulse fades. Under reduced motion all of them stop on a resting
+frame. `--roster-skeleton-radius` rounds skeleton blocks without touching the
+shared radius scale (see Skeleton below).
 
 ### Scrollbars
 
@@ -1039,7 +1043,7 @@ rather than vanishing from a field that still reports it.
 
 #### CheckboxGroup
 
-Three things it adds over the version mega-squad's squad form hand-rolled:
+Three things it adds over the version one app's form hand-rolled:
 
 - **Each option is a Headless UI `Field`**, so its label is wired to its own
   checkbox and clicking the text toggles it. The pointer cursor sits on the
@@ -1109,8 +1113,8 @@ silently drops any selected value whose option has not loaded yet.
 
 `CheckboxGroup` exists instead of a multi-select `Select`, and the reason is
 that neither multi-selection UI in the portfolio was ever a dropdown.
-mega-squad's squad form picks sports from a grouped, scrollable checklist with
-category headings; bb-memorial's share form picks tags from a flat row of
+One app's form picks sports from a grouped, scrollable checklist with
+category headings; another's share form picks tags from a flat row of
 toggles. Collapsing either into a menu would have hidden the options behind a
 click to save vertical space neither screen was short of, so the component
 follows the shape that already worked. A multi-select dropdown is still the
@@ -1205,7 +1209,7 @@ rather than a rewrite.
 
 ```tsx
 <RadioGroup
-  label="Who can see this squad"
+  label="Who can see this group"
   helperText="You can change this at any time."
   value={visibility}
   onChange={setVisibility}
@@ -1459,7 +1463,21 @@ import { SkeletonRegion, SkeletonCard } from "@blakesteve/roster";
 - The fill is `--roster-skeleton` (gray-200, gray-700 in dark), with
   `--roster-skeleton-highlight` crossing it. Neutral rather than the brand
   shimmer Countdown uses, and its own pair, so retinting one never recolors the
-  other. Under reduced motion it holds still.
+  other.
+- `animation` picks how it moves: `"shimmer"` (the default, a band of light
+  crossing the fill), `"pulse"` (the fill fading and returning, nothing
+  moving: quieter on a dense page) or `"none"`. Under reduced motion both
+  movements stop on the flat fill, and in forced colors every shape keeps its
+  outline (a pulse stops there, so the outline never fades). Pass it to
+  `SkeletonRegion` and every skeleton inside takes it, presets included; a
+  preset or a skeleton that names its own keeps it. A pulse runs
+  `--roster-skeleton-pulse-duration` (2s) and fades to
+  `--roster-skeleton-pulse-opacity` (0.5).
+- A block's corners are `--roster-skeleton-radius`, the `lg` step unless
+  set. Set it on `:root` or on a wrapper (`14px`, say) and skeleton blocks
+  follow, and nothing else does: the shared scale and every other component
+  stay as they are. A block's `radius` prop still wins, a line keeps its
+  small step, and a circle stays round.
 
 **Progress and ProgressField.** `ProgressField` is the form to reach for: the
 label and value on one baseline above the bar, an optional detail line below.
@@ -1833,7 +1851,7 @@ function App() {
 | `CollapsibleSection` | Clamps any content (prose, chips, image grids) to a fixed height with a fade and expand/collapse toggle      |
 | `Select`             | Dropdown selector, on the same size scale as `Button` and `Input`                                            |
 | `SegmentBar`         | Proportional horizontal bar divided into colored segments with optional legend (a split, not progress)       |
-| `Skeleton`           | Line, block or circle placeholder at the content's exact size; `SkeletonRegion` sets `aria-busy`              |
+| `Skeleton`           | Line, block or circle placeholder at the content's exact size, shimmering, pulsing or still; `SkeletonRegion` sets `aria-busy` |
 | `Progress`           | Continuous or segmented progress bar: determinate, indeterminate or busy; per-segment state                   |
 | `LoadingDots`        | Three dots for a model generating before its first token; replaced by the text                                |
 | `Stat`               | A figure with its label and, optionally, its source; a valid `<dl>` group, or `semantics="standalone"`       |
@@ -2037,14 +2055,15 @@ anything new. It also fails when a listed class starts emitting, so a fix cannot
 leave a stale entry behind. Run it with `--verbose` to print the list.
 
 Story tests that need the user's own input, a wheel, a mouse drag or a pointer
-resting on something, get it
-from `.storybook/real-input.ts`: Vitest browser commands that drive
-Playwright's mouse, whose events are trusted. A synthetic wheel or pointer
-event never scrolls anything, so "a vertical wheel scrolls the page, not the
-row" can't be tested without them. The commands fail loudly when the pointer
-isn't over their target, rather than letting a wheel land on the page and a
-test pass for the wrong reason. Storybook's own UI has no such input, so those
-steps are skipped there.
+resting on something, get it from `.storybook/real-input.ts`: Vitest browser
+commands that drive Playwright's mouse, whose events are trusted. They run in
+Chromium and in WebKit, where pointer and scroll events differ: WebKit sends a
+pointermove when content scrolls under a resting pointer, and Chromium doesn't.
+A synthetic wheel or pointer event never scrolls anything, so "a vertical wheel
+scrolls the page, not the row" can't be tested without them. The commands fail
+loudly when the pointer isn't over their target, rather than letting a wheel
+land on the page and a test pass for the wrong reason. Storybook's own UI has
+no such input, so those steps are skipped there.
 
 `src/lib/utils.test.ts` pins `cn`. `tailwind-merge` has to be configured with the
 prefix or it stops recognising Roster's classes as utilities and silently
@@ -2073,9 +2092,9 @@ Output in `dist/`:
 
 ### What `meta.json` is for
 
-Consumers read this package to describe it. blakeb.dev's case study takes the
-version from `package.json` and counts components by parsing the exports out of
-`dist/*.d.ts`, so both stay correct on their own.
+Consumers read this package to describe it. A portfolio site's case study takes
+the version from `package.json` and counts components by parsing the exports
+out of `dist/*.d.ts`, so both stay correct on their own.
 
 The test count has no such source. `files` is `["dist"]`, so the suite never
 leaves this repo, and the number on that page was a hand-typed literal that

package/dist/components/atoms/Button/button-variants.js

@@ -65,7 +65,7 @@ const e = /* @__PURE__ */ r(
       // Translucent rather than a solid tint step. A ghost button sits directly
       // on the host's own background, and a solid `bg-*-50` silently disappears
       // wherever that background happens to equal the step it names — which is
-      // exactly what happened to blakeb.dev, whose paper is the same value it
+      // exactly what happened to one app, whose paper is the same value it
       // maps `--roster-gray-100` to. An alpha wash darkens or lightens whatever
       // is actually behind it, so it reads on any surface.
       { variant: "ghost", colorScheme: "primary", className: "rst:text-primary-600 rst:hover:bg-primary-500/10 rst:dark:text-primary-400 rst:dark:hover:bg-primary-400/15" },

package/dist/components/atoms/Eyebrow/eyebrow-variants.d.ts

@@ -1,7 +1,7 @@
 /**
  * The small uppercase label that sits above a heading, beside a rule, or as a
- * column head. Extracted from blakeb.dev, where it was hand-rolled as a CSS
- * class and used 26 times before anyone noticed it was a component.
+ * column head. Extracted from a portfolio site, where it was hand-rolled as a
+ * CSS class and used 26 times before anyone noticed it was a component.
  *
  * Monospace on purpose: at this size, tracked-out uppercase reads as chrome
  * rather than prose, which is the whole job.

package/dist/components/atoms/Input/input-variants.js

@@ -49,7 +49,7 @@ const s = /* @__PURE__ */ r(
       },
       /* Deliberately the same three heights as Button: h-9 / h-10 / h-11.
          Input was a fixed 42px, which agreed with Button at no size at all, so
-         a field beside a submit button never lined up. retrospect gave up and
+         a field beside a submit button never lined up. One app gave up and
          kept a raw <input> pinned to h-11. */
       size: {
         sm: "rst:h-9 rst:px-3",

package/dist/components/atoms/Skeleton/Skeleton.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),c=require("../../../lib/utils.cjs"),k={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base",inherit:""},f={xs:"rst:h-6 rst:w-6",sm:"rst:h-8 rst:w-8",md:"rst:h-10 rst:w-10",lg:"rst:h-12 rst:w-12",xl:"rst:h-16 rst:w-16"},b={sm:"rst:rounded-sm",md:"rst:rounded-md",lg:"rst:rounded-lg",xl:"rst:rounded-xl",full:"rst:rounded-full"},h="rst:animate-skeleton rst:forced-colors:outline-solid rst:forced-colors:outline-1";function S({shape:s="line",size:r,lines:a=1,width:e,height:u,radius:i,className:l}){if(s==="circle"){const o=r&&r in f?r:"md";return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block rst:shrink-0 rst:rounded-full rst:border rst:border-transparent",f[o],h,l),"data-skeleton":"circle"})}if(s==="block")return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block rst:w-full",b[i??"lg"],h,l),style:{height:u??"8rem",width:e},"data-skeleton":"block"});const m=r&&r in k?r:"md",n=Math.max(1,Math.floor(a)),j=o=>{const d=o===n-1;return t.jsxs("span",{className:c.cn("rst:relative rst:block",n>1&&!d&&"rst:w-full"),style:{width:n>1?d?e??"60%":void 0:e},children:[" ",t.jsx("span",{className:c.cn("rst:absolute rst:inset-x-0 rst:top-1/2 rst:h-[0.7em] rst:-translate-y-1/2",b[i??"sm"],h)})]},o)};return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block",k[m],l),"data-skeleton":"line",children:Array.from({length:n},(o,d)=>j(d))})}function g({loading:s,skeleton:r,label:a="Loading",announce:e=!0,children:u,className:i}){const[l,m]=x.useState("");return x.useEffect(()=>{const n=setTimeout(()=>m(s&&e?a:""),s?50:0);return()=>clearTimeout(n)},[s,a,e]),t.jsxs(t.Fragment,{children:[t.jsx("span",{role:"status",className:"rst:sr-only","data-skeleton-status":"",children:l}),t.jsx("div",{"aria-busy":s||void 0,className:i,"data-skeleton-region":s?"loading":"ready",children:s?t.jsx("div",{"aria-hidden":"true",children:r}):u})]})}exports.Skeleton=S;exports.SkeletonRegion=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),i=require("../../../lib/utils.cjs"),b={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base",inherit:""},j={xs:"rst:h-6 rst:w-6",sm:"rst:h-8 rst:w-8",md:"rst:h-10 rst:w-10",lg:"rst:h-12 rst:w-12",xl:"rst:h-16 rst:w-16"},p={sm:"rst:rounded-sm",md:"rst:rounded-md",lg:"rst:rounded-lg",xl:"rst:rounded-xl",full:"rst:rounded-full"},v="rst:rounded-skeleton",y={shimmer:"rst:animate-skeleton rst:forced-colors:outline-solid rst:forced-colors:outline-1",pulse:"rst:animate-skeleton-pulse rst:forced-colors:outline-solid rst:forced-colors:outline-1 rst:forced-colors:animate-none",none:"rst:skeleton-fill rst:forced-colors:outline-solid rst:forced-colors:outline-1"},S=d.createContext(void 0);function C({shape:e="line",size:s,lines:a=1,width:r,height:h,radius:n,animation:x,className:o}){const f=d.useContext(S),l=y[x??f??"shimmer"];if(e==="circle"){const c=s&&s in j?s:"md";return t.jsx("span",{"aria-hidden":"true",className:i.cn("rst:block rst:shrink-0 rst:rounded-full rst:border rst:border-transparent",j[c],l,o),"data-skeleton":"circle"})}if(e==="block")return t.jsx("span",{"aria-hidden":"true",className:i.cn("rst:block rst:w-full",n?p[n]:v,l,o),style:{height:h??"8rem",width:r},"data-skeleton":"block"});const k=s&&s in b?s:"md",u=Math.max(1,Math.floor(a)),g=c=>{const m=c===u-1;return t.jsxs("span",{className:i.cn("rst:relative rst:block",u>1&&!m&&"rst:w-full"),style:{width:u>1?m?r??"60%":void 0:r},children:[" ",t.jsx("span",{className:i.cn("rst:absolute rst:inset-x-0 rst:top-1/2 rst:h-[0.7em] rst:-translate-y-1/2",p[n??"sm"],l)})]},c)};return t.jsx("span",{"aria-hidden":"true",className:i.cn("rst:block",b[k],o),"data-skeleton":"line",children:Array.from({length:u},(c,m)=>g(m))})}function I({loading:e,skeleton:s,label:a="Loading",announce:r=!0,animation:h,children:n,className:x}){const o=d.useContext(S),[f,l]=d.useState("");return d.useEffect(()=>{const k=setTimeout(()=>l(e&&r?a:""),e?50:0);return()=>clearTimeout(k)},[e,a,r]),t.jsxs(t.Fragment,{children:[t.jsx("span",{role:"status",className:"rst:sr-only","data-skeleton-status":"",children:f}),t.jsx("div",{"aria-busy":e||void 0,className:x,"data-skeleton-region":e?"loading":"ready",children:e?t.jsx(S.Provider,{value:h??o,children:t.jsx("div",{"aria-hidden":"true",children:s})}):n})]})}exports.Skeleton=C;exports.SkeletonRegion=I;

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -24,6 +24,8 @@ declare const RADIUS: {
     readonly xl: "rst:rounded-xl";
     readonly full: "rst:rounded-full";
 };
+/** How a skeleton moves while it waits. */
+export type SkeletonAnimation = "shimmer" | "pulse" | "none";
 export interface SkeletonProps {
     /**
      * - `"line"`: a line of text, one line box tall at its `size`.
@@ -42,8 +44,20 @@ export interface SkeletonProps {
     width?: CSSProperties["width"];
     /** A block's height. */
     height?: CSSProperties["height"];
-    /** A block's corners, from the radius scale. */
+    /**
+     * A block's corners, from the radius scale. Without it a block reads
+     * `--roster-skeleton-radius`, which defaults to `lg`. A line's corners are
+     * `sm` unless this says otherwise; a circle is always round.
+     */
     radius?: keyof typeof RADIUS;
+    /**
+     * `"shimmer"` (the default): a highlight sweeps across the fill. `"pulse"`:
+     * the fill fades and returns, at `--roster-skeleton-pulse-duration` and down
+     * to `--roster-skeleton-pulse-opacity`. `"none"`: the fill holds still.
+     * Under reduced motion both movements stop. Inside a `SkeletonRegion`, it
+     * defaults to the region's.
+     */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /**
@@ -53,7 +67,7 @@ export interface SkeletonProps {
  * isn't there yet. The region it stands in for says it's busy; use
  * `SkeletonRegion`, which does that, or set `aria-busy` on it yourself.
  */
-declare function Skeleton({ shape, size, lines, width, height, radius, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function Skeleton({ shape, size, lines, width, height, radius, animation, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 export interface SkeletonRegionProps {
     /** While true, the skeleton shows and the region says it's busy. */
     loading: boolean;
@@ -66,6 +80,8 @@ export interface SkeletonRegionProps {
      * together, a grid of cards say, or wrap them in one region instead.
      */
     announce?: boolean;
+    /** How the skeletons inside move, unless one says otherwise: see `Skeleton`. */
+    animation?: SkeletonAnimation;
     children?: ReactNode;
     className?: string;
 }
@@ -75,5 +91,5 @@ export interface SkeletonRegionProps {
  * When `loading` turns false the content replaces the skeleton in the same
  * box, so a skeleton drawn at the content's size means nothing moves.
  */
-declare function SkeletonRegion({ loading, skeleton, label, announce, children, className }: SkeletonRegionProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonRegion({ loading, skeleton, label, announce, animation, children, className }: SkeletonRegionProps): import("react/jsx-runtime").JSX.Element;
 export { Skeleton, SkeletonRegion };

package/dist/components/atoms/Skeleton/Skeleton.js

@@ -1,80 +1,85 @@
 "use client";
-import { jsx as s, jsxs as p, Fragment as g } from "react/jsx-runtime";
-import { useState as y, useEffect as S } from "react";
-import { cn as a } from "../../../lib/utils.js";
-const f = {
+import { jsx as e, jsxs as v, Fragment as g } from "react/jsx-runtime";
+import { useContext as y, useState as w, useEffect as C, createContext as L } from "react";
+import { cn as c } from "../../../lib/utils.js";
+const p = {
   sm: "rst:text-xs",
   md: "rst:text-sm",
   lg: "rst:text-base",
   inherit: ""
-}, k = {
+}, b = {
   xs: "rst:h-6 rst:w-6",
   sm: "rst:h-8 rst:w-8",
   md: "rst:h-10 rst:w-10",
   lg: "rst:h-12 rst:w-12",
   xl: "rst:h-16 rst:w-16"
-}, x = {
+}, S = {
   sm: "rst:rounded-sm",
   md: "rst:rounded-md",
   lg: "rst:rounded-lg",
   xl: "rst:rounded-xl",
   full: "rst:rounded-full"
-}, h = "rst:animate-skeleton rst:forced-colors:outline-solid rst:forced-colors:outline-1";
-function E({ shape: t = "line", size: r, lines: d = 1, width: e, height: u, radius: c, className: o }) {
+}, E = "rst:rounded-skeleton", N = {
+  shimmer: "rst:animate-skeleton rst:forced-colors:outline-solid rst:forced-colors:outline-1",
+  pulse: "rst:animate-skeleton-pulse rst:forced-colors:outline-solid rst:forced-colors:outline-1 rst:forced-colors:animate-none",
+  none: "rst:skeleton-fill rst:forced-colors:outline-solid rst:forced-colors:outline-1"
+}, x = L(void 0);
+function j({ shape: t = "line", size: r, lines: d = 1, width: s, height: m, radius: o, animation: h, className: n }) {
+  const f = y(x), l = N[h ?? f ?? "shimmer"];
   if (t === "circle") {
-    const l = r && r in k ? r : "md";
-    return /* @__PURE__ */ s(
+    const i = r && r in b ? r : "md";
+    return /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
-        className: a("rst:block rst:shrink-0 rst:rounded-full rst:border rst:border-transparent", k[l], h, o),
+        className: c("rst:block rst:shrink-0 rst:rounded-full rst:border rst:border-transparent", b[i], l, n),
         "data-skeleton": "circle"
       }
     );
   }
   if (t === "block")
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
-        className: a("rst:block rst:w-full", x[c ?? "lg"], h, o),
-        style: { height: u ?? "8rem", width: e },
+        className: c("rst:block rst:w-full", o ? S[o] : E, l, n),
+        style: { height: m ?? "8rem", width: s },
         "data-skeleton": "block"
       }
     );
-  const m = r && r in f ? r : "md", n = Math.max(1, Math.floor(d)), b = (l) => {
-    const i = l === n - 1;
-    return /* @__PURE__ */ p(
+  const k = r && r in p ? r : "md", a = Math.max(1, Math.floor(d)), I = (i) => {
+    const u = i === a - 1;
+    return /* @__PURE__ */ v(
       "span",
       {
-        className: a("rst:relative rst:block", n > 1 && !i && "rst:w-full"),
-        style: { width: n > 1 ? i ? e ?? "60%" : void 0 : e },
+        className: c("rst:relative rst:block", a > 1 && !u && "rst:w-full"),
+        style: { width: a > 1 ? u ? s ?? "60%" : void 0 : s },
         children: [
           " ",
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ e(
             "span",
             {
-              className: a("rst:absolute rst:inset-x-0 rst:top-1/2 rst:h-[0.7em] rst:-translate-y-1/2", x[c ?? "sm"], h)
+              className: c("rst:absolute rst:inset-x-0 rst:top-1/2 rst:h-[0.7em] rst:-translate-y-1/2", S[o ?? "sm"], l)
             }
           )
         ]
       },
-      l
+      i
     );
   };
-  return /* @__PURE__ */ s("span", { "aria-hidden": "true", className: a("rst:block", f[m], o), "data-skeleton": "line", children: Array.from({ length: n }, (l, i) => b(i)) });
+  return /* @__PURE__ */ e("span", { "aria-hidden": "true", className: c("rst:block", p[k], n), "data-skeleton": "line", children: Array.from({ length: a }, (i, u) => I(u)) });
 }
-function L({ loading: t, skeleton: r, label: d = "Loading", announce: e = !0, children: u, className: c }) {
-  const [o, m] = y("");
-  return S(() => {
-    const n = setTimeout(() => m(t && e ? d : ""), t ? 50 : 0);
-    return () => clearTimeout(n);
-  }, [t, d, e]), /* @__PURE__ */ p(g, { children: [
-    /* @__PURE__ */ s("span", { role: "status", className: "rst:sr-only", "data-skeleton-status": "", children: o }),
-    /* @__PURE__ */ s("div", { "aria-busy": t || void 0, className: c, "data-skeleton-region": t ? "loading" : "ready", children: t ? /* @__PURE__ */ s("div", { "aria-hidden": "true", children: r }) : u })
+function D({ loading: t, skeleton: r, label: d = "Loading", announce: s = !0, animation: m, children: o, className: h }) {
+  const n = y(x), [f, l] = w("");
+  return C(() => {
+    const k = setTimeout(() => l(t && s ? d : ""), t ? 50 : 0);
+    return () => clearTimeout(k);
+  }, [t, d, s]), /* @__PURE__ */ v(g, { children: [
+    /* @__PURE__ */ e("span", { role: "status", className: "rst:sr-only", "data-skeleton-status": "", children: f }),
+    /* @__PURE__ */ e("div", { "aria-busy": t || void 0, className: h, "data-skeleton-region": t ? "loading" : "ready", children: t ? /* @__PURE__ */ e(x.Provider, { value: m ?? n, children: /* @__PURE__ */ e("div", { "aria-hidden": "true", children: r }) }) : o })
   ] });
 }
 export {
-  E as Skeleton,
-  L as SkeletonRegion
+  j as Skeleton,
+  D as SkeletonRegion
 };

package/dist/components/atoms/ThemeToggle/ThemeToggle.d.ts

@@ -13,7 +13,7 @@ export interface ThemeToggleProps extends Omit<ButtonProps, "onClick" | "childre
      * opposite, because a button's name should say what pressing it does.
      *
      * Both take nodes, so a product with its own vocabulary for the two states
-     * ("Press sheet" / "Blueline", "Day" / "Night") can say so.
+     * ("Paper" / "Chalkboard", "Day" / "Night") can say so.
      */
     lightLabel?: React.ReactNode;
     /** Visible text when the page is dark, if `showLabel` is set. */

package/dist/components/molecules/CheckboxGroup/CheckboxGroup.d.ts

@@ -45,7 +45,7 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldS
      * Caps the options' height and scrolls past it. A number is pixels.
      *
      * Applied inline rather than as a class because the useful values here are
-     * arbitrary — `240` is mega-squad's, yours will differ — and an arbitrary
+     * arbitrary — `240` is one app's, yours will differ — and an arbitrary
      * Tailwind value built from a prop is a class that does not exist at build
      * time, which is exactly what `check-classes-emit` fails the build over.
      */

package/dist/components/molecules/CheckboxGroup/checkbox-group-variants.d.ts

@@ -5,7 +5,7 @@
  * short list of three options wants to sit on the form the way a Select's
  * label and trigger do, with no chrome of its own.
  *
- * `panel` is the long-list case — the grouped, scrollable list mega-squad
+ * `panel` is the long-list case — the grouped, scrollable list one app
  * hand-rolled for its sports picker. It deliberately does NOT read
  * `--roster-popover-*`: that family is documented as "a panel that floats over
  * the page", and this one is in the flow.

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../lib/utils.cjs"),x=require("../../atoms/Card/Card.cjs"),m=require("../../atoms/Eyebrow/Eyebrow.cjs"),c=require("../../atoms/Stat/stat-variants.cjs"),h=require("../../organisms/Table/Table.cjs"),t=require("../../atoms/Skeleton/Skeleton.cjs");function j({media:r,lines:a=3,variant:s,padding:i,className:n}){return e.jsxs(x.Card,{variant:s,padding:i,className:n,"aria-hidden":"true","data-skeleton":"card",children:[r!==void 0&&e.jsx(t.Skeleton,{shape:"block",height:r,className:"rst:mb-4"}),e.jsx(t.Skeleton,{size:"lg",width:"45%"}),a>0&&e.jsx(t.Skeleton,{size:"md",lines:a,className:"rst:mt-2"})]})}function S({columns:r,className:a}){const s=["70%","50%","60%","40%"];return e.jsx(h.TableRow,{"aria-hidden":"true",className:a,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,r)},(i,n)=>e.jsx(h.TableCell,{children:e.jsx(t.Skeleton,{size:"inherit",width:s[n%s.length]})},n))})}function k({size:r="md",withName:a=!1,className:s}){return a?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:items-center rst:gap-3",s),"data-skeleton":"avatar",children:[e.jsx(t.Skeleton,{shape:"circle",size:r}),e.jsx(t.Skeleton,{size:"md",width:"8rem"})]}):e.jsx(t.Skeleton,{shape:"circle",size:r,className:s})}function w({size:r="md",semantics:a="definition",source:s=!1,className:i}){const n=c.statValueVariants({size:r,colorScheme:"neutral"}),o=e.jsx(t.Skeleton,{size:"inherit",width:"2.5em"}),d=e.jsx(m.Eyebrow,{size:"xs",children:e.jsx(t.Skeleton,{size:"inherit",width:"9em"})}),u=e.jsx("span",{className:c.statSourceClass,children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})});return a==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:n,children:o}),d,s&&u]}):e.jsxs("div",{"aria-hidden":"true",className:l.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2 rst:flex",children:d}),s?e.jsxs("dd",{className:l.cn("rst:m-0",n,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:l.cn(c.statSourceClass,"rst:row-start-3"),children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})})]}):e.jsx("dd",{className:l.cn("rst:m-0 rst:col-start-1 rst:row-start-1",n),children:o})]})}exports.SkeletonAvatar=k;exports.SkeletonCard=j;exports.SkeletonStat=w;exports.SkeletonTableRow=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../lib/utils.cjs"),j=require("../../atoms/Card/Card.cjs"),S=require("../../atoms/Eyebrow/Eyebrow.cjs"),d=require("../../atoms/Stat/stat-variants.cjs"),u=require("../../organisms/Table/Table.cjs"),s=require("../../atoms/Skeleton/Skeleton.cjs");function k({media:a,lines:n=3,variant:r,padding:t,animation:i,className:l}){return e.jsxs(j.Card,{variant:r,padding:t,className:l,"aria-hidden":"true","data-skeleton":"card",children:[a!==void 0&&e.jsx(s.Skeleton,{shape:"block",height:a,animation:i,className:"rst:mb-4"}),e.jsx(s.Skeleton,{size:"lg",width:"45%",animation:i}),n>0&&e.jsx(s.Skeleton,{size:"md",lines:n,animation:i,className:"rst:mt-2"})]})}function m({columns:a,animation:n,className:r}){const t=["70%","50%","60%","40%"];return e.jsx(u.TableRow,{"aria-hidden":"true",className:r,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,a)},(i,l)=>e.jsx(u.TableCell,{children:e.jsx(s.Skeleton,{size:"inherit",width:t[l%t.length],animation:n})},l))})}function w({size:a="md",withName:n=!1,animation:r,className:t}){return n?e.jsxs("span",{"aria-hidden":"true",className:c.cn("rst:flex rst:items-center rst:gap-3",t),"data-skeleton":"avatar",children:[e.jsx(s.Skeleton,{shape:"circle",size:a,animation:r}),e.jsx(s.Skeleton,{size:"md",width:"8rem",animation:r})]}):e.jsx(s.Skeleton,{shape:"circle",size:a,animation:r,className:t})}function p({size:a="md",semantics:n="definition",source:r=!1,animation:t,className:i}){const l=d.statValueVariants({size:a,colorScheme:"neutral"}),o=e.jsx(s.Skeleton,{size:"inherit",width:"2.5em",animation:t}),h=e.jsx(S.Eyebrow,{size:"xs",children:e.jsx(s.Skeleton,{size:"inherit",width:"9em",animation:t})}),x=e.jsx("span",{className:d.statSourceClass,children:e.jsx(s.Skeleton,{size:"inherit",width:"12em",animation:t})});return n==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:c.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:l,children:o}),h,r&&x]}):e.jsxs("div",{"aria-hidden":"true",className:c.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2 rst:flex",children:h}),r?e.jsxs("dd",{className:c.cn("rst:m-0",l,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:c.cn(d.statSourceClass,"rst:row-start-3"),children:e.jsx(s.Skeleton,{size:"inherit",width:"12em",animation:t})})]}):e.jsx("dd",{className:c.cn("rst:m-0 rst:col-start-1 rst:row-start-1",l),children:o})]})}exports.SkeletonAvatar=w;exports.SkeletonCard=k;exports.SkeletonStat=p;exports.SkeletonTableRow=m;

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.d.ts

@@ -1,20 +1,25 @@
 import { CSSProperties } from 'react';
 import { CardProps } from '../../atoms/Card/Card';
+import { SkeletonAnimation } from '../../atoms/Skeleton/Skeleton';
 export interface SkeletonCardProps extends Pick<CardProps, "variant" | "padding"> {
     /** A media block above the text, at this height (an image, a chart). */
     media?: CSSProperties["height"];
     /** Body lines under the title. */
     lines?: number;
+    /** How its skeletons move: see `Skeleton`. Inside a `SkeletonRegion`, the region's. */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /**
  * A Card loading. Stands in for a Card holding an optional media block (with
  * 16px below it), a `text-base` title, and `text-sm` body lines 8px under it.
  */
-declare function SkeletonCard({ media, lines, variant, padding, className }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonCard({ media, lines, variant, padding, animation, className }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
 export interface SkeletonTableRowProps {
     /** How many cells. */
     columns: number;
+    /** How its skeletons move: see `Skeleton`. Inside a `SkeletonRegion`, the region's. */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /**
@@ -22,16 +27,18 @@ export interface SkeletonTableRowProps {
  * size, each holding one line in the cell's text size. Stands in for a row of
  * one-line cells.
  */
-declare function SkeletonTableRow({ columns, className }: SkeletonTableRowProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonTableRow({ columns, animation, className }: SkeletonTableRowProps): import("react/jsx-runtime").JSX.Element;
 export interface SkeletonAvatarProps {
     /** Avatar's sizes. */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** A name line beside it, in `text-sm`. */
     withName?: boolean;
+    /** How its skeletons move: see `Skeleton`. Inside a `SkeletonRegion`, the region's. */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /** An Avatar loading, and optionally the name beside it. */
-declare function SkeletonAvatar({ size, withName, className }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonAvatar({ size, withName, animation, className }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
 export interface SkeletonStatProps {
     /** Stat's sizes. */
     size?: "sm" | "md" | "lg";
@@ -43,6 +50,8 @@ export interface SkeletonStatProps {
     semantics?: "definition" | "standalone";
     /** A source line under the figure, as a Stat with `source` has. */
     source?: boolean;
+    /** How its skeletons move: see `Skeleton`. Inside a `SkeletonRegion`, the region's. */
+    animation?: SkeletonAnimation;
     className?: string;
 }
 /**
@@ -51,5 +60,5 @@ export interface SkeletonStatProps {
  * the label is the real Eyebrow, a flex item where Stat's is, so it makes the
  * same line.
  */
-declare function SkeletonStat({ size, semantics, source, className }: SkeletonStatProps): import("react/jsx-runtime").JSX.Element;
+declare function SkeletonStat({ size, semantics, source, animation, className }: SkeletonStatProps): import("react/jsx-runtime").JSX.Element;
 export { SkeletonCard, SkeletonTableRow, SkeletonAvatar, SkeletonStat };

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.js

@@ -1,45 +1,45 @@
 "use client";
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { cn as n } from "../../../lib/utils.js";
-import { Card as p } from "../../atoms/Card/Card.js";
-import { Eyebrow as u } from "../../atoms/Eyebrow/Eyebrow.js";
-import { statValueVariants as f, statSourceClass as h } from "../../atoms/Stat/stat-variants.js";
-import { TableRow as w, TableCell as g } from "../../organisms/Table/Table.js";
-import { Skeleton as r } from "../../atoms/Skeleton/Skeleton.js";
-function C({ media: s, lines: a = 3, variant: e, padding: l, className: i }) {
-  return /* @__PURE__ */ o(p, { variant: e, padding: l, className: i, "aria-hidden": "true", "data-skeleton": "card", children: [
-    s !== void 0 && /* @__PURE__ */ t(r, { shape: "block", height: s, className: "rst:mb-4" }),
-    /* @__PURE__ */ t(r, { size: "lg", width: "45%" }),
-    a > 0 && /* @__PURE__ */ t(r, { size: "md", lines: a, className: "rst:mt-2" })
+import { cn as d } from "../../../lib/utils.js";
+import { Card as u } from "../../atoms/Card/Card.js";
+import { Eyebrow as f } from "../../atoms/Eyebrow/Eyebrow.js";
+import { statValueVariants as w, statSourceClass as m } from "../../atoms/Stat/stat-variants.js";
+import { TableRow as g, TableCell as k } from "../../organisms/Table/Table.js";
+import { Skeleton as e } from "../../atoms/Skeleton/Skeleton.js";
+function T({ media: a, lines: l = 3, variant: s, padding: r, animation: n, className: i }) {
+  return /* @__PURE__ */ o(u, { variant: s, padding: r, className: i, "aria-hidden": "true", "data-skeleton": "card", children: [
+    a !== void 0 && /* @__PURE__ */ t(e, { shape: "block", height: a, animation: n, className: "rst:mb-4" }),
+    /* @__PURE__ */ t(e, { size: "lg", width: "45%", animation: n }),
+    l > 0 && /* @__PURE__ */ t(e, { size: "md", lines: l, animation: n, className: "rst:mt-2" })
   ] });
 }
-function T({ columns: s, className: a }) {
-  const e = ["70%", "50%", "60%", "40%"];
-  return /* @__PURE__ */ t(w, { "aria-hidden": "true", className: a, "data-skeleton": "table-row", children: Array.from({ length: Math.max(1, s) }, (l, i) => /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(r, { size: "inherit", width: e[i % e.length] }) }, i)) });
+function j({ columns: a, animation: l, className: s }) {
+  const r = ["70%", "50%", "60%", "40%"];
+  return /* @__PURE__ */ t(g, { "aria-hidden": "true", className: s, "data-skeleton": "table-row", children: Array.from({ length: Math.max(1, a) }, (n, i) => /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(e, { size: "inherit", width: r[i % r.length], animation: l }) }, i)) });
 }
-function j({ size: s = "md", withName: a = !1, className: e }) {
-  return a ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: n("rst:flex rst:items-center rst:gap-3", e), "data-skeleton": "avatar", children: [
-    /* @__PURE__ */ t(r, { shape: "circle", size: s }),
-    /* @__PURE__ */ t(r, { size: "md", width: "8rem" })
-  ] }) : /* @__PURE__ */ t(r, { shape: "circle", size: s, className: e });
+function y({ size: a = "md", withName: l = !1, animation: s, className: r }) {
+  return l ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: d("rst:flex rst:items-center rst:gap-3", r), "data-skeleton": "avatar", children: [
+    /* @__PURE__ */ t(e, { shape: "circle", size: a, animation: s }),
+    /* @__PURE__ */ t(e, { size: "md", width: "8rem", animation: s })
+  ] }) : /* @__PURE__ */ t(e, { shape: "circle", size: a, animation: s, className: r });
 }
-function y({ size: s = "md", semantics: a = "definition", source: e = !1, className: l }) {
-  const i = f({ size: s, colorScheme: "neutral" }), d = /* @__PURE__ */ t(r, { size: "inherit", width: "2.5em" }), c = /* @__PURE__ */ t(u, { size: "xs", children: /* @__PURE__ */ t(r, { size: "inherit", width: "9em" }) }), m = /* @__PURE__ */ t("span", { className: h, children: /* @__PURE__ */ t(r, { size: "inherit", width: "12em" }) });
-  return a === "standalone" ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: n("rst:flex rst:flex-col rst:gap-[3px]", l), "data-skeleton": "stat", children: [
-    /* @__PURE__ */ t("span", { className: i, children: d }),
-    c,
-    e && m
-  ] }) : /* @__PURE__ */ o("div", { "aria-hidden": "true", className: n("rst:grid rst:content-start rst:gap-[3px]", l), "data-skeleton": "stat", children: [
-    /* @__PURE__ */ t("dt", { className: "rst:relative rst:col-start-1 rst:row-start-2 rst:flex", children: c }),
-    e ? /* @__PURE__ */ o("dd", { className: n("rst:m-0", i, "rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"), children: [
-      /* @__PURE__ */ t("span", { className: "rst:row-start-1", children: d }),
-      /* @__PURE__ */ t("span", { className: n(h, "rst:row-start-3"), children: /* @__PURE__ */ t(r, { size: "inherit", width: "12em" }) })
-    ] }) : /* @__PURE__ */ t("dd", { className: n("rst:m-0 rst:col-start-1 rst:row-start-1", i), children: d })
+function A({ size: a = "md", semantics: l = "definition", source: s = !1, animation: r, className: n }) {
+  const i = w({ size: a, colorScheme: "neutral" }), c = /* @__PURE__ */ t(e, { size: "inherit", width: "2.5em", animation: r }), h = /* @__PURE__ */ t(f, { size: "xs", children: /* @__PURE__ */ t(e, { size: "inherit", width: "9em", animation: r }) }), p = /* @__PURE__ */ t("span", { className: m, children: /* @__PURE__ */ t(e, { size: "inherit", width: "12em", animation: r }) });
+  return l === "standalone" ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: d("rst:flex rst:flex-col rst:gap-[3px]", n), "data-skeleton": "stat", children: [
+    /* @__PURE__ */ t("span", { className: i, children: c }),
+    h,
+    s && p
+  ] }) : /* @__PURE__ */ o("div", { "aria-hidden": "true", className: d("rst:grid rst:content-start rst:gap-[3px]", n), "data-skeleton": "stat", children: [
+    /* @__PURE__ */ t("dt", { className: "rst:relative rst:col-start-1 rst:row-start-2 rst:flex", children: h }),
+    s ? /* @__PURE__ */ o("dd", { className: d("rst:m-0", i, "rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"), children: [
+      /* @__PURE__ */ t("span", { className: "rst:row-start-1", children: c }),
+      /* @__PURE__ */ t("span", { className: d(m, "rst:row-start-3"), children: /* @__PURE__ */ t(e, { size: "inherit", width: "12em", animation: r }) })
+    ] }) : /* @__PURE__ */ t("dd", { className: d("rst:m-0 rst:col-start-1 rst:row-start-1", i), children: c })
   ] });
 }
 export {
-  j as SkeletonAvatar,
-  C as SkeletonCard,
-  y as SkeletonStat,
-  T as SkeletonTableRow
+  y as SkeletonAvatar,
+  T as SkeletonCard,
+  A as SkeletonStat,
+  j as SkeletonTableRow
 };

package/dist/components/molecules/Toast/Toaster.d.ts

@@ -21,7 +21,7 @@ export interface ToasterProps extends Pick<HotToasterProps, "position" | "gutter
  * already depend on it at the same version and already write
  * `toast.success(...)`. Wrapping means their call sites do not move; what
  * changes is that the toast stops being styled with hardcoded hex in each app
- * — game-verdict pinned `#1a1f2e` and `#10b981`, mega-squad `#413f3c` and
+ * — one app pinned `#1a1f2e` and `#10b981`, the other `#413f3c` and
  * `#f3eee3`, neither of which is in either app's palette any more.
  *
  * The `children` render prop is used rather than `toastOptions`, so the body