plass-ui 1.3.0 → 1.5.0

package/README.md

@@ -4,23 +4,25 @@
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/plass-ui/blob/main/LICENSE) [![npm latest package](https://img.shields.io/npm/v/plass-ui/latest.svg)](https://www.npmjs.com/package/plass-ui) [![npm downloads](https://img.shields.io/npm/dm/plass-ui.svg)](https://www.npmjs.com/package/plass-ui)
 
-### 📘 [**plass.cdget.com**](https://plass.cdget.com)
+### [**plass.cdget.com**](https://plass.cdget.com)
 
-Live previews and full props for every component — pick **React** in the sidebar. This README is just the quick start.
+Live previews and full props for every component. Pick **React** in the sidebar. This README is just the quick start.
 
 ---
 
-> **Plass is one design language, shipped as two libraries.** Every surface answers a single question — is this pressed, or does it hold something? A thing you press is **tinted glass**: a gradient that _turns_ through its colour family rather than darkening, a shadow thrown in that same colour, and a bloom of light that follows your pointer across it. A thing that holds something is **clear glass**: translucent, deeply blurred, edged with a white hairline, never dyed. Nothing is bevelled, nothing is embossed and nothing moves when you press it — depth is carried by light, colour and blur.
+> **Plass is one design language, shipped as two libraries.** 127 components made of tinted glass and gradients, in React and in Flutter, under the same names and the same numbers. React adds three more for problems only the DOM has.
+>
+> Every surface answers one question: is this pressed, or does it hold something? A thing you press is a tinted pane, filled with a gradient that turns through its colour family and lit by a bloom that follows your pointer. A thing that holds something is clear glass: translucent, deeply blurred, never dyed. Nothing is bevelled or embossed, and depth is carried by light, colour and blur.
 
-This is the React half. The [Flutter package](https://pub.dev/packages/plass_ui) is the other one, and the two hold the same components under the same names, the same prop vocabulary and the same numbers. They version independently, so this package's number and the pub.dev one's will not always agree.
+This is the React half. The [Flutter package](https://pub.dev/packages/plass_ui) is the other one, and the two hold the same 127 components under the same names, the same prop vocabulary and the same numbers. They version independently, so this package's number and the pub.dev one's will not always agree.
 
 - **Finished the moment it is installed.** The gradients, the shadows, the blur, the focus ring and the press response are already decided and already agree with each other. One CSS import and the first screen looks like something.
-- **Five props, not fifty.** `size`, `color`, `variant`, `density` and `elevation` mean the same thing on every component — an `md` control is 40px, `primary` is the same family — so the tenth one costs nothing to learn after the first.
+- **Five props, not fifty.** `size`, `color`, `variant`, `density` and `elevation` mean the same thing on every component (an `md` control is 40px, `primary` is the same family), so the tenth one costs nothing to learn after the first.
 - **Readable because it was measured.** Every gradient stop clears 4.5:1 against its own label, the lightest corner included. A colour choice here is not a contrast bug waiting for an audit.
 - **Accessible without the checklist.** Real roles, labels, focus management and keyboard support, not `div`s with click handlers.
 - **Dark mode you do not write.** Follows `prefers-color-scheme`, and can be forced either way on any subtree. No second palette, no colours redeclared.
 - **Types in the box.** TypeScript declarations ship with the package, so your editor knows the prop names and the values they take before you do.
-- **Nothing you did not ask for.** ESM only, tree-shakeable, a single runtime dependency, and an entry point per component for a build that cannot shake a barrel.
+- **Nothing you did not ask for.** ESM only, tree-shakeable, two runtime dependencies (`@base-ui/react` and `highlight.js`), and an entry point per component for a build that cannot shake a barrel.
 
 ## Install
 
@@ -28,7 +30,7 @@ This is the React half. The [Flutter package](https://pub.dev/packages/plass_ui)
 npm install plass-ui
 ```
 
-`react` and `react-dom` are peer dependencies — React 18 or 19. Node.js 20.19 or later.
+`react` and `react-dom` are peer dependencies, React 18 or 19. Node.js 20.19 or later.
 
 ### Setup
 
@@ -38,7 +40,7 @@ Add one line to your app's CSS entry point:
 @import 'plass-ui/styles.css';
 ```
 
-`plass-ui/styles.css` is finished CSS — the design tokens, the compiled rules for every utility class the components use, and a small reset whose every rule is specificity 0 so your own styles always win. [Tailwind CSS](https://tailwindcss.com) v4 builds this package; it does not have to be installed in yours.
+`plass-ui/styles.css` is finished CSS, the design tokens, the compiled rules for every utility class the components use, and a small reset whose every rule is specificity 0 so your own styles always win. [Tailwind CSS](https://tailwindcss.com) v4 builds this package; it does not have to be installed in yours.
 
 If your project already runs Tailwind v4, import the token sheet instead:
 
@@ -47,7 +49,7 @@ If your project already runs Tailwind v4, import the token sheet instead:
 @import 'plass-ui/tailwind.css';
 ```
 
-`plass-ui/tailwind.css` registers all 74 components with Tailwind, because Tailwind scans files rather than imports — nothing in a build connects `import { PlButton }` to the classes `PlSelect.js` spells out. A project that uses a handful of components can register the handful instead:
+`plass-ui/tailwind.css` registers all 130 components with Tailwind, because Tailwind scans files rather than imports, nothing in a build connects `import { PlButton }` to the classes `PlSelect.js` spells out. A project that uses a handful of components can register the handful instead:
 
 ```css
 @import 'tailwindcss';
@@ -56,11 +58,11 @@ If your project already runs Tailwind v4, import the token sheet instead:
 @import 'plass-ui/css/text-field.css';
 ```
 
-Still one Tailwind pass, so the utilities keep Tailwind's own order — and about 5 kB gzipped smaller for a small set of components. There is one manifest per component, named after its folder in `dist/components`.
+Still one Tailwind pass, so the utilities keep Tailwind's own order, and about 5 kB gzipped smaller for a small set of components. There is one manifest per component, named after its folder in `dist/components`.
 
 ### The page under the components
 
-Plass draws controls and sheets. It does not paint your `<body>` — but a sheet of glass over a flat white page has nothing to be in front of, and every translucent surface in the library will read as opaque. Two tokens exist for exactly this:
+Plass draws controls and sheets. It does not paint your `<body>`, but a sheet of glass over a flat white page has nothing to be in front of, and every translucent surface in the library will read as opaque. Two tokens exist for exactly this:
 
 ```css
 body {
@@ -92,7 +94,7 @@ export default function SignIn() {
 
 ### One entry point per component
 
-Every component also has an entry point of its own, for a build that cannot tree-shake a barrel — or for a server render, where the barrel loads all 74 components and their dependencies before the first one is used:
+Every component also has an entry point of its own, for a build that cannot tree-shake a barrel, or for a server render, where the barrel loads all 130 components and their dependencies before the first one is used:
 
 ```tsx
 import { PlButton } from 'plass-ui/button';
@@ -102,19 +104,19 @@ Same component, same types. The barrel is the one to reach for by default; this
 
 ### Next.js and server components
 
-Nearly every component carries `'use client'`, so a Server Component can import one directly and there is nothing to configure — no `transpilePackages`, no `next.config` entry, no provider. What the directive cannot do is carry a function across the server boundary: a file that passes `onClick`, `onValueChange` or `render` needs its own `'use client'`, which is React's rule for every client component rather than this library's. Outside a server-component graph the directive is inert.
+Nearly every component carries `'use client'`, so a Server Component can import one directly and there is nothing to configure, no `transpilePackages`, no `next.config` entry, no provider. What the directive cannot do is carry a function across the server boundary: a file that passes `onClick`, `onValueChange` or `render` needs its own `'use client'`, which is React's rule for every client component rather than this library's. Outside a server-component graph the directive is inert.
 
 `PlTable` is the exception and has no directive, because that rule would otherwise have cost it its own API: every column is a `render` callback, and a table belongs on a page that fetches its own rows. A Server Component renders it whole; a client module that imports it gets a client component, as it does for anything else it imports.
 
 ### Dark mode
 
-Follows `prefers-color-scheme` with no configuration. To force it either way, put `.dark` / `.light` — or `[data-theme='dark']` / `[data-theme='light']` — on any ancestor, `<html>` included.
+Follows `prefers-color-scheme` with no configuration. To force it either way, put `.dark` / `.light` (or `[data-theme='dark']` / `[data-theme='light']`) on any ancestor, `<html>` included.
 
 One thing does **not** change with the theme, and it is deliberate: the colour of a key. What changes is the sheet it rests on.
 
 ## Components
 
-Every component is exported under a `Pl` prefix — `Button`, `Card` and `Table` are the most-taken identifiers in the ecosystem, and a consumer should not have to alias ours on import.
+Every component is exported under a `Pl` prefix. `Button`, `Card` and `Table` are the most-taken identifiers in the ecosystem, and a consumer should not have to alias ours on import.
 
 ### Display
 
@@ -150,14 +152,14 @@ This package is installed and run from its own folder; there is no install at th
 
 ```bash
 npm install
-npm test              # Vitest, single run (headless Chromium)
+npm test              # Vitest, three shards of headless Chromium
 npm run typecheck     # tsc --noEmit over both TS projects
 npm run build         # tsc + terser + build-styles → dist/
 npm run lint          # ESLint
 npm run size          # what the package costs, packed and installed
 ```
 
-The documentation site lives at the repository root, in [`docs/`](https://github.com/jooy2/plass-ui/tree/main/docs), and renders these components from `src/` through a Vite alias — so `cd docs && npm run dev` is the develop-and-eyeball loop and there is no separate demo app. [CONTRIBUTING.md](https://github.com/jooy2/plass-ui/blob/main/CONTRIBUTING.md) has the rest.
+The documentation site lives at the repository root, in [`docs/`](https://github.com/jooy2/plass-ui/tree/main/docs), and renders these components from `src/` through a Vite alias, so `cd docs && npm run dev` is the develop-and-eyeball loop and there is no separate demo app. [CONTRIBUTING.md](https://github.com/jooy2/plass-ui/blob/main/CONTRIBUTING.md) has the rest.
 
 ## License
 

package/dist/components/accordion/PlAccordion.d.ts

@@ -60,7 +60,7 @@ export interface PlAccordionItemProps extends Omit<React.ComponentPropsWithoutRe
     /** Content before the title — an icon, a status dot, a count. */
     startIcon?: React.ReactNode;
     /**
-     * A control pinned to the end of the header, before the chevron.
+     * A control pinned to the end of the header, after the chevron.
      *
      * Deliberately outside the trigger: a header that both folds and holds a
      * switch has two things to press, and one of them cannot be nested inside the

package/dist/components/alert/PlAlert.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{CloseIcon as a,severityIcon as i}from"../../internal/icons.js";import{controlSlots as r,focusRingClasses as o,glassClasses as n,hasContent as c,iconClasses as d,radiusClasses as f,sheetBodyClasses as m,sheetHeaderGapClasses as p,sheetPaddingXClasses as u,sheetPaddingYClasses as h,sheetSectionGapClasses as v,sheetTitleClasses as x,transitionClasses as g}from"../../internal/styles.js";const b={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[n,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--p-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft)"},y={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"},j={solid:"",glass:"text-(--plass-muted-fg)",ghost:"text-(--plass-muted-fg)"},N={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const PlAlert=/* @__PURE__ */l.forwardRef(function PlAlert({variant:l="glass",size:n,color:w,density:k,elevation:$=0,title:z,icon:A,action:C,onClose:P,closeLabel:_="Dismiss",className:B,style:D,children:L,...R},q){const E=t(),F=n??E.size??"md",G=w??E.color??"info",H=k??E.density??"default",I=void 0===A?i(G):A,J=y[l],K=c(z);return e("div",{ref:q,role:N[G],className:["flex w-full items-start",u[H][F],h[H][F],f[F],v[F],m[F],g,b[l],d,B??""].filter(Boolean).join(" "),style:{...r(G,$,l),...D},...R,children:[c(I)?s("span",{className:`flex h-[1lh] shrink-0 items-center ${J}`,children:I}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${p[F]}`,children:[K?s("div",{className:`plass-title font-semibold ${x[F]} ${J}`,children:z}):null,c(L)?s("div",{className:K?j[l]:void 0,children:L}):null]}),c(C)?s("div",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null,P?s("span",{className:"flex h-[1lh] shrink-0 items-center",children:s("button",{type:"button","aria-label":_,onClick:P,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",o].join(" "),children:s(a,{})})}):null]})});
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{CloseIcon as i,severityIcon as r}from"../../internal/icons.js";import{controlSlots as o,focusRingClasses as n,forcedFieldEdgeClasses as c,glassClasses as d,hasContent as m,iconClasses as f,radiusClasses as p,sheetBodyClasses as u,sheetHeaderGapClasses as h,sheetPaddingXClasses as v,sheetPaddingYClasses as x,sheetSectionGapClasses as g,sheetTitleClasses as b,transitionClasses as y}from"../../internal/styles.js";const j={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",c].join(" "),glass:/* @__PURE__ */[d,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--p-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft)"},N={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"},w={solid:"",glass:"text-(--plass-muted-fg)",ghost:"text-(--plass-muted-fg)"},k={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const PlAlert=/* @__PURE__ */l.forwardRef(function PlAlert({variant:l="glass",size:c,color:d,density:$,elevation:z=0,title:A,icon:C,action:P,onClose:_,closeLabel:B,className:L,style:R,children:q,...D},E){const F=t(),G=a(),H=B??G.dismiss,I=c??F.size??"md",J=d??F.color??"info",K=$??F.density??"default",M=void 0===C?r(J):C,O=N[l],Q=m(A);return e("div",{ref:E,role:k[J],className:["flex w-full items-start",v[K][I],x[K][I],p[I],g[I],u[I],y,j[l],f,L??""].filter(Boolean).join(" "),style:{...o(J,z,l),...R},...D,children:[m(M)?s("span",{className:`flex h-[1lh] shrink-0 items-center ${O}`,children:M}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${h[I]}`,children:[Q?s("div",{className:`plass-title font-semibold ${b[I]} ${O}`,children:A}):null,m(q)?s("div",{className:Q?w[l]:void 0,children:q}):null]}),m(P)?s("div",{className:"flex h-[1lh] shrink-0 items-center",children:P}):null,_?s("span",{className:"flex h-[1lh] shrink-0 items-center",children:s("button",{type:"button","aria-label":H,onClick:_,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",n].join(" "),children:s(i,{})})}):null]})});

package/dist/components/anchor/PlAnchor.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+import type { PlBackTopTarget } from '../back-top/PlBackTop.js';
+/** One heading in the list. */
+export interface PlAnchorItem {
+    /**
+     * The fragment it points at — `#getting-started`. The `id` it names is what
+     * the list watches, so a heading with no `id` cannot be tracked.
+     */
+    href: string;
+    /** What the row says. */
+    label: React.ReactNode;
+    /**
+     * How deep the heading sits, from `0`. Only the indent depends on it.
+     * @default 0
+     */
+    depth?: number;
+}
+export interface PlAnchorProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onSelect'> {
+    /** The headings, in the order they appear in the document. */
+    items: readonly PlAnchorItem[];
+    /**
+     * The `href` of the row that is lit, taking the tracking over.
+     *
+     * For a list driven by a router rather than by the scroll — a documentation
+     * site whose sections are separate pages, say. Leaving it out is the ordinary
+     * case and the reason the component exists.
+     */
+    active?: string;
+    /**
+     * How far below the top of `target` the reading line sits, in pixels.
+     *
+     * The height of whatever is pinned over the page. Without it a heading goes
+     * on counting as the *next* one after it has already slid out of sight behind
+     * a sticky header — so the list stays a section behind the reader for the
+     * height of the bar.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * What scrolls the headings. The window by default; a ref or an element for
+     * an app shell whose `<main>` scrolls on its own.
+     *
+     * The window of such a shell never moves, so a list following it would light
+     * nothing however far the reader went.
+     */
+    target?: PlBackTopTarget;
+    /** Called with the item that was clicked, before the browser moves. */
+    onSelect?: (item: PlAnchorItem, event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** A heading for the list itself. Drawn above it. */
+    label?: React.ReactNode;
+    /** Accessible name of the navigation region. Never drawn. @default 'On this page' */
+    navLabel?: string;
+    /** @default 'sm' */
+    size?: PlassSize;
+    /** The family the lit row takes. @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * A table of contents that follows the reader down the page.
+ *
+ * It takes its headings as **data** rather than as children, which is the
+ * opposite of most of this library and the right way round here: a table of
+ * contents is generated — from a Markdown file, from a CMS, from the document's
+ * own headings — and the thing that generates it produces a flat list, in
+ * document order, with a level on each entry.
+ *
+ * **It is a flat list and not a nested one**, and that is a decision rather
+ * than a shortcut. Real documents skip levels — an `h2` followed by an `h4` —
+ * so a nesting built from a flat list is a guess at a shape nobody wrote. The
+ * depth is carried by the indent, and the reading order is the document's own.
+ *
+ * The tracking is the component. What is lit is **the last heading whose top has
+ * passed the reading line**, not whichever heading happens to be on screen:
+ * three can be visible at once, and the one the reader is inside is the highest
+ * of them that is already above them. `offset` is where that line sits, and it
+ * is the height of whatever is pinned over the page — without it a heading goes
+ * on counting as the next one after it has slid out of sight behind the bar,
+ * and the list stays a section behind.
+ *
+ * `target` is what is scrolled, the window unless it says otherwise. An app
+ * shell whose `<main>` scrolls on its own never moves the window, and the line
+ * is measured from the top of that element instead.
+ */
+export declare const PlAnchor: React.ForwardRefExoticComponent<PlAnchorProps & React.RefAttributes<HTMLElement>>;

package/dist/components/anchor/PlAnchor.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{resolveScrollTarget as s}from"../../internal/scroll-target.js";import{useLabels as o}from"../../internal/labels.js";import{controlTextLeadingClasses as l,cx as a,focusRingClasses as i,surfaceSlots as c,transitionClasses as m}from"../../internal/styles.js";export const PlAnchor=/* @__PURE__ */r.forwardRef(function PlAnchor({items:f,active:d,offset:p=0,target:u,onSelect:h,label:g,navLabel:v,size:x,color:b,className:w,style:j,...y},E){const N=n(),A=o(),L=v??A.onThisPage,z=x??N.size??"sm",H=b??N.color??"primary",[B,C]=r.useState(void 0),P=void 0!==d;r.useEffect(()=>{if(P)return;const e=s(u);if(!e)return;let t=0;const measure=()=>{t=0,C(function readingAt(e,t,r){if(0===e.length)return;const n=r instanceof Window,s=n?document.documentElement.scrollHeight:r.scrollHeight,o=n?window.innerHeight:r.clientHeight,l=n?window.scrollY:r.scrollTop;if(s>o+1&&o+l>=s-2)return e[e.length-1].href;const a=n?0:r.getBoundingClientRect().top+r.clientTop;let i;for(const r of e){const e=document.getElementById(r.href.replace(/^#/,""));e&&e.getBoundingClientRect().top-a-t<=1&&(i=r.href)}return i}(f,p,e))},onScroll=()=>{t||=requestAnimationFrame(measure)};return measure(),e.addEventListener("scroll",onScroll,{passive:!0}),window.addEventListener("resize",onScroll,{passive:!0}),()=>{t&&cancelAnimationFrame(t),e.removeEventListener("scroll",onScroll),window.removeEventListener("resize",onScroll)}},[P,f,p,u]);const R=P?d:B;return t("nav",{ref:E,"aria-label":L,className:a("flex flex-col gap-2",l[z],w),style:{...c(H,0),...j},...y,children:[g?e("span",{className:"font-semibold text-(--plass-fg)",children:g}):null,e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:f.map(t=>{const r=t.href===R;return e("li",{className:"min-w-0",children:e("a",{href:t.href,"aria-current":r?"location":void 0,onClick:e=>h?.(t,e),className:a("block truncate rounded-(--plass-radius-xs) px-2 py-1","border-s-2",m,i,r?"[border-color:var(--p-accent)] bg-(--p-soft) font-medium text-(--p-accent)":"border-transparent text-(--plass-muted-fg) hover:bg-(--plass-glass-hover) hover:text-(--plass-fg)"),style:{paddingInlineStart:`calc(0.5rem + ${t.depth??0} * 0.75rem)`},children:t.label})},t.href)})})]})});

package/dist/components/anchor/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnchor } from './PlAnchor.js';
+export type { PlAnchorItem, PlAnchorProps } from './PlAnchor.js';

package/dist/components/anchor/index.js

@@ -0,0 +1 @@
+export{PlAnchor}from"./PlAnchor.js";

package/dist/components/animate-appear/PlAnimateAppear.d.ts

@@ -5,9 +5,19 @@ export interface PlAnimateAppearProps extends PlassAnimateProps, React.Component
     /**
      * How long after one child the next one starts, in milliseconds. This is the
      * whole effect — everything else is what a single child does.
+     *
+     * The same prop the six single-keyframe effects take, and the same machinery
+     * under it; what differs is the default, because a stagger of `0` on a set is
+     * a set that is not a set.
      * @default 70
      */
     stagger?: number;
+    /**
+     * Milliseconds added to each child's duration, so later children take longer
+     * — or, negative, less long. Floored at `0`.
+     * @default 0
+     */
+    durationStep?: number;
     /**
      * Which edge each child drifts in from.
      * @default 'bottom'

package/dist/components/animate-appear/PlAnimateAppear.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as a from"react";import{useRender as t}from"@base-ui/react/use-render";import{animBaseClass as r,animationClasses as s,animationSlots as n,isInfinite as i,slideOffsets as l,useAnimationRun as o}from"../../internal/animate.js";import{cx as m}from"../../internal/styles.js";export const PlAnimateAppear=/* @__PURE__ */a.forwardRef(function PlAnimateAppear({duration:p=380,delay:d=0,easing:c,repeat:f=1,alternate:y,paused:u,trigger:h="mount",play:g,once:x=!0,threshold:A=.2,stagger:N=70,from:j="bottom",distance:b="0.75rem",fade:E=!0,reverse:P=!1,render:$,className:v,style:w,children:C,...R},V){const k=o({trigger:h,play:g,once:x,threshold:A,paused:u,infinite:i(f)}),{x:q,y:z}=l(j,b),B=a.Children.toArray(C),D=`${r} ${s.slide}`,F=B.map((t,r)=>{const s=P?B.length-1-r:r,i=n({duration:p,delay:d+s*N,easing:c,repeat:f,alternate:y,x:q,y:z,opacity:E?0:1});if(!a.isValidElement(t))return e("span",{className:D,style:i,children:t},r);const l=t.props;return a.cloneElement(t,{className:m(D,l.className),style:{...i,...l.style}})});return t({render:$,ref:[V,k.ref],props:{...R,className:v,style:{"--p-anim-state":k.state,...w},...k.handlers,"data-plass-animation":"appear","data-state":k.state,children:F}})});
+"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,animateChildren as n,animationClasses as s,animationSlots as i,isInfinite as o,slideOffsets as p,staggerSlots as d,useAnimationRun as l}from"../../internal/animate.js";export const PlAnimateAppear=/* @__PURE__ */e.forwardRef(function PlAnimateAppear({duration:e=380,delay:m=0,easing:c,repeat:u=1,alternate:f,paused:g,trigger:y="mount",play:h,once:x=!0,threshold:A=.2,stagger:b=70,durationStep:v=0,from:N="bottom",distance:P="0.75rem",fade:S=!0,reverse:$=!1,render:j,className:w,style:R,children:k,...q},z){const B=l({trigger:y,play:h,once:x,threshold:A,paused:g,infinite:o(u)}),{x:C,y:D}=p(N,P),E=n(k,`${t} ${s.slide}`,(a,r)=>i(d({duration:e,delay:m,easing:c,repeat:u,alternate:f,x:C,y:D,opacity:S?0:1},{index:a,count:r,stagger:b,durationStep:v,reverse:$})));return r({render:j,ref:[z,B.ref],props:{...a(q,B.handlers),className:w,style:{"--p-anim-state":B.state,...R},"data-plass-animation":"appear","data-state":B.state,children:E}})});

package/dist/components/animate-blink/PlAnimateBlink.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateProps } from '../../types.js';
-export interface PlAnimateBlinkProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateBlinkProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How faint it gets at the bottom of the cycle, between `0` and `1`. Raise it
      * for something that has to stay readable while it pulses.

package/dist/components/animate-blink/PlAnimateBlink.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as a}from"../../internal/styles.js";export const PlAnimateBlink=/* @__PURE__ */e.forwardRef(function PlAnimateBlink({duration:e=1e3,delay:i=0,easing:s,repeat:l="infinite",alternate:o,paused:m,trigger:p="mount",play:c,once:d=!0,threshold:f=.2,min:u=0,render:y,className:g,style:h,children:k,...N},b){const j=n({effect:"blink",duration:e,delay:i,easing:s,repeat:l,alternate:o,opacity:u,trigger:p,play:c,once:d,threshold:f,paused:m,infinite:t(l)});return r({render:y,ref:[b,j.ref],props:{...N,className:a(j.className,g),style:{...j.style,...h},...j.props,children:k}})});
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useRender as t}from"@base-ui/react/use-render";import{isInfinite as n,useAnimateElement as a}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateBlink=/* @__PURE__ */e.forwardRef(function PlAnimateBlink({duration:e=1e3,delay:s=0,easing:l,repeat:o="infinite",alternate:m,paused:p,trigger:c="mount",play:d,once:f=!0,threshold:g=.2,timeline:u,range:y,stagger:h=0,durationStep:b=0,reverse:k=!1,min:N=0,render:j,className:v,style:A,children:B,...P},S){const w=a({effect:"blink",duration:e,delay:s,easing:l,repeat:o,alternate:m,opacity:N,trigger:c,play:d,once:f,threshold:g,paused:p,infinite:n(o),timeline:u,range:y,stagger:h,durationStep:b,reverse:k,children:B});return t({render:j,ref:[S,w.ref],props:{...r(P,w.props),className:i(w.className,v),style:{...w.style,...A},children:w.children}})});

package/dist/components/animate-counter/PlAnimateCounter.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateTrigger } from '../../types.js';
+export interface PlAnimateCounterProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /** The number it arrives at, and the one a screen reader is told. */
+    value: number;
+    /**
+     * The number it starts from.
+     * @default 0
+     */
+    from?: number;
+    /**
+     * How long the count takes, in milliseconds.
+     * @default 1200
+     */
+    duration?: number;
+    /** How long it waits before starting, in milliseconds. @default 0 */
+    delay?: number;
+    /**
+     * How the number is written — `Intl.NumberFormat` options, so a currency, a
+     * percentage or a compact `1.2M` all work.
+     *
+     * This is the reason the count is JavaScript rather than a `@property` and a
+     * CSS counter, which is otherwise the neater way to animate a number: CSS can
+     * tick a value, and it cannot put a thousands separator in one.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * The shape of the count, as a function from `0`…`1` to `0`…`1`.
+     *
+     * A function rather than a CSS easing string, and not for want of trying: no
+     * CSS animation is running here, so there is nothing to hand a string to. It
+     * eases out by default, which is what a number arriving should do — quick
+     * enough to read as counting, slow enough at the end to land on the figure
+     * rather than snap to it.
+     */
+    easing?: (t: number) => number;
+    /**
+     * What starts the count.
+     *
+     * **`visible` by default**, and it is the one component in the library that
+     * does not start on mount. That is deliberate rather than an oversight: an
+     * entrance played off screen has still delivered its content, and a count
+     * that ran off screen delivered a number that was simply already there. A
+     * counter is the one effect whose whole point is being watched.
+     * @default 'visible'
+     */
+    trigger?: PlassAnimateTrigger;
+    /** Runs it, when `trigger` is `manual`. */
+    play?: boolean;
+    /** With `visible`, whether it counts only the first time. @default true */
+    once?: boolean;
+    /** With `visible`, how much has to be on screen to count. @default 0.2 */
+    threshold?: number;
+    /** Holds the count where it is. */
+    paused?: boolean;
+    /** Renders something other than a `<span>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * A number counting up to what it is.
+ *
+ * The one effect in the group that animates **content** rather than a box: what
+ * moves is the figure itself, one frame at a time, from `from` to `value`.
+ *
+ * It is JavaScript and not a keyframe, and the reason is formatting. A
+ * registered custom property and a CSS counter can tick a number perfectly
+ * well — and cannot put a thousands separator in one, or a currency symbol, or
+ * fold 1,200,000 into `1.2M`. A counter that cannot be formatted is a counter
+ * nobody can use on a dashboard, so `Intl.NumberFormat` decides what is drawn
+ * and the frame loop only decides which number it is drawing.
+ *
+ * **It starts when it is seen, not when it mounts**, which is the one place a
+ * `PlAnimate*` here departs from the rest. An entrance played off screen has
+ * still delivered its content; a count that ran off screen delivered a number
+ * that was already sitting there when the reader arrived.
+ *
+ * **What a screen reader hears is the final number, once.** The ticking figure
+ * is `aria-hidden` and the answer is beside it in a clipped span, because a
+ * number changing sixty times a second in the accessibility tree is either
+ * silence or sixty announcements, and neither is the figure.
+ */
+export declare const PlAnimateCounter: React.ForwardRefExoticComponent<PlAnimateCounterProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/animate-counter/PlAnimateCounter.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as i}from"../../internal/animate.js";import{useDefaults as o}from"../../internal/defaults.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{cx as m,srOnlyClasses as c}from"../../internal/styles.js";function easeOut(e){return 1-(1-e)**3}export const PlAnimateCounter=/* @__PURE__ */n.forwardRef(function PlAnimateCounter({value:l,from:f=0,duration:d=1200,delay:p=0,format:h,easing:g=easeOut,trigger:j="visible",play:A,once:F=!0,threshold:b=.2,paused:x,render:v,className:y,...N},q){const E=o(),M=u(),R=i({trigger:j,play:A,once:F,threshold:b,paused:x,infinite:!1,nonce:l}),w=n.useMemo(()=>new Intl.NumberFormat(E.locale,h),[E.locale,h]),[C,O]=n.useState(()=>M?l:f),P=n.useRef(0),I=n.useRef(g);n.useEffect(()=>{I.current=g}),n.useEffect(()=>{P.current=0},[R.runs,l,f]),n.useEffect(()=>{if(M)return void O(l);if(!R.started)return P.current=0,void O(f);if(x)return;const e=Math.max(1,d);let r,t=0;const step=n=>{r??=n-P.current,P.current=n-r;const a=Math.min(1,(P.current-p)/e);a<0?t=requestAnimationFrame(step):(O(f+(l-f)*I.current(a)),a<1&&(t=requestAnimationFrame(step)))};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[R.started,R.runs,M,x,l,f,d,p]);const S=w.format(l);return s({render:v??e("span",{}),ref:[q,R.ref],props:{className:m("tabular-nums",y),"data-plass-animation":"counter","data-state":R.state,children:t(r,{children:[e("span",{className:c,children:S}),e("span",{"aria-hidden":"true",children:w.format(C)})]}),...a(N,R.handlers)}})});

package/dist/components/animate-counter/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateCounter } from './PlAnimateCounter.js';
+export type { PlAnimateCounterProps } from './PlAnimateCounter.js';

package/dist/components/animate-counter/index.js

@@ -0,0 +1 @@
+export{PlAnimateCounter}from"./PlAnimateCounter.js";

package/dist/components/animate-fade/PlAnimateFade.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
-export interface PlAnimateFadeProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateFadeProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content arrives or leaves.
      * @default 'in'

package/dist/components/animate-fade/PlAnimateFade.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as t}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateFade=/* @__PURE__ */e.forwardRef(function PlAnimateFade({duration:e=300,delay:s=0,easing:o,repeat:i=1,alternate:l,paused:d,trigger:m="mount",play:p,once:c=!0,threshold:f=.2,mode:u="in",from:y=0,render:g,className:h,style:N,children:j,...A},F){const P=t({effect:"fade",duration:e,delay:s,easing:o,repeat:i,alternate:l,mode:u,opacity:y,trigger:m,play:p,once:c,threshold:f,paused:d,infinite:a(i)});return r({render:g,ref:[F,P.ref],props:{...A,className:n(P.className,h),style:{...P.style,...N},...P.props,children:j}})});
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useRender as t}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateFade=/* @__PURE__ */e.forwardRef(function PlAnimateFade({duration:e=300,delay:s=0,easing:o,repeat:l=1,alternate:d,paused:m,trigger:p="mount",play:c,once:f=!0,threshold:g=.2,timeline:u,range:y,stagger:h=0,durationStep:N=0,reverse:b=!1,mode:j="in",from:v=0,render:A,className:F,style:P,children:S,...w},x){const R=n({effect:"fade",duration:e,delay:s,easing:o,repeat:l,alternate:d,mode:j,opacity:v,trigger:p,play:c,once:f,threshold:g,paused:m,infinite:a(l),timeline:u,range:y,stagger:h,durationStep:N,reverse:b,children:S});return t({render:A,ref:[x,R.ref],props:{...r(w,R.props),className:i(R.className,F),style:{...R.style,...P},children:R.children}})});

package/dist/components/animate-float/PlAnimateFloat.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateProps, PlassOrientation } from '../../types.js';
+export interface PlAnimateFloatProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How far it drifts from where it started. A number is pixels.
+     *
+     * Small on purpose. A float is meant to be noticed at the edge of attention
+     * and not looked at, and past about a dozen pixels it stops being a drift and
+     * starts being something moving on the page.
+     * @default 8
+     */
+    distance?: number | string;
+    /**
+     * Which way it drifts.
+     * @default 'vertical'
+     */
+    orientation?: PlassOrientation;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content drifting gently, and not going anywhere.
+ *
+ * The odd one out among the `PlAnimate*` components, and the page says so: the
+ * other effects are **entrances**, played once when content arrives. This one
+ * never finishes. It is for the thing that is meant to read as weightless — an
+ * illustration on a landing page, a mark over an empty state — and for nothing
+ * that a reader has to read while it moves.
+ *
+ * That is also why it is **not** in `PlassAnimation`, the union `mode`,
+ * `stagger` and the shared effect map are built on. That union is the set of
+ * ways content can arrive; an endless drift is not an arrival, and every
+ * component importing the map would have paid for a row nothing else could
+ * want.
+ *
+ * The cycle is symmetric — home, out, home — so however many times it runs it
+ * ends where it started. A float stopped mid-cycle would leave the element
+ * permanently a few pixels out of place, which reads as a layout bug rather
+ * than as an effect that ended.
+ *
+ * `easing` defaults to `ease-in-out` rather than to the house curve, which is
+ * the one place in the library that is right: the house curve is an entrance's,
+ * fast out of the gate and slow into place, and a drift with it would lurch at
+ * each end of the cycle instead of turning around.
+ *
+ * A reader who asked for less motion sees none of it, as with every effect
+ * here. Nothing may depend on the movement.
+ */
+export declare const PlAnimateFloat: React.ForwardRefExoticComponent<PlAnimateFloatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-float/PlAnimateFloat.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as i}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateFloat=/* @__PURE__ */e.forwardRef(function PlAnimateFloat({duration:e=3e3,delay:l=0,easing:o="ease-in-out",repeat:c="infinite",alternate:m,paused:p,trigger:d="mount",play:f,once:u=!0,threshold:y=.2,distance:h=8,orientation:g="vertical",render:N,className:b,style:j,children:v,...x},A){const F=n(h),P="vertical"===g,w=i({effect:null,duration:e,delay:l,easing:o,repeat:c,alternate:m,x:P?"0":F,y:P?`-${F}`:"0",trigger:d,play:f,once:u,threshold:y,paused:p,infinite:!0,children:v});return r({render:N,ref:[A,w.ref],props:{...a(x,w.props),className:s(t,"plass-anim-float",w.className,b),style:{...w.style,...j},"data-plass-animation":"float",children:w.children}})});

package/dist/components/animate-float/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateFloat } from './PlAnimateFloat.js';
+export type { PlAnimateFloatProps } from './PlAnimateFloat.js';

package/dist/components/animate-float/index.js

@@ -0,0 +1 @@
+export{PlAnimateFloat}from"./PlAnimateFloat.js";

package/dist/components/animate-grow/PlAnimateGrow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
-export interface PlAnimateGrowProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateGrowProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content unfolds or folds away.
      * @default 'in'

package/dist/components/animate-grow/PlAnimateGrow.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateGrow=/* @__PURE__ */e.forwardRef(function PlAnimateGrow({duration:e=320,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:g=.8,origin:y="center",fade:h=!0,render:w,className:N,style:j,children:A,...G},P){const b=a({effect:"grow",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:u,scale:g,opacity:h?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(s)});return r({render:w,ref:[P,b.ref],props:{...G,className:n(b.className,N),style:{transformOrigin:y,...b.style,...j},...b.props,children:A}})});
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useRender as t}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateGrow=/* @__PURE__ */e.forwardRef(function PlAnimateGrow({duration:e=320,delay:o=0,easing:s,repeat:l=1,alternate:m,paused:d,trigger:p="mount",play:c,once:g=!0,threshold:f=.2,timeline:u,range:y,stagger:h=0,durationStep:w=0,reverse:N=!1,mode:b="in",from:j=.8,origin:v="center",fade:A=!0,render:G,className:P,style:S,children:x,...R},k){const q=n({effect:"grow",duration:e,delay:o,easing:s,repeat:l,alternate:m,mode:b,scale:j,opacity:A?0:1,trigger:p,play:c,once:g,threshold:f,paused:d,infinite:a(l),timeline:u,range:y,origin:v,stagger:h,durationStep:w,reverse:N,children:x});return t({render:G,ref:[k,q.ref],props:{...r(R,q.props),className:i(q.className,P),style:{...q.style,...S},children:q.children}})});

package/dist/components/animate-headline/PlAnimateHeadline.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as n,lengthValue as a,useAnimationRun as r}from"../../internal/animate.js";import{usePrefersReducedMotion as i}from"../../internal/media.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateHeadline=/* @__PURE__ */t.forwardRef(function PlAnimateHeadline({duration:l=460,delay:o=0,easing:u,repeat:m="infinite",paused:c,trigger:d="mount",play:f,once:p=!0,threshold:h=.2,interval:g=2600,index:v,defaultIndex:y=0,onIndexChange:x,loop:j=!0,rise:E="100%",className:N,style:T,children:A,...C},R){const k=r({trigger:d,play:f,once:p,threshold:h,paused:c,infinite:n(m)}),H=i(),I=t.Children.toArray(A),M=I.length,[P,S]=t.useState(y),b=Math.min(v??P,Math.max(M-1,0)),[w,V]=t.useState(null),$=t.useRef(b);t.useEffect(()=>{$.current!==b&&(V($.current),$.current=b)},[b]),t.useEffect(()=>{if(null===w)return;const e=setTimeout(()=>V(null),l);return()=>clearTimeout(e)},[w,l]);const q=t.useCallback(()=>{const e=b+1;if(e>=M){if(!j)return;return void 0===v&&S(0),void x?.(0)}void 0===v&&S(e),x?.(e)},[b,M,j,v,x]),z=t.useRef(!1);return t.useEffect(()=>{if(void 0!==v||M<2||"running"!==k.state)return;if(!j&&b===M-1)return;const e=setTimeout(()=>{z.current=!0,q()},g+(z.current?0:o));return()=>clearTimeout(e)},[v,M,k.state,g,o,q,j,b]),e("div",{ref:e=>{k.ref(e),"function"==typeof R?R(e):R&&(R.current=e)},className:s("plass-headline",N),style:{"--p-anim-duration":`${l}ms`,"--p-anim-rise":a(E),...u?{"--p-anim-ease":u}:{},"--p-anim-state":k.state,...T},"data-plass-animation":"headline","data-state":k.state,...k.handlers,...C,children:I.map((n,a)=>{const r=a===b?"active":a!==w||H?void 0:"leaving";if(!t.isValidElement(n))return e("span",{className:"plass-headline-item","data-state":r,children:n},a);const i=n.props;return t.cloneElement(n,{key:a,className:s("plass-headline-item",i.className),"data-state":r})})})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as r,useAnimationRun as s}from"../../internal/animate.js";import{usePrefersReducedMotion as i}from"../../internal/media.js";import{cx as l}from"../../internal/styles.js";export const PlAnimateHeadline=/* @__PURE__ */t.forwardRef(function PlAnimateHeadline({duration:o=460,delay:u=0,easing:c,repeat:m="infinite",paused:d,trigger:f="mount",play:p,once:h=!0,threshold:g=.2,interval:v=2600,index:y,defaultIndex:x=0,onIndexChange:E,loop:j=!0,rise:N="100%",className:R,style:T,children:A,...C},b){const k=s({trigger:f,play:p,once:h,threshold:g,paused:d,infinite:a(m)}),H=i(),I=t.Children.toArray(A),M=I.length,[P,S]=t.useState(x),w=Math.min(y??P,Math.max(M-1,0)),[V,$]=t.useState(null),q=t.useRef(w);t.useEffect(()=>{q.current!==w&&($(q.current),q.current=w)},[w]),t.useEffect(()=>{if(null===V)return;const e=setTimeout(()=>$(null),o);return()=>clearTimeout(e)},[V,o]);const z=t.useCallback(()=>{const e=w+1;if(e>=M){if(!j)return;return void 0===y&&S(0),void E?.(0)}void 0===y&&S(e),E?.(e)},[w,M,j,y,E]),B=t.useRef(z);t.useEffect(()=>{B.current=z});const D=t.useRef(!1);return t.useEffect(()=>{if(void 0!==y||M<2||"running"!==k.state)return;if(!j&&w===M-1)return;const e=setTimeout(()=>{D.current=!0,B.current()},v+(D.current?0:u));return()=>clearTimeout(e)},[y,M,k.state,v,u,j,w]),e("div",{ref:e=>{k.ref(e),"function"==typeof b?b(e):b&&(b.current=e)},className:l("plass-headline",R),style:{"--p-anim-duration":`${o}ms`,"--p-anim-rise":r(N),...c?{"--p-anim-ease":c}:{},"--p-anim-state":k.state,...T},"data-plass-animation":"headline","data-state":k.state,...n(C,k.handlers),children:I.map((n,a)=>{const r=a===w?"active":a!==V||H?void 0:"leaving";if(!t.isValidElement(n))return e("span",{className:"plass-headline-item","data-state":r,children:n},a);const s=n.props;return t.cloneElement(n,{key:a,className:l("plass-headline-item",s.className),"data-state":r})})})});

