material-plus-ui 1.4.0 → 1.6.0

package/dist/components/drawer/MPDrawer.js

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

package/dist/components/empty/MPEmpty.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as s from"react";import{useRender as n}from"@base-ui/react/use-render";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{EMPTY as i}from"../../internal/messages/empty.js";import{hasContent as o,PROSE_TEXT as m,SHEET_GAP as c,SHEET_PAD_X as d,SHEET_TITLE as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";const x={xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},u={xs:"text-[1.5rem]",sm:"text-[1.75rem]",md:"text-[2.25rem]",lg:"text-[2.75rem]",xl:"text-[3.25rem]"};function h(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const MPEmpty=/*@__PURE__*/s.forwardRef(function({variant:s="text",size:v="md",title:j,icon:y,action:N,locale:g,render:k,className:w,style:z,children:$,...L},B){const C=a(g),M=l(i,C),W=void 0===j?M.title:j,b=void 0===y?e(h,{}):y,E=o(W),F=["mp-empty flex w-full flex-col items-center justify-center text-center",d[v],x[v],"text"===s?"":"rounded-mp-md",c[v],f[s],"text-mp-on-surface",w??""].filter(Boolean).join(" ");return n({render:k,ref:B,props:{role:"status","data-mp-size":v,"data-mp-variant":s,className:F,style:z,children:t(r,{children:[o(b)?e("span",{className:`text-mp-on-surface-variant flex items-center ${u[v]} [&>svg]:size-[1em]`,children:b}):null,E||o($)?t("div",{className:`flex max-w-prose flex-col items-center ${c[v]}`,children:[E?e("div",{className:p[v],children:W}):null,o($)?e("div",{className:`${m[v]} ${E?"text-mp-on-surface-variant":""}`,children:$}):null]}):null,o(N)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:N}):null]}),...L}})});
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as s}from"@base-ui/react/use-render";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{EMPTY as i}from"../../internal/messages/empty.js";import{hasContent as o,PROSE_TEXT as m,SHEET_GAP as c,SHEET_PAD_X as d,SHEET_TITLE as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{useMPSize as x}from"../../internal/config.js";const u={xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},h={xs:"text-[1.5rem]",sm:"text-[1.75rem]",md:"text-[2.25rem]",lg:"text-[2.75rem]",xl:"text-[3.25rem]"};function v(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const MPEmpty=/*@__PURE__*/n.forwardRef(function({variant:n="text",size:j,title:y,icon:g,action:N,locale:k,render:w,className:z,style:$,children:L,...B},C){const M=x(j),W=a(k),b=l(i,W),E=void 0===y?b.title:y,F=void 0===g?e(v,{}):g,P=o(E),R=["mp-empty flex w-full flex-col items-center justify-center text-center",d[M],u[M],"text"===n?"":"rounded-mp-md",c[M],f[n],"text-mp-on-surface",z??""].filter(Boolean).join(" ");return s({render:w,ref:C,props:{role:"status","data-mp-size":M,"data-mp-variant":n,className:R,style:$,children:t(r,{children:[o(F)?e("span",{className:`text-mp-on-surface-variant flex items-center ${h[M]} [&>svg]:size-[1em]`,children:F}):null,P||o(L)?t("div",{className:`flex max-w-prose flex-col items-center ${c[M]}`,children:[P?e("div",{className:p[M],children:E}):null,o(L)?e("div",{className:`${m[M]} ${P?"text-mp-on-surface-variant":""}`,children:L}):null]}):null,o(N)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:N}):null]}),...B}})});

package/dist/components/file-picker/MPFilePicker.d.ts

@@ -83,6 +83,12 @@ export interface MPFilePickerProps extends MPStyleProps {
     name?: string;
     /** The id put on the browse button. */
     id?: string;
+    /**
+     * Added to the picker's outermost element — the box around the label, the drop
+     * zone and the list of files that have been chosen.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A box you drop files on, or click to open the file dialog.

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

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

package/dist/components/floating-action-button/MPFloatingActionButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"@base-ui/react/button";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as i}from"../../internal/length.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{hasContent as r}from"../../internal/scale.js";const m={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},l={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},p={xs:"min-w-10 gap-0 px-0",sm:"min-w-12 gap-0 px-0",md:"min-w-14 gap-0 px-0",lg:"min-w-18 gap-0 px-0",xl:"min-w-24 gap-0 px-0"},d={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},f={xs:24,sm:24,md:24,lg:30,xl:36},c={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},x={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},u={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},b={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=/*@__PURE__*/a.forwardRef(function({icon:a,label:g,extended:h=!1,variant:w="tonal",color:y="primary",size:_="md",position:j="fixed",corner:v="bottom-end",offset:k=16,disabled:z=!1,type:N="button",className:B,style:$,...A},F){return e(n,{ref:F,type:N,disabled:z,"aria-label":g,"data-mp-size":_,"data-mp-variant":w,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color,min-width,padding,gap]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",d[_],l[_],c[_],h?x[_]:p[_],z?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${m[w]} shadow-mp-3`,"static"===j?"relative":`${u[j]} ${b[v]}`,B??""].filter(Boolean).join(" "),style:{...o(y),"--_mp-fab-offset":i(k),...$},...A,children:[z?null:t(s,{}),r(a)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:f[_],height:f[_]},children:a}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",h?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:g})})]})});
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as n from"react";import{Button as o}from"@base-ui/react/button";import{accentSlots as a}from"../../internal/accent.js";import{cssLength as i}from"../../internal/length.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{hasContent as r}from"../../internal/scale.js";import{useMPColor as m,useMPSize as l}from"../../internal/config.js";const p={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},d={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},f={xs:"min-w-10 gap-0 px-0",sm:"min-w-12 gap-0 px-0",md:"min-w-14 gap-0 px-0",lg:"min-w-18 gap-0 px-0",xl:"min-w-24 gap-0 px-0"},c={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},x={xs:24,sm:24,md:24,lg:30,xl:36},u={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},g={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},b={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},h={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=/*@__PURE__*/n.forwardRef(function({icon:n,label:w,extended:_=!1,variant:y="tonal",color:j,size:v,position:k="fixed",corner:z="bottom-end",offset:N=16,disabled:B=!1,type:$="button",className:A,style:F,...L},M){const P=m(j),R=l(v);return e(o,{ref:M,type:$,disabled:B,"aria-label":w,"data-mp-size":R,"data-mp-variant":y,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color,min-width,padding,gap]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",c[R],d[R],u[R],_?g[R]:f[R],B?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${p[y]} shadow-mp-3`,"static"===k?"relative":`${b[k]} ${h[z]}`,A??""].filter(Boolean).join(" "),style:{...a(P),"--_mp-fab-offset":i(N),...F},...L,children:[B?null:t(s,{}),r(n)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:x[R],height:x[R]},children:n}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",_?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:w})})]})});

package/dist/components/footer/MPFooter.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as o}from"@base-ui/react/use-render";import{BAR_SURFACE as r,MPPageLayoutContext as a}from"../../internal/page-layout.js";import{MEASURE as i,SHEET_PAD_X as n,SHEET_PAD_Y as s}from"../../internal/scale.js";const l={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPFooter=/*@__PURE__*/t.forwardRef(function({position:m="static",variant:c="outlined",size:d="md",maxWidth:f="none",padded:u=!0,label:p,render:b,className:x,children:j,...z},h){const{register:v}=t.useContext(a),w=t.useCallback(e=>{v("footer",e),"function"==typeof h?h(e):h&&(h.current=e)},[v,h]);return o({render:b??e("footer",{}),ref:w,props:{"aria-label":p,"data-mp-size":d,"data-mp-variant":c,className:["mp-footer text-mp-on-surface box-border w-full min-w-0",r[c],"outlined"===c?"border-mp-outline-variant border-t":"",l[m],x??""].filter(Boolean).join(" "),children:e("div",{className:["mp-footer__inner w-full",u?`${n[d]} ${s[d]}`:"","none"===f?"":`${i[f]} mx-auto`].filter(Boolean).join(" "),children:j}),...z}})});
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as o}from"@base-ui/react/use-render";import{BAR_SURFACE as r,MPPageLayoutContext as a}from"../../internal/page-layout.js";import{MEASURE as i,SHEET_PAD_X as n,SHEET_PAD_Y as s}from"../../internal/scale.js";import{useMPSize as l}from"../../internal/config.js";const m={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPFooter=/*@__PURE__*/t.forwardRef(function({position:f="static",variant:c="outlined",size:d,maxWidth:p="none",padded:u=!0,label:b,render:x,className:j,children:z,...h},v){const w=l(d),{register:y}=t.useContext(a),g=t.useCallback(e=>{y("footer",e),"function"==typeof v?v(e):v&&(v.current=e)},[y,v]);return o({render:x??e("footer",{}),ref:g,props:{"aria-label":b,"data-mp-size":w,"data-mp-variant":c,className:["mp-footer text-mp-on-surface box-border w-full min-w-0",r[c],"outlined"===c?"border-mp-outline-variant border-t":"",m[f],j??""].filter(Boolean).join(" "),children:e("div",{className:["mp-footer__inner w-full",u?`${n[w]} ${s[w]}`:"","none"===p?"":`${i[p]} mx-auto`].filter(Boolean).join(" "),children:z}),...h}})});

package/dist/components/grid/MPGrid.d.ts

@@ -14,6 +14,20 @@ export type MPGridJustify = 'start' | 'center' | 'end' | 'space-between' | 'spac
 export type MPGridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 /** The same, for one item overriding the row it is in. */
 export type MPGridAlignSelf = MPGridAlign | 'auto';
+/**
+ * How wide one item is: a number of the grid's columns, or `'grow'`.
+ *
+ * `'grow'` is the one value that is not a measurement. It is "whatever the row
+ * has left after everybody else has taken theirs", which is the width a
+ * thumbnail's neighbour wants and the one thing a twelve-column arithmetic
+ * cannot express — the remainder is only known once the other items in *that*
+ * row have been laid out, and no `span` a caller writes down knows what else is
+ * in the row.
+ *
+ * Two growing items in a row split the remainder equally rather than by their
+ * contents, which is the useful half of what makes it predictable.
+ */
+export type MPGridSpan = number | 'grow';
 export interface MPGridProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How many columns a row is divided into. Every `span` and every `offset`
@@ -74,9 +88,17 @@ export interface MPGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
      * own window class up, so two of them usually describe a whole layout.
      *
      * A span wider than the row is clamped to the row rather than overflowing.
+     *
+     * `span="grow"` is the exception to all of the above: it takes the width the
+     * row has left rather than a share of it, which is the layout a thumbnail
+     * beside a body of text wants — `<MPGridItem span={3}>` for the picture and
+     * `<MPGridItem span="grow">` for the words, with no arithmetic to keep in step
+     * when the picture's column count changes. It is responsive like any other
+     * value: `span={{ compact: 12, medium: 'grow' }}` stacks on a phone and fills
+     * the rest of the row from 600dp.
      * @default the grid's full width
      */
-    span?: MPResponsive<number>;
+    span?: MPResponsive<MPGridSpan>;
     /**
      * Columns left empty *before* the item — space pushed in ahead of it, not an
      * absolute position in the row. First in a twelve-column row, `offset={4}` with

package/dist/components/grid/MPGrid.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const n=["compact","medium","expanded","large","extra-large"];function r(e,t,r){const a=function(e){return null==e?{}:"object"==typeof e?e:{compact:e}}(t),s={};for(const t of n){const n=a[t];void 0!==n&&(s[`--_mp-${e}-${t}`]=r(n))}return s}function a(e,t){return null==e?t:"object"==typeof e?{compact:t,...e}:e}function s(e){return String(Math.max(1,Math.round(e)))}function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(0,Math.round(e)))}function i(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const l={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},f={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},u={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},p={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:o,columnSpacing:c,justifyContent:p,alignItems:d,alignContent:m,wrap:y=!0,render:g,className:h,style:x,children:b,...j},w){return t({render:g,ref:w,props:{className:["mp-grid flex",y?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",p?l[p]:"",d?f[d]:"",m?u[m]:"",h??""].filter(Boolean).join(" "),style:{...r("cols",a(e,12),s),...r("gap-x",a(c??n,4),i),...r("gap-y",a(o??n,4),i),...x},children:b,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:a,render:s,className:i,style:l,children:f,...u},d){return t({render:s,ref:d,props:{className:["mp-grid-item",a?p[a]:"",i??""].filter(Boolean).join(" "),style:{...r("span",e,o),...r("offset",n,c),...l},children:f,...u}})});
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{WINDOW_CLASSES as n}from"../../internal/window-class.js";function r(e){return null==e?{}:"object"==typeof e?e:{compact:e}}function o(e,t,o){const s=r(t),a={};for(const t of n){const n=s[t];void 0!==n&&(a[`--_mp-${e}-${t}`]=o(n))}return a}function s(e,t){return null==e?t:"object"==typeof e?{compact:t,...e}:e}function a(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(1,Math.round(e)))}function i(e){const t=r(e),o=Object.values(t).some(e=>"grow"===e),s={};for(const e of n){const n=t[e];void 0!==n&&("grow"!==n&&(s[`--_mp-span-${e}`]=c(n)),o&&(s[`--_mp-grow-${e}`]="grow"===n?"1":"0"))}return s}function f(e){return String(Math.max(0,Math.round(e)))}function l(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const u={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},p={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},m={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},d={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:r,columnSpacing:c,justifyContent:i,alignItems:f,alignContent:d,wrap:g=!0,render:y,className:h,style:w,children:b,...j},x){return t({render:y,ref:x,props:{className:["mp-grid flex",g?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",i?u[i]:"",f?p[f]:"",d?m[d]:"",h??""].filter(Boolean).join(" "),style:{...o("cols",s(e,12),a),...o("gap-x",s(c??n,4),l),...o("gap-y",s(r??n,4),l),...w},children:b,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:r,render:s,className:a,style:c,children:l,...u},p){return t({render:s,ref:p,props:{className:["mp-grid-item",r?d[r]:"",a??""].filter(Boolean).join(" "),style:{...i(e),...o("offset",n,f),...c},children:l,...u}})});

package/dist/components/header/MPHeader.js

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

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

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import type { MPSize } from '../../types.js';
+/** How the picture is fitted into the box it was given. CSS's own four. */
+export type MPImageFit = 'cover' | 'contain' | 'fill' | 'none';
+/** What the picture is doing right now. */
+export type MPImageState = 'loading' | 'loaded' | 'error';
+export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'onError'> {
+    /** Where the picture is. */
+    src?: string;
+    /**
+     * What the picture says, for a reader who cannot see it.
+     *
+     * Required, and the one prop here that is — for the reason `MPIconButton`'s
+     * `label` is required: a picture with no text alternative is the single most
+     * common accessibility defect a component library can help with, and the help
+     * is refusing to compile without one. Pass `alt=""` for a picture that is
+     * decoration, which is a claim rather than an omission.
+     */
+    alt: string;
+    /**
+     * The proportion the box holds, written the way CSS writes it — a number
+     * (`1.5`) or a ratio (`'16 / 9'`).
+     *
+     * Left out, the box is whatever the picture turns out to be, and the page
+     * **reflows** when it arrives. Giving a ratio is what reserves the room.
+     */
+    ratio?: number | string;
+    /**
+     * How the picture is fitted into that box.
+     * @default 'cover'
+     */
+    fit?: MPImageFit;
+    /**
+     * Drawn while the picture is on its way.
+     *
+     * A shimmer by default, on the surface the box sits on. `false` draws nothing,
+     * which is what a picture inside something that already has its own loading
+     * treatment wants.
+     */
+    placeholder?: React.ReactNode | false;
+    /**
+     * Drawn instead of the picture when it does not arrive.
+     *
+     * A broken-picture glyph on a neutral surface by default. This is the prop
+     * that makes the component worth having: a bare `<img>` whose `src` 404s draws
+     * the browser's own broken-image mark, which is different in every browser and
+     * belongs to none of them.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Opens the picture over a scrim when it is pressed.
+     *
+     * The box becomes a button, so it is reachable by keyboard and says what it
+     * does. Off by default: most pictures on a page are not worth opening, and one
+     * that silently became pressable would be a control nobody declared.
+     * @default false
+     */
+    preview?: boolean;
+    /**
+     * What the preview loads, when that is not `src` — the full-resolution file
+     * behind a thumbnail.
+     * @default src
+     */
+    previewSrc?: string;
+    /** The label on the button `preview` turns the box into. */
+    previewLabel?: string;
+    /** Called when the state changes, for a caller that wants to know. */
+    onStateChange?: (state: MPImageState) => void;
+    /** The corner and type scale of the placeholder and the fallback. @default 'md' */
+    size?: MPSize;
+}
+/**
+ * A picture that says what it is doing.
+ *
+ * ```tsx
+ * <MPImage src={photo} alt="The east face at dawn" ratio="16 / 9" preview />
+ * ```
+ *
+ * A bare `<img>` has three states and shows two of them badly. While it is on
+ * its way there is a hole the size of nothing, and the page jumps when it lands;
+ * when it fails there is the browser's own broken-image mark, which is different
+ * in every browser and belongs to none of them. This draws a placeholder for the
+ * first and a fallback for the second, and `ratio` reserves the room so that
+ * neither one moves the page.
+ *
+ * ## The cached case is the one that breaks
+ *
+ * An image already in the cache fires `load` **before** React attaches the
+ * handler, so a component that only listened would sit on its placeholder
+ * forever — and the picture behind it would be fully drawn the whole time. The
+ * `complete` flag is checked on mount for exactly that, which is why this is a
+ * component rather than three lines of `useState` at a call site.
+ *
+ * ## `alt` is required
+ *
+ * For the reason `MPIconButton`'s `label` is: a picture with no text alternative
+ * is the most common accessibility defect a library can actually help with, and
+ * the help is refusing to compile. `alt=""` is the way to say *decoration*,
+ * which is a claim somebody made rather than a prop somebody forgot.
+ *
+ * ## What it is not
+ *
+ * Not a gallery. `preview` opens **this** picture and nothing else — a lightbox
+ * that walked between images would need to know which images, in what order, and
+ * that is a component holding a collection rather than a picture.
+ *
+ * Not a `next/image`. There is no `srcset` generation, no loader and no format
+ * negotiation: those belong to whatever is serving the file, and a library that
+ * guessed at them would be guessing about somebody else's CDN. `srcSet` and
+ * `sizes` pass straight through to the `<img>`.
+ */
+export declare const MPImage: React.ForwardRefExoticComponent<MPImageProps & React.RefAttributes<HTMLImageElement>>;

package/dist/components/image/MPImage.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,Fragment as a,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{Dialog as t}from"@base-ui/react/dialog";import{MPIcon as n}from"../icon/MPIcon.js";import{BrokenImageIcon as i}from"../../constants/icons.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as m,PORTAL_LAYER as d,SCRIM as f}from"../../internal/surface.js";import{useMPSize as u}from"../../internal/config.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const MPImage=/*@__PURE__*/r.forwardRef(function({src:j,alt:b,ratio:g,fit:h="cover",placeholder:v,fallback:x,preview:y=!1,previewSrc:N,previewLabel:z,onStateChange:w,size:k,className:P,style:R,onLoad:S,...L},B){const C=u(k),E=s(),I=l(c,E),[M,$]=r.useState(j?"loading":"error"),F=r.useRef(null),T=r.useCallback(e=>{$(a=>(a!==e&&w?.(e),e))},[w]),[W,q]=r.useState(j);j!==W&&(q(j),$(j?"loading":"error")),r.useEffect(()=>{const e=F.current;e&&j&&e.complete&&T(e.naturalWidth>0?"loaded":"error")},[j,T]);const A="loaded"===M,D=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(n,{icon:i,size:24})}),G=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),H=o(a,{children:[e("img",{...L,ref:e=>{F.current=e,"function"==typeof B?B(e):B&&(B.current=e)},src:j,alt:b,className:["size-full",p[h],A?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),onLoad:e=>{T("loaded"),S?.(e)},onError:()=>T("error")}),"loading"===M&&!1!==v?e("span",{"aria-hidden":"true",className:"absolute inset-0",children:v??G}):null,"error"===M?e("span",{className:"absolute inset-0",children:x??D}):null]}),J=["mp-image relative block overflow-hidden",P??""].filter(Boolean).join(" "),K={aspectRatio:g,...R};return y?o(t.Root,{children:[e(t.Trigger,{"data-mp-size":C,"data-mp-state":M,disabled:"error"===M,"aria-label":(z??b)||I.open,className:[J,"outline-mp-secondary cursor-zoom-in appearance-none border-0 bg-transparent p-0","focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default","outline-none"].join(" "),style:K,children:H}),o(t.Portal,{children:[e(t.Backdrop,{className:`${f} ${m} fixed inset-0 z-40`}),e(t.Popup,{className:[d,m,"fixed inset-0 flex items-center justify-center p-6"].join(" "),children:e("img",{src:N??j,alt:b,className:"max-h-full max-w-full object-contain"})})]})]}):e("span",{"data-mp-size":C,"data-mp-state":M,className:J,style:K,children:H})});

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

@@ -0,0 +1,2 @@
+export { MPImage } from './MPImage.js';
+export type { MPImageProps, MPImageFit, MPImageState } from './MPImage.js';

package/dist/components/image/index.js

@@ -0,0 +1 @@
+export{MPImage}from"./MPImage.js";

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

@@ -62,6 +62,31 @@ export interface MPListItemProps extends Omit<React.ComponentPropsWithoutRef<'li
     action?: React.ReactNode;
     /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
     href?: string;
+    /**
+     * Where that link opens. `rel` follows on its own for `_blank` — see `rel`.
+     */
+    target?: string;
+    /**
+     * Overrides the `rel` a `_blank` row would otherwise get, which is
+     * `noopener noreferrer`. Writing one **replaces** it rather than adding to it,
+     * so a row that also needs `nofollow` spells all three out.
+     */
+    rel?: string;
+    /**
+     * Renders the row's pressable element as something else — a router's `Link`,
+     * most of the time. `href`, `target` and the row's classes still go through,
+     * so `render={<NextLink />}` needs the URL written once, on the `MPListItem`.
+     *
+     * **This is the one `render` in the library that is not the outermost
+     * element.** A row's shell is an `<li>` because it is inside a `<ul>`, and
+     * swapping that for anything else makes the list stop being a list; what a
+     * caller actually wants to replace is the `<a>` *inside* it, which is the
+     * thing App Router has to own for a client-side navigation and a prefetch to
+     * happen at all. So that is what this replaces. Without `href` or `onClick`
+     * the row is not pressable and there is nothing here to render — this is
+     * ignored rather than wrapping inert content in a link.
+     */
+    render?: useRender.RenderProp;
     /** Marks the row as the chosen one — the open page, the current filter. */
     selected?: boolean;
     /** Unavailable. Drops the accent family, as everywhere else in the library. */
@@ -92,5 +117,8 @@ export declare const MPList: React.ForwardRefExoticComponent<MPListProps & React
  * control. This is the same shape `MPChip` uses, for the same two reasons: a
  * `<span>` carrying a click handler is invisible to a keyboard, and a `<button>`
  * inside a `<button>` is markup Chrome silently un-nests.
+ *
+ * That inner element is what `render` replaces — a router's `Link`, so a row in
+ * a navigation list is a client-side navigation rather than a full page load.
  */
 export declare const MPListItem: React.ForwardRefExoticComponent<MPListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/MPList.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent.js";import{CONTROL_GAP as l,hasContent as s,PROSE_TEXT as a,SHEET_PAD_X as d}from"../../internal/scale.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTAINER_SURFACE as m}from"../../internal/surface.js";const p=/*@__PURE__*/t.createContext({size:"md",color:"primary",dividers:!1}),u={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},f={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},x={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=/*@__PURE__*/t.forwardRef(function({variant:r="outlined",size:n="md",color:l="primary",dividers:s=!1,render:a,className:d,style:c,children:u,...f},x){const h=t.useMemo(()=>({size:n,color:l,dividers:s}),[n,l,s]),v=["mp-list rounded-mp-md flex flex-col",m[r],"text-mp-on-surface",s?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",d??""].filter(Boolean).join(" "),b=i({render:a??e("ul",{}),ref:x,props:{role:"list","data-mp-size":n,"data-mp-variant":r,className:v,style:{...o(l),...c},children:u,...f}});return e(p.Provider,{value:h,children:b})});export const MPListItem=/*@__PURE__*/t.forwardRef(function({startIcon:i,endIcon:o,description:m,action:h,href:v,selected:b=!1,disabled:y=!1,className:N,children:j,onClick:g,...k},w){const{size:z,dividers:B}=t.useContext(p),C=Boolean(g||v)&&!y,I=d[z],L=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",I,u[z],l[z],a[z],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",B?"":x[z],y?"text-mp-on-surface/38 cursor-default":b?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",C?["cursor-pointer appearance-none border-0",b?"":"bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "):""].filter(Boolean).join(" "),M=r(n,{children:[C?e(c,{}):null,s(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[s(j)?e("span",{className:"truncate",children:j}):null,s(m)?e("span",{className:["truncate",f[z],b?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:m}):null]}),s(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:w,"data-selected":b||void 0,className:["flex w-full items-center",N??""].filter(Boolean).join(" "),...k,children:[C&&v?e("a",{href:v,className:L,"aria-current":b?"page":void 0,onClick:g,children:M}):C?e("button",{type:"button",className:L,"aria-current":!!b||void 0,onClick:g,children:M}):e("div",{className:L,"aria-disabled":y||void 0,children:M}),s(h)?e("div",{className:`flex shrink-0 items-center ${I}`,children:h}):null]})});
+import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{CONTROL_GAP as s,hasContent as a,PROSE_TEXT as d,SHEET_PAD_X as m}from"../../internal/scale.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTAINER_SURFACE as p}from"../../internal/surface.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const x=/*@__PURE__*/t.createContext({size:"md",color:"primary",dividers:!1}),h={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},v={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},b={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=/*@__PURE__*/t.forwardRef(function({variant:r="outlined",size:n,color:l,dividers:s=!1,render:a,className:d,style:m,children:c,...h},v){const b=f(n),y=u(l),j=t.useMemo(()=>({size:b,color:y,dividers:s}),[b,y,s]),N=["mp-list rounded-mp-md flex flex-col",p[r],"text-mp-on-surface",s?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",d??""].filter(Boolean).join(" "),g=i({render:a??e("ul",{}),ref:v,props:{role:"list","data-mp-size":b,"data-mp-variant":r,className:N,style:{...o(y),...m},children:c,...h}});return e(x.Provider,{value:j,children:g})});function y({render:r,props:n}){return i({render:r??(n.href?e("a",{}):e("button",{})),props:n})}export const MPListItem=/*@__PURE__*/t.forwardRef(function({startIcon:i,endIcon:o,description:p,action:u,href:f,target:j,rel:N,render:g,selected:k=!1,disabled:_=!1,className:w,children:z,onClick:B,...C},I){const{size:L,dividers:M}=t.useContext(x),P=Boolean(B||f)&&!_,R=m[L],F=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",R,h[L],s[L],d[L],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",M?"":b[L],_?"text-mp-on-surface/38 cursor-default":k?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",P?["cursor-pointer appearance-none border-0",k?"":"bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "):""].filter(Boolean).join(" "),S=r(n,{children:[P?e(c,{}):null,a(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"mp-list-item__text flex min-w-0 flex-1 flex-col",children:[a(z)?e("span",{className:"mp-list-item__label truncate",children:z}):null,a(p)?e("span",{className:["mp-list-item__description truncate",v[L],k?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:p}):null]}),a(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:I,"data-selected":k||void 0,className:["flex w-full items-center",w??""].filter(Boolean).join(" "),...C,children:[P&&f?e(y,{render:g,props:{href:f,target:j,rel:l(j,N),className:F,"aria-current":k?"page":void 0,onClick:B,children:S}}):P?e(y,{render:g,props:{type:g?void 0:"button",className:F,"aria-current":!!k||void 0,onClick:B,children:S}}):e("div",{className:F,"aria-disabled":_||void 0,children:S}),a(u)?e("div",{className:`flex shrink-0 items-center ${R}`,children:u}):null]})});

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

@@ -30,6 +30,25 @@ export interface MPMenuProps extends MPMenuSurfaceProps {
      * menu opened from elsewhere needs no trigger of its own.
      */
     trigger?: React.ReactElement;
+    /**
+     * Whether that trigger renders a real `<button>`.
+     *
+     * It nearly always does — an [MPButton](./button), an
+     * [MPIconButton](./icon-button), an [MPChip](./chip) with an `onClick` — and
+     * this can be left alone. Set it `false` for a trigger that is deliberately
+     * something else: an avatar, a card, a row of text. Base UI then supplies the
+     * `role`, the tab stop and the Enter/Space handling a `<button>` would have
+     * brought with it, so the trigger is still a button to a screen reader and to
+     * a keyboard.
+     *
+     * The reason it is a prop rather than something inferred: what a trigger
+     * renders is only known once it has rendered, and by then the wiring has
+     * already been decided. Base UI says so in the console when the two disagree,
+     * in either direction — a `false` here on something that *is* a `<button>` is
+     * as wrong as the reverse.
+     * @default true
+     */
+    nativeButton?: boolean;
     /** Whether the menu is open. Use with `onOpenChange` for a controlled menu. */
     open?: boolean;
     /** Whether it starts open, for an uncontrolled one. */
@@ -133,6 +152,7 @@ export interface MPMenuGroupProps {
     label?: React.ReactNode;
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }
 export interface MPMenuCheckboxItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
     checked?: boolean;
@@ -153,6 +173,7 @@ export interface MPMenuRadioGroupProps {
     disabled?: boolean;
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }
 export interface MPMenuRadioItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
     /** What this row sets the group to. */
@@ -173,7 +194,7 @@ export declare function MPMenuItem({ onClick, href, target, rel, startIcon, endI
 /** A row that ticks. The tick lands in the column a `startIcon` would. */
 export declare function MPMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */
-export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className }: MPMenuRadioGroupProps): React.JSX.Element;
+export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className, style }: MPMenuRadioGroupProps): React.JSX.Element;
 /**
  * A row inside an `MPMenuRadioGroup`.
  *
@@ -183,7 +204,7 @@ export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, d
  */
 export declare function MPMenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuRadioItemProps): React.JSX.Element;
 /** A named run of rows. The label is a heading, not a row — it cannot be picked. */
-export declare function MPMenuGroup({ label, children, className }: MPMenuGroupProps): React.JSX.Element;
+export declare function MPMenuGroup({ label, children, className, style }: MPMenuGroupProps): React.JSX.Element;
 /** The hairline between two runs of rows. `outline-variant`, as MD3 draws it. */
 export declare function MPMenuSeparator({ className, ...props }: MPMenuSeparatorProps): React.JSX.Element;
 /**
@@ -217,7 +238,7 @@ export declare function MPMenuSubmenu({ label, startIcon, disabled, side, sideOf
  * type with a variant for every shape a row can take, which is a component tree
  * spelled as a discriminated union.
  */
-export declare function MPMenu({ size, color, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: MPMenuProps): React.JSX.Element;
+export declare function MPMenu({ size: sizeProp, color: colorProp, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, nativeButton, disabled, className, style, children }: MPMenuProps): React.JSX.Element;
 /**
  * The same menu, opened by a right-click or a long press instead of by a button.
  *
@@ -228,5 +249,5 @@ export declare function MPMenu({ size, color, trigger, open, defaultOpen, onOpen
  * against an anchor, and the long press is what makes it reachable on a touch
  * screen at all.
  */
-export declare function MPContextMenu({ size, color, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: MPContextMenuProps): React.JSX.Element;
+export declare function MPContextMenu({ size: sizeProp, color: colorProp, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: MPContextMenuProps): React.JSX.Element;
 export {};

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{FADE as f,PORTAL_LAYER as x}from"../../internal/surface.js";const b=/*@__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",f].join(" "),g={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},N={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},v={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},C={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 y(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",g[e],N[e],v[e],C[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function k(){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 M="relative flex shrink-0 items-center justify-center";function O({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 P({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,target:s,rel:o,startIcon:d,endIcon:m,shortcut:u,description:p,color:f,closeOnClick:x=!0,disabled:b=!1,label:g,children:N,className:v,style:C}){const{size:j}=t.useContext(c),I=n(t.Fragment,{children:[e(k,{}),h(d)?e("span",{className:`${M} text-mp-on-surface-variant`,children:d}):null,e(O,{description:p,children:N}),h(m)?e("span",{className:`${M} text-mp-on-surface-variant`,children:m}):null,e(P,{shortcut:u})]}),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0,z=$||C?{...$,...C}:void 0;return void 0===r||b?e(a.Item,{disabled:b,label:g,closeOnClick:x,onClick:l,className:y(j,Boolean(f),v),style:z,children:I}):e(a.LinkItem,{href:r,target:s,rel:i(s,o),label:g,closeOnClick:x,onClick:l,className:y(j,Boolean(f),v),style:z,children:I})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:d,shortcut:m,description:p,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:N,className:v,style:C}){const{size:j}=t.useContext(c),I=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:b,label:g,closeOnClick:x,className:y(j,Boolean(f),v),style:I||C?{...I,...C}:void 0,children:[e(k,{}),e("span",{className:`${M} text-(--_mp-accent)`,style:{width:u[j]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:s,size:u[j]})})}),e(O,{description:p,children:N}),h(d)?e("span",{className:`${M} text-mp-on-surface-variant`,children:d}):null,e(P,{shortcut:m})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:d=!1,disabled:m=!1,label:p,children:f,className:x,style:b}){const{size:g}=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:y(g,Boolean(i),x),style:N||b?{...N,...b}:void 0,children:[e(k,{}),e("span",{className:`${M} text-(--_mp-accent)`,style:{width:u[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(O,{description:o,children:f}),h(r)?e("span",{className:`${M} text-mp-on-surface-variant`,children:r}):null,e(P,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s}){const{size:o}=t.useContext(c);return n(a.Group,{className:s,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${N[o]} ${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:g,style:N}){const{size:v,color:C}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:y(v,!1),children:[e(k,{}),h(s)?e("span",{className:`${M} 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:`${M} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:x,side:m,sideOffset:p,align:"start",children:e(a.Popup,{className:[b,g??""].filter(Boolean).join(" "),style:{...d(C),...N},children:f})})})]})}export function MPMenu({size:l="md",color:r="primary",trigger:s,open:o,defaultOpen:i,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:g=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:y,children:k}){const M=t.useMemo(()=>({size:l,color:r}),[l,r]);return e(c.Provider,{value:M,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>m?.(e),modal:f,loopFocus:N,disabled:v,children:[s?e(a.Trigger,{render:s,openOnHover:g,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:x,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":l,className:[b,C??""].filter(Boolean).join(" "),style:{...d(r),...y},children:k})})})]})})}export function MPContextMenu({size:a="md",color:r="primary",content:s,children:o,open:i,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:g}){const N=t.useMemo(()=>({size:a,color:r}),[a,r]);return e(c.Provider,{value:N,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:x,children:e(l.Popup,{"data-mp-size":a,className:[b,f??""].filter(Boolean).join(" "),style:{...d(r),...g},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{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{FADE as f,PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as b,useMPSize as g}from"../../internal/config.js";const v=/*@__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",f].join(" "),N={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},y={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},C={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},k={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 j(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",N[e],y[e],C[e],k[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function M(){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 O="relative flex shrink-0 items-center justify-center";function P({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 I({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,target:s,rel:o,startIcon:d,endIcon:m,shortcut:u,description:p,color:f,closeOnClick:x=!0,disabled:b=!1,label:g,children:v,className:N,style:y}){const{size:C}=t.useContext(c),k=n(t.Fragment,{children:[e(M,{}),h(d)?e("span",{className:`${O} text-mp-on-surface-variant`,children:d}):null,e(P,{description:p,children:v}),h(m)?e("span",{className:`${O} text-mp-on-surface-variant`,children:m}):null,e(I,{shortcut:u})]}),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0,z=$||y?{...$,...y}:void 0;return void 0===r||b?e(a.Item,{disabled:b,label:g,closeOnClick:x,onClick:l,className:j(C,Boolean(f),N),style:z,children:k}):e(a.LinkItem,{href:r,target:s,rel:i(s,o),label:g,closeOnClick:x,onClick:l,className:j(C,Boolean(f),N),style:z,children:k})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:d,shortcut:m,description:p,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:v,className:N,style:y}){const{size:C}=t.useContext(c),k=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:b,label:g,closeOnClick:x,className:j(C,Boolean(f),N),style:k||y?{...k,...y}:void 0,children:[e(M,{}),e("span",{className:`${O} text-(--_mp-accent)`,style:{width:u[C]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:s,size:u[C]})})}),e(P,{description:p,children:v}),h(d)?e("span",{className:`${O} text-mp-on-surface-variant`,children:d}):null,e(I,{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:f,className:x,style:b}){const{size:g}=t.useContext(c),v=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:d,className:j(g,Boolean(i),x),style:v||b?{...v,...b}:void 0,children:[e(M,{}),e("span",{className:`${O} text-(--_mp-accent)`,style:{width:u[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(P,{description:o,children:f}),h(r)?e("span",{className:`${O} text-mp-on-surface-variant`,children:r}):null,e(I,{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 ${y[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:b,style:g}){const{size:N,color:y}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:j(N,!1),children:[e(M,{}),h(s)?e("span",{className:`${O} 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:`${O} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[N]})})]}),e(a.Portal,{children:e(a.Positioner,{className:x,side:m,sideOffset:p,align:"start",children:e(a.Popup,{className:[v,b??""].filter(Boolean).join(" "),style:{...d(y),...g},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:N=!1,loopFocus:y=!0,nativeButton:C=!0,disabled:k=!1,className:j,style:M,children:O}){const P=g(l),I=b(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:y,disabled:k,children:[s?e(a.Trigger,{render:s,openOnHover:N,nativeButton:C,disabled:k}):null,e(a.Portal,{children:e(a.Positioner,{className:x,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":P,className:[v,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:N}){const y=g(a),C=b(r),k=t.useMemo(()=>({size:y,color:C}),[y,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:x,children:e(l.Popup,{"data-mp-size":y,className:[v,f??""].filter(Boolean).join(" "),style:{...d(C),...N},children:s})})})]})})}

package/dist/components/menubar/MPMenubar.d.ts

@@ -42,6 +42,13 @@ export interface MPMenubarMenuProps {
     disabled?: boolean;
     /** The rows, written exactly as they are inside an [MPMenu](./menu). */
     children?: React.ReactNode;
+    /**
+     * Added to the word on the bar — the button that opens the menu — rather than
+     * to the menu it opens. That one takes its own `className` on
+     * [MPMenu](./menu).
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * One menu on the bar: the word, and the rows behind it.
@@ -51,7 +58,7 @@ export interface MPMenubarMenuProps {
  * inside are the same [MPMenuItem](./menu), `MPMenuSeparator`, `MPMenuGroup` and
  * `MPMenuSubmenu` an [MPMenu](./menu) takes, because it *is* the same menu.
  */
-export declare function MPMenubarMenu({ label, startIcon, disabled, children }: MPMenubarMenuProps): React.JSX.Element;
+export declare function MPMenubarMenu({ label, startIcon, disabled, children, className, style }: MPMenubarMenuProps): React.JSX.Element;
 /**
  * The strip of words at the top of an application — File, Edit, View — each of
  * which opens a menu.

package/dist/components/menubar/MPMenubar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as r}from"@base-ui/react/menubar";import{MPMenu as n}from"../menu/MPMenu.js";import{accentSlots as i}from"../../internal/accent.js";import{MPMenuContext as s}from"../../internal/menu.js";import{MPStateLayer as a}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,hasContent as m}from"../../internal/scale.js";const c={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},p={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"},u={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"};export function MPMenubarMenu({label:r,startIcon:i,disabled:d=!1,children:f}){const{size:x,color:b}=o.useContext(s);return e(n,{size:x,color:b,disabled:d,openOnHover:!0,sideOffset:4,trigger:t("button",{type:"button",disabled:d,className:["mp-menubar__menu group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-xs cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap select-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","disabled:text-mp-on-surface/38 disabled:cursor-default","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",c[x],p[x],u[x],l[x]].join(" "),children:[d?null:e(a,{className:"group-data-popup-open:opacity-8"}),m(i)?e("span",{className:"relative flex",children:i}):null,e("span",{className:"relative",children:r})]}),children:f})}export const MPMenubar=/*@__PURE__*/o.forwardRef(function({orientation:t="horizontal",modal:n=!0,loopFocus:a=!0,disabled:m=!1,size:c="md",color:p="primary",className:u,style:d,children:f,...x},b){const h=o.useMemo(()=>({size:c,color:p}),[c,p]);return e(s.Provider,{value:h,children:e(r,{ref:b,orientation:t,modal:n,loopFocus:a,disabled:m,"data-mp-size":c,"data-mp-orientation":t,className:["mp-menubar flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",l[c],u??""].filter(Boolean).join(" "),style:{...i(p),...d},...x,children:f})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as r}from"@base-ui/react/menubar";import{MPMenu as n}from"../menu/MPMenu.js";import{accentSlots as s}from"../../internal/accent.js";import{MPMenuContext as i}from"../../internal/menu.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,hasContent as m}from"../../internal/scale.js";import{useMPColor as c,useMPSize as p}from"../../internal/config.js";const u={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},d={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"},f={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"};export function MPMenubarMenu({label:r,startIcon:s,disabled:c=!1,children:p,className:x,style:b}){const{size:h,color:j}=o.useContext(i);return e(n,{size:h,color:j,disabled:c,openOnHover:!0,sideOffset:4,trigger:t("button",{type:"button",disabled:c,className:["mp-menubar__menu group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-xs cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap select-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","disabled:text-mp-on-surface/38 disabled:cursor-default","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",u[h],d[h],f[h],a[h],x??""].filter(Boolean).join(" "),style:b,children:[c?null:e(l,{className:"group-data-popup-open:opacity-8"}),m(s)?e("span",{className:"relative flex",children:s}):null,e("span",{className:"relative",children:r})]}),children:p})}export const MPMenubar=/*@__PURE__*/o.forwardRef(function({orientation:t="horizontal",modal:n=!0,loopFocus:l=!0,disabled:m=!1,size:u,color:d,className:f,style:x,children:b,...h},j){const g=p(u),v=c(d),y=o.useMemo(()=>({size:g,color:v}),[g,v]);return e(i.Provider,{value:y,children:e(r,{ref:j,orientation:t,modal:n,loopFocus:l,disabled:m,"data-mp-size":g,"data-mp-orientation":t,className:["mp-menubar flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",a[g],f??""].filter(Boolean).join(" "),style:{...s(v),...x},...h,children:b})})});