material-plus-ui 1.9.0 → 1.11.0

package/dist/components/date-range-picker/MPDateRangePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPButton as a}from"../button/MPButton.js";import{MPIcon as t}from"../icon/MPIcon.js";import{ArrowRightIcon as r,CalendarIcon as s}from"../../constants/icons.js";import{Calendar as o}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as c,MPPickerShell as u,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{MPWidthSizer as h}from"../../internal/WidthSizer.js";import{CONTROL_ICON as v,META_TEXT as x}from"../../internal/scale.js";import{addMonths as g,compareDay as j,formatDate as b,isValidDate as w,localeWeekStart as N,startOfDay as S,startOfMonth as C,toISODate as D,today as k,withPlaceholder as y}from"../../internal/date.js";import{useMPColor as O,useMPSize as P}from"../../internal/config.js";const z={start:null,end:null};export const MPDateRangePicker=/*@__PURE__*/n.forwardRef(function({value:M,defaultValue:B,onValueChange:I,open:R,defaultOpen:V,onOpenChange:E,defaultMonth:F,minDate:W,maxDate:$,shouldDisableDate:_,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:L,clearable:Q=!1,closeOnSelect:T=!0,labels:U,name:X,size:Y,color:Z,readOnly:ee=!1,disabled:le=!1,startIcon:ne,...ae},te){const re=P(Y),se=O(Z),oe=d(q),ie=p(f,oe,U),ce=A??N(oe),[ue,me]=n.useState(B??z),de=void 0!==M?M??z:ue,pe=w(de.start)?de.start:null,fe=w(de.end)?de.end:null,[he,ve]=n.useState(V??!1),xe=R??he,[ge,je]=n.useState(null),[be,we]=n.useState(null),[Ne,Se]=n.useState(()=>C(pe??F??k()));n.useEffect(()=>{xe?Se(C(pe??F??k())):(je(null),we(null))},[xe]);const Ce=e=>{e&&(ee||le)||(void 0===R&&ve(e),E?.(e))},De=e=>{void 0===M&&me(e),I?.(e)},ke=ge??pe,ye=null!==ge?be:fe,Oe=(l,n)=>w(l)?b(l,oe,G):e("span",{className:"text-mp-on-surface-variant",children:n??""}),Pe=g(Ne,1),ze=2===H,Me=m(oe,G),Be=null!==ge?ie.end:null===pe?ie.start:null,Ie={size:re,color:se,locale:oe,weekStartsOn:ce,selected:[pe,fe,ge],rangeStart:ke,rangeEnd:ye,onSelect:e=>{const l=S(e);if(null===ge)return je(l),we(l),void De({start:l,end:null});const[n,a]=j(l,ge)<0?[l,ge]:[ge,l];je(null),we(null),De({start:n,end:a}),T&&Ce(!1)},onPreviewChange:e=>{null!==ge&&we(e??ge)},minDate:W,maxDate:$,shouldDisableDate:_,showOutsideDays:!1,labels:ie};return e(u,{...ae,slug:"date-range-picker",size:re,color:se,readOnly:ee,disabled:le,triggerRef:te,startIcon:void 0===ne?e(t,{icon:s,size:v[re]}):ne,display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(pe,J)}),e(h,{samples:y(Me,J)})]}),e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center rtl:rotate-180",children:e(t,{icon:r,size:v[re]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(fe,K)}),e(h,{samples:y(Me,K)})]})]}),empty:null===pe&&null===fe,clearable:Q,onClear:()=>De(z),open:xe,onOpenChange:Ce,labels:ie,hiddenValues:X?[{name:X,value:pe?D(pe):""},{name:X,value:fe?D(fe):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:"flex items-stretch gap-2",children:[L&&L.length>0?e("div",{className:"border-mp-outline-variant flex max-h-[calc(var(--_mp-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5",children:L.map((l,n)=>e(a,{variant:"text",size:i[re],color:se,className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;je(null),we(null),De(l),w(l.start)&&Se(C(l.start)),T&&Ce(!1)})(l),children:l.label},n))}):null,e(o,{...Ie,month:Ne,onMonthChange:Se,showNextButton:!ze,autoFocus:!0}),ze?e(o,{...Ie,month:Pe,onMonthChange:e=>Se(g(e,-1)),showPreviousButton:!1}):null]}),Q||null!==Be?l(c,{children:[null!==Be?e("span",{className:`text-mp-on-surface-variant me-auto ${x}`,children:Be}):null,Q?e(a,{variant:"text",size:i[re],color:se,onClick:()=>{je(null),we(null),De(z),Ce(!1)},children:ie.clear}):null]}):null]})})});
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPButton as a}from"../button/MPButton.js";import{MPIcon as t}from"../icon/MPIcon.js";import{ArrowRightIcon as r,CalendarIcon as s}from"../../constants/icons.js";import{Calendar as o}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as c,MPPickerShell as u,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{MPWidthSizer as h}from"../../internal/WidthSizer.js";import{CONTROL_ICON as v,META_TEXT as x}from"../../internal/scale.js";import{addMonths as g,compareDay as j,formatDate as b,isValidDate as w,localeWeekStart as N,startOfDay as S,startOfMonth as C,toISODate as D,today as k,withPlaceholder as y}from"../../internal/date.js";import{useMPColor as O,useMPSize as P}from"../../internal/config.js";const z={start:null,end:null};export const MPDateRangePicker=/*@__PURE__*/n.forwardRef(function({value:M,defaultValue:V,onValueChange:B,open:I,defaultOpen:R,onOpenChange:$,defaultMonth:E,minDate:F,maxDate:W,shouldDisableDate:_,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:L,clearable:Q=!1,closeOnSelect:T=!0,labels:U,name:X,size:Y,color:Z,readOnly:ee=!1,disabled:le=!1,startIcon:ne,...ae},te){const re=P(Y),se=O(Z),oe=d(q),ie=p(f,oe,U),ce=A??N(oe),[ue,me]=n.useState(V??z),de=void 0!==M?M??z:ue,pe=w(de.start)?de.start:null,fe=w(de.end)?de.end:null,[he,ve]=n.useState(R??!1),xe=I??he,[ge,je]=n.useState(null),[be,we]=n.useState(null),[Ne,Se]=n.useState(()=>C(pe??E??k()));n.useEffect(()=>{xe?Se(C(pe??E??k())):(je(null),we(null))},[xe]);const Ce=e=>{e&&(ee||le)||(void 0===I&&ve(e),$?.(e))},De=e=>{void 0===M&&me(e),B?.(e)},ke=ge??pe,ye=null!==ge?be:fe,Oe=(l,n)=>w(l)?b(l,oe,G):e("span",{className:"text-mp-on-surface-variant",children:n??""}),Pe=n.useMemo(()=>g(Ne,1),[Ne]),ze=2===H,Me=m(oe,G),Ve=null!==ge?ie.end:null===pe?ie.start:null,Be={size:re,color:se,locale:oe,weekStartsOn:ce,selected:[pe,fe,ge],rangeStart:ke,rangeEnd:ye,onSelect:e=>{const l=S(e);if(null===ge)return je(l),we(l),void De({start:l,end:null});const[n,a]=j(l,ge)<0?[l,ge]:[ge,l];je(null),we(null),De({start:n,end:a}),T&&Ce(!1)},onPreviewChange:e=>{null!==ge&&we(e??ge)},minDate:F,maxDate:W,shouldDisableDate:_,showOutsideDays:!1,labels:ie};return e(u,{...ae,slug:"date-range-picker",size:re,color:se,name:X,locale:oe,readOnly:ee,disabled:le,triggerRef:te,startIcon:void 0===ne?e(t,{icon:s,size:v[re]}):ne,display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(pe,J)}),e(h,{samples:y(Me,J)})]}),e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center rtl:rotate-180",children:e(t,{icon:r,size:v[re]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(fe,K)}),e(h,{samples:y(Me,K)})]})]}),empty:null===pe&&null===fe,clearable:Q,onClear:()=>De(z),open:xe,onOpenChange:Ce,labels:ie,formValue:pe&&fe?`${D(pe)}/${D(fe)}`:"",hiddenValues:X?[{name:X,value:pe?D(pe):""},{name:X,value:fe?D(fe):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:"flex items-stretch gap-2",children:[L&&L.length>0?e("div",{className:"border-mp-outline-variant flex max-h-[calc(var(--_mp-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5",children:L.map((l,n)=>e(a,{variant:"text",size:i[re],color:se,className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;je(null),we(null),De(l),w(l.start)&&Se(C(l.start)),T&&Ce(!1)})(l),children:l.label},n))}):null,e(o,{...Be,month:Ne,onMonthChange:Se,showNextButton:!ze,autoFocus:!0}),ze?e(o,{...Be,month:Pe,onMonthChange:e=>Se(g(e,-1)),showPreviousButton:!1}):null]}),Q||null!==Ve?l(c,{children:[null!==Ve?e("span",{className:`text-mp-on-surface-variant me-auto ${x}`,children:Ve}):null,Q?e(a,{variant:"text",size:i[re],color:se,onClick:()=>{je(null),we(null),De(z),Ce(!1)},children:ie.clear}):null]}):null]})})});

package/dist/components/date-time-picker/MPDateTimePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as n}from"../icon/MPIcon.js";import{CalendarIcon as a}from"../../constants/icons.js";import{Calendar as s,MPTimeGrid as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerDivider as c,MPPickerFooter as m,MPPickerShell as d,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as p,useMPMessages as h}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{CONTROL_ICON as S}from"../../internal/scale.js";import{formatDate as g,isDayOutside as b,isHour12 as j,isValidDate as v,localeWeekStart as D,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as T}from"../../internal/date.js";import{useMPColor as M,useMPSize as P}from"../../internal/config.js";export const MPDateTimePicker=/*@__PURE__*/t.forwardRef(function({value:I,defaultValue:N,onValueChange:V,open:B,defaultOpen:R,onOpenChange:E,defaultMonth:F,minDate:q,maxDate:A,shouldDisableDate:G,shouldDisableTime:H,locale:J,weekStartsOn:K,format:L,hour12:Q,showSeconds:U=!1,hourStep:W=1,minuteStep:X=1,secondStep:Y=1,placeholder:Z,clearable:$=!1,showNowButton:_=!0,closeOnSelect:ee=!1,labels:oe,name:te,size:le,color:ne,readOnly:ae=!1,disabled:se=!1,startIcon:re,...ie},ce){const me=P(le),de=M(ne),ue=p(J),pe=h(f,ue,oe),he=K??D(ue),fe=Q??j(ue),[Se,ge]=t.useState(N??null),be=void 0!==I?I:Se,[je,ve]=t.useState(R??!1),De=B??je,[xe,Ce]=t.useState(()=>k(v(be)?be:F??O()));t.useEffect(()=>{De&&Ce(k(v(be)?be:F??O()))},[De]);const ke=e=>{e&&(ae||se)||(void 0===B&&ve(e),E?.(e))},we=e=>{void 0===I&&ge(e),V?.(e)},ze=t.useCallback((e,o)=>{const[t,l]=w(o,e),n=C(e).getTime();return!!(v(q)&&n+1e3*l<q.getTime())||(!!(v(A)&&n+1e3*t>A.getTime())||(H?.(e,o)??!1))},[q,A,H]),Oe=L??{dateStyle:"medium",timeStyle:"short",hour12:fe},ye=new Date,Te=T(ye,{seconds:U?ye.getSeconds():0}),Me=b(Te,q,A)||(G?.(Te)??!1)||ze(Te,"second"),Pe=y(u(ue,Oe),Z);return e(d,{...ie,slug:"date-time-picker",size:me,color:de,readOnly:ae,disabled:se,triggerRef:ce,startIcon:void 0===re?e(n,{icon:a,size:S[me]}):re,display:v(be)?g(be,ue,Oe):Z??"",samples:Pe,empty:!v(be),clearable:$,onClear:()=>we(null),open:De,onOpenChange:ke,labels:pe,hiddenValues:te?[{name:te,value:v(be)?z(be,U):""}]:void 0,children:o("div",{className:"flex flex-col gap-1.5",children:[o("div",{className:"flex items-stretch gap-2",children:[e(s,{size:me,color:de,locale:ue,weekStartsOn:he,month:xe,onMonthChange:Ce,selected:[be],onSelect:e=>{const o=v(be)?x(e,be):C(e);we(o),Ce(k(o)),ee&&ke(!1)},minDate:q,maxDate:A,shouldDisableDate:G,labels:pe,autoFocus:!0}),e(c,{}),e(r,{size:me,locale:ue,value:v(be)?be:null,referenceDate:v(be)?be:O(),onChange:we,hour12:fe,showSeconds:U,hourStep:W,minuteStep:X,secondStep:Y,shouldDisableTime:ze,labels:pe})]}),o(m,{children:[$?e(l,{variant:"text",size:i[me],color:de,onClick:()=>{we(null),ke(!1)},children:pe.clear}):null,_?e(l,{variant:"text",size:i[me],color:de,disabled:Me,onClick:()=>{we(Te),Ce(k(Te))},children:pe.now}):null,e(l,{variant:"filled",size:i[me],color:de,onClick:()=>ke(!1),children:pe.done})]})]})})});
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as a}from"../icon/MPIcon.js";import{CalendarIcon as n}from"../../constants/icons.js";import{Calendar as s,MPTimeGrid as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerDivider as c,MPPickerFooter as m,MPPickerShell as d,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as p,useMPMessages as h}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{CONTROL_ICON as S}from"../../internal/scale.js";import{formatDate as g,isDayOutside as b,isHour12 as j,isValidDate as v,localeWeekStart as D,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as T}from"../../internal/date.js";import{useMPColor as M,useMPSize as P}from"../../internal/config.js";export const MPDateTimePicker=/*@__PURE__*/t.forwardRef(function({value:V,defaultValue:I,onValueChange:N,open:B,defaultOpen:R,onOpenChange:E,defaultMonth:F,minDate:q,maxDate:A,shouldDisableDate:G,shouldDisableTime:H,locale:J,weekStartsOn:K,format:L,hour12:Q,showSeconds:U=!1,hourStep:W=1,minuteStep:X=1,secondStep:Y=1,placeholder:Z,clearable:$=!1,showNowButton:_=!0,closeOnSelect:ee=!1,labels:oe,name:te,size:le,color:ae,readOnly:ne=!1,disabled:se=!1,startIcon:re,...ie},ce){const me=P(le),de=M(ae),ue=p(J),pe=h(f,ue,oe),he=K??D(ue),fe=Q??j(ue),[Se,ge]=t.useState(I??null),be=void 0!==V?V:Se,[je,ve]=t.useState(R??!1),De=B??je,[xe,Ce]=t.useState(()=>k(v(be)?be:F??O()));t.useEffect(()=>{De&&Ce(k(v(be)?be:F??O()))},[De]);const ke=e=>{e&&(ne||se)||(void 0===B&&ve(e),E?.(e))},we=e=>{void 0===V&&ge(e),N?.(e)},ze=t.useCallback((e,o)=>{const[t,l]=w(o,e),a=C(e).getTime();return!!(v(q)&&a+1e3*l<q.getTime())||(!!(v(A)&&a+1e3*t>A.getTime())||(H?.(e,o)??!1))},[q,A,H]),Oe=L??{dateStyle:"medium",timeStyle:"short",hour12:fe},ye=new Date,Te=T(ye,{seconds:U?ye.getSeconds():0}),Me=b(Te,q,A)||(G?.(Te)??!1)||ze(Te,"second"),Pe=y(u(ue,Oe),Z),Ve=v(be)?z(be,U):"";return e(d,{...ie,slug:"date-time-picker",size:me,color:de,name:te,locale:ue,readOnly:ne,disabled:se,triggerRef:ce,startIcon:void 0===re?e(a,{icon:n,size:S[me]}):re,display:v(be)?g(be,ue,Oe):Z??"",samples:Pe,empty:!v(be),clearable:$,onClear:()=>we(null),open:De,onOpenChange:ke,labels:pe,formValue:Ve,hiddenValues:te?[{name:te,value:Ve}]:void 0,children:o("div",{className:"flex flex-col gap-1.5",children:[o("div",{className:"flex items-stretch gap-2",children:[e(s,{size:me,color:de,locale:ue,weekStartsOn:he,month:xe,onMonthChange:Ce,selected:[be],onSelect:e=>{const o=v(be)?x(e,be):C(e);we(o),Ce(k(o)),ee&&ke(!1)},minDate:q,maxDate:A,shouldDisableDate:G,labels:pe,autoFocus:!0}),e(c,{}),e(r,{size:me,locale:ue,value:v(be)?be:null,referenceDate:v(be)?be:O(),onChange:we,hour12:fe,showSeconds:U,hourStep:W,minuteStep:X,secondStep:Y,shouldDisableTime:ze,labels:pe})]}),o(m,{children:[$?e(l,{variant:"text",size:i[me],color:de,onClick:()=>{we(null),ke(!1)},children:pe.clear}):null,_?e(l,{variant:"text",size:i[me],color:de,disabled:Me,onClick:()=>{we(Te),Ce(k(Te))},children:pe.now}):null,e(l,{variant:"filled",size:i[me],color:de,onClick:()=>ke(!1),children:pe.done})]})]})})});

package/dist/components/dialog/MPDialog.d.ts

@@ -62,8 +62,9 @@ export interface MPDialogProps extends MPControlEventProps<HTMLElement> {
      *
      * Defaults to whatever `fullScreen` is, which is MD3's own split: a basic
      * dialog is answered by its actions and has no ×, while a full-screen dialog
-     * carries one at the start of its top bar because there is no scrim left to
-     * click. Set it explicitly to disagree with either.
+     * carries one because there is no scrim left to click. MD3 puts it at the start
+     * of a top bar; here it is at the end of the header, where a basic dialog's
+     * goes. Set it explicitly to disagree with either default.
      */
     showClose?: boolean;
     /**

package/dist/components/drawer/MPDrawer.d.ts

@@ -113,6 +113,18 @@ export interface MPDrawerProps {
      * @default true
      */
     dismissible?: boolean;
+    /**
+     * Keeps a closed `modal` drawer's contents in the document, hidden, instead
+     * of taking them out of it.
+     *
+     * For a drawer that is a site's navigation on a narrow screen: closed, its
+     * links are otherwise not on the page at all, which is the page a crawler
+     * renders at a phone's width. A modal drawer is drawn into a portal, which no
+     * server renders, so the links arrive with hydration either way — a server
+     * should still send them somewhere in the page itself.
+     * @default false
+     */
+    keepMounted?: boolean;
     /**
      * How far the panel reaches in by default, and the type scale inside it.
      * `md` is MD3's own 360dp navigation drawer.
@@ -190,4 +202,4 @@ export declare const MPDrawerClose: React.ForwardRefExoticComponent<Omit<import(
  * `SLIDE` gives a reader who asked for less motion the old behaviour exactly:
  * the fade, with nowhere to travel from.
  */
-export declare function MPDrawer({ side, mode, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, extent, rounded, dismissible, size: sizeProp, classNames, className, style, children }: MPDrawerProps): React.JSX.Element | null;
+export declare function MPDrawer({ side, mode, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, extent, rounded, dismissible, keepMounted, size: sizeProp, classNames, className, style, children }: MPDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/MPDrawer.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import*as a from"react";import{Dialog as o}from"@base-ui/react/dialog";import{MPIcon as n}from"../icon/MPIcon.js";import{CloseIcon as r}from"../../constants/icons.js";import{useMPLocale as i,useMPMessages as s}from"../../internal/locale.js";import{COMMON as d}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{cssLength as f}from"../../internal/length.js";import{hasContent as c,META_TEXT as p,PROSE_TEXT as u,SHEET_GAP as x,SHEET_PAD_X as h,SHEET_PAD_Y as g,SHEET_TITLE as b}from"../../internal/scale.js";import{FADE as y,PORTAL_LAYER as j,SCRIM as v,SHEET_MOTION as w}from"../../internal/surface.js";import{useMPSize as N}from"../../internal/config.js";const $={xs:"w-60",sm:"w-72",md:"w-90",lg:"w-104",xl:"w-120"},k={left:"rounded-r-mp-lg",right:"rounded-l-mp-lg",top:"rounded-b-mp-xl",bottom:"rounded-t-mp-xl"},C={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},z={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},P={left:"motion-safe:data-starting-style:-translate-x-full motion-safe:data-ending-style:-translate-x-full",right:"motion-safe:data-starting-style:translate-x-full motion-safe:data-ending-style:translate-x-full",top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},B=`transition-[opacity,translate] ${w}`,D="border-mp-outline-variant border-t";export const MPDrawerClose=o.Close;export function MPDrawer({side:w="left",mode:O="modal",open:M,defaultOpen:L,onOpenChange:S,trigger:T,title:F,description:I,actions:R,dividers:V=!1,showClose:q,closeLabel:A,locale:E,extent:G,rounded:H=!0,dismissible:J=!0,size:K,classNames:Q,className:U,style:W,children:X}){const Y=N(K),Z=i(E),_=s(d,Z),ee="modal"===O,te="left"===w||"right"===w,le=q??ee,ae=A??_.close,[oe,ne]=a.useState(L??!0),re=M??oe,ie=h[Y],se=g[Y],de=V?`${ie} ${se}`:ie,me=c(F)||c(I),fe=c(R),ce=void 0===G?null:{[te?"width":"height"]:f(G)},pe=["mp-drawer relative flex flex-col overflow-hidden box-border","border-mp-outline-variant outline-none",ee?"bg-mp-surface-container-low shadow-mp-1":"bg-mp-surface","text-mp-on-surface",u[Y],C[w],H?k[w]:"",ee?`${B} ${P[w]}`:"",te?`h-full max-w-full ${void 0===G?$[Y]:""}`:"w-full "+(void 0===G?"max-h-[85%]":""),V?"":`${se} ${x[Y]}`,U??""].filter(Boolean).join(" "),ue=ee?o.Title:"h2",xe=ee?o.Description:"p",he=/*@__PURE__*/["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),ge=t(l,{children:[me||le?t("div",{className:`flex shrink-0 items-start gap-3 ${de}`,children:[t("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(F)?e(ue,{className:`m-0 ${b[Y]}`,children:F}):null,c(I)?e(xe,{className:`text-mp-on-surface-variant m-0 ${p}`,children:I}):null]}),le?ee?t(o.Close,{"aria-label":ae,className:he,children:[e(m,{}),e(n,{icon:r,size:20})]}):t("button",{type:"button","aria-label":ae,className:he,onClick:()=>{void 0===M&&ne(!1),S?.(!1)},children:[e(m,{}),e(n,{icon:r,size:20})]}):null]}):null,c(X)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",de,V&&(me||le)?D:"",V?"":"-my-1 py-1"].filter(Boolean).join(" "),children:X}):null,fe?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",de,V?D:""].filter(Boolean).join(" "),children:R}):null]});return ee?t(o.Root,{open:M,defaultOpen:L,disablePointerDismissal:!J,onOpenChange:(e,t)=>{J||e||"escape-key"!==t.reason?S?.(e):t.cancel()},children:[T?e(o.Trigger,{render:T}):null,t(o.Portal,{children:[e(o.Backdrop,{className:[`${j} fixed inset-0`,y,v,Q?.backdrop??""].filter(Boolean).join(" ")}),e(o.Viewport,{className:`${j} fixed inset-0 flex ${z[w]}`,children:e(o.Popup,{"data-mp-size":Y,"data-mp-side":w,"data-mp-mode":O,className:pe,style:{...ce,...W},children:ge})})]})]}):re?e("div",{"data-mp-size":Y,"data-mp-side":w,"data-mp-mode":O,className:pe,style:{...ce,...W},children:ge}):null}
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import*as o from"react";import{Dialog as a}from"@base-ui/react/dialog";import{MPIcon as n}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{useMPLocale as r,useMPMessages as s}from"../../internal/locale.js";import{COMMON as d}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{cssLength as f}from"../../internal/length.js";import{hasContent as c,META_TEXT as p,PROSE_TEXT as u,SHEET_GAP as h,SHEET_PAD_X as x,SHEET_PAD_Y as g,SHEET_TITLE as b}from"../../internal/scale.js";import{FADE as y,PORTAL_LAYER as j,SCRIM as v,SHEET_MOTION as w}from"../../internal/surface.js";import{useMPSize as N}from"../../internal/config.js";const $={xs:"w-60",sm:"w-72",md:"w-90",lg:"w-104",xl:"w-120"},k={left:"rounded-r-mp-lg",right:"rounded-l-mp-lg",top:"rounded-b-mp-xl",bottom:"rounded-t-mp-xl"},C={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},z={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},P={left:"motion-safe:data-starting-style:-translate-x-full motion-safe:data-ending-style:-translate-x-full",right:"motion-safe:data-starting-style:translate-x-full motion-safe:data-ending-style:translate-x-full",top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},B=`transition-[opacity,translate] ${w}`,M="border-mp-outline-variant border-t";export const MPDrawerClose=a.Close;export function MPDrawer({side:w="left",mode:D="modal",open:O,defaultOpen:L,onOpenChange:S,trigger:T,title:F,description:I,actions:R,dividers:V=!1,showClose:q,closeLabel:A,locale:E,extent:G,rounded:H=!0,dismissible:J=!0,keepMounted:K=!1,size:Q,classNames:U,className:W,style:X,children:Y}){const Z=N(Q),_=r(E),ee=s(d,_),te="modal"===D,le="left"===w||"right"===w,oe=q??te,ae=A??ee.close,[ne,ie]=o.useState(L??!0),re=O??ne,se=x[Z],de=g[Z],me=V?`${se} ${de}`:se,fe=c(F)||c(I),ce=c(R),pe=void 0===G?null:{[le?"width":"height"]:f(G)},ue=["mp-drawer relative flex flex-col overflow-hidden box-border","[&[hidden]]:hidden","border-mp-outline-variant outline-none",te?"bg-mp-surface-container-low shadow-mp-1":"bg-mp-surface","text-mp-on-surface",u[Z],C[w],H?k[w]:"",te?`${B} ${P[w]}`:"",le?`h-full max-w-full ${void 0===G?$[Z]:""}`:"w-full "+(void 0===G?"max-h-[85%]":""),V?"":`${de} ${h[Z]}`,W??""].filter(Boolean).join(" "),he=te?a.Title:"h2",xe=te?a.Description:"p",ge=/*@__PURE__*/["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),be=t(l,{children:[fe||oe?t("div",{className:`flex shrink-0 items-start gap-3 ${me}`,children:[t("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(F)?e(he,{className:`m-0 ${b[Z]}`,children:F}):null,c(I)?e(xe,{className:`text-mp-on-surface-variant m-0 ${p}`,children:I}):null]}),oe?te?t(a.Close,{"aria-label":ae,className:ge,children:[e(m,{}),e(n,{icon:i,size:20})]}):t("button",{type:"button","aria-label":ae,className:ge,onClick:()=>{void 0===O&&ie(!1),S?.(!1)},children:[e(m,{}),e(n,{icon:i,size:20})]}):null]}):null,c(Y)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",me,V&&(fe||oe)?M:"",V?"":"-my-1 py-1"].filter(Boolean).join(" "),children:Y}):null,ce?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",me,V?M:""].filter(Boolean).join(" "),children:R}):null]});return te?t(a.Root,{open:O,defaultOpen:L,disablePointerDismissal:!J,onOpenChange:(e,t)=>{J||e||"escape-key"!==t.reason?S?.(e):t.cancel()},children:[T?e(a.Trigger,{render:T}):null,t(a.Portal,{keepMounted:K,children:[e(a.Backdrop,{className:[`${j} fixed inset-0`,y,v,U?.backdrop??""].filter(Boolean).join(" ")}),e(a.Viewport,{className:`${j} fixed inset-0 flex [&[hidden]]:hidden ${z[w]}`,children:e(a.Popup,{"data-mp-size":Z,"data-mp-side":w,"data-mp-mode":D,className:ue,style:{...pe,...X},children:be})})]})]}):re?e("div",{"data-mp-size":Z,"data-mp-side":w,"data-mp-mode":D,className:ue,style:{...pe,...X},children:be}):null}

