material-plus-ui 1.9.0 → 1.10.0

package/README.md

@@ -23,7 +23,7 @@ It also goes on past where the specification stops. The button ladder keeps the
 - **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 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.
+- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 3.8 kB gzipped and five are 9.9 kB, against 137.5 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
@@ -79,7 +79,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 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.
+A page that renders a handful of components can take the tokens and a sheet each instead of the whole 174.3 kB — 6.3 kB gzipped for one component against 23.7 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';

package/dist/a2ui/extended/api.d.ts

@@ -252,11 +252,11 @@ export declare const DataTableApi: {
         paged?: boolean | undefined;
         pageSize?: number | undefined;
         striped?: boolean | undefined;
+        rowKey?: string | undefined;
+        selection?: "none" | "multiple" | "single" | undefined;
         selectedKeys?: string[] | {
             path: string;
         } | undefined;
-        rowKey?: string | undefined;
-        selection?: "none" | "multiple" | "single" | undefined;
         accessibility?: {
             label?: string | {
                 path: string;
@@ -308,11 +308,11 @@ export declare const DataTableApi: {
         paged?: boolean | undefined;
         pageSize?: number | undefined;
         striped?: boolean | undefined;
+        rowKey?: string | undefined;
+        selection?: "none" | "multiple" | "single" | undefined;
         selectedKeys?: string[] | {
             path: string;
         } | undefined;
-        rowKey?: string | undefined;
-        selection?: "none" | "multiple" | "single" | undefined;
         accessibility?: {
             label?: string | {
                 path: string;

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import type { MPDensity, MPSize, MPElevation, MPVariant } from '../../types.js';
+/** The heading level each section's title is written at. */
+export type MPAccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'> {
     /**
      * Whether more than one section may be open at once.
@@ -68,6 +70,17 @@ export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'d
      * @default false
      */
     keepMounted?: boolean;
+    /**
+     * The heading level each section's title is written at.
+     *
+     * Each title is a heading, because a section of a page is what it names, and
+     * the level is the page's to decide: an accordion of questions under an `h2`
+     * is a run of `h3`s, and the same accordion under an `h3` is a run of `h4`s.
+     * A level that skips one breaks the outline a screen reader navigates by and a
+     * search engine reads the page's structure from.
+     * @default 3
+     */
+    headingLevel?: MPAccordionHeadingLevel;
     /** The `MPAccordionItem`s. */
     children?: React.ReactNode;
 }

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 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})})]})});
+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,headingLevel:3}),g={1:e("h1",{}),2:e("h2",{}),3:e("h3",{}),4:e("h4",{}),5:e("h5",{}),6:e("h6",{})},j=/*@__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 N={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,headingLevel:g=3,className:j,children:N,...y},w){const _=x(m),k=v(u),z=n.useMemo(()=>({size:_,density:k,dividers:s,headingLevel:g}),[_,k,s,g]);return e(b.Provider,{value:z,children:e(i.Root,{ref:w,multiple:t,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:p,keepMounted:f,"data-mp-size":_,"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",j??""].filter(Boolean).join(" "),...y,children:N})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:x,startIcon:y,action:w,disabled:_=!1,className:k,children:z,...C},M){const{size:A,density:L,dividers:P,headingLevel:B}=n.useContext(b),I=p(A,L),R=f(A,L),V=n.useRef(null),[F,S]=n.useState(!1),$=n.useCallback(e=>{var t;V.current=e,e&&S(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(i.Item,{ref:M,value:h,disabled:_,className:["mp-accordion__item flex flex-col",k??""].filter(Boolean).join(" "),...C,children:[t(i.Header,{render:g[B]??g[3],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",I,R,s[A],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(y)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:y}):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[A]}`,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[A]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${I}`,children:w}):null]}),e(i.Panel,{ref:$,className:[j,F?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===V.current&&"height"===e.propertyName&&S(V.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[A],"text-mp-on-surface-variant",I,N[A]].join(" "),children:z})})]})});

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

@@ -1,2 +1,2 @@
 export { MPAccordion, MPAccordionItem } from './MPAccordion.js';
-export type { MPAccordionItemProps, MPAccordionProps } from './MPAccordion.js';
+export type { MPAccordionHeadingLevel, MPAccordionItemProps, MPAccordionProps } from './MPAccordion.js';

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

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

package/dist/components/animate-headline/MPAnimateHeadline.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { MPAnimateProps } from '../../types.js';
 export interface MPAnimateHeadlineProps extends Omit<MPAnimateProps, 'alternate'>, React.ComponentPropsWithoutRef<'div'> {
     /**
@@ -34,6 +35,13 @@ export interface MPAnimateHeadlineProps extends Omit<MPAnimateProps, 'alternate'
     rise?: number | string;
     /** The lines, in the order they should be read. */
     children?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — a `<span>` to sit inside a
