material-plus-ui 1.3.1 → 1.5.0

package/dist/components/segmented-button/MPSegmentedButton.d.ts

@@ -50,6 +50,13 @@ export interface MPSegmentedButtonProps extends MPStyleProps {
     disabled?: boolean;
     /** The accessible name of the set. */
     'aria-label'?: string;
+    /**
+     * Added to the set rather than to a segment. A segment carries
+     * `mp-segmented-button__segment`, which is what a descendant selector reaches
+     * one by.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design segmented button: two to five choices in one pill.

package/dist/components/segmented-button/MPSegmentedButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Toggle as n}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as i}from"../../constants/icons.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as u,CONTROL_TEXT as m}from"../../internal/scale.js";export const MPSegmentedButton=/*@__PURE__*/r.forwardRef(function({items:r,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:j="md",fullWidth:x=!1,disabled:y=!1,"aria-label":v},w){return e(o,{ref:w,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:y,"data-mp-size":j,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",y?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",d[j]].join(" "),children:r.map((r,o)=>{const d=y||r.disabled;return t(n,{value:r.value,disabled:r.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",m[j],l[j],u[j],0===o?"":"border-s",d?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(s,{}),g||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[j],height:c[j]},children:[g?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:i,size:c[j]})}):null,r.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",g?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:r.icon}):null]}):null,e("span",{className:"truncate",children:r.label})]},r.value)})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Toggle as n}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as s}from"../../constants/icons.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale.js";export const MPSegmentedButton=/*@__PURE__*/r.forwardRef(function({items:r,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:y="md",fullWidth:j=!1,disabled:x=!1,"aria-label":v,className:w,style:N},B){return e(o,{ref:B,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:x,"data-mp-size":y,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",x?"border-mp-on-surface/12":"border-mp-outline",j?"flex w-full":"inline-flex w-fit",d[y],w??""].filter(Boolean).join(" "),style:N,children:r.map((r,o)=>{const d=x||r.disabled;return t(n,{value:r.value,disabled:r.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",u[y],l[y],m[y],0===o?"":"border-s",d?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),j?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(i,{}),g||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[y],height:c[y]},children:[g?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:s,size:c[y]})}):null,r.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",g?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:r.icon}):null]}):null,e("span",{className:"truncate",children:r.label})]},`${o}:${r.value}`)})})});

package/dist/components/select/MPSelect.d.ts

@@ -23,7 +23,18 @@ export interface MPSelectProps extends MPStyleProps {
      * The options, as data. There is no `<MPSelect.Option>` to compose: what a
      * caller has is almost always an array already, and the list has to be
      * available to the trigger before the popup has ever been opened — otherwise
-     * a closed select can only show its raw value.
+     * a closed select can only show its raw value.   *
+     * ## How long a list this holds
+     *
+     * Every row is rendered, and there is no windowing. That is the right default
+     * — windowing costs a measured container, a scroll listener and a row height
+     * the component would have to decide for the caller — and it has a ceiling: a
+     * few hundred rows is nothing, a few thousand is a visible pause when the list
+     * opens, and past that the answer is a narrower list rather than a faster one.
+     *
+     * A list somebody has to scroll ten thousand rows of is a list that wanted a
+     * filter. Where it genuinely is that long, window it yourself and pass the
+     * slice.
      */
     items: readonly MPSelectOption[];
     /** The chosen value. Use with `onValueChange` for a controlled select. */
@@ -79,6 +90,13 @@ export interface MPSelectProps extends MPStyleProps {
      * left out.
      */
     id?: string;
+    /**
+     * Added to the select's outermost element — the box around the trigger and its
+     * supporting line. It is not the trigger, and it is not the popup: the popup is
+     * portalled out of this element entirely.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design select.

package/dist/components/select/MPSelect.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as n}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as i}from"../icon/MPIcon.js";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as d,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as x}from"../../internal/surface.js";const v={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=/*@__PURE__*/t.forwardRef(function({items:b,value:j,defaultValue:N,onValueChange:y,placeholder:w,label:I,floatingLabel:S=!0,description:k,errorMessage:z,startIcon:P,size:M="md",fullWidth:O=!1,required:V=!1,disabled:q=!1,readOnly:T=!1,name:_,id:C},L){const R=h(z),F=v[M],W=t.useId(),B=C??W,[A,D]=t.useState(N??null),[E,G]=t.useState(!1),H=void 0===j?A:j,{shrunk:J,focusProps:K}=c({floating:S&&h(I),filled:null!==H&&""!==H,pinned:E||!!P}),Q=t.useMemo(()=>b.map(e=>({label:e.label??String(e.value),value:e.value})),[b]);return a(r.Root,{className:["mp-select group flex-col align-top",O?"flex w-full":"inline-flex w-fit"].join(" "),disabled:q,invalid:R,"data-mp-size":M,...K,children:[a(n.Root,{id:B,name:_,items:Q,value:j,defaultValue:N,onValueChange:e=>{D(e??null),y?.(e??null)},onOpenChange:G,disabled:q,readOnly:T,required:V,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:L,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",F.padding,F.height,f[M],q?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(T?"cursor-default":"cursor-pointer")].join(" "),children:[P?e("span",{className:["flex shrink-0 items-center",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:P}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",q?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:J?w:void 0}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:u[M]})})]}),e(d,{label:I,required:V,notched:J}),h(I)?e(s,{size:M,label:I,required:V,htmlFor:B,shrunk:J}):null]}),e(n.Portal,{children:e(n.Positioner,{className:x,sideOffset:4,alignItemWithTrigger:!1,children:e(n.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",f[M],g].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:b.map(t=>a(n.Item,{value:t.value,disabled:t.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center","gap-3 py-2 pe-3 ps-2 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(m,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(n.ItemIndicator,{children:e(i,{icon:l,size:18})})}),e(n.ItemText,{className:"min-w-0 flex-1 truncate",children:t.label??String(t.value)})]},String(t.value)))})})})})]}),e(p,{description:k,errorMessage:z,className:F.padding})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as n}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as i}from"../icon/MPIcon.js";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as d,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as x}from"../../internal/surface.js";const v={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=/*@__PURE__*/t.forwardRef(function({items:b,value:j,defaultValue:N,onValueChange:y,placeholder:w,label:I,floatingLabel:S=!0,description:k,errorMessage:z,startIcon:P,size:M="md",fullWidth:O=!1,required:V=!1,disabled:q=!1,readOnly:T=!1,name:_,id:C,className:L,style:R},B){const F=h(z),W=v[M],$=t.useId(),A=C??$,[D,E]=t.useState(N??null),[G,H]=t.useState(!1),J=void 0===j?D:j,{shrunk:K,focusProps:Q}=c({floating:S&&h(I),filled:null!==J&&""!==J,pinned:G||!!P}),U=t.useMemo(()=>b.map(e=>({label:e.label??String(e.value),value:e.value})),[b]);return a(r.Root,{className:["mp-select group flex-col align-top",O?"flex w-full":"inline-flex w-fit",L??""].filter(Boolean).join(" "),style:R,disabled:q,invalid:F,"data-mp-size":M,...Q,children:[a(n.Root,{id:A,name:_,items:U,value:j,defaultValue:N,onValueChange:e=>{E(e??null),y?.(e??null)},onOpenChange:H,disabled:q,readOnly:T,required:V,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:B,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",W.padding,W.height,f[M],q?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(T?"cursor-default":"cursor-pointer")].join(" "),children:[P?e("span",{className:["flex shrink-0 items-center",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:P}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",q?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:K?w:void 0}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:u[M]})})]}),e(d,{label:I,required:V,notched:K}),h(I)?e(s,{size:M,label:I,required:V,htmlFor:A,shrunk:K}):null]}),e(n.Portal,{children:e(n.Positioner,{className:x,sideOffset:4,alignItemWithTrigger:!1,children:e(n.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",f[M],g].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:b.map((t,r)=>a(n.Item,{value:t.value,disabled:t.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center","gap-3 py-2 pe-3 ps-2 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(m,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(n.ItemIndicator,{children:e(i,{icon:l,size:18})})}),e(n.ItemText,{className:"min-w-0 flex-1 truncate",children:t.label??String(t.value)})]},`${r}:${String(t.value)}`))})})})})]}),e(p,{description:k,errorMessage:z,className:W.padding})]})});