package/dist/components/animate-lighting/PlAnimateLighting.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{isInfinite as i,useAnimateElement as t}from"../../internal/animate.js";import{cx as n,radiusClasses as l}from"../../internal/styles.js";export const PlAnimateLighting=/* @__PURE__ */e.forwardRef(function PlAnimateLighting({duration:e=3e3,delay:o=0,easing:s,repeat:p="infinite",alternate:m,paused:d,trigger:g="mount",play:c,once:f=!0,threshold:u=.2,color:h,glow:y,size:w,spread:$=3,arc:b=50,blur:j=5,reverse:v=!1,render:x,className:z,style:A,children:L,...N},P){const R=r(),k=h??R.color??"primary",q=w??R.size??"md",B=t({effect:null,duration:e,delay:o,easing:s,repeat:p,alternate:m,mode:v?"out":"in",trigger:g,play:c,once:f,threshold:u,paused:d,infinite:i(p)});return a({render:x,ref:[P,B.ref],props:{...N,className:n("plass-anim-lighting",l[q],z),style:{...B.style,"--p-anim-glow-from":y??`var(--plass-${k}-solid)`,"--p-anim-glow-to":y??`var(--plass-${k}-solid-to)`,"--p-anim-glow-width":`${$}px`,"--p-anim-glow-arc":`${b}deg`,"--p-anim-glow-blur":`${j}px`,...A},...B.props,"data-plass-animation":"lighting",children:L}})});
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useDefaults as a}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as o,radiusClasses as l}from"../../internal/styles.js";export const PlAnimateLighting=/* @__PURE__ */e.forwardRef(function PlAnimateLighting({duration:e=3e3,delay:s=0,easing:p,repeat:m="infinite",alternate:d,paused:g,trigger:c="mount",play:f,once:u=!0,threshold:h=.2,color:y,glow:w,size:$,spread:b=3,arc:j=50,blur:v=5,reverse:x=!1,render:z,className:A,style:L,children:N,...P},R){const k=a(),q=y??k.color??"primary",B=$??k.size??"md",C=n({effect:null,duration:e,delay:s,easing:p,repeat:m,alternate:d,mode:x?"out":"in",trigger:c,play:f,once:u,threshold:h,paused:g,infinite:t(m)});return i({render:z,ref:[R,C.ref],props:{...r(P,C.props),className:o("plass-anim-lighting",l[B],A),style:{...C.style,"--p-anim-glow-from":w??`var(--plass-${q}-solid)`,"--p-anim-glow-to":w??`var(--plass-${q}-solid-to)`,"--p-anim-glow-width":`${b}px`,"--p-anim-glow-arc":`${j}deg`,"--p-anim-glow-blur":`${v}px`,...L},"data-plass-animation":"lighting",children:N}})});