+     * paragraph, where a `<div>` would end the paragraph in the server's markup
+     * and leave the browser's tree disagreeing with React's. Base UI's own escape
+     * hatch, as on `MPAnimateFade`.
+     */
+    render?: useRender.RenderProp;
 }
 /**
  * One line replacing the one above it, on a timer.

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

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

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

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent.js";import{isInfinite as n,repeatValue as t,useAnimationRun as i}from"../../internal/animate.js";import{useMPColor as m,useMPSize as o}from"../../internal/config.js";const s={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-lg",xl:"rounded-mp-xl"};export const MPAnimateLighting=/*@__PURE__*/e.forwardRef(function({duration:e=3e3,delay:d=0,repeat:l="infinite",alternate:p,paused:c,trigger:g="mount",play:u,once:f=!0,threshold:h=.2,color:_,size:x,spread:y=3,arc:w=50,blur:$=4,reverse:j=!1,render:b,className:v,style:z,children:N,...A},B){const L=m(_),M=o(x),P=i({trigger:g,play:u,once:f,threshold:h,paused:c,infinite:n(l)});return r({render:b,ref:[B,P.ref],props:{...A,"data-mp-size":M,className:["mp-anim-lighting",s[M],v].filter(Boolean).join(" "),style:{...a(L),"--_mp-anim-duration":`${e}ms`,"--_mp-anim-delay":`${d}ms`,"--_mp-anim-repeat":t(l),"--_mp-anim-direction":j?p?"alternate-reverse":"reverse":p?"alternate":"normal","--_mp-anim-state":P.state,"--_mp-anim-glow-width":`${y}px`,"--_mp-anim-glow-arc":`${w}deg`,"--_mp-anim-glow-blur":`${$}px`,...z},...P.handlers,"data-mp-animation":"lighting","data-mp-state":P.state,children:N}})});
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as n}from"../../internal/accent.js";import{isInfinite as a,repeatValue as t,useAnimationRun as i}from"../../internal/animate.js";import{useMPColor as m,useMPSize as o}from"../../internal/config.js";import{useOffscreenPause as s}from"../../internal/intersection.js";const l={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-lg",xl:"rounded-mp-xl"};export const MPAnimateLighting=/*@__PURE__*/e.forwardRef(function({duration:e=3e3,delay:p=0,repeat:d="infinite",alternate:c,paused:g,trigger:u="mount",play:f,once:h=!0,threshold:_=.2,color:x,size:y,spread:j=3,arc:w=50,blur:$=4,reverse:b=!1,render:v,className:z,style:N,children:A,...B},L){const M=m(x),P=o(y),R=i({trigger:u,play:f,once:h,threshold:_,paused:g,infinite:a(d)}),k=s(a(d));return r({render:v,ref:[L,R.ref,k],props:{...B,"data-mp-size":P,className:["mp-anim-lighting",l[P],z].filter(Boolean).join(" "),style:{...n(M),"--_mp-anim-duration":`${e}ms`,"--_mp-anim-delay":`${p}ms`,"--_mp-anim-repeat":t(d),"--_mp-anim-direction":b?c?"alternate-reverse":"reverse":c?"alternate":"normal","--_mp-anim-state":R.state,"--_mp-anim-glow-width":`${j}px`,"--_mp-anim-glow-arc":`${w}deg`,"--_mp-anim-glow-blur":`${$}px`,...N},...R.handlers,"data-mp-animation":"lighting","data-mp-state":R.state,children:A}})});

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

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

package/dist/components/animate-scramble/MPAnimateScramble.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { MPAnimateProps } from '../../types.js';
 export interface MPAnimateScrambleProps extends Omit<MPAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     /** The text, when it is easier to pass than to nest. Overrides `children`. */
@@ -27,6 +28,13 @@ export interface MPAnimateScrambleProps extends Omit<MPAnimateProps, 'alternate'
     locale?: string;
     /** The text to settle. Only text is settled — see below. */
     children?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — a `<span>` to sit inside a
+     * paragraph, where a `<div>` would end the paragraph in the server's markup
+     * and leave the browser's tree disagreeing with React's. Base UI's own escape
+     * hatch, as on `MPAnimateFade`.
+     */
+    render?: useRender.RenderProp;
 }
 /**
  * Text settling out of noise.

package/dist/components/animate-scramble/MPAnimateScramble.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{isInfinite as r,useAnimationRun as n,usePrefersReducedMotion as s}from"../../internal/animate.js";import{graphemesOf as i,textOf as o}from"../../internal/text.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";export const MPAnimateScramble=/*@__PURE__*/a.forwardRef(function({text:c,duration:l=1200,spread:u=.4,tick:d=50,characters:h="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$?!",locale:p,delay:f=0,repeat:g=1,paused:x,trigger:M="mount",play:j,once:y=!0,threshold:A=.2,className:N,style:b,children:v,...F},w){const S=s(),q=n({trigger:M,play:j,once:y,threshold:A,paused:x,infinite:r(g)}),E=c??o(v),P=a.useMemo(()=>i(E,p),[E,p]),[R,k]=a.useState(0),B="running"===q.state&&!S;a.useEffect(()=>{if(S)return void k(1);if(!B)return void k(0);let e=0,t=0;const a=r=>{0===t&&(t=r);const n=r-t-f,s=l>0?Math.min(1,Math.max(0,n/l)):1;k(s),s<1&&(e=requestAnimationFrame(a))};return e=requestAnimationFrame(a),()=>cancelAnimationFrame(e)},[B,S,l,f,q.started]);const C=S?E:P.map((e,t)=>(e=>{const t=P.length>1?e/(P.length-1):0;return R>=t*u+(1-u)})(t)?e:(e=>{const t=(2654435761*e+40503*Math.floor(R*l/Math.max(1,d)))%h.length;return h[Math.abs(t)]??h[0]})(t)).join("");return t("div",{ref:e=>{q.ref(e),"function"==typeof w?w(e):w&&(w.current=e)},className:N,style:b,"data-mp-animation":"scramble","data-mp-state":q.state,...q.handlers,...F,children:[e("span",{className:m,children:E}),e("span",{"aria-hidden":"true",className:"tabular-nums whitespace-pre-wrap",children:C})]})});
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{isInfinite as s,useAnimationRun as i,usePrefersReducedMotion as o}from"../../internal/animate.js";import{graphemesOf as m,textOf as l}from"../../internal/text.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";export const MPAnimateScramble=/*@__PURE__*/a.forwardRef(function({text:d,duration:u=1200,spread:p=.4,tick:h=50,characters:f="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$?!",locale:g,delay:x=0,repeat:M=1,paused:j,trigger:y="mount",play:b,once:A=!0,threshold:F=.2,render:N,className:v,style:w,children:S,...q},E){const P=o(),R=i({trigger:y,play:b,once:A,threshold:F,paused:j,infinite:s(M)}),k=d??l(S),B=a.useMemo(()=>m(k,g),[k,g]),[C,D]=a.useState(0),G="running"===R.state&&!P;a.useEffect(()=>{if(P)return void D(1);if(!G)return void D(0);let e=0,t=0;const r=a=>{0===t&&(t=a);const n=a-t-x,s=u>0?Math.min(1,Math.max(0,n/u)):1;D(s),s<1&&(e=requestAnimationFrame(r))};return e=requestAnimationFrame(r),()=>cancelAnimationFrame(e)},[G,P,u,x,R.started]);const H=P?k:B.map((e,t)=>(e=>{const t=B.length>1?e/(B.length-1):0;return C>=t*p+(1-p)})(t)?e:(e=>{const t=(2654435761*e+40503*Math.floor(C*u/Math.max(1,h)))%f.length;return f[Math.abs(t)]??f[0]})(t)).join("");return n({render:N,ref:[E,R.ref],props:{className:v,style:w,"data-mp-animation":"scramble","data-mp-state":R.state,...R.handlers,...q,children:r(t,{children:[e("span",{className:c,children:k}),e("span",{"aria-hidden":"true",className:"tabular-nums whitespace-pre-wrap",children:H})]})}})});

package/dist/components/animate-split/MPAnimateSplit.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { MPAnimateProps, MPAnimateTimelineProps, MPSide } from '../../types.js';
 /** What a line is cut into before it is animated. */
 export type MPAnimateSplitBy = 'word' | 'character';
@@ -52,5 +53,12 @@ export interface MPAnimateSplitProps extends MPAnimateProps, MPAnimateTimelinePr
     locale?: string;
     /** The text to split. Only text is split — see below. */
     children?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — a `<span>` to sit inside a
+     * paragraph, where a `<div>` would end the paragraph in the server's markup
+     * and leave the browser's tree disagreeing with React's. Base UI's own escape
+     * hatch, as on `MPAnimateFade`.
+     */
+    render?: useRender.RenderProp;
 }
 export declare const MPAnimateSplit: React.ForwardRefExoticComponent<MPAnimateSplitProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-split/MPAnimateSplit.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{ANIMATION_CLASS as r,ANIM_BASE as n,animationSlots as i,isInfinite as s,slideOffsets as l,useAnimationRun as o}from"../../internal/animate.js";import{graphemesOf as m,textOf as d,wordsOf as c}from"../../internal/text.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";export const MPAnimateSplit=/*@__PURE__*/t.forwardRef(function({text:t,by:f="word",duration:u,delay:h=0,easing:y,repeat:g=1,alternate:x,paused:j,trigger:N="mount",play:b,once:v=!0,threshold:w=.2,timeline:k,range:S,stagger:$=40,durationStep:A=0,reverse:M=!1,from:O="bottom",distance:P="0.5rem",fade:R=!0,locale:_,className:q,style:z,children:B,...C},D){const E=o({trigger:N,play:b,once:v,threshold:w,paused:j,infinite:s(g)}),F="view"===k?j?"paused":"running":E.state,G=t??d(B),{x:H,y:I}=l(O,P),J=c(G,_),K="character"===f?J.map(e=>m(e,_)):J.map(e=>[e]),L=`${n} ${r.slide} inline-block`,Q=K.reduce((e,a)=>e+a.length,0);let T=-1;return a("div",{ref:e=>{E.ref(e),"function"==typeof D?D(e):D&&(D.current=e)},className:q,style:{"--_mp-anim-state":F,...z},"data-mp-animation":"split","data-mp-state":F,...E.handlers,...C,children:[e("span",{className:p,children:G}),e("span",{"aria-hidden":"true",children:K.map((a,t)=>e("span",{className:"inline-block whitespace-pre",children:a.map((a,t)=>{T+=1;const r=M?Q-1-T:T;return e("span",{className:L,style:i({effect:"slide",duration:u,delay:h+r*$,easing:y,repeat:g,alternate:x,durationOffset:r*A,timeline:k,range:S,x:H,y:I,opacity:R?0:1}),children:a},t)})},t))})]})});
