material-plus-ui 1.13.0 → 1.14.0

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 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})]})]})})});
+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,useMPWeekStart as V}from"../../internal/config.js";export const MPDateTimePicker=/*@__PURE__*/t.forwardRef(function({value:I,defaultValue:N,onValueChange:B,open:R,defaultOpen:E,onOpenChange:F,defaultMonth:q,minDate:A,maxDate:G,shouldDisableDate:H,shouldDisableTime:J,locale:K,weekStartsOn:L,format:Q,hour12:U,showSeconds:W=!1,hourStep:X=1,minuteStep:Y=1,secondStep:Z=1,placeholder:$,clearable:_=!1,showNowButton:ee=!0,closeOnSelect:oe=!1,labels:te,name:le,size:ae,color:ne,readOnly:se=!1,disabled:re=!1,startIcon:ie,...ce},me){const de=P(ae),ue=M(ne),pe=p(K),he=h(f,pe,te),fe=V(L)??D(pe),Se=U??j(pe),[ge,be]=t.useState(N??null),je=void 0!==I?I:ge,[ve,De]=t.useState(E??!1),xe=R??ve,[Ce,ke]=t.useState(()=>k(v(je)?je:q??O()));t.useEffect(()=>{xe&&ke(k(v(je)?je:q??O()))},[xe]);const we=e=>{e&&(se||re)||(void 0===R&&De(e),F?.(e))},ze=e=>{void 0===I&&be(e),B?.(e)},Oe=t.useCallback((e,o)=>{const[t,l]=w(o,e),a=C(e).getTime();return!!(v(A)&&a+1e3*l<A.getTime())||(!!(v(G)&&a+1e3*t>G.getTime())||(J?.(e,o)??!1))},[A,G,J]),ye=Q??{dateStyle:"medium",timeStyle:"short",hour12:Se},Te=new Date,Me=T(Te,{seconds:W?Te.getSeconds():0}),Pe=b(Me,A,G)||(H?.(Me)??!1)||Oe(Me,"second"),Ve=y(u(pe,ye),$),Ie=v(je)?z(je,W):"";return e(d,{...ce,slug:"date-time-picker",size:de,color:ue,name:le,locale:pe,readOnly:se,disabled:re,triggerRef:me,startIcon:void 0===ie?e(a,{icon:n,size:S[de]}):ie,display:v(je)?g(je,pe,ye):$??"",samples:Ve,empty:!v(je),clearable:_,onClear:()=>ze(null),open:xe,onOpenChange:we,labels:he,formValue:Ie,hiddenValues:le?[{name:le,value:Ie}]: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:de,color:ue,locale:pe,weekStartsOn:fe,month:Ce,onMonthChange:ke,selected:[je],onSelect:e=>{const o=v(je)?x(e,je):C(e);ze(o),ke(k(o)),oe&&we(!1)},minDate:A,maxDate:G,shouldDisableDate:H,labels:he,autoFocus:!0}),e(c,{}),e(r,{size:de,locale:pe,value:v(je)?je:null,referenceDate:v(je)?je:O(),onChange:ze,hour12:Se,showSeconds:W,hourStep:X,minuteStep:Y,secondStep:Z,shouldDisableTime:Oe,labels:he})]}),o(m,{children:[_?e(l,{variant:"text",size:i[de],color:ue,onClick:()=>{ze(null),we(!1)},children:he.clear}):null,ee?e(l,{variant:"text",size:i[de],color:ue,disabled:Pe,onClick:()=>{ze(Me),ke(k(Me))},children:he.now}):null,e(l,{variant:"filled",size:i[de],color:ue,onClick:()=>we(!1),children:he.done})]})]})})});

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