package/dist/components/animate-marquee/PlAnimateMarquee.d.ts

@@ -27,7 +27,8 @@ export interface PlAnimateMarqueeProps extends PlassAnimateProps, React.Componen
     /**
      * How many copies of the content are laid end to end. Two is enough for
      * anything at least as wide as its container; raise it when the content is
-     * short enough to leave a hole behind itself.
+     * short enough to leave a hole behind itself. Only the first is drawn under
+     * `prefers-reduced-motion`.
      * @default 2
      */
     copies?: number;
@@ -58,8 +59,16 @@ export interface PlAnimateMarqueeProps extends PlassAnimateProps, React.Componen
  * pointer cannot be clicked reliably, and a link inside a marquee that never
  * stops is a link nobody can follow.
  *
- * Only the first copy is read out. The rest carry `aria-hidden`, or a screen
- * reader would announce everything on the strip as many times as it was laid
- * down.
+ * Under `prefers-reduced-motion` the strip stops, and what was past the edge of
+ * the box would be out of sight for good. So the stylesheet draws only the
+ * first copy and lets the box scroll along it instead of clipping it, and the
+ * box is a tab stop while there is anything to scroll, for a reader with no
+ * pointer to scroll it with.
+ *
+ * Only the first copy is read out or reached with Tab. The rest carry
+ * `aria-hidden`, or a screen reader would announce everything on the strip as
+ * many times as it was laid down, and `inert`, because `aria-hidden` does not
+ * stop the focus: a strip of ten links would otherwise be thirty Tab stops,
+ * twenty of them with no name.
  */
 export declare const PlAnimateMarquee: React.ForwardRefExoticComponent<PlAnimateMarqueeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-marquee/PlAnimateMarquee.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as a,lengthValue as r,repeatValue as n,directionValue as s,useAnimationRun as i}from"../../internal/animate.js";import{cx as o}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:l,delay:u=0,easing:m,repeat:p="infinite",alternate:c,paused:d,trigger:f="mount",play:h,once:v=!0,threshold:y=.2,orientation:g="horizontal",reverse:q=!1,speed:R=60,gap:b="2rem",copies:j=2,pauseOnHover:x=!0,className:M,style:w,children:z,...A},N){const O=i({trigger:f,play:h,once:v,threshold:y,paused:d,infinite:a(p)}),G=t.useRef(null),H=t.useRef(null),[P,S]=t.useState(0),$="vertical"===g;t.useEffect(()=>{const e=G.current,t=H.current;if(!e||!t)return;const measure=()=>{const a=getComputedStyle(e),r=parseFloat($?a.rowGap:a.columnGap)||0,n=$?t.offsetHeight:t.offsetWidth;S(n+r)};if(measure(),"undefined"==typeof ResizeObserver)return;const a=new ResizeObserver(measure);return a.observe(t),a.observe(e),()=>a.disconnect()},[$,z]);const k=l??(P>0?P/R*1e3:12e3);return e("div",{ref:e=>{G.current=e,O.ref(e),"function"==typeof N?N(e):N&&(N.current=e)},className:o("plass-marquee",$&&"plass-marquee-vertical",M),style:{"--p-anim-gap":r(b),...m?{"--p-anim-ease":m}:{},"--p-anim-duration":`${Math.round(k)}ms`,"--p-anim-delay":`${u}ms`,"--p-anim-repeat":n(p),"--p-anim-direction":s(q?"out":"in",c),"--p-anim-state":O.state,...w},"data-plass-animation":"marquee","data-state":O.state,"data-pause-on-hover":x?"":void 0,...O.handlers,...A,children:Array.from({length:Math.max(1,j)},(t,a)=>(t=>e("div",{ref:0===t?H:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",children:z},t))(a))})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as n,repeatValue as i,directionValue as s,useAnimationRun as o}from"../../internal/animate.js";import{inertProps as l}from"../../internal/inert.js";import{usePrefersReducedMotion as m}from"../../internal/media.js";import{cx as p}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:u,delay:c=0,easing:d,repeat:f="infinite",alternate:h,paused:v,trigger:g="mount",play:y,once:b=!0,threshold:j=.2,orientation:q="horizontal",reverse:x=!1,speed:R=60,gap:H="2rem",copies:M=2,pauseOnHover:w=!0,className:z,style:A,children:N,...O},S){const W=o({trigger:g,play:y,once:b,threshold:j,paused:v,infinite:a(f)}),G=t.useRef(null),P=t.useRef(null),[$,k]=t.useState(0),[C,E]=t.useState(!1),F="vertical"===q,I=m();t.useEffect(()=>{const e=G.current,t=P.current;if(!e||!t)return;const measure=()=>{const r=getComputedStyle(e),a=parseFloat(F?r.rowGap:r.columnGap)||0,n=F?t.offsetHeight:t.offsetWidth;k(n+a),E(F?e.scrollHeight>e.clientHeight:e.scrollWidth>e.clientWidth)};if(measure(),"undefined"==typeof ResizeObserver)return;const r=new ResizeObserver(measure);return r.observe(t),r.observe(e),()=>r.disconnect()},[F,N,I]);const B=u??($>0?$/R*1e3:12e3);return e("div",{ref:e=>{G.current=e,W.ref(e),"function"==typeof S?S(e):S&&(S.current=e)},className:p("plass-marquee",F&&"plass-marquee-vertical",z),style:{"--p-anim-gap":n(H),...d?{"--p-anim-ease":d}:{},"--p-anim-duration":`${Math.round(B)}ms`,"--p-anim-delay":`${c}ms`,"--p-anim-repeat":i(f),"--p-anim-direction":s(x?"out":"in",h),"--p-anim-state":W.state,...A},"data-plass-animation":"marquee","data-state":W.state,"data-pause-on-hover":w?"":void 0,tabIndex:I&&C?0:void 0,...r(O,W.handlers),children:Array.from({length:Math.max(1,M)},(t,r)=>(t=>e("div",{ref:0===t?P:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",...l(0!==t),children:N},t))(r))})});