material-plus-ui 1.5.0 → 1.6.0

package/dist/components/spoiler/MPSpoiler.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{MPButton as o}from"../button/MPButton.js";import{inertProps as i}from"../../internal/inert.js";import{useMPLocale as n,useMPMessages as t}from"../../internal/locale.js";import{SPOILER as l}from"../../internal/messages/spoiler.js";import{hasContent as s,META_TEXT as d,SHEET_PAD as c,SHEET_PAD_X as m,SHEET_PAD_Y as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";const u="[background-color:color-mix(in_oklab,var(--_mp-color-surface)_55%,transparent)]";export const MPSpoiler=/*@__PURE__*/a.forwardRef(function({revealed:v,defaultRevealed:x=!1,onRevealedChange:h,locale:j,label:b,hideLabel:g,description:N,action:y,reversible:z=!1,maxHeight:k,blur:w=10,padded:B=!0,variant:C="outlined",size:R="md",color:_="primary",className:H,children:M,...P},S){const $=n(j),I=t(l,$),L=a.useId(),[q,A]=a.useState(x),D=v??q,E=e=>{void 0===v&&A(e),h?.(e)},F=!1===N?null:N??I.notice;return r("div",{ref:S,"data-mp-size":R,"data-mp-variant":C,"data-mp-revealed":D||void 0,className:["mp-spoiler rounded-mp-md relative isolate overflow-hidden","box-border",f[C],"text-mp-on-surface",H??""].filter(Boolean).join(" "),...P,children:[e("div",{id:L,className:["min-w-0",B?c[R]:"","transition-[filter] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",D?"":"select-none"].filter(Boolean).join(" "),style:{filter:D?void 0:`blur(${w}px)`,maxHeight:D?void 0:k,overflow:D?void 0:"hidden"},...i(!D),children:M}),D?null:r("div",{className:["absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-center",c[R],u].join(" "),children:[s(F)?e("p",{className:`text-mp-on-surface-variant m-0 ${d}`,children:F}):null,y??e(o,{variant:"tonal",size:R,color:_,onClick:()=>E(!0),"aria-expanded":!1,"aria-controls":L,children:b??I.reveal})]}),D&&z?e("div",{className:["flex justify-end",m[R],p[R],"pt-0"].join(" "),children:e(o,{variant:"text",size:R,color:_,onClick:()=>E(!1),"aria-expanded":!0,"aria-controls":L,children:g??I.hide})}):null]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{MPButton as i}from"../button/MPButton.js";import{inertProps as a}from"../../internal/inert.js";import{useMPLocale as n,useMPMessages as t}from"../../internal/locale.js";import{SPOILER as l}from"../../internal/messages/spoiler.js";import{hasContent as s,META_TEXT as d,SHEET_PAD as c,SHEET_PAD_X as m,SHEET_PAD_Y as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{useMPColor as u,useMPSize as v}from"../../internal/config.js";const x="[background-color:color-mix(in_oklab,var(--_mp-color-surface)_55%,transparent)]";export const MPSpoiler=/*@__PURE__*/o.forwardRef(function({revealed:h,defaultRevealed:j=!1,onRevealedChange:b,locale:g,label:N,hideLabel:z,description:k,action:w,reversible:y=!1,maxHeight:B,blur:C=10,padded:R=!0,variant:_="outlined",size:H,color:M,className:P,children:S,...$},I){const L=v(H),q=u(M),A=n(g),D=t(l,A),E=o.useId(),[F,G]=o.useState(j),J=h??F,K=e=>{void 0===h&&G(e),b?.(e)},O=!1===k?null:k??D.notice;return r("div",{ref:I,"data-mp-size":L,"data-mp-variant":_,"data-mp-revealed":J||void 0,className:["mp-spoiler rounded-mp-md relative isolate overflow-hidden","box-border",f[_],"text-mp-on-surface",P??""].filter(Boolean).join(" "),...$,children:[e("div",{id:E,className:["min-w-0",R?c[L]:"","transition-[filter] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",J?"":"select-none"].filter(Boolean).join(" "),style:{filter:J?void 0:`blur(${C}px)`,maxHeight:J?void 0:B,overflow:J?void 0:"hidden"},...a(!J),children:S}),J?null:r("div",{className:["absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-center",c[L],x].join(" "),children:[s(O)?e("p",{className:`text-mp-on-surface-variant m-0 ${d}`,children:O}):null,w??e(i,{variant:"tonal",size:L,color:q,onClick:()=>K(!0),"aria-expanded":!1,"aria-controls":E,children:N??D.reveal})]}),J&&y?e("div",{className:["flex justify-end",m[L],p[L],"pt-0"].join(" "),children:e(i,{variant:"text",size:L,color:q,onClick:()=>K(!1),"aria-expanded":!0,"aria-controls":E,children:z??D.hide})}):null]})});

package/dist/components/stepper/MPStepper.d.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { type MPStepConnector, type MPStepStatus } from '../../internal/step.js';
+import type { MPColor, MPOrientation, MPSize } from '../../types.js';
+/** How far a step has got. The same three `MPTimeline` draws. */
+export type MPStepStatusValue = MPStepStatus;
+export interface MPStepperProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onChange'> {
+    /**
+     * Which step is being worked on now, counting from zero. Everything before it
+     * is complete and everything after it is still to come.
+     *
+     * An index rather than a value, for the reason `MPTimeline`'s is: a step that
+     * had to be told where it was in the list would be a step every caller could
+     * put in the wrong place.
+     */
+    active?: number;
+    /** Where an uncontrolled stepper starts. @default 0 */
+    defaultActive?: number;
+    /**
+     * Called with the step that was pressed.
+     *
+     * **Leaving it out is what makes the steps unpressable.** A stepper with no
+     * handler is a progress indicator — it says where the reader is and offers no
+     * way to move, which is the right shape for a sequence the application drives
+     * with its own Next and Back buttons.
+     */
+    onActiveChange?: (active: number) => void;
+    /**
+     * Whether a step can only be reached once the ones before it are done.
+     *
+     * On by default, because that is what a sequence *is*: a checkout that let
+     * somebody press Payment before Address would be offering a step it cannot
+     * complete. Off, every step is reachable at any time — a settings wizard, a
+     * form split into sections a reader can wander.
+     *
+     * A linear stepper still allows going **back**. What it refuses is jumping
+     * forward past the step the reader has actually reached.
+     * @default true
+     */
+    linear?: boolean;
+    /**
+     * Which way the sequence runs.
+     *
+     * `horizontal` is the default here and `vertical` is `MPTimeline`'s, and the
+     * two defaults disagree on purpose: a stepper is a small number of short
+     * labels across the top of a task, and a timeline is an arbitrary number of
+     * entries with an arbitrary amount to say about each.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    size?: MPSize;
+    color?: MPColor;
+    /** `MPStep` elements. Anything else is rendered where it is put. */
+    children?: React.ReactNode;
+}
+export interface MPStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color'> {
+    /** What the step is called. */
+    label?: React.ReactNode;
+    /** A second line under it — what the step is for, or what it is waiting on. */
+    description?: React.ReactNode;
+    /**
+     * What goes inside the bullet.
+     *
+     * Left out, a complete step draws a tick, a failed one draws its error glyph
+     * and every other one draws its number — which is what a stepper's bullet is
+     * for, and why this is an override rather than the usual way in.
+     */
+    bullet?: React.ReactNode;
+    /**
+     * Marks the step as failed. It is drawn in `error` and keeps its place in the
+     * sequence rather than being removed, because a sequence with a hole in it is
+     * one the reader cannot count.
+     */
+    error?: boolean;
+    /**
+     * A note under the label — *Optional*, *Skipped*, *2 of 3 done*.
+     *
+     * A node rather than a boolean, and that is not a small difference: a boolean
+     * would mean this library shipping the **word** *Optional*, which would then
+     * need a translation in eighteen languages for a label only some applications
+     * ever draw. The caller has the word already, in their own copy and their own
+     * language.
+     */
+    optional?: React.ReactNode;
+    /** Refuses the press whatever the reachability rule says. */
+    disabled?: boolean;
+    /**
+     * How the line to the next step is drawn.
+     * @default 'solid'
+     */
+    connector?: MPStepConnector;
+    color?: MPColor;
+    /**
+     * The step's own panel, drawn **only while the step is active**.
+     *
+     * Which is the half a stepper has that a timeline does not: a wizard is a rail
+     * and one panel, and keeping the other panels mounted would mean a form whose
+     * hidden fields still submit.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A sequence being worked through, with one panel at a time.
+ *
+ * ```tsx
+ * const [step, setStep] = useState(0);
+ *
+ * <MPStepper active={step} onActiveChange={setStep}>
+ *   <MPStep label="Account">…</MPStep>
+ *   <MPStep label="Payment">…</MPStep>
+ *   <MPStep label="Done">…</MPStep>
+ * </MPStepper>;
+ * ```
+ *
+ * ## How it differs from `MPTimeline`
+ *
+ * They draw the same picture from the same table — see `internal/step.ts` — and
+ * they are two components because they are two jobs:
+ *
+ * | | `MPTimeline` | `MPStepper` |
+ * | --- | --- | --- |
+ * | The sequence | happened | is being worked through |
+ * | The steps | are read | are pressed |
+ * | The content | is all on screen | is one panel |
+ * | Default orientation | `vertical` | `horizontal` |
+ *
+ * A stepper with no `onActiveChange` is the overlap: unpressable, one panel, and
+ * a progress indicator for a sequence the application's own Next and Back
+ * buttons drive.
+ *
+ * ## It ships no Next and Back
+ *
+ * On purpose. Those buttons belong to the form: what "next" means is whether the
+ * current step validates, and a library that drew them would either have to
+ * guess that or ask for a validator per step. `onActiveChange` and two
+ * `MPButton`s is four lines, and they are four lines the caller can read.
+ *
+ * ## Reachability
+ *
+ * `linear` decides which steps a press is allowed to reach. Going **back** is
+ * always allowed; what a linear stepper refuses is jumping forward past the step
+ * the reader has actually got to. An unreachable step is `aria-disabled` rather
+ * than removed from the tab order, so a reader arrowing along the rail is told
+ * *why* it will not open instead of finding a gap.
+ */
+export declare const MPStepper: React.ForwardRefExoticComponent<MPStepperProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One step in a sequence.
+ *
+ * Its index is not a prop and cannot be, for the reason `MPTimelineItem`'s is
+ * not: a step told where it was in the list is a step every caller could put in
+ * the wrong place. The stepper numbers its children as it walks them.
+ */
+export declare const MPStep: React.ForwardRefExoticComponent<MPStepProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/stepper/MPStepper.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as o,ErrorIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{hasContent as s,META_TEXT as c,SHEET_TITLE as p}from"../../internal/scale.js";import{BORDER_STYLE as m,BULLET as u,BULLET_GAP as d,BULLET_SIZE as f,CONNECTOR_COLOR as x,ITEM_GAP as h,ITEM_GAP_X as v,TITLE_COLOR as b}from"../../internal/step.js";import{useMPColor as _,useMPSize as j}from"../../internal/config.js";const N=/*@__PURE__*/n.createContext(null),g=/*@__PURE__*/n.createContext(0);export const MPStepper=/*@__PURE__*/n.forwardRef(function({active:l,defaultActive:r=0,onActiveChange:o,linear:a=!0,orientation:s="horizontal",size:c,color:p,className:m,style:u,children:d,...x},h){const v=j(c),b=_(p),[y,z]=n.useState(r),C=l??y,[S,$]=n.useState(C);C>S&&$(C);const P=n.Children.toArray(d).filter(n.isValidElement),k=P.length,M=n.useCallback(e=>{void 0===l&&z(e),o?.(e)},[l,o]),A=n.useMemo(()=>({size:v,color:b,orientation:s,active:C,onSelect:o||void 0===l?M:null,linear:a,count:k,furthest:S}),[v,b,s,C,o,l,M,a,k,S]),B="horizontal"===s;return e(N.Provider,{value:A,children:t("div",{...x,ref:h,"data-mp-size":v,className:["mp-stepper flex flex-col",m??""].filter(Boolean).join(" "),style:{...i(b),...u},children:[e("ol",{className:["mp-stepper__rail flex list-none p-0",B?"flex-row items-start":"flex-col"].join(" "),style:{"--_mp-bullet":f[v]},children:P.map((t,l)=>e(g.Provider,{value:l,children:t},l))}),e(w,{steps:P,active:C})]})})});function w({steps:t,active:l}){const n=t[l],r=n?.props.children;return s(r)?e("div",{className:"mp-stepper__panel mt-4",role:"group","aria-label":void 0,children:r}):null}export const MPStep=/*@__PURE__*/n.forwardRef(function({label:f,description:_,bullet:j,error:w=!1,optional:y,disabled:z=!1,connector:C="solid",color:S,className:$,style:P,children:k,...M},A){const B=n.useContext(N),R=n.useContext(g),E=B?.size??"md",F=B?.orientation??"horizontal",I=B?.active??0,V=B?.count??1,q=B?.furthest??0,D=B?.linear??!0,G=R<I?"complete":R===I?"current":"upcoming",H=S??(w?"error":B?.color??"primary"),J="horizontal"===F,K=R===V-1,L="none"!==C&&!K,O=!z&&(!D||R<=q),Q=null!=B?.onSelect&&O,T=j??("complete"!==G||w?w?e(r,{icon:a}):R+1:e(r,{icon:o})),U=e("span",{"aria-hidden":"true",className:["rounded-mp-full relative z-10 flex shrink-0 items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",u[G],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)"].join(" "),children:T}),W=L?e("span",{"aria-hidden":"true",className:["pointer-events-none absolute",J?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",m[C],x[G]].filter(Boolean).join(" ")}):null,X=t("span",{className:"flex min-w-0 flex-col gap-0.5 text-start "+(J?"mt-2":""),children:[s(f)?e("span",{className:`${p[E]} ${w?"text-mp-error":b[G]}`,children:f}):null,s(y)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:y}):null,s(_)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:_}):null]}),Y=t(l,{children:[W,t("span",{className:`flex min-w-0 ${J?"flex-col items-start":"flex-row"} ${J?"":d[E]}`,children:[U,X]})]});return e("li",{...M,ref:A,"aria-current":"current"===G?"step":void 0,className:["mp-stepper__step relative min-w-0",J?`flex-1 ${K?"":v[E]}`:K?"":h[E],$??""].filter(Boolean).join(" "),style:{...S||w?i(H):null,...P},children:Q?e("button",{type:"button",className:["group relative flex w-full min-w-0 cursor-pointer appearance-none bg-transparent p-0 text-start","outline-mp-secondary rounded-mp-xs focus-visible:outline-2 focus-visible:outline-offset-2","outline-none"].join(" "),onClick:()=>B?.onSelect?.(R),children:Y}):e("span",{className:"relative flex w-full min-w-0","aria-disabled":!(!B?.onSelect||O)||void 0,children:Y})})});

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

