material-plus-ui 1.6.0 → 1.8.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 CDGet <jooy2.contact@gmail.com> (https://cdget.com).
+Copyright (c) 2026 CDGet (https://cdget.com).
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,29 +2,29 @@
      page on npm as well as the front page on GitHub, `.npmignore` keeps `docs/`
      out of the tarball, and npm resolves a relative image against the published
      package before it falls back to anything else. -->
-<img src="https://raw.githubusercontent.com/jooy2/material-plus/main/docs/public/logo-large.png" alt="Material Plus" width="96" height="96">
+<img src="https://raw.githubusercontent.com/jooy2/material-plus-ui/main/docs/public/logo-large.png" alt="Material Plus" width="96" height="96">
 
 # Material Plus
 
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/material-plus/blob/main/LICENSE) ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/material-plus) [![npm downloads](https://img.shields.io/npm/dm/material-plus-ui.svg)](https://www.npmjs.com/package/material-plus-ui) [![npm latest package](https://img.shields.io/npm/v/material-plus-ui/latest.svg)](https://www.npmjs.com/package/material-plus-ui) ![npm bundle size](https://img.shields.io/bundlephobia/min/material-plus-ui)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/material-plus-ui/blob/main/LICENSE) ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/material-plus-ui) [![npm downloads](https://img.shields.io/npm/dm/material-plus-ui.svg)](https://www.npmjs.com/package/material-plus-ui) [![npm latest package](https://img.shields.io/npm/v/material-plus-ui/latest.svg)](https://www.npmjs.com/package/material-plus-ui) ![npm bundle size](https://img.shields.io/bundlephobia/min/material-plus-ui)
 
-### 📘 [**material-plus.cdget.com**](https://material-plus.cdget.com)
+This README is the quick start. [The documentation site](https://material-plus.cdget.com) has a page per component, with live previews and the full props table.
 
-Live previews and full props for every component. This README is just the quick start.
+![Material Plus components arranged around the Material Plus mark: a search field, a settings card, radio buttons and checkboxes, buttons and chips, a segmented button and pagination, an alert, a slider, a progress bar and a meter, an avatar stack, a badge and a rating](https://raw.githubusercontent.com/jooy2/material-plus-ui/main/.github/showcase.png)
 
 ---
 
-**Material Plus is a React component library implementing Material Design 3.** It is the pile of components you end up writing in every Material project — the field that handles IME composition properly, the icon wrapper that agrees with your set — extracted, documented and tested.
+**Material Plus is a React component library implementing Material Design 3.** It follows the specification directly rather than wrapping somebody's implementation of it, so its colour roles, type scale and shapes are the ones the spec names.
 
-It follows the specification directly rather than wrapping somebody's implementation of it, so its colour roles, type scale and shapes are the ones the spec names.
+It also goes on past where the specification stops. The button ladder keeps the spec's 32, 40 and 56px and adds 64 and 72 — the next size the spec names is 96, and a 96px button beside a 64px field is not a row — and the charts, the data table and the command palette are components the spec never named at all.
 
 - **Themed in one line.** Set `--mp-source-color` and every colour role follows, the way Material generates a scheme from a source colour. No provider, no theme object, no re-render.
 - **It coexists.** Nothing here is page-level — no reset, no provider, no global styling — and it reads the `--md-sys-color-*` tokens your page already has if they are there. A project already running Material keeps its own setup.
 - **IME-safe by construction.** Korean, Japanese and Chinese composition survives whatever your `onChange` does with the value.
 - **Bring your own icons.** `MPIcon` takes a component or an element from any set. `lucide-react` ships with the package, gathered in one readable constants file.
 - **Works in a Next.js server component**, and in any bundler: the components carry `"use client"`, the barrel and the data do not, and every specifier in `dist/` names a file — so webpack, Vite, esbuild, Rollup and plain Node all resolve it.
-- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 2.9 kB gzipped and five are 7.4 kB, against 74 kB for all hundred and eleven. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
-- **One runtime dependency.** React 18 or 19, Node.js 22 or later.
+- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 3.8 kB gzipped and five are 9.8 kB, against 130.6 kB for every export there is. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
+- **Two runtime dependencies**, and the second is loaded rather than bundled: `lucide-react` for the glyphs, and `highlight.js` behind `MPCodeBlock` — every grammar sits behind an `import()`, so a page that renders no code block never downloads one. React 18 or 19, Node.js 22 or later.
 
 ## Documentation
 
@@ -34,6 +34,7 @@ Everything is documented at **[material-plus.cdget.com](https://material-plus.cd
 | --- | --- |
 | [**Getting started**](https://material-plus.cdget.com/guide/getting-started) | Install and setup, end to end. |
 | [**All components**](https://material-plus.cdget.com/components/) | Every component, one page each: live previews and the full props table. |
+| [**Browser support**](https://material-plus.cdget.com/browser-support) | Which browsers and versions it runs in, and what is reduced in the older ones. |
 | [**Changelog**](https://material-plus.cdget.com/changelog) | What changed in each release. |
 
 Also available in Korean / 한국어 문서: **[material-plus.cdget.com/ko/](https://material-plus.cdget.com/ko/)**
@@ -74,7 +75,7 @@ If Tailwind v4 is already in your project, import the token sheet instead:
 @import 'material-plus-ui/tailwind.css';
 ```
 
-A page that renders a handful of components can take the tokens and a sheet each instead of the whole 113 kB — 4.5 kB gzipped for one component against 16.1 kB for the lot. [The guide](https://material-plus.cdget.com/guide/getting-started#if-you-only-render-a-few-components) has the numbers and where the two paths cross.
+A page that renders a handful of components can take the tokens and a sheet each instead of the whole 172.2 kB — 6.3 kB gzipped for one component against 23.4 kB for the lot. [The guide](https://material-plus.cdget.com/guide/getting-started#if-you-only-render-a-few-components) has the numbers and where the two paths cross.
 
 ```ts
 import 'material-plus-ui/styles/tokens.css';
@@ -133,10 +134,7 @@ Full details, including scoped and runtime theming, are in [the theming guide](h
 
 ## Components
 
-| Component | What it is |
-| --- | --- |
-| [`MPTextField`](https://material-plus.cdget.com/components/inputs/text-field) | An outlined text field that survives an IME, with the label, supporting text, adornments and password toggle already assembled. |
-| [`MPIcon`](https://material-plus.cdget.com/components/display/icon) | A glyph at a known size in a known colour, from whichever icon set you use. |
+There are over 120, grouped into layout, inputs, display, feedback, motion and charts. Each has a page of its own at [material-plus.cdget.com/components/](https://material-plus.cdget.com/components/), with the full props table and previews that are the component running in the page.
 
 ### Why `MPTextField` exists
 
@@ -151,7 +149,7 @@ A controlled `<input>` renders from its `value`. While an input method is compos
 
 ## Contributing
 
-Issues and pull requests are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md).
+Issues and pull requests are welcome. [CONTRIBUTING.md](CONTRIBUTING.md) has the repository layout, the commands and what a component is expected to own. Participation is subject to the [Code of Conduct](CODE_OF_CONDUCT.md).
 
 ```bash
 npm install        # also builds, via `prepare`
@@ -160,6 +158,14 @@ npm run typecheck  # src, test and docs
 npm run docs:dev   # the documentation site
 ```
 
+To report a security issue, follow the process in [SECURITY.md](SECURITY.md) instead of opening a public issue.
+
+For anything else that does not belong in a public issue, write to CDGet at [cdget.com/contact](https://cdget.com/contact).
+
+## Sponsor
+
+Material Plus is free to use and maintained in the open. If it saves you time, you can support the work at [cdget.com/donate](https://cdget.com/donate) or through the Sponsor button on GitHub.
+
 ## License
 
 [MIT](LICENSE) © [CDGet](https://cdget.com)

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPDensity, MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'> {
     /**
      * Whether more than one section may be open at once.
@@ -31,11 +31,31 @@ export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'d
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the sheet is lifted, on MD3's own scale.
+     *
+     * It moves the **tone** as well as the shadow, because Material pairs the two:
+     * a level-2 surface is `surface-container` under a level-2 shadow, and a prop
+     * that only cast a shadow would raise this into a surface the specification
+     * has no name for. Given a level, `variant` is left holding only its hairline.
+     *
+     * Left unset, `variant` decides — and `variant="elevated"` is this at `1`.
+     */
+    elevation?: MPElevation;
     /**
      * The room inside every section, and the type scale of its header and body.
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of every section's header and body.
+     *
+     * An accordion is a list of rows that happen to open, so it wants density for
+     * the reason a list does: a panel of eight sections that fits on the screen is
+     * a different component from one that has to be scrolled to be understood.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * Keeps closed panels in the DOM so the browser's own page search can find and
      * open them. Overrides `keepMounted`.

package/dist/components/accordion/MPAccordion.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Accordion as a}from"@base-ui/react/accordion";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_PAD_X as u,SHEET_PAD_Y as p,SHEET_TITLE as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as h}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const x=/*@__PURE__*/n.createContext({size:"md",dividers:!0}),b=/*@__PURE__*/["h-(--accordion-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" ");const g={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/n.forwardRef(function({multiple:t=!1,value:i,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",size:c,hiddenUntilFound:m=!1,keepMounted:u=!1,className:p,children:f,...b},g){const j=v(c),N=n.useMemo(()=>({size:j,dividers:s}),[j,s]);return e(x.Provider,{value:N,children:e(a.Root,{ref:g,multiple:t,value:i,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:m,keepMounted:u,"data-mp-size":j,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h[d],"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",p??""].filter(Boolean).join(" "),...b,children:f})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:j,startIcon:N,action:w,disabled:y=!1,className:_,children:k,...z},C){const{size:M,dividers:A}=n.useContext(x),P=u[M],B=p[M],I=n.useRef(null),[R,V]=n.useState(!1),F=n.useCallback(e=>{var t;I.current=e,e&&V(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(a.Item,{ref:C,value:h,disabled:y,className:["mp-accordion__item flex flex-col",_??""].filter(Boolean).join(" "),...z,children:[t(a.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[t(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",P,B,s[M],A?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].filter(Boolean).join(" "),children:[e(o,{}),d(N)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:N}):null,t("span",{className:"mp-accordion__text flex min-w-0 flex-1 flex-col",children:[d(v)?e("span",{className:`mp-accordion__title truncate ${f[M]}`,children:v}):null,d(j)?e("span",{className:`mp-accordion__subtitle text-mp-on-surface-variant truncate ${c}`,children:j}):null]}),e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:r,size:l[M]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${P}`,children:w}):null]}),e(a.Panel,{ref:F,className:[b,R?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===I.current&&"height"===e.propertyName&&V(I.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[M],"text-mp-on-surface-variant",P,g[M]].join(" "),children:k})})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Accordion as i}from"@base-ui/react/accordion";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_TITLE as u}from"../../internal/scale.js";import{sheetPadX as p,sheetPadY as f}from"../../internal/density.js";import{containerSurface as h}from"../../internal/elevation.js";import{useMPDensity as v,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/n.createContext({size:"md",density:0,dividers:!0}),g=/*@__PURE__*/["h-(--accordion-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" ");const j={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/n.forwardRef(function({multiple:t=!1,value:a,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",elevation:c,size:m,density:u,hiddenUntilFound:p=!1,keepMounted:f=!1,className:g,children:j,...N},y){const w=x(m),_=v(u),k=n.useMemo(()=>({size:w,density:_,dividers:s}),[w,_,s]);return e(b.Provider,{value:k,children:e(i.Root,{ref:y,multiple:t,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:p,keepMounted:f,"data-mp-size":w,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h(d,c),"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",g??""].filter(Boolean).join(" "),...N,children:j})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:x,startIcon:N,action:y,disabled:w=!1,className:_,children:k,...z},C){const{size:M,density:A,dividers:P}=n.useContext(b),B=p(M,A),I=f(M,A),R=n.useRef(null),[V,F]=n.useState(!1),S=n.useCallback(e=>{var t;R.current=e,e&&F(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(i.Item,{ref:C,value:h,disabled:w,className:["mp-accordion__item flex flex-col",_??""].filter(Boolean).join(" "),...z,children:[t(i.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[t(i.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",B,I,s[M],P?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].filter(Boolean).join(" "),children:[e(o,{}),d(N)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:N}):null,t("span",{className:"mp-accordion__text flex min-w-0 flex-1 flex-col",children:[d(v)?e("span",{className:`mp-accordion__title truncate ${u[M]}`,children:v}):null,d(x)?e("span",{className:`mp-accordion__subtitle text-mp-on-surface-variant truncate ${c}`,children:x}):null]}),e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(a,{icon:r,size:l[M]})})]}),d(y)?e("span",{className:`flex shrink-0 items-center ${B}`,children:y}):null]}),e(i.Panel,{ref:S,className:[g,V?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===R.current&&"height"===e.propertyName&&F(R.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[M],"text-mp-on-surface-variant",B,j[M]].join(" "),children:k})})]})});

package/dist/components/alert/MPAlert.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPDensity, MPSize, MPTransition, MPVariant } from '../../types.js';
 /**
  * How loudly an alert announces itself.
  *
@@ -32,7 +32,7 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      *
      * Four roles, not a severity ladder — there is no `info`, `success` or
      * `warning` here, because [the specification's colour
-     * system](../design/color) has no way to derive them and a library that
+     * system](../../design/color) has no way to derive them and a library that
      * invented three more families would be promising tokens the sheet cannot
      * produce. `error` is the one severity Material does name, and the rest is an
      * emphasis decision: `primary` for a notice, `secondary` or `tertiary` for one
@@ -45,6 +45,16 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of the message without shrinking it.
+     *
+     * The step that matters on an alert is the first one. A page that shows
+     * several at once — a form reporting four invalid fields, a queue of
+     * warnings — stacks a lot of padding, and `-1` gives most of it back while
+     * leaving the text at the size a message has to be read at.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * The heading line. With it the alert is two-part — a headline and the detail
      * under it; without it the whole thing is one line.
@@ -76,7 +86,19 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * their own.
      */
     live?: MPAlertLive;
-    /** Passing it is what makes the dismiss button appear. */
+    /**
+     * Passing it is what makes the dismiss button appear.
+     *
+     * **It fires when the alert has finished leaving, not when the × is
+     * pressed.** An alert is in the flow of the page, so taking one out moves
+     * everything under it — and the caller owns the mount, which means an alert
+     * whose callback fired on the press had already been unmounted by the time
+     * there was anything to animate. So the press starts the exit and this is the
+     * end of it, roughly 200ms later, which is the moment `{open && <MPAlert/>}`
+     * wants to hear about.
+     *
+     * The event is the press that started it, held rather than re-created.
+     */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * The accessible name of the dismiss button. Defaults to the word for
@@ -90,6 +112,15 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
     locale?: string;
     /** The message. */
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * A message about something that happened, set into the page it is about.

package/dist/components/alert/MPAlert.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as o,ErrorIcon as i,InfoIcon as l}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as c}from"../../internal/locale.js";import{ALERT as m}from"../../internal/messages/alert.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as p,hasContent as d,PROSE_TEXT as u,SHEET_GAP as x,SHEET_PAD as v,SHEET_TITLE as h,STACK_GAP as b}from"../../internal/scale.js";import{useMPColor as j,useMPSize as g}from"../../internal/config.js";const y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline border bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"},N={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},_={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},w={primary:"polite",secondary:"polite",tertiary:"polite",error:"assertive"},z={assertive:"alert",polite:"status",off:void 0};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:n="tonal",color:k,size:B,title:C,icon:L,action:M,live:P,onClose:A,closeLabel:I,locale:R,className:S,style:$,children:q,...D},E){const F=j(k),G=g(B),H=s(R),J=c(m,H),K=N[n],O=d(C),Q=void 0===L?e(r,{icon:"error"===F?i:l,size:p[G]}):L;return t("div",{ref:E,role:z[P??w[F]],"data-mp-size":G,"data-mp-variant":n,className:["mp-alert rounded-mp-md flex w-full items-start","box-border",v[G],x[G],u[G],y[n],S??""].filter(Boolean).join(" "),style:{...a(F),...$},...D,children:[d(Q)?e("span",{className:["flex h-[1lh] shrink-0 items-center",K].filter(Boolean).join(" "),children:Q}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[G]}`,children:[O?e("div",{className:[h[G],K].filter(Boolean).join(" "),children:C}):null,d(q)?e("div",{className:O?_[n]:void 0,children:q}):null]}),d(M)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:M}):null,A?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":I??J.dismiss,onClick:A,className:["group rounded-mp-full relative -m-1 flex size-8 cursor-pointer items-center","justify-center bg-transparent text-inherit","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(f,{}),e(r,{icon:o,size:p[G]})]})}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as i,ErrorIcon as o,InfoIcon as a}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{transitionProps as s}from"../../internal/transition.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{ALERT as d}from"../../internal/messages/alert.js";import{inertProps as p}from"../../internal/inert.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,hasContent as x,PROSE_TEXT as v,SHEET_GAP as h,SHEET_TITLE as b,STACK_GAP as j}from"../../internal/scale.js";import{sheetPad as y}from"../../internal/density.js";import{useMPColor as g,useMPDensity as N,useMPSize as w}from"../../internal/config.js";const _={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline border bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"},z={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},k={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},C={primary:"polite",secondary:"polite",tertiary:"polite",error:"assertive"},B={assertive:"alert",polite:"status",off:void 0};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:L="tonal",color:R,size:S,density:E,title:M,icon:P,action:T,live:A,onClose:D,closeLabel:F,locale:I,transition:$,className:q,style:G,children:H,...J},K){const O=s($),Q=g(R),U=w(S),V=N(E),W=c(I),X=m(d,W),[Y,Z]=n.useState(!1),ee=n.useRef(null),te=n.useRef(null),ne=n.useCallback(()=>{const e=ee.current;ee.current=null,e&&D?.(e)},[D]);n.useLayoutEffect(()=>{const e=te.current;Y&&e&&0===parseFloat(getComputedStyle(e).transitionDuration)&&ne()},[Y,ne]);const re=z[L],ie=x(M),oe=void 0===P?e(r,{icon:"error"===Q?o:a,size:u[U]}):P,ae=t("div",{ref:K,role:B[A??C[Q]],"data-mp-size":U,"data-mp-variant":L,...p(Y),className:["mp-alert rounded-mp-md flex w-full items-start","box-border",y(U,V),h[U],v[U],_[L],O.className,q??""].filter(Boolean).join(" "),style:{...l(Q),...O.style,...G},...J,children:[x(oe)?e("span",{className:["flex h-[1lh] shrink-0 items-center",re].filter(Boolean).join(" "),children:oe}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${j[U]}`,children:[ie?e("div",{className:[b[U],re].filter(Boolean).join(" "),children:M}):null,x(H)?e("div",{className:ie?k[L]:void 0,children:H}):null]}),x(T)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:T}):null,D?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":F??X.dismiss,disabled:Y,onClick:e=>{ee.current=e,Z(!0)},className:["group rounded-mp-full relative -m-1 flex size-8 cursor-pointer items-center","justify-center appearance-none border-0 bg-transparent p-0 text-inherit","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(f,{}),e(r,{icon:i,size:u[U]})]})}):null]});return D?e("div",{ref:te,className:["mp-alert__reveal grid transition-[grid-template-rows,opacity]","duration-(--mp-sys-motion-duration-short4)","ease-(--mp-sys-motion-easing-emphasized-accelerate)","motion-reduce:transition-none",Y?"grid-rows-[0fr] opacity-0":"grid-rows-[1fr]"].join(" "),onTransitionEnd:e=>{Y&&"grid-template-rows"===e.propertyName&&e.target===e.currentTarget&&ne()},children:e("div",{className:"min-h-0 "+(Y?"overflow-hidden":""),children:ae})}):ae});

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

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import type { MPColor, MPDensity, MPSize } from '../../types.js';
+/** One heading in the list. */
+export interface MPAnchorItem {
+    /**
+     * 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, counted from `0`.
+     *
+     * Only the indent depends on it. The list itself stays flat, because a nested
+     * `<ul>` inside a table of contents is announced as a list inside a list, and
+     * a reader who has just been told there are twelve headings does not need to
+     * be told again that four of them are their own list.
+     * @default 0
+     */
+    depth?: number;
+}
+export interface MPAnchorProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'children'> {
+    /** The headings, in the order they appear on the page. */
+    items: readonly MPAnchorItem[];
+    /**
+     * Which row is marked, by its `href`. Given, the list stops watching the
+     * scroll and says what it is told.
+     */
+    activeHref?: string | null;
+    /** Called whenever the row the reader is in changes. */
+    onActiveChange?: (href: string | null) => void;
+    /**
+     * How far below the top of the scrollport a heading counts as reached, in
+     * pixels.
+     *
+     * Set it to the height of a sticky header, or the heading under the bar is
+     * never the one marked: it has scrolled past the top of the page and is still
+     * behind the header, so the reader is looking at the section before it.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * What scrolls, when it is not the document. The element an `MPPageLayout`
+     * with `scroll="content"` puts the page inside, for instance.
+     */
+    container?: React.RefObject<HTMLElement | null>;
+    /**
+     * Draws the rail down the leading edge, with the row the reader is in lit.
+     * @default true
+     */
+    rail?: boolean;
+    /** The size of a row's text, and how far one level of heading is set in. */
+    size?: MPSize;
+    /** Which accent family the marked row reads. @default 'primary' */
+    color?: MPColor;
+    /** Tightens the rows and nothing else. @default 0 */
+    density?: MPDensity;
+    /**
+     * Which language the `<nav>` is named in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The accessible name of the `<nav>`. Defaults to the wording in `locale`. */
+    label?: string;
+}
+/**
+ * The headings of the page being read, with the one the reader is in marked.
+ *
+ * ```tsx
+ * <MPAnchor
+ *   items={[
+ *     { href: '#install', label: 'Install' },
+ *     { href: '#usage', label: 'Usage' },
+ *     { href: '#options', label: 'Options', depth: 1 }
+ *   ]}
+ * />
+ * ```
+ *
+ * ## It is a `<nav>` of real links
+ *
+ * Which is what makes it work before any of the tracking runs: the rows jump to
+ * their headings with JavaScript turned off, they are in the link list a screen
+ * reader can pull up, and a middle-click opens one in a tab. Watching the scroll
+ * is added on top rather than being what holds it up.
+ *
+ * The marked row carries `aria-current="location"` rather than `"true"`. That
+ * value means "where the reader is within a set of links", which is exactly what
+ * a table of contents reports and is not what `"true"` — the current *page* —
+ * says.
+ *
+ * ## The headings are given, not scraped
+ *
+ * `items` is a list the caller already has. Whatever produced the page — an MDX
+ * pipeline, a CMS, a route's own frontmatter — knows its own headings and their
+ * ids, and a component that went looking for `<h2>`s in the document would be
+ * guessing at which of them were content and which were chrome.
+ *
+ * ## Nothing slides
+ *
+ * The rail's lit segment is a border on the row rather than a marker that
+ * travels between rows. A thing moving under a reader who is already moving is
+ * the one animation a table of contents should not have, and it is also the one
+ * that cannot be got right — the marker and the scroll are answering the same
+ * gesture at two different speeds.
+ */
+export declare const MPAnchor: React.ForwardRefExoticComponent<MPAnchorProps & React.RefAttributes<HTMLElement>>;