package/dist/components/file-picker/MPFilePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FILE_PICKER as m}from"../../internal/messages/file-picker.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as d,PROSE_TEXT as f,STACK_GAP as h,hasContent as x}from"../../internal/scale.js";import{useMPSize as b}from"../../internal/config.js";const v={xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"};export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let n=e/1e3,t=0;for(;n>=1e3&&t<r.length-1;)n/=1e3,t+=1;return`${n<10?n.toFixed(1):Math.round(n)} ${r[t]}`}function g(e){return`${e.name}-${e.size}-${e.lastModified}`}const j=new Set;function y(e,r){const n=e.name.toLowerCase(),t=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?n.endsWith(e):e.endsWith("/*")?t.startsWith(e.slice(0,-1)):t===e)}export const MPFilePicker=/*@__PURE__*/n.forwardRef(function({accept:N,multiple:k=!1,maxSize:w,maxFiles:z,value:B,defaultValue:C,onFilesChange:I,onReject:S,label:$,description:D,errorMessage:F,title:L,hint:M,icon:T,showList:W=!0,removeLabel:_,locale:P,size:R,fullWidth:E=!0,required:O=!1,disabled:q=!1,readOnly:A=!1,name:V,id:G,className:H,style:Y},J){const K=b(R),Q=l(P),U=s(c,Q),X=s(m,Q),Z=n.useRef(null);n.useImperativeHandle(J,()=>Z.current,[]);const[ee,re]=n.useState(()=>[...C??[]]),ne=B?[...B]:ee,te=n.useRef(0),[ae,ie]=n.useState(!1),oe=x(F),le=q||A,se=n.useId(),ce=n.useId(),me=n.useCallback(e=>{B||re(e),I?.(e)},[I,B]),pe=n.useCallback(e=>{const r=[],n=[],t=k?z??Number.POSITIVE_INFINITY:1,a=k?ne.length:0;for(const i of e)N&&!y(i,N)?n.push({file:i,reason:"type"}):void 0!==w&&i.size>w?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[N,ne.length,z,w,k]),[ue,de]=n.useState(j),fe=n.useCallback(e=>{const{kept:r,rejections:n}=pe(e);n.length>0&&S?.(n),r.length>0&&(de(new Set(r.map(g))),me(k?[...ne,...r]:r))},[pe,me,ne,k,S]);return r("div",{className:["mp-file-picker flex-col align-top",h[K],E?"flex w-full":"inline-flex",H??""].filter(Boolean).join(" "),style:Y,"data-mp-size":K,"data-disabled":q||void 0,"data-invalid":oe||void 0,children:[x($)?r("span",{id:ce,className:[d,q?"text-mp-on-surface/38":oe?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[$,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"relative flex w-full flex-col",onDragEnter:e=>{le||(e.preventDefault(),te.current+=1,ie(!0))},onDragOver:e=>{le||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{le||(te.current=Math.max(0,te.current-1),0===te.current&&ie(!1))},onDrop:e=>{le||(e.preventDefault(),te.current=0,ie(!1),fe(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:G,disabled:q,"aria-describedby":x(D)||oe?se:void 0,"aria-invalid":oe||void 0,className:["mp-file-picker__zone group relative flex w-full flex-col items-center","justify-center gap-2 text-center","rounded-mp-md box-border border-2 border-dashed","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color,background-color] duration-(--mp-sys-motion-duration-short4)",v[K],f[K],q?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[A?"cursor-default":"cursor-pointer",oe?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",ae?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!le&&Z.current&&(Z.current.value="",Z.current.click())},children:[le?null:e(p,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===T?e(t,{icon:i,size:1.6*u[K],className:q?"":"text-mp-primary"}):x(T)?e("span",{className:q?"":"text-mp-primary",children:T}):null,e("span",{className:"font-medium",children:L??X.prompt}),x(M)?e("span",{className:[d,q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:M}):null]}),e("input",{ref:Z,type:"file",name:V,accept:N,multiple:k,required:O&&0===ne.length,disabled:le,tabIndex:-1,"aria-labelledby":x($)?ce:void 0,"aria-describedby":x(D)||oe?se:void 0,className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>fe(Array.from(e.target.files??[]))})]}),W&&ne.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",h[K]].join(" "),children:ne.map((n,i)=>r("li",{className:["rounded-mp-xs bg-mp-surface-container-low flex w-full items-center gap-3","px-3 py-2",f[K],q?"text-mp-on-surface/38":"text-mp-on-surface",ue.has(g(n))?"mp-row-arrive":""].filter(Boolean).join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:n.name}),e("span",{className:[d,"shrink-0 tabular-nums",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),le?null:r("button",{type:"button","aria-label":_?_(n.name):o(U.removeNamed,{label:n.name}),className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","cursor-pointer appearance-none items-center justify-center rounded-full","bg-transparent p-0 font-[inherit] outline-none"].join(" "),onClick:()=>me(ne.filter((e,r)=>r!==i)),children:[e(p,{}),e(t,{icon:a,size:18})]})]},`${g(n)}-${i}`))}):null,oe?e("span",{id:se,className:[d,"text-mp-error"].join(" "),children:F}):x(D)?e("span",{id:se,className:[d,q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FILE_PICKER as u}from"../../internal/messages/file-picker.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{CONTROL_ICON as p,META_TEXT as f,PROSE_TEXT as d,STACK_GAP as h,hasContent as x}from"../../internal/scale.js";import{useMPSize as b}from"../../internal/config.js";const v={xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"};export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let n=e/1e3,t=0;for(;n>=1e3&&t<r.length-1;)n/=1e3,t+=1;return`${n<10?n.toFixed(1):Math.round(n)} ${r[t]}`}function g(e){return`${e.name}-${e.size}-${e.lastModified}`}const j=new Set;function y(e,r){const n=e.name.toLowerCase(),t=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?n.endsWith(e):e.endsWith("/*")?t.startsWith(e.slice(0,-1)):t===e)}export const MPFilePicker=/*@__PURE__*/n.forwardRef(function({accept:N,multiple:k=!1,maxSize:w,maxFiles:z,value:C,defaultValue:B,onFilesChange:I,onReject:S,label:D,description:L,errorMessage:$,title:E,hint:F,icon:M,showList:T=!0,removeLabel:R,locale:W,size:_,fullWidth:P=!0,required:O=!1,disabled:q=!1,readOnly:A=!1,name:V,id:G,className:H,style:Y},J){const K=b(_),Q=l(W),U=s(c,Q),X=s(u,Q),Z=n.useRef(null);n.useImperativeHandle(J,()=>Z.current,[]);const[ee,re]=n.useState(()=>[...B??[]]),ne=C?[...C]:ee,te=n.useRef(0),[ae,ie]=n.useState(!1),oe=x($),le=q||A,se=n.useId(),ce=n.useId(),ue=n.useRef([]),me=n.useCallback(e=>{const r=Z.current;if(!r||"undefined"==typeof DataTransfer)return;const n=new DataTransfer;for(const r of e)n.items.add(r);r.files=n.files,ue.current=e},[]);n.useEffect(()=>{ue.current.length===ne.length&&ue.current.every((e,r)=>e===ne[r])||me(ne)}),n.useEffect(()=>{const e=Z.current;if(!e)return;const r=()=>me(ue.current);return e.addEventListener("cancel",r),()=>e.removeEventListener("cancel",r)},[me]);const pe=n.useCallback(e=>{C||re(e),I?.(e)},[I,C]),fe=n.useCallback(e=>{const r=[],n=[],t=k?z??Number.POSITIVE_INFINITY:1,a=k?ne.length:0;for(const i of e)N&&!y(i,N)?n.push({file:i,reason:"type"}):void 0!==w&&i.size>w?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[N,ne.length,z,w,k]),[de,he]=n.useState(j),xe=n.useCallback(e=>{const{kept:r,rejections:n}=fe(e);n.length>0&&S?.(n),r.length>0&&(he(new Set(r.map(g))),pe(k?[...ne,...r]:r))},[fe,pe,ne,k,S]);return r("div",{className:["mp-file-picker flex-col align-top",h[K],P?"flex w-full":"inline-flex",H??""].filter(Boolean).join(" "),style:Y,"data-mp-size":K,"data-disabled":q||void 0,"data-invalid":oe||void 0,children:[x(D)?r("span",{id:ce,className:[f,q?"text-mp-on-surface/38":oe?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[D,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"relative flex w-full flex-col",onDragEnter:e=>{le||(e.preventDefault(),te.current+=1,ie(!0))},onDragOver:e=>{le||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{le||(te.current=Math.max(0,te.current-1),0===te.current&&ie(!1))},onDrop:e=>{le||(e.preventDefault(),te.current=0,ie(!1),xe(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:G,disabled:q,"aria-describedby":x(L)||oe?se:void 0,"aria-invalid":oe||void 0,className:["mp-file-picker__zone group relative flex w-full flex-col items-center","justify-center gap-2 text-center","rounded-mp-md box-border border-2 border-dashed","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color,background-color] duration-(--mp-sys-motion-duration-short4)",v[K],d[K],q?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[A?"cursor-default":"cursor-pointer",oe?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",ae?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!le&&Z.current&&(Z.current.value="",Z.current.click())},children:[le?null:e(m,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===M?e(t,{icon:i,size:1.6*p[K],className:q?"":"text-mp-primary"}):x(M)?e("span",{className:q?"":"text-mp-primary",children:M}):null,e("span",{className:"font-medium",children:E??X.prompt}),x(F)?e("span",{className:[f,q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:F}):null]}),e("input",{ref:Z,type:"file",name:V,accept:N,multiple:k,required:O&&0===ne.length,disabled:le,tabIndex:-1,"aria-labelledby":x(D)?ce:void 0,"aria-describedby":x(L)||oe?se:void 0,className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>xe(Array.from(e.target.files??[]))})]}),T&&ne.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",h[K]].join(" "),children:ne.map((n,i)=>r("li",{className:["rounded-mp-xs bg-mp-surface-container-low flex w-full items-center gap-3","px-3 py-2",d[K],q?"text-mp-on-surface/38":"text-mp-on-surface",de.has(g(n))?"mp-row-arrive":""].filter(Boolean).join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:n.name}),e("span",{className:[f,"shrink-0 tabular-nums",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),le?null:r("button",{type:"button","aria-label":R?R(n.name):o(U.removeNamed,{label:n.name}),className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","cursor-pointer appearance-none items-center justify-center rounded-full","bg-transparent p-0 font-[inherit] outline-none"].join(" "),onClick:()=>pe(ne.filter((e,r)=>r!==i)),children:[e(m,{}),e(t,{icon:a,size:18})]})]},`${g(n)}-${i}`))}):null,oe?e("span",{id:se,className:[f,"text-mp-error"].join(" "),children:$}):x(L)?e("span",{id:se,className:[f,q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:L}):null]})});

package/dist/components/floating-action-button/MPFloatingActionButton.d.ts

@@ -104,7 +104,9 @@ export interface MPFloatingActionButtonProps extends Omit<React.ComponentPropsWi
  * ## Why there is no speed dial
  *
  * A floating button that fans out into three or four smaller ones is a Material
- * **2** pattern, and MD3 dropped it. It was never good: the actions are
+ * **2** pattern, and MD3 dropped it. M3 Expressive brought back a FAB menu in
+ * 2025, but that is a column of two to six labelled actions rather than a fan
+ * of discs, and this library does not draw one either. The fan was never good: the actions are
  * unlabelled discs in the corner of the screen, they cover the content the
  * reader was looking at, and a fan of buttons that claims `role="menu"` without
  * the keyboard contract of one is worse for a keyboard reader than something

package/dist/components/floating-bottom-navigation/MPFloatingBottomNavigation.d.ts

@@ -42,6 +42,11 @@ export interface MPFloatingBottomNavigationProps extends Omit<React.ComponentPro
      *
      * A container's ladder, so the sheet is never dyed — what carries the accent
      * is the one destination that is current.
+     *
+     * Naming one draws that surface as any container draws it, flat unless it is
+     * `elevated`. Leaving it unset is what gives the bar its default `elevation`
+     * of 3, and setting `elevation` as well takes the tone from the level, as it
+     * does everywhere else.
      * @default 'filled'
      */
     variant?: MPVariant;
@@ -52,7 +57,11 @@ export interface MPFloatingBottomNavigationProps extends Omit<React.ComponentPro
      * bar is *defined* by not being part of the page: a lozenge lying flat over
      * the content it is floating above reads as a mistake rather than as a
      * decision.
-     * @default 3
+     *
+     * The default applies only while `variant` is unset. A level brings its own
+     * tone, so a default level would leave a chosen `variant` with nothing to
+     * paint.
+     * @default 3, unless `variant` is set
      */
     elevation?: MPElevation;
     /**

package/dist/components/floating-bottom-navigation/MPFloatingBottomNavigation.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{MPBottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{containerSurface as i}from"../../internal/elevation.js";import{cssLength as l}from"../../internal/length.js";import{useMPSize as s}from"../../internal/config.js";const n={xs:"h-12",sm:"h-14",md:"h-16",lg:"h-18",xl:"h-20"},r={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},m={xs:"gap-0.5",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},f={static:"mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--_mp-nav-offset) z-40 mx-auto w-fit"};export const MPFloatingBottomNavigation=/*@__PURE__*/t.forwardRef(function({value:p,defaultValue:d=null,onValueChange:x,position:u="fixed",offset:c=16,labels:b="selected",variant:g="filled",elevation:v=3,size:h,safeArea:j=!0,disabled:w=!1,label:z,render:y,className:_,style:k,children:N,...B},C){const M=s(h),[P,V]=t.useState(d),A=void 0!==p,F=A?p:P,R=t.useCallback(e=>{A||V(e),x?.(e)},[A,x]),S=t.useMemo(()=>({value:F??null,change:R,size:M,labels:b,disabled:w,floating:!0}),[F,R,M,b,w]),$=l(c);return a({render:y??e("nav",{}),ref:C,props:{"aria-label":z,"data-mp-size":M,"data-mp-variant":g,className:["mp-floating-bottom-navigation rounded-mp-full box-border flex max-w-full min-w-0","items-stretch",n[M],r[M],m[M],i(g,v),"text-mp-on-surface",f[u],_??""].filter(Boolean).join(" "),style:{"--_mp-nav-offset":j?`calc(${$} + env(safe-area-inset-bottom))`:$,...k},children:e(o.Provider,{value:S,children:N}),...B}})});
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{MPBottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{containerSurface as i}from"../../internal/elevation.js";import{cssLength as l}from"../../internal/length.js";import{useMPSize as s}from"../../internal/config.js";const n={xs:"h-12",sm:"h-14",md:"h-16",lg:"h-18",xl:"h-20"},r={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},m={xs:"gap-0.5",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},f={static:"mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--_mp-nav-offset) z-40 mx-auto w-fit"};export const MPFloatingBottomNavigation=/*@__PURE__*/t.forwardRef(function({value:p,defaultValue:d=null,onValueChange:x,position:u="fixed",offset:c=16,labels:v="selected",variant:b,elevation:g,size:h,safeArea:j=!0,disabled:w=!1,label:z,render:y,className:_,style:k,children:N,...B},C){const M=s(h),P=b??"filled",V=g??(void 0===b?3:void 0),[A,F]=t.useState(d),R=void 0!==p,S=R?p:A,$=t.useCallback(e=>{R||F(e),x?.(e)},[R,x]),q=t.useMemo(()=>({value:S??null,change:$,size:M,labels:v,disabled:w,floating:!0}),[S,$,M,v,w]),D=l(c);return a({render:y??e("nav",{}),ref:C,props:{"aria-label":z,"data-mp-size":M,"data-mp-variant":P,className:["mp-floating-bottom-navigation rounded-mp-full box-border flex max-w-full min-w-0","items-stretch",n[M],r[M],m[M],i(P,V),"text-mp-on-surface",f[u],_??""].filter(Boolean).join(" "),style:{"--_mp-nav-offset":j?`calc(${D} + env(safe-area-inset-bottom))`:D,...k},children:e(o.Provider,{value:q,children:N}),...B}})});

package/dist/components/form/MPForm.d.ts

@@ -33,6 +33,9 @@ export interface MPFormProps extends Omit<React.ComponentPropsWithoutRef<'form'>
     /**
      * Called on a valid submit, with the form's values. The native submit event is
      * prevented, so nothing navigates.
+     *
+     * Leave it out and give the form an `action` — a URL, or a React server
+     * action — and a valid submit goes to the action instead.
      */
     onSubmit?: (values: Record<string, unknown>) => void;
     /**

package/dist/components/form/MPForm.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{useMPSize as i}from"../../internal/config.js";import{SHEET_GAP as t}from"../../internal/scale.js";export const MPForm=/*@__PURE__*/o.forwardRef(function({validationMode:o="onSubmit",errors:m,onSubmit:a,size:n,className:s,children:f,...l},c){const d=i(n);return r(e,{ref:c,validationMode:o,errors:m,onFormSubmit:r=>a?.(r),"data-mp-size":d,className:["mp-form flex flex-col",t[d],s??""].filter(Boolean).join(" "),...l,children:f})});
+import{jsx as o}from"react/jsx-runtime";import*as r from"react";import{Form as i}from"@base-ui/react/form";import{useMPSize as e}from"../../internal/config.js";import{SHEET_GAP as t}from"../../internal/scale.js";export const MPForm=/*@__PURE__*/r.forwardRef(function({validationMode:r="onSubmit",errors:a,onSubmit:m,size:n,className:s,children:f,...c},l){const d=e(n);return o(i,{ref:l,validationMode:r,errors:a,onFormSubmit:m||void 0===c.action?o=>m?.(o):void 0,"data-mp-size":d,className:["mp-form flex flex-col",t[d],s??""].filter(Boolean).join(" "),...c,children:f})});

package/dist/components/gauge-chart/MPGaugeChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Meter as l}from"@base-ui/react/meter";import{useMPElementSize as r}from"../../hooks/useMPElementSize.js";import{useMPColor as o,useMPSize as m}from"../../internal/config.js";import{useMPLocale as i}from"../../internal/locale.js";import{accentSlots as s}from"../../internal/accent.js";import{thresholdColor as n}from"../../internal/threshold.js";import{progressFraction as c}from"../../internal/progress.js";import{CHART_FONT_SIZE as h,PLOT_HEIGHT as p,arcPath as f,formatStatistic as u}from"../../internal/chart.js";import{cssLength as d}from"../../internal/length.js";import{META_TEXT as x}from"../../internal/scale.js";const g={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-display-small"};export function MPGaugeChart({value:v,min:j=0,max:M=100,sweep:_=240,label:b,thresholds:y,bands:w=!1,color:N,format:P,locale:$,height:z,size:I,className:k,style:B,...R}){const C=m(I),E=o(N),G=i($),L=a.useRef(null),S=r(L),V=c(v,j,M)??0,W=n(v,E,y),q=h[C],A=S.width,D="number"==typeof z?z:void 0===z?p[C]:S.height,F=Math.min(300,Math.max(30,_))*Math.PI/180,H=F/2,J=H>Math.PI/2?Math.cos(Math.PI-H):0,K=Math.min(A/2,D/(1+J)),O=Math.max(0,K-2),Q=.78*O,T=A/2,U=O+2,X=-H,Y=H,Z=X+V*F,ee=a.useMemo(()=>{if(!w||!y||0===y.length)return[{from:0,to:1,color:E}];const e=[...y.map(e=>({at:c(e.from,j,M)??0,color:e.color})).filter(e=>e.at>0&&e.at<1).sort((e,t)=>e.at-t.at)],t=[];let a=0,l=E;for(const r of e)t.push({from:a,to:r.at,color:l}),a=r.at,l=r.color;return t.push({from:a,to:1,color:l}),t},[w,y,E,j,M]),te=u(v,G,P,!1);return t(l.Root,{value:v,min:j,max:M,format:P,"data-mp-size":C,className:["mp-gauge-chart flex min-w-0 flex-col items-center",k??""].filter(Boolean).join(" "),style:{...s(W),...B},...R,children:[t("div",{ref:L,className:"mp-gauge-chart__dial relative w-full",style:{height:d(z)??p[C]},children:[A>0&&O>0?t("svg",{width:A,height:D,viewBox:`0 0 ${A} ${D}`,"aria-hidden":"true",className:"block overflow-visible",children:[ee.map((t,a)=>e("path",{d:f(T,U,O,Q,X+t.from*F,X+t.to*F),fill:w?`var(--_mp-color-${t.color})`:"var(--_mp-color-on-surface)",opacity:w?.22:.12},a)),e("path",{d:f(T,U,O,Q,X,Z),fill:"var(--_mp-accent)"}),e("path",{d:f(T,U,O,Q,X,X+.004*F),fill:"var(--_mp-color-outline)"}),e("path",{d:f(T,U,O,Q,Y-.004*F,Y),fill:"var(--_mp-color-outline)"})]}):null,t("div",{className:"pointer-events-none absolute inset-x-0 flex flex-col items-center",style:{top:U-.45*Q},children:[e(l.Value,{className:`mp-gauge-chart__value text-mp-on-surface font-medium tabular-nums ${g[C]}`,children:e=>P?e:te}),b?e(l.Label,{className:`mp-gauge-chart__label text-mp-on-surface-variant ${x}`,style:{maxWidth:1.8*Q},children:b}):null]})]}),J>0?e("span",{"aria-hidden":"true",style:{height:q/2}}):null]})}
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Meter as l}from"@base-ui/react/meter";import{useBoxSize as r}from"../../internal/box-size.js";import{useMPColor as o,useMPSize as i}from"../../internal/config.js";import{useMPLocale as m}from"../../internal/locale.js";import{intlLocale as s}from"../../internal/intl.js";import{accentSlots as n}from"../../internal/accent.js";import{thresholdColor as c}from"../../internal/threshold.js";import{progressFraction as h}from"../../internal/progress.js";import{CHART_FONT_SIZE as p,PLOT_HEIGHT as f,arcPath as u,formatStatistic as d}from"../../internal/chart.js";import{cssLength as x}from"../../internal/length.js";import{META_TEXT as g}from"../../internal/scale.js";const v={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-display-small"};export function MPGaugeChart({value:j,min:b=0,max:_=100,sweep:M=240,label:y,thresholds:w,bands:N=!1,color:$,format:P,locale:z,height:I,size:B,className:R,style:k,...C}){const G=i(B),L=o($),V=m(z),W=a.useRef(null),q=r(W),A=h(j,b,_)??0,D=c(j,L,w),E=p[G],F=q.width,H="number"==typeof I?I:void 0===I?f[G]:q.height,J=Math.min(300,Math.max(30,M))*Math.PI/180,K=J/2,O=K>Math.PI/2?Math.cos(Math.PI-K):0,Q=F>0?Math.min(F/2,H/(1+O)):H/(1+O),S=Math.max(0,Q-2),T=.78*S,U=F/2,X=S+2,Y=-K,Z=K,tt=Y+A*J,et=a.useMemo(()=>{if(!N||!w||0===w.length)return[{from:0,to:1,color:L}];const t=[...w.map(t=>({at:h(t.from,b,_)??0,color:t.color})).filter(t=>t.at>0&&t.at<1).sort((t,e)=>t.at-e.at)],e=[];let a=0,l=L;for(const r of t)e.push({from:a,to:r.at,color:l}),a=r.at,l=r.color;return e.push({from:a,to:1,color:l}),e},[N,w,L,b,_]),at=d(j,V,P,!1);return e(l.Root,{value:j,min:b,max:_,format:P,locale:s(V),"data-mp-size":G,className:["mp-gauge-chart flex min-w-0 flex-col items-center",R??""].filter(Boolean).join(" "),style:{...n(D),...k},...C,children:[e("div",{ref:W,className:"mp-gauge-chart__dial relative w-full",style:{height:x(I)??f[G]},children:[F>0&&S>0?e("svg",{width:F,height:H,viewBox:`0 0 ${F} ${H}`,"aria-hidden":"true",className:"block overflow-visible",children:[et.map((e,a)=>t("path",{d:u(U,X,S,T,Y+e.from*J,Y+e.to*J),fill:N?`var(--_mp-color-${e.color})`:"var(--_mp-color-on-surface)",opacity:N?.22:.12},a)),t("path",{d:u(U,X,S,T,Y,tt),fill:"var(--_mp-accent)"}),t("path",{d:u(U,X,S,T,Y,Y+.004*J),fill:"var(--_mp-color-outline)"}),t("path",{d:u(U,X,S,T,Z-.004*J,Z),fill:"var(--_mp-color-outline)"})]}):null,e("div",{className:"pointer-events-none absolute inset-x-0 flex flex-col items-center",style:{top:X-.45*T},children:[t(l.Value,{className:`mp-gauge-chart__value text-mp-on-surface font-medium tabular-nums ${v[G]}`,children:t=>P?t:at}),y?t(l.Label,{className:`mp-gauge-chart__label text-mp-on-surface-variant ${g}`,style:{maxWidth:1.8*T},children:y}):null]})]}),O>0?t("span",{"aria-hidden":"true",style:{height:E/2}}):null]})}

package/dist/components/header/MPHeader.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{useRender as n}from"@base-ui/react/use-render";import{barSurface as r,MPPageLayoutContext as a}from"../../internal/page-layout.js";import{hasContent as s}from"../../internal/scale.js";import{sheetPadX as l}from"../../internal/density.js";import{measureValue as m}from"../../internal/measure.js";import{useWindowMins as o}from"../../internal/window-class.js";import{responsiveSlots as d,withBaseline as c}from"../../internal/responsive.js";import{useMPDensity as p,useMPSize as f}from"../../internal/config.js";const x={xs:"min-h-12",sm:"min-h-14",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},u={xs:"text-mp-title-small",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},h={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},g={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},j={static:"",absolute:"absolute inset-x-0 top-0 z-30",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},b={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},v={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const MPHeader=/*@__PURE__*/i.forwardRef(function({brand:y,actions:w,align:N="start",position:k="sticky",variant:_="tonal",elevation:z,size:B,density:C,maxWidth:$="none",padded:H=!0,label:M,render:P,className:R,children:W,...q},A){const D=f(B),E=p(C),F=o(),{register:G}=i.useContext(a),I=i.useCallback(e=>{G("header",e),"function"==typeof A?A(e):A&&(A.current=e)},[G,A]);return n({render:P??e("header",{}),ref:I,props:{"aria-label":M,"data-mp-size":D,"data-mp-variant":_,className:["mp-header text-mp-on-surface box-border w-full min-w-0",r(_,z),"outlined"===_?"border-mp-outline-variant border-b":"",j[k],R??""].filter(Boolean).join(" "),children:t("div",{className:["flex w-full items-center",x[D],g[D],H?l(D,E):"","none"===$?"":"mp-measure mx-auto"].filter(Boolean).join(" "),style:"none"===$?void 0:d("measure",c($,"none"),e=>m(e,F)),children:[s(y)?e("div",{className:["mp-header__brand flex min-w-0 items-center",b[N],h[D],u[D]].join(" "),children:y}):"center"===N?e("div",{"aria-hidden":"true",className:b[N]}):null,s(W)?e("div",{className:`mp-header__middle ${v[N]} ${h[D]}`,children:W}):null,s(w)?e("div",{className:["mp-header__actions flex min-w-0 items-center justify-end",b[N],h[D]].join(" "),children:w}):"center"===N?e("div",{"aria-hidden":"true",className:b[N]}):null]}),...q}})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{useRender as n}from"@base-ui/react/use-render";import{barSurface as a,MPPageLayoutContext as r}from"../../internal/page-layout.js";import{hasContent as s}from"../../internal/scale.js";import{sheetPadX as m}from"../../internal/density.js";import{measureValue as l}from"../../internal/measure.js";import{useWindowMins as o}from"../../internal/window-class.js";import{responsiveSlots as d,withBaseline as p}from"../../internal/responsive.js";import{useMPDensity as c,useMPSize as f}from"../../internal/config.js";const x={xs:"min-h-12",sm:"min-h-14",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},u={xs:"text-mp-title-small",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},h={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},g={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},j={static:"",absolute:"absolute inset-x-0 top-0 z-30",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},b={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},v={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const MPHeader=/*@__PURE__*/i.forwardRef(function({brand:y,actions:w,align:N="start",position:k="sticky",variant:_="tonal",elevation:z,size:B,density:C,maxWidth:$="none",padded:H=!0,label:M,render:P,className:R,children:W,...q},A){const D=f(B),E=c(C),F=o(),{register:G}=i.useContext(r),I=i.useCallback(e=>{G("header",e),"function"==typeof A?A(e):A&&(A.current=e)},[G,A]);return n({render:P??e("header",{}),ref:I,props:{"aria-label":M,"data-mp-size":D,"data-mp-variant":_,"data-mp-position":k,className:["mp-header text-mp-on-surface box-border w-full min-w-0",a(_,z),"outlined"===_?"border-mp-outline-variant border-b":"",j[k],R??""].filter(Boolean).join(" "),children:t("div",{className:["flex w-full items-center",x[D],g[D],H?m(D,E):"","none"===$?"":"mp-measure mx-auto"].filter(Boolean).join(" "),style:"none"===$?void 0:d("measure",p($,"none"),e=>l(e,F)),children:[s(y)?e("div",{className:["mp-header__brand flex min-w-0 items-center",b[N],h[D],u[D]].join(" "),children:y}):"center"===N?e("div",{"aria-hidden":"true",className:b[N]}):null,s(W)?e("div",{className:`mp-header__middle ${v[N]} ${h[D]}`,children:W}):null,s(w)?e("div",{className:["mp-header__actions flex min-w-0 items-center justify-end",b[N],h[D]].join(" "),children:w}):"center"===N?e("div",{"aria-hidden":"true",className:b[N]}):null]}),...q}})});

package/dist/components/heatmap-chart/MPHeatmapChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useMPElementSize as a}from"../../hooks/useMPElementSize.js";import{useMPLocale as n,useMPMessages as r}from"../../internal/locale.js";import{useMPSize as o}from"../../internal/config.js";import{CHART as i}from"../../internal/messages/chart.js";import{TABLE as m}from"../../internal/messages/table.js";import{ChartShell as s,ChartTable as c,ChartTooltipPanel as h}from"../../internal/ChartChrome.js";import{CHART_FONT_SIZE as u,MARK_GAP as d,PLOT_HEIGHT as f,RAMP_STEPS as p,formatCategory as x,formatStatistic as g,rampFill as v,rampInk as y,rampStep as w,textWidth as M,tickTurn as b,toValues as k,truncate as j,turnedBand as A,turnedRoom as $}from"../../internal/chart.js";export function MPHeatmapChart({series:N,categories:B,xAxis:S,yAxis:_,min:z,max:P,valueLabels:C=!1,height:D,format:L,locale:R,label:I,legend:E,tooltip:F,empty:W,size:H,className:K,style:U,...X}){const Y=o(H),q=n(R),G=r(i,q),J=r(m,q),O=l.useRef(null),Q=a(O),T=l.useId(),[V,Z]=l.useState(null),ee=l.useMemo(()=>k(N),[N]),te=ee.reduce((e,t)=>Math.max(e,t.length),0),le=l.useCallback(e=>g(e,q,L,!0),[L,q]),ae=N.map((e,t)=>e.name??String(t+1)),ne=Array.from({length:te},(e,t)=>S?.tickFormat?String(S.tickFormat(B?.[t]??t,t)):x(B?.[t]??t,q)),re=ee.flat().filter(e=>null!==e.value),oe=z??(re.length>0?Math.min(...re.map(e=>e.value)):0),ie=P??(re.length>0?Math.max(...re.map(e=>e.value)):0),me=ie-oe||1,se=u[Y],ce=Q.width,he="number"==typeof D?D:void 0===D?f[Y]:Q.height,ue=ae.reduce((e,t)=>Math.max(e,M(t,se)),0),de=_?.hidden?0:_?.thickness??Math.min(140,ue+10),fe=Math.max(0,ce-de),pe=te>0?fe/te:0,xe=S?.hidden?0:b(S?.tickLabels??"auto",ne,se,pe),ge=Math.min(120,.5*he),ve=ne.map((e,t)=>j(e,xe>0?Math.min($(xe,ge,se),xe>=90?1/0:(de+pe*(t+.5))/Math.cos(xe*Math.PI/180)):pe-2,se)),ye=ve.reduce((e,t)=>Math.max(e,M(t,se)),0),we=S?.hidden?0:S?.thickness??(xe>0?8+A(xe,ye,se)+4:se+12),Me=de,be=0,ke=Math.max(0,he-we),je=ee.length>0?ke/ee.length:0,Ae=(e,t)=>{Z(l=>{const a=l??{row:0,column:0};return{row:Math.min(ee.length-1,Math.max(0,a.row+(l?e:0))),column:Math.min(te-1,Math.max(0,a.column+(l?t:0)))}})},$e=V?ee[V.row]?.[V.column]??null:null,Ne=V&&$e&&null!==$e.value?[{seriesIndex:V.row,name:ae[V.row],color:v(w(($e.value-oe)/me)),value:$e.value,formatted:le($e.value),label:$e.label}]:[],Be=!1===F?{mode:"none"}:!0===F||void 0===F?{}:F,Se=!1!==E&&re.length>0,_e=0===te||0===ee.length||0===re.length,ze=Array.from({length:te},(e,t)=>ee.map(e=>e[t]??{value:null}));return e(s,{...X,size:Y,className:["mp-heatmap-chart",K??""].filter(Boolean).join(" "),style:U,plotRef:O,name:I??G.label,describedBy:_e?void 0:T,interactive:!_e,height:D,legendSide:"bottom",plotProps:{onPointerMove:_e||"none"===Be.mode?void 0:e=>Z(((e,t)=>{const l=O.current;if(!l||pe<=0||je<=0)return null;const a=l.getBoundingClientRect(),n=Math.floor((e-a.left-Me)/pe),r=Math.floor((t-a.top-be)/je);return n<0||n>=te||r<0||r>=ee.length?null:{row:r,column:n}})(e.clientX,e.clientY)),onPointerLeave:()=>Z(null),onKeyDown:_e||"none"===Be.mode?void 0:e=>{if("ArrowRight"===e.key)Ae(0,1);else if("ArrowLeft"===e.key)Ae(0,-1);else if("ArrowDown"===e.key)Ae(1,0);else if("ArrowUp"===e.key)Ae(-1,0);else{if("Escape"!==e.key)return;Z(null)}e.preventDefault()},onBlur:()=>Z(null)},tooltip:V&&Ne.length>0&&"none"!==Be.mode?e(h,{heading:`${ae[V.row]} · ${ne[V.column]}`,items:Ne,x:Me+(V.column+.5)*pe,y:be+(V.row+.5)*je,flip:V.column>te/2,size:Y}):null,legend:Se?t("div",{className:"mp-chart__legend flex items-center justify-center gap-2",children:[e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:le(oe)}),e("span",{className:"flex","aria-hidden":"true",children:Array.from({length:p},(t,l)=>e("span",{className:"block h-3 w-6 first:rounded-s-mp-xs last:rounded-e-mp-xs",style:{background:v(l)}},l))}),e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:le(ie)})]}):null,status:{heading:V?`${ae[V.row]} · ${ne[V.column]}`:void 0,items:Ne},table:_e?null:e(c,{id:T,caption:I??G.table,corner:_?.label??G.category,categories:ae,names:ne,values:ze,format:le,locale:q,empty:J.empty}),children:_e?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:W??J.empty}):ce>0&&he>0?t("svg",{width:ce,height:he,viewBox:`0 0 ${ce} ${he}`,"aria-hidden":"true",className:"block overflow-visible",children:[e("g",{className:"mp-heatmap-chart__cells",children:ee.map((l,a)=>Array.from({length:te},(n,r)=>{const o=l[r],i=V?.row===a&&V?.column===r,m=Me+r*pe,s=be+a*je,c=Math.max(0,pe-d),h=Math.max(0,je-d);if(!o||null===o.value)return e("rect",{x:m+d/2,y:s+d/2,width:c,height:h,fill:"none",stroke:"var(--_mp-color-outline-variant)",strokeWidth:1,strokeDasharray:"2 2",rx:2},r);const u=w((o.value-oe)/me);return t("g",{children:[e("rect",{x:m+d/2,y:s+d/2,width:c,height:h,fill:o.color??v(u),rx:2,stroke:i?"var(--_mp-color-on-surface)":"none",strokeWidth:i?2:0}),C&&c>M(le(o.value),se)+8&&h>se+4?e("text",{x:m+pe/2,y:s+je/2,textAnchor:"middle",dominantBaseline:"central",fill:y(u),fontSize:se,children:le(o.value)}):null]},r)}))}),_?.hidden?null:ae.map((t,l)=>e("text",{x:Me-8,y:be+(l+.5)*je,textAnchor:"end",dominantBaseline:"central",fill:"var(--_mp-color-on-surface-variant)",fontSize:se,children:j(t,de-10,se)},`r${l}`)),S?.hidden?null:ve.map((t,l)=>{const a=Me+(l+.5)*pe,n=be+ke;return e("text",{x:a,y:xe>0?n+8:n+se+4,textAnchor:xe>0?"end":"middle",dominantBaseline:xe>0?"central":void 0,transform:xe>0?`rotate(${-xe} ${a} ${n+8})`:void 0,fill:"var(--_mp-color-on-surface-variant)",fontSize:se,children:t},`c${l}`)})]}):null})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useBoxSize as n}from"../../internal/box-size.js";import{useMPLocale as a,useMPMessages as r}from"../../internal/locale.js";import{useMPSize as o}from"../../internal/config.js";import{CHART as i}from"../../internal/messages/chart.js";import{TABLE as m}from"../../internal/messages/table.js";import{ChartShell as s,ChartTable as c,ChartTooltipPanel as u}from"../../internal/ChartChrome.js";import{CHART_FONT_SIZE as h,MARK_GAP as d,PLOT_HEIGHT as f,RAMP_STEPS as p,bounds as x,formatCategory as v,formatStatistic as g,rampFill as y,rampInk as w,rampStep as b,textWidth as M,tickTurn as k,toValues as j,truncate as A,turnedBand as $,turnedRoom as N}from"../../internal/chart.js";export function MPHeatmapChart({series:B,categories:_,xAxis:z,yAxis:S,min:C,max:P,valueLabels:D=!1,height:L,format:R,locale:I,label:F,legend:W,tooltip:E,empty:H,size:K,className:U,style:X,...Y}){const q=o(K),G=a(I),J=r(i,G),O=r(m,G),Q=l.useRef(null),T=n(Q),V=l.useId(),[Z,ee]=l.useState(null),te=l.useMemo(()=>j(B),[B]),le=te.reduce((e,t)=>Math.max(e,t.length),0),ne=l.useCallback(e=>g(e,G,R,!0),[R,G]),ae=B.map((e,t)=>e.name??String(t+1)),re=Array.from({length:le},(e,t)=>z?.tickFormat?String(z.tickFormat(_?.[t]??t,t)):v(_?.[t]??t,G)),oe=te.flat().filter(e=>null!==e.value),ie=x(oe.map(e=>e.value)),me=C??ie?.min??0,se=P??ie?.max??0,ce=se-me||1,ue=h[q],he=T.width,de="number"==typeof L?L:void 0===L?f[q]:T.height,fe=ae.reduce((e,t)=>Math.max(e,M(t,ue)),0),pe=S?.hidden?0:S?.thickness??Math.min(140,fe+10),xe=Math.max(0,he-pe),ve=le>0?xe/le:0,ge=z?.hidden?0:k(z?.tickLabels??"auto",re,ue,ve),ye=Math.min(120,.5*de),we=re.map((e,t)=>A(e,ge>0?Math.min(N(ge,ye,ue),ge>=90?1/0:(pe+ve*(t+.5))/Math.cos(ge*Math.PI/180)):ve-2,ue)),be=we.reduce((e,t)=>Math.max(e,M(t,ue)),0),Me=z?.hidden?0:z?.thickness??(ge>0?8+$(ge,be,ue)+4:ue+12),ke=pe,je=0,Ae=Math.max(0,de-Me),$e=te.length>0?Ae/te.length:0,Ne=(e,t)=>{ee(l=>{const n=l??{row:0,column:0};return{row:Math.min(te.length-1,Math.max(0,n.row+(l?e:0))),column:Math.min(le-1,Math.max(0,n.column+(l?t:0)))}})},Be=Z?te[Z.row]?.[Z.column]??null:null,_e=Z&&Be&&null!==Be.value?[{seriesIndex:Z.row,name:ae[Z.row],color:y(b((Be.value-me)/ce)),value:Be.value,formatted:ne(Be.value),label:Be.label}]:[],ze=!1===E?{mode:"none"}:!0===E||void 0===E?{}:E,Se=!1!==W&&oe.length>0,Ce=0===le||0===te.length||0===oe.length,Pe=Array.from({length:le},(e,t)=>te.map(e=>e[t]??{value:null}));return e(s,{...Y,size:q,className:["mp-heatmap-chart",U??""].filter(Boolean).join(" "),style:X,plotRef:Q,name:F??J.label,describedBy:Ce?void 0:V,interactive:!Ce,height:L,legendSide:"bottom",plotProps:{onPointerMove:Ce||"none"===ze.mode?void 0:e=>{const t=((e,t)=>{const l=Q.current;if(!l||ve<=0||$e<=0)return null;const n=l.getBoundingClientRect(),a=Math.floor((e-n.left-ke)/ve),r=Math.floor((t-n.top-je)/$e);return a<0||a>=le||r<0||r>=te.length?null:{row:r,column:a}})(e.clientX,e.clientY);ee(e=>e&&t&&e.row===t.row&&e.column===t.column?e:t)},onPointerLeave:()=>ee(null),onKeyDown:Ce||"none"===ze.mode?void 0:e=>{if("ArrowRight"===e.key)Ne(0,1);else if("ArrowLeft"===e.key)Ne(0,-1);else if("ArrowDown"===e.key)Ne(1,0);else if("ArrowUp"===e.key)Ne(-1,0);else{if("Escape"!==e.key)return;ee(null)}e.preventDefault()},onBlur:()=>ee(null)},tooltip:Z&&_e.length>0&&"none"!==ze.mode?e(u,{heading:`${ae[Z.row]} · ${re[Z.column]}`,items:_e,x:ke+(Z.column+.5)*ve,y:je+(Z.row+.5)*$e,flip:Z.column>le/2,size:q}):null,legend:Se?t("div",{className:"mp-chart__legend flex items-center justify-center gap-2",children:[e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:ne(me)}),e("span",{className:"flex","aria-hidden":"true",children:Array.from({length:p},(t,l)=>e("span",{className:"block h-3 w-6 first:rounded-s-mp-xs last:rounded-e-mp-xs",style:{background:y(l)}},l))}),e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:ne(se)})]}):null,status:{heading:Z?`${ae[Z.row]} · ${re[Z.column]}`:void 0,items:_e},table:Ce?null:e(c,{id:V,caption:F??J.table,corner:S?.label??J.category,categories:ae,names:re,values:Pe,format:ne,locale:G,empty:O.empty}),children:Ce?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:H??O.empty}):he>0&&de>0?t("svg",{width:he,height:de,viewBox:`0 0 ${he} ${de}`,"aria-hidden":"true",className:"block overflow-visible",children:[e("g",{className:"mp-heatmap-chart__cells",children:te.map((l,n)=>Array.from({length:le},(a,r)=>{const o=l[r],i=Z?.row===n&&Z?.column===r,m=ke+r*ve,s=je+n*$e,c=Math.max(0,ve-d),u=Math.max(0,$e-d);if(!o||null===o.value)return e("rect",{x:m+d/2,y:s+d/2,width:c,height:u,fill:"none",stroke:"var(--_mp-color-outline-variant)",strokeWidth:1,strokeDasharray:"2 2",rx:2},r);const h=b((o.value-me)/ce);return t("g",{children:[e("rect",{x:m+d/2,y:s+d/2,width:c,height:u,fill:o.color??y(h),rx:2,stroke:i?"var(--_mp-color-on-surface)":"none",strokeWidth:i?2:0}),D&&c>M(ne(o.value),ue)+8&&u>ue+4?e("text",{x:m+ve/2,y:s+$e/2,textAnchor:"middle",dominantBaseline:"central",fill:w(h),fontSize:ue,children:ne(o.value)}):null]},r)}))}),S?.hidden?null:ae.map((t,l)=>e("text",{x:ke-8,y:je+(l+.5)*$e,textAnchor:"end",dominantBaseline:"central",fill:"var(--_mp-color-on-surface-variant)",fontSize:ue,children:A(t,pe-10,ue)},`r${l}`)),z?.hidden?null:we.map((t,l)=>{const n=ke+(l+.5)*ve,a=je+Ae;return e("text",{x:n,y:ge>0?a+8:a+ue+4,textAnchor:ge>0?"end":"middle",dominantBaseline:ge>0?"central":void 0,transform:ge>0?`rotate(${-ge} ${n} ${a+8})`:void 0,fill:"var(--_mp-color-on-surface-variant)",fontSize:ue,children:t},`c${l}`)})]}):null})}

package/dist/components/hover-card/MPHoverCard.d.ts

@@ -89,13 +89,14 @@ export interface MPHoverCardProps extends Omit<React.ComponentPropsWithoutRef<'d
  *
  * ## Because it is uninvited, it is never the only way to anything
  *
- * A keyboard with no hover, a touchscreen with no pointer, and a screen reader
- * all arrive by the trigger's own route instead. So whatever is in here has to
- * exist on the page the trigger leads to as well. Treat it as a shortcut for
- * the reader who has a pointer, never as the place a fact lives.
+ * A touchscreen with no pointer arrives by the trigger's own route instead, and
+ * a screen reader is not taken into the card when it opens. So whatever is in
+ * here has to exist on the page the trigger leads to as well. Treat it as a
+ * shortcut, never as the place a fact lives.
  *
- * That is also why there is no keyboard equivalent bolted on. A card that
- * opened on focus would interrupt every keyboard reader tabbing through a
- * paragraph of links, which is a worse answer than not opening at all.
+ * It does open on keyboard focus, after the same `delay` a pointer waits, which
+ * is Base UI's behaviour. That delay is also why tabbing through a paragraph of
+ * links does not open a card for each of them: only the link that focus rests
+ * on shows one.
  */
 export declare function MPHoverCard({ trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, delay, closeDelay, width, size: sizeProp, density: densityProp, className, style, ...props }: MPHoverCardProps): React.JSX.Element;

package/dist/components/icon-button/MPIconButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{MPButton as o}from"../button/MPButton.js";export const MPIconButton=/*@__PURE__*/r.forwardRef(function({icon:r,label:a,variant:n="text",...e},i){return t(o,{ref:i,"aria-label":a,variant:n,startIcon:r,...e})});
+import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{MPButton as o}from"../button/MPButton.js";import{MPButtonGroupContext as n}from"../../internal/button-group.js";export const MPIconButton=/*@__PURE__*/r.forwardRef(function({icon:a,label:e,variant:i,...s},m){const u=r.useContext(n);return t(o,{ref:m,"aria-label":e,variant:i??u?.variant??"text",startIcon:a,...s})});

package/dist/components/image/MPImage.d.ts

@@ -180,6 +180,11 @@ export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
      * Sets `loading="eager"` and a high fetch priority. A `loading` or
      * `fetchPriority` of your own still wins. Give it to one picture per page: a
      * high priority on every picture raises none of them above the others.
+     *
+     * The picture is also drawn as soon as it arrives rather than faded in once
+     * the page's JavaScript has heard it load, with the placeholder under it
+     * instead of over it — on a server-rendered page, a faded picture cannot
+     * appear before hydration.
      * @default false
      */
     priority?: boolean;

package/dist/components/image/MPImage.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import*as o from"react";import{Dialog as n}from"@base-ui/react/dialog";import{MPIcon as r}from"../icon/MPIcon.js";import{BrokenImageIcon as a}from"../../constants/icons.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as d,PORTAL_LAYER as u,SCRIM as h}from"../../internal/surface.js";import{useMPSize as m}from"../../internal/config.js";const f={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},p={position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"},g=Number.parseInt(o.version,10),b=!Number.isFinite(g)||0===g||g>=19?"fetchPriority":"fetchpriority",v={loading:"eager",[b]:"high"};function y(e,t){const i=2*e+"px";return t?{...p,width:`calc(100cqh + ${i})`,height:`calc(100cqw + ${i})`}:{position:"absolute",top:-e,left:-e,width:`calc(100% + ${i})`,height:`calc(100% + ${i})`,maxWidth:"none"}}const w=new Map([["left",[0,0]],["right",[0,1]],["top",[1,0]],["bottom",[1,1]]]);function j(e,t,i){const o=e.trim().split(/\s+/),n=[.5,.5],r=[!1,!1];if(o.length>2)return e;for(const[t,i]of o.entries()){if("center"===i)continue;const o=w.get(i),a=/^(-?\d*\.?\d+)%$/.exec(i),l=o?o[0]:t,s=o?o[1]:a?Number(a[1])/100:void 0;if(void 0===s||r[l])return e;n[l]=s,r[l]=!0}let[a,l]=n;"horizontal"!==i&&"both"!==i||(a=1-a),"vertical"!==i&&"both"!==i||(l=1-l);for(let e=0;e<t/90;e++)[a,l]=[l,1-a];const s=e=>Math.round(1e4*e)/100+"%";return`${s(a)} ${s(l)}`}function $(e){return"number"==typeof e?Number.isFinite(e)?e:void 0:void 0!==e&&/^\d+$/.test(e.trim())?Number(e):void 0}function x(e){const t=$(e);return void 0===t?String(e):`${t}px`}function N(e,t,i){const o=e??t,n=e??(i?t:void 0);if(!o)return{aspectRatio:"1",width:"min(100%, 100cqh)",containerType:"size"};const r=o.height,a=o.width;return{aspectRatio:`${r} / ${a}`,width:`min(100%, ${n?`${n.height}px, `:""}calc(100cqh * ${r} / ${a}))`,containerType:"size"}}function z(e){return e.naturalWidth>0&&e.naturalHeight>0?{width:e.naturalWidth,height:e.naturalHeight}:void 0}export const MPImage=/*@__PURE__*/o.forwardRef(function({src:g,alt:w,ratio:R,fit:k="cover",placeholder:L,fallback:P,preview:S=!1,previewSrc:T,previewLabel:W,onStateChange:q,rotate:M,flip:F="none",position:B="center",letterbox:E="none",priority:O=!1,size:U,className:I,style:C,width:H,height:V,onLoad:A,...D},G){const J=m(U),K=l(),Q=s(c,K),X="object"==typeof(Y=L)&&null!==Y&&!o.isValidElement(Y)&&"src"in Y?L:void 0;var Y;const Z=function(e){const[t,i]=o.useState();return o.useEffect(()=>{if(void 0===e||"string"==typeof e)return;const t=URL.createObjectURL(e);return i({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),void 0===e||"string"==typeof e?e:t?.blob===e?t.url:void 0}(X?.src),[_,ee]=o.useState({state:g?"loading":"error"}),[te,ie]=o.useState(),oe=o.useRef(null),{state:ne,natural:re}=_,ae=o.useCallback((e,t)=>{const i="loaded"===e&&t?z(t):void 0;ee(t=>t.state===e&&t.natural?.width===i?.width&&t.natural?.height===i?.height?t:(t.state!==e&&q?.(e),{state:e,natural:i}))},[q]),[le,se]=o.useState(g);g!==le&&(se(g),ee({state:g?"loading":"error"})),o.useEffect(()=>{const e=oe.current;e&&g&&e.complete&&ae(e.naturalWidth>0?"loaded":"error",e)},[g,ae]);const ce=function(e){return void 0!==e&&Number.isFinite(e)?(Math.round(e/90)%4+4)%4*90:0}(M),de=90===ce||270===ce,ue=function(e,t){const i="horizontal"===t||"both"===t,o="vertical"===t||"both"===t,[n,r]=90===e||270===e?[o,i]:[i,o];return{...e?{rotate:`${e}deg`}:null,...n||r?{scale:`${n?-1:1} ${r?-1:1}`}:null}}(ce,F),he="center"===B?{}:{objectPosition:j(B,ce,F)},me=void 0!==H&&void 0!==V,fe=void 0===H||me?void 0:x(H),pe=void 0===V||me?void 0:x(V),ge=me?$(H):void 0,be=me?$(V):void 0,ve=(ge&&be?{width:ge,height:be}:void 0)??re,ye=de&&void 0===R&&ve&&void 0===pe?`${ve.height} / ${ve.width}`:R,we="loaded"===ne,je=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(r,{icon:a,size:24})}),$e=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),xe=/*@__PURE__*/[we?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),Ne=D.loading??(O?"eager":void 0),ze=D.fetchPriority??(O?"high":void 0),Re="blur"===E&&("contain"===k||"none"===k||"scale-down"===k),ke="none"!==E&&"blur"!==E?E:void 0,Le=Boolean(Z)&&"error"!==ne,Pe=!0===X?.blur?20:"number"==typeof X?.blur&&Number.isFinite(X.blur)?Math.max(0,X.blur):0,Se=i(t,{children:[Re?e("img",{...ze?{[b]:ze}:null,src:g,srcSet:D.srcSet,sizes:D.sizes,loading:Ne,decoding:D.decoding,crossOrigin:D.crossOrigin,referrerPolicy:D.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none object-cover ${xe}`,style:{...ue,...he,filter:"blur(24px)",...y(48,de)}}):null,Le?e("img",{src:Z,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none ${f[k]}`,style:{...ue,...he,...Pe?{filter:`blur(${Pe}px)`}:null,...y(2*Pe,de),...we?{opacity:0,transition:"opacity 0ms linear var(--mp-sys-motion-duration-short4)"}:null}}):null,e("img",{...O?v:null,...D,ref:e=>{oe.current=e,"function"==typeof G?G(e):G&&(G.current=e)},src:g,alt:w,width:me?H:void 0,height:me?V:void 0,className:`block size-full ${f[k]} ${xe}`,style:{...ue,...he,...Re||Le?{position:"relative"}:null,...de?p:null},onLoad:e=>{ae("loaded",e.currentTarget),A?.(e)},onError:()=>ae("error")}),"loading"!==ne||!1===L||X?null:e("span",{"aria-hidden":"true",className:"absolute inset-0",children:L??$e}),"error"===ne?e("span",{className:"absolute inset-0",children:P??je}):null]}),Te=["mp-image relative block overflow-hidden",I??""].filter(Boolean).join(" "),We={aspectRatio:ye,...void 0!==fe?{width:fe,maxWidth:"100%"}:null,...void 0!==pe?{height:pe}:null,...void 0!==pe&&void 0!==R?{width:"auto",maxWidth:"100%"}:null,...de?{containerType:"size"}:null,...void 0!==ke?{background:ke}:null,...C},qe=T??g,Me=te?.src===qe?te:void 0,Fe=e=>{const t=z(e.currentTarget);!t||t.width===Me?.width&&t.height===Me?.height||ie({...t,src:qe})};return S?i(n.Root,{children:[e(n.Trigger,{"data-mp-size":J,"data-mp-state":ne,disabled:"error"===ne,"aria-label":(W??w)||Q.open,className:[Te,"w-full","outline-mp-secondary cursor-zoom-in appearance-none border-0 bg-transparent p-0","focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default","outline-none"].filter(Boolean).join(" "),style:We,children:Se}),i(n.Portal,{children:[e(n.Backdrop,{className:`${h} ${d} fixed inset-0 z-40`}),e(n.Popup,{className:[u,d,"fixed inset-0 flex items-center justify-center p-6"].join(" "),style:de?{containerType:"size"}:void 0,children:de?e("span",{className:"relative block shrink-0",style:N(Me,ve,void 0===T),children:e("img",{src:qe,alt:w,className:"object-contain",style:{...ue,...p},onLoad:Fe})}):e("img",{src:qe,alt:w,className:"max-h-full max-w-full object-contain",style:ue,onLoad:Fe})})]})]}):e("span",{"data-mp-size":J,"data-mp-state":ne,className:Te,style:We,children:Se})});
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import*as o from"react";import{Dialog as n}from"@base-ui/react/dialog";import{MPIcon as r}from"../icon/MPIcon.js";import{BrokenImageIcon as a}from"../../constants/icons.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as d,PORTAL_LAYER as u,SCRIM as h}from"../../internal/surface.js";import{useMPSize as m}from"../../internal/config.js";const f={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},p={position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"},g=Number.parseInt(o.version,10),b=!Number.isFinite(g)||0===g||g>=19?"fetchPriority":"fetchpriority",v={loading:"eager",[b]:"high"};function y(e,t){const i=2*e+"px";return t?{...p,width:`calc(100cqh + ${i})`,height:`calc(100cqw + ${i})`}:{position:"absolute",top:-e,left:-e,width:`calc(100% + ${i})`,height:`calc(100% + ${i})`,maxWidth:"none"}}const w=new Map([["left",[0,0]],["right",[0,1]],["top",[1,0]],["bottom",[1,1]]]);function j(e,t,i){const o=e.trim().split(/\s+/),n=[.5,.5],r=[!1,!1];if(o.length>2)return e;for(const[t,i]of o.entries()){if("center"===i)continue;const o=w.get(i),a=/^(-?\d*\.?\d+)%$/.exec(i),l=o?o[0]:t,s=o?o[1]:a?Number(a[1])/100:void 0;if(void 0===s||r[l])return e;n[l]=s,r[l]=!0}let[a,l]=n;"horizontal"!==i&&"both"!==i||(a=1-a),"vertical"!==i&&"both"!==i||(l=1-l);for(let e=0;e<t/90;e++)[a,l]=[l,1-a];const s=e=>Math.round(1e4*e)/100+"%";return`${s(a)} ${s(l)}`}function $(e){return"number"==typeof e?Number.isFinite(e)?e:void 0:void 0!==e&&/^\d+$/.test(e.trim())?Number(e):void 0}function x(e){const t=$(e);return void 0===t?String(e):`${t}px`}function N(e,t,i){const o=e??t,n=e??(i?t:void 0);if(!o)return{aspectRatio:"1",width:"min(100%, 100cqh)",containerType:"size"};const r=o.height,a=o.width;return{aspectRatio:`${r} / ${a}`,width:`min(100%, ${n?`${n.height}px, `:""}calc(100cqh * ${r} / ${a}))`,containerType:"size"}}function z(e){return e.naturalWidth>0&&e.naturalHeight>0?{width:e.naturalWidth,height:e.naturalHeight}:void 0}export const MPImage=/*@__PURE__*/o.forwardRef(function({src:g,alt:w,ratio:R,fit:k="cover",placeholder:L,fallback:P,preview:S=!1,previewSrc:T,previewLabel:W,onStateChange:q,rotate:M,flip:F="none",position:B="center",letterbox:E="none",priority:O=!1,size:U,className:I,style:C,width:H,height:V,onLoad:A,...D},G){const J=m(U),K=l(),Q=s(c,K),X="object"==typeof(Y=L)&&null!==Y&&!o.isValidElement(Y)&&"src"in Y?L:void 0;var Y;const Z=function(e){const[t,i]=o.useState();return o.useEffect(()=>{if(void 0===e||"string"==typeof e)return;const t=URL.createObjectURL(e);return i({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),void 0===e||"string"==typeof e?e:t?.blob===e?t.url:void 0}(X?.src),[_,ee]=o.useState({state:g?"loading":"error"}),[te,ie]=o.useState(),oe=o.useRef(null),{state:ne,natural:re}=_,ae=o.useCallback((e,t)=>{const i="loaded"===e&&t?z(t):void 0;ee(t=>t.state===e&&t.natural?.width===i?.width&&t.natural?.height===i?.height?t:(t.state!==e&&q?.(e),{state:e,natural:i}))},[q]),[le,se]=o.useState(g);g!==le&&(se(g),ee({state:g?"loading":"error"})),o.useEffect(()=>{const e=oe.current;e&&g&&e.complete&&ae(e.naturalWidth>0?"loaded":"error",e)},[g,ae]);const ce=function(e){return void 0!==e&&Number.isFinite(e)?(Math.round(e/90)%4+4)%4*90:0}(M),de=90===ce||270===ce,ue=function(e,t){const i="horizontal"===t||"both"===t,o="vertical"===t||"both"===t,[n,r]=90===e||270===e?[o,i]:[i,o];return{...e?{rotate:`${e}deg`}:null,...n||r?{scale:`${n?-1:1} ${r?-1:1}`}:null}}(ce,F),he="center"===B?{}:{objectPosition:j(B,ce,F)},me=void 0!==H&&void 0!==V,fe=void 0===H||me?void 0:x(H),pe=void 0===V||me?void 0:x(V),ge=me?$(H):void 0,be=me?$(V):void 0,ve=(ge&&be?{width:ge,height:be}:void 0)??re,ye=de&&void 0===R&&ve&&void 0===pe?`${ve.height} / ${ve.width}`:R,we="loaded"===ne,je=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(r,{icon:a,size:24})}),$e=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),xe=O?"":[we?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),Ne=D.loading??(O?"eager":void 0),ze=D.fetchPriority??(O?"high":void 0),Re="blur"===E&&("contain"===k||"none"===k||"scale-down"===k),ke="none"!==E&&"blur"!==E?E:void 0,Le=Boolean(Z)&&"error"!==ne,Pe=!0===X?.blur?20:"number"==typeof X?.blur&&Number.isFinite(X.blur)?Math.max(0,X.blur):0,Se="loading"!==ne||!1===L||X?null:e("span",{"aria-hidden":"true",className:"absolute inset-0",children:L??$e}),Te=i(t,{children:[O?Se:null,Re?e("img",{...ze?{[b]:ze}:null,src:g,srcSet:D.srcSet,sizes:D.sizes,loading:Ne,decoding:D.decoding,crossOrigin:D.crossOrigin,referrerPolicy:D.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none object-cover ${xe}`,style:{...ue,...he,filter:"blur(24px)",...y(48,de)}}):null,Le?e("img",{src:Z,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none ${f[k]}`,style:{...ue,...he,...Pe?{filter:`blur(${Pe}px)`}:null,...y(2*Pe,de),...we?{opacity:0,transition:"opacity 0ms linear var(--mp-sys-motion-duration-short4)"}:null}}):null,e("img",{...O?v:null,...D,ref:e=>{oe.current=e,"function"==typeof G?G(e):G&&(G.current=e)},src:g,alt:w,width:me?H:void 0,height:me?V:void 0,className:`block size-full ${f[k]} ${xe}`,style:{...ue,...he,...Re||Le||O?{position:"relative"}:null,...de?p:null},onLoad:e=>{ae("loaded",e.currentTarget),A?.(e)},onError:()=>ae("error")}),O?null:Se,"error"===ne?e("span",{className:"absolute inset-0",children:P??je}):null]}),We=["mp-image relative block overflow-hidden",I??""].filter(Boolean).join(" "),qe={aspectRatio:ye,...void 0!==fe?{width:fe,maxWidth:"100%"}:null,...void 0!==pe?{height:pe}:null,...void 0!==pe&&void 0!==R?{width:"auto",maxWidth:"100%"}:null,...de?{containerType:"size"}:null,...void 0!==ke?{background:ke}:null,...C},Me=T??g,Fe=te?.src===Me?te:void 0,Be=e=>{const t=z(e.currentTarget);!t||t.width===Fe?.width&&t.height===Fe?.height||ie({...t,src:Me})};return S?i(n.Root,{children:[e(n.Trigger,{"data-mp-size":J,"data-mp-state":ne,disabled:"error"===ne,"aria-label":(W??w)||Q.open,className:[We,"w-full","outline-mp-secondary cursor-zoom-in appearance-none border-0 bg-transparent p-0","focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default","outline-none"].filter(Boolean).join(" "),style:qe,children:Te}),i(n.Portal,{children:[e(n.Backdrop,{className:`${h} ${d} fixed inset-0 z-40`}),e(n.Popup,{className:[u,d,"fixed inset-0 flex items-center justify-center p-6"].join(" "),style:de?{containerType:"size"}:void 0,children:de?e("span",{className:"relative block shrink-0",style:N(Fe,ve,void 0===T),children:e("img",{src:Me,alt:w,className:"object-contain",style:{...ue,...p},onLoad:Be})}):e("img",{src:Me,alt:w,className:"max-h-full max-w-full object-contain",style:ue,onLoad:Be})})]})]}):e("span",{"data-mp-size":J,"data-mp-state":ne,className:We,style:qe,children:Te})});

package/dist/components/line-chart/MPLineChart.js

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

package/dist/components/list/MPList.d.ts

@@ -25,8 +25,9 @@ export interface MPListProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
      */
     size?: MPSize;
     /**
-     * Which accent family a selected or hovered row reads. The sheet itself stays
-     * neutral whatever this is.
+     * Which accent family a selected row reads. The sheet stays neutral whatever
+     * this is, and so does the hover: the state layer is the row's own ink, as it
+     * is everywhere in the library.
      * @default 'primary'
      */
     color?: MPColor;

package/dist/components/locale/MPLocaleProvider.d.ts

@@ -19,38 +19,23 @@ export interface MPLocaleProviderProps {
      * over it does.
      */
     locale?: string;
+    /**
+     * The tag dates and numbers are written in on the server, and while the page
+     * hydrates, when `locale` is left `undefined`. Once the page has hydrated, the
+     * reader's own default takes over.
+     *
+     * For a server-rendered page that wants to follow the reader's browser but
+     * cannot tell their language on the server. Without it the server writes in
+     * its own machine's locale, the browser's first render writes in the reader's,
+     * and React discards the server's markup over the difference. With it the two
+     * agree, and the formatted values are rewritten once after hydration instead.
+     *
+     * Ignored when `locale` is set, which already agrees on both sides.
+     */
+    serverLocale?: string;
     children?: React.ReactNode;
 }
-/**
- * The language the components speak, set once for everything under it.
- *
- * Wrap the application. Every component in this library that writes a word or
- * formats a date takes a `locale` prop of its own, and this is where that prop
- * gets its default — so a form of four pickers is one decision rather than four.
- *
- * ```tsx
- * <MPLocaleProvider locale="ko">
- *   <App />
- * </MPLocaleProvider>
- * ```
- *
- * ## Why it is not a whole theme object
- *
- * Everything else a provider might carry here is already a CSS custom property:
- * the colour roles, the type scale, the corners, the motion durations. Those
- * reach a component through the cascade, which means a section of a page can
- * differ from the rest of it without a second provider and without a re-render.
- * A locale cannot travel that way — it decides which *string* is rendered, not
- * how one is painted — so it is the one thing left that needs context, and this
- * provider carries that and nothing else.
- *
- * ## Nesting
- *
- * Providers nest, and the nearest one wins. A page in Korean with one section
- * showing a Japanese listing's dates is two providers, and the inner one does
- * not have to restate anything: there is only the one value.
- */
-export declare function MPLocaleProvider({ locale, children }: MPLocaleProviderProps): React.JSX.Element;
+export declare function MPLocaleProvider({ locale, serverLocale, children }: MPLocaleProviderProps): React.JSX.Element;
 /**
  * The locale in force at this point in the tree.
  *

package/dist/components/locale/MPLocaleProvider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import{MPLocaleContext as e,useMPLocale as o}from"../../internal/locale.js";export function MPLocaleProvider({locale:o,children:i}){return r(e.Provider,{value:o,children:i})}export{o as useMPLocale};
+import{jsx as r}from"react/jsx-runtime";import*as e from"react";import{MPLocaleContext as o,useMPLocale as t}from"../../internal/locale.js";const c=()=>()=>{},n=()=>{};export function MPLocaleProvider({locale:t,serverLocale:a,children:l}){const i=e.useSyncExternalStore(c,n,()=>a);return r(o.Provider,{value:t??i,children:l})}export{t as useMPLocale};

package/dist/components/menu/MPMenu.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Menu } from '@base-ui/react/menu';
 import type { MPAlign, MPColor, MPSide, MPSize } from '../../types.js';
 /**
  * A menu takes `size` and `color` and stops there.
@@ -95,6 +96,13 @@ export interface MPMenuItemProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Renders the row as a real `<a>`. A menu of links has to be links. */
     href?: string;
+    /**
+     * Renders the row'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?: Menu.LinkItem.Props['render'];
     /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
     target?: string;
     /**
@@ -190,7 +198,7 @@ export type MPMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
  * cannot be copied, and tells a screen reader the wrong thing about every one of
  * them.
  */
-export declare function MPMenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
+export declare function MPMenuItem({ onClick, href, render, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the column a `startIcon` would. */
 export declare function MPMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */