material-plus-ui 1.9.0 → 1.11.0

package/dist/internal/Picker.d.ts

@@ -81,7 +81,10 @@ export interface MPPickerShellProps extends MPStyleProps, MPControlEventProps<HT
      * `null` is how that glyph is asked for by name to go away.
      */
     startIcon?: React.ReactNode;
-    /** Marks the picker required, both to assistive technology and to the label. */
+    /**
+     * Marks the picker required, both to assistive technology and to the label,
+     * and keeps a form from submitting while nothing is chosen.
+     */
     required?: boolean;
     /** Greys the picker out and stops it opening. */
     disabled?: boolean;
@@ -123,14 +126,30 @@ interface InternalShellProps extends MPPickerShellProps {
     /**
      * `<input type="hidden">` rows, so the control submits with a form.
      *
-     * Each row carries its own name, which is why the shell takes no `name` of
-     * its own: a range picker submits two of them under one name, and the id the
-     * label points at is generated rather than derived from it.
+     * Each row carries its own name: a range picker submits two of them under one
+     * name, and the id the label points at is generated rather than derived from
+     * it.
      */
     hiddenValues?: Array<{
         name: string;
         value: string;
     }>;
+    /**
+     * The value as one string, `''` while nothing is chosen: what `required` is
+     * checked against, and what `MPForm` reports under the field's name. See
+     * `MPFieldValue`.
+     */
+    formValue: string;
+    /**
+     * The field's own name, which is what `MPForm`'s `errors` are matched by.
+     *
+     * Base UI finds a field's error by the name its control registers, and a
+     * popover trigger registers none, so the name goes on the `Field.Root`. It
+     * names no input; the rows above still carry their own.
+     */
+    name?: string;
+    /** The language the label's spoken "required" is written in. */
+    locale?: string;
     children: React.ReactNode;
     triggerRef?: React.Ref<HTMLButtonElement>;
 }
@@ -142,7 +161,7 @@ interface InternalShellProps extends MPPickerShellProps {
  * treatment, and the popup's `surface-container` at elevation 2 — which is the
  * same floating sheet a menu and a select's list are drawn on.
  */
-export declare function MPPickerShell({ slug, size, color, fullWidth, label, floatingLabel, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef }: InternalShellProps): React.JSX.Element;
+export declare function MPPickerShell({ slug, size, color, fullWidth, label, floatingLabel, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, formValue, name, locale, children, triggerRef }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/Picker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Field as r}from"@base-ui/react/field";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as t}from"../components/icon/MPIcon.js";import{CloseIcon as l}from"../constants/icons.js";import{accentSlots as s}from"./accent.js";import{MPFieldLabel as a,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline.js";import{MPStateLayer as u}from"./StateLayer.js";import{MPSupportingText as m}from"./SupportingText.js";import{MPWidthSizer as d}from"./WidthSizer.js";import{displaySamples as f}from"./date.js";import{CONTROL_ICON as h,hasContent as x,PROSE_TEXT as g}from"./scale.js";import{FADE as b,PORTAL_LAYER as y}from"./surface.js";export function useDisplaySamples(e,n){const r=`${e??""} ${JSON.stringify(n)}`;return o.useMemo(()=>f(e,n),[r])}const j={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const POPUP_PAD={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:f,size:v="md",color:P="primary",fullWidth:N=!1,label:k,floatingLabel:w=!0,description:C,errorMessage:O,startIcon:M,required:D=!1,disabled:F=!1,readOnly:S=!1,id:z,className:B,style:_,onKeyDown:I,onKeyUp:K,onFocus:R,onBlur:U,onClick:$,onDoubleClick:q,onContextMenu:T,display:A,samples:E,empty:L,clearable:W=!1,onClear:J,open:V,onOpenChange:Z,labels:G,hiddenValues:H,children:Q,triggerRef:X}){const Y=x(O),ee=j[v],ne=o.useId(),oe=z??ne,re=W&&!L&&!(F||S),{shrunk:ie,focusProps:te}=c({floating:w&&x(k),filled:!L,pinned:V||x(M)});return n(r.Root,{disabled:F,invalid:Y,"data-mp-size":v,className:[`mp-${f} group flex-col align-top`,N?"flex w-full":"inline-flex w-fit",B??""].filter(Boolean).join(" "),style:{...s(P),..._},...te,children:[n(i.Root,{open:V,onOpenChange:Z,children:[n("div",{className:"relative w-full",children:[n(i.Trigger,{id:oe,ref:X,disabled:F,nativeButton:!0,onKeyDown:I,onKeyUp:K,onFocus:R,onBlur:U,onClick:$,onDoubleClick:q,onContextMenu:T,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",ee.padding,re?"pe-10":"",ee.height,g[v],F?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(S?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[M?e("span",{className:["flex shrink-0 items-center",F?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:M}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",L&&!F?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:L&&!ie?null:A}),e(d,{samples:E??[]})]})]}),re?n("button",{type:"button","aria-label":G.clear,onClick:J,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0 font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(u,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:l,size:h[v]})]}):null,e(p,{label:k,required:D,notched:ie}),x(k)?e(a,{size:v,label:k,required:D,htmlFor:oe,shrunk:ie}):null]}),e(i.Portal,{children:e(i.Positioner,{className:y,sideOffset:4,align:"start",children:e(i.Popup,{initialFocus:!1,style:s(P),className:[`mp-${f}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",POPUP_PAD[v],g[v],b].join(" "),children:Q})})})]}),e(m,{description:C,errorMessage:O,className:ee.padding}),H?.map((n,o)=>e("input",{type:"hidden",name:n.name,value:n.value},o))]})}export function MPPickerFooter({children:n}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:n})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{Field as o}from"@base-ui/react/field";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as t}from"../components/icon/MPIcon.js";import{CloseIcon as l}from"../constants/icons.js";import{accentSlots as a}from"./accent.js";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline.js";import{MPFieldValue as m}from"./FieldValue.js";import{MPStateLayer as u}from"./StateLayer.js";import{MPSupportingText as d}from"./SupportingText.js";import{MPWidthSizer as f}from"./WidthSizer.js";import{displaySamples as h}from"./date.js";import{useMPMessages as x}from"./locale.js";import{COMMON as g}from"./messages/common.js";import{CONTROL_ICON as b,hasContent as j,PROSE_TEXT as y}from"./scale.js";import{FADE as v,PORTAL_LAYER as P}from"./surface.js";export function useDisplaySamples(e,r){const o=`${e??""} ${JSON.stringify(r)}`;return n.useMemo(()=>h(e,r),[o])}const N={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const POPUP_PAD={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:h,size:k="md",color:O="primary",fullWidth:w=!1,label:C,floatingLabel:M=!0,description:D,errorMessage:F,startIcon:S,required:q=!1,disabled:z=!1,readOnly:B=!1,id:I,className:_,style:K,onKeyDown:R,onKeyUp:U,onFocus:$,onBlur:L,onClick:T,onDoubleClick:V,onContextMenu:A,display:E,samples:W,empty:J,clearable:Z=!1,onClear:G,open:H,onOpenChange:Q,labels:X,hiddenValues:Y,formValue:ee,name:re,locale:ne,children:oe,triggerRef:ie}){const te=x(g,ne),le=j(F),ae=N[k],se=n.useId(),pe=I??se,ce=Z&&!J&&!(z||B),{shrunk:me,focusProps:ue}=c({floating:M&&j(C),filled:!J,pinned:H||j(S)});return r(o.Root,{name:re,disabled:z,invalid:le,"data-mp-size":k,className:[`mp-${h} group flex-col align-top`,w?"flex w-full":"inline-flex w-fit",_??""].filter(Boolean).join(" "),style:{...a(O),...K},...ue,children:[r(i.Root,{open:H,onOpenChange:Q,children:[r("div",{className:"relative w-full",children:[r(i.Trigger,{id:pe,ref:ie,disabled:z,nativeButton:!0,onKeyDown:R,onKeyUp:U,onFocus:$,onBlur:L,onClick:T,onDoubleClick:V,onContextMenu:A,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",ae.padding,ce?"pe-10":"",ae.height,y[k],z?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(B?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[S?e("span",{className:["flex shrink-0 items-center",z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:S}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",J&&!z?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:J&&!me?null:E}),e(f,{samples:W??[]})]})]}),ce?r("button",{type:"button","aria-label":X.clear,onClick:G,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0 font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(u,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:l,size:b[k]})]}):null,e(m,{value:ee,required:q,readOnly:B,targetId:pe}),e(p,{label:C,required:q,notched:me}),j(C)?e(s,{size:k,label:C,required:q,requiredLabel:te.required,htmlFor:pe,shrunk:me}):null]}),e(i.Portal,{children:e(i.Positioner,{className:P,sideOffset:4,align:"start",children:e(i.Popup,{initialFocus:!1,style:a(O),className:[`mp-${h}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",POPUP_PAD[k],y[k],v].join(" "),children:oe})})})]}),e(d,{description:D,errorMessage:F,className:ae.padding}),Y?.map((r,n)=>e("input",{type:"hidden",name:r.name,value:r.value},n))]})}export function MPPickerFooter({children:r}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:r})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};