package/dist/components/shortcut/MPShortcut.js

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

package/dist/components/sidebar/MPSidebar.d.ts

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { type MPPageCollapse, type MPSidebarSide } from '../../internal/page-layout.js';
+import type { MPSize, MPVariant } from '../../types.js';
+export type { MPPageCollapse, MPSidebarSide } from '../../internal/page-layout.js';
+export interface MPSidebarProps extends Omit<React.ComponentPropsWithoutRef<'aside'>, 'title'> {
+    /**
+     * Which end of the band it takes. Logical rather than physical — `start` is
+     * the left of an English page and the right of an Arabic one — because
+     * navigation sits beside the text it belongs to in every writing direction.
+     *
+     * Inside an [MPPageLayout](./page-layout) this is already decided by which
+     * slot the sidebar was handed to, and setting it again is only a way of
+     * disagreeing with the layout.
+     * @default 'start'
+     */
+    side?: MPSidebarSide;
+    /**
+     * How wide the column is — a number in pixels or any CSS length. Left out, it
+     * is the width `size` implies.
+     *
+     * With `resizable` this is only the width the column *starts* at: a drag
+     * writes over it, and the caller hears about it through `onResizeEnd`.
+     */
+    width?: number | string;
+    /**
+     * How narrow it may be dragged.
+     * @default 160
+     */
+    minWidth?: number | string;
+    /**
+     * And how wide.
+     * @default 480
+     */
+    maxWidth?: number | string;
+    /**
+     * Lets the reader drag the inner edge to change the column's width.
+     *
+     * Off by default. A sidebar that can be resized is a sidebar whose width is
+     * the reader's to remember, so a caller who turns this on usually also wants
+     * to store what `onResizeEnd` reports.
+     * @default false
+     */
+    resizable?: boolean;
+    /** Fires with the width in pixels while the edge is being dragged. */
+    onResize?: (width: number) => void;
+    /** Fires once, with the same number, when it is let go. */
+    onResizeEnd?: (width: number) => void;
+    /**
+     * The window size class below which the column becomes a drawer, opened by an
+     * [MPSidebarTrigger](#mpsidebartrigger). `none` keeps it a column at every
+     * width.
+     *
+     * Defaults to the [MPPageLayout](./page-layout)'s own `collapseBelow`, and to
+     * `none` outside one: a sidebar that collapsed with nothing on the page able
+     * to bring it back would be a sidebar the reader has lost.
+     */
+    collapseBelow?: MPPageCollapse;
+    /**
+     * Whether the drawer is open. Only meaningful once the sidebar has collapsed;
+     * a column is not opened, it is there.
+     *
+     * Inside an [MPPageLayout](./page-layout) the layout owns this — it is what a
+     * trigger anywhere on the page talks to — so control it there rather than
+     * here. `onOpenChange` still fires either way.
+     */
+    open?: boolean;
+    /**
+     * Which state it starts in, for an uncontrolled standalone sidebar.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the column holds its place while the page scrolls past it.
+     *
+     * On by default, and it costs nothing when it is not needed: with the page
+     * scrolling it becomes a `sticky` column as tall as what is left of the window
+     * under the header, and with only the content scrolling it is already as tall
+     * as the layout and this changes nothing.
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * The heading, drawn only while the sidebar is a drawer.
+     *
+     * A column has the page around it to say what it is. A panel that has covered
+     * the page does not, and a dialog with no heading has no accessible name — so
+     * without one the drawer falls back to `label`, and then to the word for
+     * "sidebar" in `locale`.
+     */
+    title?: React.ReactNode;
+    /**
+     * How much surface the column paints, on the **container** ladder — a sidebar
+     * is never dyed, because what sits on it arrives with colours of its own.
+     *
+     * `outlined` is the default: the page's own surface, with a hairline down the
+     * edge that faces the content. That is the column *in the layout*. Once it has
+     * collapsed it is an [MPDrawer](./drawer), which paints MD3's own navigation
+     * drawer surface and takes no weight from here.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The column's default width and the air around its content. `md` is 360px,
+     * which is MD3's own navigation drawer and the same rung
+     * [MPDrawer](./drawer) is drawn at.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * The gutter, and the air above and below the content.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The name the region is announced by.
+     *
+     * Every `<aside>` on a page should have one, and a page with two sidebars
+     * *must*, or a screen reader offers two regions called "complementary".
+     * Defaults to the word for "sidebar" in `locale`.
+     */
+    label?: string;
+    /**
+     * Which language the sidebar's own words are in. Falls back to the
+     * [MPPageLayout](./page-layout)'s, then to the nearest `MPLocaleProvider`,
+     * then to English.
+     */
+    locale?: string;
+    /** Everything in it: a nav, a filter panel, a table of contents. */
+    children?: React.ReactNode;
+}
+/**
+ * A column beside the page's content, and a drawer once the window is too narrow
+ * to hold one.
+ *
+ * Two presentations of one panel, which is exactly the distinction MD3 draws:
+ * the **standard** navigation drawer is part of the layout and the content is
+ * laid out around it, and below an expanded window the same destinations arrive
+ * as a **modal** drawer over a scrim. They are one component here because they
+ * are one thing — a caller should not have to swap components at a breakpoint —
+ * and because the children exist once either way, so nothing inside is put into
+ * the document twice for a screen reader to read twice.
+ *
+ * A real `<aside>`, which is the `complementary` landmark: the region a screen
+ * reader offers as "related to the page but not the page", and what a crawler
+ * reads as navigation chrome rather than as the article.
+ *
+ * ## Which of the two is showing is answered twice, on purpose
+ *
+ * In CSS for the first paint, and in JavaScript from then on.
+ *
+ * The markup a server sends is the **column**, because a collapsed sidebar is a
+ * drawer, a modal drawer is a portal into `document.body`, and there is no body
+ * to portal into while the markup is being rendered. So a narrow screen would
+ * draw a full-width sidebar and throw it away a moment later — the class that
+ * hides the column below the breakpoint is what stops that, and `matchMedia` is
+ * what decides, once there is a window to ask, that the drawer should exist at
+ * all.
+ */
+export declare const MPSidebar: React.ForwardRefExoticComponent<MPSidebarProps & React.RefAttributes<HTMLElement>>;