+import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{ANIMATION_CLASS as i,ANIM_BASE as s,animationSlots as l,isInfinite as m,slideOffsets as o,useAnimationRun as d}from"../../internal/animate.js";import{graphemesOf as p,textOf as c,wordsOf as u}from"../../internal/text.js";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden.js";export const MPAnimateSplit=/*@__PURE__*/r.forwardRef(function({text:r,by:h="word",duration:y,delay:g=0,easing:x,repeat:j=1,alternate:b,paused:N,trigger:w="mount",play:_,once:v=!0,threshold:$=.2,timeline:k,range:S,stagger:A=40,durationStep:F=0,reverse:M=!1,from:O="bottom",distance:P="0.5rem",fade:R=!0,locale:q,render:z,className:B,style:C,children:D,...E},G){const H=d({trigger:w,play:_,once:v,threshold:$,paused:N,infinite:m(j)}),I="view"===k?N?"paused":"running":H.state,J=r??c(D),{x:K,y:L}=o(O,P),Q=u(J,q),T="character"===h?Q.map(e=>p(e,q)):Q.map(e=>[e]),U=`${s} ${i.slide} inline-block`,V=T.reduce((e,a)=>e+a.length,0);let W=-1;const X={effect:"slide",duration:y,delay:g,easing:x,repeat:j,alternate:b,timeline:k,range:S,x:K,y:L,opacity:R?0:1};return n({render:z,ref:[G,H.ref],props:{className:B,style:{"--_mp-anim-state":I,...C},"data-mp-animation":"split","data-mp-state":I,...H.handlers,...E,children:t(a,{children:[e("span",{className:f,children:J}),e("span",{"aria-hidden":"true",style:l(X),children:T.map((a,t)=>e("span",{className:"inline-block whitespace-pre",children:a.map((a,t)=>{W+=1;const r=M?V-1-W:W;return e("span",{className:U,style:{"--_mp-anim-delay":`${g+r*A}ms`,...0===F?null:{"--_mp-anim-duration":l({...X,durationOffset:r*F})["--_mp-anim-duration"]}},children:a},t)})},t))})]})}})});

package/dist/components/animate-typing/MPAnimateTyping.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { MPAnimateProps } from '../../types.js';
 export interface MPAnimateTypingProps extends Omit<MPAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     /** The text, when it is easier to pass than to nest. Overrides `children`. */
@@ -37,6 +38,13 @@ export interface MPAnimateTypingProps extends Omit<MPAnimateProps, 'alternate' |
     caretChar?: React.ReactNode;
     /** The text to type. Only text is typed — see below. */
     children?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — a `<span>` to sit inside a
+     * paragraph, where a `<div>` would end the paragraph in the server's markup
+     * and leave the browser's tree disagreeing with React's. Base UI's own escape
+     * hatch, as on `MPAnimateFade`.
+     */
+    render?: useRender.RenderProp;
 }
 /**
  * Text appearing one character at a time.
@@ -53,7 +61,7 @@ export interface MPAnimateTypingProps extends Omit<MPAnimateProps, 'alternate' |
  * a line that is being replaced rather than rewritten.
  *
  * Only **text** is typed. Pass a string, or strings; an element among the
- * children contributes its text and nothing about its markup, because there is
- * no honest way to reveal half of a link.
+ * children gives its text and drops its markup, because there is no honest way
+ * to reveal half of a link.
  */
 export declare const MPAnimateTyping: React.ForwardRefExoticComponent<MPAnimateTypingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-typing/MPAnimateTyping.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as a,useAnimationRun as i,usePrefersReducedMotion as n}from"../../internal/animate.js";import{graphemesOf as s,textOf as o}from"../../internal/text.js";import{VISUALLY_HIDDEN as u}from"../../internal/visually-hidden.js";export const MPAnimateTyping=/*@__PURE__*/r.forwardRef(function({text:c,speed:m=24,hold:l=1400,erase:d=!1,eraseSpeed:f,caret:p=!0,caretChar:h="|",duration:y,delay:x=0,repeat:g=1,paused:T,trigger:j="mount",play:v,once:M=!0,threshold:N=.2,className:w,style:E,children:R,...S},A){const C=i({trigger:j,play:v,once:M,threshold:N,paused:T,infinite:a(g)}),P=n(),b=c??o(R),k=r.useMemo(()=>s(b),[b]),q=k.length,[z,B]=r.useState(0),D=r.useRef(0),F=y&&q>0?y/q:1e3/Math.max(m,1),G=1e3/Math.max(f??2*m,1);return r.useEffect(()=>{D.current=0},[q]),r.useEffect(()=>{if(P||0===q)return void B(q);if(!C.started)return D.current=0,void B(0);if(T)return;let e,t=!1,r=D.current,a=1,i=!1;const n="infinite"===g?1/0:Math.max(1,g);if(r>=q&&1===n)return;const s=()=>{if(!t){if(i)return r-=1,D.current=r,B(r),r<=0&&(i=!1,a+=1),void(e=setTimeout(s,i?G:F));if(r+=1,D.current=r,B(r),r<q)e=setTimeout(s,F);else if(!(a>=n)){if(d)return i=!0,void(e=setTimeout(s,l));a+=1,e=setTimeout(()=>{t||(r=0,D.current=0,B(0),e=setTimeout(s,F))},l)}}};return B(r),e=setTimeout(s,0===r?x:F),()=>{t=!0,clearTimeout(e)}},[C.started,T,P,q,F,G,x,l,d,g]),t("div",{ref:e=>{C.ref(e),"function"==typeof A?A(e):A&&(A.current=e)},className:w,style:E,"data-mp-animation":"typing","data-mp-state":C.state,...C.handlers,...S,children:[e("span",{className:u,children:b}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[k.slice(0,z).join(""),p?e("span",{className:"mp-typing-caret",children:h}):null]})]})});
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useRender as i}from"@base-ui/react/use-render";import{isInfinite as n,useAnimationRun as s,usePrefersReducedMotion as o}from"../../internal/animate.js";import{graphemesOf as m,textOf as u}from"../../internal/text.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";export const MPAnimateTyping=/*@__PURE__*/a.forwardRef(function({text:d,speed:l=24,hold:p=1400,erase:f=!1,eraseSpeed:h,caret:g=!0,caretChar:x="|",duration:y,delay:T=0,repeat:j=1,paused:v,trigger:M="mount",play:N,once:w=!0,threshold:E=.2,render:R,className:S,style:b,children:A,...C},F){const P=s({trigger:M,play:N,once:w,threshold:E,paused:v,infinite:n(j)}),k=o(),q=d??u(A),z=a.useMemo(()=>m(q),[q]),B=z.length,[D,G]=a.useState(0),H=a.useRef(0),I=y&&B>0?y/B:1e3/Math.max(l,1),J=1e3/Math.max(h??2*l,1);return a.useEffect(()=>{H.current=0},[B]),a.useEffect(()=>{if(k||0===B)return void G(B);if(!P.started)return H.current=0,void G(0);if(v)return;let e,t=!1,r=H.current,a=1,i=!1;const n="infinite"===j?1/0:Math.max(1,j);if(r>=B&&1===n)return;const s=()=>{if(!t){if(i)return r-=1,H.current=r,G(r),r<=0&&(i=!1,a+=1),void(e=setTimeout(s,i?J:I));if(r+=1,H.current=r,G(r),r<B)e=setTimeout(s,I);else if(!(a>=n)){if(f)return i=!0,void(e=setTimeout(s,p));a+=1,e=setTimeout(()=>{t||(r=0,H.current=0,G(0),e=setTimeout(s,I))},p)}}};return G(r),e=setTimeout(s,0===r?T:I),()=>{t=!0,clearTimeout(e)}},[P.started,v,k,B,I,J,T,p,f,j]),i({render:R,ref:[F,P.ref],props:{className:S,style:b,"data-mp-animation":"typing","data-mp-state":P.state,...P.handlers,...C,children:t(r,{children:[e("span",{className:c,children:q}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[z.slice(0,D).join(""),g?e("span",{className:"mp-typing-caret",children:x}):null]})]})}})});

package/dist/components/app-logo/MPAppLogo.d.ts

@@ -113,7 +113,12 @@ export interface MPAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'a'>
      * so a logo that also needs `nofollow` spells all three out.
      */
     rel?: string;
