material-plus-ui 1.0.0 → 1.2.0

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

@@ -60,8 +60,18 @@ export interface MPFilePickerProps extends MPStyleProps {
     icon?: React.ReactNode;
     /** Lists the chosen files under the box, each with a way to remove it. @default true */
     showList?: boolean;
-    /** The accessible name of a file's remove button. Receives the file's name. */
+    /**
+     * The accessible name of a file's remove button. Receives the file's name.
+     *
+     * Left out, each button is still named for its own file — in `locale`'s own
+     * word order — rather than being one of five buttons all called "Remove".
+     */
     removeLabel?: (name: string) => string;
+    /**
+     * Which language the remove buttons' default names are written in. Falls back
+     * to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /** Marks the field required. */
     required?: boolean;
     /** Greys the picker out and stops it taking files. */

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons";import{MPStateLayer as o}from"../../internal/StateLayer";import{CONTROL_ICON as l,META_TEXT as s,PROSE_TEXT as c,STACK_GAP as p,hasContent as u}from"../../internal/scale";const m={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 d(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=n.forwardRef(function({accept:f,multiple:h=!1,maxSize:x,maxFiles:b,value:v,defaultValue:g,onFilesChange:y,onReject:j,label:N,description:k,errorMessage:w,title:z,hint:C,icon:I,showList:B=!0,removeLabel:D=e=>`Remove ${e}`,size:$="md",fullWidth:F=!0,required:L=!1,disabled:M=!1,readOnly:S=!1,name:R,id:T},W){const _=n.useRef(null);n.useImperativeHandle(W,()=>_.current);const[P,E]=n.useState(()=>[...g??[]]),O=v?[...v]:P,q=n.useRef(0),[A,V]=n.useState(!1),G=u(w),H=M||S,Y=n.useId(),J=n.useCallback(e=>{v||E(e),y?.(e)},[y,v]),K=n.useCallback(e=>{const r=[],n=[],t=h?b??Number.POSITIVE_INFINITY:1,a=h?O.length:0;for(const i of e)f&&!d(i,f)?n.push({file:i,reason:"type"}):void 0!==x&&i.size>x?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[f,O.length,b,x,h]),Q=n.useCallback(e=>{const{kept:r,rejections:n}=K(e);n.length>0&&j?.(n),r.length>0&&J(h?[...O,...r]:r)},[K,J,O,h,j]);return r("div",{className:["mp-file-picker flex-col align-top",p[$],F?"flex w-full":"inline-flex"].join(" "),"data-mp-size":$,"data-disabled":M||void 0,"data-invalid":G||void 0,children:[u(N)?r("span",{className:[s,M?"text-mp-on-surface/38":G?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[N,L?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{H||(e.preventDefault(),q.current+=1,V(!0))},onDragOver:e=>{H||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{H||(q.current=Math.max(0,q.current-1),0===q.current&&V(!1))},onDrop:e=>{H||(e.preventDefault(),q.current=0,V(!1),Q(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:T,disabled:M,"aria-describedby":u(k)||G?Y:void 0,"aria-invalid":G||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)",m[$],c[$],M?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[S?"cursor-default":"cursor-pointer",G?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",A?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!H&&_.current&&(_.current.value="",_.current.click())},children:[H?null:e(o,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===I?e(t,{icon:i,size:1.6*l[$],className:M?"":"text-mp-primary"}):u(I)?e("span",{className:M?"":"text-mp-primary",children:I}):null,e("span",{className:"font-medium",children:z??"Drop files here, or click to browse"}),u(C)?e("span",{className:[s,M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:C}):null]}),e("input",{ref:_,type:"file",name:R,accept:f,multiple:h,required:L&&0===O.length,disabled:H,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>Q(Array.from(e.target.files??[]))})]}),B&&O.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",p[$]].join(" "),children:O.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",c[$],M?"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:[s,"shrink-0 tabular-nums",M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),H?null:r("button",{type:"button","aria-label":D(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:()=>J(O.filter((e,r)=>r!==i)),children:[e(o,{}),e(t,{icon:a,size:18})]})]},`${n.name}-${n.size}-${n.lastModified}-${i}`))}):null,G?e("span",{id:Y,className:[s,"text-mp-error"].join(" "),children:w}):u(k)?e("span",{id:Y,className:[s,M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:k}):null]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons";import{fillMessage as o}from"../../internal/i18n";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale";import{MPStateLayer as c}from"../../internal/StateLayer";import{CONTROL_ICON as p,META_TEXT as m,PROSE_TEXT as u,STACK_GAP as d,hasContent as f}from"../../internal/scale";const h={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 x(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=n.forwardRef(function({accept:b,multiple:v=!1,maxSize:g,maxFiles:y,value:N,defaultValue:j,onFilesChange:k,onReject:w,label:z,description:C,errorMessage:I,title:B,hint:D,icon:F,showList:L=!0,removeLabel:M,locale:S,size:$="md",fullWidth:T=!0,required:W=!1,disabled:_=!1,readOnly:P=!1,name:R,id:E},O){const q=l(S),A=s("common",q),V=n.useRef(null);n.useImperativeHandle(O,()=>V.current,[]);const[G,H]=n.useState(()=>[...j??[]]),Y=N?[...N]:G,J=n.useRef(0),[K,Q]=n.useState(!1),U=f(I),X=_||P,Z=n.useId(),ee=n.useId(),re=n.useCallback(e=>{N||H(e),k?.(e)},[k,N]),ne=n.useCallback(e=>{const r=[],n=[],t=v?y??Number.POSITIVE_INFINITY:1,a=v?Y.length:0;for(const i of e)b&&!x(i,b)?n.push({file:i,reason:"type"}):void 0!==g&&i.size>g?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[b,Y.length,y,g,v]),te=n.useCallback(e=>{const{kept:r,rejections:n}=ne(e);n.length>0&&w?.(n),r.length>0&&re(v?[...Y,...r]:r)},[ne,re,Y,v,w]);return r("div",{className:["mp-file-picker flex-col align-top",d[$],T?"flex w-full":"inline-flex"].join(" "),"data-mp-size":$,"data-disabled":_||void 0,"data-invalid":U||void 0,children:[f(z)?r("span",{id:ee,className:[m,_?"text-mp-on-surface/38":U?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[z,W?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{X||(e.preventDefault(),J.current+=1,Q(!0))},onDragOver:e=>{X||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{X||(J.current=Math.max(0,J.current-1),0===J.current&&Q(!1))},onDrop:e=>{X||(e.preventDefault(),J.current=0,Q(!1),te(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:E,disabled:_,"aria-describedby":f(C)||U?Z:void 0,"aria-invalid":U||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)",h[$],u[$],_?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[P?"cursor-default":"cursor-pointer",U?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",K?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!X&&V.current&&(V.current.value="",V.current.click())},children:[X?null:e(c,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===F?e(t,{icon:i,size:1.6*p[$],className:_?"":"text-mp-primary"}):f(F)?e("span",{className:_?"":"text-mp-primary",children:F}):null,e("span",{className:"font-medium",children:B??"Drop files here, or click to browse"}),f(D)?e("span",{className:[m,_?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null]}),e("input",{ref:V,type:"file",name:R,accept:b,multiple:v,required:W&&0===Y.length,disabled:X,tabIndex:-1,"aria-labelledby":f(z)?ee:void 0,"aria-describedby":f(C)||U?Z:void 0,className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>te(Array.from(e.target.files??[]))})]}),L&&Y.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",d[$]].join(" "),children:Y.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",u[$],_?"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:[m,"shrink-0 tabular-nums",_?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),X?null:r("button",{type:"button","aria-label":M?M(n.name):o(A.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:()=>re(Y.filter((e,r)=>r!==i)),children:[e(c,{}),e(t,{icon:a,size:18})]})]},`${n.name}-${n.size}-${n.lastModified}-${i}`))}):null,U?e("span",{id:Z,className:[m,"text-mp-error"].join(" "),children:I}):f(C)?e("span",{id:Z,className:[m,_?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:C}):null]})});

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

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import type { MPColor, MPCorner, MPPosition, MPSize } from '../../types';
+/**
+ * The three containers MD3 gives a floating button, and the reason there are not
+ * five of them.
+ *
+ * - `tonal` is the specification's own default: the accent *container* under its
+ *   own ink, which is `primary-container` on `on-primary-container` before any
+ *   colour is chosen.
+ * - `filled` is the accent itself, for the one screen where the button has to
+ *   carry more weight than the content behind it.
+ * - `elevated` is MD3's *surface* FAB: a neutral container with the accent as
+ *   the glyph, for a button floating over something colourful enough that a
+ *   tonal one has nothing quiet to sit on.
+ *
+ * `outlined` and `text` are absent because a floating button *is* its container.
+ * A hairline disc over a scrolling page is a shape with the page moving through
+ * it, and a text one is a glyph with nothing to press.
+ */
+export type MPFloatingActionButtonVariant = 'filled' | 'tonal' | 'elevated';
+export interface MPFloatingActionButtonProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+    /**
+     * The glyph.
+     *
+     * Wrap it in an [MPIcon](../display/icon) when it needs a size of its own;
+     * passed bare it is drawn at the rung's own glyph size.
+     */
+    icon?: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "a floating button with no
+     * `aria-label`" is a defect that ships precisely because the control looks
+     * finished without one. With `extended` this is also the word written on the
+     * button, so the two can never say different things.
+     */
+    label: string;
+    /**
+     * Writes `label` beside the glyph, which turns the disc into a stadium — MD3's
+     * extended floating button, for the one action a screen is about.
+     * @default false
+     */
+    extended?: boolean;
+    /**
+     * Which container it paints.
+     * @default 'tonal'
+     */
+    variant?: MPFloatingActionButtonVariant;
+    /**
+     * Which accent family it reads. Not an arbitrary colour: to change what
+     * `primary` *is*, set the token.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The button's size. `md` is MD3's own 56dp; `xs` and `xl` are the
+     * specification's small and large floating buttons at 40 and 96dp.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * How it sits in the page. `fixed` — the default, against the `static`
+     * everything else in this library defaults to — is what a floating button *is*:
+     * held against a corner of the window whatever the page under it does.
+     *
+     * `absolute` pins it to the nearest positioned ancestor instead, which is what
+     * a button floating over a card or a map wants. `static` puts it back in the
+     * flow — drawn as `position: relative`, because the state layer still needs
+     * something to fill.
+     * @default 'fixed'
+     */
+    position?: MPPosition;
+    /**
+     * Which corner it is pinned to. Logical, so `bottom-end` is bottom-left under
+     * RTL. No effect while `position` is `static`.
+     * @default 'bottom-end'
+     */
+    corner?: MPCorner;
+    /**
+     * How far in from both edges, as a CSS length or a number of pixels. MD3's own
+     * is 16dp.
+     * @default 16
+     */
+    offset?: number | string;
+    /** Unavailable. Keeps its place, stops answering, and stops floating. */
+    disabled?: boolean;
+    /**
+     * `button`, not `submit`. A native button defaults to submitting the form
+     * around it.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+}
+/**
+ * The one action a screen is about, floating over it.
+ *
+ * MD3's floating action button, drawn from the specification's own component
+ * tokens: the three containers, the three sizes with the corner each of them
+ * takes, level-3 elevation, the state layer, and the extended shape. The default
+ * — `tonal` on `primary` — is the specification's default FAB exactly:
+ * `primary-container` under `on-primary-container`.
+ *
+ * ## Why there is no speed dial
+ *
+ * A floating button that fans out into three or four smaller ones is a Material
+ * **2** pattern, and MD3 dropped it. It was never good: the actions are
+ * unlabelled discs in the corner of the screen, they cover the content the
+ * reader was looking at, and a fan of buttons that claims `role="menu"` without
+ * the keyboard contract of one is worse for a keyboard reader than something
+ * that never claimed anything.
+ *
+ * When there genuinely are several actions, they belong in an
+ * [MPMenu](../inputs/menu) — which *is* a menu, with the roving focus, the
+ * typeahead and the escape behaviour that word promises — opened from this
+ * button.
+ *
+ * ## Why it is `fixed` by default
+ *
+ * Because that is the component. Everything else in this library sits in the
+ * page's flow and would be wrong to take out of it; this one is defined by not
+ * being part of the page. `position="absolute"` is the escape hatch for a button
+ * that belongs to a region rather than to the window, and `static` puts it back
+ * in the flow entirely.
+ */
+export declare const MPFloatingActionButton: React.ForwardRefExoticComponent<MPFloatingActionButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1 @@
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Button as o}from"@base-ui/react/button";import{accentSlots as n}from"../../internal/accent";import{MPStateLayer as i}from"../../internal/StateLayer";import{hasContent as s}from"../../internal/scale";const r={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)"},m={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},l={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"},p={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},d={xs:24,sm:24,md:24,lg:30,xl:36},f={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"},c={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"},x={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},u={"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=a.forwardRef(function({icon:a,label:b,extended:g=!1,variant:h="tonal",color:w="primary",size:y="md",position:_="fixed",corner:v="bottom-end",offset:j=16,disabled:k=!1,type:z="button",className:N,style:$,...B},A){return e(o,{ref:A,type:z,disabled:k,"aria-label":b,"data-mp-size":y,"data-mp-variant":h,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",p[y],m[y],f[y],g?c[y]:l[y],k?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${r[h]} shadow-mp-3`,"static"===_?"relative":`${x[_]} ${u[v]}`,N??""].filter(Boolean).join(" "),style:{...n(w),"--_mp-fab-offset":"number"==typeof j?`${j}px`:j,...$},...B,children:[k?null:t(i,{}),s(a)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:d[y],height:d[y]},children:a}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",g?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:b})})]})});

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

@@ -0,0 +1,2 @@
+export { MPFloatingActionButton } from './MPFloatingActionButton';
+export type { MPFloatingActionButtonProps, MPFloatingActionButtonVariant } from './MPFloatingActionButton';

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

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

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

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPResponsive } from '../../types';
+/**
+ * How a row divides the space its items did not take.
+ *
+ * CSS's own words rather than a set of this library's, because this is CSS's own
+ * question: a grid is the one component whose props are asking the layout engine
+ * for something directly, and inventing a second spelling for `space-between`
+ * would mean a caller has to translate what they already know.
+ */
+export type MPGridJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+/** How items sit against each other across a row. */
+export type MPGridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** The same, for one item overriding the row it is in. */
+export type MPGridAlignSelf = MPGridAlign | 'auto';
+export interface MPGridProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many columns a row is divided into. Every `span` and every `offset`
+     * inside is read against this number, so `columns={24}` makes `span={12}` a
+     * half rather than a full width.
+     *
+     * MD3's own layout grid is `{ compact: 4, medium: 12 }`.
+     * @default 12
+     */
+    columns?: MPResponsive<number>;
+    /**
+     * The gutter between items, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     *
+     * MD3's own gutter is `{ compact: 4, medium: 6 }` — 16dp on a phone, 24dp from
+     * a medium window up.
+     * @default 4
+     */
+    spacing?: MPResponsive<number>;
+    /** The gutter between rows only. Falls back to `spacing`. */
+    rowSpacing?: MPResponsive<number>;
+    /** The gutter between columns only. Falls back to `spacing`. */
+    columnSpacing?: MPResponsive<number>;
+    /** How a row distributes the width its items did not use. */
+    justifyContent?: MPGridJustify;
+    /**
+     * How items sit against each other across a row.
+     * @default 'stretch'
+     */
+    alignItems?: MPGridAlign;
+    /** Where the rows sit when the grid is shorter than the box holding it. */
+    alignContent?: MPGridJustify | 'stretch';
+    /**
+     * Whether a row that runs out of columns continues on the next one. Turned
+     * off, the grid is one row that overflows — which is what a horizontally
+     * scrolling strip wants and nothing else does.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<ul />}`. Base UI's own escape hatch, so it behaves here exactly as
+     * it does on every Base UI primitive.
+     */
+    render?: useRender.RenderProp;
+    /** The `MPGridItem`s. */
+    children?: React.ReactNode;
+}
+export interface MPGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many of the grid's columns the item takes. Read against the grid's
+     * `columns`, so `span={6}` is half of the default twelve and a quarter of
+     * `columns={24}`.
+     *
+     * Responsive: `span={{ compact: 12, medium: 6, expanded: 4 }}` is full width on
+     * a phone, half from 600dp and a third from 840dp. Each entry applies from its
+     * 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.
+     * @default the grid's full width
+     */
+    span?: MPResponsive<number>;
+    /**
+     * 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
+     * `span={4}` is the middle third; after an item that already took four columns,
+     * the same offset skips four more and lands on the last third.
+     *
+     * Responsive in the same way `span` is.
+     * @default 0
+     */
+    offset?: MPResponsive<number>;
+    /** Overrides the row's `alignItems` for this item alone. */
+    alignSelf?: MPGridAlignSelf;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<article />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Material's layout grid: a row divided into columns, and items that take some
+ * of them.
+ *
+ * MD3 describes a page as a number of columns with a gutter between them, and
+ * describes how that number changes with the **window size class** rather than
+ * with a pixel width — four columns in a compact window, twelve from medium up.
+ * That is what this component is, and it is why `span` and `columns` take
+ * `{ compact, medium, expanded, large, extra-large }` rather than a set of
+ * breakpoints of the library's own invention. See `MPWindowClass` for why those
+ * are not Tailwind's four.
+ *
+ * ## Why the widths are real CSS and not utilities
+ *
+ * They cannot be utilities. A column is
+ * `(100% + gutter) * span / columns - gutter`, it has to be recomputed at four
+ * widths, and it is the width of an element whose column count is declared on its
+ * *parent* — none of which Tailwind can spell, because Tailwind finds classes by
+ * scanning source text and `columns` is a number the caller picks at runtime.
+ *
+ * So the arithmetic is written once, in `src/styles.css`, and the per-instance
+ * numbers arrive as inline `--_mp-*` slots — exactly how a `color` reaches a
+ * background in this library. The count and the two gutters are declared on the
+ * grid and *inherited* by the items rather than passed through a React context,
+ * which is not a shortcut: a media query can change an inherited custom property
+ * without React hearing about it, so the column count an item lays itself out
+ * against is always the one that is actually on screen. A context would have to
+ * re-render the subtree at every window class to say the same thing.
+ *
+ * ## Why a grid paints nothing
+ *
+ * No `variant`, no `color`, no padding. A grid is not a surface — it is the
+ * arrangement of the surfaces inside it — and the moment it draws a sheet of its
+ * own it stops being usable as the outermost thing on a page. Wrap it in an
+ * [MPBox](./box) or an [MPCard](./card) when the sheet is wanted, and in an
+ * [MPContainer](./container) when what is wanted is the page margin.
+ *
+ * Nesting is an `MPGrid` inside an `MPGridItem`, not a grid that is also an item:
+ * the inner grid redeclares the column count for its own subtree while the item
+ * around it keeps the width the outer grid gave it.
+ */
+export declare const MPGrid: React.ForwardRefExoticComponent<MPGridProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One cell of an `MPGrid`.
+ *
+ * It is a width and nothing else — no surface, no padding, no typography. What
+ * goes inside brings its own, which is the whole reason a cell and an
+ * [MPBox](./box) are two components: wrapping something in a layout must not
+ * change how it looks, and a cell that drew a sheet would make `span` a visual
+ * decision.
+ *
+ * The column count it divides by is inherited from the grid as a custom
+ * property, so an item with no `MPGrid` above it falls back to twelve rather than
+ * breaking. It will still be a plain block in a plain parent, which is not a
+ * layout — always wrap.
+ */
+export declare const MPGridItem: React.ForwardRefExoticComponent<MPGridItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/MPGrid.js

@@ -0,0 +1 @@
+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=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=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}})});

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

@@ -0,0 +1,2 @@
+export { MPGrid, MPGridItem } from './MPGrid';
+export type { MPGridAlign, MPGridAlignSelf, MPGridItemProps, MPGridJustify, MPGridProps } from './MPGrid';

package/dist/components/grid/index.js

@@ -0,0 +1 @@
+export{MPGrid,MPGridItem}from"./MPGrid";

package/dist/components/highlight/MPHighlight.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as t}from"../../internal/accent";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border border-(--_mp-accent) bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function l(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function a(e,n,t){const r=n>0?e[n-1]:"",o=t<e.length?e[t]:"";return!i.test(r)&&!i.test(o)}function c(e,n,t,r){n.lastIndex=0;const o=[];let i,l=0;for(;null!==(i=n.exec(e));){if(""===i[0]){n.lastIndex+=1;continue}const c=i.index,s=c+i[0].length;t&&!a(e,c,s)||(c>l&&o.push(e.slice(l,c)),o.push(r(i[0],String(c))),l=s)}return 0===o.length?e:(l<e.length&&o.push(e.slice(l)),o)}function s(e,t,r,o){if("string"==typeof e)return c(e,t,r,o);if("number"==typeof e)return c(String(e),t,r,o);if(Array.isArray(e))return n.Children.map(e,e=>s(e,t,r,o));if(n.isValidElement(e)){const i=e.props.children;return void 0===i||"function"==typeof i?e:n.cloneElement(e,void 0,s(i,t,r,o))}return e}export const MPHighlight=n.forwardRef(function({query:i,variant:a="tonal",color:c="tertiary",caseSensitive:u=!1,wholeWord:m=!1,underline:f=!1,weight:p,className:d,style:g,children:h,...x},b){const y=n.useMemo(()=>function(e,n){if(e instanceof RegExp)return e.global?e:new RegExp(e.source,`${e.flags}g`);const t=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===t.length?null:new RegExp(t.map(l).join("|"),n?"gu":"giu")}(i,u),[i,u]),_=["rounded-mp-xs -mx-0.5 px-0.5","box-decoration-clone",r[a],f?"underline decoration-2 underline-offset-2":"",p?o[p]:""].filter(Boolean).join(" "),j=y?s(h,y,m,(n,t)=>e("mark",{className:_,children:n},t)):h;return e("span",{ref:b,className:["mp-highlight",d??""].filter(Boolean).join(" "),style:{...t(c),...g},...x,children:j})});
+import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as t}from"../../internal/accent";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border border-(--_mp-accent) bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function l(e){return e.replace(/[-.*+?^${}()|[\]\\]/g,"\\$&")}function a(e,n,t){const r=n>0?e[n-1]:"",o=t<e.length?e[t]:"";return!i.test(r)&&!i.test(o)}function c(e,n,t,r){n.lastIndex=0;const o=[];let i,l=0;for(;null!==(i=n.exec(e));){if(""===i[0]){n.lastIndex+=1;continue}const c=i.index,s=c+i[0].length;t&&!a(e,c,s)||(c>l&&o.push(e.slice(l,c)),o.push(r(i[0],String(c))),l=s)}return 0===o.length?e:(l<e.length&&o.push(e.slice(l)),o)}function s(e,t,r,o){if("string"==typeof e)return c(e,t,r,o);if("number"==typeof e)return c(String(e),t,r,o);if(Array.isArray(e))return n.Children.map(e,e=>s(e,t,r,o));if(n.isValidElement(e)){const i=e.props.children;return void 0===i||"function"==typeof i?e:n.cloneElement(e,void 0,s(i,t,r,o))}return e}export const MPHighlight=n.forwardRef(function({query:i,variant:a="tonal",color:c="tertiary",caseSensitive:u=!1,wholeWord:f=!1,underline:m=!1,weight:p,className:g,style:d,children:h,...x},b){const y=i instanceof RegExp?`re ${i.source} ${i.flags}`:Array.isArray(i)?`a ${i.join("\0")}`:`s ${i}`,_=n.useMemo(()=>function(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const t=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===t.length?null:new RegExp(t.map(l).join("|"),n?"gu":"giu")}(i,u),[y,u]),$=["rounded-mp-xs -mx-0.5 px-0.5","box-decoration-clone",r[a],m?"underline decoration-2 underline-offset-2":"",p?o[p]:""].filter(Boolean).join(" "),j=n.useMemo(()=>_?s(h,_,f,(n,t)=>e("mark",{className:$,children:n},t)):h,[h,_,f,$]);return e("span",{ref:b,className:["mp-highlight",g??""].filter(Boolean).join(" "),style:{...t(c),...d},...x,children:j})});

package/dist/components/list/MPList.js

@@ -1 +1 @@
-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";import{CONTROL_GAP as l,hasContent as a,PROSE_TEXT as s,SHEET_PAD_X as c}from"../../internal/scale";import{MPStateLayer as d}from"../../internal/StateLayer";import{CONTAINER_SURFACE as m}from"../../internal/surface";const p=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=t.forwardRef(function({variant:r="outlined",size:n="md",color:l="primary",dividers:a=!1,render:s,className:c,style:d,children:u,...f},x){const h=t.useMemo(()=>({size:n,color:l,dividers:a}),[n,l,a]),v=["mp-list rounded-mp-md flex flex-col",m[r],"text-mp-on-surface",a?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",c??""].filter(Boolean).join(" "),b=i({render:s??e("ul",{}),ref:x,props:{role:"list","data-mp-size":n,"data-mp-variant":r,className:v,style:{...o(l),...d},children:u,...f}});return e(p.Provider,{value:h,children:b})});export const MPListItem=t.forwardRef(function({startIcon:i,endIcon:o,description:m,action:h,href:v,selected:b=!1,disabled:y=!1,className:N,children:g,onClick:j,...k},w){const{size:z,dividers:C}=t.useContext(p),B=Boolean(j||v)&&!y,I=c[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],s[z],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",C?"":x[z],y?"text-mp-on-surface/38 cursor-default":b?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",B?["cursor-pointer 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(" "):"",B&&b?"bg-(--_mp-accent-container)":""].filter(Boolean).join(" "),M=r(n,{children:[B?e(d,{}):null,a(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:[a(g)?e("span",{className:"truncate",children:g}):null,a(m)?e("span",{className:["truncate",f[z],b?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:m}):null]}),a(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:[B&&v?e("a",{href:v,className:L,"aria-current":b?"page":void 0,onClick:j,children:M}):B?e("button",{type:"button",className:L,"aria-current":!!b||void 0,onClick:j,children:M}):e("div",{className:L,"aria-disabled":y||void 0,children:M}),a(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";import{CONTROL_GAP as l,hasContent as s,PROSE_TEXT as a,SHEET_PAD_X as d}from"../../internal/scale";import{MPStateLayer as c}from"../../internal/StateLayer";import{CONTAINER_SURFACE as m}from"../../internal/surface";const p=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=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=t.forwardRef(function({startIcon:i,endIcon:o,description:m,action:h,href:v,selected:b=!1,disabled:y=!1,className:N,children:g,onClick:j,...k},w){const{size:z,dividers:B}=t.useContext(p),C=Boolean(j||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(g)?e("span",{className:"truncate",children:g}):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:j,children:M}):C?e("button",{type:"button",className:L,"aria-current":!!b||void 0,onClick:j,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]})});

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

@@ -78,6 +78,15 @@ export interface MPMenuItemProps {
     href?: string;
     /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
     target?: string;
+    /**
+     * The link's relationship to the page. Ignored without `href`.
+     *
+     * Left unset, a `target="_blank"` row gets `noopener noreferrer` — the pair
+     * that stops the opened page reaching back through `window.opener`. Setting
+     * it replaces that rather than adding to it, so a row that needs `nofollow`
+     * should say `rel="noopener noreferrer nofollow"`.
+     */
+    rel?: string;
     /** Content before the label — an icon, a swatch, an avatar. */
     startIcon?: React.ReactNode;
     /** Content after the label, before any `shortcut`. */
@@ -160,7 +169,7 @@ export type MPMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
  * cannot be copied, and tells a screen reader the wrong thing about every one of
  * them.
  */
-export declare function MPMenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
+export declare function MPMenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the column a `startIcon` would. */
 export declare function MPMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */

package/dist/components/menu/MPMenu.js

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

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

@@ -60,13 +60,31 @@ export interface MPNumberFieldProps extends MPStyleProps {
     incrementLabel?: string;
     /** The accessible name of the decrement button. @default 'Decrease' */
     decrementLabel?: string;
-    /** Label in the outline's notch. */
+    /**
+     * Label for the field, drawn in the outline's notch and — while the field is
+     * empty, unfocused and has nothing standing at its start — resting on the
+     * field's own line where a placeholder would be. See `floatingLabel`.
+     */
     label?: React.ReactNode;
+    /**
+     * Whether the label rests on the field's line while there is nothing to make
+     * room for, and rises into the notch on focus or on the first digit.
+     *
+     * `false` pins it in the notch, which is the one thing a floating label costs:
+     * 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.
+     * @default true
+     */
+    floatingLabel?: boolean;
     /** The line under the control. Replaced by `errorMessage` when there is one. */
     description?: React.ReactNode;
     /** The message under the control, which also turns the field over. */
     errorMessage?: React.ReactNode;
-    /** Placeholder shown while the field is empty. */
+    /**
+     * Placeholder shown while the field is empty. With a floating label it is held
+     * back until the label has risen out of its way.
+     */
     placeholder?: string;
     /** Content placed before the number — a currency mark, a unit, an icon. */
     startIcon?: React.ReactNode;
@@ -96,4 +114,4 @@ export interface MPNumberFieldProps extends MPStyleProps {
  * 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, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id }: MPNumberFieldProps): React.JSX.Element;
+export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id }: MPNumberFieldProps): React.JSX.Element;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{NumberField as l}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons";import{MPFieldLabel as o,MPFieldOutline as p}from"../../internal/FieldOutline";import{MPStateLayer as m}from"../../internal/StateLayer";import{MPSupportingText as d}from"../../internal/SupportingText";import{CONTROL_ICON as c,PROSE_TEXT as u,hasContent as f}from"../../internal/scale";const h={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:x,defaultValue:g,onValueChange:b,onValueCommitted:N,min:v,max:z,step:j,largeStep:y,smallStep:w,allowWheelScrub:S=!1,format:I,locale:V,steppers:q="end",incrementLabel:C="Increase",decrementLabel:M="Decrease",label:k,description:F,errorMessage:L,placeholder:O,startIcon:W,size:D="md",fullWidth:P=!1,required:R=!1,disabled:$=!1,readOnly:_=!1,name:B,id:G}){const T=f(L),A=h[D],E=r.useId(),H=G??`mp-number-field-${B??E}`,J="none"!==q&&!_&&!$,K=["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",A.stepper].join(" "),Q=a(l.Decrement,{"aria-label":M,className:K,children:[e(m,{}),e(t,{icon:s,size:c[D]})]}),U=a(l.Increment,{"aria-label":C,className:K,children:[e(m,{}),e(t,{icon:i,size:c[D]})]});return a(n.Root,{className:["mp-number-field group flex-col align-top",P?"flex w-full":"inline-flex w-fit"].join(" "),disabled:$,invalid:T,"data-mp-size":D,children:[e(l.Root,{id:H,name:B,className:"contents",value:x,defaultValue:g,onValueChange:e=>b?.(e),onValueCommitted:e=>N?.(e),min:v,max:z,step:j,largeStep:y,smallStep:w,allowWheelScrub:S,format:I,locale:V,disabled:$,readOnly:_,required:R,children:a("div",{className:"relative w-full",children:[a(l.Group,{className:["flex w-full items-center gap-2",A.height,J&&"end"===q?`${A.padding} pe-1`:J&&"split"===q?"px-1":A.padding].join(" "),children:[J&&"split"===q?Q:null,W?e("span",{className:["flex shrink-0 items-center",$?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:W}):null,e(l.Input,{placeholder:O,className:["w-full min-w-0 flex-1 tabular-nums",u[D],"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",J&&"split"===q?"text-center":""].filter(Boolean).join(" ")}),J&&"end"===q?a("span",{className:"flex shrink-0 items-center",children:[Q,U]}):null,J&&"split"===q?U:null]}),e(p,{label:k,required:R}),f(k)?e(o,{size:D,label:k,required:R,htmlFor:H}):null]})}),e(d,{description:F,errorMessage:L,className:A.padding})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{NumberField as n}from"@base-ui/react/number-field";import{Field as r}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons";import{MPFieldLabel as o,MPFieldOutline as p,useFloatingLabel as d}from"../../internal/FieldOutline";import{MPStateLayer as m}from"../../internal/StateLayer";import{MPSupportingText as c}from"../../internal/SupportingText";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale";const x={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:g,defaultValue:b,onValueChange:v,onValueCommitted:N,min:z,max:j,step:y,largeStep:S,smallStep:w,allowWheelScrub:I=!1,format:V,locale:k,steppers:q="end",incrementLabel:C="Increase",decrementLabel:L="Decrease",label:M,floatingLabel:F=!0,description:O,errorMessage:P,placeholder:W,startIcon:D,size:R="md",fullWidth:_=!1,required:B=!1,disabled:G=!1,readOnly:T=!1,name:$,id:A}){const E=h(P),H=x[R],J=l.useId(),K=A??J,Q="none"!==q&&!T&&!G,[U,X]=l.useState(b??null),Y=void 0===g?U:g,{shrunk:Z,focusProps:ee}=d({floating:F&&h(M),filled:null!==Y,pinned:!!D||Q&&"split"===q}),ae=["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",H.stepper].join(" "),le=a(n.Decrement,{"aria-label":L,className:ae,children:[e(m,{}),e(t,{icon:s,size:u[R]})]}),ne=a(n.Increment,{"aria-label":C,className:ae,children:[e(m,{}),e(t,{icon:i,size:u[R]})]});return a(r.Root,{className:["mp-number-field group flex-col align-top",_?"flex w-full":"inline-flex w-fit"].join(" "),disabled:G,invalid:E,"data-mp-size":R,...ee,children:[e(n.Root,{id:K,name:$,className:"contents",value:g,defaultValue:b,onValueChange:e=>{X(e),v?.(e)},onValueCommitted:e=>N?.(e),min:z,max:j,step:y,largeStep:S,smallStep:w,allowWheelScrub:I,format:V,locale:k,disabled:G,readOnly:T,required:B,children:a("div",{className:"relative w-full",children:[a(n.Group,{className:["flex w-full items-center gap-2",H.height,Q&&"end"===q?`${H.padding} pe-1`:Q&&"split"===q?"px-1":H.padding].join(" "),children:[Q&&"split"===q?le:null,D?e("span",{className:["flex shrink-0 items-center",G?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null,e(n.Input,{placeholder:Z?W:void 0,className:["w-full min-w-0 flex-1 tabular-nums",f[R],"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",Q&&"split"===q?"text-center":""].filter(Boolean).join(" ")}),Q&&"end"===q?a("span",{className:"flex shrink-0 items-center",children:[le,ne]}):null,Q&&"split"===q?ne:null]}),e(p,{label:M,required:B,notched:Z}),h(M)?e(o,{size:R,label:M,required:B,htmlFor:K,shrunk:Z}):null]})}),e(c,{description:O,errorMessage:P,className:H.padding})]})}