material-plus-ui 1.12.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/menu/MPMenu.d.ts

@@ -121,6 +121,10 @@ export interface MPMenuItemProps {
     /**
      * The keystroke that does the same thing, set at the end of the row and muted.
      * Text only — the row does not bind it, the application does.
+     *
+     * A string is written the way [MPShortcut](../display/shortcut) writes keys, so
+     * `'Mod+N'` reads `⌘N` on a Mac and `Ctrl+N` everywhere else, and a string with
+     * no key name in it, such as `'⌘C'`, is drawn as it is.
      */
     shortcut?: React.ReactNode;
     /** A second line under the label, one step down the type scale and muted. */

package/dist/components/menu/MPMenu.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as s,ChevronRightIcon as o}from"../../constants/icons.js";import{linkRel as i}from"../../internal/link.js";import{MPMenuContext as c}from"../../internal/menu.js";import{accentSlots as d}from"../../internal/accent.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as p,hasContent as h}from"../../internal/scale.js";import{DOT_MOTION as f,MARK_MOTION as x}from"../../internal/mark.js";import{FADE as b,PORTAL_LAYER as g}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",b].join(" "),C={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},k={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},j={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},M={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function O(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",C[e],k[e],j[e],M[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function P(){return e(m,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const I="relative flex shrink-0 items-center justify-center";function $({children:t,description:a}){return h(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function _({shortcut:n}){return h(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${p}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,render:s,target:o,rel:d,startIcon:m,endIcon:u,shortcut:p,description:f,color:x,closeOnClick:b=!0,disabled:g=!1,label:v,children:N,className:y,style:C}){const{size:k}=t.useContext(c),j=n(t.Fragment,{children:[e(P,{}),h(m)?e("span",{className:`${I} text-mp-on-surface-variant`,children:m}):null,e($,{description:f,children:N}),h(u)?e("span",{className:`${I} text-mp-on-surface-variant`,children:u}):null,e(_,{shortcut:p})]}),M=x?{"--_mp-accent":`var(--_mp-color-${x})`}:void 0,z=M||C?{...M,...C}:void 0;return void 0===r||g?e(a.Item,{disabled:g,label:v,closeOnClick:b,onClick:l,className:O(k,Boolean(x),y),style:z,children:j}):e(a.LinkItem,{href:r,target:o,rel:i(o,d),render:s,label:v,closeOnClick:b,onClick:l,className:O(k,Boolean(x),y),style:z,children:j})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:d,shortcut:m,description:p,color:f,closeOnClick:b=!1,disabled:g=!1,label:v,children:N,className:y,style:C}){const{size:k}=t.useContext(c),j=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:g,label:v,closeOnClick:b,className:O(k,Boolean(f),y),style:j||C?{...j,...C}:void 0,children:[e(P,{}),e("span",{className:`${I} text-(--_mp-accent)`,style:{width:u[k]},children:e(a.CheckboxItemIndicator,{className:`mp-menu__mark flex items-center justify-center ${x}`,children:e(r,{icon:s,size:u[k]})})}),e($,{description:p,children:N}),h(d)?e("span",{className:`${I} text-mp-on-surface-variant`,children:d}):null,e(_,{shortcut:m})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o,style:i}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,style:i,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:d=!1,disabled:m=!1,label:p,children:x,className:b,style:g}){const{size:v}=t.useContext(c),N=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:d,className:O(v,Boolean(i),b),style:N||g?{...N,...g}:void 0,children:[e(P,{}),e("span",{className:`${I} text-(--_mp-accent)`,style:{width:u[v]},children:e(a.RadioItemIndicator,{className:`mp-menu__dot flex items-center justify-center ${f}`,children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e($,{description:o,children:x}),h(r)?e("span",{className:`${I} text-mp-on-surface-variant`,children:r}):null,e(_,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s,style:o}){const{size:i}=t.useContext(c);return n(a.Group,{className:s,style:o,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${k[i]} ${p}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:s,disabled:i=!1,side:m="right",sideOffset:p=0,children:f,className:x,style:b}){const{size:v,color:N}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:O(v,!1),children:[e(P,{}),h(s)?e("span",{className:`${I} text-mp-on-surface-variant`,children:s}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${I} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:g,side:m,sideOffset:p,align:"start",children:e(a.Popup,{className:[y,x??""].filter(Boolean).join(" "),style:{...d(N),...b},children:f})})})]})}export function MPMenu({size:l,color:r,trigger:s,open:o,defaultOpen:i,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:x=!1,loopFocus:b=!0,nativeButton:C=!0,disabled:k=!1,className:j,style:M,children:O}){const P=N(l),I=v(r),$=t.useMemo(()=>({size:P,color:I}),[P,I]);return e(c.Provider,{value:$,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>m?.(e),modal:f,loopFocus:b,disabled:k,children:[s?e(a.Trigger,{render:s,openOnHover:x,nativeButton:C,disabled:k}):null,e(a.Portal,{children:e(a.Positioner,{className:g,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":P,className:[y,j??""].filter(Boolean).join(" "),style:{...d(I),...M},children:O})})})]})})}export function MPContextMenu({size:a,color:r,content:s,children:o,open:i,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:x}){const b=N(a),C=v(r),k=t.useMemo(()=>({size:b,color:C}),[b,C]);return e(c.Provider,{value:k,children:n(l.Root,{open:i,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:o}),e(l.Portal,{children:e(l.Positioner,{className:g,children:e(l.Popup,{"data-mp-size":b,className:[y,f??""].filter(Boolean).join(" "),style:{...d(C),...x},children:s})})})]})})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{shortcutText as s}from"../shortcut/MPShortcut.js";import{CheckIcon as o,ChevronRightIcon as i}from"../../constants/icons.js";import{linkRel as c}from"../../internal/link.js";import{MPMenuContext as d}from"../../internal/menu.js";import{accentSlots as m}from"../../internal/accent.js";import{MPStateLayer as u}from"../../internal/StateLayer.js";import{CONTROL_ICON as p,META_TEXT as h,hasContent as f}from"../../internal/scale.js";import{DOT_MOTION as x,MARK_MOTION as b}from"../../internal/mark.js";import{FADE as g,PORTAL_LAYER as v}from"../../internal/surface.js";import{useMPColor as N,useMPSize as y}from"../../internal/config.js";import{useDetectedOS as C}from"../../internal/keys.js";import{VISUALLY_HIDDEN as k}from"../../internal/visually-hidden.js";const j=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",g].join(" "),M={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},P={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},O={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},I={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function $(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",M[e],P[e],O[e],I[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function _(){return e(u,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const z="relative flex shrink-0 items-center justify-center";function w({children:t,description:a}){return f(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${h}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function B({shortcut:n}){return f(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${h}`,children:"string"==typeof n?e(R,{keys:n}):n}):null}function R({keys:t}){const{shown:a,spoken:l}=s(t,C());return a===l?e("span",{dir:"ltr",children:a}):n("span",{dir:"ltr",children:[e("span",{"aria-hidden":"true",children:a}),e("span",{className:k,children:l})]})}export function MPMenuItem({onClick:l,href:r,render:s,target:o,rel:i,startIcon:m,endIcon:u,shortcut:p,description:h,color:x,closeOnClick:b=!0,disabled:g=!1,label:v,children:N,className:y,style:C}){const{size:k}=t.useContext(d),j=n(t.Fragment,{children:[e(_,{}),f(m)?e("span",{className:`${z} text-mp-on-surface-variant`,children:m}):null,e(w,{description:h,children:N}),f(u)?e("span",{className:`${z} text-mp-on-surface-variant`,children:u}):null,e(B,{shortcut:p})]}),M=x?{"--_mp-accent":`var(--_mp-color-${x})`}:void 0,P=M||C?{...M,...C}:void 0;return void 0===r||g?e(a.Item,{disabled:g,label:v,closeOnClick:b,onClick:l,className:$(k,Boolean(x),y),style:P,children:j}):e(a.LinkItem,{href:r,target:o,rel:c(o,i),render:s,label:v,closeOnClick:b,onClick:l,className:$(k,Boolean(x),y),style:P,children:j})}export function MPMenuCheckboxItem({checked:l,defaultChecked:s,onCheckedChange:i,endIcon:c,shortcut:m,description:u,color:h,closeOnClick:x=!1,disabled:g=!1,label:v,children:N,className:y,style:C}){const{size:k}=t.useContext(d),j=h?{"--_mp-accent":`var(--_mp-color-${h})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:s,onCheckedChange:e=>i?.(e),disabled:g,label:v,closeOnClick:x,className:$(k,Boolean(h),y),style:j||C?{...j,...C}:void 0,children:[e(_,{}),e("span",{className:`${z} text-(--_mp-accent)`,style:{width:p[k]},children:e(a.CheckboxItemIndicator,{className:`mp-menu__mark flex items-center justify-center ${b}`,children:e(r,{icon:o,size:p[k]})})}),e(w,{description:u,children:N}),f(c)?e("span",{className:`${z} text-mp-on-surface-variant`,children:c}):null,e(B,{shortcut:m})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o,style:i}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,style:i,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:c=!1,disabled:m=!1,label:u,children:h,className:b,style:g}){const{size:v}=t.useContext(d),N=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:m,label:u,closeOnClick:c,className:$(v,Boolean(i),b),style:N||g?{...N,...g}:void 0,children:[e(_,{}),e("span",{className:`${z} text-(--_mp-accent)`,style:{width:p[v]},children:e(a.RadioItemIndicator,{className:`mp-menu__dot flex items-center justify-center ${x}`,children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(w,{description:o,children:h}),f(r)?e("span",{className:`${z} text-mp-on-surface-variant`,children:r}):null,e(B,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s,style:o}){const{size:i}=t.useContext(d);return n(a.Group,{className:s,style:o,children:[f(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${P[i]} ${h}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:s,disabled:o=!1,side:c="right",sideOffset:u=0,children:h,className:x,style:b}){const{size:g,color:N}=t.useContext(d);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:o,className:$(g,!1),children:[e(_,{}),f(s)?e("span",{className:`${z} text-mp-on-surface-variant`,children:s}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${z} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:i,size:p[g]})})]}),e(a.Portal,{children:e(a.Positioner,{className:v,side:c,sideOffset:u,align:"start",children:e(a.Popup,{className:[j,x??""].filter(Boolean).join(" "),style:{...m(N),...b},children:h})})})]})}export function MPMenu({size:l,color:r,trigger:s,open:o,defaultOpen:i,onOpenChange:c,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:x=!1,loopFocus:b=!0,nativeButton:g=!0,disabled:C=!1,className:k,style:M,children:P}){const O=y(l),I=N(r),$=t.useMemo(()=>({size:O,color:I}),[O,I]);return e(d.Provider,{value:$,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>c?.(e),modal:f,loopFocus:b,disabled:C,children:[s?e(a.Trigger,{render:s,openOnHover:x,nativeButton:g,disabled:C}):null,e(a.Portal,{children:e(a.Positioner,{className:v,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":O,className:[j,k??""].filter(Boolean).join(" "),style:{...m(I),...M},children:P})})})]})})}export function MPContextMenu({size:a,color:r,content:s,children:o,open:i,defaultOpen:c,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:x}){const b=y(a),g=N(r),C=t.useMemo(()=>({size:b,color:g}),[b,g]);return e(d.Provider,{value:C,children:n(l.Root,{open:i,defaultOpen:c,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:o}),e(l.Portal,{children:e(l.Positioner,{className:v,children:e(l.Popup,{"data-mp-size":b,className:[j,f??""].filter(Boolean).join(" "),style:{...m(g),...x},children:s})})})]})})}

package/dist/components/navigation-menu/MPNavigationMenu.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as d,CONTROL_ICON as p,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/a.createContext({size:"md",keepMounted:!1}),j=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),b={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/a.forwardRef(function({href:t,title:r,description:o,startIcon:s,target:d,rel:p,className:x,children:v,...N},j){const{size:b}=a.useContext(y);return n(i.Link,{ref:j,href:t,target:d,rel:l(d,p),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,v]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:v,render:N,startIcon:j,value:M,disabled:k=!1,columns:w=1,children:P,className:_,style:z}){const{size:C,keepMounted:I}=a.useContext(y),L=void 0!==g&&!h(P),V=Number.isFinite(w)?Math.max(1,Math.round(w)):1,$=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none border-0 font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",d[C],f[C],m[C],u[C],_??""].filter(Boolean).join(" ");return e(i.Item,{value:M,children:L?n(i.Link,{href:g,target:x,rel:l(x,v),render:N,className:$,style:z,children:[e(c,{}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s})]}):n(t,{children:[n(i.Trigger,{disabled:k,className:$,style:z,children:[k?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:p[C]})})]}),e(i.Content,{keepMounted:I,className:`mp-navigation-menu__panel grid gap-1 [&[hidden]]:hidden ${b[C]}`,style:V>1?{gridTemplateColumns:`repeat(${V}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/a.forwardRef(function({orientation:t="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:d,sideOffset:p=8,size:u,color:f,keepMounted:h=!1,className:g,style:b,children:M,...k},w){const P=N(u),_=v(f),z=a.useMemo(()=>({size:P,keepMounted:h}),[P,h]);return e(y.Provider,{value:z,children:n(i.Root,{ref:w,orientation:t,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:d,"data-mp-size":P,className:["mp-navigation-menu",g??""].filter(Boolean).join(" "),style:{...s(_),...b},...k,children:[e(i.List,{className:["m-0 flex list-none items-center p-0","vertical"===t?"flex-col items-stretch":"flex-row",m[P]].join(" "),children:M}),e(i.Portal,{keepMounted:h,children:e(i.Positioner,{className:x,sideOffset:p,collisionPadding:12,style:s(_),children:e(i.Popup,{className:j,children:e(i.Viewport,{})})})})]})})});
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_HEIGHT as m,CONTROL_ICON as p,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as v}from"../../internal/surface.js";import{useMPColor as x,useMPSize as y}from"../../internal/config.js";const N=/*@__PURE__*/a.createContext({size:"md",keepMounted:!1}),b=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),j={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/a.forwardRef(function({href:t,title:o,description:r,startIcon:s,target:m,rel:p,className:v,children:x,...y},b){const{size:j}=a.useContext(N);return n(i.Link,{ref:b,href:t,target:m,rel:l(m,p),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",d[j],u[j],v??""].filter(Boolean).join(" "),...y,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[j]}`,children:o}),h(r)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:r}):null,x]})]})});export function MPNavigationMenuItem({label:s,href:g,target:v,rel:x,render:y,startIcon:b,value:w,disabled:M=!1,columns:k=1,children:P,className:_,style:z}){const{size:C,keepMounted:I}=a.useContext(N),L=void 0!==g&&!h(P),V=Number.isFinite(k)?Math.max(1,Math.round(k)):1,$=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none border-0 font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",m[C],f[C],d[C],u[C],_??""].filter(Boolean).join(" ");return e(i.Item,{value:w,children:L?n(i.Link,{href:g,target:v,rel:l(v,x),render:y,className:$,style:z,children:[e(c,{}),h(b)?e("span",{className:"relative flex",children:b}):null,e("span",{className:"relative",children:s})]}):n(t,{children:[n(i.Trigger,{disabled:M,className:$,style:z,children:[M?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(b)?e("span",{className:"relative flex",children:b}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(o,{icon:r,size:p[C]})})]}),e(i.Content,{keepMounted:I,className:`mp-navigation-menu__panel grid gap-1 [&[hidden]]:hidden ${j[C]}`,style:V>1?{gridTemplateColumns:`repeat(${V}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/a.forwardRef(function({orientation:t="horizontal",value:o,defaultValue:r,onValueChange:l,delay:c,closeDelay:m,sideOffset:p=8,size:u,color:f,keepMounted:h=!1,className:g,style:j,children:w,...M},k){const P=y(u),_=x(f),z=a.useMemo(()=>({size:P,keepMounted:h}),[P,h]);return e(N.Provider,{value:z,children:n(i.Root,{ref:k,orientation:t,value:o,defaultValue:r,onValueChange:e=>l?.(e),delay:c,closeDelay:m,"data-mp-size":P,className:["mp-navigation-menu flow-root",g??""].filter(Boolean).join(" "),style:{...s(_),...j},...M,children:[e(i.List,{className:["flex list-none items-center","vertical"===t?"m-0 flex-col items-stretch p-0":"-m-1 flex-row overflow-x-auto overflow-y-hidden p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",d[P]].join(" "),children:w}),e(i.Portal,{keepMounted:h,children:e(i.Positioner,{className:v,sideOffset:p,collisionPadding:12,style:s(_),children:e(i.Popup,{className:b,children:e(i.Viewport,{})})})})]})})});

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/otp-field/MPOtpField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as s}from"../../internal/scale.js";import{useMPSize as m}from"../../internal/config.js";const u={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},c={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:f,fullWidth:h=!1,length:x=6,charset:g="numeric",mask:b=!1,groupSize:v,separator:y="–",value:j,defaultValue:w,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:C=!1,label:F,description:S,errorMessage:z,name:I,required:O=!1,disabled:R=!1,readOnly:$=!1,autoFocus:k=!1,className:q,style:T},A){const B=m(f),L=Math.min(12,Math.max(2,Math.round(x))),P=s(z),W=v&&v>0?Math.round(v):0,D=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",u[B],d[B],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-mp-primary focus:inset-ring focus:inset-ring-mp-primary focus:outline-none",R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":P?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":$?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:R,invalid:P,"data-mp-size":B,className:["mp-otp-field flex-col align-top",i[B],h?"flex w-full":"inline-flex w-fit",q??""].filter(Boolean).join(" "),style:T,children:[s(F)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[F,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:A,length:L,validationType:c[g],mask:b,name:I,required:O,disabled:R,readOnly:$,autoSubmit:C,value:j,defaultValue:w,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${p[B]}`,children:Array.from({length:L},(t,n)=>r(a.Fragment,{children:[W>0&&n>0&&n%W===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[B]}`,children:y}):null,e(o.Input,{className:D,autoFocus:k&&0===n})]},n))}),e(n,{description:S,errorMessage:z})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as n}from"@base-ui/react/otp-field";import{MPSupportingText as o}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale.js";import{useMPSize as s}from"../../internal/config.js";const u={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},c={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:f,fullWidth:h=!1,length:x=6,charset:g="numeric",mask:b=!1,groupSize:v,separator:y="–",value:w,defaultValue:j,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:C=!1,label:F,description:S,errorMessage:z,name:I,required:O=!1,disabled:R=!1,readOnly:$=!1,autoFocus:k=!1,className:q,style:T},A){const B=s(f),L=Math.min(12,Math.max(2,Math.round(x))),P=m(z),W=v&&v>0?Math.round(v):0,D=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",u[B],"min-w-0",d[B],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-mp-primary focus:inset-ring focus:inset-ring-mp-primary focus:outline-none",R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":P?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":$?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:R,invalid:P,"data-mp-size":B,className:["mp-otp-field flex-col align-top",i[B],h?"flex w-full":"inline-flex w-fit max-w-full",q??""].filter(Boolean).join(" "),style:T,children:[m(F)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[F,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n.Root,{ref:A,length:L,validationType:c[g],mask:b,name:I,required:O,disabled:R,readOnly:$,autoSubmit:C,value:w,defaultValue:j,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${p[B]}`,children:Array.from({length:L},(t,o)=>r(a.Fragment,{children:[W>0&&o>0&&o%W===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[B]}`,children:y}):null,e(n.Input,{className:D,autoFocus:k&&0===o})]},o))}),e(o,{description:S,errorMessage:z})]})});

package/dist/components/pagination/MPPagination.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{RenderedLink as r}from"../../internal/RenderedLink.js";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronLeftIcon as l,ChevronRightIcon as o,ChevronsLeftIcon as s,ChevronsRightIcon as m}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{fillMessage as p}from"../../internal/i18n.js";import{useMPLocale as u,useMPMessages as f}from"../../internal/locale.js";import{PAGINATION as d}from"../../internal/messages/pagination.js";import{MPStateLayer as h}from"../../internal/StateLayer.js";import{CONTROL_ICON as g,CONTROL_TEXT as x}from"../../internal/scale.js";import{VISUALLY_HIDDEN as b}from"../../internal/visually-hidden.js";import{useMPColor as j,useMPSize as v}from"../../internal/config.js";const y={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},M={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function w(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/a.forwardRef(function({count:N,page:P,defaultPage:k=1,onPageChange:C,siblingCount:S=1,boundaryCount:K=1,showEdges:_=!1,showArrows:z=!0,size:L,color:$,fullWidth:A=!1,disabled:R=!1,getPageHref:B,renderLink:D,locale:E,labels:F,className:H,style:I,...W},q){const G=v(L),J=j($),O=u(E),Q=f(d,O,F),[T,U]=a.useState(k),V=void 0!==P,X=Math.min(Math.max(P??T,1),Math.max(N,1));if(N<2)return null;const Y=function(e,n,t,a){const r=w(1,Math.min(a,e)),i=w(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),i.length>0?i[0]-2:e-1);return[...r,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...w(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...i]}(N,X,S,K),Z=X<=1,ee=X>=N,ne=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||B&&!C||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),N);n!==X&&(V||U(n),C?.(n))})(n))},te=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",y[G],x[G],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),ae=(a,i,l,o,s,m,c)=>e("li",{className:"flex",children:!B||l||o?t("button",{type:"button",disabled:l,"aria-label":s,"aria-current":o?"page":void 0,className:te(o,l),onClick:e=>ne(e,i),children:[l?null:e(h,{}),e("span",{className:"relative",children:m})]}):e(r,{render:D,props:{href:B(i),rel:c,"aria-label":s,className:te(!1,!1),onClick:e=>ne(e,i),children:t(n,{children:[e(h,{}),e("span",{className:"relative",children:m})]})}})},a),re=n=>e(i,{icon:n,size:g[G],className:"rtl:rotate-180"});return t("nav",{ref:q,"aria-label":Q.label,"data-mp-size":G,className:["mp-pagination flex",A?"w-full justify-center":"",H??""].filter(Boolean).join(" "),style:{...c(J),...I},...W,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${M[G]}`,children:[_?ae("first",1,R||Z,!1,Q.first,re(s)):null,z?ae("previous",X-1,R||Z,!1,Q.previous,re(l),"prev"):null,Y.map((n,t)=>"number"==typeof n?ae(`slot-${t}`,n,R,n===X,p(Q.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",y[G],x[G]].join(" "),children:"…"},`slot-${t}`)),z?ae("next",X+1,R||ee,!1,Q.next,re(o),"next"):null,_?ae("last",N,R||ee,!1,Q.last,re(m)):null]}),e("span",{className:b,"aria-live":"polite",children:p(Q.status,{page:String(X),total:String(N)})})]})});
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{RenderedLink as r}from"../../internal/RenderedLink.js";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronLeftIcon as l,ChevronRightIcon as o,ChevronsLeftIcon as s,ChevronsRightIcon as m}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{fillMessage as p}from"../../internal/i18n.js";import{useMPLocale as u,useMPMessages as f}from"../../internal/locale.js";import{PAGINATION as d}from"../../internal/messages/pagination.js";import{MPStateLayer as h}from"../../internal/StateLayer.js";import{CONTROL_ICON as g,CONTROL_TEXT as x}from"../../internal/scale.js";import{VISUALLY_HIDDEN as b}from"../../internal/visually-hidden.js";import{useMPColor as j,useMPSize as y}from"../../internal/config.js";const v={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},w={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function M(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/a.forwardRef(function({count:N,page:P,defaultPage:k=1,onPageChange:C,siblingCount:S=1,boundaryCount:K=1,showEdges:_=!1,showArrows:z=!0,size:L,color:$,fullWidth:A=!1,disabled:R=!1,getPageHref:B,renderLink:D,locale:E,labels:F,className:H,style:I,...W},q){const G=y(L),J=j($),O=u(E),Q=f(d,O,F),[T,U]=a.useState(k),V=void 0!==P,X=Math.min(Math.max(P??T,1),Math.max(N,1));if(N<2)return null;const Y=function(e,n,t,a){const r=M(1,Math.min(a,e)),i=M(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),i.length>0?i[0]-2:e-1);return[...r,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...M(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...i]}(N,X,S,K),Z=X<=1,ee=X>=N,ne=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||B&&!C||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),N);n!==X&&(V||U(n),C?.(n))})(n))},te=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",v[G],x[G],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),ae=(a,i,l,o,s,m,c)=>e("li",{className:"flex",children:!B||l||o?t("button",{type:"button",disabled:l,"aria-label":s,"aria-current":o?"page":void 0,className:te(o,l),onClick:e=>ne(e,i),children:[l?null:e(h,{}),e("span",{className:"relative",children:m})]}):e(r,{render:D,props:{href:B(i),rel:c,"aria-label":s,className:te(!1,!1),onClick:e=>ne(e,i),children:t(n,{children:[e(h,{}),e("span",{className:"relative",children:m})]})}})},a),re=n=>e(i,{icon:n,size:g[G],className:"rtl:rotate-180"});return t("nav",{ref:q,"aria-label":Q.label,"data-mp-size":G,className:["mp-pagination flex",A?"w-full justify-center":"",H??""].filter(Boolean).join(" "),style:{...c(J),...I},...W,children:[t("ul",{role:"list",className:`m-0 flex list-none flex-wrap items-center justify-center p-0 ${w[G]}`,children:[_?ae("first",1,R||Z,!1,Q.first,re(s)):null,z?ae("previous",X-1,R||Z,!1,Q.previous,re(l),"prev"):null,Y.map((n,t)=>"number"==typeof n?ae(`slot-${t}`,n,R,n===X,p(Q.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",v[G],x[G]].join(" "),children:"…"},`slot-${t}`)),z?ae("next",X+1,R||ee,!1,Q.next,re(o),"next"):null,_?ae("last",N,R||ee,!1,Q.last,re(m)):null]}),e("span",{className:b,"aria-live":"polite",children:p(Q.status,{page:String(X),total:String(N)})})]})});

package/dist/components/pill/MPPill.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";const x={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},w={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:y,description:j,details:_,expanded:k=!1,position:N="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(null);o.useEffect(()=>{const e=L.current;if(!e)return;const t=new ResizeObserver(()=>q(e.scrollHeight));return t.observe(e),q(e.scrollHeight),()=>t.disconnect()},[_]);const A=Boolean(B),D=u[F],G=t(n,{children:[m(g)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[F],height:l[F]},children:g}):null,m(y)||m(j)||m(P)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",h[F]].join(" "),children:[m(y)?e("span",{className:"max-w-full truncate",children:y}):null,m(j)?e("span",{className:`max-w-full truncate font-normal ${d} supports-[(not_(-webkit-appearance:-apple-pay-button))_or_(contain-intrinsic-size:1px)]:[color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:j}):null,P]}):null]});return t("div",{ref:E,"data-mp-size":F,"data-mp-variant":C,"data-mp-expanded":k||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",k?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[F],b[C],w[N][z],$??""].filter(Boolean).join(" "),style:{...i(R),...H},...S,children:[t("div",{className:["flex shrink-0 items-center py-1",x[F],a[F],A?"ps-0":D,m(v)?"pe-1":A?"pe-0":""].filter(Boolean).join(" "),children:[A?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent text-inherit [font:inherit]","rounded-[inherit]",a[F],D,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(_)?k:void 0,"aria-controls":m(_)?M:void 0,onClick:B,children:[e(s,{}),G]}):G,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(_)?e("div",{id:M,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:k?O??"auto":0},...r(!k),children:e("div",{ref:L,className:`${D} pb-2 whitespace-normal ${p[F]}`,children:_})}):null]})});
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as a}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";const x={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},w={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:y,description:j,details:_,expanded:k=!1,position:N="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(null);o.useEffect(()=>{const e=L.current;if(!e)return;const t=new ResizeObserver(()=>q(e.scrollHeight));return t.observe(e),q(e.scrollHeight),()=>t.disconnect()},[_]);const A=Boolean(B),D=u[F],G=t(n,{children:[m(g)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&>*]:max-h-full [&>*]:max-w-full [&_svg]:max-h-full [&_svg]:max-w-full [&_img]:size-full [&_img]:object-cover",style:{width:l[F],height:l[F]},children:g}):null,m(y)||m(j)||m(P)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",h[F]].join(" "),children:[m(y)?e("span",{className:"max-w-full truncate",children:y}):null,m(j)?e("span",{className:`max-w-full truncate font-normal ${d} supports-[(not_(-webkit-appearance:-apple-pay-button))_or_(contain-intrinsic-size:1px)]:[color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:j}):null,P]}):null]});return t("div",{ref:E,"data-mp-size":F,"data-mp-variant":C,"data-mp-expanded":k||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",k?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[F],b[C],w[N][z],$??""].filter(Boolean).join(" "),style:{...i(R),...H},...S,children:[t("div",{className:["flex shrink-0 items-center py-1",x[F],s[F],A?"ps-0":D,m(v)?"pe-1":A?"pe-0":""].filter(Boolean).join(" "),children:[A?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent text-inherit [font:inherit]","rounded-[inherit]",s[F],D,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(_)?k:void 0,"aria-controls":m(_)?M:void 0,onClick:B,children:[e(a,{}),G]}):G,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(_)?e("div",{id:M,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:k?O??"auto":0},...r(!k),children:e("div",{ref:L,className:`${D} pb-2 whitespace-normal ${p[F]}`,children:_})}):null]})});

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/shortcut/MPShortcut.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MPResolvedOS } from '../../internal/keys.js';
 import type { MPColor, MPSize, MPVariant } from '../../types.js';
 /**
  * Which keyboard the shortcut is being read on.
@@ -9,6 +10,8 @@ import type { MPColor, MPSize, MPVariant } from '../../types.js';
  * build, a table comparing the two.
  */
 export type MPShortcutOS = 'auto' | 'mac' | 'windows' | 'linux';
+/** The three real platforms, once `auto` has been resolved. */
+type ResolvedOS = MPResolvedOS;
 export interface MPShortcutProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
     /**
      * The keys, innermost punctuation and all.
@@ -43,6 +46,16 @@ export interface MPShortcutProps extends Omit<React.ComponentPropsWithoutRef<'sp
      */
     color?: MPColor;
 }
+/**
+ * A shortcut as one line of text rather than a row of key caps: what a menu row
+ * sets at its end, where MD3 has trailing text and no caps. The keys are named
+ * as a cap names them on [os], and joined the way that platform joins them.
+ * `shown` is drawn, and `spoken` is what a screen reader reads in its place.
+ */
+export declare function shortcutText(keys: string | string[], os: ResolvedOS): {
+    shown: string;
+    spoken: string;
+};
 /**
  * A keyboard key, or a combination of them.
  *
@@ -65,3 +78,4 @@ export interface MPShortcutProps extends Omit<React.ComponentPropsWithoutRef<'sp
  * — the semantics are carried by the keys themselves either way.
  */
 export declare const MPShortcut: React.ForwardRefExoticComponent<MPShortcutProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/shortcut/MPShortcut.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as n,jsxs as a}from"react/jsx-runtime";import*as m from"react";import{accentSlots as t}from"../../internal/accent.js";import{tokenizeShortcut as o,useDetectedOS as r}from"../../internal/keys.js";import{VISUALLY_HIDDEN as l}from"../../internal/visually-hidden.js";import{useMPSize as s}from"../../internal/config.js";const i=e=>({symbol:e,name:e}),c={mod:{mac:{symbol:"⌘",name:"Command"},windows:i("Ctrl"),linux:i("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:i("Win"),linux:i("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:i("Ctrl"),linux:i("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:i("Alt"),linux:i("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:i("Shift"),linux:i("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:i("Enter"),linux:i("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:i("Tab"),linux:i("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:i("Esc"),linux:i("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:i("Backspace"),linux:i("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:i("Del"),linux:i("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:i("Caps Lock"),linux:i("Caps Lock")}},d={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},p={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};const u={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},w={xs:"min-w-5",sm:"min-w-6",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"},x={xs:"text-mp-label-small",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},b={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},f={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline-variant text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-mp-surface-container"};export const MPShortcut=/*@__PURE__*/m.forwardRef(function({variant:h="outlined",size:g,color:k="secondary",keys:C,os:j="auto",separator:v,className:A,style:E,...N},S){const _=s(g),B=r(),L="auto"===j?B:j,D=o(C).map(e=>function(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),m=d[a]??a,t=p[m];if(t)return t;const o=c[m];return o?o[n]:i(1===e.length?e.toUpperCase():e)}(e,L)),T=void 0===v?"mac"===L?null:"+":v,z=/*@__PURE__*/["inline-flex shrink-0 items-center justify-center","font-mono leading-none whitespace-nowrap tabular-nums",u[_],w[_],x[_],b[_],f[_],y[h]].join(" ");return e("span",{ref:S,"data-mp-size":_,"data-mp-variant":h,className:["mp-shortcut inline-flex max-w-full items-center gap-1 align-middle",A??""].filter(Boolean).join(" "),style:{...t(k),...E},...N,children:D.map((t,o)=>a(m.Fragment,{children:[o>0&&null!==T?e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant",children:T}):null,e("kbd",{className:z,children:t.symbol===t.name?t.symbol:a(n,{children:[e("span",{"aria-hidden":"true",children:t.symbol}),e("span",{className:l,children:t.name})]})})]},o))})});
+import{jsx as e,Fragment as n,jsxs as a}from"react/jsx-runtime";import*as m from"react";import{accentSlots as t}from"../../internal/accent.js";import{tokenizeShortcut as o,useDetectedOS as r}from"../../internal/keys.js";import{VISUALLY_HIDDEN as l}from"../../internal/visually-hidden.js";import{useMPSize as s}from"../../internal/config.js";const i=e=>({symbol:e,name:e}),c={mod:{mac:{symbol:"⌘",name:"Command"},windows:i("Ctrl"),linux:i("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:i("Win"),linux:i("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:i("Ctrl"),linux:i("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:i("Alt"),linux:i("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:i("Shift"),linux:i("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:i("Enter"),linux:i("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:i("Tab"),linux:i("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:i("Esc"),linux:i("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:i("Backspace"),linux:i("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:i("Del"),linux:i("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:i("Caps Lock"),linux:i("Caps Lock")}},p={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},d={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function u(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),m=p[a]??a,t=d[m];if(t)return t;const o=c[m];return o?o[n]:i(1===e.length?e.toUpperCase():e)}export function shortcutText(e,n){const a=o(e).map(e=>u(e,n));return{shown:a.map(e=>e.symbol).join("mac"===n?"":"+"),spoken:a.map(e=>e.name).join(" ")}}const w={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},x={xs:"min-w-5",sm:"min-w-6",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"},b={xs:"text-mp-label-small",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},f={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},h={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline-variant text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-mp-surface-container"};export const MPShortcut=/*@__PURE__*/m.forwardRef(function({variant:i="outlined",size:c,color:p="secondary",keys:d,os:g="auto",separator:k,className:j,style:C,...v},A){const E=s(c),N=r(),S="auto"===g?N:g,_=o(d).map(e=>u(e,S)),B=void 0===k?"mac"===S?null:"+":k,L=/*@__PURE__*/["inline-flex shrink-0 items-center justify-center","font-mono leading-none whitespace-nowrap tabular-nums",w[E],x[E],b[E],f[E],h[E],y[i]].join(" ");return e("span",{ref:A,dir:"ltr","data-mp-size":E,"data-mp-variant":i,className:["mp-shortcut inline-flex max-w-full items-center gap-1 align-middle",j??""].filter(Boolean).join(" "),style:{...t(p),...C},...v,children:_.map((t,o)=>a(m.Fragment,{children:[o>0&&null!==B?e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant",children:B}):null,e("kbd",{className:L,children:t.symbol===t.name?t.symbol:a(n,{children:[e("span",{"aria-hidden":"true",children:t.symbol}),e("span",{className:l,children:t.name})]})})]},o))})});