@@ -133,8 +133,12 @@ export interface MPDialogProps extends MPControlEventProps<HTMLElement> {
      * - `backdrop` — the scrim behind the sheet. It is a sibling of the dialog
      *   rather than a child, and both render at the end of `<body>`, so nothing
      *   written against the root reaches it.
+     * - `body` — the part that scrolls, which holds `children`. Its padding, its
+     *   scrolling and the room it keeps at its edges belong to it rather than to
+     *   anything passed in, and a selector against the root could only find it by
+     *   the shape of the markup.
      */
-    classNames?: MPSlots<'backdrop'>;
+    classNames?: MPSlots<'backdrop' | 'body'>;
 }
 export type MPDialogCloseProps = React.ComponentProps<typeof Dialog.Close>;
 /**

package/dist/components/dialog/MPDialog.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Dialog as n}from"@base-ui/react/dialog";import{MPIcon as o}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{accentSlots as t}from"../../internal/accent.js";import{cssLength as s}from"../../internal/length.js";import{useMPLocale as a,useMPMessages as r}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{SHEET_GAP as p,hasContent as d}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as f,SCRIM as u,SHEET_MOTION as h}from"../../internal/surface.js";import{useMPSize as g}from"../../internal/config.js";const y={xs:"max-w-[320px]",sm:"max-w-[400px]",md:"max-w-[560px]",lg:"max-w-[720px]",xl:"max-w-[960px]"},j=`transition-[opacity,scale] ${h}`,b=/*@__PURE__*/["motion-safe:data-starting-style:scale-95","motion-safe:data-ending-style:scale-95"].join(" "),v={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-7",xl:"p-8"},w={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-7",xl:"px-8"},N={xs:"py-3",sm:"py-4",md:"py-6",lg:"py-7",xl:"py-8"},C={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-headline-large"},k={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-large",xl:"text-mp-body-large"},B={xs:20,sm:22,md:24,lg:28,xl:32};export const MPDialogClose=n.Close;export function MPDialog({open:h,defaultOpen:D,onOpenChange:$,trigger:P,icon:M,title:z,description:K,actions:O,dividers:F=!1,showClose:L,closeLabel:S,locale:T,width:U,fullWidth:W=!0,fullScreen:I=!1,modal:R=!0,dismissible:V=!0,size:_,color:q="secondary",onKeyDown:A,onKeyUp:E,onFocus:G,onBlur:H,onClick:J,onDoubleClick:Q,onContextMenu:X,classNames:Y,className:Z,style:ee,children:le}){const ne=g(_),oe=a(T),ie=r(m,oe),te=L??I,se=d(M),ae=d(z)||d(K)||se,re=d(O),me=F?v[ne]:w[ne],ce="border-mp-outline-variant border-t";return l(n.Root,{open:h,defaultOpen:D,modal:R,disablePointerDismissal:!V,onOpenChange:(e,l)=>{V||e||"escape-key"!==l.reason?$?.(e):l.cancel()},children:[P?e(n.Trigger,{render:P}):null,l(n.Portal,{children:[e(n.Backdrop,{className:[`${f} fixed inset-0`,x,u,Y?.backdrop??""].filter(Boolean).join(" ")}),e(n.Viewport,{className:[f,"fixed inset-0 flex justify-center",I?"items-stretch":"items-center p-4"].join(" "),children:l(n.Popup,{"data-mp-size":ne,onKeyDown:A,onKeyUp:E,onFocus:G,onBlur:H,onClick:J,onDoubleClick:Q,onContextMenu:X,className:["mp-dialog relative flex w-full flex-col overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 outline-none",I?"h-full max-w-none rounded-none":`rounded-mp-xl max-h-full ${void 0===U?y[ne]:""}`,I||W?"":"w-auto",F?"":`${N[ne]} ${p[ne]}`,j,I?"":b,Z??""].filter(Boolean).join(" "),style:{...t(q),...void 0===U||I?null:{maxWidth:s(U)},...ee},children:[ae||te?l("div",{className:["flex shrink-0 items-start gap-3",me,se&&!te?"flex-col items-center text-center":""].filter(Boolean).join(" "),children:[se?e("span",{className:"flex shrink-0 items-center justify-center text-(--_mp-accent)",children:M}):null,l("div",{className:`flex min-w-0 flex-1 flex-col ${p[ne]}`,children:[d(z)?e(n.Title,{className:`m-0 ${C[ne]}`,children:z}):null,d(K)?e(n.Description,{className:`text-mp-on-surface-variant m-0 ${k[ne]}`,children:K}):null]}),te?l(n.Close,{"aria-label":S??ie.close,className:["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{}),e(o,{icon:i,size:B[ne]})]}):null]}):null,d(le)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",k[ne],me,F&&(ae||te)?ce:""].filter(Boolean).join(" "),children:le}):null,re?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",me,F?ce:""].filter(Boolean).join(" "),children:O}):null]})})]})]})}
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Dialog as n}from"@base-ui/react/dialog";import{MPIcon as o}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{accentSlots as t}from"../../internal/accent.js";import{cssLength as s}from"../../internal/length.js";import{useMPLocale as a,useMPMessages as r}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{SHEET_BODY_ROOM as p,SHEET_GAP as d,hasContent as x}from"../../internal/scale.js";import{FADE as f,PORTAL_LAYER as u,SCRIM as h,SHEET_MOTION as g}from"../../internal/surface.js";import{useMPSize as y}from"../../internal/config.js";const j={xs:"max-w-[320px]",sm:"max-w-[400px]",md:"max-w-[560px]",lg:"max-w-[720px]",xl:"max-w-[960px]"},b=`transition-[opacity,scale] ${g}`,v=/*@__PURE__*/["motion-safe:data-starting-style:scale-95","motion-safe:data-ending-style:scale-95"].join(" "),w={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-7",xl:"p-8"},N={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-7",xl:"px-8"},C={xs:"py-3",sm:"py-4",md:"py-6",lg:"py-7",xl:"py-8"},k={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-headline-large"},B={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-large",xl:"text-mp-body-large"},D={xs:20,sm:22,md:24,lg:28,xl:32};export const MPDialogClose=n.Close;export function MPDialog({open:g,defaultOpen:$,onOpenChange:P,trigger:M,icon:z,title:K,description:O,actions:F,dividers:L=!1,showClose:S,closeLabel:T,locale:U,width:W,fullWidth:I=!0,fullScreen:R=!1,modal:V=!0,dismissible:_=!0,size:q,color:A="secondary",onKeyDown:E,onKeyUp:G,onFocus:H,onBlur:J,onClick:Q,onDoubleClick:X,onContextMenu:Y,classNames:Z,className:ee,style:le,children:ne}){const oe=y(q),ie=a(U),te=r(m,ie),se=S??R,ae=x(z),re=x(K)||x(O)||ae,me=x(F),ce=L?w[oe]:N[oe],pe="border-mp-outline-variant border-t";return l(n.Root,{open:g,defaultOpen:$,modal:V,disablePointerDismissal:!_,onOpenChange:(e,l)=>{_||e||"escape-key"!==l.reason?P?.(e):l.cancel()},children:[M?e(n.Trigger,{render:M}):null,l(n.Portal,{children:[e(n.Backdrop,{className:[`${u} fixed inset-0`,f,h,Z?.backdrop??""].filter(Boolean).join(" ")}),e(n.Viewport,{className:[u,"fixed inset-0 flex justify-center",R?"items-stretch":"items-center p-4"].join(" "),children:l(n.Popup,{"data-mp-size":oe,onKeyDown:E,onKeyUp:G,onFocus:H,onBlur:J,onClick:Q,onDoubleClick:X,onContextMenu:Y,className:["mp-dialog relative flex w-full flex-col overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 outline-none",R?"h-full max-w-none rounded-none":`rounded-mp-xl max-h-full ${void 0===W?j[oe]:""}`,R||I?"":"w-auto",L?"":`${C[oe]} ${d[oe]}`,b,R?"":v,ee??""].filter(Boolean).join(" "),style:{...t(A),...void 0===W||R?null:{maxWidth:s(W)},...le},children:[re||se?l("div",{className:["flex shrink-0 items-start gap-3",ce,ae&&!se?"flex-col items-center text-center":""].filter(Boolean).join(" "),children:[ae?e("span",{className:"flex shrink-0 items-center justify-center text-(--_mp-accent)",children:z}):null,l("div",{className:`flex min-w-0 flex-1 flex-col ${d[oe]}`,children:[x(K)?e(n.Title,{className:`m-0 ${k[oe]}`,children:K}):null,x(O)?e(n.Description,{className:`text-mp-on-surface-variant m-0 ${B[oe]}`,children:O}):null]}),se?l(n.Close,{"aria-label":T??te.close,className:["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{}),e(o,{icon:i,size:D[oe]})]}):null]}):null,x(ne)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",B[oe],ce,L&&(re||se)?pe:"",L?"":p,Z?.body??""].filter(Boolean).join(" "),children:ne}):null,me?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",ce,L?pe:""].filter(Boolean).join(" "),children:F}):null]})})]})]})}

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

@@ -139,8 +139,12 @@ export interface MPDrawerProps {
      * A class name for a part `className` cannot reach.
      *
      * - `backdrop` — the scrim behind the panel, drawn only on a modal drawer.
+     * - `body` — the part that scrolls, which holds `children`. Its padding, its
+     *   scrolling and the room it keeps at its edges belong to it rather than to
+     *   anything passed in, and a selector against the root could only find it by
+     *   the shape of the markup.
      */
-    classNames?: MPSlots<'backdrop'>;
+    classNames?: MPSlots<'backdrop' | 'body'>;
 }
 export type MPDrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;
 /**

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

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

@@ -35,6 +35,35 @@ export interface MPLocaleProviderProps {
     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, 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*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};
+import{jsx as r}from"react/jsx-runtime";import{MPLocaleContext as e,useMPLocale as o,useServerLocale as l}from"../../internal/locale.js";export function MPLocaleProvider({locale:o,serverLocale:t,children:c}){const i=l(t);return r(e.Provider,{value:o??i,children:c})}export{o as useMPLocale};

package/dist/components/number-field/MPNumberField.d.ts

@@ -84,6 +84,7 @@ export interface MPNumberFieldProps extends MPStyleProps, MPControlEventProps<HT
      * a field with a label and one without no longer sit at the same height in a
      * form until both are filled. A `startIcon` — or `steppers="split"`, whose
      * minus sits in the same place — holds the label up regardless.
+     * Left out, the nearest `MPConfigProvider`'s `floatingLabel` decides.
      * @default true
      */
     floatingLabel?: boolean;
@@ -130,4 +131,4 @@ export interface MPNumberFieldProps extends MPStyleProps, MPControlEventProps<HT
  * owns the parsing against the locale, the clamping, the press-and-hold repeat on
  * the steppers, and the hidden input that submits with a form.
  */
-export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, id, className, style }: MPNumberFieldProps): React.JSX.Element;
+export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel: floatingLabelProp, description, errorMessage, placeholder, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, id, className, style }: MPNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/MPNumberField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{NumberField as r}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as m}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as c}from"../../internal/locale.js";import{checkServerLocale as u,intlLocale as f}from"../../internal/intl.js";import{NUMBER_FIELD as h}from"../../internal/messages/number-field.js";import{MPStateLayer as g}from"../../internal/StateLayer.js";import{MPSupportingText as x}from"../../internal/SupportingText.js";import{CONTROL_ICON as b,PROSE_TEXT as j,hasContent as y}from"../../internal/scale.js";import{useMPSize as v}from"../../internal/config.js";const N={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:w,defaultValue:z,onValueChange:C,onValueCommitted:k,onKeyDown:S,onKeyUp:M,onFocus:V,onBlur:D,onClick:I,onDoubleClick:q,onContextMenu:B,min:F,max:K,step:L,largeStep:O,smallStep:P,allowWheelScrub:W=!1,format:R,locale:U,steppers:_="end",incrementLabel:G,decrementLabel:T,label:$,floatingLabel:A=!0,description:E,errorMessage:H,placeholder:J,startIcon:Q,size:X,fullWidth:Y=!1,required:Z=!1,disabled:ee=!1,readOnly:ne=!1,name:le,id:re,className:ae,style:te}){const ie=v(X),oe=d("string"==typeof U?U:void 0),se=c(h,oe);void 0===U&&u(oe);const pe=y(H),me=N[ie],de=l.useId(),ce=re??de,ue="none"!==_&&!ne&&!ee,[fe,he]=l.useState(z??null),ge=void 0===w?fe:w,{shrunk:xe,focusProps:be}=m({floating:A&&y($),filled:null!==ge,pinned:!!Q||ue&&"split"===_}),je=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none border-0 bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",me.stepper].join(" "),ye=n(r.Decrement,{"aria-label":T??se.decrease,className:je,children:[e(g,{}),e(t,{icon:o,size:b[ie]})]}),ve=n(r.Increment,{"aria-label":G??se.increase,className:je,children:[e(g,{}),e(t,{icon:i,size:b[ie]})]});return n(a.Root,{className:["mp-number-field group flex-col align-top",Y?"flex w-full":"inline-flex w-fit",ae??""].filter(Boolean).join(" "),style:te,disabled:ee,invalid:pe,"data-mp-size":ie,...be,children:[e(r.Root,{id:ce,name:le,className:"contents",value:w,defaultValue:z,onValueChange:e=>{he(e),C?.(e)},onValueCommitted:e=>k?.(e),min:F,max:K,step:L,largeStep:O,smallStep:P,allowWheelScrub:W,format:R,locale:"string"==typeof U?f(U):U??f(oe),disabled:ee,readOnly:ne,required:Z,children:n("div",{className:"relative w-full",children:[n(r.Group,{className:["flex w-full items-center gap-2",me.height,ue&&"end"===_?`${me.padding} pe-1`:ue&&"split"===_?"px-1":me.padding].join(" "),children:[ue&&"split"===_?ye:null,Q?e("span",{className:["flex shrink-0 items-center",ee?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:Q}):null,e(r.Input,{placeholder:xe?J:void 0,onKeyDown:S,onKeyUp:M,onFocus:V,onBlur:D,onClick:I,onDoubleClick:q,onContextMenu:B,className:["w-full min-w-0 flex-1 tabular-nums",j[ie],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",ue&&"split"===_?"text-center":""].filter(Boolean).join(" ")}),ue&&"end"===_?n("span",{className:"flex shrink-0 items-center",children:[ye,ve]}):null,ue&&"split"===_?ve:null]}),e(p,{label:$,required:Z,notched:xe}),y($)?e(s,{size:ie,label:$,required:Z,shrunk:xe}):null]})}),e(x,{description:E,errorMessage:H,className:me.padding})]})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{NumberField as r}from"@base-ui/react/number-field";import{Field as t}from"@base-ui/react/field";import{MPIcon as a}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as m}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as c}from"../../internal/locale.js";import{checkServerLocale as u,intlLocale as f}from"../../internal/intl.js";import{NUMBER_FIELD as h}from"../../internal/messages/number-field.js";import{MPStateLayer as g}from"../../internal/StateLayer.js";import{MPSupportingText as x}from"../../internal/SupportingText.js";import{CONTROL_ICON as b,PROSE_TEXT as j,hasContent as y}from"../../internal/scale.js";import{useMPFloatingLabel as v,useMPSize as N}from"../../internal/config.js";const w={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:z,defaultValue:C,onValueChange:k,onValueCommitted:S,onKeyDown:M,onKeyUp:V,onFocus:D,onBlur:I,onClick:q,onDoubleClick:B,onContextMenu:F,min:K,max:L,step:O,largeStep:P,smallStep:W,allowWheelScrub:R=!1,format:U,locale:_,steppers:G="end",incrementLabel:T,decrementLabel:$,label:A,floatingLabel:E,description:H,errorMessage:J,placeholder:Q,startIcon:X,size:Y,fullWidth:Z=!1,required:ee=!1,disabled:ne=!1,readOnly:le=!1,name:re,id:te,className:ae,style:ie}){const oe=N(Y),se=v(E),pe=d("string"==typeof _?_:void 0),me=c(h,pe);void 0===_&&u(pe);const de=y(J),ce=w[oe],ue=l.useId(),fe=te??ue,he="none"!==G&&!le&&!ne,[ge,xe]=l.useState(C??null),be=void 0===z?ge:z,{shrunk:je,hinted:ye,focusProps:ve}=m({floating:se&&y(A),filled:null!==be,pinned:!!X||he&&"split"===G}),Ne=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none border-0 bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",ce.stepper].join(" "),we=n(r.Decrement,{"aria-label":$??me.decrease,className:Ne,children:[e(g,{}),e(a,{icon:o,size:b[oe]})]}),ze=n(r.Increment,{"aria-label":T??me.increase,className:Ne,children:[e(g,{}),e(a,{icon:i,size:b[oe]})]});return n(t.Root,{className:["mp-number-field group flex-col align-top",Z?"flex w-full":"inline-flex w-fit",ae??""].filter(Boolean).join(" "),style:ie,disabled:ne,invalid:de,"data-mp-size":oe,...ve,children:[e(r.Root,{id:fe,name:re,className:"contents",value:z,defaultValue:C,onValueChange:e=>{xe(e),k?.(e)},onValueCommitted:e=>S?.(e),min:K,max:L,step:O,largeStep:P,smallStep:W,allowWheelScrub:R,format:U,locale:"string"==typeof _?f(_):_??f(pe),disabled:ne,readOnly:le,required:ee,children:n("div",{className:"relative w-full",children:[n(r.Group,{className:["flex w-full items-center gap-2",ce.height,he&&"end"===G?`${ce.padding} pe-1`:he&&"split"===G?"px-1":ce.padding].join(" "),children:[he&&"split"===G?we:null,X?e("span",{className:["flex shrink-0 items-center",ne?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:X}):null,e(r.Input,{placeholder:ye?Q:void 0,onKeyDown:M,onKeyUp:V,onFocus:D,onBlur:I,onClick:q,onDoubleClick:B,onContextMenu:F,className:["w-full min-w-0 flex-1 tabular-nums",j[oe],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",he&&"split"===G?"text-center":""].filter(Boolean).join(" ")}),he&&"end"===G?n("span",{className:"flex shrink-0 items-center",children:[we,ze]}):null,he&&"split"===G?ze:null]}),e(p,{label:A,required:ee,notched:je}),y(A)?e(s,{size:oe,label:A,required:ee,shrunk:je}):null]})}),e(x,{description:H,errorMessage:J,className:ce.padding})]})}

package/dist/components/scroll-area/MPScrollArea.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{ScrollArea as t}from"@base-ui/react/scroll-area";import{cssLength as a}from"../../internal/length.js";import{useMPSize as i}from"../../internal/config.js";const n={xs:"w-1.5",sm:"w-2",md:"w-2.5",lg:"w-3",xl:"w-3.5"},s={xs:"h-1.5",sm:"h-2",md:"h-2.5",lg:"h-3",xl:"h-3.5"};export const MPScrollArea=/*@__PURE__*/o.forwardRef(function({size:o,axis:n="vertical",maxHeight:s,height:c,persistent:m=!1,className:p,style:h,children:u,...f},d){const g=i(o),x="horizontal"!==n,v="vertical"!==n;return e(t.Root,{ref:d,"data-mp-size":g,className:["mp-scroll-area relative overflow-hidden",p??""].filter(Boolean).join(" "),style:h,...f,children:[r(t.Viewport,{className:"mp-scroll-area__viewport size-full overscroll-contain",style:{maxHeight:a(s),height:a(c)},children:r(t.Content,{className:"mp-scroll-area__content",children:u})}),x?r(l,{orientation:"vertical",size:g,persistent:m}):null,v?r(l,{orientation:"horizontal",size:g,persistent:m}):null,x&&v?r(t.Corner,{className:"mp-scroll-area__corner bg-mp-surface-container"}):null]})});function l({orientation:e,size:o,persistent:a}){return r(t.Scrollbar,{orientation:e,className:["mp-scroll-area__bar flex touch-none select-none p-0.5","vertical"===e?n[o]:s[o],"transition-opacity duration-(--mp-sys-motion-duration-short4)",a?"opacity-100":"opacity-0 data-hovering:opacity-100 data-scrolling:opacity-100"].join(" "),children:r(t.Thumb,{className:["mp-scroll-area__thumb rounded-mp-full flex-1","bg-mp-on-surface/38 hover:bg-mp-on-surface/56 active:bg-mp-on-surface/56","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ")})})}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{ScrollArea as t}from"@base-ui/react/scroll-area";import{cssLength as i}from"../../internal/length.js";import{useMPSize as a}from"../../internal/config.js";const n={xs:"w-1.5",sm:"w-2",md:"w-2.5",lg:"w-3",xl:"w-3.5"},s={xs:"h-1.5",sm:"h-2",md:"h-2.5",lg:"h-3",xl:"h-3.5"};export const MPScrollArea=/*@__PURE__*/r.forwardRef(function({size:r,axis:n="vertical",maxHeight:s,height:c,persistent:m=!1,className:p,style:u,children:h,...f},d){const g=a(r),v="horizontal"!==n,b="vertical"!==n;return o(t.Root,{ref:d,"data-mp-size":g,className:["mp-scroll-area relative overflow-hidden","outline-mp-secondary outline-none","has-[>:focus-visible]:outline-2","has-[>:focus-visible]:outline-offset-2","has-[>:focus-visible]:outline-solid",p??""].filter(Boolean).join(" "),style:u,...f,children:[e(t.Viewport,{className:"mp-scroll-area__viewport size-full overscroll-contain outline-none",style:{maxHeight:i(s),height:i(c)},children:e(t.Content,{className:"mp-scroll-area__content",children:h})}),v?e(l,{orientation:"vertical",size:g,persistent:m}):null,b?e(l,{orientation:"horizontal",size:g,persistent:m}):null,v&&b?e(t.Corner,{className:"mp-scroll-area__corner bg-mp-surface-container"}):null]})});function l({orientation:o,size:r,persistent:i}){return e(t.Scrollbar,{orientation:o,className:["mp-scroll-area__bar flex touch-none select-none p-0.5","vertical"===o?n[r]:s[r],"transition-opacity duration-(--mp-sys-motion-duration-short4)",i?"opacity-100":"opacity-0 data-hovering:opacity-100 data-scrolling:opacity-100"].join(" "),children:e(t.Thumb,{className:["mp-scroll-area__thumb rounded-mp-full flex-1","bg-mp-on-surface/38 hover:bg-mp-on-surface/56 active:bg-mp-on-surface/56","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ")})})}

