material-plus-ui 1.0.0 → 1.1.0

package/dist/components/panes/MPPanes.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent";const o=n.createContext({basis:null}),i={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function s(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*Number.parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const MPPanes=n.forwardRef(function({orientation:l="horizontal",resizable:c=!0,color:u="primary",size:m="md",onResize:d,onResizeEnd:p,className:f,style:h,children:g,...v},x){const b=n.Children.toArray(g).filter(n.isValidElement),y=b.length,z=n.useRef(null),w=n.useCallback(e=>{z.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),S=n.useRef([]);S.current=b.map(e=>e.props);const[N,M]=n.useState(null),R=N&&N.length===y?N:null,j=n.useRef(null);j.current=R;const C="horizontal"===l,E=a[m]*Math.max(0,y-1);function L(e){const t=z.current,n=j.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(C?r.width:r.height)-E;if(o<=0)return null;const i=S.current[e],a=S.current[e+1],l=n[e]*o,u=l+n[e+1]*o,m=Math.max(s(i?.minSize,o,t)??0,u-(s(a?.maxSize,o,t)??u)),p=Math.min(s(i?.maxSize,o,t)??u,u-(s(a?.minSize,o,t)??0));return p<m?null:{root:t,current:n,resize(t){const r=Math.min(p,Math.max(m,l+t)),i=[...n];return i[e]=r/o,i[e+1]=(u-r)/o,M(i),d?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=z.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(C?t.width:t.height)-E;n<=0||M(t=>t&&t.length===y?t:function(e,t,n){const r=e.map(e=>s(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,l=r.map(e=>Math.max(0,e??a)),c=l.reduce((e,t)=>e+t,0);return c<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/c)}(S.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,C,E]);const P=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",i[m],"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",c?[C?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:w,"data-mp-size":m,className:["mp-panes flex h-full w-full",C?"flex-row":"flex-col","min-h-0 min-w-0",f??""].filter(Boolean).join(" "),style:{...r(u),...h},...v,children:b.map((r,i)=>t(n.Fragment,{children:[i>0?e("div",{role:"separator","aria-orientation":C?"vertical":"horizontal","aria-valuenow":R?Math.round(100*R[i-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,tabIndex:c?0:-1,className:P,onPointerDown:e=>{0===e.button&&function(e,t){const n=L(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const o=document.body.style.userSelect;document.body.style.userSelect="none";const i=C?t.clientX:t.clientY,a=C&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=C?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,p?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(i-1,e)},onKeyDown:e=>{const t=C?"ArrowLeft":"ArrowUp",n=C?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function(e,t){const n=L(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(i-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",C?"h-full w-px":"h-px w-full",c?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(o.Provider,{value:{basis:R?`calc((100% - ${E}px) * ${R[i].toFixed(6)})`:null},children:r})]},r.key??i))})});export const MPPane=n.forwardRef(function({defaultSize:t,minSize:r,maxSize:i,className:a,style:s,children:l,...c},u){const{basis:m}=n.useContext(o);return e("div",{ref:u,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:m?`0 0 ${m}`:"1 1 0%",...s},...c,children:l})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent";const o=n.createContext({basis:null,id:null}),i={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function s(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*Number.parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const MPPanes=n.forwardRef(function({orientation:l="horizontal",resizable:u=!0,color:c="primary",size:m="md",onResize:d,onResizeEnd:f,className:p,style:h,children:g,...v},b){const x=n.Children.toArray(g).filter(n.isValidElement),y=x.length,z=n.useId(),w=n.useRef(null),S=n.useCallback(e=>{w.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),E=n.useRef([]),N=x.map(e=>e.props),[R,M]=n.useState(null),j=R&&R.length===y?R:null,C=n.useRef(null);n.useLayoutEffect(()=>{E.current=N,C.current=j});const k=n.useRef(null);n.useEffect(()=>()=>{null!==k.current&&(document.body.style.userSelect=k.current,k.current=null)},[]);const L="horizontal"===l,$=a[m]*Math.max(0,y-1);function P(e){const t=w.current,n=C.current;if(!u||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(L?r.width:r.height)-$;if(o<=0)return null;const i=E.current[e],a=E.current[e+1],l=n[e]*o,c=l+n[e+1]*o,m=Math.max(s(i?.minSize,o,t)??0,c-(s(a?.maxSize,o,t)??c)),f=Math.min(s(i?.maxSize,o,t)??c,c-(s(a?.minSize,o,t)??0));return f<m?null:{root:t,current:n,lower:m,upper:f,start:l,resize(t){const r=Math.min(f,Math.max(m,l+t)),i=[...n];return i[e]=r/o,i[e+1]=(c-r)/o,M(i),d?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=w.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(L?t.width:t.height)-$;n<=0||M(t=>t&&t.length===y?t:function(e,t,n){const r=e.map(e=>s(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,l=r.map(e=>Math.max(0,e??a)),u=l.reduce((e,t)=>e+t,0);return u<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/u)}(E.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,L,$]);const _=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",i[m],"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",u?[L?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:S,"data-mp-size":m,className:["mp-panes flex h-full w-full",L?"flex-row":"flex-col","min-h-0 min-w-0",p??""].filter(Boolean).join(" "),style:{...r(c),...h},...v,children:x.map((r,i)=>t(n.Fragment,{children:[i>0?e("div",{role:"separator","aria-orientation":L?"vertical":"horizontal","aria-valuenow":j?Math.round(100*j[i-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,"aria-controls":`${z}-${i-1}`,tabIndex:u?0:-1,className:_,onPointerDown:e=>{0===e.button&&function(e,t){const n=P(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;k.current=o,document.body.style.userSelect="none";const i=L?t.clientX:t.clientY,a=L&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=L?e.clientX:e.clientY;s=n.resize((t-i)*a)},u=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",u),r.removeEventListener("pointercancel",u),delete r.dataset.dragging,document.body.style.userSelect=o,k.current=null,f?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",u),r.addEventListener("pointercancel",u)}(i-1,e)},onKeyDown:e=>{const t=L?"ArrowLeft":"ArrowUp",n=L?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n)return e.preventDefault(),void function(e,t){const n=P(e);if(!n)return;const r=n.resize(t);f?.(r.map(e=>100*e))}(i-1,e.key===n?16:-16);"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=P(e);if(!n)return;const r=n.resize(n[t]-n.start);f?.(r.map(e=>100*e))}(i-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",L?"h-full w-px":"h-px w-full",u?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(o.Provider,{value:{basis:j?`calc((100% - ${$}px) * ${j[i].toFixed(6)})`:null,id:`${z}-${i}`},children:r})]},r.key??i))})});export const MPPane=n.forwardRef(function({defaultSize:t,minSize:r,maxSize:i,className:a,style:s,children:l,...u},c){const{basis:m,id:d}=n.useContext(o);return e("div",{ref:c,id:d??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:m?`0 0 ${m}`:"1 1 0%",...s},...u,children:l})});

package/dist/components/pill/MPPill.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent";import{MPStateLayer as r}from"../../internal/StateLayer";import{CONTROL_GAP as s,CONTROL_ICON as l,CONTROL_TEXT as a,hasContent as c,META_TEXT as m,PROSE_TEXT as d,SHEET_PAD_X as p}from"../../internal/scale";const u={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},f={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},h={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},x={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=o.forwardRef(function({startIcon:b,endIcon:w,title:g,description:v,details:y,expanded:j=!1,position:N="static",side:k="top",onClick:_,variant:z="filled",size:B="md",color:C="secondary",className:R,style:$,children:H,...I},P){const S=o.useRef(null),[E,F]=o.useState(0);o.useEffect(()=>{const e=S.current;if(!e)return;const t=new ResizeObserver(()=>F(e.scrollHeight));return t.observe(e),F(e.scrollHeight),()=>t.disconnect()},[y]);const L=Boolean(_),M=p[B],O=t(n,{children:[c(b)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[B],height:l[B]},children:b}):null,c(g)||c(v)||c(H)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",f[B]].join(" "),children:[c(g)?e("span",{className:"max-w-full truncate",children:g}):null,c(v)?e("span",{className:`max-w-full truncate font-normal ${m} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:v}):null,H]}):null]});return t("div",{ref:P,"data-mp-size":B,"data-mp-variant":z,"data-mp-expanded":j||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",j?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",a[B],h[z],x[N][k],R??""].filter(Boolean).join(" "),style:{...i(C),...$},...I,children:[t("div",{className:["flex shrink-0 items-center py-1",u[B],s[B],L?"ps-0":M,c(w)?"pe-1":L?"pe-0":""].filter(Boolean).join(" "),children:[L?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",s[B],M,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onClick:_,children:[e(r,{}),O]}):O,c(w)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:w}):null]}),c(y)?e("div",{className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:j?E:0},inert:!j,children:e("div",{ref:S,className:`${M} pb-2 whitespace-normal ${d[B]}`,children:y})}):null]})});
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent";import{inertProps as r}from"../../internal/inert";import{MPStateLayer as s}from"../../internal/StateLayer";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale";const f={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},x={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},b={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=o.forwardRef(function({startIcon:w,endIcon:v,title:g,description:y,details:j,expanded:N=!1,position:k="static",side:_="top",onClick:z,variant:B="filled",size:C="md",color:I="secondary",className:R,style:$,children:H,...P},S){const E=o.useRef(null),F=o.useId(),[L,M]=o.useState(0);o.useEffect(()=>{const e=E.current;if(!e)return;const t=new ResizeObserver(()=>M(e.scrollHeight));return t.observe(e),M(e.scrollHeight),()=>t.disconnect()},[j]);const O=Boolean(z),q=u[C],A=t(n,{children:[m(w)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[C],height:l[C]},children:w}):null,m(g)||m(y)||m(H)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",h[C]].join(" "),children:[m(g)?e("span",{className:"max-w-full truncate",children:g}):null,m(y)?e("span",{className:`max-w-full truncate font-normal ${d} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:y}):null,H]}):null]});return t("div",{ref:S,"data-mp-size":C,"data-mp-variant":B,"data-mp-expanded":N||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",N?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[C],x[B],b[k][_],R??""].filter(Boolean).join(" "),style:{...i(I),...$},...P,children:[t("div",{className:["flex shrink-0 items-center py-1",f[C],a[C],O?"ps-0":q,m(v)?"pe-1":O?"pe-0":""].filter(Boolean).join(" "),children:[O?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",a[C],q,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(j)?N:void 0,"aria-controls":m(j)?F:void 0,onClick:z,children:[e(s,{}),A]}):A,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(j)?e("div",{id:F,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:N?L:0},...r(!N),children:e("div",{ref:E,className:`${q} pb-2 whitespace-normal ${p[C]}`,children:j})}):null]})});

package/dist/components/popover/MPPopover.d.ts

@@ -81,10 +81,15 @@ export interface MPPopoverProps {
      */
     showClose?: boolean;
     /**
-     * Accessible name of the × button.
-     * @default 'Close'
+     * Accessible name of the × button. Defaults to the word for "close" in
+     * `locale`.
      */
     closeLabel?: string;
+    /**
+     * Which language the × button's default name is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /**
      * A hard cap on the popup's width, overriding the one `size` implies. Numbers
      * are pixels. For the popover whose *content* decides its width — a form, a
@@ -135,4 +140,4 @@ export declare const MPPopoverClose: React.ForwardRefExoticComponent<Omit<import
  * dialog's `surface-container-high` at elevation 3, because a popover has not
  * taken the page and should not sit above the menus that did not either.
  */
-export declare function MPPopover({ trigger, title, description, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, width, size, className, style, children }: MPPopoverProps): React.JSX.Element;
+export declare function MPPopover({ trigger, title, description, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, locale: localeProp, width, size, className, style, children }: MPPopoverProps): React.JSX.Element;

package/dist/components/popover/MPPopover.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as i}from"../icon/MPIcon";import{CloseIcon as a}from"../../constants/icons";import{MPStateLayer as s}from"../../internal/StateLayer";import{hasContent as l,META_TEXT as r,PROSE_TEXT as n,SHEET_GAP as c,SHEET_PAD as d,SHEET_TITLE as m}from"../../internal/scale";import{FADE as p,PORTAL_LAYER as f}from"../../internal/surface";const u={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},x={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=t.Close;export function MPPopover({trigger:h,title:g,description:v,side:b="bottom",align:w="center",sideOffset:N=8,alignOffset:O=0,arrow:P=!1,open:j,defaultOpen:y,onOpenChange:C,modal:z=!1,dismissible:k=!0,showClose:M=!1,closeLabel:L="Close",width:$,size:B="md",className:T,style:A,children:D}){const I=l(g)||l(v),R=x[B];return o(t.Root,{open:j,defaultOpen:y,modal:z,onOpenChange:(e,o)=>{k||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?C?.(e):o.cancel()},children:[h?e(t.Trigger,{render:h}):null,e(t.Portal,{children:e(t.Positioner,{className:f,side:b,align:w,sideOffset:N,alignOffset:O,children:o(t.Popup,{"data-mp-size":B,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",d[B],c[B],n[B],void 0===$?u[B]:"",p,T??""].filter(Boolean).join(" "),style:{...void 0===$?null:{maxWidth:"number"==typeof $?`${$}px`:$},...A},children:[P?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:R,height:R/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,I||M?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[l(g)?e(t.Title,{className:`m-0 ${m[B]}`,children:g}):null,l(v)?e(t.Description,{className:`text-mp-on-surface-variant m-0 ${r}`,children:v}):null]}),M?o(t.Close,{"aria-label":L,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(s,{}),e(i,{icon:a,size:18})]}):null]}):null,l(D)?e("div",{className:"min-w-0",children:D}):null]})})})]})}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as i}from"../icon/MPIcon";import{CloseIcon as a}from"../../constants/icons";import{useMPLocale as l,useMPMessages as r}from"../../internal/locale";import{MPStateLayer as s}from"../../internal/StateLayer";import{hasContent as n,META_TEXT as c,PROSE_TEXT as m,SHEET_GAP as d,SHEET_PAD as p,SHEET_TITLE as f}from"../../internal/scale";import{FADE as u,PORTAL_LAYER as x}from"../../internal/surface";const h={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},g={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=t.Close;export function MPPopover({trigger:v,title:b,description:w,side:N="bottom",align:O="center",sideOffset:P=8,alignOffset:j=0,arrow:y=!1,open:C,defaultOpen:z,onOpenChange:k,modal:M=!1,dismissible:L=!0,showClose:$=!1,closeLabel:B,locale:T,width:A,size:D="md",className:I,style:R,children:S}){const W=l(T),_=r("common",W),q=n(b)||n(w),E=g[D];return o(t.Root,{open:C,defaultOpen:z,modal:M,onOpenChange:(e,o)=>{L||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?k?.(e):o.cancel()},children:[v?e(t.Trigger,{render:v}):null,e(t.Portal,{children:e(t.Positioner,{className:x,side:N,align:O,sideOffset:P,alignOffset:j,children:o(t.Popup,{"data-mp-size":D,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",p[D],d[D],m[D],void 0===A?h[D]:"",u,I??""].filter(Boolean).join(" "),style:{...void 0===A?null:{maxWidth:"number"==typeof A?`${A}px`:A},...R},children:[y?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:E,height:E/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,q||$?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[n(b)?e(t.Title,{className:`m-0 ${f[D]}`,children:b}):null,n(w)?e(t.Description,{className:`text-mp-on-surface-variant m-0 ${c}`,children:w}):null]}),$?o(t.Close,{"aria-label":B??_.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(s,{}),e(i,{icon:a,size:18})]}):null]}):null,n(S)?e("div",{className:"min-w-0",children:S}):null]})})})]})}

package/dist/components/rating/MPRating.d.ts

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { type MPMessages } from '../../internal/i18n';
+import type { MPColor, MPSize } from '../../types';
+/** The words the control says on its own behalf. */
+export type MPRatingLabels = MPMessages['rating'];
+export interface MPRatingProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** The score. Use with `onValueChange` for a controlled rating. */
+    value?: number;
+    /**
+     * Where an uncontrolled rating starts.
+     * @default 0
+     */
+    defaultValue?: number;
+    /** Called with the new score. `0` is what a cleared rating reports. */
+    onValueChange?: (value: number) => void;
+    /**
+     * How many stars there are, and therefore the highest score.
+     * @default 5
+     */
+    count?: number;
+    /**
+     * The smallest step that can be *chosen*, as a fraction of one star — `0.5`
+     * gives half stars, `1` whole ones. Anything outside `0 < precision <= 1`
+     * falls back to `1`.
+     *
+     * It bounds what a reader can pick and nothing else. A `value` of `4.3` is
+     * drawn as four stars and a third at every precision, because an average is
+     * not a choice and rounding it to the nearest half would be reporting a
+     * different number from the one the component was handed.
+     * @default 1
+     */
+    precision?: number;
+    /** The glyph a filled star is drawn with. */
+    icon?: React.ReactNode;
+    /** And the one an empty star is drawn with. It has to be the same shape. */
+    emptyIcon?: React.ReactNode;
+    /**
+     * Choosing the score that is already chosen clears it back to `0`.
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Shows the score without letting it be changed — a product's average, a
+     * rating somebody else left.
+     *
+     * **This is the one `readOnly` in the library that does not drain the
+     * saturation.** It is not a control being held still: there are no inputs at
+     * all, and what is left is a picture of a number. A row of grey stars would
+     * say the score itself was unavailable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Unavailable. Drops the accent for the specification's disabled ink. */
+    disabled?: boolean;
+    /** Identifies the value when a form is submitted. */
+    name?: string;
+    /** A form will not submit until a star has been chosen. */
+    required?: boolean;
+    /**
+     * One star's height, on the glyph ladder. `md` is 24dp.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the filled stars read.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Which language the spoken names are written in — a BCP 47 tag such as `ko`,
+     * `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** Overrides for the words themselves. They win over the translation. */
+    labels?: Partial<MPRatingLabels>;
+    /**
+     * Publishes the score as schema.org `Rating` microdata, which is what a search
+     * engine reads to draw stars beside a result.
+     *
+     * `readOnly` only, and that is the whole of the rule: a score somebody is
+     * still choosing is not a fact about anything, and marking up an empty control
+     * as a rating of nought is telling a crawler something untrue about the page.
+     *
+     * ## It has to be placed inside what it rates
+     *
+     * Microdata is nesting, and this component cannot know what it is nested in —
+     * only the page does. So it emits the `Rating` and its three values, and the
+     * `itemProp` naming the relationship is yours to pass:
+     *
+     * ```tsx
+     * <div itemScope itemType="https://schema.org/Product">
+     *   <h2 itemProp="name">A kettle</h2>
+     *   <MPRating readOnly value={4.3} structuredData itemProp="aggregateRating" />
+     * </div>
+     * ```
+     *
+     * `aggregateRating` also wants a `ratingCount` or a `reviewCount` beside it
+     * before a search engine will draw anything, and that number is the page's
+     * rather than this control's.
+     * @default false
+     */
+    structuredData?: boolean;
+}
+/**
+ * A score out of five, as a row of stars.
+ *
+ * Underneath an interactive rating is a radio group of real `<input>`s, one per
+ * choosable score, each visually hidden under the half of a star it stands for.
+ * That is the whole accessibility argument: a rating *is* "exactly one of
+ * these", so it gets one tab stop for the row, the arrow keys within it,
+ * `aria-checked` on the one that is taken and a value in a form submission —
+ * none of which a row of `<button>`s or a `<div>` with a click handler would
+ * have, and all of which the browser gives for free.
+ *
+ * The fraction is drawn by laying the filled star over the empty one and
+ * clipping it to a percentage of the width. Nothing is transformed and no glyph
+ * is scaled, so a half star is the left half of exactly the star beside it. The
+ * clip runs from the inline start, so it fills from the right under RTL with
+ * nothing being told to.
+ *
+ * `readOnly` is a different component in the same clothes: no inputs, no radio
+ * group, and one `role="img"` carrying the score as a sentence. A star display
+ * that kept twenty focusable radios would be twenty tab stops on a page that was
+ * only reporting a number.
+ *
+ * ## Why the stars are not amber
+ *
+ * Because there is no amber in this library's colour system. MD3 defines four
+ * accent families — `primary`, `secondary`, `tertiary` and `error` — and a fifth
+ * colour hardcoded here would be one the token sheet has no name for and a theme
+ * has no way to change. A product whose stars must be gold sets
+ * `--mp-sys-color-tertiary` to gold and asks for `color="tertiary"`, which is the
+ * same answer this library gives everywhere else.
+ */
+export declare const MPRating: React.ForwardRefExoticComponent<MPRatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/rating/MPRating.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{MPIcon as i}from"../icon/MPIcon";import{StarIcon as n}from"../../constants/icons";import{accentSlots as r}from"../../internal/accent";import{fillMessage as o}from"../../internal/i18n";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden";const c={xs:16,sm:20,md:24,lg:30,xl:36},d={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const MPRating=a.forwardRef(function({value:u,defaultValue:p=0,onValueChange:h,count:f=5,precision:g=1,icon:x,emptyIcon:y,clearable:v=!0,readOnly:b=!1,disabled:j=!1,name:M,required:N=!1,size:P="md",color:w="primary",locale:S,labels:R,structuredData:_=!1,className:z,style:I,onPointerLeave:k,...q},C){const L=l(S),V=s("rating",L,R),A=a.useId(),B=M??A,[F,D]=a.useState(p),E=void 0!==u,O=E?u:F,[T,G]=a.useState(null),H=Math.max(1,Math.floor(f)),J=g>0&&g<=1?g:1,K=Math.round(1/J),Q=Math.max(0,Math.min(H,T??O)),U=e=>e<=0?V.empty:o(V.value,{value:String(e),max:String(H)}),W=e=>{E||D(e),h?.(e)},X=t=>{const a=e(i,{icon:n,size:c[P],className:t?"[&>svg]:fill-current":""});return(t?x:y)??a},Y=Array.from({length:H},(a,i)=>{const n=Math.max(0,Math.min(1,Q-i));return t("span",{className:["mp-rating__star relative inline-flex shrink-0","rounded-mp-xs",b||j?"":["outline-mp-secondary has-[:focus-visible]:outline-2","has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-solid"].join(" ")].filter(Boolean).join(" "),style:{width:c[P],height:c[P]},children:[e("span",{className:["flex items-center justify-center",j?"text-mp-on-surface/38":"text-mp-outline"].join(" "),style:{width:c[P],height:c[P]},children:X(!1)}),e("span",{"aria-hidden":"true",className:"mp-rating__fill pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*n+"%"},children:e("span",{className:["flex items-center justify-center","transition-colors duration-(--mp-sys-motion-duration-short4)",j?"text-mp-on-surface/38":"text-(--_mp-accent)"].join(" "),style:{width:c[P],height:c[P]},children:X(!0)})}),b?null:Array.from({length:K},(t,a)=>{const n=Number((i+(a+1)*J).toFixed(4));return e("label",{className:["absolute inset-y-0",j?"":"cursor-pointer"].join(" "),style:{insetInlineStart:100*a/K+"%",width:100/K+"%"},onPointerEnter:()=>{j||G(n)},children:e("input",{type:"radio",className:m,name:B,value:n,checked:O===n,disabled:j,required:N,"aria-label":U(n),onChange:()=>W(n),onClick:()=>{v&&O===n&&W(0)}})},n)})]},i)}),Z=["mp-rating inline-flex items-center align-middle",d[P],z??""].filter(Boolean).join(" "),$={...r(w),...I};if(b){const i=Math.max(0,Math.min(H,O));return t("div",{ref:C,role:"img","data-mp-size":P,"aria-label":U(i),itemScope:_||void 0,itemType:_?"https://schema.org/Rating":void 0,className:Z,style:$,onPointerLeave:k,...q,children:[_?t(a.Fragment,{children:[e("meta",{itemProp:"ratingValue",content:String(i)}),e("meta",{itemProp:"bestRating",content:String(H)}),e("meta",{itemProp:"worstRating",content:"0"})]}):null,Y]})}return e("div",{ref:C,role:"radiogroup","data-mp-size":P,"aria-label":V.label,"aria-disabled":j||void 0,"aria-required":N||void 0,className:Z,style:$,onPointerLeave:e=>{G(null),k?.(e)},...q,children:Y})});

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

@@ -0,0 +1,2 @@
+export { MPRating } from './MPRating';
+export type { MPRatingLabels, MPRatingProps } from './MPRating';

package/dist/components/rating/index.js

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

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

@@ -32,14 +32,31 @@ export interface MPSelectProps extends MPStyleProps {
     defaultValue?: MPSelectValue | null;
     /** Called with the newly chosen value — a value, not an event. */
     onValueChange?: (value: MPSelectValue | null) => void;
-    /** Shown in the trigger while nothing is chosen. */
+    /**
+     * Shown in the trigger while nothing is chosen.
+     *
+     * With a floating label it is held back until the label has risen out of its
+     * way, which is the moment the select is focused or opened. Two greyed strings
+     * in one box is not a hint, it is a collision.
+     */
     placeholder?: React.ReactNode;
     /**
-     * Label in the outline's notch. Always drawn there rather than floating over
-     * the placeholder, so a select with a label and one without sit at the same
-     * height in a form.
+     * Label for the select, drawn in the outline's notch and — while nothing is
+     * chosen, the popup is shut and there is no `startIcon` — resting on the
+     * trigger's own line where the placeholder would be. See `floatingLabel`.
      */
     label?: React.ReactNode;
+    /**
+     * Whether the label rests on the trigger's line while there is nothing to make
+     * room for, and rises into the notch on focus or on the first choice.
+     *
+     * `false` pins it in the notch, which is the one thing a floating label costs:
+     * a select with a label and one without no longer sit at the same height in a
+     * form until both are answered. A `startIcon` holds the label up regardless —
+     * the icon is already standing where the resting label would be.
+     * @default true
+     */
+    floatingLabel?: boolean;
     /** The line under the control. Replaced by `errorMessage` when there is one. */
     description?: React.ReactNode;
     /**
@@ -58,8 +75,8 @@ export interface MPSelectProps extends MPStyleProps {
     /** Name of the form control. */
     name?: string;
     /**
-     * The id put on the trigger and pointed at by the label. Derived from `name`
-     * when omitted, and generated when there is no name either.
+     * The id put on the trigger and pointed at by the label. Generated when it is
+     * left out.
      */
     id?: string;
 }