package/dist/internal/RenderedLink.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+/**
+ * An `<a>`, or whatever a caller's `render` makes of it — a router's `Link`.
+ *
+ * A component rather than a `useRender` call where the link is drawn, because
+ * the link is one branch of a ternary and a hook cannot sit in one. The same
+ * shape as the control inside an `MPListItem`, which was the first `render` in
+ * the library to replace an inner link rather than a component's root.
+ *
+ * Under App Router a plain `<a>` to a page of the same site is a full page
+ * load: no client-side navigation, and no prefetch while the link is on
+ * screen. A router owns both through its own `Link`, which takes the same
+ * `href`, so `render={<Link />}` keeps the URL written once — on the
+ * component — and lets the router draw the element.
+ */
+export declare function RenderedLink({ render, props }: {
+    render: useRender.RenderProp | undefined;
+    props: Record<string, unknown>;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/internal/RenderedLink.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as r}from"react/jsx-runtime";import{useRender as e}from"@base-ui/react/use-render";export function RenderedLink({render:n,props:o}){return e({render:n??r("a",{}),props:o})}

package/dist/internal/SupportingText.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{Field as t}from"@base-ui/react/field";import{META_TEXT as a,hasContent as n}from"./scale.js";export function MPSupportingText({description:o,errorMessage:s,className:i}){const m=n(s)?"error":n(o)?"description":"none",c=r.useRef(null),p=r.useRef(m);r.useLayoutEffect(()=>{const e=c.current,r=p.current;p.current=m,e&&m!==r&&"none"!==m&&(e.dataset.mpReveal="none"===r?"open":"swap",e.style.animationName="none",e.offsetWidth,e.style.animationName="")},[m]);const l=["mp-supporting-text block min-h-0",a,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return n(s)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`${l} text-mp-error`,children:s})}):n(o)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`${l} text-mp-on-surface-variant m-0`,children:o})}):e(t.Error,{className:`${l} text-mp-error`})}
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{Field as t}from"@base-ui/react/field";import{META_TEXT as s,hasContent as a}from"./scale.js";import{useMPConfig as n}from"./config.js";export function MPSupportingText({description:o,errorMessage:i,className:m}){const p=a(i)?"error":a(o)?"description":"none",c=r.useRef(null),l=r.useRef(p),u=!0===n().reserveSupportingText;r.useLayoutEffect(()=>{const e=c.current,r=l.current;l.current=p,e&&p!==r&&"none"!==p&&(e.dataset.mpReveal="none"!==r||u?"swap":"open",e.style.animationName="none",e.offsetWidth,e.style.animationName="")},[p,u]);const d=["mp-supporting-text block min-h-0",s,"data-disabled:text-mp-on-surface/38",m??""].filter(Boolean).join(" ");if(u){const r="block min-h-0 data-disabled:text-mp-on-surface/38";return e("div",{className:["mp-supporting-text__line block min-h-[1lh]",s,m??""].filter(Boolean).join(" "),children:a(i)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`mp-supporting-text ${r} text-mp-error`,children:i})}):a(o)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`mp-supporting-text ${r} text-mp-on-surface-variant m-0`,children:o})}):e(t.Error,{className:`mp-supporting-text ${r} text-mp-error`})})}return a(i)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`${d} text-mp-error`,children:i})}):a(o)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`${d} text-mp-on-surface-variant m-0`,children:o})}):e(t.Error,{className:`${d} text-mp-error`})}

package/dist/internal/animate.d.ts

@@ -107,6 +107,8 @@ export interface AnimationRun {
     state: 'running' | 'paused';
     /** Whether the animation has been let go at all. */
     started: boolean;
+    /** How many times it has been started, so a replay is something to depend on. */
+    run: number;
     /** Spread onto the element when `trigger` is `hover`; empty otherwise. */
     handlers: React.HTMLAttributes<HTMLElement>;
 }
@@ -164,6 +166,8 @@ export interface AnimateElement {
     props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
     /** The children, wrapped when there is a `stagger` and untouched otherwise. */
     children: React.ReactNode;
+    /** How many times the animation has been started; changes on every replay. */
+    run: number;
 }
 /**
  * Everything an `MPAnimate*` root needs, in one call.

package/dist/internal/animate.js

@@ -1,2 +1,2 @@
 "use client";
-import{ANIM_BASE as e,ANIMATION_CLASS as t,animationSlots as n,easingValue as r,isInfinite as a,lengthValue as s,repeatValue as o,revealClip as i,slideOffsets as c}from"./animate-core.js";export{e as ANIM_BASE,t as ANIMATION_CLASS,n as animationSlots,r as easingValue,a as isInfinite,s as lengthValue,o as repeatValue,i as revealClip,c as slideOffsets};import*as u from"react";export function staggerChildren(e,t,r,{stagger:a,durationStep:s=0,reverse:o=!1}){const i=u.Children.toArray(e);return i.map((e,c)=>{const d=o?i.length-1-c:c,f=n({...r,delay:r.delay+d*a,durationOffset:(r.durationOffset??0)+d*s});if(!u.isValidElement(e))return u.createElement("span",{key:c,className:t,style:f},e);const l=e.props;return u.cloneElement(e,{className:[t,l.className].filter(Boolean).join(" "),style:{...f,...l.style}})})}const d="(prefers-reduced-motion: reduce)";function f(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=window.matchMedia(d);return t.addEventListener("change",e),()=>t.removeEventListener("change",e)}function l(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(d).matches}function m(){return!1}export function usePrefersReducedMotion(){return u.useSyncExternalStore(f,l,m)}export function useAnimationRun({trigger:e,play:t,once:n,threshold:r,paused:a,infinite:s}){const o=u.useRef(null),[i,c]=u.useState("mount"===e),[d,f]=u.useState(0),l=u.useCallback(()=>{c(!0),f(e=>e+1)},[]);u.useLayoutEffect(()=>{const e=o.current;if(!e||0===d)return;const t=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName=""},[d]),u.useEffect(()=>{if("visible"!==e)return;const t=o.current;if(!t||"undefined"==typeof IntersectionObserver)return void c(!0);const a=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),n&&a.disconnect()):n||c(!1)},{threshold:r});return a.observe(t),()=>a.disconnect()},[e,n,r,l]),u.useEffect(()=>{"manual"===e&&(t?l():c(!1))},[e,t,l]);const m=u.useCallback(()=>{s&&c(!1)},[s]),p="hover"===e?{onPointerEnter:l,onFocus:l,onPointerLeave:m,onBlur:m}:{};return{ref:u.useCallback(e=>{o.current=e},[]),state:i&&!a?"running":"paused",started:i,handlers:p}}export function useAnimateElement(r){const{trigger:a,play:s,once:o,threshold:i,paused:c,infinite:u,stagger:d=0,durationStep:f,reverse:l,effectClass:m,children:p,...h}=r,g=useAnimationRun({trigger:a,play:s,once:o,threshold:i,paused:c,infinite:u}),y=`${e} ${m??t[h.effect]}`,v=function(e,t,n){return"view"!==t?e:n?"paused":"running"}(g.state,h.timeline,c);return d>0?{ref:g.ref,className:"",style:{"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:staggerChildren(p,y,h,{stagger:d,durationStep:f,reverse:l})}:{ref:g.ref,className:y,style:{...n(h),"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:p}}
+import{ANIM_BASE as e,ANIMATION_CLASS as t,animationSlots as n,easingValue as r,isInfinite as s,lengthValue as a,repeatValue as o,revealClip as i,slideOffsets as u}from"./animate-core.js";export{e as ANIM_BASE,t as ANIMATION_CLASS,n as animationSlots,r as easingValue,s as isInfinite,a as lengthValue,o as repeatValue,i as revealClip,u as slideOffsets};import*as c from"react";import{watchIntersection as f}from"./intersection.js";import{mediaList as l}from"./media.js";export function staggerChildren(e,t,r,{stagger:s,durationStep:a=0,reverse:o=!1}){const i=c.Children.toArray(e);return i.map((e,u)=>{const f=o?i.length-1-u:u,l=n({...r,delay:r.delay+f*s,durationOffset:(r.durationOffset??0)+f*a});if(!c.isValidElement(e))return c.createElement("span",{key:u,className:t,style:l},e);const d=e.props;return c.cloneElement(e,{className:[t,d.className].filter(Boolean).join(" "),style:{...l,...d.style}})})}const d="(prefers-reduced-motion: reduce)";function m(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=l(d);return t?.addEventListener("change",e),()=>t?.removeEventListener("change",e)}function p(){return l(d)?.matches??!1}function h(){return!1}export function usePrefersReducedMotion(){return c.useSyncExternalStore(m,p,h)}export function useAnimationRun({trigger:e,play:t,once:n,threshold:r,paused:s,infinite:a}){const o=c.useRef(null),[i,u]=c.useState("mount"===e),[l,d]=c.useState(0),m=c.useRef("mount"===e),p=c.useCallback(()=>{u(!0),d(e=>e+1)},[]);c.useLayoutEffect(()=>{const e=o.current;if(!e||0===l)return;if(!m.current)return void(m.current=!0);const t=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName=""},[l]),c.useEffect(()=>{if("visible"!==e)return;const t=o.current;if(!t||"undefined"==typeof IntersectionObserver)return void u(!0);const s=f(t,e=>{e.isIntersecting?(p(),n&&s()):n||u(!1)},{threshold:r});return s},[e,n,r,p]),c.useEffect(()=>{"manual"===e&&(t?p():u(!1))},[e,t,p]);const h=c.useCallback(()=>{a&&u(!1)},[a]),g="hover"===e?{onPointerEnter:p,onFocus:p,onPointerLeave:h,onBlur:h}:{};return{ref:c.useCallback(e=>{o.current=e},[]),state:i&&!s?"running":"paused",started:i,run:l,handlers:g}}export function useAnimateElement(r){const{trigger:s,play:a,once:o,threshold:i,paused:u,infinite:c,stagger:f=0,durationStep:l,reverse:d,effectClass:m,children:p,...h}=r,g=useAnimationRun({trigger:s,play:a,once:o,threshold:i,paused:u,infinite:c}),y=`${e} ${m??t[h.effect]}`,v=function(e,t,n){return"view"!==t?e:n?"paused":"running"}(g.state,h.timeline,u);return f>0?{ref:g.ref,className:"",style:{"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:staggerChildren(p,y,h,{stagger:f,durationStep:l,reverse:d}),run:g.run}:{ref:g.ref,className:y,style:{...n(h),"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:p,run:g.run}}

package/dist/internal/box-size.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The size a chart lays itself out against: its box's own layout size, read
+ * before the browser paints.
+ *
+ * `useMPElementSize` answers the question a caller asks of it — how big the box
+ * looks — and two things about that answer are wrong for a chart:
+ *
+ * - **It is read in an effect**, which runs after the browser has painted. A
+ *   chart mounted in the browser drew one frame with no width, an empty box,
+ *   and then its picture. Read in a layout effect the first paint already has
+ *   the picture, and a server-rendered chart draws in the frame it hydrates in.
+ * - **It includes transforms.** A chart mounted inside a surface that enters
+ *   from `scale(0.95)` — `MPDialog` does — measured the shrunken box, drew its
+ *   paths to fit that, and was never told otherwise: a transform finishing is
+ *   not a resize, so the observer stays silent and the plot stays five per cent
+ *   narrower than the room it has. The layout size is the room.
+ *
+ * Rounded, and the rounding is what makes the bail-out meaningful.
+ */
+import * as React from 'react';
+import type { MPElementSize } from '../hooks/useMPElementSize.js';
+export declare function useBoxSize(ref: React.RefObject<Element | null>): MPElementSize;

package/dist/internal/box-size.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";import{useBrowserLayoutEffect as e}from"./layout-effect.js";const i={width:0,height:0};function n(t,e){const i=e?.borderBoxSize?.[0];if(i)return{width:Math.round(i.inlineSize),height:Math.round(i.blockSize)};if(t instanceof HTMLElement)return{width:t.offsetWidth,height:t.offsetHeight};const n=t.getBoundingClientRect();return{width:Math.round(n.width),height:Math.round(n.height)}}export function useBoxSize(r){const[o,h]=t.useState(i);return e(()=>{const t=r.current;if(!t)return;const e=t=>h(e=>e.width===t.width&&e.height===t.height?e:t);if(e(n(t)),"undefined"==typeof ResizeObserver)return;const i=new ResizeObserver(([i])=>e(n(t,i)));return i.observe(t),()=>i.disconnect()},[r]),o}

package/dist/internal/chart.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { MPChartCategory, MPChartCurve, MPChartDatum, MPChartSeries, MPChartTickLabels, MPSize } from '../types.js';
+import type { MPChartCategory, MPChartCurve, MPChartDatum, MPChartSeries, MPChartTickLabels, MPChartValueLabels, MPSize } from '../types.js';
 /**
  * The arithmetic and the vocabulary the charts share.
  *
@@ -257,18 +257,16 @@ export interface BandScale {
 }
 export declare function bandScale(count: number, length: number, ratio: number): BandScale;
 /**
- * Roughly how wide a string renders at a given font size.
+ * The lowest and highest of a list, in one pass and without spreading it.
  *
- * An estimate on purpose. The exact answer is a canvas measurement per label
- * per render, on a path that runs again on every resize — and what the number
- * is used for is deciding how much room to reserve, where a few pixels of
- * generosity cost nothing and a reflow costs a frame.
- *
- * 0.6em is about the advance of a digit in the sans-serifs a UI runs in.
- * Anything CJK is close to a full em, so the wider characters are counted as
- * one: a Korean axis reserving 60% of the room it needs is an axis that
- * overlaps itself.
+ * `Math.min(...values)` passes every value as an argument, and an engine runs
+ * out of argument room somewhere past a hundred thousand — the chart then throws
+ * a `RangeError` instead of drawing. `null` for an empty list.
  */
+export declare function bounds(values: Iterable<number>): {
+    min: number;
+    max: number;
+} | null;
 export declare function textWidth(text: string, fontSize: number): number;
 /**
  * A label cut to the room it has.
@@ -388,6 +386,18 @@ export declare function categoryCount(series: readonly MPChartSeries[]): number;
  * a numbered axis is a great deal better than a blank one.
  */
 export declare function categoryAt(index: number, categories: readonly MPChartCategory[] | undefined, values: readonly (readonly ChartValue[])[]): MPChartCategory;
