material-plus-ui 1.3.1 → 1.4.0

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import type { MPSize } from '../../types.js';
+/**
+ * When a field decides whether it is valid.
+ *
+ * Base UI's own three, under Base UI's own spelling. This is one of the few
+ * places the library does *not* invent a word of its own: `validationMode` is
+ * what a caller will read everywhere else, and a nicer synonym would only be a
+ * word they had to translate back.
+ */
+export type MPFormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+/** Errors that came from somewhere else, keyed by the field's `name`. */
+export type MPFormErrors = Record<string, string | string[]>;
+export interface MPFormProps extends Omit<React.ComponentPropsWithoutRef<'form'>, 'onSubmit'> {
+    /**
+     * When a field validates.
+     *
+     * - `onSubmit` — on submit, and on every change afterwards. The default, and
+     *   the only one that does not tell somebody their email address is wrong
+     *   while they are still typing it.
+     * - `onBlur` — when a field loses focus.
+     * - `onChange` — on every keystroke.
+     * @default 'onSubmit'
+     */
+    validationMode?: MPFormValidationMode;
+    /**
+     * Errors from outside the browser's own validation — a server, a form action,
+     * a schema — keyed by the `name` of the field each belongs to.
+     *
+     * They are shown **on the field**, and cleared as soon as that field changes.
+     */
+    errors?: MPFormErrors;
+    /**
+     * Called on a valid submit, with the form's values. The native submit event is
+     * prevented, so nothing navigates.
+     */
+    onSubmit?: (values: Record<string, unknown>) => void;
+    /**
+     * The gap between the form's children. A form is a stack, and this is which
+     * rung of the [ladder](../../design/prop-conventions#size) it stacks on.
+     * @default 'md'
+     */
+    size?: MPSize;
+    children?: React.ReactNode;
+}
+/**
+ * A `<form>` that knows which of its fields is wrong.
+ *
+ * On its own, a page of [MPTextField](./text-field)s validates one field at a
+ * time, and a failed submit leaves the reader to go and find the red one. What
+ * this adds is the part that has to be owned **above** the fields: a submit
+ * collects every field's validity at once, focus lands on the first one that
+ * failed, and `errors` puts a server's answer back on the field it belongs to
+ * rather than in a banner at the top of the page.
+ *
+ * ## It is not a form library
+ *
+ * There is no schema here, no resolver and no field array. A project that wants
+ * those keeps the one it already has and hands the result to `errors`, which is
+ * the seam this is built around — and it is a seam rather than an integration
+ * precisely because every one of those libraries can produce
+ * `{ [name]: message }`.
+ *
+ * ## Why it lays its children out at all
+ *
+ * Because a form is a **stack**, and a stack with no gap is a stack of fields
+ * touching. The gap is the only visual decision here: no surface, no padding, no
+ * measure. Those belong to an [MPCard](../layout/card) or an
+ * [MPContainer](../layout/container) around it, for the reason a container gives
+ * — the thing that decides the shape of a page should not also be the thing that
+ * submits it.
+ */
+export declare const MPForm: React.ForwardRefExoticComponent<MPFormProps & React.RefAttributes<HTMLFormElement>>;

package/dist/components/form/MPForm.js

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

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

@@ -0,0 +1,2 @@
+export { MPForm } from './MPForm.js';
+export type { MPFormErrors, MPFormProps, MPFormValidationMode } from './MPForm.js';

package/dist/components/form/index.js

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