package/dist/components/anchor/MPAnchor.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as t}from"../../internal/accent.js";import{useMPLocale as r,useMPMessages as o}from"../../internal/locale.js";import{ANCHOR as i}from"../../internal/messages/anchor.js";import{CONTROL_TEXT as l}from"../../internal/scale.js";import{useMPColor as s,useMPDensity as c,useMPSize as a}from"../../internal/config.js";const m={xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},u={xs:["py-0.5","py-0.5","py-0.5"],sm:["py-0.5","py-0.5","py-0.5"],md:["py-1","py-0.5","py-0.5"],lg:["py-1.5","py-1","py-0.5"],xl:["py-2","py-1.5","py-1"]};function p(e,n){return 0===n?m[e]:u[e][-n-1]}const d={xs:8,sm:10,md:12,lg:14,xl:16};export const MPAnchor=/*@__PURE__*/n.forwardRef(function({items:m,activeHref:u,onActiveChange:f,offset:h=0,container:y,rail:g=!0,size:v,color:b,density:x,locale:w,label:j,className:B,style:E,...R},C){const _=a(v),A=s(b),H=c(x),N=o(i,r(w)),[z,L]=n.useState(null),T=void 0!==u,k=T?u:z,I=n.useRef(f);I.current=f;const F=n.useRef(m);F.current=m;const P=m.map(e=>e.href).join(" ");n.useEffect(()=>{if(T)return;const e=y?.current??window;let n=0,t=null;const r=()=>{n=0;const e=function(e,n,t){const r=(t?t.getBoundingClientRect().top:0)+n+1;let o=null;for(const n of e){const e=document.getElementById(n.href.replace(/^#/,""));e&&e.getBoundingClientRect().top<=r&&(o=n.href)}return(t?t.scrollTop+t.clientHeight>=t.scrollHeight-2:window.innerHeight+window.scrollY>=document.documentElement.scrollHeight-2)&&e.length>0?e[e.length-1].href:o}(F.current,h,y?.current??null);e!==t&&(t=e,L(e),I.current?.(e))},o=()=>{0===n&&(n=requestAnimationFrame(r))};return r(),e.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o,{passive:!0}),()=>{0!==n&&cancelAnimationFrame(n),e.removeEventListener("scroll",o),window.removeEventListener("resize",o)}},[P,h,y,T]);const S=y?e=>{if(!e.defaultPrevented)return;const n=e.currentTarget.getAttribute("href"),t=y.current;if(!n?.startsWith("#")||!t)return;const r=document.getElementById(n.slice(1));if(!r)return;const o=t.scrollTop+(r.getBoundingClientRect().top-t.getBoundingClientRect().top)-h;t.scrollTo({top:o})}:void 0;return e("nav",{ref:C,"aria-label":j??N.label,"data-mp-size":_,className:["mp-anchor min-w-0",B??""].filter(Boolean).join(" "),style:{...t(A),...E},...R,children:e("ul",{className:["mp-anchor__list m-0 flex list-none flex-col p-0",g?"border-mp-outline-variant border-s":""].filter(Boolean).join(" "),children:m.map(n=>e("li",{className:g?"-ms-px":void 0,children:e("a",{href:n.href,onClick:S,"aria-current":k===n.href?"location":void 0,className:["mp-anchor__link block min-w-0 truncate no-underline","text-mp-on-surface-variant hover:text-mp-on-surface",l[_],p(_,H),"transition-[color,border-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","aria-[current=location]:text-(--_mp-accent) aria-[current=location]:font-medium",g?"border-s border-transparent ps-3 aria-[current=location]:border-(--_mp-accent)":"","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:rounded-mp-xs focus-visible:outline-solid outline-none"].filter(Boolean).join(" "),style:{marginInlineStart:n.depth?n.depth*d[_]:void 0},children:n.label})},n.href))})})});

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

@@ -0,0 +1,2 @@
+export { MPAnchor } from './MPAnchor.js';
+export type { MPAnchorItem, MPAnchorProps } from './MPAnchor.js';

package/dist/components/anchor/index.js

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateProps, MPSide } from '../../types.js';
-export interface MPAnimateAppearProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateProps, MPAnimateTimelineProps, MPSide } from '../../types.js';
+export interface MPAnimateAppearProps extends MPAnimateProps, MPAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How long after one child the next one starts, in milliseconds. This is the
      * whole effect — everything else is what a single child does.

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

@@ -1,2 +1,2 @@
 "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{ANIMATION_CLASS as r,ANIM_BASE as s,animationSlots as n,isInfinite as i,slideOffsets as o,useAnimationRun as l}from"../../internal/animate.js";export const MPAnimateAppear=/*@__PURE__*/a.forwardRef(function({duration:m,delay:p=0,easing:d,repeat:c=1,alternate:f,paused:y,trigger:u="mount",play:h,once:g=!0,threshold:x=.2,stagger:N=80,from:j="bottom",distance:A="0.75rem",fade:b=!0,reverse:E=!1,render:$,className:v,style:w,children:B,...C},M){const P=l({trigger:u,play:h,once:g,threshold:x,paused:y,infinite:i(c)}),{x:R,y:V}=o(j,A),_=a.Children.toArray(B),k=`${s} ${r.slide}`,q=_.map((t,r)=>{const s=E?_.length-1-r:r,i=n({effect:"slide",duration:m,delay:p+s*N,easing:d,repeat:c,alternate:f,x:R,y:V,opacity:b?0:1});if(!a.isValidElement(t))return e("span",{className:k,style:i,children:t},r);const o=t.props;return a.cloneElement(t,{className:[k,o.className].filter(Boolean).join(" "),style:{...i,...o.style}})});return t({render:$,ref:[M,P.ref],props:{...C,className:v,style:{"--_mp-anim-state":P.state,...w},...P.handlers,"data-mp-animation":"appear","data-mp-state":P.state,children:q}})});
+import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{ANIMATION_CLASS as r,ANIM_BASE as t,isInfinite as n,slideOffsets as i,staggerChildren as s,useAnimationRun as o}from"../../internal/animate.js";export const MPAnimateAppear=/*@__PURE__*/e.forwardRef(function({duration:e,delay:d=0,easing:m,repeat:p=1,alternate:l,paused:c,trigger:f="mount",play:g,once:u=!0,threshold:y=.2,stagger:h=80,from:v="bottom",distance:x="0.75rem",fade:b=!0,reverse:w=!1,timeline:A,range:N,render:$,className:j,style:M,children:P,...R},_){const k=o({trigger:f,play:g,once:u,threshold:y,paused:c,infinite:n(p)}),q="view"===A?c?"paused":"running":k.state,{x:z,y:B}=i(v,x),C=s(P,`${t} ${r.slide}`,{effect:"slide",duration:e,delay:d,easing:m,repeat:p,alternate:l,x:z,y:B,opacity:b?0:1,timeline:A,range:N},{stagger:h,reverse:w});return a({render:$,ref:[_,k.ref],props:{...R,className:j,style:{"--_mp-anim-state":q,...M},...k.handlers,"data-mp-animation":"appear","data-mp-state":q,children:C}})});

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateProps } from '../../types.js';
-export interface MPAnimateBlinkProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateBlinkProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, 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/MPAnimateBlink.js

@@ -1 +1,2 @@
-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";export const MPAnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:i,repeat:o="infinite",alternate:s,paused:l,trigger:p="mount",play:c,once:d=!0,threshold:f=.2,min:m=0,render:u,className:y,style:g,children:h,...N},b){const j=a({effect:"blink",duration:e,delay:n,easing:i,repeat:o,alternate:s,opacity:m,trigger:p,play:c,once:d,threshold:f,paused:l,infinite:t(o)});return r({render:u,ref:[b,j.ref],props:{...N,className:[j.className,y].filter(Boolean).join(" "),style:{...j.style,...g},...j.props,children:h}})});
+"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";export const MPAnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e,delay:a=0,easing:i,repeat:s="infinite",alternate:o,paused:l,trigger:d="mount",play:p,once:c=!0,threshold:m=.2,stagger:f=0,durationStep:g,reverse:u,timeline:h,range:y,min:N=0,render:b,className:j,style:k,children:v,...B},S){const w=n({effect:"blink",duration:e,delay:a,easing:i,repeat:s,alternate:o,opacity:N,trigger:d,play:p,once:c,threshold:m,paused:l,infinite:t(s),stagger:f,durationStep:g,reverse:u,timeline:h,range:y,children:v});return r({render:b,ref:[S,w.ref],props:{...B,className:[w.className,j].filter(Boolean).join(" "),style:{...w.style,...k},...w.props,children:w.children}})});

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { MPAnimateProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateCounterProps extends Omit<MPAnimateProps, 'alternate' | 'repeat'>, MPAnimateTimelineProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /** The number it settles on. */
+    value: number;
+    /**
+     * Where it starts.
+     * @default 0
+     */
+    from?: number;
+    /**
+     * How the number is written — anything `Intl.NumberFormat` takes, so a
+     * currency, a percentage or a compact notation is a prop rather than a
+     * template.
+     *
+     * Formatted rather than concatenated because the pieces of a number are not
+     * in the same order everywhere: `1 234,56 €` and `$1,234.56` are the same
+     * value, and a `prefix`/`suffix` pair can only write one of them.
+     */
+    options?: Intl.NumberFormatOptions;
+    /**
+     * Which language it is written in. Falls back to the browser's own, which is
+     * what `Intl` does when nobody says.
+     */
+    locale?: string;
+    /**
+     * The whole formatter, for the numbers `Intl` has no option for — an ordinal,
+     * a score out of ten, a duration. Overrides `options` and `locale`.
+     */
+    format?: (value: number) => string;
+}
+/**
+ * A number counting up to its value.
+ *
+ * The one effect in this set that **cannot** be a keyframe on its own, because
+ * text is not an animatable property: every frame needs a fresh interpolation
+ * put through a formatter.
+ *
+ * ## It is still a CSS animation
+ *
+ * The obvious implementation is a `requestAnimationFrame` loop with its own
+ * clock, its own easing and its own idea of what *paused* means — three things
+ * that have to be kept in step with the rest of the library and will not be.
+ *
+ * So the animation here is a real one, over a registered custom property, and
+ * the frame loop does nothing but **read** it. `duration`, `delay`, the easing
+ * token, `trigger`, `paused`, `timeline="view"` and `prefers-reduced-motion`
+ * are then the same machinery every other effect uses rather than a second
+ * implementation of each. A counter waiting to be scrolled to shows `from`
+ * rather than the answer, for free: a paused animation with `fill-mode: both`
+ * is sitting on its own first frame.
+ *
+ * ## What a screen reader gets
+ *
+ * The final number, once, out of a clipped box — the counting copy is
+ * `aria-hidden`. A live count would be announced sixty times a second, and the
+ * one thing a reader wants from a statistic is the statistic.
+ *
+ * ## In a background tab
+ *
+ * `requestAnimationFrame` does not run in a tab nobody is looking at, so a
+ * counter left in the background sits at `from` and jumps to its value on
+ * return, having been "running" the whole time. That is correct — the reader
+ * sees the number they came back for — and it is worth knowing before it is
+ * reported as a bug.
+ */
+export declare const MPAnimateCounter: React.ForwardRefExoticComponent<MPAnimateCounterProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{numberFormatter as a}from"../../internal/intl.js";import{useAnimateElement as r}from"../../internal/animate.js";import{VISUALLY_HIDDEN as i}from"../../internal/visually-hidden.js";export const MPAnimateCounter=/*@__PURE__*/n.forwardRef(function({value:s,from:o=0,options:m,locale:l,format:u,duration:c,delay:f=0,easing:p,paused:d,trigger:y="mount",play:g,once:h=!0,threshold:N=.2,timeline:j,range:A,className:F,style:v,...S},x){const C=r({effect:"count",effectClass:"mp-anim-count",duration:c,delay:f,easing:p,repeat:1,from:o,to:s,trigger:y,play:g,once:h,threshold:N,paused:d,infinite:!1,timeline:j,range:A}),b=u??(e=>a(l,m).format(e)),q=n.useRef(null),[w,P]=n.useState(o);return n.useEffect(()=>{const e=q.current;if(!e||"undefined"==typeof requestAnimationFrame)return;let t=0,n=!0;const a="view"===j&&CSS.supports("animation-timeline","view()"),r=()=>{if(!n)return;const i=e.getAnimations().filter(e=>"mp-anim-count"===e.animationName),o=i.every(e=>"finished"===e.playState);if(0===i.length||o&&!a)P(s);else{const t=Number.parseFloat(getComputedStyle(e).getPropertyValue("--mp-count"));Number.isFinite(t)&&P(t)}i.length>0&&(a||!o)&&(t=requestAnimationFrame(r))};return t=requestAnimationFrame(r),()=>{n=!1,cancelAnimationFrame(t)}},[C.style,C.props["data-mp-state"],j,s]),t("span",{ref:e=>{q.current=e,C.ref(e),"function"==typeof x?x(e):x&&(x.current=e)},className:[C.className,F].filter(Boolean).join(" "),style:{...C.style,...v},...C.props,...S,children:[e("span",{className:i,children:b(s)}),e("span",{"aria-hidden":"true",className:"tabular-nums",children:b(w)})]})});

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

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

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps } from '../../types.js';
-export interface MPAnimateFadeProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateMode, MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateFadeProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content arrives or leaves. An exit is quicker than an entrance
      * — MD3's `short4` against `medium2` — unless `duration` says otherwise.

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

@@ -1 +1,2 @@
-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";export const MPAnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:m,once:p=!0,threshold:c=.2,mode:f="in",from:u=0,render:y,className:g,style:h,children:N,...j},b){const w=t({effect:"fade",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:f,opacity:u,trigger:d,play:m,once:p,threshold:c,paused:l,infinite:a(i)});return r({render:y,ref:[b,w.ref],props:{...j,className:[w.className,g].filter(Boolean).join(" "),style:{...w.style,...h},...w.props,children:N}})});
+"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";export const MPAnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:i,repeat:o=1,alternate:s,paused:l,trigger:d="mount",play:m,once:p=!0,threshold:c=.2,stagger:f=0,durationStep:g,reverse:u,timeline:h,range:y,mode:N="in",from:j=0,render:v,className:S,style:b,children:w,...x},A){const B=t({effect:"fade",duration:e,delay:n,easing:i,repeat:o,alternate:s,mode:N,opacity:j,trigger:d,play:m,once:p,threshold:c,paused:l,infinite:a(o),stagger:f,durationStep:g,reverse:u,timeline:h,range:y,children:w});return r({render:v,ref:[A,B.ref],props:{...x,className:[B.className,S].filter(Boolean).join(" "),style:{...B.style,...b},...B.props,children:B.children}})});

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateProps, MPAnimateStaggerProps } from '../../types.js';
+export interface MPAnimateFloatProps extends Omit<MPAnimateProps, 'alternate'>, MPAnimateStaggerProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How far it rises at the top of the drift — a number in pixels, or any CSS
+     * length. Small on purpose: this says *not fixed down*, and anything a reader
+     * can measure says *moving* instead.
+     * @default '0.625rem'
+     */
+    distance?: number | string;
+    /**
+     * How far it wanders to either side. Less than `distance`, so the path reads
+     * as a drift rather than as a circle.
+     * @default '0.375rem'
+     */
+    sway?: number | string;
+    /**
+     * How far it leans at the extremes, in degrees. `0` by default — a tilt is
+     * the difference between something floating and something *tumbling*, and
+     * anything with text on it wants none of it.
+     * @default 0
+     */
+    tilt?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * An endless, slow drift.
+ *
+ * The only thing in this set that says **not fixed to the page**. A card that
+ * drifts is a card that is above the sheet rather than printed on it, and no
+ * amount of shadow says that as plainly as half a centimetre of unhurried
+ * travel — a shadow is a claim about depth, and this is depth behaving.
+ *
+ * It has no arrival, which is what keeps it out of the shared effect table: the
+ * six entrances go from a state to the element's own, and this one goes nowhere
+ * and comes back. Its keyframe is its own.
+ *
+ * ## Never on a control
+ *
+ * A button that drifts cannot be pointed at. The pointer arrives where the
+ * button was, the button has moved four pixels, and the reader has to track a
+ * target that is running away from them — which is precisely the failure the
+ * library's rule against transforming controls exists to prevent. This is for
+ * decoration: an illustration, a hero graphic, a badge on a marketing page.
+ *
+ * It is also for one at a time. Six things drifting on their own cycles is a
+ * page that will not sit still to be read, and there is no way to look at any
+ * one of them.
+ */
+export declare const MPAnimateFloat: React.ForwardRefExoticComponent<MPAnimateFloatProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,lengthValue as a,useAnimateElement as n}from"../../internal/animate.js";export const MPAnimateFloat=/*@__PURE__*/e.forwardRef(function({duration:e=6e3,delay:s=0,easing:i="standard",repeat:o="infinite",paused:l,trigger:d="mount",play:c,once:f=!0,threshold:p=.2,stagger:m=0,durationStep:g,reverse:u,distance:y="0.625rem",sway:h="0.375rem",tilt:N=0,render:j,className:v,style:w,children:x,...S},b){const A=n({effect:"float",effectClass:"mp-anim-float",duration:e,delay:s,easing:i,repeat:o,x:a(h),y:a(y),angle:`${N}deg`,trigger:d,play:c,once:f,threshold:p,paused:l,infinite:t(o),stagger:m,durationStep:g,reverse:u,children:x});return r({render:j,ref:[b,A.ref],props:{...S,className:[A.className,v].filter(Boolean).join(" "),style:{...A.style,...w},...A.props,children:A.children}})});

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

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

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps } from '../../types.js';
-export interface MPAnimateGrowProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateMode, MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateGrowProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content unfolds or folds away. An exit is quicker than an
      * entrance — MD3's `short4` against `medium4` — unless `duration` says