+/**
+ * Which points of one series `valueLabels` writes a number beside, as a test
+ * on a point's index.
+ *
+ * Worked out once per series. Asked of each point in turn, the extremes meant
+ * filtering and spreading the whole series again for every point — quadratic in
+ * its length, on every render a hover makes.
+ *
+ * `last` is the index `last` names. Left out, it is the last point that has a
+ * value, which is what a line means by it; a bar chart names its last slot.
+ */
+export declare function valueLabelTest(series: readonly ChartValue[], mode: MPChartValueLabels, last?: number): (index: number) => boolean;
 /**
  * A category as the axis writes it.
  *

package/dist/internal/chart.js

@@ -1 +1 @@
-import{dateTimeFormatter as t,numberFormatter as n}from"./intl.js";export const CHART_SLOTS=8;const r=new Set(["primary","secondary","tertiary","error"]);export function seriesColor(t,n){return n?r.has(n)?`var(--_mp-color-${n})`:n:`var(--_mp-chart-${t%8+1})`}export const COMPACT_FROM=1e4;const o={notation:"compact",maximumFractionDigits:1},e={month:"short",day:"numeric"},a={style:"percent",maximumFractionDigits:0};export function formatStatistic(t,r,e,a){return Number.isFinite(t)?e?n(r,e).format(t):a&&Math.abs(t)>=1e4?n(r,o).format(t):n(r).format(t):""}export function formatShare(t,r){return Number.isFinite(t)?t>0&&t<.005?`<${n(r,a).format(.01)}`:n(r,a).format(t):""}export function deltaOf(t,n,r){const o=t-n,e=o>0?1:o<0?-1:0;return{absolute:o,percent:0===n?null:o/Math.abs(n)*100,direction:e,good:0!==e&&1===e==("up"===r)}}function u(t,n){if(0===t.length)return"";if(1===t.length)return`M${t[0].x} ${t[0].y}h0`;const r=`M${t[0].x} ${t[0].y}`;if("smooth"===n)return r+function(t){const n=t.length,r=[];for(let o=0;o<n-1;o+=1){const n=t[o+1].x-t[o].x;r.push(0===n?0:(t[o+1].y-t[o].y)/n)}const o=[r[0]??0];for(let t=1;t<n-1;t+=1){const n=r[t-1],e=r[t];o.push(n*e<=0?0:2*n*e/(n+e))}o.push(r[n-2]??0);const e=[];for(let r=0;r<n-1;r+=1){const n=(t[r+1].x-t[r].x)/3;e.push(`C${t[r].x+n} ${t[r].y+o[r]*n} ${t[r+1].x-n} ${t[r+1].y-o[r+1]*n} ${t[r+1].x} ${t[r+1].y}`)}return e.join("")}(t);const o=[];for(let r=1;r<t.length;r+=1)if("step"===n){const n=(t[r-1].x+t[r].x)/2;o.push(`H${n}V${t[r].y}H${t[r].x}`)}else o.push(`L${t[r].x} ${t[r].y}`);return r+o.join("")}export function linePath(t,n){return function(t){const n=[];let r=[];for(const o of t)null===o?(r.length>0&&n.push(r),r=[]):r.push(o);return r.length>0&&n.push(r),n}(t).map(t=>u(t,n)).join("")}export function bridgePath(t){const n=[];let r=null,o=!1;for(const e of t)null!==e?(null!==r&&o&&n.push(`M${r.x} ${r.y}L${e.x} ${e.y}`),r=e,o=!1):o=null!==r;return n.join("")}export const BRIDGE_DASH=3;export function withoutGaps(t){return t.filter(t=>null!==t)}export function bandPath(t,n,r){const o=[];let e=[],a=[];const i=()=>{e.length>0&&o.push(`${u(e,r)}${u([...a].reverse(),r).replace(/^M/,"L")}Z`),e=[],a=[]};return t.forEach((t,r)=>{const o=n[r];null!==t&&null!=o?(e.push(t),a.push(o)):i()}),i(),o.join("")}export function areaPath(t,n,r){return bandPath(t,t.map(t=>null===t?null:{x:t.x,y:n}),r)}export function barPath(t,n,r,o,e,a){const u=Math.abs(r),i=Math.abs(o);if(0===u||0===i)return"";const c=Math.max(0,Math.min(e,u/2,i/2)),l="both"===a,s={tl:l||"top"===a||"left"===a?c:0,tr:l||"top"===a||"right"===a?c:0,br:l||"bottom"===a||"right"===a?c:0,bl:l||"bottom"===a||"left"===a?c:0},x=(t,n,r)=>t>0?`a${t} ${t} 0 0 1 ${n} ${r}`:"";return`M${t+s.tl} ${n}h`+(u-s.tl-s.tr)+x(s.tr,s.tr,s.tr)+"v"+(i-s.tr-s.br)+x(s.br,-s.br,s.br)+"h"+-(u-s.bl-s.br)+x(s.bl,-s.bl,-s.bl)+"v"+-(i-s.tl-s.bl)+x(s.tl,s.tl,-s.tl)+"Z"}export function extentOf(t,n,r){const o=t.filter(t=>null!==t&&Number.isFinite(t)),e=n??(o.length>0?Math.min(...o):0),a=r??(o.length>0?Math.max(...o):0);return e===a?{min:e-.5,max:a+.5}:{min:e,max:a}}export function withReferences(t,n){const r=(n??[]).flatMap(t=>[toNumber(t.value),void 0===t.to?null:toNumber(t.to)]).filter(t=>null!==t);return 0===r.length||null===t?t:{min:Math.min(t.min,...r),max:Math.max(t.max,...r)}}export function seriesExtent(t,n){let r=1/0,o=-1/0,e=!1;if(n){const n=t.reduce((t,n)=>Math.max(t,n.length),0);for(let a=0;a<n;a+=1){let n=0,u=0;for(const r of t){const t=r[a]?.value;null!=t&&(e=!0,t>=0?n+=t:u+=t)}r=Math.min(r,u),o=Math.max(o,n)}}else for(const n of t)for(const{value:t}of n)null!==t&&(e=!0,r=Math.min(r,t),o=Math.max(o,t));return e?{min:r,max:o}:null}function i(t){const n=10**Math.floor(Math.log10(t)),r=t/n;return r<=1?n:r<=2?2*n:r<=5?5*n:10*n}export function valueScale(t,n={}){const{tickCount:r=5,includeZero:o=!0}=n;let e=n.min??t?.min??0,a=n.max??t?.max??1;if(o&&void 0===n.min&&(e=Math.min(e,0)),o&&void 0===n.max&&(a=Math.max(a,0)),a===e){const t=Math.abs(a)>0?.5*Math.abs(a):1;e-=t,a+=t}const u=void 0!==n.min&&void 0!==n.max?function(t,n){const r=10**Math.floor(Math.log10(t/Math.max(1,n)));let o=i(t/Math.max(1,n)),e=1/0;for(const a of[.1,1,10])for(const u of[1,2,2.5,5]){const i=u*a*r,c=t/i,l=Math.round(c);if(l<1||Math.abs(c-l)>1e-9)continue;const s=Math.abs(l-n);s<e&&(e=s,o=i)}return o}(a-e,r):i((a-e)/Math.max(1,r)),c=void 0!==n.min?e:Math.floor(e/u)*u,l=void 0!==n.max?a:Math.ceil(a/u)*u,s=l-c||1,x=[];for(let t=c;t<=l+1e-9*u;t+=u)x.push(Number(t.toFixed(12)));return{min:c,max:l,ticks:x,fraction:t=>(t-c)/s}}export function bandScale(t,n,r){const o=t>0?n/t:n;return{step:o,band:o*r,centre:t=>o*(t+.5)}}export function textWidth(t,n){let r=0;for(const n of t)r+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(n)?1:.6;return r*n}export function truncate(t,n,r){if(n<=0||textWidth(t,r)<=n)return t;const o=n-textWidth("…",r);let e="",a=0;for(const n of t){const t=a+textWidth(n,r);if(t>o)break;a=t,e+=n}return e.length>0?`${e.trimEnd()}…`:"…"}export function tickStride(t,n,r){return t<=1||n<=0?1:Math.max(1,Math.ceil(t/Math.max(1,Math.floor(n/Math.max(1,r)))))}export function showsTick(t,n,r,o){return t%r===0||o&&t===n-1}export function fitsLast(t,n,r,o){const e=(t-1)%n;return e>0&&e*r>=o+8}export const LABEL_AIR=12;const c=1.35;export function tickTurn(t,n,r,o){if("rotate"===t)return 45;if("vertical"===t)return 90;if("truncate"===t||void 0===t)return 0;const e=n.reduce((t,n)=>Math.max(t,textWidth(n,r)),0);return e+12<=o||e<3*r?0:o>=turnedStep(45,r)?45:90}export function turnedStep(t,n){const r=t*Math.PI/180;return n*c/Math.max(.2,Math.sin(r))}export function turnedBand(t,n,r){const o=t*Math.PI/180;return n*Math.sin(o)+r*c*Math.cos(o)/2}export function turnedRoom(t,n,r){const o=t*Math.PI/180;return(n-r*c*Math.cos(o)/2)/Math.max(.2,Math.sin(o))}export function toValue(t){return null==t?{value:null}:"number"==typeof t?{value:Number.isFinite(t)?t:null}:"object"==typeof t&&"y"in t?{value:null!==t.y&&Number.isFinite(t.y)?t.y:null,x:t.x,z:t.z,color:t.color?seriesColor(0,t.color):void 0,label:t.label}:{value:null}}export function toValues(t){return t.map(t=>t.data.map(toValue))}export function toNumber(t){return t instanceof Date?Number.isFinite(t.getTime())?t.getTime():null:"number"==typeof t&&Number.isFinite(t)?t:null}export function categoryCount(t){return t.reduce((t,n)=>Math.max(t,n.data.length),0)}export function categoryAt(t,n,r){if(n&&t<n.length)return n[t];for(const n of r){const r=n[t]?.x;if(void 0!==r)return r}return t}export function formatCategory(r,o){return r instanceof Date?t(o,e).format(r):"number"==typeof r?n(o).format(r):r}export const PLOT_HEIGHT={xs:120,sm:160,md:220,lg:280,xl:360};export const CHART_FONT_SIZE={xs:10,sm:11,md:12,lg:13,xl:14};export const LINE_WIDTH={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const MARKER_RADIUS={xs:3,sm:3.5,md:4,lg:4.5,xl:5};export const MARK_GAP=2;export const BAR_RADIUS=4;export const BAR_MAX_THICKNESS={xs:24,sm:32,md:40,lg:48,xl:56};export const BAR_BAND_RATIO=.72;export function polarPoint(t,n,r,o){return{x:t+r*Math.sin(o),y:n-r*Math.cos(o)}}export function arcPath(t,n,r,o,e,a){const u=a-e;if(Math.abs(u)<1e-9||r<=0)return"";const i=Math.abs(u)>=2*Math.PI-1e-9,c=i?e+2*Math.PI*Math.sign(u||1):a,l=e+(c-e)/2,s=Math.abs(c-e)>Math.PI?1:0,x=c>e?1:0,h=x?0:1,f=polarPoint(t,n,r,e),m=polarPoint(t,n,r,l),$=polarPoint(t,n,r,c),p=i?`A${r} ${r} 0 0 ${x} ${m.x} ${m.y}A${r} ${r} 0 0 ${x} ${$.x} ${$.y}`:`A${r} ${r} 0 ${s} ${x} ${$.x} ${$.y}`;if(o<=0)return i?`M${f.x} ${f.y}${p}Z`:`M${t} ${n}L${f.x} ${f.y}${p}Z`;const M=polarPoint(t,n,o,c),b=polarPoint(t,n,o,l),d=polarPoint(t,n,o,e),y=i?`A${o} ${o} 0 0 ${h} ${b.x} ${b.y}A${o} ${o} 0 0 ${h} ${d.x} ${d.y}`:`A${o} ${o} 0 ${s} ${h} ${d.x} ${d.y}`;return`M${f.x} ${f.y}${p}L${M.x} ${M.y}${y}Z`}export function categoryExtent(t,n){let r=1/0,o=-1/0,e=!1;return t.forEach(t=>{t.forEach((t,a)=>{if(null===t.value)return;const u=toNumber(t.x??n?.[a]??a);null!==u&&(e=!0,r=Math.min(r,u),o=Math.max(o,u))})}),e?{min:r,max:o}:null}export const MARK_SHAPES=["circle","square","triangle","diamond","cross"];const l={circle:1,square:.886,triangle:1.35,diamond:1.25,cross:1.1};export function markPath(t,n,r,o){const e=o*l[t];switch(t){case"square":return`M${n-e} ${r-e}h${2*e}v${2*e}h${2*-e}Z`;case"triangle":return`M${n} ${r-e}L${n+.866*e} ${r+.5*e}L${n-.866*e} ${r+.5*e}Z`;case"diamond":return`M${n} ${r-e}L${n+e} ${r}L${n} ${r+e}L${n-e} ${r}Z`;case"cross":return`M${n-e} ${r-e}L${n+e} ${r+e}M${n+e} ${r-e}L${n-e} ${r+e}`;default:return`M${n-e} ${r}a${e} ${e} 0 1 0 ${2*e} 0a${e} ${e} 0 1 0 ${2*-e} 0Z`}}export function pointX(t,n,r){return toNumber(t.x??r?.[n]??n)}export function bubbleRadius(t,n,r,o){return n<=0||t<=0?o:o+(r-o)*Math.sqrt(Math.min(1,t/n))}export const RAMP_STEPS=5;export function rampStep(t){return Number.isFinite(t)?Math.min(4,Math.max(0,Math.floor(5*t))):0}export function rampFill(t){return`var(--_mp-chart-scale-${Math.min(5,Math.max(1,t+1))})`}export function rampInk(t){return t>=3?"var(--_mp-color-surface)":"var(--_mp-color-on-surface)"}
+import{dateTimeFormatter as t,numberFormatter as n}from"./intl.js";export const CHART_SLOTS=8;const r=new Set(["primary","secondary","tertiary","error"]);export function seriesColor(t,n){return n?r.has(n)?`var(--_mp-color-${n})`:n:`var(--_mp-chart-${t%8+1})`}export const COMPACT_FROM=1e4;const o={notation:"compact",maximumFractionDigits:1},e={month:"short",day:"numeric"},a={style:"percent",maximumFractionDigits:0};export function formatStatistic(t,r,e,a){return Number.isFinite(t)?e?n(r,e).format(t):a&&Math.abs(t)>=1e4?n(r,o).format(t):n(r).format(t):""}export function formatShare(t,r){return Number.isFinite(t)?t>0&&t<.005?`<${n(r,a).format(.01)}`:n(r,a).format(t):""}export function deltaOf(t,n,r){const o=t-n,e=o>0?1:o<0?-1:0;return{absolute:o,percent:0===n?null:o/Math.abs(n)*100,direction:e,good:0!==e&&1===e==("up"===r)}}function u(t,n){if(0===t.length)return"";if(1===t.length)return`M${t[0].x} ${t[0].y}h0`;const r=`M${t[0].x} ${t[0].y}`;if("smooth"===n)return r+function(t){const n=t.length,r=[];for(let o=0;o<n-1;o+=1){const n=t[o+1].x-t[o].x;r.push(0===n?0:(t[o+1].y-t[o].y)/n)}const o=[r[0]??0];for(let t=1;t<n-1;t+=1){const n=r[t-1],e=r[t];o.push(n*e<=0?0:2*n*e/(n+e))}o.push(r[n-2]??0);const e=[];for(let r=0;r<n-1;r+=1){const n=(t[r+1].x-t[r].x)/3;e.push(`C${t[r].x+n} ${t[r].y+o[r]*n} ${t[r+1].x-n} ${t[r+1].y-o[r+1]*n} ${t[r+1].x} ${t[r+1].y}`)}return e.join("")}(t);const o=[];for(let r=1;r<t.length;r+=1)if("step"===n){const n=(t[r-1].x+t[r].x)/2;o.push(`H${n}V${t[r].y}H${t[r].x}`)}else o.push(`L${t[r].x} ${t[r].y}`);return r+o.join("")}export function linePath(t,n){return function(t){const n=[];let r=[];for(const o of t)null===o?(r.length>0&&n.push(r),r=[]):r.push(o);return r.length>0&&n.push(r),n}(t).map(t=>u(t,n)).join("")}export function bridgePath(t){const n=[];let r=null,o=!1;for(const e of t)null!==e?(null!==r&&o&&n.push(`M${r.x} ${r.y}L${e.x} ${e.y}`),r=e,o=!1):o=null!==r;return n.join("")}export const BRIDGE_DASH=3;export function withoutGaps(t){return t.filter(t=>null!==t)}export function bandPath(t,n,r){const o=[];let e=[],a=[];const i=()=>{e.length>0&&o.push(`${u(e,r)}${u([...a].reverse(),r).replace(/^M/,"L")}Z`),e=[],a=[]};return t.forEach((t,r)=>{const o=n[r];null!==t&&null!=o?(e.push(t),a.push(o)):i()}),i(),o.join("")}export function areaPath(t,n,r){return bandPath(t,t.map(t=>null===t?null:{x:t.x,y:n}),r)}export function barPath(t,n,r,o,e,a){const u=Math.abs(r),i=Math.abs(o);if(0===u||0===i)return"";const l=Math.max(0,Math.min(e,u/2,i/2)),c="both"===a,s={tl:c||"top"===a||"left"===a?l:0,tr:c||"top"===a||"right"===a?l:0,br:c||"bottom"===a||"right"===a?l:0,bl:c||"bottom"===a||"left"===a?l:0},x=(t,n,r)=>t>0?`a${t} ${t} 0 0 1 ${n} ${r}`:"";return`M${t+s.tl} ${n}h`+(u-s.tl-s.tr)+x(s.tr,s.tr,s.tr)+"v"+(i-s.tr-s.br)+x(s.br,-s.br,s.br)+"h"+-(u-s.bl-s.br)+x(s.bl,-s.bl,-s.bl)+"v"+-(i-s.tl-s.bl)+x(s.tl,s.tl,-s.tl)+"Z"}export function extentOf(t,n,r){const o=bounds(t.filter(t=>null!==t&&Number.isFinite(t))),e=n??o?.min??0,a=r??o?.max??0;return e===a?{min:e-.5,max:a+.5}:{min:e,max:a}}export function withReferences(t,n){const r=(n??[]).flatMap(t=>[toNumber(t.value),void 0===t.to?null:toNumber(t.to)]).filter(t=>null!==t);return 0===r.length||null===t?t:{min:Math.min(t.min,...r),max:Math.max(t.max,...r)}}export function seriesExtent(t,n){let r=1/0,o=-1/0,e=!1;if(n){const n=t.reduce((t,n)=>Math.max(t,n.length),0);for(let a=0;a<n;a+=1){let n=0,u=0;for(const r of t){const t=r[a]?.value;null!=t&&(e=!0,t>=0?n+=t:u+=t)}r=Math.min(r,u),o=Math.max(o,n)}}else for(const n of t)for(const{value:t}of n)null!==t&&(e=!0,r=Math.min(r,t),o=Math.max(o,t));return e?{min:r,max:o}:null}function i(t){const n=10**Math.floor(Math.log10(t)),r=t/n;return r<=1?n:r<=2?2*n:r<=5?5*n:10*n}export function valueScale(t,n={}){const{tickCount:r=5,includeZero:o=!0}=n;let e=n.min??t?.min??0,a=n.max??t?.max??1;if(o&&void 0===n.min&&(e=Math.min(e,0)),o&&void 0===n.max&&(a=Math.max(a,0)),a===e){const t=Math.abs(a)>0?.5*Math.abs(a):1;e-=t,a+=t}const u=void 0!==n.min&&void 0!==n.max?function(t,n){const r=10**Math.floor(Math.log10(t/Math.max(1,n)));let o=i(t/Math.max(1,n)),e=1/0;for(const a of[.1,1,10])for(const u of[1,2,2.5,5]){const i=u*a*r,l=t/i,c=Math.round(l);if(c<1||Math.abs(l-c)>1e-9)continue;const s=Math.abs(c-n);s<e&&(e=s,o=i)}return o}(a-e,r):i((a-e)/Math.max(1,r)),l=void 0!==n.min?e:Math.floor(e/u)*u,c=void 0!==n.max?a:Math.ceil(a/u)*u,s=c-l||1,x=[];for(let t=l;t<=c+1e-9*u;t+=u)x.push(Number(t.toFixed(12)));return{min:l,max:c,ticks:x,fraction:t=>(t-l)/s}}export function bandScale(t,n,r){const o=t>0?n/t:n;return{step:o,band:o*r,centre:t=>o*(t+.5)}}const l=/[\u1100-\u11FF\u2E80-\uA4CF\uAC00-\uD7FF\uF900-\uFAFF\uFE30-\uFE4F]/;export function bounds(t){let n=1/0,r=-1/0;for(const o of t)o<n&&(n=o),o>r&&(r=o);return n<=r?{min:n,max:r}:null}export function textWidth(t,n){let r=0;for(const n of t)r+=l.test(n)?1:.6;return r*n}export function truncate(t,n,r){if(n<=0||textWidth(t,r)<=n)return t;const o=n-textWidth("…",r);let e="",a=0;for(const n of t){const t=a+textWidth(n,r);if(t>o)break;a=t,e+=n}return e.length>0?`${e.trimEnd()}…`:"…"}export function tickStride(t,n,r){return t<=1||n<=0?1:Math.max(1,Math.ceil(t/Math.max(1,Math.floor(n/Math.max(1,r)))))}export function showsTick(t,n,r,o){return t%r===0||o&&t===n-1}export function fitsLast(t,n,r,o){const e=(t-1)%n;return e>0&&e*r>=o+8}export const LABEL_AIR=12;const c=1.35;export function tickTurn(t,n,r,o){if("rotate"===t)return 45;if("vertical"===t)return 90;if("truncate"===t||void 0===t)return 0;const e=n.reduce((t,n)=>Math.max(t,textWidth(n,r)),0);return e+12<=o||e<3*r?0:o>=turnedStep(45,r)?45:90}export function turnedStep(t,n){const r=t*Math.PI/180;return n*c/Math.max(.2,Math.sin(r))}export function turnedBand(t,n,r){const o=t*Math.PI/180;return n*Math.sin(o)+r*c*Math.cos(o)/2}export function turnedRoom(t,n,r){const o=t*Math.PI/180;return(n-r*c*Math.cos(o)/2)/Math.max(.2,Math.sin(o))}export function toValue(t){return null==t?{value:null}:"number"==typeof t?{value:Number.isFinite(t)?t:null}:"object"==typeof t&&"y"in t?{value:null!==t.y&&Number.isFinite(t.y)?t.y:null,x:t.x,z:t.z,color:t.color?seriesColor(0,t.color):void 0,label:t.label}:{value:null}}export function toValues(t){return t.map(t=>t.data.map(toValue))}export function toNumber(t){return t instanceof Date?Number.isFinite(t.getTime())?t.getTime():null:"number"==typeof t&&Number.isFinite(t)?t:null}export function categoryCount(t){return t.reduce((t,n)=>Math.max(t,n.data.length),0)}export function categoryAt(t,n,r){if(n&&t<n.length)return n[t];for(const n of r){const r=n[t]?.x;if(void 0!==r)return r}return t}export function valueLabelTest(t,n,r){if("all"===n)return()=>!0;if("last"===n){let n=r??-1;if(void 0===r)for(let r=t.length-1;r>=0;r--)if(null!==t[r].value){n=r;break}return t=>t===n}if("extremes"!==n)return()=>!1;let o=1/0,e=-1/0;for(const n of t)null!==n.value&&(o=Math.min(o,n.value),e=Math.max(e,n.value));return n=>t[n]?.value===o||t[n]?.value===e}export function formatCategory(r,o){return r instanceof Date?t(o,e).format(r):"number"==typeof r?n(o).format(r):r}export const PLOT_HEIGHT={xs:120,sm:160,md:220,lg:280,xl:360};export const CHART_FONT_SIZE={xs:10,sm:11,md:12,lg:13,xl:14};export const LINE_WIDTH={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const MARKER_RADIUS={xs:3,sm:3.5,md:4,lg:4.5,xl:5};export const MARK_GAP=2;export const BAR_RADIUS=4;export const BAR_MAX_THICKNESS={xs:24,sm:32,md:40,lg:48,xl:56};export const BAR_BAND_RATIO=.72;export function polarPoint(t,n,r,o){return{x:t+r*Math.sin(o),y:n-r*Math.cos(o)}}export function arcPath(t,n,r,o,e,a){const u=a-e;if(Math.abs(u)<1e-9||r<=0)return"";const i=Math.abs(u)>=2*Math.PI-1e-9,l=i?e+2*Math.PI*Math.sign(u||1):a,c=e+(l-e)/2,s=Math.abs(l-e)>Math.PI?1:0,x=l>e?1:0,f=x?0:1,m=polarPoint(t,n,r,e),h=polarPoint(t,n,r,c),$=polarPoint(t,n,r,l),p=i?`A${r} ${r} 0 0 ${x} ${h.x} ${h.y}A${r} ${r} 0 0 ${x} ${$.x} ${$.y}`:`A${r} ${r} 0 ${s} ${x} ${$.x} ${$.y}`;if(o<=0)return i?`M${m.x} ${m.y}${p}Z`:`M${t} ${n}L${m.x} ${m.y}${p}Z`;const M=polarPoint(t,n,o,l),b=polarPoint(t,n,o,c),d=polarPoint(t,n,o,e),y=i?`A${o} ${o} 0 0 ${f} ${b.x} ${b.y}A${o} ${o} 0 0 ${f} ${d.x} ${d.y}`:`A${o} ${o} 0 ${s} ${f} ${d.x} ${d.y}`;return`M${m.x} ${m.y}${p}L${M.x} ${M.y}${y}Z`}export function categoryExtent(t,n){let r=1/0,o=-1/0,e=!1;return t.forEach(t=>{t.forEach((t,a)=>{if(null===t.value)return;const u=toNumber(t.x??n?.[a]??a);null!==u&&(e=!0,r=Math.min(r,u),o=Math.max(o,u))})}),e?{min:r,max:o}:null}export const MARK_SHAPES=["circle","square","triangle","diamond","cross"];const s={circle:1,square:.886,triangle:1.35,diamond:1.25,cross:1.1};export function markPath(t,n,r,o){const e=o*s[t];switch(t){case"square":return`M${n-e} ${r-e}h${2*e}v${2*e}h${2*-e}Z`;case"triangle":return`M${n} ${r-e}L${n+.866*e} ${r+.5*e}L${n-.866*e} ${r+.5*e}Z`;case"diamond":return`M${n} ${r-e}L${n+e} ${r}L${n} ${r+e}L${n-e} ${r}Z`;case"cross":return`M${n-e} ${r-e}L${n+e} ${r+e}M${n+e} ${r-e}L${n-e} ${r+e}`;default:return`M${n-e} ${r}a${e} ${e} 0 1 0 ${2*e} 0a${e} ${e} 0 1 0 ${2*-e} 0Z`}}export function pointX(t,n,r){return toNumber(t.x??r?.[n]??n)}export function bubbleRadius(t,n,r,o){return n<=0||t<=0?o:o+(r-o)*Math.sqrt(Math.min(1,t/n))}export const RAMP_STEPS=5;export function rampStep(t){return Number.isFinite(t)?Math.min(4,Math.max(0,Math.floor(5*t))):0}export function rampFill(t){return`var(--_mp-chart-scale-${Math.min(5,Math.max(1,t+1))})`}export function rampInk(t){return t>=3?"var(--_mp-color-surface)":"var(--_mp-color-on-surface)"}

package/dist/internal/color-scheme-keys.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The two names the scheme switch and its `<head>` script agree on.
+ *
+ * Kept apart from `internal/color-scheme.ts`, which is a store and imports
+ * React, so that `mpColorSchemeScript` can import them without importing React
+ * too. A module that imports React is marked `"use client"` by the build, and a
+ * function exported from one cannot be called from a server component — which
+ * is the one place the script is meant to be written.
+ */
+/** The attribute on the document element that forces a scheme. */
+export declare const SCHEME_ATTRIBUTE = "data-mp-scheme";
+/** Where a page's choice is remembered, unless told otherwise. */
+export declare const DEFAULT_STORAGE_KEY = "mp-color-scheme";