@@ -0,0 +1,2 @@
+export { MPStepper, MPStep } from './MPStepper.js';
+export type { MPStepperProps, MPStepProps, MPStepStatusValue } from './MPStepper.js';

package/dist/components/stepper/index.js

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

package/dist/components/switch/MPSwitch.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Switch as n}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{MPIcon as s}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const u={xs:{track:"h-5 w-8",thumb:"start-[5px] size-2.5 data-checked:start-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"start-1.5 size-3 data-checked:start-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"start-2 size-4 data-checked:start-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"start-[9px] size-[18px] data-checked:start-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"start-2.5 size-5 data-checked:start-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=/*@__PURE__*/r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:b,description:x,errorMessage:y,icons:j=!1,labelPlacement:z="end",size:w="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1,className:S,style:W},q){const B=p(y),F=B?"error":N,I=u[w],L=r.useId(),O=P??L,T=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:q,id:O,name:v,checked:f,defaultChecked:g,required:_,disabled:C,readOnly:M,onCheckedChange:e=>k?.(e),className:["mp-switch__track group relative box-border inline-flex shrink-0 p-0","rounded-mp-full appearance-none font-[inherit] outline-none","transition-[background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",I.track,C?["bg-mp-surface-container-highest inset-ring-2 inset-ring-mp-on-surface/12","cursor-default","data-checked:bg-mp-on-surface/12 data-checked:inset-ring-0"].join(" "):[M?"cursor-default":"cursor-pointer","bg-mp-surface-container-highest inset-ring-2",B?"inset-ring-mp-error":"inset-ring-mp-outline","data-checked:inset-ring-0 data-checked:bg-(--_mp-accent)"].join(" ")].join(" "),children:a(n.Thumb,{className:["mp-switch__thumb absolute top-1/2 flex -translate-y-1/2 items-center justify-center","rounded-full","transition-[inset-inline-start,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",I.thumb,C?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[B?"bg-mp-error":"bg-mp-outline","data-checked:bg-(--_mp-on-accent)"].join(" ")].join(" "),children:[C?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",I.halo,"bg-mp-on-surface group-data-checked:bg-(--_mp-accent)"].join(" ")}),j?a(t,{children:[e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard opacity-0 group-data-checked:opacity-100",C?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(s,{icon:o,size:I.glyph,strokeWidth:3})}),e("span",{className:["absolute inset-0 flex items-center justify-center","text-mp-surface-container-highest","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-checked:opacity-0"].join(" "),children:e(s,{icon:c,size:I.glyph,strokeWidth:3})})]}):null]})})}),A=p(b)||p(x)||B?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===z?"flex-1":""].filter(Boolean).join(" "),children:[p(b)?a(i.Label,{htmlFor:O,className:["leading-[1.4]",C?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[b,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:x,errorMessage:y})]}):null;return e(i.Root,{className:["mp-switch align-top",R?"flex w-full":"inline-flex",S??""].filter(Boolean).join(" "),disabled:C,invalid:B,"data-mp-size":w,style:{...l(F),...W},children:e("div",{className:["flex w-full items-start gap-3",m[w]].join(" "),children:a(t,"start"===z?{children:[A,T]}:{children:[T,A]})})})});
+import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Switch as n}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{MPIcon as s}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const g={xs:{track:"h-5 w-8",thumb:"start-[5px] size-2.5 data-checked:start-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"start-1.5 size-3 data-checked:start-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"start-2 size-4 data-checked:start-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"start-[9px] size-[18px] data-checked:start-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"start-2.5 size-5 data-checked:start-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=/*@__PURE__*/r.forwardRef(function({checked:k,defaultChecked:b,onCheckedChange:x,label:y,description:j,errorMessage:z,icons:w=!1,labelPlacement:N="end",size:_,color:C,required:M=!1,disabled:v=!1,readOnly:P=!1,name:R,id:S,fullWidth:W=!1,className:q,style:B},F){const I=f(_),L=u(C),O=p(z),T=O?"error":L,A=g[I],D=r.useId(),E=S??D,G=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:F,id:E,name:R,checked:k,defaultChecked:b,required:M,disabled:v,readOnly:P,onCheckedChange:e=>x?.(e),className:["mp-switch__track group relative box-border inline-flex shrink-0 p-0","rounded-mp-full appearance-none font-[inherit] outline-none","transition-[background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",A.track,v?["bg-mp-surface-container-highest inset-ring-2 inset-ring-mp-on-surface/12","cursor-default","data-checked:bg-mp-on-surface/12 data-checked:inset-ring-0"].join(" "):[P?"cursor-default":"cursor-pointer","bg-mp-surface-container-highest inset-ring-2",O?"inset-ring-mp-error":"inset-ring-mp-outline","data-checked:inset-ring-0 data-checked:bg-(--_mp-accent)"].join(" ")].join(" "),children:a(n.Thumb,{className:["mp-switch__thumb absolute top-1/2 flex -translate-y-1/2 items-center justify-center","rounded-full","transition-[inset-inline-start,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",A.thumb,v?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[O?"bg-mp-error":"bg-mp-outline","data-checked:bg-(--_mp-on-accent)"].join(" ")].join(" "),children:[v?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",A.halo,"bg-mp-on-surface group-data-checked:bg-(--_mp-accent)"].join(" ")}),w?a(t,{children:[e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard opacity-0 group-data-checked:opacity-100",v?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(s,{icon:o,size:A.glyph,strokeWidth:3})}),e("span",{className:["absolute inset-0 flex items-center justify-center","text-mp-surface-container-highest","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-checked:opacity-0"].join(" "),children:e(s,{icon:c,size:A.glyph,strokeWidth:3})})]}):null]})})}),H=p(y)||p(j)||O?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===N?"flex-1":""].filter(Boolean).join(" "),children:[p(y)?a(i.Label,{htmlFor:E,className:["leading-[1.4]",v?"text-mp-on-surface/38 cursor-default":P?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,M?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:j,errorMessage:z})]}):null;return e(i.Root,{className:["mp-switch align-top",W?"flex w-full":"inline-flex",q??""].filter(Boolean).join(" "),disabled:v,invalid:O,"data-mp-size":I,style:{...l(T),...B},children:e("div",{className:["flex w-full items-start gap-3",m[I]].join(" "),children:a(t,"start"===N?{children:[H,G]}:{children:[G,H]})})})});

package/dist/components/table/MPTable.d.ts

@@ -139,4 +139,4 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
  * than a ref on the scroll container is worth — and a caller who needs one can
  * put it on a `<div>` of their own around this.
  */
-export declare function MPTable<Row>({ headers, items, getRowKey, caption, empty, locale: localeProp, striped, hoverable, stickyHeader, onRowClick, variant, size, color, className, style, ...props }: MPTableProps<Row>): React.JSX.Element;
+export declare function MPTable<Row>({ headers, items, getRowKey, caption, empty, locale: localeProp, striped, hoverable, stickyHeader, onRowClick, variant, size: sizeProp, color: colorProp, className, style, ...props }: MPTableProps<Row>): React.JSX.Element;

package/dist/components/table/MPTable.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as o,useMPMessages as a}from"../../internal/locale.js";import{TABLE as n}from"../../internal/messages/table.js";import{cssLength as i}from"../../internal/length.js";import{META_TEXT as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as s}from"../../internal/surface.js";const c={xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},d={xs:"0.375rem",sm:"0.625rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},p={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},u={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},x=/*@__PURE__*/["[--_mp-row:transparent]","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ");function y(e){if(null==e)return null;const t=typeof e;return"string"===t||"number"===t||"bigint"===t||"boolean"===t||r.isValidElement(e)?e:null}export function MPTable({headers:r,items:f,getRowKey:b,caption:g,empty:h,locale:v,striped:w=!1,hoverable:j=!1,stickyHeader:k=!1,onRowClick:N,variant:_="outlined",size:C="md",color:$="primary",className:A,style:B,...z}){const T=a(n,o(v)),D=c[C],E=d[C],K=Boolean(N),R=j||K,H={padding:`${E} ${D}`},I={...H,backgroundColor:"var(--_mp-color-surface-container)"},M={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":C,"data-mp-variant":_,className:["mp-table rounded-mp-md overflow-x-auto",s[_],A??""].filter(Boolean).join(" "),style:{...l($),...B},...z,children:t("table",{className:`text-mp-on-surface w-full text-start ${p[C]}`,style:{borderCollapse:"collapse"},children:[g?e("caption",{className:`text-mp-on-surface-variant ${m}`,style:{...H,textAlign:"start"},children:g}):null,e("colgroup",{children:r.map(t=>e("col",{style:void 0===t.width?void 0:{width:i(t.width)}},t.key))}),e("thead",{children:e("tr",{children:r.map(t=>e("th",{scope:"col",className:["text-mp-on-surface-variant whitespace-nowrap",u[C],k?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...I,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===f.length?e("tr",{className:x,style:M,children:e("td",{colSpan:r.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${D}`,textAlign:"center"},children:h??T.empty})}):f.map((t,l)=>e("tr",{className:[x,w&&l%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",R?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",K?["cursor-pointer","outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" "),style:M,tabIndex:K?0:void 0,onClick:N?()=>N(t,l):void 0,onKeyDown:N?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),N(t,l))}:void 0,children:r.map(r=>e("td",{style:{...H,textAlign:r.align??"start"},children:r.render?r.render(t,l):y(t[r.key])},r.key))},b?b(t,l):l))})]})})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as o,useMPMessages as n}from"../../internal/locale.js";import{TABLE as a}from"../../internal/messages/table.js";import{cssLength as i}from"../../internal/length.js";import{META_TEXT as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as s}from"../../internal/surface.js";import{useMPColor as c,useMPSize as d}from"../../internal/config.js";const p={xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},u={xs:"0.375rem",sm:"0.625rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},x={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},f={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},y=/*@__PURE__*/["[--_mp-row:transparent]","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ");function g(e){if(null==e)return null;const t=typeof e;return"string"===t||"number"===t||"bigint"===t||"boolean"===t||r.isValidElement(e)?e:null}export function MPTable({headers:r,items:b,getRowKey:h,caption:v,empty:j,locale:w,striped:k=!1,hoverable:N=!1,stickyHeader:_=!1,onRowClick:C,variant:$="outlined",size:A,color:B,className:z,style:T,...D}){const E=d(A),K=c(B),R=n(a,o(w)),H=p[E],I=u[E],M=Boolean(C),P=N||M,S={padding:`${I} ${H}`},V={...S,backgroundColor:"var(--_mp-color-surface-container)"},q={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":E,"data-mp-variant":$,className:["mp-table rounded-mp-md overflow-x-auto",s[$],z??""].filter(Boolean).join(" "),style:{...l(K),...T},...D,children:t("table",{className:`text-mp-on-surface w-full text-start ${x[E]}`,style:{borderCollapse:"collapse"},children:[v?e("caption",{className:`text-mp-on-surface-variant ${m}`,style:{...S,textAlign:"start"},children:v}):null,e("colgroup",{children:r.map(t=>e("col",{style:void 0===t.width?void 0:{width:i(t.width)}},t.key))}),e("thead",{children:e("tr",{children:r.map(t=>e("th",{scope:"col",className:["text-mp-on-surface-variant whitespace-nowrap",f[E],_?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...V,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===b.length?e("tr",{className:y,style:q,children:e("td",{colSpan:r.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${H}`,textAlign:"center"},children:j??R.empty})}):b.map((t,l)=>e("tr",{className:[y,k&&l%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",P?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",M?["cursor-pointer","outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" "),style:q,tabIndex:M?0:void 0,onClick:C?()=>C(t,l):void 0,onKeyDown:C?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),C(t,l))}:void 0,children:r.map(r=>e("td",{style:{...S,textAlign:r.align??"start"},children:r.render?r.render(t,l):g(t[r.key])},r.key))},h?h(t,l):l))})]})})}

package/dist/components/tabs/MPTabs.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{CONTROL_GAP as r,hasContent as l,SHEET_GAP as s}from"../../internal/scale.js";const c=/*@__PURE__*/a.createContext({variant:"primary",size:"md",iconPosition:"top",fullWidth:!1}),m={xs:"h-8",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},u={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},d={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},p={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},f={xs:12,sm:14,md:16,lg:20,xl:24},h={xs:18,sm:20,md:24,lg:24,xl:28};function x(e,t,i,o=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(l(e)&&t.push(e));if(e.type===a.Fragment)return void x(e.props.children,t,i,`${o}${String(e.key)}/`);const n=o?a.cloneElement(e,{key:`${o}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(n):t.push(n)})}export const MPTabs=/*@__PURE__*/a.forwardRef(function({variant:n="primary",color:r="primary",size:l="md",value:m,defaultValue:u,onValueChange:d,iconPosition:p,activateOnFocus:h=!1,loopFocus:v=!0,divider:b=!0,fullWidth:y=!1,className:_,style:g,children:w,"aria-label":j,...P},N){const k=p??("primary"===n?"top":"start"),M=a.useMemo(()=>({variant:n,size:l,iconPosition:k,fullWidth:y}),[n,l,k,y]),$=[],z=[];return x(w,$,z),e(c.Provider,{value:M,children:t(i.Root,{ref:N,value:m,defaultValue:u,onValueChange:e=>d?.(e),"data-mp-size":l,"data-mp-variant":n,className:["mp-tabs flex min-w-0 flex-col",s[l],_??""].filter(Boolean).join(" "),style:{...o(r),"--_mp-tab-inset":`${f[l]}px`,...g},...P,children:[t(i.List,{"aria-label":j,activateOnFocus:h,loopFocus:v,className:["mp-tabs__list relative flex shrink-0",b?"border-mp-outline-variant border-b":"",y?"w-full":"","overflow-x-auto overflow-y-hidden"].filter(Boolean).join(" "),children:[$,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===n?["h-0.75 rounded-t-full","left-[calc(var(--active-tab-left)_+_var(--_mp-tab-inset))]","w-[calc(var(--active-tab-width)_-_2_*_var(--_mp-tab-inset))]"].join(" "):"left-(--active-tab-left) h-0.5 w-(--active-tab-width)","[transition-property:left,width]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" ")})]}),z]})})});export const MPTab=/*@__PURE__*/a.forwardRef(function({value:o,icon:s,disabled:f=!1,className:x,children:v,...b},y){const{variant:_,size:g,iconPosition:w,fullWidth:j}=a.useContext(c),P="top"===w&&l(s);return t(i.Tab,{ref:y,value:o,disabled:f,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none bg-transparent font-[inherit] whitespace-nowrap select-none","overflow-hidden outline-none","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",P?`flex-col gap-1 ${u[g]}`:`flex-row ${m[g]}`,P?"":r[g],d[g],p[g],f?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===_?"data-active:text-(--_mp-accent)":"data-active:text-mp-on-surface"].join(" "),"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid",j?"flex-1":"",x??""].filter(Boolean).join(" "),...b,children:[f?null:e(n,{}),l(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:h[g],height:h[g]},children:s}):null,l(v)?e("span",{className:"relative truncate",children:v}):null]})});export const MPTabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:a=!1,className:o,children:n,...r},l){return e(i.Panel,{ref:l,value:t,keepMounted:a,className:["mp-tabs__panel text-mp-on-surface min-w-0 flex-1","rounded-mp-xs outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-starting-style:opacity-0",o??""].filter(Boolean).join(" "),...r,children:n})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{CONTROL_GAP as r,hasContent as l,SHEET_GAP as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as m}from"../../internal/config.js";const u=/*@__PURE__*/a.createContext({variant:"primary",size:"md",iconPosition:"top",fullWidth:!1}),p={xs:"h-8",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},d={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},f={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},h={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},x={xs:12,sm:14,md:16,lg:20,xl:24},v={xs:18,sm:20,md:24,lg:24,xl:28};function b(e,t,i,o=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(l(e)&&t.push(e));if(e.type===a.Fragment)return void b(e.props.children,t,i,`${o}${String(e.key)}/`);const n=o?a.cloneElement(e,{key:`${o}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(n):t.push(n)})}export const MPTabs=/*@__PURE__*/a.forwardRef(function({variant:n="primary",color:r,size:l,value:p,defaultValue:d,onValueChange:f,iconPosition:h,activateOnFocus:v=!1,loopFocus:y=!0,divider:g=!0,fullWidth:_=!1,className:w,style:j,children:P,"aria-label":N,...k},M){const $=c(r),z=m(l),C=h??("primary"===n?"top":"start"),F=a.useMemo(()=>({variant:n,size:z,iconPosition:C,fullWidth:_}),[n,z,C,_]),T=[],V=[];return b(P,T,V),e(u.Provider,{value:F,children:t(i.Root,{ref:M,value:p,defaultValue:d,onValueChange:e=>f?.(e),"data-mp-size":z,"data-mp-variant":n,className:["mp-tabs flex min-w-0 flex-col",s[z],w??""].filter(Boolean).join(" "),style:{...o($),"--_mp-tab-inset":`${x[z]}px`,...j},...k,children:[t(i.List,{"aria-label":N,activateOnFocus:v,loopFocus:y,className:["mp-tabs__list relative flex shrink-0",g?"border-mp-outline-variant border-b":"",_?"w-full":"","overflow-x-auto overflow-y-hidden"].filter(Boolean).join(" "),children:[T,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===n?["h-0.75 rounded-t-full","left-[calc(var(--active-tab-left)_+_var(--_mp-tab-inset))]","w-[calc(var(--active-tab-width)_-_2_*_var(--_mp-tab-inset))]"].join(" "):"left-(--active-tab-left) h-0.5 w-(--active-tab-width)","[transition-property:left,width]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" ")})]}),V]})})});export const MPTab=/*@__PURE__*/a.forwardRef(function({value:o,icon:s,disabled:c=!1,className:m,children:x,...b},y){const{variant:g,size:_,iconPosition:w,fullWidth:j}=a.useContext(u),P="top"===w&&l(s);return t(i.Tab,{ref:y,value:o,disabled:c,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none bg-transparent font-[inherit] whitespace-nowrap select-none","overflow-hidden outline-none","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",P?`flex-col gap-1 ${d[_]}`:`flex-row ${p[_]}`,P?"":r[_],f[_],h[_],c?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===g?"data-active:text-(--_mp-accent)":"data-active:text-mp-on-surface"].join(" "),"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid",j?"flex-1":"",m??""].filter(Boolean).join(" "),...b,children:[c?null:e(n,{}),l(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:v[_],height:v[_]},children:s}):null,l(x)?e("span",{className:"relative truncate",children:x}):null]})});export const MPTabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:a=!1,className:o,children:n,...r},l){return e(i.Panel,{ref:l,value:t,keepMounted:a,className:["mp-tabs__panel text-mp-on-surface min-w-0 flex-1","rounded-mp-xs outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-starting-style:opacity-0",o??""].filter(Boolean).join(" "),...r,children:n})});

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

@@ -1,9 +1,19 @@
 import * as React from 'react';
 import type { MPMessages } from '../../internal/i18n.js';
-import type { MPStyleProps } from '../../types.js';
-/** The input modes this field is built for. */
-export type MPTextFieldType = 'email' | 'password' | 'text';
-export interface MPTextFieldProps extends MPStyleProps {
+import type { MPControlEventProps, MPStyleProps } from '../../types.js';
+/**
+ * The input modes this field is built for.
+ *
+ * `search` is here for the keyboard it summons and the autofill it declines
+ * rather than for anything visual: iOS labels the return key "search" for it,
+ * and a browser keeps its own history of what was typed into one. The field
+ * draws exactly as `text` does — the browser's own clear button is suppressed by
+ * the same reset every other control in the library gets — because a search box
+ * that came with a second × next to `MPTextField`'s adornments would be two
+ * affordances doing one job.
+ */
+export type MPTextFieldType = 'email' | 'password' | 'search' | 'text';
+export interface MPTextFieldProps extends MPStyleProps, MPControlEventProps<HTMLInputElement | HTMLTextAreaElement> {
     /**
      * The field's text. This is a controlled component: what is shown is what is
      * passed, except during composition — see `onChange`.
@@ -63,10 +73,17 @@ export interface MPTextFieldProps extends MPStyleProps {
      */
     readOnly?: boolean;
     /**
-     * Swallows the Enter key instead of letting it insert a newline. Only
-     * meaningful with `rows`, since a single-line field has no newline to insert
-     * — there, Enter is already prevented so it cannot submit a surrounding form
-     * twice.
+     * Takes the Enter key away from whatever would otherwise have it.
+     *
+     * With `rows` that is the newline, which is the usual reason to reach for
+     * this: a multiline field wired to `onSubmit` where Enter should send rather
+     * than wrap.
+     *
+     * On a single-line field it is the *form* — Enter in an `<input>` inside a
+     * `<form>` submits it — so this is how a field opts out of a submission it
+     * has no part in. A field with an `onSubmit` already opts out, because
+     * answering the key twice is the same accident spelled differently.
+     * @default false
      */
     disableEnterKey?: boolean;
     /**
@@ -113,16 +130,23 @@ export interface MPTextFieldProps extends MPStyleProps {
      * Called when Enter is pressed.
      *
      * On a single-line field the key is then swallowed, so a surrounding form is
-     * submitted once rather than also natively.
+     * submitted once rather than also natively. **Passing this is what makes the
+     * field take the key at all**: without it Enter is left to the browser, which
+     * inside a `<form>` means the native submit an `<input>` has always done. A
+     * page that already writes `<form onSubmit>` needs nothing here.
      *
-     * On a **multiline** field it is not, and both things happen: this fires *and*
-     * a newline is inserted. That is deliberate — the prop reports the keystroke
-     * rather than deciding what the field does with it — but it is worth knowing
-     * before wiring it to something that sends. `disableEnterKey` is what makes
-     * Enter a submission there and nothing else.
+     * On a **multiline** field it is not swallowed, and both things happen: this
+     * fires *and* a newline is inserted. That is deliberate — the prop reports the
+     * keystroke rather than deciding what the field does with it — but it is worth
+     * knowing before wiring it to something that sends. `disableEnterKey` is what
+     * makes Enter a submission there and nothing else.
      *
      * Never called for the Enter that commits an IME composition: that keystroke
      * belongs to the input method, not to the form.
+     *
+     * An `onKeyDown` of your own runs before this and can take the keystroke: an
+     * `event.preventDefault()` there means no submission is reported and the
+     * field does nothing further with the key.
      */
     onSubmit?: () => void;
     /**

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

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

package/dist/components/time-picker/MPTimePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as r}from"../icon/MPIcon.js";import{ClockIcon as t}from"../../constants/icons.js";import{MPTimeGrid as a}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as h}from"../../internal/scale.js";import{formatDate as f,isHour12 as g,isValidDate as S,secondsOfDay as b,timeUnitSpan as j,toISOTime as v,withPlaceholder as C,withTime as x}from"../../internal/date.js";export const MPTimePicker=/*@__PURE__*/n.forwardRef(function({value:k,defaultValue:w,onValueChange:z,open:D,defaultOpen:O,onOpenChange:y,referenceDate:P,minTime:T,maxTime:M,shouldDisableTime:I,hour12:V,showSeconds:B=!1,hourStep:N=1,minuteStep:R=1,secondStep:F=1,locale:H,format:q,placeholder:A,clearable:E=!1,showNowButton:G=!0,closeOnSelect:J=!1,labels:K,name:L,size:Q="md",color:U="primary",readOnly:W=!1,disabled:X=!1,startIcon:Y,...Z},$){const _=m(H),ee=d(p,_,K),oe=V??g(_),[ne,le]=n.useState(w??null),re=void 0!==k?k:ne,[te,ae]=n.useState(O??!1),ie=D??te,[se]=n.useState(()=>P??new Date),ce=e=>{e&&(W||X)||(void 0===D&&ae(e),y?.(e))},ue=e=>{void 0===k&&le(e),z?.(e)},me=n.useCallback((e,o)=>{const[n,l]=j(o,e);return!!(S(T)&&l<b(T))||(!!(S(M)&&n>b(M))||(I?.(e,o)??!1))},[T,M,I]),de=q??{hour:"numeric",minute:"2-digit",hour12:oe,...B?{second:"2-digit"}:{}},pe=new Date,he=x(P??se,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:B?pe.getSeconds():0}),fe=G||E||!J,ge=C(u(_,de),A);return e(c,{...Z,slug:"time-picker",size:Q,color:U,readOnly:W,disabled:X,triggerRef:$,startIcon:void 0===Y?e(r,{icon:t,size:h[Q]}):Y,display:S(re)?f(re,_,de):A??"",samples:ge,empty:!S(re),clearable:E,onClear:()=>ue(null),open:ie,onOpenChange:ce,labels:ee,hiddenValues:L?[{name:L,value:S(re)?v(re,B):""}]:void 0,children:o("div",{className:"flex flex-col "+(fe?"gap-1.5":""),children:[e(a,{size:Q,locale:_,value:S(re)?re:null,referenceDate:P??se,onChange:e=>{ue(e),J&&ce(!1)},hour12:oe,showSeconds:B,hourStep:N,minuteStep:R,secondStep:F,shouldDisableTime:me,labels:ee,autoFocus:!0}),fe?o(s,{children:[E?e(l,{variant:"text",size:i[Q],color:U,onClick:()=>{ue(null),ce(!1)},children:ee.clear}):null,G?e(l,{variant:"text",size:i[Q],color:U,disabled:me(he,"second"),onClick:()=>{ue(he),ce(!1)},children:ee.now}):null,J?null:e(l,{variant:"filled",size:i[Q],color:U,onClick:()=>ce(!1),children:ee.done})]}):null]})})});
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as r}from"../icon/MPIcon.js";import{ClockIcon as t}from"../../constants/icons.js";import{MPTimeGrid as i}from"../../internal/Calendar.js";import{FOOTER_SIZE as a,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{formatDate as h,isHour12 as g,isValidDate as j,secondsOfDay as S,timeUnitSpan as b,toISOTime as v,withPlaceholder as C,withTime as x}from"../../internal/date.js";import{useMPColor as k,useMPSize as w}from"../../internal/config.js";export const MPTimePicker=/*@__PURE__*/n.forwardRef(function({value:z,defaultValue:D,onValueChange:O,open:P,defaultOpen:T,onOpenChange:y,referenceDate:M,minTime:I,maxTime:V,shouldDisableTime:B,hour12:N,showSeconds:R=!1,hourStep:F=1,minuteStep:H=1,secondStep:q=1,locale:A,format:E,placeholder:G,clearable:J=!1,showNowButton:K=!0,closeOnSelect:L=!1,labels:Q,name:U,size:W,color:X,readOnly:Y=!1,disabled:Z=!1,startIcon:$,..._},ee){const oe=w(W),ne=k(X),le=m(A),re=d(p,le,Q),te=N??g(le),[ie,ae]=n.useState(D??null),se=void 0!==z?z:ie,[ce,ue]=n.useState(T??!1),me=P??ce,[de]=n.useState(()=>M??new Date),pe=e=>{e&&(Y||Z)||(void 0===P&&ue(e),y?.(e))},fe=e=>{void 0===z&&ae(e),O?.(e)},he=n.useCallback((e,o)=>{const[n,l]=b(o,e);return!!(j(I)&&l<S(I))||(!!(j(V)&&n>S(V))||(B?.(e,o)??!1))},[I,V,B]),ge=E??{hour:"numeric",minute:"2-digit",hour12:te,...R?{second:"2-digit"}:{}},je=new Date,Se=x(M??de,{hours:je.getHours(),minutes:je.getMinutes(),seconds:R?je.getSeconds():0}),be=K||J||!L,ve=C(u(le,ge),G);return e(c,{..._,slug:"time-picker",size:oe,color:ne,readOnly:Y,disabled:Z,triggerRef:ee,startIcon:void 0===$?e(r,{icon:t,size:f[oe]}):$,display:j(se)?h(se,le,ge):G??"",samples:ve,empty:!j(se),clearable:J,onClear:()=>fe(null),open:me,onOpenChange:pe,labels:re,hiddenValues:U?[{name:U,value:j(se)?v(se,R):""}]:void 0,children:o("div",{className:"flex flex-col "+(be?"gap-1.5":""),children:[e(i,{size:oe,locale:le,value:j(se)?se:null,referenceDate:M??de,onChange:e=>{fe(e),L&&pe(!1)},hour12:te,showSeconds:R,hourStep:F,minuteStep:H,secondStep:q,shouldDisableTime:he,labels:re,autoFocus:!0}),be?o(s,{children:[J?e(l,{variant:"text",size:a[oe],color:ne,onClick:()=>{fe(null),pe(!1)},children:re.clear}):null,K?e(l,{variant:"text",size:a[oe],color:ne,disabled:he(Se,"second"),onClick:()=>{fe(Se),pe(!1)},children:re.now}):null,L?null:e(l,{variant:"filled",size:a[oe],color:ne,onClick:()=>pe(!1),children:re.done})]}):null]})})});

package/dist/components/timeline/MPTimeline.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import type { MPStepConnector, MPStepStatus } from '../../internal/step.js';
 import type { MPColor, MPOrientation, MPSize } from '../../types.js';
 /**
  * How far along one item is.
@@ -9,9 +10,16 @@ import type { MPColor, MPOrientation, MPSize } from '../../types.js';
  * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
  * around it, an empty one — rather than three shades of the same thing.
  */
-export type MPTimelineStatus = 'complete' | 'current' | 'upcoming';
+/**
+ * How far a step has got.
+ *
+ * The same three `MPStepper` uses, and the same table draws them — see
+ * `internal/step.ts` for why a timeline and a stepper are one picture drawn by
+ * two components.
+ */
+export type MPTimelineStatus = MPStepStatus;
 /** How the line between two items is drawn. `none` leaves the gap open. */
-export type MPTimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export type MPTimelineConnector = MPStepConnector;
 export interface MPTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
     /**
      * How far the sequence has got: the index of the item being worked on now.

package/dist/components/timeline/MPTimeline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useRender as n}from"@base-ui/react/use-render";import{accentSlots as l}from"../../internal/accent.js";import{hasContent as a,META_TEXT as o,PROSE_TEXT as i,SHEET_TITLE as s}from"../../internal/scale.js";const c=/*@__PURE__*/t.createContext(null),m=/*@__PURE__*/t.createContext({index:0,last:!1}),p={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"},d={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},u={xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},x={xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},f={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""},b={complete:"bg-(--_mp-accent) text-(--_mp-on-accent)",current:"bg-(--_mp-accent) text-(--_mp-on-accent) shadow-[0_0_0_0.25rem_var(--_mp-accent-container)]",upcoming:"border-mp-outline text-mp-on-surface-variant border-2 bg-transparent"},v={complete:"border-(--_mp-accent)",current:"border-mp-outline-variant",upcoming:"border-mp-outline-variant"},h={complete:"text-mp-on-surface",current:"text-(--_mp-accent)",upcoming:"text-mp-on-surface-variant"};export const MPTimelineItem=/*@__PURE__*/t.forwardRef(function({title:n,meta:g,bullet:_,status:N,color:j,connector:y="solid",className:z,style:w,children:$,...C},M){const P=t.useContext(c),{index:B,last:k}=t.useContext(m),A=P?.size??"md",R=P?.orientation??"vertical",T=j??P?.color??"primary",I=P?.active??null,q=N??(null===I?"upcoming":B<I?"complete":B===I?"current":"upcoming"),D="horizontal"===R,E="none"!==y&&!k,F=e("span",{"aria-hidden":"true",className:["rounded-mp-full relative z-10 flex shrink-0 items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",b[q],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)"].join(" "),children:_}),G=E?e("span",{"aria-hidden":"true",className:["pointer-events-none absolute",D?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",f[y],v[q]].filter(Boolean).join(" ")}):null,H=r("div",{className:"flex min-w-0 flex-col gap-0.5 "+(D?"mt-2":""),children:[a(n)||a(g)?r("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[a(n)?e("span",{className:`${s[A]} ${h[q]}`,children:n}):null,a(g)?e("span",{className:`text-mp-on-surface-variant ${o}`,children:g}):null]}):null,a($)?e("div",{className:`text-mp-on-surface-variant ${i[A]}`,children:$}):null]});return r("li",{ref:M,"aria-current":"current"===q?"step":void 0,"data-status":q,className:["relative",D?`flex min-w-0 flex-1 flex-col ${k?"":x[A]}`:`flex ${d[A]} ${k?"":u[A]}`,z??""].filter(Boolean).join(" "),style:{"--_mp-bullet":p[A],...l(T),...w},...C,children:[G,F,H]})});export const MPTimeline=/*@__PURE__*/t.forwardRef(function({active:r,size:l="md",color:a="primary",orientation:o="vertical",render:i,className:s,style:p,children:d,...u},x){const f=t.Children.toArray(d),b=f.length,v=t.useMemo(()=>({size:l,orientation:o,color:a,active:r??null}),[l,o,a,r]),h=t.useMemo(()=>Array.from({length:b},(e,r)=>({index:r,last:r===b-1})),[b]),g=n({render:i??e("ol",{}),ref:x,props:{role:"list","data-mp-size":l,className:["mp-timeline flex","horizontal"===o?"flex-row":"flex-col",s??""].filter(Boolean).join(" "),style:p,children:f.map((r,t)=>e(m.Provider,{value:h[t],children:r},t)),...u}});return e(c.Provider,{value:v,children:g})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as o,META_TEXT as a,PROSE_TEXT as i,SHEET_TITLE as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as m}from"../../internal/config.js";import{BORDER_STYLE as u,BULLET as d,BULLET_GAP as p,BULLET_SIZE as f,CONNECTOR_COLOR as x,ITEM_GAP as h,ITEM_GAP_X as v,TITLE_COLOR as b}from"../../internal/step.js";const j=/*@__PURE__*/l.createContext(null),N=/*@__PURE__*/l.createContext({index:0,last:!1});export const MPTimelineItem=/*@__PURE__*/l.forwardRef(function({title:r,meta:c,bullet:m,status:_,color:g,connector:y="solid",className:z,style:w,children:$,...C},M){const P=l.useContext(j),{index:B,last:k}=l.useContext(N),A=P?.size??"md",R=P?.orientation??"vertical",T=g??P?.color??"primary",I=P?.active??null,q=_??(null===I?"upcoming":B<I?"complete":B===I?"current":"upcoming"),D="horizontal"===R,E="none"!==y&&!k,F=e("span",{"aria-hidden":"true",className:["rounded-mp-full relative z-10 flex shrink-0 items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",d[q],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)"].join(" "),children:m}),G=E?e("span",{"aria-hidden":"true",className:["pointer-events-none absolute",D?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",u[y],x[q]].filter(Boolean).join(" ")}):null,H=t("div",{className:"flex min-w-0 flex-col gap-0.5 "+(D?"mt-2":""),children:[o(r)||o(c)?t("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[o(r)?e("span",{className:`${s[A]} ${b[q]}`,children:r}):null,o(c)?e("span",{className:`text-mp-on-surface-variant ${a}`,children:c}):null]}):null,o($)?e("div",{className:`text-mp-on-surface-variant ${i[A]}`,children:$}):null]});return t("li",{ref:M,"aria-current":"current"===q?"step":void 0,"data-status":q,className:["relative",D?`flex min-w-0 flex-1 flex-col ${k?"":v[A]}`:`flex ${p[A]} ${k?"":h[A]}`,z??""].filter(Boolean).join(" "),style:{"--_mp-bullet":f[A],...n(T),...w},...C,children:[G,F,H]})});export const MPTimeline=/*@__PURE__*/l.forwardRef(function({active:t,size:n,color:o,orientation:a="vertical",render:i,className:s,style:u,children:d,...p},f){const x=m(n),h=c(o),v=l.Children.toArray(d),b=v.length,_=l.useMemo(()=>({size:x,orientation:a,color:h,active:t??null}),[x,a,h,t]),g=l.useMemo(()=>Array.from({length:b},(e,t)=>({index:t,last:t===b-1})),[b]),y=r({render:i??e("ol",{}),ref:f,props:{role:"list","data-mp-size":x,className:["mp-timeline flex","horizontal"===a?"flex-row":"flex-col",s??""].filter(Boolean).join(" "),style:u,children:v.map((t,l)=>e(N.Provider,{value:g[l],children:t},l)),...p}});return e(j.Provider,{value:_,children:y})});

package/dist/components/toggle/MPToggle.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as r}from"@base-ui/react/toggle";import{accentSlots as o}from"../../internal/accent.js";import{MPButtonGroupContext as a}from"../../internal/button-group.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,CONTROL_HEIGHT as c,CONTROL_PAD_X as l,CONTROL_SQUARE as p,CONTROL_TEXT as m,hasContent as d}from"../../internal/scale.js";const u={filled:"bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"bg-transparent text-mp-on-surface-variant"},f={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"bg-transparent text-(--_mp-accent)"},b={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPToggle=/*@__PURE__*/n.forwardRef(function({variant:g,size:x,color:v,disabled:h,pressed:w,defaultPressed:_,onPressedChange:j,value:y,startIcon:P,endIcon:z,fullWidth:C=!1,className:k,style:I,children:N,...B},L){const M=n.useContext(a),R=g??M?.variant??"outlined",S=x??M?.size??"md",T=v??M?.color??"primary",W=h??M?.disabled??!1,$=!d(N);return t(r,{ref:L,value:y,pressed:w,defaultPressed:_,onPressedChange:e=>j?.(e),disabled:W,"data-mp-size":S,"data-mp-variant":R,className:e=>["mp-toggle group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full 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,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",c[S],m[S],i[S],$?`${p[S]} px-0`:l[S],W?b[R]:e.pressed?f[R]:u[R],W?"cursor-default":"",C?"w-full":"",k??""].filter(Boolean).join(" "),style:{...o(T),...I},...B,children:[W?null:e(s,{}),P,N,z]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as r}from"@base-ui/react/toggle";import{accentSlots as o}from"../../internal/accent.js";import{MPButtonGroupContext as a}from"../../internal/button-group.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,CONTROL_HEIGHT as c,CONTROL_PAD_X as l,CONTROL_SQUARE as p,CONTROL_TEXT as m,hasContent as d}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={filled:"bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"bg-transparent text-mp-on-surface-variant"},g={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"bg-transparent text-(--_mp-accent)"},x={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPToggle=/*@__PURE__*/n.forwardRef(function({variant:v,size:h,color:j,disabled:w,pressed:_,defaultPressed:y,onPressedChange:P,value:z,startIcon:C,endIcon:k,fullWidth:I=!1,className:N,style:B,children:L,...M},R){const S=n.useContext(a),T=v??S?.variant??"outlined",W=f(h??S?.size),$=u(j??S?.color),q=w??S?.disabled??!1,A=!d(L);return t(r,{ref:R,value:z,pressed:_,defaultPressed:y,onPressedChange:e=>P?.(e),disabled:q,"data-mp-size":W,"data-mp-variant":T,className:e=>["mp-toggle group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full 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,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",c[W],m[W],i[W],A?`${p[W]} px-0`:l[W],q?x[T]:e.pressed?g[T]:b[T],q?"cursor-default":"",I?"w-full":"",N??""].filter(Boolean).join(" "),style:{...o($),...B},...M,children:[q?null:e(s,{}),C,L,k]})});

package/dist/components/transfer/MPTransfer.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{MPBox as l}from"../box/MPBox.js";import{MPCheckbox as s}from"../checkbox/MPCheckbox.js";import{MPIcon as r}from"../icon/MPIcon.js";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPTextField as i}from"../text-field/MPTextField.js";import{ArrowRightIcon as o}from"../../constants/icons.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{cssLength as d}from"../../internal/length.js";import{TRANSFER as h}from"../../internal/messages/transfer.js";import{hasContent as f,META_TEXT as u,SHEET_PAD_X as p}from"../../internal/scale.js";const v={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},b={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function g({title:t,rows:r,total:n,ticked:o,onTick:c,onTickAll:m,search:d,onSearch:h,searchable:f,disabled:g,height:x,messages:w,variant:k,size:j,color:y}){const S=r.filter(e=>!e.disabled),N=S.filter(e=>o.has(e.value)),z=S.length>0&&N.length===S.length,C=N.length>0&&!z,T=p[j];return a(l,{variant:k,size:j,padded:!1,className:"mp-transfer__panel flex min-w-0 flex-col overflow-hidden",children:[a("div",{className:["mp-transfer__heading border-mp-outline-variant flex items-center gap-2 border-b",T,v[j]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(s,{size:j,color:y,checked:z,indeterminate:C,disabled:g||0===S.length,label:e("span",{className:"block truncate font-medium",children:t}),onCheckedChange:e=>m(e)})}),a("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${u}`,children:[N.length,"/",n]})]}),f?e("div",{className:`${T} ${v[j]}`,children:e(i,{size:j,fullWidth:!0,disabled:g,placeholder:w.search,"aria-label":w.search,value:d,onChange:h})}):null,e("div",{className:`mp-transfer__list flex flex-col overflow-y-auto overscroll-contain ${T} ${v[j]}`,style:{height:x},children:0===r.length?e("span",{className:`text-mp-on-surface-variant ${u} ${b[j]}`,children:w.empty}):r.map((a,t)=>e("div",{className:b[j],children:e(s,{size:j,color:y,label:a.label,checked:o.has(a.value),disabled:g||a.disabled,onCheckedChange:e=>c(a.value,e)})},`${t}:${a.value}`))})]})}function x(e,a){return""===a||("string"!=typeof e.label||e.label.toLowerCase().includes(a.toLowerCase()))}export const MPTransfer=/*@__PURE__*/t.forwardRef(function({items:l,value:s,defaultValue:i,onValueChange:u,sourceLabel:p,targetLabel:v,searchable:b=!1,height:w=220,disabled:k=!1,variant:j="outlined",size:y="md",color:S="primary",locale:N,labels:z,className:C,...T},$){const _=c(N),M=m(h,_,z),[P,L]=t.useState(i??[]),A=s??P,[B,I]=t.useState(()=>new Set),[V,E]=t.useState(""),[F,R]=t.useState(""),W=t.useMemo(()=>new Set(A),[A]),q=l.filter(e=>!W.has(e.value)),D=l.filter(e=>W.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));I(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const G=(e,a)=>{I(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},H=(e,a)=>{I(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},J=(e,a)=>{const t=e.filter(e=>!e.disabled&&B.has(e.value));if(0===t.length)return;const r=new Set(t.map(e=>e.value)),n=a?l.filter(e=>W.has(e.value)||r.has(e.value)).map(e=>e.value):A.filter(e=>!r.has(e));I(e=>new Set([...e].filter(e=>!r.has(e)))),(e=>{void 0===s&&L(e),u?.(e)})(n)},K=q.filter(e=>x(e,V)),O=D.filter(e=>x(e,F)),Q=K.some(e=>!e.disabled&&B.has(e.value)),U=O.some(e=>!e.disabled&&B.has(e.value)),X=d(w),Y={ticked:B,disabled:k,height:X,messages:M,variant:j,size:y,color:S,searchable:b};return a("div",{ref:$,"data-mp-size":y,className:["mp-transfer grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)]","min-[600px]:[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",C??""].filter(Boolean).join(" "),...T,children:[e(g,{...Y,title:f(p)?p:M.source,rows:K,total:q.length,onTick:G,onTickAll:e=>H(K,e),search:V,onSearch:E}),a("div",{className:"flex flex-row justify-center gap-2 min-[600px]:flex-col",children:[e(n,{size:y,color:S,variant:"text"===j?"text":"outlined",label:M.toTarget,disabled:k||!Q,onClick:()=>J(K,!0),icon:e(r,{icon:o,className:"rotate-90 min-[600px]:rotate-0"})}),e(n,{size:y,color:S,variant:"text"===j?"text":"outlined",label:M.toSource,disabled:k||!U,onClick:()=>J(O,!1),icon:e(r,{icon:o,className:"-rotate-90 min-[600px]:rotate-180"})})]}),e(g,{...Y,title:f(v)?v:M.target,rows:O,total:D.length,onTick:G,onTickAll:e=>H(O,e),search:F,onSearch:R})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{MPBox as l}from"../box/MPBox.js";import{MPCheckbox as s}from"../checkbox/MPCheckbox.js";import{MPIcon as r}from"../icon/MPIcon.js";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPTextField as i}from"../text-field/MPTextField.js";import{ArrowRightIcon as o}from"../../constants/icons.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{cssLength as d}from"../../internal/length.js";import{TRANSFER as h}from"../../internal/messages/transfer.js";import{useMPColor as f,useMPSize as u}from"../../internal/config.js";import{hasContent as p,META_TEXT as v,SHEET_PAD_X as b}from"../../internal/scale.js";const g={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},x={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function w({title:t,rows:r,total:n,ticked:o,onTick:c,onTickAll:m,search:d,onSearch:h,searchable:f,disabled:u,height:p,messages:w,variant:k,size:j,color:S}){const y=r.filter(e=>!e.disabled),N=y.filter(e=>o.has(e.value)),z=y.length>0&&N.length===y.length,C=N.length>0&&!z,T=b[j];return a(l,{variant:k,size:j,padded:!1,className:"mp-transfer__panel flex min-w-0 flex-col overflow-hidden",children:[a("div",{className:["mp-transfer__heading border-mp-outline-variant flex items-center gap-2 border-b",T,g[j]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(s,{size:j,color:S,checked:z,indeterminate:C,disabled:u||0===y.length,label:e("span",{className:"block truncate font-medium",children:t}),onCheckedChange:e=>m(e)})}),a("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${v}`,children:[N.length,"/",n]})]}),f?e("div",{className:`${T} ${g[j]}`,children:e(i,{size:j,fullWidth:!0,disabled:u,placeholder:w.search,"aria-label":w.search,value:d,onChange:h})}):null,e("div",{className:`mp-transfer__list flex flex-col overflow-y-auto overscroll-contain ${T} ${g[j]}`,style:{height:p},children:0===r.length?e("span",{className:`text-mp-on-surface-variant ${v} ${x[j]}`,children:w.empty}):r.map((a,t)=>e("div",{className:x[j],children:e(s,{size:j,color:S,label:a.label,checked:o.has(a.value),disabled:u||a.disabled,onCheckedChange:e=>c(a.value,e)})},`${t}:${a.value}`))})]})}function k(e,a){return""===a||("string"!=typeof e.label||e.label.toLowerCase().includes(a.toLowerCase()))}export const MPTransfer=/*@__PURE__*/t.forwardRef(function({items:l,value:s,defaultValue:i,onValueChange:v,sourceLabel:b,targetLabel:g,searchable:x=!1,height:j=220,disabled:S=!1,variant:y="outlined",size:N,color:z,locale:C,labels:T,className:$,..._},M){const P=u(N),L=f(z),A=c(C),B=m(h,A,T),[I,V]=t.useState(i??[]),E=s??I,[F,R]=t.useState(()=>new Set),[W,q]=t.useState(""),[D,G]=t.useState(""),H=t.useMemo(()=>new Set(E),[E]),J=l.filter(e=>!H.has(e.value)),K=l.filter(e=>H.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));R(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const O=(e,a)=>{R(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},Q=(e,a)=>{R(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},U=(e,a)=>{const t=e.filter(e=>!e.disabled&&F.has(e.value));if(0===t.length)return;const r=new Set(t.map(e=>e.value)),n=a?l.filter(e=>H.has(e.value)||r.has(e.value)).map(e=>e.value):E.filter(e=>!r.has(e));R(e=>new Set([...e].filter(e=>!r.has(e)))),(e=>{void 0===s&&V(e),v?.(e)})(n)},X=J.filter(e=>k(e,W)),Y=K.filter(e=>k(e,D)),Z=X.some(e=>!e.disabled&&F.has(e.value)),ee=Y.some(e=>!e.disabled&&F.has(e.value)),ae=d(j),te={ticked:F,disabled:S,height:ae,messages:B,variant:y,size:P,color:L,searchable:x};return a("div",{ref:M,"data-mp-size":P,className:["mp-transfer grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)]","min-[600px]:[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",$??""].filter(Boolean).join(" "),..._,children:[e(w,{...te,title:p(b)?b:B.source,rows:X,total:J.length,onTick:O,onTickAll:e=>Q(X,e),search:W,onSearch:q}),a("div",{className:"flex flex-row justify-center gap-2 min-[600px]:flex-col",children:[e(n,{size:P,color:L,variant:"text"===y?"text":"outlined",label:B.toTarget,disabled:S||!Z,onClick:()=>U(X,!0),icon:e(r,{icon:o,className:"rotate-90 min-[600px]:rotate-0"})}),e(n,{size:P,color:L,variant:"text"===y?"text":"outlined",label:B.toSource,disabled:S||!ee,onClick:()=>U(Y,!1),icon:e(r,{icon:o,className:"-rotate-90 min-[600px]:rotate-180"})})]}),e(w,{...te,title:p(g)?g:B.target,rows:Y,total:K.length,onTick:O,onTickAll:e=>Q(Y,e),search:D,onSearch:G})]})});

package/dist/components/typography/MPTypography.d.ts

@@ -40,6 +40,13 @@ export interface MPTypographyProps extends Omit<React.ComponentPropsWithoutRef<'
      * has **no default**: prose inherits the surface's own ink unless a role is
      * asked for, because the common case for a paragraph is to look like the
      * paragraphs around it.
+     *
+     * No default means no declaration, not a quiet one. Nothing here writes a
+     * `color` until this prop is passed, so a `text-white` on the dark section
+     * above wins by simply being the only thing that spoke — and a role outside
+     * the four accents is a `className` away: `className="text-mp-on-surface-variant"`
+     * on a `caption` is the muted line this component used to hand out whether or
+     * not it was wanted.
      */
     color?: MPColor;
     /**

package/dist/components/typography/MPTypography.js

@@ -1,2 +1 @@
-"use client";
-import*as p from"react";import{useRender as t}from"@base-ui/react/use-render";import{accentSlots as e}from"../../internal/accent.js";const r={h1:"[&.mp-typography]:text-mp-display-small",h2:"[&.mp-typography]:text-mp-headline-large",h3:"[&.mp-typography]:text-mp-headline-medium",h4:"[&.mp-typography]:text-mp-headline-small",h5:"[&.mp-typography]:text-mp-title-large",h6:"[&.mp-typography]:text-mp-title-medium",lead:"[&.mp-typography]:text-mp-title-large",body:"[&.mp-typography]:text-mp-body-large",caption:"[&.mp-typography]:text-mp-body-small",overline:"[&.mp-typography]:text-mp-label-small [&.mp-typography]:tracking-[0.08em] uppercase"},a={h1:"regular",h2:"regular",h3:"regular",h4:"regular",h5:"regular",h6:"medium",lead:"regular",body:"regular",caption:"regular",overline:"medium"},m={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},o=new Set(["caption","overline"]),y={h1:"[&.mp-typography]:mb-4",h2:"[&.mp-typography]:mb-3.5",h3:"[&.mp-typography]:mb-3",h4:"[&.mp-typography]:mb-2.5",h5:"[&.mp-typography]:mb-2",h6:"[&.mp-typography]:mb-2",lead:"[&.mp-typography]:mb-4",body:"[&.mp-typography]:mb-3",caption:"[&.mp-typography]:mb-2",overline:"[&.mp-typography]:mb-2"},h="[&.mp-typography]:mt-0 [&.mp-typography]:ms-0 [&.mp-typography]:me-0",l={regular:"[&.mp-typography]:font-normal",medium:"[&.mp-typography]:font-medium",semibold:"[&.mp-typography]:font-semibold",bold:"[&.mp-typography]:font-bold"},n={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},g={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const MPTypography=/*@__PURE__*/p.forwardRef(function({level:i="body",color:c,weight:d,align:s,lines:u,gutter:b=!1,render:x,className:f,style:v,children:j,...w},N){const k=["mp-typography",r[i],l[d??a[i]],h,b?y[i]:"[&.mp-typography]:mb-0",s?n[s]:"",u?g[u]??"line-clamp-6":"",c?"[&.mp-typography]:text-(--_mp-accent)":o.has(i)?"[&.mp-typography]:text-mp-on-surface-variant":"[&.mp-typography]:text-mp-on-surface",f??""].filter(Boolean).join(" ");return t({render:x??p.createElement(m[i]),ref:N,props:{className:k,style:c?{...e(c),...v}:v,children:j,...w}})});
+import*as p from"react";import{useRender as e}from"@base-ui/react/use-render";import{accentSlots as t}from"../../internal/accent.js";const r={h1:"[&.mp-typography]:text-mp-display-small",h2:"[&.mp-typography]:text-mp-headline-large",h3:"[&.mp-typography]:text-mp-headline-medium",h4:"[&.mp-typography]:text-mp-headline-small",h5:"[&.mp-typography]:text-mp-title-large",h6:"[&.mp-typography]:text-mp-title-medium",lead:"[&.mp-typography]:text-mp-title-large",body:"[&.mp-typography]:text-mp-body-large",caption:"[&.mp-typography]:text-mp-body-small",overline:"[&.mp-typography]:text-mp-label-small [&.mp-typography]:tracking-[0.08em] uppercase"},a={h1:"regular",h2:"regular",h3:"regular",h4:"regular",h5:"regular",h6:"medium",lead:"regular",body:"regular",caption:"regular",overline:"medium"},m={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},y={h1:"[&.mp-typography]:mb-4",h2:"[&.mp-typography]:mb-3.5",h3:"[&.mp-typography]:mb-3",h4:"[&.mp-typography]:mb-2.5",h5:"[&.mp-typography]:mb-2",h6:"[&.mp-typography]:mb-2",lead:"[&.mp-typography]:mb-4",body:"[&.mp-typography]:mb-3",caption:"[&.mp-typography]:mb-2",overline:"[&.mp-typography]:mb-2"},o="[&.mp-typography]:mt-0 [&.mp-typography]:ms-0 [&.mp-typography]:me-0",l={regular:"[&.mp-typography]:font-normal",medium:"[&.mp-typography]:font-medium",semibold:"[&.mp-typography]:font-semibold",bold:"[&.mp-typography]:font-bold"},h={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},n={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const MPTypography=/*@__PURE__*/p.forwardRef(function({level:g="body",color:i,weight:d,align:c,lines:s,gutter:b=!1,render:u,className:x,style:f,children:v,...j},w){const N=["mp-typography",r[g],l[d??a[g]],o,b?y[g]:"[&.mp-typography]:mb-0",c?h[c]:"",s?n[s]??"line-clamp-6":"",i?"[&.mp-typography]:text-(--_mp-accent)":"",x??""].filter(Boolean).join(" ");return e({render:u??p.createElement(m[g]),ref:w,props:{className:N,style:i?{...t(i),...f}:f,children:v,...j}})});