-    /** Anything else the `<img>` needs — `loading`, `decoding`, `crossOrigin`. */
+    /**
+     * Anything else the `<img>` needs — `loading`, `decoding`, `crossOrigin`.
+     * On `bare`, the file's own `width` and `height` too: they reserve the mark's
+     * width from their ratio, so the name beside it does not move when the file
+     * arrives.
+     */
     imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>;
     /**
      * Renders something other than a `<span>`, or than the `<a>` an `href` makes

package/dist/components/area-chart/MPAreaChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{CartesianFrame as t}from"../../internal/ChartFrame.js";import{BRIDGE_DASH as n,LINE_WIDTH as r,MARKER_RADIUS as a,MARK_GAP as o,bandPath as s,bridgePath as u,linePath as i,withoutGaps as c}from"../../internal/chart.js";export function MPAreaChart({curve:h="linear",stacked:p=!1,markers:d="auto",gaps:m="break",valueLabels:f="none",...x}){return e(t,{...x,inset:!0,stacked:p,includeZero:!0,headroom:"none"===f?0:14,children:({plot:t,values:x,visible:v,colors:k,labelInk:y,point:b,zeroPx:g,size:j,hovered:M,activeIndex:z,format:L,share:w})=>{const A=r[j],W=a[j],_=x.reduce((e,l)=>Math.max(e,l.length),0),C=_>1?t.width/(_-1):t.width,I="auto"===d?!p&&C>=6*W:d,P=x.map(()=>({top:[],base:[]})),$="percent"===p?Array.from({length:_},(e,l)=>x.reduce((e,t,n)=>{const r=v[n]?t[l]?.value??0:0;return e+(r>0?r:0)},0)):null,D=(e,l)=>null===$?e:e>=0&&$[l]>0?e/$[l]:null;for(let e=0;e<_;e+=1){let l=0,t=0;x.forEach((n,r)=>{const a=n[e]?.value??null,s=null===a&&"zero"===m?0:a,u=null===s?null:D(s,e);if(!v[r]||null===u)return P[r].top.push(null),void P[r].base.push(null);if(!p){const l=b(e,u);return P[r].top.push(l),void P[r].base.push({x:l.x,y:g})}const i=u>=0?l:t,c=i+u;u>=0?l=c:t=c;const h=b(e,c),d=b(e,i);P[r].top.push(h),P[r].base.push({x:d.x,y:0===i?d.y:d.y-Math.sign(u||1)*o})})}return e("g",{className:"mp-area-chart__marks",children:x.map((r,a)=>{if(!v[a])return null;const{top:o,base:d}=P[a],x=k[a];return l("g",{opacity:null!==M&&M!==a?.25:1,children:[e("path",{d:"connect"===m?s(c(o),c(d),h):s(o,d,h),fill:x,fillOpacity:p?.85:.18,stroke:"none"}),e("path",{d:i(o,h),fill:"none",stroke:x,strokeWidth:A,strokeLinecap:"round",strokeLinejoin:"round"}),"connect"===m?e("path",{d:u(o),fill:"none",stroke:x,strokeWidth:A,strokeDasharray:`${A*n} ${A*n}`,strokeLinecap:"round"}):null,o.map((l,t)=>{if(!l)return null;const n=z===t;return I||n?e("circle",{cx:l.x,cy:l.y,r:n?W+1:W,fill:x,stroke:"var(--_mp-color-surface)",strokeWidth:2},t):null}),"none"===f?null:r.map((l,n)=>{const s=o[n];if(!s||null===l.value)return null;const u=r.filter(e=>null!==e.value),i=u.map(e=>e.value);if(!("all"===f||"last"===f&&l===u[u.length-1]||"extremes"===f&&(l.value===Math.min(...i)||l.value===Math.max(...i))))return null;const c=s.x>t.left+t.width-24?"end":s.x<t.left+24?"start":"middle";return e("text",{x:s.x,y:s.y-W-5,textAnchor:c,fill:y(a),fontSize:"xs"===j||"sm"===j?10:11,children:l.label??(null===$?L(l.value):w(D(l.value,n)??0))},n)})]},a)})})}})}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{CartesianFrame as n}from"../../internal/ChartFrame.js";import{BRIDGE_DASH as t,LINE_WIDTH as l,MARKER_RADIUS as o,MARK_GAP as a,bandPath as s,bridgePath as u,linePath as i,valueLabelTest as c,withoutGaps as h}from"../../internal/chart.js";export function MPAreaChart({curve:p="linear",stacked:d=!1,markers:f="auto",gaps:m="break",valueLabels:x="none",...k}){return e(n,{...k,inset:!0,stacked:d,includeZero:!0,headroom:"none"===x?0:14,children:({plot:n,values:k,visible:v,colors:y,labelInk:b,point:g,zeroPx:j,size:z,hovered:L,activeIndex:w,format:A,share:M})=>{const W=l[z],_=o[z],C=k.reduce((e,r)=>Math.max(e,r.length),0),I=C>1?n.width/(C-1):n.width,P="auto"===f?!d&&I>=6*_:f,$=k.map(()=>({top:[],base:[]})),D="percent"===d?Array.from({length:C},(e,r)=>k.reduce((e,n,t)=>{const l=v[t]?n[r]?.value??0:0;return e+(l>0?l:0)},0)):null,E=(e,r)=>null===D?e:e>=0&&D[r]>0?e/D[r]:null;for(let e=0;e<C;e+=1){let r=0,n=0;k.forEach((t,l)=>{const o=t[e]?.value??null,s=null===o&&"zero"===m?0:o,u=null===s?null:E(s,e);if(!v[l]||null===u)return $[l].top.push(null),void $[l].base.push(null);if(!d){const r=g(e,u);return $[l].top.push(r),void $[l].base.push({x:r.x,y:j})}const i=u>=0?r:n,c=i+u;u>=0?r=c:n=c;const h=g(e,c),p=g(e,i);$[l].top.push(h),$[l].base.push({x:p.x,y:0===i?p.y:p.y-Math.sign(u||1)*a})})}return e("g",{className:"mp-area-chart__marks",children:k.map((l,o)=>{if(!v[o])return null;const{top:a,base:f}=$[o],k=y[o],g=null!==L&&L!==o,j=c(l,x);return r("g",{opacity:g?.25:1,children:[e("path",{d:"connect"===m?s(h(a),h(f),p):s(a,f,p),fill:k,fillOpacity:d?.85:.18,stroke:"none"}),e("path",{d:i(a,p),fill:"none",stroke:k,strokeWidth:W,strokeLinecap:"round",strokeLinejoin:"round"}),"connect"===m?e("path",{d:u(a),fill:"none",stroke:k,strokeWidth:W,strokeDasharray:`${W*t} ${W*t}`,strokeLinecap:"round"}):null,a.map((r,n)=>{if(!r)return null;const t=w===n;return P||t?e("circle",{cx:r.x,cy:r.y,r:t?_+1:_,fill:k,stroke:"var(--_mp-color-surface)",strokeWidth:2},n):null}),"none"===x?null:l.map((r,t)=>{const l=a[t];if(!l||null===r.value)return null;if(!j(t))return null;const s=l.x>n.left+n.width-24?"end":l.x<n.left+24?"start":"middle";return e("text",{x:l.x,y:l.y-_-5,textAnchor:s,fill:b(o),fontSize:"xs"===z||"sm"===z?10:11,children:r.label??(null===D?A(r.value):M(E(r.value,t)??0))},t)})]},o)})})}})}

package/dist/components/avatar/MPAvatar.d.ts

@@ -80,6 +80,22 @@ export interface MPAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span
     imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt' | 'className'>;
     /** Called as the picture moves between `idle`, `loading`, `loaded` and `error`. */
     onLoadingStatusChange?: (status: MPAvatarLoadingStatus) => void;