package/dist/components/header/MPHeader.d.ts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAlign, MPPosition, MPSize, MPVariant } from '../../types.js';
+export interface MPHeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'title'> {
+    /**
+     * The leading slot: the mark, the product's name, the thing that is the same
+     * on every page — and, on a narrow window, the
+     * [MPSidebarTrigger](./sidebar#mpsidebartrigger) that goes ahead of it.
+     *
+     * A slot rather than the first of `children` because the three regions of a
+     * bar are laid out *against each other* — the middle can only be centred on
+     * the bar if the two ends are the component's to measure — and a caller
+     * writing three wrappers by hand is a caller whose header drifts from the next
+     * one.
+     */
+    brand?: React.ReactNode;
+    /**
+     * The trailing slot: the account menu, the theme switch, the call to action.
+     * Laid out end-aligned, so a row of icon buttons needs no wrapper of its own.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Where the middle slot sits.
+     *
+     * `center` is MD3's own **center-aligned top app bar**, and it is centred on
+     * the *bar* rather than in the space left over: both ends are given equal
+     * shares, so the middle stays on the bar's midline however long the brand is.
+     * @default 'start'
+     */
+    align?: MPAlign;
+    /**
+     * How the bar sits in the page's scroll, spelled the way CSS spells it.
+     *
+     * `sticky` — the default — holds it against the top of the window once the
+     * page has scrolled to it, while leaving it in the flow so nothing has to be
+     * padded out of its way. `fixed` takes it out of the flow entirely, which an
+     * [MPPageLayout](./page-layout) answers by reserving its height. `static` lets
+     * it scroll away.
+     * @default 'sticky'
+     */
+    position?: MPPosition;
+    /**
+     * How much surface the bar paints, on the **container** ladder — the bar is
+     * never dyed, because what sits on it arrives with colours of its own.
+     *
+     * `tonal` is the default and is MD3's own scrolled top app bar:
+     * `surface-container` against the page's `surface`. `outlined` is the flat one
+     * — the page's own surface with a hairline where it ends — and `text` paints
+     * nothing at all, which is what a bar over a hero image wants.
+     * @default 'tonal'
+     */
+    variant?: MPVariant;
+    /**
+     * The bar's height floor, its gutter and the air between its slots.
+     *
+     * `md` is 64px, which is MD3's own small top app bar. It is a floor rather
+     * than a height: a bar whose middle slot wrapped onto a second line would
+     * otherwise clip it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Holds the row of slots to a measure and centres it while the sheet itself
+     * still spans the window. The same ladder [MPContainer](./container)'s
+     * `maxWidth` uses, so a header and the container under it line up on one edge.
+     * @default 'none'
+     */
+    maxWidth?: MPSize | 'none';
+    /**
+     * The gutter down each side of the row.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The name the bar is announced by. Worth writing when a page has more than
+     * one `<header>` in it — an article's own and the site's — because "banner"
+     * twice tells a reader which is which not at all.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<header>`. Base UI's own escape hatch, and
+     * rarely what you want: at the top level of a document that tag *is* the
+     * `banner` landmark, and it is what says so to a screen reader's landmark
+     * list, to a reader mode and to a crawler.
+     */
+    render?: useRender.RenderProp;
+    /** The middle slot: a row of navigation links, a search field, a headline. */
+    children?: React.ReactNode;
+}
+/**
+ * The bar across the top of a page. **MD3's top app bar**, with the site's own
+ * three regions on it.
+ *
+ * A real `<header>`, which is the whole reason it is a component rather than a
+ * row of divs: at the top level of a document that tag is the `banner` landmark,
+ * and it is what a screen reader's landmark list, a reader mode and a search
+ * engine's understanding of the page are built out of.
+ *
+ * The slots are props rather than compound sub-components, for
+ * [MPCard](./card)'s reason: the arrangement is fixed — brand, middle, actions —
+ * and what a caller wants to decide is what goes in each. That the middle can be
+ * centred on the bar's own midline is only possible *because* the ends are the
+ * component's to measure.
+ *
+ * ## Why there is no `divider`
+ *
+ * [MPBottomNavigation](./bottom-navigation) has one and this does not, and the
+ * difference is that this takes a `variant`. MD3 separates a bar from the
+ * content by **tone** — `surface-container` against `surface` — and the case a
+ * hairline exists for is the bar that paints the page's own surface. That bar is
+ * `variant="outlined"`, and the rule is what `outlined` *means* here: a
+ * container's outline is a hairline all the way round, and a bar has exactly one
+ * edge with anything on the other side of it.
+ *
+ * ## Inside a layout, and outside one
+ *
+ * Inside an [MPPageLayout](./page-layout) the bar registers itself, so a column
+ * that holds its place knows how far down the window to start and a `fixed` bar
+ * has its height reserved. Outside one it is simply a bar, and everything above
+ * still holds.
+ */
+export declare const MPHeader: React.ForwardRefExoticComponent<MPHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/header/MPHeader.js

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

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