package/dist/components/scroll-zone/MPScrollZone.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIconButton as r}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as l,ChevronDownIcon as s}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{cssLength as c}from"../../internal/length.js";import{useMPLocale as u,useMPMessages as d}from"../../internal/locale.js";import{SCROLL as m}from"../../internal/messages/scroll.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{useMPColor as p,useMPSize as b}from"../../internal/config.js";const v={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},w={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const MPScrollZone=/*@__PURE__*/n.forwardRef(function({orientation:h="horizontal",lines:g=1,gap:y=8,buttons:x="auto",buttonPlacement:k="inline",mode:L="item",step:E=1,speed:j=900,snap:M=!1,drag:C=!0,wheel:P=!1,scrollbar:z=!1,variant:R="filled",size:N,color:T,label:A,previousLabel:B,nextLabel:D,locale:W,className:S,style:F,children:I,...Y},_){const H=b(N),X=p(T),q=d(m,u(W)),K="horizontal"===h,O=Math.max(1,Math.round(g)),$=Math.max(1,Math.round(E)),V="inline"===k,Z=n.useRef(null),G=n.useRef(null),[J,Q]=n.useState({back:!1,forward:!1}),U=n.useCallback(()=>{const e=Z.current;if(!e)return;const t=K?e.clientWidth:e.clientHeight,n=K?e.scrollWidth:e.scrollHeight,r=Math.abs(K?e.scrollLeft:e.scrollTop);Q(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[K]);n.useEffect(()=>{const e=Z.current,t=G.current;if(U(),!e||"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(U);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[U]);const ee=n.useCallback(()=>{const e=Z.current;return e&&K&&"rtl"===getComputedStyle(e).direction?-1:1},[K]),te=n.useCallback((e,t)=>{const n=Z.current;if(!n)return;const r=t?"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"auto":"smooth":"auto";n.scrollBy(K?{left:e,behavior:r}:{top:e,behavior:r})},[K]),ne=n.useCallback(()=>{const e=Z.current,t=G.current;if(!e||!t)return[];const n=K&&"rtl"===getComputedStyle(e).direction,r=K?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],l=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);l.includes(t)||l.push(t)}return l.sort((e,t)=>e-t)},[K]),re=n.useCallback((e,t=L)=>{const n=Z.current;if(!n)return;const r=ee(),o=K?n.clientWidth:n.clientHeight;if("page"===t)return void te(o*(e?1:-1)*r,!0);const i=ne(),l=i.filter(e=>e>1),s=i.filter(e=>e<-1),a=e?l[$-1]:s[s.length-$];te(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[ee,K,ne,$,L,te]),oe=n.useRef(null);n.useEffect(()=>()=>oe.current?.(),[]);const ie=n.useCallback((e,t)=>{if(oe.current)return;const n=ee(),r=performance.now();let o=r,i=0;const l=t=>{const r=t-o;o=t,te(j*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(l)};i=requestAnimationFrame(l);const s=()=>{cancelAnimationFrame(i),oe.current=null,window.removeEventListener(t,s),window.removeEventListener("pointercancel",s),window.removeEventListener("blur",s),performance.now()-r<140&&re(e,"item")};oe.current=s,window.addEventListener(t,s),window.addEventListener("pointercancel",s),window.addEventListener("blur",s)},[re,ee,te,j]),le=n.useRef(null);function se(e){return"hold"!==L?{onClick:()=>re(e)}:{onPointerDown:t=>{0===t.button&&ie(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),ie(e,"keyup"))}}}n.useEffect(()=>()=>le.current?.(),[]),n.useEffect(()=>{const e=Z.current;if(!e||!P||!K)return;const t=t=>{if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,r=t.deltaY*n;if(!r)return;const o=Math.abs(e.scrollLeft);(r>0?e.scrollWidth-e.clientWidth-o>1:o>1)&&(t.preventDefault(),te(r*ee(),!1))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[ee,K,te,P]);const ae="none"!==x&&("always"===x||J.back||J.forward);function ce(t){const n=t?J.forward:J.back;if("auto"===x&&!n&&!V)return e("span",{});const a=e(r,{variant:R,size:H,color:X,label:t?D??q.next:B??q.previous,disabled:!n,className:"pointer-events-auto",icon:e(o,{icon:K?t?l:i:s,size:f[H],className:K?"rtl:rotate-180":t?"":"rotate-180"}),...se(t)});return V?e("span",{className:"flex shrink-0 items-center justify-center",children:a}):a}return t("div",{ref:_,"data-mp-size":H,"data-mp-variant":R,className:["mp-scroll-zone relative flex min-w-0",V&&K?"flex-row items-stretch":"flex-col",V?w[H]:"",S??""].filter(Boolean).join(" "),style:{...a(X),...F},...Y,children:[ae&&V?ce(!1):null,e("div",{ref:Z,tabIndex:0,role:"group","aria-label":A??q.label,className:["mp-scroll-zone__scroller","min-h-0 min-w-0 grow",K?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",M?K?"snap-x snap-mandatory":"snap-y snap-mandatory":"",z?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",C&&(J.back||J.forward)?"cursor-grab data-dragging:cursor-grabbing":"","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "),onScroll:U,onPointerDown:function(e){if(!C||"touch"===e.pointerType||0!==e.button)return;le.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,i=t.scrollTop;let l=!1;const s=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const s=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(K?s:a)<4)return;l=!0;try{t.setPointerCapture(e.pointerId)}catch{}t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}K?t.scrollLeft=o-s:t.scrollTop=i-a},c=()=>{le.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,s?document.body.style.setProperty("-webkit-user-select",s):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=l;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};le.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:G,className:["mp-scroll-zone__track",M?"[&>*]:snap-start":""].filter(Boolean).join(" "),style:{display:"grid",gap:c(y),gridAutoFlow:K?"column":"row",...K?{width:"max-content",gridTemplateRows:`repeat(${O}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${O}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:I})}),ae&&V?ce(!0):null,ae&&!V?t("div",{className:["pointer-events-none absolute inset-0 flex justify-between",K?"items-center":"flex-col items-center",v[H]].join(" "),children:[ce(!1),ce(!0)]}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIconButton as r}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as l,ChevronDownIcon as s}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{cssLength as c}from"../../internal/length.js";import{useMPLocale as u,useMPMessages as d}from"../../internal/locale.js";import{SCROLL as m}from"../../internal/messages/scroll.js";import{CONTROL_ICON as p}from"../../internal/scale.js";import{useMPColor as f,useMPSize as b}from"../../internal/config.js";const v={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},w={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const MPScrollZone=/*@__PURE__*/n.forwardRef(function({orientation:g="horizontal",lines:h=1,gap:y=8,buttons:x="auto",buttonPlacement:k="inline",mode:L="item",step:E=1,speed:j=900,snap:M=!1,drag:C=!0,wheel:P=!1,scrollbar:R=!1,variant:z="filled",size:T,color:N,label:A,previousLabel:B,nextLabel:D,locale:W,className:F,style:S,children:I,...Y},_){const H=b(T),X=f(N),q=d(m,u(W)),K="horizontal"===g,O=Math.max(1,Math.round(h)),$=Math.max(1,Math.round(E)),V="inline"===k,Z=n.useRef(null),G=n.useRef(null),[J,Q]=n.useState({back:!1,forward:!1}),U=n.useCallback(()=>{const e=Z.current;if(!e)return;const t=K?e.clientWidth:e.clientHeight,n=K?e.scrollWidth:e.scrollHeight,r=Math.abs(K?e.scrollLeft:e.scrollTop);Q(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[K]);n.useEffect(()=>{const e=Z.current,t=G.current;if(U(),!e||"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(U);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[U]);const ee=n.useCallback(()=>{const e=Z.current;return e&&K&&"rtl"===getComputedStyle(e).direction?-1:1},[K]),te=n.useCallback((e,t)=>{const n=Z.current;if(!n)return;const r=t?"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"auto":"smooth":"auto";n.scrollBy(K?{left:e,behavior:r}:{top:e,behavior:r})},[K]),ne=n.useCallback(()=>{const e=Z.current,t=G.current;if(!e||!t)return[];const n=getComputedStyle(e),r=K&&"rtl"===n.direction,o=K?r?"right":"left":"top",i=r?-1:1,l=parseFloat(K?r?n.paddingRight:n.paddingLeft:n.paddingTop),s=e.getBoundingClientRect()[o],a=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[o]-s)*i-l);a.includes(t)||a.push(t)}return a.sort((e,t)=>e-t)},[K]),re=n.useCallback((e,t=L)=>{const n=Z.current;if(!n)return;const r=ee(),o=K?n.clientWidth:n.clientHeight;if("page"===t)return void te(o*(e?1:-1)*r,!0);const i=ne(),l=i.filter(e=>e>1),s=i.filter(e=>e<-1),a=e?l[$-1]:s[s.length-$];te(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[ee,K,ne,$,L,te]),oe=n.useRef(null);n.useEffect(()=>()=>oe.current?.(),[]);const ie=n.useCallback((e,t)=>{if(oe.current)return;const n=ee(),r=performance.now();let o=r,i=0;const l=t=>{const r=t-o;o=t,te(j*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(l)};i=requestAnimationFrame(l);const s=()=>{cancelAnimationFrame(i),oe.current=null,window.removeEventListener(t,s),window.removeEventListener("pointercancel",s),window.removeEventListener("blur",s),performance.now()-r<140&&re(e,"item")};oe.current=s,window.addEventListener(t,s),window.addEventListener("pointercancel",s),window.addEventListener("blur",s)},[re,ee,te,j]),le=n.useRef(null);function se(e){return"hold"!==L?{onClick:()=>re(e)}:{onPointerDown:t=>{0===t.button&&ie(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),ie(e,"keyup"))}}}n.useEffect(()=>()=>le.current?.(),[]),n.useEffect(()=>{const e=Z.current;if(!e||!P||!K)return;const t=t=>{if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,r=t.deltaY*n;if(!r)return;const o=Math.abs(e.scrollLeft);(r>0?e.scrollWidth-e.clientWidth-o>1:o>1)&&(t.preventDefault(),te(r*ee(),!1))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[ee,K,te,P]);const ae="none"!==x&&("always"===x||J.back||J.forward);function ce(t){const n=t?J.forward:J.back;if("auto"===x&&!n&&!V)return e("span",{});const a=e(r,{variant:z,size:H,color:X,label:t?D??q.next:B??q.previous,disabled:!n,className:"pointer-events-auto",icon:e(o,{icon:K?t?l:i:s,size:p[H],className:K?"rtl:rotate-180":t?"":"rotate-180"}),...se(t)});return V?e("span",{className:"flex shrink-0 items-center justify-center",children:a}):a}return t("div",{ref:_,"data-mp-size":H,"data-mp-variant":z,className:["mp-scroll-zone relative flex min-w-0",V&&K?"flex-row items-stretch":"flex-col",V?w[H]:"",F??""].filter(Boolean).join(" "),style:{...a(X),...S},...Y,children:[ae&&V?ce(!1):null,e("div",{ref:Z,tabIndex:0,role:"group","aria-label":A??q.label,className:["mp-scroll-zone__scroller","min-h-0 min-w-0 grow",K?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden","-m-1 p-1 scroll-p-1",M?K?"snap-x snap-mandatory":"snap-y snap-mandatory":"",R?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",C&&(J.back||J.forward)?"cursor-grab data-dragging:cursor-grabbing":"","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-6","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "),onScroll:U,onPointerDown:function(e){if(!C||"touch"===e.pointerType||0!==e.button)return;le.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,i=t.scrollTop;let l=!1;const s=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const s=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(K?s:a)<4)return;l=!0;try{t.setPointerCapture(e.pointerId)}catch{}t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}K?t.scrollLeft=o-s:t.scrollTop=i-a},c=()=>{le.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,s?document.body.style.setProperty("-webkit-user-select",s):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=l;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};le.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:G,className:["mp-scroll-zone__track",M?"[&>*]:snap-start":""].filter(Boolean).join(" "),style:{display:"grid",gap:c(y),gridAutoFlow:K?"column":"row",...K?{width:"max-content",gridTemplateRows:`repeat(${O}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${O}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:I})}),ae&&V?ce(!0):null,ae&&!V?t("div",{className:["pointer-events-none absolute inset-0 flex justify-between",K?"items-center":"flex-col items-center",v[H]].join(" "),children:[ce(!1),ce(!0)]}):null]})});

package/dist/components/select/MPSelect.d.ts

@@ -76,6 +76,7 @@ export interface MPSelectProps extends MPStyleProps, MPControlEventProps<HTMLBut
      * a select with a label and one without no longer sit at the same height in a
      * form until both are answered. A `startIcon` holds the label up regardless —
      * the icon is already standing where the resting label would be.
+     * Left out, the nearest `MPConfigProvider`'s `floatingLabel` decides.
      * @default true
      */
     floatingLabel?: boolean;

package/dist/components/select/MPSelect.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Select as t}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,ChevronDownIcon as l}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as c,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";import{MARK_MOTION_KEPT as g}from"../../internal/mark.js";import{FADE as x,PORTAL_LAYER as b}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const j={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=/*@__PURE__*/n.forwardRef(function({items:y,value:N,defaultValue:k,onValueChange:w,onKeyDown:C,onKeyUp:I,onFocus:M,onBlur:S,onClick:z,onDoubleClick:P,onContextMenu:_,placeholder:B,label:O,floatingLabel:V=!0,description:q,errorMessage:D,startIcon:F,size:K,fullWidth:T=!1,required:L=!1,disabled:R=!1,readOnly:$=!1,name:U,id:W,classNames:A,className:E,style:G},H){const J=v(K),Q=h(D),X=j[J],Y=n.useId(),Z=W??Y,[ee,ae]=n.useState(k??null),[ne,te]=n.useState(!1),re=void 0===N?ee:N,{shrunk:oe,focusProps:ie}=d({floating:V&&h(O),filled:null!==re&&""!==re,pinned:ne||!!F}),le=n.useMemo(()=>y.map(e=>({label:e.label??String(e.value),value:e.value})),[y]);return a(r.Root,{className:["mp-select group flex-col align-top",T?"flex w-full":"inline-flex w-fit",E??""].filter(Boolean).join(" "),style:G,disabled:R,invalid:Q,"data-mp-size":J,...ie,children:[a(t.Root,{id:Z,name:U,items:le,value:N,defaultValue:k,onValueChange:e=>{ae(e??null),w?.(e??null)},onOpenChange:te,disabled:R,readOnly:$,required:L,children:[a("div",{className:"relative w-full",children:[a(t.Trigger,{ref:H,onKeyDown:C,onKeyUp:I,onFocus:M,onBlur:S,onClick:z,onDoubleClick:P,onContextMenu:_,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",X.padding,X.height,f[J],R?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+($?"cursor-default":"cursor-pointer")].join(" "),children:[F?e("span",{className:["flex shrink-0 items-center",R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:F}):null,e(t.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",R?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:oe?B:void 0}),e(t.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(o,{icon:l,size:u[J]})})]}),e(c,{label:O,required:L,notched:oe}),h(O)?e(s,{size:J,label:O,required:L,htmlFor:Z,shrunk:oe}):null]}),e(t.Portal,{children:e(t.Positioner,{className:b,sideOffset:4,alignItemWithTrigger:!1,children:e(t.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",f[J],x,A?.popup??""].filter(Boolean).join(" "),children:e(t.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:y.map((n,r)=>a(t.Item,{value:n.value,disabled:n.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center",A?.item??"","gap-3 py-2 pe-3 ps-2 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(m,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(t.ItemIndicator,{keepMounted:!0,className:`mp-select__mark ${g}`,children:e(o,{icon:i,size:18})})}),e(t.ItemText,{className:"min-w-0 flex-1 truncate",children:n.label??String(n.value)})]},`${r}:${String(n.value)}`))})})})})]}),e(p,{description:q,errorMessage:D,className:X.padding})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Select as t}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,ChevronDownIcon as l}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as c,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";import{MARK_MOTION_KEPT as g}from"../../internal/mark.js";import{FADE as x,PORTAL_LAYER as b}from"../../internal/surface.js";import{useMPFloatingLabel as v,useMPSize as j}from"../../internal/config.js";const y={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=/*@__PURE__*/n.forwardRef(function({items:N,value:k,defaultValue:w,onValueChange:C,onKeyDown:I,onKeyUp:M,onFocus:S,onBlur:z,onClick:P,onDoubleClick:_,onContextMenu:B,placeholder:O,label:V,floatingLabel:q,description:D,errorMessage:F,startIcon:K,size:T,fullWidth:L=!1,required:R=!1,disabled:$=!1,readOnly:U=!1,name:W,id:A,classNames:E,className:G,style:H},J){const Q=j(T),X=v(q),Y=h(F),Z=y[Q],ee=n.useId(),ae=A??ee,[ne,te]=n.useState(w??null),[re,oe]=n.useState(!1),ie=void 0===k?ne:k,{shrunk:le,hinted:se,focusProps:ce}=d({floating:X&&h(V),filled:null!==ie&&""!==ie,pinned:re||!!K}),de=n.useMemo(()=>N.map(e=>({label:e.label??String(e.value),value:e.value})),[N]);return a(r.Root,{className:["mp-select group flex-col align-top",L?"flex w-full":"inline-flex w-fit",G??""].filter(Boolean).join(" "),style:H,disabled:$,invalid:Y,"data-mp-size":Q,...ce,children:[a(t.Root,{id:ae,name:W,items:de,value:k,defaultValue:w,onValueChange:e=>{te(e??null),C?.(e??null)},onOpenChange:oe,disabled:$,readOnly:U,required:R,children:[a("div",{className:"relative w-full",children:[a(t.Trigger,{ref:J,onKeyDown:I,onKeyUp:M,onFocus:S,onBlur:z,onClick:P,onDoubleClick:_,onContextMenu:B,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",Z.padding,Z.height,f[Q],$?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(U?"cursor-default":"cursor-pointer")].join(" "),children:[K?e("span",{className:["flex shrink-0 items-center",$?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:K}):null,e(t.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",$?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:se?O:void 0}),e(t.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",$?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(o,{icon:l,size:u[Q]})})]}),e(c,{label:V,required:R,notched:le}),h(V)?e(s,{size:Q,label:V,required:R,htmlFor:ae,shrunk:le}):null]}),e(t.Portal,{children:e(t.Positioner,{className:b,sideOffset:4,alignItemWithTrigger:!1,children:e(t.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",f[Q],x,E?.popup??""].filter(Boolean).join(" "),children:e(t.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:N.map((n,r)=>a(t.Item,{value:n.value,disabled:n.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center",E?.item??"","gap-3 py-2 pe-3 ps-2 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(m,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(t.ItemIndicator,{keepMounted:!0,className:`mp-select__mark ${g}`,children:e(o,{icon:i,size:18})})}),e(t.ItemText,{className:"min-w-0 flex-1 truncate",children:n.label??String(n.value)})]},`${r}:${String(n.value)}`))})})})})]}),e(p,{description:D,errorMessage:F,className:Z.padding})]})});

package/dist/components/text-field/MPTextField.d.ts

@@ -62,6 +62,7 @@ export interface MPTextFieldProps extends MPStyleProps, MPControlEventProps<HTML
      *
      * A `startIcon` holds the label up regardless. The icon is already standing
      * where the resting label would be, and the two cannot share the spot.
+     * Left out, the nearest `MPConfigProvider`'s `floatingLabel` decides.
      * @default true
      */
     floatingLabel?: boolean;

package/dist/components/text-field/MPTextField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as a}from"../icon/MPIcon.js";import{MPFieldLabel as r,MPFieldOutline as i,useFloatingLabel as l}from"../../internal/FieldOutline.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{VisibilityIcon as d,VisibilityOffIcon as p}from"../../constants/icons.js";import{useMPLocale as u,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";import{useMPSize as f}from"../../internal/config.js";const x={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:b,name:g,type:y="text",placeholder:h,autoComplete:v,label:w,"aria-label":C,floatingLabel:j=!0,onChange:k,onFormReset:M,onSubmit:z,onKeyDown:D,onKeyUp:N,onFocus:E,onBlur:F,onClick:P,onDoubleClick:S,onContextMenu:B,errorMessage:K="",required:q=!1,fullWidth:L=!1,readOnly:R=!1,autoFocus:U=!1,size:I,disabled:O=!1,disableEnterKey:T=!1,rows:$,maxLength:_,startIcon:W,resizable:A=!1,id:G,locale:H,passwordLabels:J,className:Q,style:V},X){const Y=f(I),Z=u(H),ee=c(m,Z,J),te=o.useRef(null),[oe,ne]=o.useState(!1),[ae,re]=o.useState(!1),[ie,le]=o.useState(b),se=o.useId(),de=G??se,pe=!!$,ue=K.length>0,ce=x[Y],me=ae?ie:b,{shrunk:fe,focusProps:xe}=l({floating:j&&!!w,filled:me.length>0,pinned:!!W}),be=o.useCallback(e=>{te.current=e,"function"==typeof X?X(e):X&&(X.current=e)},[X]),ge=e=>{e.preventDefault()};return o.useEffect(()=>{ae||le(b)},[b,ae]),o.useEffect(()=>{U&&!window.matchMedia("(max-width: 599.95px)").matches&&te.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",L?"w-full":"inline-block","align-top",Q??""].filter(Boolean).join(" "),style:V,disabled:O,invalid:ue,"data-mp-size":Y,...xe,children:[t("div",{className:["relative flex w-full items-center gap-2",ce.padding,pe?"py-2":""].filter(Boolean).join(" "),children:[e(i,{label:w,required:q,notched:fe}),W?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:W}):null,e(n.Control,{render:pe?e("textarea",{rows:$}):e("input",{}),id:de,name:g,"aria-label":C,type:pe?void 0:oe?"text":y,required:q,readOnly:R,disabled:O,autoComplete:v,placeholder:fe?h:void 0,maxLength:_,value:me,ref:be,className:[`${ce.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",ce.control,pe?"py-0":"",pe&&A?"resize-y":"resize-none","search"===y?"[&::-webkit-search-cancel-button]:hidden":"","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{M?.();const t=e.target.value;ae&&le(t),k?.(t)},onCompositionStart:()=>{re(!0),le(b)},onCompositionUpdate:e=>{le(e.target.value)},onCompositionEnd:e=>{re(!1);const t=e.target.value;M?.(),k?.(t),le(t)},onKeyUp:N,onFocus:E,onBlur:F,onClick:P,onDoubleClick:S,onContextMenu:B,onKeyDown:e=>{if(D?.(e),!e.defaultPrevented&&"Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;z?.(),(T||z&&!pe)&&e.preventDefault()}}}),"password"!==y||pe?null:e("button",{type:"button","aria-label":oe?ee.hidePassword:ee.showPassword,onClick:()=>ne(e=>!e),onMouseDown:ge,onMouseUp:ge,disabled:O,className:["text-mp-on-surface-variant -me-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(a,{icon:oe?d:p,size:ce.icon})}),w?e(r,{size:Y,label:w,required:q,shrunk:fe,multiline:pe}):null]}),e(s,{errorMessage:K,className:`mp-text-field__support mt-1 ${ce.padding}`})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as a}from"../icon/MPIcon.js";import{MPFieldLabel as r,MPFieldOutline as i,useFloatingLabel as l}from"../../internal/FieldOutline.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{VisibilityIcon as d,VisibilityOffIcon as p}from"../../constants/icons.js";import{useMPLocale as u,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";import{useMPFloatingLabel as f,useMPSize as x}from"../../internal/config.js";const b={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:g,name:y,type:h="text",placeholder:v,autoComplete:w,label:C,"aria-label":j,floatingLabel:k,onChange:M,onFormReset:z,onSubmit:D,onKeyDown:N,onKeyUp:E,onFocus:F,onBlur:P,onClick:S,onDoubleClick:B,onContextMenu:K,errorMessage:q="",required:L=!1,fullWidth:R=!1,readOnly:U=!1,autoFocus:I=!1,size:O,disabled:T=!1,disableEnterKey:$=!1,rows:_,maxLength:W,startIcon:A,resizable:G=!1,id:H,locale:J,passwordLabels:Q,className:V,style:X},Y){const Z=x(O),ee=f(k),te=u(J),oe=c(m,te,Q),ne=o.useRef(null),[ae,re]=o.useState(!1),[ie,le]=o.useState(!1),[se,de]=o.useState(g),pe=o.useId(),ue=H??pe,ce=!!_,me=q.length>0,fe=b[Z],xe=ie?se:g,{shrunk:be,hinted:ge,focusProps:ye}=l({floating:ee&&!!C,filled:xe.length>0,pinned:!!A}),he=o.useCallback(e=>{ne.current=e,"function"==typeof Y?Y(e):Y&&(Y.current=e)},[Y]),ve=e=>{e.preventDefault()};return o.useEffect(()=>{ie||de(g)},[g,ie]),o.useEffect(()=>{I&&!window.matchMedia("(max-width: 599.95px)").matches&&ne.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",R?"w-full":"inline-block","align-top",V??""].filter(Boolean).join(" "),style:X,disabled:T,invalid:me,"data-mp-size":Z,...ye,children:[t("div",{className:["relative flex w-full items-center gap-2",fe.padding,ce?"py-2":""].filter(Boolean).join(" "),children:[e(i,{label:C,required:L,notched:be}),A?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:A}):null,e(n.Control,{render:ce?e("textarea",{rows:_}):e("input",{}),id:ue,name:y,"aria-label":j,type:ce?void 0:ae?"text":h,required:L,readOnly:U,disabled:T,autoComplete:w,placeholder:ge?v:void 0,maxLength:W,value:xe,ref:he,className:[`${fe.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",fe.control,ce?"py-0":"",ce&&G?"resize-y":"resize-none","search"===h?"[&::-webkit-search-cancel-button]:hidden":"","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{z?.();const t=e.target.value;ie&&de(t),M?.(t)},onCompositionStart:()=>{le(!0),de(g)},onCompositionUpdate:e=>{de(e.target.value)},onCompositionEnd:e=>{le(!1);const t=e.target.value;z?.(),M?.(t),de(t)},onKeyUp:E,onFocus:F,onBlur:P,onClick:S,onDoubleClick:B,onContextMenu:K,onKeyDown:e=>{if(N?.(e),!e.defaultPrevented&&"Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;D?.(),($||D&&!ce)&&e.preventDefault()}}}),"password"!==h||ce?null:e("button",{type:"button","aria-label":ae?oe.hidePassword:oe.showPassword,onClick:()=>re(e=>!e),onMouseDown:ve,onMouseUp:ve,disabled:T,className:["text-mp-on-surface-variant -me-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(a,{icon:ae?d:p,size:fe.icon})}),C?e(r,{size:Z,label:C,required:L,shrunk:be,multiline:ce}):null]}),e(s,{errorMessage:q,className:`mp-text-field__support mt-1 ${fe.padding}`})]})});

package/dist/internal/FieldOutline.d.ts

@@ -92,6 +92,13 @@ export declare function MPFieldLabel({ size, label, required, htmlFor, shrunk, m
 export interface MPFloatingLabel {
     /** Whether the label is up in the notch right now. */
     shrunk: boolean;
+    /**
+     * Whether a placeholder, or any hint drawn on the line the resting label
+     * sits on, may show. It follows `shrunk`, except that it waits
+     * `HINT_DELAY_MS` after the label starts to rise, so the two are never drawn
+     * over each other while the label is on its way up.
+     */
+    hinted: boolean;
     /**
      * Spread on the element the control sits inside — the `Field.Root`, or the
      * shell `<div>` under it. Anything focusable within it counts as the field

package/dist/internal/FieldOutline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,Fragment as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";import{VISUALLY_HIDDEN as i}from"./visually-hidden.js";const s={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},d={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function l(o,a){return e(t,{children:[o,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:e=!1,notched:o=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].filter(Boolean).join(" "),children:t?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0 whitespace-nowrap","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",o?"max-w-[calc(100%-1rem+2px)] px-1":"max-w-0 px-0"].join(" "),children:l(t,e)}):null})}export function MPFieldLabel({size:o,label:p,required:u=!1,htmlFor:m,shrunk:c=!0,multiline:x=!1,requiredLabel:f}){return e(a.Label,{...void 0===m?null:{htmlFor:m},"data-mp-shrunk":c?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","pointer-events-none absolute -translate-y-1/2 px-1 leading-none",s[o],c?"text-mp-body-small top-0 max-w-[calc(100%-2rem)] truncate":[n[o],"max-w-[calc(100%-2rem)] truncate",x?d[o]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:[l(p,u),u&&f?e(t,{children:[" ",r("span",{className:i,children:f})]}):null]})}export function useFloatingLabel({floating:r,filled:t,pinned:e=!1}){const[a,n]=o.useState(!1);return{shrunk:!r||t||a||e,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}
+import{jsx as r,Fragment as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";import{VISUALLY_HIDDEN as i}from"./visually-hidden.js";const s={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},d={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function l(o,a){return e(t,{children:[o,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:e=!1,notched:o=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].filter(Boolean).join(" "),children:t?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0 whitespace-nowrap","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",o?"max-w-[calc(100%-1rem+2px)] px-1":"max-w-0 px-0"].join(" "),children:l(t,e)}):null})}export function MPFieldLabel({size:o,label:p,required:u=!1,htmlFor:m,shrunk:c=!0,multiline:x=!1,requiredLabel:f}){return e(a.Label,{...void 0===m?null:{htmlFor:m},"data-mp-shrunk":c?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","pointer-events-none absolute -translate-y-1/2 px-1 leading-none",s[o],c?"text-mp-body-small top-0 max-w-[calc(100%-2rem)] truncate":[n[o],"max-w-[calc(100%-2rem)] truncate",x?d[o]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:[l(p,u),u&&f?e(t,{children:[" ",r("span",{className:i,children:f})]}):null]})}export function useFloatingLabel({floating:r,filled:t,pinned:e=!1}){const[a,n]=o.useState(!1),i=!r||t||a||e,[s,d]=o.useState(i);return o.useEffect(()=>{if(!i)return void d(!1);if(s)return;const r=window.setTimeout(()=>d(!0),100);return()=>window.clearTimeout(r)},[i,s]),{shrunk:i,hinted:i&&s,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}

package/dist/internal/Picker.d.ts

@@ -65,6 +65,7 @@ export interface MPPickerShellProps extends MPStyleProps, MPControlEventProps<HT
      * where a resting label would — so in practice this only takes effect on a
      * picker asked for without one, `startIcon={null}`. Two things cannot share a
      * spot, and of the two the glyph is what says the trigger opens a calendar.
+     * Left out, the nearest `MPConfigProvider`'s `floatingLabel` decides.
      * @default true
      */
     floatingLabel?: boolean;
@@ -161,7 +162,7 @@ interface InternalShellProps extends MPPickerShellProps {
  * treatment, and the popup's `surface-container` at elevation 2 — which is the
  * same floating sheet a menu and a select's list are drawn on.
  */
-export declare function MPPickerShell({ slug, size, color, fullWidth, label, floatingLabel, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, formValue, name, locale, children, triggerRef }: InternalShellProps): React.JSX.Element;
+export declare function MPPickerShell({ slug, size, color, fullWidth, label, floatingLabel: floatingLabelProp, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, formValue, name, locale, children, triggerRef }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/Picker.js

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

package/dist/internal/config.d.ts

@@ -1,10 +1,12 @@
 /**
  * The prop defaults an application can move for the whole page.
  *
- * `size`, `color` and `density` are the only axes where every component that has
- * them starts from the *same* answer — `md`, `primary` and `0` — which is what
- * makes a single app-wide default meaningful for them and meaningless for
- * anything else.
+ * `size`, `color` and `density` are axes where every component that has them
+ * starts from the *same* answer — `md`, `primary` and `0` — which is what makes a
+ * single app-wide default meaningful for them. `floatingLabel` is the same kind:
+ * every field starts at `true`. `weekStartsOn` starts from the locale on every
+ * calendar, and a provider's value replaces that question rather than one
+ * component's answer.
  * A `variant` default is per component by design (`MPAccordion` is `outlined`,
  * `MPAlert` is `tonal`, `MPBadge` is `filled`), so one global value would be
  * overwriting six considered decisions with one arbitrary one.
@@ -27,7 +29,8 @@
  * has to reach every call site is exactly what context is for.
  */
 import * as React from 'react';
-import type { MPColor, MPDensity, MPSize, MPWindowClass } from '../types.js';
+import type { MPPartialMessages } from './i18n.js';
+import type { MPColor, MPDensity, MPSize, MPWeekday, MPWindowClass } from '../types.js';
 /** What an `MPConfigProvider` can set. Anything unset is inherited, then default. */
 export interface MPConfigValue {
     size?: MPSize;
@@ -43,6 +46,23 @@ export interface MPConfigValue {
     breakpoints?: Partial<Record<MPWindowClass, number>>;
     /** Whether a field keeps a line under itself for a message it has not got yet. */
     reserveSupportingText?: boolean;
+    /** Whether a field's label rests on its line until there is something in it. */
+    floatingLabel?: boolean;
+    /** Which day the calendars' weeks start on, when the locale should not decide. */
+    weekStartsOn?: MPWeekday;
+    /**
+     * The words the library says, by namespace, over whatever the locale's table
+     * says. Merged a word at a time with the providers above, so a nested provider
+     * that renames one button keeps every other word the application chose.
+     */
+    labels?: MPPartialMessages;
+    /**
+     * The direction a provider was **told**, as opposed to the one read off the
+     * document. Kept so that a provider nested inside an explicit `dir="ltr"`
+     * island keeps running left to right instead of asking a right-to-left
+     * document and getting the page's answer rather than the island's.
+     */
+    dir?: 'ltr' | 'rtl';
 }
 export declare const MPConfigContext: React.Context<MPConfigValue>;
 /** The configuration in force at this point in the tree. */
@@ -62,3 +82,17 @@ export declare function useMPColor(color: MPColor | undefined): MPColor;
  * its lists and leaves its buttons at the height they have to be.
  */
 export declare function useMPDensity(density: MPDensity | undefined): MPDensity;
+/**
+ * Whether a field's label floats, which is a decision about the product's forms
+ * rather than about any one field: a product whose labels always sit in the
+ * notch wants all of them there.
+ */
+export declare function useMPFloatingLabel(floatingLabel: boolean | undefined): boolean;
+/**
+ * The day a calendar's week starts on, or `undefined` for "ask the locale".
+ *
+ * It stops short of the locale on purpose. The locale's answer is in
+ * `internal/date.ts`, and importing that here would put the date code into the
+ * module every sized component already imports.
+ */
+export declare function useMPWeekStart(weekStartsOn: MPWeekday | undefined): MPWeekday | undefined;

package/dist/internal/config.js

@@ -1,2 +1,2 @@
 "use client";
-import*as t from"react";const e=Object.freeze({});export const MPConfigContext=/*@__PURE__*/t.createContext(e);export function useMPConfig(){return t.useContext(MPConfigContext)}export function useMPSize(e){const o=t.useContext(MPConfigContext);return e??o.size??"md"}export function useMPColor(e){const o=t.useContext(MPConfigContext);return e??o.color??"primary"}export function useMPDensity(e){const o=t.useContext(MPConfigContext);return e??o.density??0}
+import*as t from"react";const e=Object.freeze({});export const MPConfigContext=/*@__PURE__*/t.createContext(e);export function useMPConfig(){return t.useContext(MPConfigContext)}export function useMPSize(e){const n=t.useContext(MPConfigContext);return e??n.size??"md"}export function useMPColor(e){const n=t.useContext(MPConfigContext);return e??n.color??"primary"}export function useMPDensity(e){const n=t.useContext(MPConfigContext);return e??n.density??0}export function useMPFloatingLabel(e){const n=t.useContext(MPConfigContext);return e??n.floatingLabel??!0}export function useMPWeekStart(e){const n=t.useContext(MPConfigContext);return e??n.weekStartsOn}

package/dist/internal/direction.d.ts

@@ -0,0 +1,9 @@
+/** The two ways a document can run. */
+export type MPDirection = 'ltr' | 'rtl';
+/**
+ * The document's direction, re-rendering when it turns over.
+ *
+ * `active: false` answers `ltr` without reading the document or observing it,
+ * for a provider that was told its direction or sits under one that was.
+ */
+export declare function useDocumentDirection(active: boolean): MPDirection;

package/dist/internal/direction.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";function e(){return"rtl"===getComputedStyle(document.documentElement).direction?"rtl":"ltr"}let n=null,r=null;const u=new Set;function o(){return null===n&&(n=e()),n}function l(){return"ltr"}function c(t){return u.add(t),r||(r=new MutationObserver(()=>{const t=e();t!==n&&(n=t,u.forEach(t=>t()))}),r.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class","style"]})),()=>{u.delete(t),0===u.size&&(r?.disconnect(),r=null,n=null)}}function i(){return()=>{}}export function useDocumentDirection(e){return t.useSyncExternalStore(e?c:i,e?o:l,l)}

package/dist/internal/locale.d.ts

@@ -40,13 +40,30 @@ import { type MPMessages, type MPNamespace } from './i18n.js';
 export declare const MPLocaleContext: React.Context<string | undefined>;
 /** The locale in force here: the prop if there is one, otherwise the provider's. */
 export declare function useMPLocale(locale?: string): string | undefined;
+/**
+ * `serverLocale` for the server render and the hydration, then `undefined` — the
+ * platform's own — once the page has hydrated.
+ *
+ * `useSyncExternalStore` because it is the one API with a server snapshot, and
+ * React reads that snapshot on the server and again in the browser while it
+ * hydrates. So both renders format in `serverLocale`, and the render after
+ * hydration formats in the reader's. A component mounted later, on the client
+ * alone, reads the reader's from the start.
+ *
+ * Shared by `MPLocaleProvider` and `MPConfigProvider`, which take the same
+ * `serverLocale` so that an application needs only one of them.
+ */
+export declare function useServerLocale(serverLocale: string | undefined): string | undefined;
 /**
  * A namespace's strings with a caller's overrides on top.
  *
- * The overrides win over the translation, which wins over English. That order is
- * what makes an unsupported language a partial answer rather than a dead end: a
- * caller supplies the handful of words they care about and everything else is
- * still translated, or still English, rather than blank.
+ * The overrides win over the `labels` of the nearest `MPConfigProvider`, which
+ * win over the translation, which wins over English. That order is what makes an
+ * unsupported language a partial answer rather than a dead end: a caller
+ * supplies the handful of words they care about and everything else is still
+ * translated, or still English, rather than blank. The provider is the same
+ * answer for a whole application at once, and the prop is still the last word
+ * for one component.
  *
  * The namespace is passed as the object from `internal/messages/`, not as its
  * name: it carries English with it, which is what lets a component that says one