+    /**
+     * Draws the `<img>` in the markup and lets it load in place, instead of
+     * fetching the picture in script and drawing it once it has arrived.
+     *
+     * By default the picture is fetched from a script after the page has
+     * hydrated, so it is in no server's markup, the browser's preload scanner
+     * never sees it, and `loading="lazy"` in `imageProps` is ignored — a list of
+     * fifty avatars downloads all fifty the moment the page hydrates, while the
+     * page's own largest picture is still loading. With `keepMounted` each is an
+     * `<img>` from the start, fetched by the browser on its own terms and lazily
+     * when asked to be; the initials show under it until it has loaded.
+     *
+     * Needs `@base-ui/react` 1.8 or later.
+     * @default false
+     */
+    keepMounted?: boolean;
     /**
      * The fallback, drawn instead of the initials. An icon, a logo, a single emoji
      * — whatever stands in for this particular thing when there is no picture of

package/dist/components/avatar/MPAvatar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{transitionProps as i}from"../../internal/transition.js";import{CONTROL_SQUARE as s,hasContent as l}from"../../internal/scale.js";import{initialsOf as o}from"../../internal/initials.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";import{useMPColor as c,useMPSize as d}from"../../internal/config.js";const p={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},f={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-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function x(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=/*@__PURE__*/a.forwardRef(function({src:a,srcSet:h,alt:g,name:v,initials:j,shape:y,variant:b,size:N,color:w,delay:_,imageProps:z,onLoadingStatusChange:S,transition:B,className:C,style:M,children:$,...k},A){const L=i(B),P=y??"circle",R=b??"tonal",Z=d(N),F=c(w),I=v?o(v):"",q=g??v,D=l($)?$:(j??I)||e(x,{}),E=l($)||Boolean(j??I),G=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",s[Z],p[Z],"circle"===P?"rounded-mp-full":u[Z],f[R],C??""].filter(Boolean).join(" ");return t(n.Root,{ref:A,"data-mp-size":Z,"data-mp-variant":R,className:`${G}${L.className?` ${L.className}`:""}`,style:{...r(F),...L.style,...M},...k,children:[a?e(n.Image,{src:a,srcSet:h,alt:q??"",onLoadingStatusChange:S,...z,className:["size-full object-cover","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" ")}):null,t(n.Fallback,{delay:a?_:void 0,className:"flex size-full items-center justify-center",children:[q&&E?e("span",{className:m,children:q}):null,e("span",{"aria-hidden":!(!q||!E)||void 0,className:"contents",children:D})]})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{transitionProps as i}from"../../internal/transition.js";import{CONTROL_SQUARE as l,hasContent as o}from"../../internal/scale.js";import{initialsOf as s}from"../../internal/initials.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";import{useMPColor as c,useMPSize as d}from"../../internal/config.js";const p={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},f={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-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function x(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=/*@__PURE__*/a.forwardRef(function({src:a,srcSet:g,alt:h,name:v,initials:y,shape:b,variant:j,size:N,color:w,delay:_,imageProps:z,onLoadingStatusChange:M,keepMounted:k=!1,transition:B,className:S,style:C,children:$,...A},L){const P=i(B),R=b??"circle",Z=j??"tonal",F=d(N),I=c(w),q=v?s(v):"",D=h??v,E=o($)?$:(y??q)||e(x,{}),G=o($)||Boolean(y??q),H=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",l[F],p[F],"circle"===R?"rounded-mp-full":u[F],f[Z],S??""].filter(Boolean).join(" ");return t(n.Root,{ref:L,"data-mp-size":F,"data-mp-variant":Z,className:`${H}${P.className?` ${P.className}`:""}`,style:{...r(I),...P.style,...C},...A,children:[a?e(n.Image,{src:a,srcSet:g,alt:D??"",onLoadingStatusChange:M,...k?{keepMounted:!0}:null,...z,className:["size-full object-cover","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0",k?"absolute inset-0 data-error:invisible data-loading:opacity-0":""].filter(Boolean).join(" ")}):null,t(n.Fallback,{delay:a?_:void 0,className:"flex size-full items-center justify-center",children:[D&&G?e("span",{className:m,children:D}):null,e("span",{"aria-hidden":!(!D||!G)||void 0,className:"contents",children:E})]})]})});

package/dist/components/bar-chart/MPBarChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{CartesianFrame as n}from"../../internal/ChartFrame.js";import{useMPLocale as r}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{BAR_BAND_RATIO as o,BAR_MAX_THICKNESS as i,BAR_RADIUS as u,CHART_FONT_SIZE as s,MARK_GAP as m,barPath as c,formatStatistic as h,textWidth as f,toValues as d}from"../../internal/chart.js";export function MPBarChart({stacked:x=!1,horizontal:p=!1,valueLabels:v="none",...b}){const y=a(b.size),M=r(b.locale),g=l.useMemo(()=>{const t=s[y];if("none"===v||x)return 0;if(!p)return t+8;return d(b.series).flat().reduce((e,l)=>null===l.value?e:Math.max(e,f(String(l.label??h(l.value,M,b.format,!0)),t)),0)+10},[v,x,p,y,M,b.series,b.format]);return t(n,{...b,inset:!1,stacked:x,horizontal:p,bandRatio:o,includeZero:!0,headroom:g,children:({plot:l,values:n,visible:r,colors:a,labelInk:o,band:h,valuePx:f,categoryPx:d,zeroPx:b,hovered:M,activeIndex:g,format:k})=>{const j=n.reduce((t,e)=>Math.max(t,e.length),0),z=n.map((t,e)=>e).filter(t=>r[t]),w="percent"===x?Array.from({length:j},(t,e)=>z.reduce((t,l)=>{const r=n[l][e]?.value??0;return t+(r>0?r:0)},0)):null,P=(t,e)=>{const l=n[t][e]?.value??null;return null===l||null===w?l:l>=0&&w[e]>0?l/w[e]:null},_=x?h.band:h.band/Math.max(1,z.length),A=Math.max(1,Math.min(_-(x?0:m),i[y]));return e("g",{className:"mp-bar-chart__marks",children:[n.map((n,i)=>{if(!r[i])return null;const b=a[i],w=null!==M&&M!==i,B=z.indexOf(i);return e("g",{opacity:w?.25:1,children:[Array.from({length:j},(e,n)=>{const r=P(i,n);if(null===r)return null;let a=0,o=i;if(x){let t=0,e=0;for(const l of z){const u=P(l,n);null!==u&&(l===i&&(a=u>=0?t:e),u>=0?t+=u:e+=u,u>=0==r>=0&&(o=l))}}const s=f(a),v=f(r+(x?a:0)),y=x&&0!==a?s+(v>s?m:-m):s,M=Math.abs(v-y);if(M<=0||v>s!=v>y)return null;const k=(p?l.top:l.left)+d(n)-h.band/2+(x?0:B*_)+(_-A)/2,j=i!==o?"none":p?r>=0?"right":"left":r>=0?"top":"bottom",w=p?{x:Math.min(y,v),y:k,w:M,h:A}:{x:k,y:Math.min(y,v),w:A,h:M},C=g===n;return t("path",{d:c(w.x,w.y,w.w,w.h,u,j),fill:b,opacity:null===g||C?1:.55},n)}),"none"===v||x?null:n.map((e,r)=>{if(null===e.value)return null;const a=n.map(t=>t.value).filter(t=>null!==t);if(!("all"===v||"last"===v&&r===j-1||"extremes"===v&&(e.value===Math.min(...a)||e.value===Math.max(...a))))return null;const u=f(e.value),m=(p?l.top:l.left)+d(r)-h.band/2+B*_+_/2,c=e.value>=0?-6:6;return t("text",{x:p?u-c:m,y:p?m:u+c,textAnchor:p?e.value>=0?"start":"end":"middle",dominantBaseline:p?"central":"auto",fill:o(i),fontSize:s[y]-1,children:e.label??k(e.value)},r)})]},i)}),t("line",p?{x1:b,x2:b,y1:l.top,y2:l.top+l.height,stroke:"var(--_mp-color-outline)",strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:b,y2:b,stroke:"var(--_mp-color-outline)",strokeWidth:1})]})}})}
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as n from"react";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{useMPLocale as l}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{BAR_BAND_RATIO as o,BAR_MAX_THICKNESS as i,BAR_RADIUS as u,CHART_FONT_SIZE as s,MARK_GAP as c,barPath as m,formatStatistic as h,textWidth as f,toValues as d,valueLabelTest as p}from"../../internal/chart.js";export function MPBarChart({stacked:x=!1,horizontal:v=!1,valueLabels:b="none",...y}){const g=a(y.size),M=l(y.locale),k=n.useMemo(()=>{const t=s[g];if("none"===b||x)return 0;if(!v)return t+8;return d(y.series).flat().reduce((e,n)=>null===n.value?e:Math.max(e,f(String(n.label??h(n.value,M,y.format,!0)),t)),0)+10},[b,x,v,g,M,y.series,y.format]);return t(r,{...y,inset:!1,stacked:x,horizontal:v,bandRatio:o,includeZero:!0,headroom:k,children:({plot:n,values:r,visible:l,colors:a,labelInk:o,band:h,valuePx:f,categoryPx:d,zeroPx:y,hovered:M,activeIndex:k,format:j})=>{const z=r.reduce((t,e)=>Math.max(t,e.length),0),w=r.map((t,e)=>e).filter(t=>l[t]),P="percent"===x?Array.from({length:z},(t,e)=>w.reduce((t,n)=>{const l=r[n][e]?.value??0;return t+(l>0?l:0)},0)):null,_=(t,e)=>{const n=r[t][e]?.value??null;return null===n||null===P?n:n>=0&&P[e]>0?n/P[e]:null},A=x?h.band:h.band/Math.max(1,w.length),B=Math.max(1,Math.min(A-(x?0:c),i[g]));return e("g",{className:"mp-bar-chart__marks",children:[r.map((r,i)=>{if(!l[i])return null;const y=a[i],P=null!==M&&M!==i,C=p(r,b,z-1),I=w.indexOf(i);return e("g",{opacity:P?.25:1,children:[Array.from({length:z},(e,r)=>{const l=_(i,r);if(null===l)return null;let a=0,o=i;if(x){let t=0,e=0;for(const n of w){const u=_(n,r);null!==u&&(n===i&&(a=u>=0?t:e),u>=0?t+=u:e+=u,u>=0==l>=0&&(o=n))}}const s=f(a),p=f(l+(x?a:0)),b=x&&0!==a?s+(p>s?c:-c):s,g=Math.abs(p-b);if(g<=0||p>s!=p>b)return null;const M=(v?n.top:n.left)+d(r)-h.band/2+(x?0:I*A)+(A-B)/2,j=i!==o?"none":v?l>=0?"right":"left":l>=0?"top":"bottom",z=v?{x:Math.min(b,p),y:M,w:g,h:B}:{x:M,y:Math.min(b,p),w:B,h:g},P=k===r;return t("path",{d:m(z.x,z.y,z.w,z.h,u,j),fill:y,opacity:null===k||P?1:.55},r)}),"none"===b||x?null:r.map((e,r)=>{if(null===e.value)return null;if(!C(r))return null;const l=f(e.value),a=(v?n.top:n.left)+d(r)-h.band/2+I*A+A/2,u=e.value>=0?-6:6;return t("text",{x:v?l-u:a,y:v?a:l+u,textAnchor:v?e.value>=0?"start":"end":"middle",dominantBaseline:v?"central":"auto",fill:o(i),fontSize:s[g]-1,children:e.label??j(e.value)},r)})]},i)}),t("line",v?{x1:y,x2:y,y1:n.top,y2:n.top+n.height,stroke:"var(--_mp-color-outline)",strokeWidth:1}:{x1:n.left,x2:n.left+n.width,y1:y,y2:y,stroke:"var(--_mp-color-outline)",strokeWidth:1})]})}})}

package/dist/components/breadcrumb/MPBreadcrumb.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { useRender } from '@base-ui/react/use-render';
 import type { MPColor, MPSize } from '../../types.js';
 /**
  * What is drawn between two steps of the trail.
@@ -88,6 +89,13 @@ export interface MPBreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'
 export interface MPBreadcrumbItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
     /** Renders the step as a link. */
     href?: string;
+    /**
+     * Renders the step's `<a>` as something else — a router's `Link`, so a press is a
+     * client-side navigation and the page is prefetched. `href` and the classes
+     * still go through, so `render={<NextLink />}` needs the URL written once.
+     * Ignored where there is no link to replace.
+     */
+    render?: useRender.RenderProp;
     /** Fires when the step is pressed. Renders it as a button when there is no `href`. */
     onClick?: React.MouseEventHandler<HTMLElement>;
     /** Content before the label — a home glyph, a repository avatar. */

package/dist/components/breadcrumb/MPBreadcrumb.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon.js";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{BREADCRUMB as d}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as p,PROSE_TEXT as f}from"../../internal/scale.js";import{useMPColor as h,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),v={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},g={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const N=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t,color:u,separator:p="chevron",maxItems:g,itemsBeforeCollapse:j=1,itemsAfterCollapse:y=1,expandable:k=!0,label:z,expandLabel:B,locale:C,structuredData:w=!1,className:P,style:M,children:I,...L},S){const _=x(t),A=h(u),E=m(d,c(C)),[F,R]=r.useState(!1),T=r.Children.toArray(I).filter(r.isValidElement),D=T.length,V=T.some(e=>!0===e.props.current),$=!F&&!w&&void 0!==g&&D>Math.max(g,1)&&D-j-y>1?[...T.slice(0,Math.max(0,j)),null,...T.slice(D-Math.max(0,y))]:T,q="string"==typeof(G=p)&&N.includes(G)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(p):p;var G;const H=r.useMemo(()=>Array.from({length:$.length},(e,n)=>({size:_,last:!V&&n===$.length-1,position:w?n+1:null})),[_,V,$.length,w]),J=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",k?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:S,"aria-label":z??E.label,"data-mp-size":_,className:["mp-breadcrumb flex",f[_],P??""].filter(Boolean).join(" "),style:{...l(A),...M},...L,children:e("ol",{role:"list",itemScope:w||void 0,itemType:w?"https://schema.org/BreadcrumbList":void 0,className:`m-0 flex list-none flex-wrap items-center p-0 ${v[_]}`,children:$.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:q}):null,t?e(b.Provider,{value:H[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:k?e("button",{type:"button",className:J,"aria-label":B??E.expand,onClick:()=>R(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:J,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:c=!1,className:m,children:d,...f},h){const{size:x,last:v,position:N}=r.useContext(b),j=l??v,y=Boolean(o||i)&&!j&&!c,k=null!==N,z=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[x],g[x],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",c?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),B=n(t,{children:[p(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:k?"name":void 0,children:d}),p(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:h,itemProp:k?"itemListElement":void 0,itemScope:k||void 0,itemType:k?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",m??""].filter(Boolean).join(" "),...f,children:[k?e("meta",{itemProp:"position",content:String(N)}):null,y&&o?e("a",{href:o,itemProp:k?"item":void 0,className:z,onClick:i,children:B}):y?e("button",{type:"button",className:z,onClick:i,children:B}):e("span",{className:z,"aria-current":j?"page":void 0,"aria-disabled":c||void 0,children:B})]})});
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{RenderedLink as o}from"../../internal/RenderedLink.js";import{MPIcon as i}from"../icon/MPIcon.js";import{ArrowRightIcon as a,ChevronRightIcon as s,MoreIcon as l}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale.js";import{BREADCRUMB as p}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as h,PROSE_TEXT as f}from"../../internal/scale.js";import{useMPColor as x,useMPSize as b}from"../../internal/config.js";const v=/*@__PURE__*/t.createContext({size:"md",last:!1,position:null,folded:!1}),g={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},j={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const N=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/t.forwardRef(function({size:r,color:o,separator:u="chevron",maxItems:h,itemsBeforeCollapse:j=1,itemsAfterCollapse:y=1,expandable:k=!0,label:z,expandLabel:B,locale:C,structuredData:w=!1,className:P,style:M,children:I,...L},S){const _=b(r),A=x(o),R=d(p,m(C)),[E,F]=t.useState(!1),T=t.Children.toArray(I).filter(t.isValidElement),D=T.length,V=T.some(e=>!0===e.props.current),$=!E&&!w&&void 0!==h&&D>Math.max(h,1)&&D-j-y>1,q=Math.max(0,j),G=D-Math.max(0,y),H=$?[...T.slice(0,q),null,...T.slice(q,G),...T.slice(G)]:T,J=$?q+1:-1,K=$?G+1:-1,O="string"==typeof(Q=u)&&N.includes(Q)?function(n){switch(n){case"chevron":return e(i,{icon:s,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(i,{icon:a,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(u):u;var Q;const U=t.useMemo(()=>Array.from({length:H.length},(e,n)=>{const r=n>=J&&n<K;return{size:_,last:!V&&!r&&n===H.length-1,position:w?n+1:null,folded:r}}),[_,V,H.length,w,J,K]),W=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",k?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:S,"aria-label":z??R.label,"data-mp-size":_,className:["mp-breadcrumb flex",f[_],P??""].filter(Boolean).join(" "),style:{...c(A),...M},...L,children:e("ol",{role:"list",itemScope:w||void 0,itemType:w?"https://schema.org/BreadcrumbList":void 0,className:`m-0 flex list-none flex-wrap items-center p-0 ${g[_]}`,children:H.map((r,o)=>n(t.Fragment,{children:[o>0?e("li",{"aria-hidden":"true",hidden:U[o].folded||void 0,className:"text-mp-on-surface-variant flex shrink-0 items-center select-none [&[hidden]]:hidden",children:O}):null,r?e(v.Provider,{value:U[o],children:r}):e("li",{className:"flex shrink-0 items-center",children:k?e("button",{type:"button",className:W,"aria-label":B??R.expand,onClick:()=>F(!0),children:e(i,{icon:l,size:"1.1em"})}):e("span",{className:W,"aria-hidden":"true",children:e(i,{icon:l,size:"1.1em"})})})]},r?r.key??o:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/t.forwardRef(function({href:i,onClick:a,render:s,startIcon:l,endIcon:c,current:m,disabled:d=!1,className:p,children:f,...x},b){const{size:g,last:N,position:y,folded:k}=t.useContext(v),z=m??N,B=Boolean(i||a)&&!z&&!d,C=null!==y,w=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[g],j[g],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",d?"text-mp-on-surface/38 cursor-default":z?"text-mp-on-surface font-medium":B?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),P=n(r,{children:[h(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",itemProp:C?"name":void 0,children:f}),h(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]});return n("li",{ref:b,itemProp:C?"itemListElement":void 0,itemScope:C||void 0,itemType:C?"https://schema.org/ListItem":void 0,hidden:k||void 0,className:["flex min-w-0 items-center [&[hidden]]:hidden",p??""].filter(Boolean).join(" "),...x,children:[C?e("meta",{itemProp:"position",content:String(y)}):null,B&&i?e(o,{render:s,props:{href:i,itemProp:C?"item":void 0,className:w,onClick:a,children:P}}):B?e("button",{type:"button",className:w,onClick:a,children:P}):e("span",{className:w,"aria-current":z?"page":void 0,"aria-disabled":d||void 0,children:P})]})});

package/dist/components/carousel/MPCarousel.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as l}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as u}from"../../internal/locale.js";import{CAROUSEL as d}from"../../internal/messages/carousel.js";import{CONTROL_ICON as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";import{useMPColor as b,useMPSize as h}from"../../internal/config.js";const v=/*@__PURE__*/["pointer-events-auto","not-disabled:bg-(--_mp-accent)/85","not-disabled:hover:bg-(--_mp-accent)","not-disabled:focus-visible:bg-(--_mp-accent)","not-disabled:active:bg-(--_mp-accent)","transition-[background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none"].join(" "),g={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},w={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/t.forwardRef(function({value:x,defaultValue:j=0,onValueChange:N,loop:y=!0,autoPlay:M=!1,interval:k=5e3,arrows:R=!0,indicators:C=!0,variant:z="outlined",size:I,color:P,label:S,previousLabel:L,nextLabel:_,slideLabel:E,locale:T,className:$,style:A,children:B,...F},V){const W=h(I),q=b(P),D=u(d,c(T)),G=S??D.label,H=E??((e,r)=>l(D.slide,{index:String(e),total:String(r)})),J=t.Children.toArray(B),K=J.length,[O,Q]=t.useState(j),U=Math.min(Math.max(x??O,0),Math.max(K-1,0)),X=t.useRef(null),Y=t.useRef([]),Z=t.useRef(!1),ee=t.useRef(!1),re=t.useRef(!1),[te,ne]=t.useState(!1),[oe,ae]=t.useState(!1),ie=te||oe,se=t.useRef(U),le=t.useRef(N);se.current=U,le.current=N;const ce=t.useCallback((e,r=!1)=>{if(0===K)return;const t=y?(e%K+K)%K:Math.min(Math.max(e,0),K-1);Z.current=r,void 0===x&&Q(t),t!==se.current&&le.current?.(t)},[K,y,x]);t.useEffect(()=>{if(Z.current)return void(Z.current=!1);if(!ee.current)return void(ee.current=!0);Y.current[U]?.scrollIntoView({block:"nearest",inline:"start"}),re.current=!0;const e=window.setTimeout(()=>{re.current=!1},700);return()=>window.clearTimeout(e)},[U]),t.useEffect(()=>{if(!M||ie||K<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||ce(se.current+1)},k);return()=>window.clearInterval(e)},[M,ie,K,k,ce]);const ue=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(ue.current),[]);const de=U<=0,me=U>=K-1;return r("div",{ref:V,role:"region","aria-roledescription":"carousel","aria-label":G,"data-mp-size":W,"data-mp-variant":z,className:["mp-carousel flex w-full flex-col",$??""].filter(Boolean).join(" "),style:{...s(q),...A},onPointerEnter:()=>ne(!0),onPointerLeave:()=>ne(!1),onFocus:()=>ae(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ae(!1)},...F,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",f[z],"text-mp-on-surface"].join(" "),children:[e("div",{ref:X,tabIndex:0,role:"group","aria-label":G,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{ue.current||(ue.current=requestAnimationFrame(()=>{ue.current=0;const e=X.current;if(!e||0===e.clientWidth||re.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==se.current&&r>=0&&r<K&&ce(r,!0)}))},children:J.map((r,t)=>e("div",{ref:e=>{Y.current[t]=e,Y.current.length=K},role:"group","aria-roledescription":"slide","aria-label":H(t+1,K),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),R&&K>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${g[W]}`,children:[e(n,{variant:"filled",size:W,color:q,label:L??D.previous,disabled:!y&&de,className:v,icon:e(o,{icon:a,size:m[W],className:"rtl:rotate-180"}),onClick:()=>ce(U-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:W,color:q,label:_??D.next,disabled:!y&&me,className:v,icon:e(o,{icon:i,size:m[W],className:"rtl:rotate-180"}),onClick:()=>ce(U+1)})]}):null]}),C&&K>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${w[W].gap}`,children:J.map((r,t)=>e("button",{type:"button","aria-label":H(t+1,K),"aria-current":t===U?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===U?`${w[W].current} bg-(--_mp-accent)`:`${w[W].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>ce(t)},t))}):null,e("span",{className:p,"aria-live":M?"off":"polite",children:K>0?H(U+1,K):""})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{watchIntersection as n}from"../../internal/intersection.js";import{MPIconButton as o}from"../icon-button/MPIconButton.js";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{fillMessage as c}from"../../internal/i18n.js";import{useMPLocale as u,useMPMessages as d}from"../../internal/locale.js";import{CAROUSEL as m}from"../../internal/messages/carousel.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as p}from"../../internal/surface.js";import{VISUALLY_HIDDEN as h}from"../../internal/visually-hidden.js";import{useMPColor as b,useMPSize as v}from"../../internal/config.js";const g=/*@__PURE__*/["pointer-events-auto","not-disabled:bg-(--_mp-accent)/85","not-disabled:hover:bg-(--_mp-accent)","not-disabled:focus-visible:bg-(--_mp-accent)","not-disabled:active:bg-(--_mp-accent)","transition-[background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none"].join(" "),w={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},x={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/r.forwardRef(function({value:j,defaultValue:y=0,onValueChange:N,loop:M=!0,autoPlay:R=!1,interval:k=5e3,arrows:C=!0,indicators:I=!0,variant:S="outlined",size:z,color:P,label:T,previousLabel:E,nextLabel:L,slideLabel:_,locale:B,className:W,style:$,children:A,...F},V){const q=v(z),H=b(P),O=d(m,u(B)),D=T??O.label,G=_??((e,t)=>c(O.slide,{index:String(e),total:String(t)})),J=r.Children.toArray(A),K=J.length,[Q,U]=r.useState(y),X=Math.min(Math.max(j??Q,0),Math.max(K-1,0)),Y=r.useRef(null),Z=r.useRef([]),ee=r.useRef(!1),te=r.useRef(!1),re=r.useRef(!1),[ne,oe]=r.useState(!1),[ie,ae]=r.useState(!1),se=ne||ie,le=r.useRef(X),ce=r.useRef(N);le.current=X,ce.current=N;const ue=r.useCallback((e,t=!1)=>{if(0===K)return;const r=M?(e%K+K)%K:Math.min(Math.max(e,0),K-1);ee.current=t,void 0===j&&U(r),r!==le.current&&ce.current?.(r)},[K,M,j]);r.useEffect(()=>{if(ee.current)return void(ee.current=!1);const e=Y.current;if(!e)return;const t=("rtl"===getComputedStyle(e).direction?-1:1)*X*e.clientWidth;if(!te.current)return te.current=!0,void(0!==X&&e.scrollTo({left:t,behavior:"instant"}));const r=e.getBoundingClientRect(),n=r.bottom<=0||r.right<=0||r.top>=window.innerHeight||r.left>=window.innerWidth;e.scrollTo(n?{left:t,behavior:"instant"}:{left:t}),re.current=!0;const o=window.setTimeout(()=>{re.current=!1},700);return()=>window.clearTimeout(o)},[X]);const de=r.useRef(!0);r.useEffect(()=>{const e=Y.current;if(!R||!e||"undefined"==typeof IntersectionObserver)return;de.current=!1;const t=n(e,e=>{de.current=e.isIntersecting});return()=>{t(),de.current=!0}},[R]),r.useEffect(()=>{if(!R||se||K<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{!document.hidden&&de.current&&ue(le.current+1)},k);return()=>window.clearInterval(e)},[R,se,K,k,ue]);const me=r.useRef(0);r.useEffect(()=>()=>cancelAnimationFrame(me.current),[]);const fe=X<=0,pe=X>=K-1;return t("div",{ref:V,role:"region","aria-roledescription":"carousel","aria-label":D,"data-mp-size":q,"data-mp-variant":S,className:["mp-carousel flex w-full flex-col",W??""].filter(Boolean).join(" "),style:{...l(H),...$},onPointerEnter:()=>oe(!0),onPointerLeave:()=>oe(!1),onFocus:()=>ae(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ae(!1)},...F,children:[t("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",p[S],"text-mp-on-surface"].join(" "),children:[e("div",{ref:Y,tabIndex:0,role:"group","aria-label":D,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{me.current||(me.current=requestAnimationFrame(()=>{me.current=0;const e=Y.current;if(!e||0===e.clientWidth||re.current)return;const t=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);t!==le.current&&t>=0&&t<K&&ue(t,!0)}))},children:J.map((t,r)=>e("div",{ref:e=>{Z.current[r]=e,Z.current.length=K},role:"group","aria-roledescription":"slide","aria-label":G(r+1,K),className:"w-full shrink-0 grow-0 basis-full snap-start",children:t},r))}),C&&K>1?t("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${w[q]}`,children:[e(o,{variant:"filled",size:q,color:H,label:E??O.previous,disabled:!M&&fe,className:g,icon:e(i,{icon:a,size:f[q],className:"rtl:rotate-180"}),onClick:()=>ue(X-1)}),e("span",{className:"flex-1"}),e(o,{variant:"filled",size:q,color:H,label:L??O.next,disabled:!M&&pe,className:g,icon:e(i,{icon:s,size:f[q],className:"rtl:rotate-180"}),onClick:()=>ue(X+1)})]}):null]}),I&&K>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${x[q].gap}`,children:J.map((t,r)=>e("button",{type:"button","aria-label":G(r+1,K),"aria-current":r===X?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",r===X?`${x[q].current} bg-(--_mp-accent)`:`${x[q].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>ue(r)},r))}):null,e("span",{className:h,"aria-live":R?"off":"polite",children:K>0?G(X+1,K):""})]})});