@@ -0,0 +1,2 @@
+export { MPHeader } from './MPHeader.js';
+export type { MPHeaderProps } from './MPHeader.js';

package/dist/components/header/index.js

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

package/dist/components/highlight/MPHighlight.d.ts

@@ -19,6 +19,13 @@ export interface MPHighlightProps extends Omit<React.ComponentPropsWithoutRef<'s
      * letters of it. A `RegExp` is used as written, with the global flag forced on;
      * `caseSensitive` and `wholeWord` are ignored for it, because a regular
      * expression already says both of those things itself.
+     *
+     * Strings are escaped, so a search box's contents are safe to pass straight
+     * through however they are spelled. A `RegExp` is **not** — it is run as
+     * written, which is the point of accepting one. Building one out of text
+     * somebody else typed is a denial of service waiting for the input that
+     * backtracks; escape it into a string term instead, or keep the expression a
+     * literal in your own source.
      */
     query: string | string[] | RegExp;
     /**

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 o,ChevronRightIcon as s}from"../../constants/icons.js";import{MPMenuContext as i}from"../../internal/menu.js";import{accentSlots as c}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{CONTROL_ICON as m,META_TEXT as u,hasContent as p}from"../../internal/scale.js";import{FADE as h,PORTAL_LAYER as f}from"../../internal/surface.js";const x=/*@__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",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),j=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})]}),I=h?{"--_mp-accent":`var(--_mp-color-${h})`}:void 0,$=I||v?{...I,...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:$,children:j}):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:$,children:j})}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:j}=t.useContext(i),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(j,Boolean(f),v),style:I||P?{...I,...P}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[j]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:o,size:m[j]})})}),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.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})})})]})})}

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize } from '../../types.js';
+export interface MPMenubarProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the bar runs. `vertical` is the shape a side rail of menus takes;
+     * the arrow keys follow it either way.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * Whether an open menu takes the page away.
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Whether the arrow keys wrap around at the ends of the bar.
+     * @default true
+     */
+    loopFocus?: boolean;
+    /** Disables every menu on the bar at once. */
+    disabled?: boolean;
+    /**
+     * The row height and type scale, passed to every menu on the bar.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family an open menu's word reads, and which a chosen row inside
+     * it reads.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** The `MPMenubarMenu`s. */
+    children?: React.ReactNode;
+}
+export interface MPMenubarMenuProps {
+    /** The word on the bar. */
+    label: React.ReactNode;
+    /** A glyph before the label. */
+    startIcon?: React.ReactNode;
+    /** Unavailable. The word stays on the bar and opens nothing. */
+    disabled?: boolean;
+    /** The rows, written exactly as they are inside an [MPMenu](./menu). */
+    children?: React.ReactNode;
+}
+/**
+ * One menu on the bar: the word, and the rows behind it.
+ *
+ * It has no `size` and no `color` of its own — both belong to the bar, which is
+ * the only place they can be set once and hold for every menu on it. The rows
+ * 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;
+/**
+ * The strip of words at the top of an application — File, Edit, View — each of
+ * which opens a menu.
+ *
+ * ## What makes it a bar rather than a row of menus
+ *
+ * What happens once one of them is **open**: moving along the strip walks
+ * through the others instead of closing the one you left, and the arrow keys
+ * move between the menus as well as inside them. Base UI owns all of that, along
+ * with the `menubar` role — which is what tells a screen reader that the strip
+ * is one widget with one tab stop rather than six unrelated buttons.
+ *
+ * ## Why it draws no surface
+ *
+ * A menu bar sits **on** something: an [MPHeader](../layout/header), a title
+ * bar, a toolbar. A sheet under a strip that is already on a sheet is two
+ * sheets, and the second one has nothing to say. It is the same refusal
+ * [MPContainer](../layout/container#why-it-draws-no-surface) makes, one level
+ * down.
+ *
+ * ## When this is the wrong component
+ *
+ * When there are more actions than a strip can hold. A menu bar's whole
+ * advantage is that every heading is visible before you go looking for one, and
+ * a bar of twelve words has already lost it — that is an
+ * [MPCommandPalette](./command-palette).
+ */
+export declare const MPMenubar: React.ForwardRefExoticComponent<MPMenubarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/menubar/MPMenubar.js

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

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