package/dist/internal/color-scheme-keys.js

@@ -0,0 +1 @@
+export const SCHEME_ATTRIBUTE="data-mp-scheme";export const DEFAULT_STORAGE_KEY="mp-color-scheme";

package/dist/internal/color-scheme.d.ts

@@ -1,9 +1,18 @@
+import { DEFAULT_STORAGE_KEY, SCHEME_ATTRIBUTE } from './color-scheme-keys.js';
 /** What a page can be set to. `'system'` is the absence of a choice. */
 export type MPColorScheme = 'light' | 'dark' | 'system';
 /** What is actually painted, once `'system'` has been resolved. */
 export type MPResolvedColorScheme = 'light' | 'dark';
-export declare const SCHEME_ATTRIBUTE = "data-mp-scheme";
-export declare const DEFAULT_STORAGE_KEY = "mp-color-scheme";
+export { DEFAULT_STORAGE_KEY, SCHEME_ATTRIBUTE };
+/**
+ * Puts the choice on the document element, or takes it off.
+ *
+ * `'system'` **removes** the attribute rather than writing it, which is the
+ * whole of how the media query gets its say back: the dark block is reached
+ * either by `prefers-color-scheme` on a root that is not forced light, or by the
+ * attribute. An attribute spelling out `system` would match neither.
+ */
+export declare function applyScheme(scheme: MPColorScheme): void;
 export declare function setScheme(storageKey: string, scheme: MPColorScheme): void;
 export declare function useChosenScheme(storageKey: string): MPColorScheme;
 /**

package/dist/internal/color-scheme.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export const SCHEME_ATTRIBUTE="data-mp-scheme";export const DEFAULT_STORAGE_KEY="mp-color-scheme";const t="(prefers-color-scheme: dark)";function n(e){return"light"===e||"dark"===e||"system"===e}let o;const r=new Set;function c(){for(const e of r)e()}export function setScheme(e,t){o=t,function(e,t){try{"system"===t?localStorage.removeItem(e):localStorage.setItem(e,t)}catch{}}(e,t),function(e){if("undefined"==typeof document)return;const t=document.documentElement;"system"===e?t.removeAttribute("data-mp-scheme"):t.setAttribute("data-mp-scheme",e)}(t),c()}function s(e){return r.add(e),()=>{r.delete(e)}}function u(e){return o??=function(){if("undefined"==typeof document)return;const e=document.documentElement.getAttribute("data-mp-scheme");return n(e)&&"system"!==e?e:void 0}()??function(e){try{if("undefined"==typeof localStorage)return"system";const t=localStorage.getItem(e);return n(t)?t:"system"}catch{return"system"}}(e),o}export function useChosenScheme(t){const n=e.useCallback(()=>u(t),[t]);return e.useSyncExternalStore(s,n,()=>"system")}function m(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(t);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)}function i(){return"undefined"!=typeof window&&window.matchMedia?.(t).matches?"dark":"light"}export function useSystemScheme(){return e.useSyncExternalStore(m,i,()=>"light")}export function resetScheme(){o=void 0,c()}
+import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as n}from"./color-scheme-keys.js";import{mediaList as o}from"./media.js";export{t as DEFAULT_STORAGE_KEY,n as SCHEME_ATTRIBUTE};const r="(prefers-color-scheme: dark)";function c(e){return"light"===e||"dark"===e||"system"===e}let u;const s=new Set;function m(){for(const e of s)e()}export function applyScheme(e){if("undefined"==typeof document)return;const t=document.documentElement;"system"===e?t.removeAttribute(n):t.setAttribute(n,e)}export function setScheme(e,t){u=t,function(e,t){try{"system"===t?localStorage.removeItem(e):localStorage.setItem(e,t)}catch{}}(e,t),applyScheme(t),m()}function i(e){return s.add(e),()=>{s.delete(e)}}function f(e){return u??=function(){if("undefined"==typeof document)return;const e=document.documentElement.getAttribute(n);return c(e)&&"system"!==e?e:void 0}()??function(e){try{if("undefined"==typeof localStorage)return"system";const t=localStorage.getItem(e);return c(t)?t:"system"}catch{return"system"}}(e),u}export function useChosenScheme(t){const n=e.useCallback(()=>f(t),[t]);return e.useSyncExternalStore(i,n,()=>"system")}function a(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=o(r);return t?.addEventListener("change",e),()=>t?.removeEventListener("change",e)}function d(){return o(r)?.matches?"dark":"light"}export function useSystemScheme(){return e.useSyncExternalStore(a,d,()=>"light")}export function resetScheme(){u=void 0,m()}

package/dist/internal/config.d.ts

@@ -41,6 +41,8 @@ export interface MPConfigValue {
      * and cannot be.
      */
     breakpoints?: Partial<Record<MPWindowClass, number>>;