package/dist/components/select/MPSelect.js

@@ -1 +1 @@
-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";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as c}from"../../internal/FieldOutline";import{MPSupportingText as d}from"../../internal/SupportingText";import{CONTROL_ICON as m,PROSE_TEXT as p,hasContent as u}from"../../internal/scale";const h={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=t.forwardRef(function({items:f,value:g,defaultValue:x,onValueChange:v,placeholder:b,label:N,description:j,errorMessage:w,startIcon:I,size:y="md",fullWidth:z=!1,required:M=!1,disabled:P=!1,readOnly:S=!1,name:V,id:q},O){const T=u(w),_=h[y],k=t.useId(),R=q??`mp-select-${V??k}`,C=t.useMemo(()=>f.map(e=>({label:e.label??String(e.value),value:e.value})),[f]);return a(r.Root,{className:["mp-select group flex-col align-top",z?"flex w-full":"inline-flex w-fit"].join(" "),disabled:P,invalid:T,"data-mp-size":y,children:[a(n.Root,{id:R,name:V,items:C,value:g,defaultValue:x,onValueChange:e=>v?.(e??null),disabled:P,readOnly:S,required:M,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:O,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",_.padding,_.height,p[y],P?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(S?"cursor-default":"cursor-pointer")].join(" "),children:[I?e("span",{className:["flex shrink-0 items-center",P?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:I}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",P?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:b}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",P?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:m[y]})})]}),e(c,{label:N,required:M}),u(N)?e(s,{size:y,label:N,required:M,htmlFor:R}):null]}),e(n.Portal,{children:e(n.Positioner,{className:"z-50 outline-none",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",p[y]].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:f.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","data-highlighted:bg-mp-on-surface/8","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("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(d,{description:j,errorMessage:w,className:_.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";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as d,useFloatingLabel as c}from"../../internal/FieldOutline";import{MPSupportingText as m}from"../../internal/SupportingText";import{CONTROL_ICON as p,PROSE_TEXT as u,hasContent as h}from"../../internal/scale";const f={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=t.forwardRef(function({items:g,value:x,defaultValue:v,onValueChange:b,placeholder:N,label:j,floatingLabel:w=!0,description:I,errorMessage:y,startIcon:z,size:S="md",fullWidth:P=!1,required:k=!1,disabled:M=!1,readOnly:O=!1,name:V,id:q},T){const _=h(y),C=f[S],R=t.useId(),F=q??R,[L,W]=t.useState(v??null),[B,A]=t.useState(!1),D=void 0===x?L:x,{shrunk:E,focusProps:G}=c({floating:w&&h(j),filled:null!==D&&""!==D,pinned:B||!!z}),H=t.useMemo(()=>g.map(e=>({label:e.label??String(e.value),value:e.value})),[g]);return a(r.Root,{className:["mp-select group flex-col align-top",P?"flex w-full":"inline-flex w-fit"].join(" "),disabled:M,invalid:_,"data-mp-size":S,...G,children:[a(n.Root,{id:F,name:V,items:H,value:x,defaultValue:v,onValueChange:e=>{W(e??null),b?.(e??null)},onOpenChange:A,disabled:M,readOnly:O,required:k,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:T,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",C.padding,C.height,u[S],M?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(O?"cursor-default":"cursor-pointer")].join(" "),children:[z?e("span",{className:["flex shrink-0 items-center",M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:z}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",M?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:E?N:void 0}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:p[S]})})]}),e(d,{label:j,required:k,notched:E}),h(j)?e(s,{size:S,label:j,required:k,htmlFor:F,shrunk:E}):null]}),e(n.Portal,{children:e(n.Positioner,{className:"z-50 outline-none",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",u[S]].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:g.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","data-highlighted:bg-mp-on-surface/8","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("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(m,{description:I,errorMessage:y,className:C.padding})]})});

package/dist/components/skeleton/MPSkeleton.js

@@ -1 +1 @@
-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";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"},t="overflow-hidden bg-(--_mp-placeholder)";function s(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const MPSkeleton=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,...b},v){const y=f?"animate-pulse motion-reduce:animate-none":"",$="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]}`,j=u?{role:"status","aria-busy":!0,"aria-label":u}:{"aria-hidden":!0},k="line"===r&&m>1;return l({render:x,ref:v,props:{"data-mp-size":d,className:(k?["mp-skeleton flex w-full flex-col",n[d],g??""]:["mp-skeleton",t,y,$,g??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":p?`var(--_mp-color-${p}-container)`:"var(--_mp-color-surface-container-highest)",width:s(c),height:s(h),...w},...j,...k?{children:Array.from({length:m},(r,l)=>e("div",{className:[t,y,"rounded-mp-xs",a[d],l===m-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...b}})});
+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";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"},t="overflow-hidden bg-(--_mp-placeholder)";function s(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const MPSkeleton=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 y=f?"animate-pulse motion-reduce:animate-none":"",$="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]}`,j=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",t,y,$,g??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":p?`var(--_mp-color-${p}-container)`:"var(--_mp-color-surface-container-highest)",width:s(c),height:k?void 0:s(h),...w},...j,...k?{children:Array.from({length:m},(r,l)=>e("div",{className:[t,y,"rounded-mp-xs",a[d],l===m-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});

package/dist/components/snackbar/MPSnackbar.d.ts

@@ -114,10 +114,15 @@ export interface MPSnackbarProviderProps {
      */
     showClose?: boolean;
     /**
-     * Accessible name of every snackbar's × button.
-     * @default 'Close'
+     * Accessible name of every snackbar's × button. Defaults to the word for
+     * "close" in `locale`.
      */
     closeLabel?: string;
+    /**
+     * Which language the × button's default name is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     children?: React.ReactNode;
 }
 /**
@@ -167,4 +172,4 @@ export declare function useMPSnackbar(): {
  * is not part of Material Design 3 — so a `Toast` here would be a different
  * component wearing the name of one the specification still ships.
  */
-export declare function MPSnackbarProvider({ color, position, timeout, limit, width, size, showClose, closeLabel, children }: MPSnackbarProviderProps): React.JSX.Element;
+export declare function MPSnackbarProvider({ color, position, timeout, limit, width, size, showClose, closeLabel, locale: localeProp, children }: MPSnackbarProviderProps): React.JSX.Element;

package/dist/components/snackbar/MPSnackbar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{Toast as i}from"@base-ui/react/toast";import{MPIcon as s}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as r}from"../../internal/accent";import{MPStateLayer as l}from"../../internal/StateLayer";import{FADE as a,PORTAL_LAYER as c}from"../../internal/surface";const p={"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"},m={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:"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"},d={xs:16,sm:18,md:20,lg:22,xl:24};function f(e){const{color:o,icon:t,message:i,actionLabel:s,onAction:n,...r}=e;return{...r,title:i,data:{color:o,icon:t},actionProps:void 0===s?void 0:{children:s,onClick:n}}}export function useMPSnackbar(){const e=i.useToastManager();return t.useMemo(()=>({add:o=>e.add(f(o)),close:o=>e.close(o),update:(o,t)=>e.update(o,f(t)),promise:(o,t)=>e.promise(o,{loading:f(t.loading),success:e=>f("function"==typeof t.success?t.success(e):t.success),error:e=>f("function"==typeof t.error?t.error(e):t.error)}),snackbars:e.toasts}),[e])}function x({toast:t,color:c,size:p,showClose:f,closeLabel:x,swipeDirection:b}){const h=t.data?.color??c,v=t.data?.icon,y={"--_mp-plate":h?`var(--_mp-color-${h}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":h?`var(--_mp-color-on-${h}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":h?`var(--_mp-color-${h})`:"var(--_mp-color-inverse-primary)",...h?r(h):null};return o(i.Root,{toast:t,swipeDirection:b,"data-mp-size":p,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",u[p],m[p],a,"data-limited:hidden"].join(" "),style:y,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(i.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(i.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(" ")}),f?o(i.Close,{"aria-label":x,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(l,{}),e(s,{icon:n,size:d[p]})]}):null]})}function b({position:o,width:t,...s}){const{toasts:n}=i.useToastManager(),r=[o.startsWith("top")?"up":"down","left","right"];return e(i.Portal,{children:e(i.Viewport,{className:[c,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",p[o]].join(" "),children:n.map(o=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof t?`${t}px`:t},children:e(x,{toast:o,swipeDirection:r,...s})},o.id))})})}export function MPSnackbarProvider({color:t,position:s="bottom-start",timeout:n=5e3,limit:r=3,width:l=600,size:a="md",showClose:c=!0,closeLabel:p="Close",children:m}){return o(i.Provider,{timeout:n,limit:r,children:[m,e(b,{position:s,width:l,color:t,size:a,showClose:c,closeLabel:p})]})}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{Toast as i}from"@base-ui/react/toast";import{MPIcon as s}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as r}from"../../internal/accent";import{useMPLocale as l,useMPMessages as a}from"../../internal/locale";import{MPStateLayer as c}from"../../internal/StateLayer";import{FADE as m,PORTAL_LAYER as p}from"../../internal/surface";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"},d={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:"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"},x={xs:16,sm:18,md:20,lg:22,xl:24};function b(e){const{color:o,icon:t,message:i,actionLabel:s,onAction:n,...r}=e;return{...r,title:i,data:{color:o,icon:t},actionProps:void 0===s?void 0:{children:s,onClick:n}}}export function useMPSnackbar(){const e=i.useToastManager();return t.useMemo(()=>({add:o=>e.add(b(o)),close:o=>e.close(o),update:(o,t)=>e.update(o,b(t)),promise:(o,t)=>e.promise(o,{loading:b(t.loading),success:e=>b("function"==typeof t.success?t.success(e):t.success),error:e=>b("function"==typeof t.error?t.error(e):t.error)}),snackbars:e.toasts}),[e])}function h({toast:t,color:l,size:a,showClose:p,closeLabel:u,swipeDirection:b}){const h=t.data?.color??l,v=t.data?.icon,y={"--_mp-plate":h?`var(--_mp-color-${h}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":h?`var(--_mp-color-on-${h}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":h?`var(--_mp-color-${h})`:"var(--_mp-color-inverse-primary)",...h?r(h):null};return o(i.Root,{toast:t,swipeDirection:b,"data-mp-size":a,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",f[a],d[a],m,"data-limited:hidden"].join(" "),style:y,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(i.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(i.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(" ")}),p?o(i.Close,{"aria-label":u,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(s,{icon:n,size:x[a]})]}):null]})}function v({position:o,width:t,...s}){const{toasts:n}=i.useToastManager(),r=[o.startsWith("top")?"up":"down","left","right"];return e(i.Portal,{children:e(i.Viewport,{className:[p,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",u[o]].join(" "),children:n.map(o=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof t?`${t}px`:t},children:e(h,{toast:o,swipeDirection:r,...s})},o.id))})})}export function MPSnackbarProvider({color:t,position:s="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:m="md",showClose:p=!0,closeLabel:u,locale:d,children:f}){const x=l(d),b=a("common",x);return o(i.Provider,{timeout:n,limit:r,children:[f,e(v,{position:s,width:c,color:t,size:m,showClose:p,closeLabel:u??b.close})]})}

package/dist/components/spoiler/MPSpoiler.js

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

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

@@ -50,8 +50,8 @@ export interface MPSwitchProps {
     /** Name of the form control. */
     name?: string;
     /**
-     * The id put on the control and pointed at by the label. Derived from `name`
-     * when omitted, and generated when there is no name either.
+     * The id put on the control and pointed at by the label. Generated when it is
+     * left out.
      */
     id?: string;
     /**

package/dist/components/switch/MPSwitch.js

@@ -1 +1 @@
-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 c}from"../icon/MPIcon";import{CheckIcon as s,CloseIcon as o}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as h}from"../../internal/SupportingText";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale";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=r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:x,description:b,errorMessage:z,icons:y=!1,labelPlacement:w="end",size:j="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1},S){const W=p(z),q=W?"error":N,F=u[j],I=r.useId(),L=P??`mp-switch-${v??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(" ")}),y?a(t,{children:[e("span",{className:["hidden items-center group-data-checked:flex",C?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(c,{icon:s,size:F.glyph,strokeWidth:3})}),e("span",{className:"text-mp-surface-container-highest flex items-center group-data-checked:hidden",children:e(c,{icon:o,size:F.glyph,strokeWidth:3})})]}):null]})})}),T=p(x)||p(b)||W?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===w?"flex-1":""].filter(Boolean).join(" "),children:[p(x)?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:[x,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:b,errorMessage:z})]}):null;return e(i.Root,{className:["mp-switch align-top",R?"flex w-full":"inline-flex"].join(" "),disabled:C,invalid:W,"data-mp-size":j,style:l(q),children:e("div",{className:["flex w-full items-start gap-3",m[j]].join(" "),children:a(t,"start"===w?{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 c}from"../icon/MPIcon";import{CheckIcon as s,CloseIcon as o}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as h}from"../../internal/SupportingText";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale";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=r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:x,description:b,errorMessage:z,icons:y=!1,labelPlacement:w="end",size:j="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1},S){const W=p(z),q=W?"error":N,F=u[j],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(" ")}),y?a(t,{children:[e("span",{className:["hidden items-center group-data-checked:flex",C?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(c,{icon:s,size:F.glyph,strokeWidth:3})}),e("span",{className:"text-mp-surface-container-highest flex items-center group-data-checked:hidden",children:e(c,{icon:o,size:F.glyph,strokeWidth:3})})]}):null]})})}),T=p(x)||p(b)||W?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===w?"flex-1":""].filter(Boolean).join(" "),children:[p(x)?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:[x,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:b,errorMessage:z})]}):null;return e(i.Root,{className:["mp-switch align-top",R?"flex w-full":"inline-flex"].join(" "),disabled:C,invalid:W,"data-mp-size":j,style:l(q),children:e("div",{className:["flex w-full items-start gap-3",m[j]].join(" "),children:a(t,"start"===w?{children:[T,O]}:{children:[O,T]})})})});

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

@@ -70,7 +70,20 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
      * @default false
      */
     stickyHeader?: boolean;
-    /** Makes rows activatable. Also turns on the hover treatment. */
+    /**
+     * Makes rows activatable. Also turns on the hover treatment.
+     *
+     * A row that answers a press has to answer a keyboard too, so each one joins
+     * the tab order and takes Enter and Space. That is the honest minimum for a
+     * `<tr>` — a row cannot be wrapped in a `<button>` the way an
+     * [MPListItem](../layout/list) is, because a `<button>` is not something a
+     * `<tbody>` may contain.
+     *
+     * It is also worth knowing what it costs: a table of two hundred rows becomes
+     * two hundred tab stops. When the row's job is to *navigate*, put a link in
+     * the first cell instead — one tab stop per row that is already announced as
+     * a link and can be opened in a new tab.
+     */
     onRowClick?: (row: Row, index: number) => void;
     /**
      * How much surface the sheet around the table paints.

package/dist/components/table/MPTable.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{accentSlots as r}from"../../internal/accent";import{META_TEXT as a}from"../../internal/scale";import{CONTAINER_SURFACE as l}from"../../internal/surface";const o={xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},m={xs:"0.375rem",sm:"0.625rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},n={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"},i={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=["[--_mp-row:transparent]","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ");export function MPTable({headers:c,items:d,getRowKey:p,caption:x,empty:u="No data",striped:y=!1,hoverable:h=!1,stickyHeader:g=!1,onRowClick:b,variant:f="outlined",size:v="md",color:w="primary",className:k,style:N,..._}){const j=o[v],$=m[v],C=Boolean(b),A=h||C,B={padding:`${$} ${j}`},z={...B,backgroundColor:"var(--_mp-color-surface-container)"},R={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":v,"data-mp-variant":f,className:["mp-table rounded-mp-md overflow-x-auto",l[f],k??""].filter(Boolean).join(" "),style:{...r(w),...N},..._,children:t("table",{className:`text-mp-on-surface w-full text-start ${n[v]}`,style:{borderCollapse:"collapse"},children:[x?e("caption",{className:`text-mp-on-surface-variant ${a}`,style:{...B,textAlign:"start"},children:x}):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",i[v],g?"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:R,children:e("td",{colSpan:c.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${j}`,textAlign:"center"},children:u})}):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":""].filter(Boolean).join(" "),style:R,onClick:b?()=>b(t,r):void 0,children:c.map(a=>e("td",{style:{...B,textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},p?p(t,r):r))})]})})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{accentSlots as r}from"../../internal/accent";import{META_TEXT as o}from"../../internal/scale";import{CONTAINER_SURFACE as l}from"../../internal/surface";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=["[--_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:N,...j}){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),...N},...j,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))})]})})}