package/dist/components/checkbox/MPCheckbox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MARK_MOTION as l}from"../../internal/mark.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as m}from"../../internal/SupportingText.js";import{PROSE_TEXT as p,hasContent as h}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/a.forwardRef(function({checked:x,defaultChecked:g,onCheckedChange:k,indeterminate:j=!1,label:y,description:z,errorMessage:N,size:_,color:v,required:C=!1,disabled:M=!1,readOnly:w=!1,name:I,value:R,id:q,className:L,style:O},P){const S=f(_),B=u(v),F=h(N),T=F?"error":B,W=b[S],$=a.useId(),A=q??$;return e(n.Root,{className:["mp-checkbox inline-block max-w-full align-top",L??""].filter(Boolean).join(" "),disabled:M,invalid:F,"data-mp-size":S,style:{...c(T),...O},children:r("div",{className:["flex items-start gap-3",p[S]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(t.Root,{ref:P,id:A,name:I,value:R,checked:x,defaultChecked:g,indeterminate:j,required:C,disabled:M,readOnly:w,onCheckedChange:e=>k?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",W.box,M?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[w?"cursor-default":"cursor-pointer",F?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[M?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",W.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:`flex items-center justify-center ${l}`,children:e(o,{icon:j?s:i,size:W.glyph,strokeWidth:3})})]})}),h(y)||h(z)||F?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[h(y)?r(n.Label,{htmlFor:A,className:["leading-[1.4]",M?"text-mp-on-surface/38 cursor-default":w?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,C?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(m,{description:z,errorMessage:N})]}):null]})})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as n}from"@base-ui/react/checkbox";import{Field as t}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MARK_MOTION as l}from"../../internal/mark.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as m}from"../../internal/SupportingText.js";import{PROSE_TEXT as p,hasContent as h}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/a.forwardRef(function({checked:x,defaultChecked:g,onCheckedChange:k,indeterminate:j=!1,label:y,description:z,errorMessage:N,size:_,color:v,required:C=!1,disabled:M=!1,readOnly:w=!1,name:I,value:R,id:q,className:L,style:O},P){const S=f(_),B=u(v),T=h(N),W=T?"error":B,$=b[S],A=a.useId(),D=q??A;return e(t.Root,{className:["mp-checkbox inline-block max-w-full align-top",L??""].filter(Boolean).join(" "),disabled:M,invalid:T,"data-mp-size":S,style:{...c(W),...O},children:r("div",{className:["flex items-start gap-3",p[S]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(n.Root,{ref:P,id:D,name:I,value:R,checked:x,defaultChecked:g,indeterminate:j,required:C,disabled:M,readOnly:w,onCheckedChange:e=>k?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",$.box,M?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[w?"cursor-default":"cursor-pointer",T?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[M?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",$.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(n.Indicator,{className:`flex items-center justify-center ${l}`,children:e(o,{icon:j?s:i,size:$.glyph,strokeWidth:3})})]})}),h(y)||h(z)||T?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[h(y)?r(t.Label,{className:["leading-[1.4]",M?"text-mp-on-surface/38 cursor-default":w?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,C?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(m,{description:z,errorMessage:N})]}):null]})})});