@@ -0,0 +1,2 @@
+export { MPMenubar, MPMenubarMenu } from './MPMenubar.js';
+export type { MPMenubarMenuProps, MPMenubarProps } from './MPMenubar.js';

package/dist/components/menubar/index.js

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

package/dist/components/navigation-menu/MPNavigationMenu.d.ts

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize } from '../../types.js';
+export interface MPNavigationMenuProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Which way the row runs. `vertical` is a rail whose panels open beside it
+     * rather than under it; the arrow keys follow either way.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /** Which item's panel is open, by its `value`. Nullish is closed. */
+    value?: string | null;
+    /** Which starts open, for an uncontrolled menu. */
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /**
+     * How long the pointer rests on an item before its panel opens, in
+     * milliseconds.
+     */
+    delay?: number;
+    /** And how long a panel stays after the pointer leaves. */
+    closeDelay?: number;
+    /**
+     * Distance from the row, in pixels.
+     * @default 8
+     */
+    sideOffset?: number;
+    /**
+     * The row's height and type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family an open item's label reads. The panel itself stays
+     * neutral, as MD3's menu surface does.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The name the `<nav>` is announced by, through `aria-label` in the rest
+     * props.
+     *
+     * There is deliberately no default. A generic one would say nothing a screen
+     * reader was not already saying — it announces an unnamed `<nav>` as
+     * "navigation" on its own — so a name is only worth having when it
+     * distinguishes this bar from another region on the page.
+     *
+     * Which is exactly when it becomes necessary: a page with a main bar, a
+     * footer's links and a table of contents offers three regions called
+     * "navigation" and no way to tell them apart. Name them the moment there is
+     * more than one.
+     */
+    children?: React.ReactNode;
+}
+export interface MPNavigationMenuItemProps {
+    /** The word in the row. */
+    label: React.ReactNode;
+    /**
+     * Makes the item a plain link rather than something that opens a panel.
+     *
+     * An item with an `href` and no children is a **destination**, and it is
+     * announced as one — which is the whole reason a site's navigation is not an
+     * [MPMenu](../inputs/menu).
+     */
+    href?: string;
+    /** Where the link opens. Ignored without `href`. */
+    target?: string;
+    /**
+     * The link's relationship to the page. Ignored without `href`.
+     *
+     * Left unset, a `target="_blank"` destination 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 destination that
+     * also needs `nofollow` should say `rel="noopener noreferrer nofollow"`.
+     */
+    rel?: string;
+    /** A glyph before the label. */
+    startIcon?: React.ReactNode;
+    /**
+     * Identifies the item, for a controlled menu. Base UI gives each item an
+     * identity of its own, so an uncontrolled menu needs none.
+     */
+    value?: string;
+    /** Unavailable. The word stays in the row and opens nothing. */
+    disabled?: boolean;
+    /**
+     * How many columns the panel lays its links out in.
+     * @default 1
+     */
+    columns?: number;
+    /** The panel's contents — usually `MPNavigationMenuLink`s. */
+    children?: React.ReactNode;
+}
+export interface MPNavigationMenuLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'title'> {
+    /** Where it goes. */
+    href: string;
+    /** The row's name. */
+    title: React.ReactNode;
+    /** A second line under it, one step down the scale and muted. */
+    description?: React.ReactNode;
+    /** A glyph before the title. */
+    startIcon?: React.ReactNode;
+}
+/**
+ * One row inside a panel: where it goes, what it is called, and a line saying
+ * what is there.
+ *
+ * A real `<a>`, which is the point of the whole component — a site's navigation
+ * is a list of destinations, and a destination that is a `<div>` with a click
+ * handler is not in the link list, not on the status bar and not in a crawler's
+ * index.
+ */
+export declare const MPNavigationMenuLink: React.ForwardRefExoticComponent<MPNavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * One word in the row, and what opens under it.
+ *
+ * With children it is a trigger and a panel; with an `href` and nothing else it
+ * is a link — and the difference is not cosmetic. The second is announced as a
+ * destination and the first as something that expands.
+ */
+export declare function MPNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children }: MPNavigationMenuItemProps): React.JSX.Element;
+/**
+ * A site's navigation: a row of destinations, some of which open a panel of more
+ * of them.
+ *
+ * ## Why this is not an MPMenu
+ *
+ * Because of what the rows **are**.
+ *
+ * An [MPMenu](../inputs/menu) holds actions, so its rows are `menuitem`s and the
+ * whole thing is a widget that takes the arrow keys. This holds links, so it is
+ * a `<nav>` full of real `<a>`s — which is what puts each destination in a
+ * screen reader's link list, on the browser's status bar, on the middle-click
+ * menu and in a crawler's index.
+ *
+ * The rule is short: reach for a menu when the row **does** something, and for
+ * this when the row **goes** somewhere.
+ *
+ * ## One panel, resized
+ *
+ * One panel is open at a time and it resizes between items rather than closing
+ * and reopening, which is Base UI's doing. It is also why the popup animates its
+ * width and height as well as its opacity: crossing the row should read as one
+ * surface following the pointer, not as three sheets flashing.
+ *
+ * ## Where it goes
+ *
+ * In an [MPHeader](../layout/header)'s middle slot, which is what that slot is
+ * for. Down the side of a page it is `orientation="vertical"`, which is a rail
+ * whose panels open beside it.
+ */
+export declare const MPNavigationMenu: React.ForwardRefExoticComponent<MPNavigationMenuProps & React.RefAttributes<HTMLElement>>;

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

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