+    /** Whether a field keeps a line under itself for a message it has not got yet. */
+    reserveSupportingText?: boolean;
 }
 export declare const MPConfigContext: React.Context<MPConfigValue>;
 /** The configuration in force at this point in the tree. */

package/dist/internal/date.d.ts

@@ -214,14 +214,8 @@ export declare function weekdayLabels(locale: string | undefined, weekStartsOn:
 /** The twelve month names, January first, in the locale's own words. */
 export declare function monthLabels(locale: string | undefined, month?: 'short' | 'long'): readonly string[];
 /**
- * Does this locale write the month before the year?
- *
- * The calendar's header is two separate buttons — one that opens the month grid
- * and one that opens the year grid — so it cannot just print what `Intl` gives
- * it. Asking `formatToParts` which part came first is how the two buttons end up
- * in the order the reader expects: `July 2026` in English, `2026년 7월` in
- * Korean. Getting this wrong is subtle and reads as broken to exactly the people
- * it is wrong for.
+ * Cached on the locale for the reason `isHour12` is: a calendar's header asks
+ * on every render, and `formatToParts` builds a fresh array of parts each time.
  */
 export declare function isMonthBeforeYear(locale: string | undefined): boolean;
 export declare function isHour12(locale: string | undefined): boolean;

package/dist/internal/date.js

@@ -1 +1 @@
-import{dateTimeFormatter as t,remember as e}from"./intl.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function startOfUnit(t,e){return"year"===e?function(t){return makeDate(t.getFullYear(),0,1)}(t):"month"===e?startOfMonth(t):startOfDay(t)}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);var o,a;return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),(o=n.getFullYear(),a=n.getMonth(),makeDate(o,a+1,0).getDate()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function isUnitOutside(t,e,r,n){return"day"===e?isDayOutside(t,r,n):!!(isValidDate(r)&&compareDay(function(t,e){return"year"===e?makeDate(t.getFullYear(),11,31):"month"===e?makeDate(t.getFullYear(),t.getMonth()+1,0):startOfDay(t)}(t,e),r)<0)||isValidDate(n)&&compareDay(startOfUnit(t,e),n)>0}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}export function dateFormatter(e,r){return t(e,r)}export function formatDate(t,e,r){return isValidDate(t)?dateFormatter(e,r).format(t):""}const r=Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(t,e){const n=dateFormatter(t,e);return[...new Set(r.map(t=>n.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOMonth(t){return`${toISOYear(t)}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISODate(t){return`${toISOMonth(t)}-${String(t.getDate()).padStart(2,"0")}`}export const TO_ISO={day:toISODate,month:toISOMonth,year:toISOYear};export function toISOTime(t,e=!1){const r=t=>String(t).padStart(2,"0"),n=`${r(t.getHours())}:${r(t.getMinutes())}`;return e?`${n}:${r(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const n=makeDate(2021,7,1),o=new Map;export function weekdayLabels(t,r,a="narrow"){const i=`w ${t??""} ${r} ${a}`,u=o.get(i);if(u)return u;const s=dateFormatter(t,{weekday:a});return e(o,i,Array.from({length:7},(t,e)=>s.format(addDays(n,(r+e)%7))))}export function monthLabels(t,r="short"){const n=`m ${t??""} ${r}`,a=o.get(n);if(a)return a;const i=dateFormatter(t,{month:r});return e(o,n,Array.from({length:12},(t,e)=>i.format(makeDate(2021,e,1))))}export function isMonthBeforeYear(t){const e=dateFormatter(t,{year:"numeric",month:"long"}).formatToParts(n);return e.findIndex(t=>"month"===t.type)<e.findIndex(t=>"year"===t.type)}const a=new Map;export function isHour12(t){const r=t??"",n=a.get(r);if(void 0!==n)return n;const o=dateFormatter(t,{hour:"numeric"}).resolvedOptions(),i=o.hourCycle?"h11"===o.hourCycle||"h12"===o.hourCycle:!0===o.hour12;return e(a,r,i)}export function meridiemLabels(t){const e=dateFormatter(t,{hour:"numeric",hour12:!0}),r=t=>{const r=e.formatToParts(withTime(n,{hours:t})).find(t=>"dayPeriod"===t.type);return r?.value??(t<12?"AM":"PM")};return[r(9),r(21)]}const i=new Map;export function localeWeekStart(t){const r=t??"",n=i.get(r);return void 0!==n?n:e(i,r,function(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}(t))}
+import{checkServerLocale as t,dateTimeFormatter as e,remember as r}from"./intl.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function startOfUnit(t,e){return"year"===e?function(t){return makeDate(t.getFullYear(),0,1)}(t):"month"===e?startOfMonth(t):startOfDay(t)}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);var o,a;return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),(o=n.getFullYear(),a=n.getMonth(),makeDate(o,a+1,0).getDate()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function isUnitOutside(t,e,r,n){return"day"===e?isDayOutside(t,r,n):!!(isValidDate(r)&&compareDay(function(t,e){return"year"===e?makeDate(t.getFullYear(),11,31):"month"===e?makeDate(t.getFullYear(),t.getMonth()+1,0):startOfDay(t)}(t,e),r)<0)||isValidDate(n)&&compareDay(startOfUnit(t,e),n)>0}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}export function dateFormatter(t,r){return e(t,r)}export function formatDate(t,e,r){return isValidDate(t)?dateFormatter(e,r).format(t):""}const n=Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(t,e){const r=dateFormatter(t,e);return[...new Set(n.map(t=>r.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOMonth(t){return`${toISOYear(t)}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISODate(t){return`${toISOMonth(t)}-${String(t.getDate()).padStart(2,"0")}`}export const TO_ISO={day:toISODate,month:toISOMonth,year:toISOYear};export function toISOTime(t,e=!1){const r=t=>String(t).padStart(2,"0"),n=`${r(t.getHours())}:${r(t.getMinutes())}`;return e?`${n}:${r(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const o=makeDate(2021,7,1),a=new Map;export function weekdayLabels(t,e,n="narrow"){const i=`w ${t??""} ${e} ${n}`,u=a.get(i);if(u)return u;const s=dateFormatter(t,{weekday:n});return r(a,i,Array.from({length:7},(t,r)=>s.format(addDays(o,(e+r)%7))))}export function monthLabels(t,e="short"){const n=`m ${t??""} ${e}`,o=a.get(n);if(o)return o;const i=dateFormatter(t,{month:e});return r(a,n,Array.from({length:12},(t,e)=>i.format(makeDate(2021,e,1))))}const i=new Map;export function isMonthBeforeYear(t){const e=t??"",n=i.get(e);if(void 0!==n)return n;const a=dateFormatter(t,{year:"numeric",month:"long"}).formatToParts(o);return r(i,e,a.findIndex(t=>"month"===t.type)<a.findIndex(t=>"year"===t.type))}const u=new Map;export function isHour12(t){const e=t??"",n=u.get(e);if(void 0!==n)return n;const o=dateFormatter(t,{hour:"numeric"}).resolvedOptions(),a=o.hourCycle?"h11"===o.hourCycle||"h12"===o.hourCycle:!0===o.hour12;return r(u,e,a)}export function meridiemLabels(t){const e=dateFormatter(t,{hour:"numeric",hour12:!0}),r=t=>{const r=e.formatToParts(withTime(o,{hours:t})).find(t=>"dayPeriod"===t.type);return r?.value??(t<12?"AM":"PM")};return[r(9),r(21)]}const s=new Map;export function localeWeekStart(e){const n=e??"",o=s.get(n);return void 0!==o?o:r(s,n,function(e){t(e);try{const t=e??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(t),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}(e))}

package/dist/internal/fold.d.ts

@@ -0,0 +1,45 @@
+/**
+ * When a folding panel may stop clipping what is inside it.
+ *
+ * `MPAccordion` and `MPCollapsible` animate a panel's height, and both clip the
+ * panel while it moves so the body is a window rather than a squashed copy of
+ * itself. That clip is the animation's, not the panel's, and it has no business
+ * surviving the animation: a settled panel that goes on clipping cuts the top
+ * off the first thing in it that draws outside its own box. A text field's
+ * floating label is exactly that — it sits *on* the field's top edge, which is
+ * the panel's top edge — so a form in a fold arrived with its first label
+ * sliced in half, and nothing in the console said so. A select's popup, a
+ * tooltip and a focus ring are the same bug with different pixels.
+ *
+ * It cannot be a `data-open:` variant on its own: `data-open` is set for the
+ * whole of the opening animation, which is the part that has to clip. The state
+ * this needs is "open **and** no longer moving", and nothing in the DOM says
+ * that, so `useSettledPanel` works it out from the transition itself.
+ *
+ * Its own file because the two components share it, and two copies of one rule
+ * are two copies that will eventually disagree. It was the accordion's alone
+ * until the collapsible turned out to clip the same label.
+ */
+import * as React from 'react';
+/** Added to a panel once it has finished opening. */
+export declare const PANEL_SETTLED = "data-open:overflow-visible";
+/**
+ * Whether the panel has finished opening, and the two hooks into it that say so.
+ *
+ * - The height's `transitionend` decides it, either way. Base UI's
+ *   `transitionStatus` cannot: it marks the first frame and the last, and what
+ *   is needed here is the stretch between them.
+ * - The callback ref covers the two panels that never transition at all — one
+ *   that started open, and any panel under reduced motion — both of which would
+ *   otherwise wait for an end that is not coming. It runs during the commit,
+ *   before the browser paints, so a panel opening the ordinary way is clipped by
+ *   the time there is anything to see.
+ *
+ * Closing needs nothing: `data-open` goes the moment a fold is asked to close,
+ * which puts the clip back for the whole of the way down.
+ */
+export declare function useSettledPanel(): {
+    attach: (node: HTMLDivElement | null) => void;
+    settled: boolean;
+    onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => void;
+};

package/dist/internal/fold.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";export const PANEL_SETTLED="data-open:overflow-visible";export function useSettledPanel(){const e=t.useRef(null),[a,r]=t.useState(!1);return{attach:t.useCallback(t=>{var a;e.current=t,t&&r(t.hasAttribute("data-open")&&!((a=t).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(a).transitionDuration)>0))},[]),settled:a,onTransitionEnd:t.useCallback(t=>{t.target===e.current&&"height"===t.propertyName&&r(e.current.hasAttribute("data-open"))},[])}}

package/dist/internal/highlight.js

@@ -1 +1 @@
-const i={bash:()=>import("highlight.js/lib/languages/bash"),c:()=>import("highlight.js/lib/languages/c"),cpp:()=>import("highlight.js/lib/languages/cpp"),csharp:()=>import("highlight.js/lib/languages/csharp"),css:()=>import("highlight.js/lib/languages/css"),diff:()=>import("highlight.js/lib/languages/diff"),dockerfile:()=>import("highlight.js/lib/languages/dockerfile"),go:()=>import("highlight.js/lib/languages/go"),graphql:()=>import("highlight.js/lib/languages/graphql"),ini:()=>import("highlight.js/lib/languages/ini"),java:()=>import("highlight.js/lib/languages/java"),javascript:()=>import("highlight.js/lib/languages/javascript"),json:()=>import("highlight.js/lib/languages/json"),kotlin:()=>import("highlight.js/lib/languages/kotlin"),less:()=>import("highlight.js/lib/languages/less"),lua:()=>import("highlight.js/lib/languages/lua"),makefile:()=>import("highlight.js/lib/languages/makefile"),markdown:()=>import("highlight.js/lib/languages/markdown"),objectivec:()=>import("highlight.js/lib/languages/objectivec"),perl:()=>import("highlight.js/lib/languages/perl"),php:()=>import("highlight.js/lib/languages/php"),plaintext:()=>import("highlight.js/lib/languages/plaintext"),powershell:()=>import("highlight.js/lib/languages/powershell"),python:()=>import("highlight.js/lib/languages/python"),r:()=>import("highlight.js/lib/languages/r"),ruby:()=>import("highlight.js/lib/languages/ruby"),rust:()=>import("highlight.js/lib/languages/rust"),scss:()=>import("highlight.js/lib/languages/scss"),shell:()=>import("highlight.js/lib/languages/shell"),sql:()=>import("highlight.js/lib/languages/sql"),swift:()=>import("highlight.js/lib/languages/swift"),typescript:()=>import("highlight.js/lib/languages/typescript"),xml:()=>import("highlight.js/lib/languages/xml"),yaml:()=>import("highlight.js/lib/languages/yaml")},t={"c++":"cpp",cc:"cpp",cjs:"javascript",console:"bash",cs:"csharp",cts:"typescript",docker:"dockerfile",golang:"go",gql:"graphql",h:"cpp",hpp:"cpp",htm:"xml",html:"xml",js:"javascript",jsx:"javascript",kt:"kotlin",kts:"kotlin",md:"markdown",mdx:"markdown",mjs:"javascript",mm:"objectivec",mts:"typescript",mysql:"sql",node:"javascript",none:"plaintext",objc:"objectivec",plain:"plaintext",posh:"powershell",ps1:"powershell",psql:"sql",py:"python",rb:"ruby",rs:"rust",sh:"bash",svelte:"xml",svg:"xml",text:"plaintext",toml:"ini",ts:"typescript",tsx:"typescript",txt:"plaintext",vue:"xml",yml:"yaml",zsh:"bash"},l=new Map;let g=null;const s=new Map;export function registerMPLanguage(i,t){const g=i.toLowerCase();l.set(g,t),s.delete(g)}export function canonicalLanguage(i){if(!i)return null;const l=i.trim().toLowerCase();return l?t[l]??l:null}export async function highlightCode(t,a){let e=s.get(a);e||(e=async function(t){const s=l.get(t),a=s?void 0:i[t];if(!s&&!a)return null;g??=import("highlight.js/lib/core").then(i=>i.default);const e=await g;return s?e.registerLanguage(t,s):e.getLanguage(t)||e.registerLanguage(t,(await a()).default),t}(a).catch(i=>{throw s.delete(a),i}),s.set(a,e));const h=await e;if(!h||!g)return null;return tokenize((await g).highlight(t,{language:h,ignoreIllegals:!0}).value)}const a={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#x27;":"'"};export function tokenize(i){const t=[[]],l=[],g=/<span class="([^"]*)">|<\/span>/g;let s=0;const e=i=>{if(!i)return;const g=l[l.length-1];i.replace(/&(?:amp|lt|gt|quot|#x27);/g,i=>a[i]).split("\n").forEach((i,l)=>{l>0&&t.push([]),i&&t[t.length-1].push(g?{text:i,token:g}:{text:i})})};for(const t of i.matchAll(g))e(i.slice(s,t.index)),s=t.index+t[0].length,void 0===t[1]?l.pop():l.push(t[1]);return e(i.slice(s)),t}export function plainLines(i){return i.split("\n").map(i=>i?[{text:i}]:[])}
+const i={bash:()=>import("highlight.js/lib/languages/bash"),c:()=>import("highlight.js/lib/languages/c"),cpp:()=>import("highlight.js/lib/languages/cpp"),csharp:()=>import("highlight.js/lib/languages/csharp"),css:()=>import("highlight.js/lib/languages/css"),diff:()=>import("highlight.js/lib/languages/diff"),dockerfile:()=>import("highlight.js/lib/languages/dockerfile"),go:()=>import("highlight.js/lib/languages/go"),graphql:()=>import("highlight.js/lib/languages/graphql"),ini:()=>import("highlight.js/lib/languages/ini"),java:()=>import("highlight.js/lib/languages/java"),javascript:()=>import("highlight.js/lib/languages/javascript"),json:()=>import("highlight.js/lib/languages/json"),kotlin:()=>import("highlight.js/lib/languages/kotlin"),less:()=>import("highlight.js/lib/languages/less"),lua:()=>import("highlight.js/lib/languages/lua"),makefile:()=>import("highlight.js/lib/languages/makefile"),markdown:()=>import("highlight.js/lib/languages/markdown"),objectivec:()=>import("highlight.js/lib/languages/objectivec"),perl:()=>import("highlight.js/lib/languages/perl"),php:()=>import("highlight.js/lib/languages/php"),plaintext:()=>import("highlight.js/lib/languages/plaintext"),powershell:()=>import("highlight.js/lib/languages/powershell"),python:()=>import("highlight.js/lib/languages/python"),r:()=>import("highlight.js/lib/languages/r"),ruby:()=>import("highlight.js/lib/languages/ruby"),rust:()=>import("highlight.js/lib/languages/rust"),scss:()=>import("highlight.js/lib/languages/scss"),shell:()=>import("highlight.js/lib/languages/shell"),sql:()=>import("highlight.js/lib/languages/sql"),swift:()=>import("highlight.js/lib/languages/swift"),typescript:()=>import("highlight.js/lib/languages/typescript"),xml:()=>import("highlight.js/lib/languages/xml"),yaml:()=>import("highlight.js/lib/languages/yaml")},t={"c++":"cpp",cc:"cpp",cjs:"javascript",console:"bash",cs:"csharp",cts:"typescript",docker:"dockerfile",golang:"go",gql:"graphql",h:"cpp",hpp:"cpp",htm:"xml",html:"xml",js:"javascript",jsx:"javascript",kt:"kotlin",kts:"kotlin",md:"markdown",mdx:"markdown",mjs:"javascript",mm:"objectivec",mts:"typescript",mysql:"sql",node:"javascript",none:"plaintext",objc:"objectivec",plain:"plaintext",posh:"powershell",ps1:"powershell",psql:"sql",py:"python",rb:"ruby",rs:"rust",sh:"bash",svelte:"xml",svg:"xml",text:"plaintext",toml:"ini",ts:"typescript",tsx:"typescript",txt:"plaintext",vue:"xml",yml:"yaml",zsh:"bash"},l=new Map;let s=null;const g=new Map;export function registerMPLanguage(i,t){const s=i.toLowerCase();l.set(s,t),g.delete(s)}export function canonicalLanguage(i){if(!i)return null;const l=i.trim().toLowerCase();return l?t[l]??l:null}export async function highlightCode(t,e){let a=g.get(e);a||(a=async function(t){const g=l.get(t),e=g?void 0:i[t];if(!g&&!e)return null;s??=import("highlight.js/lib/core").then(i=>i.default);const a=await s;return g?a.registerLanguage(t,g):a.getLanguage(t)||a.registerLanguage(t,(await e()).default),t}(e).catch(i=>{throw g.delete(e),i}),g.set(e,a));const h=await a;if(!h||!s)return null;const n=await s;return await function(){const i=globalThis.scheduler;return i?.yield?i.yield():new Promise(i=>setTimeout(i,0))}(),tokenize(n.highlight(t,{language:h,ignoreIllegals:!0}).value)}const e={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#x27;":"'"};export function tokenize(i){const t=[[]],l=[],s=/<span class="([^"]*)">|<\/span>/g;let g=0;const a=i=>{if(!i)return;const s=l[l.length-1];i.replace(/&(?:amp|lt|gt|quot|#x27);/g,i=>e[i]).split("\n").forEach((i,l)=>{l>0&&t.push([]),i&&t[t.length-1].push(s?{text:i,token:s}:{text:i})})};for(const t of i.matchAll(s))a(i.slice(g,t.index)),g=t.index+t[0].length,void 0===t[1]?l.pop():l.push(t[1]);return a(i.slice(g)),t}export function plainLines(i){return i.split("\n").map(i=>i?[{text:i}]:[])}

package/dist/internal/i18n.d.ts

@@ -1,56 +1,3 @@
-/**
- * The words the library says on its own behalf.
- *
- * Almost nothing in Material Plus writes text a reader sees — a button says
- * whatever it was handed, a dialog's title is the caller's. The exceptions are
- * the strings a component has to invent because there is nowhere else for them
- * to come from: the name on a calendar's back arrow, the word on the button that
- * empties a picker, the label a screen reader hears for a column of minutes.
- *
- * Those are collected here rather than defaulted inside each component, because
- * they are a *set*. A product in Korean does not want four pickers each
- * defaulting to English and each needing eighteen override props; and the next
- * component that needs a word should get it from the same place rather than
- * starting a second table beside this one.
- *
- * What is *not* in here is anything `Intl` already knows. Month names, weekday
- * names, AM/PM and number formats come from the platform, which speaks more
- * languages than this file ever will — see `internal/date.ts`. This is only for
- * the words the platform has no opinion about.
- *
- * Every component that reads this takes a `locale` and an override prop for the
- * strings themselves, so an unsupported language is never a dead end: `locale`
- * gets you a translation, `MPLocaleProvider` gets you one for the whole
- * application at once, and the prop gets you one for anything else.
- *
- * ## Where the words themselves are
- *
- * Not here. This file is the shape of the table, the registry a translation
- * arrives through, and the merge — no strings.
- *
- * The eighteen translations live under `src/locales/`, and nothing in the
- * library imports them. They used to be here, and being here is what made them
- * cost something: a component that says one word — `MPButton` says *Loading* —
- * held a static import chain down to a table of every string in every language,
- * and a bundler cannot drop data that something imports. Twenty kilobytes, on
- * every consumer, for a word. So the table arrives from the outside instead:
- * `registerMPMessages` below is how, `material-plus-ui/locales` is where from,
- * and the only thing that changed for a reader is that the application now names
- * the languages it speaks. Once it has, `locale="ko"` resolves through exactly
- * the path it always did.
- *
- * English left too, for the same reason one step smaller. It is thirteen modules
- * under `internal/messages/`, one per namespace, because a bundler that can drop
- * a module it can also drop an export — and cannot drop a property. Held as one
- * object, English was 1.75 kB that every component carried whole: `MPButton`
- * shipped the calendar's eighteen strings to say *Loading*. `resolveNamespace`
- * is handed the namespace it should merge, so a component pays for the words it
- * speaks and no others.
- *
- * The public surface is `registerMPMessages`, `MPLocaleProvider` and the
- * per-component `labels` props; `resolveNamespace` and `fillMessage` stay
- * internal.
- */
 /**
  * One namespace per component, rather than one flat list of keys.
  *
@@ -95,6 +42,12 @@ export interface MPMessages {
         removeNamed: string;
         /** The spinner that replaces a button's leading glyph while it waits. */
         loading: string;
+        /**
+         * The asterisk after a field's label, read out where the control cannot
+         * say it itself. A picker's trigger is a `<button>`, which takes neither
+         * `required` nor `aria-required`, so its label carries the word instead.
+         */
+        required: string;
     };
     /**
      * MPTextField.

package/dist/internal/i18n.js

@@ -1 +1 @@
-const e=new Map;export function registerMPMessages(...s){for(const t of s){e.set(t.locale.toLowerCase(),t.messages);for(const s of t.aliases??[])e.set(s.toLowerCase(),t.messages)}t.clear()}const t=new Map;export function resolveNamespace(s,n){const o=n?.trim()??"",r=`${s.name}\0${o}`,a=t.get(r);if(a)return a;const c=function(e){const t=e.toLowerCase().split(/[-_]/).filter(Boolean),s=t[0];if(!s)return[];const n=t.slice(1),o=n.find(e=>/^[a-z]{4}$/.test(e)),r=n.find(e=>/^([a-z]{2}|\d{3})$/.test(e));return[o?`${s}-${o}`:"",r?`${s}-${r}`:"",s].filter(Boolean)}(o).map(t=>e.get(t)).find(Boolean),i=c?.[s.name],f=i?{...s.en,...i}:s.en;return t.set(r,f),f}export function fillMessage(e,t){return e.replace(/\{(\w+)\}/g,(e,s)=>t[s]??e)}
+import{remember as e}from"./remember.js";const t=new Map;export function registerMPMessages(...e){for(const o of e){t.set(o.locale.toLowerCase(),o.messages);for(const e of o.aliases??[])t.set(e.toLowerCase(),o.messages)}o.clear()}const o=new Map;export function resolveNamespace(s,n){const r=n?.trim()??"",a=`${s.name}\0${r}`,i=o.get(a);if(i)return i;const c=function(e){const t=e.toLowerCase().split(/[-_]/).filter(Boolean),o=t[0];if(!o)return[];const s=t.slice(1),n=s.find(e=>/^[a-z]{4}$/.test(e)),r=s.find(e=>/^([a-z]{2}|\d{3})$/.test(e));return[n?`${o}-${n}`:"",r?`${o}-${r}`:"",o].filter(Boolean)}(r).map(e=>t.get(e)).find(Boolean),f=c?.[s.name],l=f?{...s.en,...f}:s.en;return e(o,a,l)}export function fillMessage(e,t){return e.replace(/\{(\w+)\}/g,(e,o)=>t[o]??e)}