package/dist/components/sidebar/MPSidebar.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{MPDrawer as n}from"../drawer/MPDrawer.js";import{pixelsIn as o}from"../../internal/length.js";import{useMPLocale as i,useMPMessages as a}from"../../internal/locale.js";import{LAYOUT as s}from"../../internal/messages/layout.js";import{BAR_SURFACE as l,drawerSide as u,EXPANDED_ONLY as d,MPPageLayoutContext as c,MPSidebarSideContext as m,useMPCollapsed as p}from"../../internal/page-layout.js";import{SHEET_PAD_X as f,SHEET_PAD_Y as b}from"../../internal/scale.js";const v={xs:"15rem",sm:"18rem",md:"22.5rem",lg:"26rem",xl:"30rem"};function y(e,t){return null==e?t:"number"==typeof e?e:o(e,"undefined"==typeof window?void 0:window.innerWidth)??t}export const MPSidebar=/*@__PURE__*/r.forwardRef(function({side:o,width:h,minWidth:g=160,maxWidth:w=480,resizable:x=!1,onResize:_,onResizeEnd:j,collapseBelow:R,open:k,defaultOpen:C=!1,onOpenChange:z,sticky:P=!0,title:E,variant:M="outlined",size:L="md",padded:B=!0,label:S,locale:N,className:A,style:D,children:O,...$},I){const W=r.useContext(c),T=r.useContext(m),X=o??T??"start",K=i(N??W.locale),V=a(s,K),q=R??(W.present?W.collapseBelow:"none"),F=p(q),[G,H]=r.useState(C),J=void 0!==k,Q=J?k:W.present?W.open[X]:G,U=e=>{J||(W.present?W.setOpen(X,e):H(e)),z?.(e)},Y=void 0===h?v[L]:"number"==typeof h?`${h}px`:h,Z=r.useRef(null),ee=r.useRef(Y),te=r.useRef(null),re=r.useId();ee.current!==Y&&(ee.current=Y,Z.current=null);const ne=Z.current??Y,oe=r.useRef(null),ie=r.useCallback(e=>{oe.current=e,"function"==typeof I?I(e):I&&(I.current=e)},[I]),ae=r.useRef(null);r.useEffect(()=>()=>ae.current?.(),[]);const se=e=>{const t=oe.current;if(!t)return e;const r=Math.min(y(w,480),Math.max(y(g,160),Math.round(e)));return Z.current=`${r}px`,t.style.setProperty("--_mp-sidebar-width",Z.current),te.current?.setAttribute("aria-valuenow",String(r)),r};return F?e(n,{side:u(X),mode:"modal",open:Q,onOpenChange:U,title:E??S??V.sidebar,size:L,locale:K,extent:void 0===h?void 0:ne,className:A,style:D,children:O}):t("aside",{ref:ie,"aria-label":S??V.sidebar,"data-mp-size":L,"data-mp-variant":M,"data-mp-side":X,className:["mp-sidebar text-mp-on-surface relative box-border flex min-w-0 shrink-0 flex-col","w-(--_mp-sidebar-width)",l[M],"outlined"===M?"border-mp-outline-variant "+("start"===X?"border-e":"border-s"):"","content"===W.scroll?"h-full":P?["self-start sticky [top:var(--_mp-layout-header,0px)]","[height:calc(100dvh_-_var(--_mp-layout-header,0px)_-_var(--_mp-layout-footer,0px))]"].join(" "):"",d[q],A??""].filter(Boolean).join(" "),style:{"--_mp-sidebar-width":ne,...D},...$,children:[e("div",{id:re,className:["mp-sidebar__body min-h-0 flex-1 overflow-y-auto overscroll-contain",B?`${f[L]} ${b[L]}`:""].filter(Boolean).join(" "),children:O}),x?e("div",{ref:te,role:"separator","aria-orientation":"vertical","aria-label":V.resizeSidebar,"aria-valuemin":Math.round(y(g,160)),"aria-valuemax":Math.round(y(w,480)),"aria-valuenow":Math.round(y(ne,y(v[L],360))),"aria-controls":re,tabIndex:0,className:["mp-sidebar__handle absolute inset-y-0 z-1 w-2 cursor-col-resize bg-transparent","start"===X?"-me-1 end-0":"-ms-1 start-0","hover:bg-mp-outline-variant data-dragging:bg-mp-outline-variant","transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none"].join(" "),onPointerDown:e=>{const t=oe.current;if(!t||0!==e.button)return;const r=e.currentTarget;r.setPointerCapture(e.pointerId),r.dataset.dragging="true";const n=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const o=e.clientX,i=t.getBoundingClientRect().width,a="rtl"===getComputedStyle(t).direction,s="start"===X===a?-1:1;let l=i;const u=e=>{l=se(i+(e.clientX-o)*s),_?.(l)},d=()=>{ae.current=null,r.removeEventListener("pointermove",u),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,n?document.body.style.setProperty("-webkit-user-select",n):document.body.style.removeProperty("-webkit-user-select")},c=()=>{d(),j?.(l)};ae.current=d,r.addEventListener("pointermove",u),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===X===t?-1:1;(e=>{const t=oe.current;if(!t)return;const r=se(t.getBoundingClientRect().width+e);_?.(r),j?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});

package/dist/components/sidebar/MPSidebarTrigger.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { type MPIconButtonProps } from '../icon-button/MPIconButton.js';
+import { type MPPageCollapse, type MPSidebarSide } from '../../internal/page-layout.js';
+export interface MPSidebarTriggerProps extends Omit<MPIconButtonProps, 'icon' | 'label'> {
+    /**
+     * Which of the layout's two sidebars it opens.
+     * @default 'start'
+     */
+    side?: MPSidebarSide;
+    /**
+     * The width below which the button appears — the same one the sidebar
+     * collapses at, since the button exists exactly while the column does not.
+     * Inherited from the [MPPageLayout](./page-layout), which is where it should
+     * be set.
+     */
+    collapseBelow?: MPPageCollapse;
+    /** The glyph. Three lines, unless something else is given. */
+    icon?: React.ReactNode;
+    /**
+     * What it does, in words. Defaults to "Open sidebar" / "Close sidebar" in
+     * `locale`, and it changes with the state because the button does.
+     */
+    label?: string;
+    /** Which language that word is in. Inherited from the layout. */
+    locale?: string;
+}
+/**
+ * The button that brings back an [MPSidebar](#mpsidebar) the window has become
+ * too narrow to hold.
+ *
+ * It is drawn only while that is true, and the "while" is a **media query**
+ * rather than a piece of state: the button carries a class that hides it from
+ * the breakpoint up. That matters more than it looks — a trigger whose presence
+ * depended on `matchMedia` would be missing from the markup a server sends and
+ * would pop into the header a moment after the page arrived, on every phone,
+ * every time.
+ *
+ * Put it in an [MPHeader](./header)'s `brand` slot, ahead of the mark, which is
+ * where thirty years of hamburgers have taught readers to look for it.
+ *
+ * It has to be inside an [MPPageLayout](./page-layout) to have something to
+ * open: outside one there is no sidebar it could be talking about, and it
+ * renders nothing at all rather than a button that does nothing.
+ */
+export declare const MPSidebarTrigger: React.ForwardRefExoticComponent<MPSidebarTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/sidebar/MPSidebarTrigger.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MenuIcon as t}from"../../constants/icons.js";import{useMPLocale as a,useMPMessages as i}from"../../internal/locale.js";import{LAYOUT as s}from"../../internal/messages/layout.js";import{COLLAPSED_ONLY as l,MPPageLayoutContext as c}from"../../internal/page-layout.js";export const MPSidebarTrigger=/*@__PURE__*/e.forwardRef(function({side:m="start",collapseBelow:p,icon:f,label:u,locale:j,className:d,onClick:b,...g},x){const B=e.useContext(c),w=a(j??B.locale),C=i(s,w);if(!B.present)return null;const M=p??B.collapseBelow,P=B.open[m];return o(n,{ref:x,icon:f??o(r,{icon:t}),label:u??(P?C.closeSidebar:C.openSidebar),"aria-expanded":P,className:["mp-sidebar-trigger",l[M],d??""].filter(Boolean).join(" "),onClick:o=>{B.setOpen(m,!P),b?.(o)},...g})});

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

@@ -0,0 +1,4 @@
+export { MPSidebar } from './MPSidebar.js';
+export type { MPSidebarProps, MPSidebarSide } from './MPSidebar.js';
+export { MPSidebarTrigger } from './MPSidebarTrigger.js';
+export type { MPSidebarTriggerProps } from './MPSidebarTrigger.js';

package/dist/components/sidebar/index.js

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

package/dist/components/skeleton/MPSkeleton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{CONTROL_SQUARE as o}from"../../internal/scale.js";const a={xs:"h-3",sm:"h-3.5",md:"h-4",lg:"h-4",xl:"h-5.5"},n={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-1.5"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},s="overflow-hidden bg-(--_mp-placeholder)";function t(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const MPSkeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:m=1,size:d="md",color:p,width:c,height:h,animated:f=!0,label:u,render:x,className:g,style:w,...v},b){const j=f?"animate-pulse motion-reduce:animate-none":"",y="circle"===r?`rounded-mp-full shrink-0 ${o[d]}`:"rect"===r?`rounded-mp-md w-full ${void 0===h?i[d]:""}`:`rounded-mp-xs w-full ${a[d]}`,$=u?{role:"status","aria-busy":!0,"aria-label":u}:{"aria-hidden":!0},k="line"===r&&m>1;return l({render:x,ref:b,props:{"data-mp-size":d,className:(k?["mp-skeleton flex w-full flex-col",n[d],g??""]:["mp-skeleton",s,j,y,g??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":p?`var(--_mp-color-${p}-container)`:"var(--_mp-color-surface-container-highest)",width:t(c),height:k?void 0:t(h),...w},...$,...k?{children:Array.from({length:m},(r,l)=>e("div",{className:[s,j,"rounded-mp-xs",a[d],l===m-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{CONTROL_SQUARE as o}from"../../internal/scale.js";import{cssLength as a}from"../../internal/length.js";const n={xs:"h-3",sm:"h-3.5",md:"h-4",lg:"h-4",xl:"h-5.5"},s={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-1.5"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t="overflow-hidden bg-(--_mp-placeholder)";export const MPSkeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:m=1,size:d="md",color:p,width:h,height:c,animated:f=!0,label:u,render:g,className:x,style:w,...j},v){const b=f?"animate-pulse motion-reduce:animate-none":"",k="circle"===r?`rounded-mp-full shrink-0 ${o[d]}`:"rect"===r?`rounded-mp-md w-full ${void 0===c?i[d]:""}`:`rounded-mp-xs w-full ${n[d]}`,y=u?{role:"status","aria-busy":!0,"aria-label":u}:{"aria-hidden":!0},$="line"===r&&m>1;return l({render:g,ref:v,props:{"data-mp-size":d,className:($?["mp-skeleton flex w-full flex-col",s[d],x??""]:["mp-skeleton",t,b,k,x??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":p?`var(--_mp-color-${p}-container)`:"var(--_mp-color-surface-container-highest)",width:a(h),height:$?void 0:a(c),...w},...y,...$?{children:Array.from({length:m},(r,l)=>e("div",{className:[t,b,"rounded-mp-xs",n[d],l===m-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...j}})});

package/dist/components/slider/MPSlider.d.ts

@@ -54,6 +54,12 @@ export interface MPSliderProps {
     name?: string;
     /** The accessible name, for a slider with no visible `label`. */
     'aria-label'?: string;
+    /**
+     * Added to the slider's outermost element, which holds the label row as well
+     * as the track.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design slider.

package/dist/components/slider/MPSlider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as t}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as i,hasContent as o}from"../../internal/scale.js";const l={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},c=/*@__PURE__*/["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),m={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=/*@__PURE__*/s.forwardRef(function({value:s,defaultValue:u,onValueChange:p,onValueCommitted:d,min:f=0,max:h=100,step:g=1,label:x,description:b,showValue:w=!1,format:j,orientation:y="horizontal",size:z="md",color:v="primary",disabled:C=!1,name:N,"aria-label":_},k){const V="vertical"===y,$=l[z],A=s??u,B=Array.isArray(A)?A.length:1;return r(a.Root,{ref:k,value:s,defaultValue:u,onValueChange:e=>p?.(e),onValueCommitted:e=>d?.(e),min:f,max:h,step:g,disabled:C,orientation:y,format:j,name:N,"data-mp-size":z,className:["mp-slider flex",V?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",C?"cursor-default":""].filter(Boolean).join(" "),style:t(v),children:[o(x)||w?r("div",{className:["flex w-full items-baseline gap-2",i].join(" "),children:[o(x)?e(a.Label,{className:C?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:x}):null,w?e(a.Value,{className:["ms-auto tabular-nums",C?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",V?`${$.stripCross} h-40 flex-col`:`w-full ${$.strip}`,C?"":"cursor-pointer"].filter(Boolean).join(" "),children:r(a.Track,{className:["mp-slider__track rounded-mp-full relative",V?`${$.cross} h-full`:`${$.thickness} w-full`,C?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",c,"group-data-dragging/rail:transition-none",C?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:B},(r,s)=>e(a.Thumb,{index:s,"aria-label":o(x)?void 0:_,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",c,"data-dragging:transition-none",$.handle,C?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:C?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",m[z],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},s))]})}),o(b)?e("div",{className:[i,C?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:b}):null]})});
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as t}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as i,hasContent as o}from"../../internal/scale.js";const l={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},c=/*@__PURE__*/["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),m={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=/*@__PURE__*/r.forwardRef(function({value:d,defaultValue:u,onValueChange:p,onValueCommitted:f,min:h=0,max:g=100,step:x=1,label:b,description:w,showValue:j=!1,format:y,orientation:z="horizontal",size:v="md",color:C="primary",disabled:N=!1,name:_,"aria-label":k,className:V,style:$},A){const B="vertical"===z,I=l[v],L=r.useId(),R=d??u,S=Array.isArray(R)?R.length:1;return s(a.Root,{ref:A,value:d,defaultValue:u,onValueChange:e=>p?.(e),onValueCommitted:e=>f?.(e),min:h,max:g,step:x,disabled:N,orientation:z,format:y,name:_,"data-mp-size":v,className:["mp-slider flex",B?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",N?"cursor-default":"",V??""].filter(Boolean).join(" "),style:{...t(C),...$},children:[o(b)||j?s("div",{className:["flex w-full items-baseline gap-2",i].join(" "),children:[o(b)?e(a.Label,{className:N?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:b}):null,j?e(a.Value,{className:["ms-auto tabular-nums",N?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",B?`${I.stripCross} h-40 flex-col`:`w-full ${I.strip}`,N?"":"cursor-pointer"].filter(Boolean).join(" "),children:s(a.Track,{className:["mp-slider__track rounded-mp-full relative",B?`${I.cross} h-full`:`${I.thickness} w-full`,N?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",c,"group-data-dragging/rail:transition-none",N?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:S},(s,r)=>e(a.Thumb,{index:r,"aria-label":o(b)?void 0:k,"aria-describedby":o(w)?L:void 0,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",c,"data-dragging:transition-none",I.handle,N?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:N?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",m[v],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},r))]})}),o(w)?e("div",{id:L,className:[i,N?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:w}):null]})});

package/dist/components/snackbar/MPSnackbar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as i}from"../icon/MPIcon.js";import{CloseIcon as n}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{PORTAL_LAYER as p}from"../../internal/surface.js";const d={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},u=/*@__PURE__*/["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),f={top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},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"},b={xs:"min-h-9 gap-1.5 py-1.5 ps-3 pe-1.5",sm:"min-h-10 gap-2 py-2 ps-3.5 pe-2",md:"min-h-12 gap-2 py-2.5 ps-4 pe-2",lg:"min-h-14 gap-3 py-3 ps-5 pe-2.5",xl:"min-h-16 gap-3 py-3.5 pe-3 ps-6"},y={xs:16,sm:18,md:20,lg:22,xl:24};function h(e){const{color:t,icon:o,message:s,actionLabel:i,onAction:n,...r}=e;return{...r,title:s,data:{color:t,icon:o},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useMPSnackbar(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(h(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,h(o)),promise:(t,o)=>e.promise(t,{loading:h(o.loading),success:e=>h("function"==typeof o.success?o.success(e):o.success),error:e=>h("function"==typeof o.error?o.error(e):o.error)}),snackbars:e.toasts}),[e])}function g({toast:o,color:a,size:l,showClose:m,closeLabel:p,swipeDirection:d,edge:h}){const g=o.data?.color??a,v=o.data?.icon,j={"--_mp-plate":g?`var(--_mp-color-${g}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":g?`var(--_mp-color-on-${g}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":g?`var(--_mp-color-${g})`:"var(--_mp-color-inverse-primary)",...g?r(g):null};return t(s.Root,{toast:o,swipeDirection:d,"data-mp-size":l,className:["mp-snackbar rounded-mp-xs shadow-mp-3 pointer-events-auto flex w-full items-center","bg-(--_mp-plate) text-(--_mp-on-plate) outline-none",b[l],x[l],u,f[h],"data-limited:hidden"].join(" "),style:j,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(s.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(s.Action,{className:["text-mp-label-large flex shrink-0 cursor-pointer items-center","rounded-mp-full h-8 px-3 text-(--_mp-plate-action)","transition-colors duration-(--mp-sys-motion-duration-short4)","hover:bg-(--_mp-plate-action)/8 focus-visible:bg-(--_mp-plate-action)/10","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ")}),m?t(s.Close,{"aria-label":p,className:["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer","items-center justify-center text-(--_mp-on-plate)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{}),e(i,{icon:n,size:y[l]})]}):null]})}function v({position:t,width:o,...i}){const{toasts:n}=s.useToastManager(),r=t.startsWith("top")?"top":"bottom",a=["top"===r?"up":"down","left","right"];return e(s.Portal,{children:e(s.Viewport,{className:[p,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",d[t]].join(" "),children:n.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof o?`${o}px`:o},children:e(g,{toast:t,swipeDirection:a,edge:r,...i})},t.id))})})}export function MPSnackbarProvider({color:o,position:i="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:p="md",showClose:d=!0,closeLabel:u,locale:f,children:x}){const b=a(f),y=l(m,b);return t(s.Provider,{timeout:n,limit:r,children:[x,e(v,{position:i,width:c,color:o,size:p,showClose:d,closeLabel:u??y.close})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as i}from"../icon/MPIcon.js";import{CloseIcon as n}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{cssLength as p}from"../../internal/length.js";import{PORTAL_LAYER as d}from"../../internal/surface.js";const u={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},f=/*@__PURE__*/["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),x={top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},b={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"},y={xs:"min-h-9 gap-1.5 py-1.5 ps-3 pe-1.5",sm:"min-h-10 gap-2 py-2 ps-3.5 pe-2",md:"min-h-12 gap-2 py-2.5 ps-4 pe-2",lg:"min-h-14 gap-3 py-3 ps-5 pe-2.5",xl:"min-h-16 gap-3 py-3.5 pe-3 ps-6"},h={xs:16,sm:18,md:20,lg:22,xl:24};function g(e){const{color:t,icon:o,message:s,actionLabel:i,onAction:n,...r}=e;return{...r,title:s,data:{color:t,icon:o},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useMPSnackbar(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(g(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,g(o)),promise:(t,o)=>e.promise(t,{loading:g(o.loading),success:e=>g("function"==typeof o.success?o.success(e):o.success),error:e=>g("function"==typeof o.error?o.error(e):o.error)}),snackbars:e.toasts}),[e])}function v({toast:o,color:a,size:l,showClose:m,closeLabel:p,swipeDirection:d,edge:u}){const g=o.data?.color??a,v=o.data?.icon,j={"--_mp-plate":g?`var(--_mp-color-${g}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":g?`var(--_mp-color-on-${g}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":g?`var(--_mp-color-${g})`:"var(--_mp-color-inverse-primary)",...g?r(g):null};return t(s.Root,{toast:o,swipeDirection:d,"data-mp-size":l,className:["mp-snackbar rounded-mp-xs shadow-mp-3 pointer-events-auto flex w-full items-center","bg-(--_mp-plate) text-(--_mp-on-plate) outline-none",y[l],b[l],f,x[u],"data-limited:hidden"].join(" "),style:j,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(s.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(s.Action,{className:["text-mp-label-large flex shrink-0 cursor-pointer items-center","rounded-mp-full h-8 px-3 text-(--_mp-plate-action)","transition-colors duration-(--mp-sys-motion-duration-short4)","hover:bg-(--_mp-plate-action)/8 focus-visible:bg-(--_mp-plate-action)/10","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ")}),m?t(s.Close,{"aria-label":p,className:["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer","items-center justify-center text-(--_mp-on-plate)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{}),e(i,{icon:n,size:h[l]})]}):null]})}function j({position:t,width:o,...i}){const{toasts:n}=s.useToastManager(),r=t.startsWith("top")?"top":"bottom",a=["top"===r?"up":"down","left","right"];return e(s.Portal,{children:e(s.Viewport,{className:[d,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",u[t]].join(" "),children:n.map(t=>e("div",{className:"w-full",style:{maxWidth:p(o)},children:e(v,{toast:t,swipeDirection:a,edge:r,...i})},t.id))})})}export function MPSnackbarProvider({color:o,position:i="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:p="md",showClose:d=!0,closeLabel:u,locale:f,children:x}){const b=a(f),y=l(m,b);return t(s.Provider,{timeout:n,limit:r,children:[x,e(j,{position:i,width:c,color:o,size:p,showClose:d,closeLabel:u??y.close})]})}

package/dist/components/switch/MPSwitch.d.ts

@@ -59,6 +59,12 @@ export interface MPSwitchProps {
      * against the far edge. This is what makes a column of settings line up.
      */
     fullWidth?: boolean;
+    /**
+     * Added to the outermost element — the box around the track, its label and its
+     * supporting line, rather than to the track itself.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design switch.

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:"left-[5px] size-2.5 data-checked:left-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"left-1.5 size-3 data-checked:left-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"left-2 size-4 data-checked:left-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"left-[9px] size-[18px] data-checked:left-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"left-2.5 size-5 data-checked:left-[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},S){const W=p(y),q=W?"error":N,F=u[w],I=r.useId(),L=P??I,O=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:S,id:L,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",F.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",W?"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-[left,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",F.thumb,C?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[W?"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",F.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:F.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:F.glyph,strokeWidth:3})})]}):null]})})}),T=p(b)||p(x)||W?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:L,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"].join(" "),disabled:C,invalid:W,"data-mp-size":w,style:l(q),children:e("div",{className:["flex w-full items-start gap-3",m[w]].join(" "),children:a(t,"start"===z?{children:[T,O]}:{children:[O,T]})})})});
+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]})})})});

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

@@ -32,14 +32,31 @@ export interface MPTableColumn<Row> {
     align?: MPTableAlign;
     /**
      * Renders the cell. Without it the cell is `row[key]` rendered as-is, which
-     * covers strings and numbers and nothing else.
+     * covers strings, numbers and elements.
+     *
+     * Anything else — a `Date`, a nested object, an array — draws an empty cell
+     * rather than being handed to React, which would throw. Reach for this the
+     * moment a column holds something that is not already text.
      */
     render?: (row: Row, index: number) => React.ReactNode;
 }
 export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
     /** The columns, in the order they appear. */
     headers: readonly MPTableColumn<Row>[];
-    /** The rows. */
+    /**
+     * The rows.   *
+     * ## How long a list this holds
+     *
+     * Every row is rendered, and there is no windowing. That is the right default
+     * — windowing costs a measured container, a scroll listener and a row height
+     * the component would have to decide for the caller — and it has a ceiling: a
+     * few hundred rows is nothing, a few thousand is a visible pause when the list
+     * opens, and past that the answer is a narrower list rather than a faster one.
+     *
+     * A list somebody has to scroll ten thousand rows of is a list that wanted a
+     * filter. Where it genuinely is that long, window it yourself and pass the
+     * slice.
+     */
     items: readonly Row[];
     /**
      * A stable key per row. Defaults to the row's index, which is fine for a
@@ -49,10 +66,15 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
     /** Shown above the table, and read out as its accessible name. */
     caption?: React.ReactNode;
     /**
-     * What to show instead of rows when `items` is empty.
-     * @default 'No data'
+     * What to show instead of rows when `items` is empty. Defaults to the wording
+     * in `locale`.
      */
     empty?: React.ReactNode;
+    /**
+     * Which language that line is written in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /**
      * Tints every other row. Useful for a wide table where the eye has to track
      * across; noise on a narrow one.
@@ -117,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, 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, color, 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{accentSlots as r}from"../../internal/accent.js";import{META_TEXT as o}from"../../internal/scale.js";import{CONTAINER_SURFACE as l}from"../../internal/surface.js";const a={xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},n={xs:"0.375rem",sm:"0.625rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},i={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"},m={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"},s=/*@__PURE__*/["[--_mp-row:transparent]","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ");export function MPTable({headers:c,items:d,getRowKey:p,caption:u,empty:x="No data",striped:y=!1,hoverable:f=!1,stickyHeader:v=!1,onRowClick:h,variant:b="outlined",size:g="md",color:w="primary",className:k,style:j,...N}){const _=a[g],$=n[g],C=Boolean(h),A=f||C,B={padding:`${$} ${_}`},z={...B,backgroundColor:"var(--_mp-color-surface-container)"},T={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":g,"data-mp-variant":b,className:["mp-table rounded-mp-md overflow-x-auto",l[b],k??""].filter(Boolean).join(" "),style:{...r(w),...j},...N,children:t("table",{className:`text-mp-on-surface w-full text-start ${i[g]}`,style:{borderCollapse:"collapse"},children:[u?e("caption",{className:`text-mp-on-surface-variant ${o}`,style:{...B,textAlign:"start"},children:u}):null,e("colgroup",{children:c.map(t=>{return e("col",{style:void 0===t.width?void 0:{width:(r=t.width,"number"==typeof r?`${r}px`:r)}},t.key);var r})}),e("thead",{children:e("tr",{children:c.map(t=>e("th",{scope:"col",className:["text-mp-on-surface-variant whitespace-nowrap",m[g],v?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...z,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===d.length?e("tr",{className:s,style:T,children:e("td",{colSpan:c.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${_}`,textAlign:"center"},children:x})}):d.map((t,r)=>e("tr",{className:[s,y&&r%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",A?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",C?["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:T,tabIndex:C?0:void 0,onClick:h?()=>h(t,r):void 0,onKeyDown:h?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),h(t,r))}:void 0,children:c.map(o=>e("td",{style:{...B,textAlign:o.align??"start"},children:o.render?o.render(t,r):t[o.key]},o.key))},p?p(t,r):r))})]})})}
+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))})]})})}

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

@@ -110,8 +110,19 @@ export interface MPTextFieldProps extends MPStyleProps {
      */
     onChange?: (value: string) => void;
     /**
-     * Called when Enter is pressed. On a single-line field Enter is then
-     * swallowed, so a form is submitted once rather than also natively.
+     * 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.
+     *
+     * 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.
+     *
+     * Never called for the Enter that commits an IME composition: that keystroke
+     * belongs to the input method, not to the form.
      */
     onSubmit?: () => void;
     /**
@@ -119,6 +130,14 @@ export interface MPTextFieldProps extends MPStyleProps {
      * form-level error that a further edit has made stale.
      */
     onFormReset?: () => void;
+    /**
+     * Added to the field's outermost element — the box around the control and its
+     * supporting line, rather than to the `<input>` itself. The control carries a
+     * type scale of its own, so a `text-*` written here does not reach it; that is
+     * what `size` is for.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design text field that survives an IME.