package/dist/components/navigation-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { MPNavigationMenu, MPNavigationMenuItem, MPNavigationMenuLink } from './MPNavigationMenu.js';
+export type { MPNavigationMenuItemProps, MPNavigationMenuLinkProps, MPNavigationMenuProps } from './MPNavigationMenu.js';

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

@@ -0,0 +1 @@
+export{MPNavigationMenu,MPNavigationMenuItem,MPNavigationMenuLink}from"./MPNavigationMenu.js";

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

@@ -49,16 +49,25 @@ export interface MPNumberFieldProps extends MPStyleProps {
      * report `1240`.
      */
     format?: Intl.NumberFormatOptions;
-    /** Which locale the number is written and parsed in. Defaults to the runtime's. */
+    /**
+     * Which locale the number is written and parsed in. Defaults to the runtime's.
+     *
+     * A plain BCP 47 string also names the language the two steppers are announced
+     * in; anything wider falls back to the nearest `MPLocaleProvider`, then to
+     * English.
+     */
     locale?: Intl.LocalesArgument;
     /**
      * Where the steppers sit, or `none` for a field without them.
      * @default 'end'
      */
     steppers?: MPNumberFieldSteppers;
-    /** The accessible name of the increment button. @default 'Increase' */
+    /**
+     * The accessible name of the increment button. Defaults to the word for it in
+     * `locale`.
+     */
     incrementLabel?: string;
-    /** The accessible name of the decrement button. @default 'Decrease' */
+    /** The same for the decrement button. */
     decrementLabel?: string;
     /**
      * Label for the field, drawn in the outline's notch and — while the field is

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

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