material-plus-ui 1.0.0 → 1.2.0

package/dist/components/pagination/MPPagination.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { type MPMessages } from '../../internal/i18n';
+import type { MPColor, MPStyleProps } from '../../types';
+/** The words the row says on its own behalf. */
+export type MPPaginationLabels = MPMessages['pagination'];
+export interface MPPaginationProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'onChange'> {
+    /**
+     * How many pages there are. Fewer than two and the whole control renders
+     * nothing — one page is not a set of pages, and a row holding a lone disabled
+     * "1" is a control advertising that it has nothing to do.
+     */
+    count: number;
+    /** The current page, 1-based. Use with `onPageChange` for a controlled row. */
+    page?: number;
+    /**
+     * Which page starts current, for an uncontrolled row.
+     * @default 1
+     */
+    defaultPage?: number;
+    /** Called with the page that was chosen. */
+    onPageChange?: (page: number) => void;
+    /**
+     * How many pages are always shown on either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * How many pages are always shown at each end, whatever page is current. `0`
+     * drops the first and last page from the row, leaving only the window.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Shows the two steppers that jump to the first and last page.
+     * @default false
+     */
+    showEdges?: boolean;
+    /**
+     * Shows the two steppers that move by one page.
+     * @default true
+     */
+    showArrows?: boolean;
+    /**
+     * Which accent family the current page is filled with.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Unavailable. Every cell in the row stops answering. */
+    disabled?: boolean;
+    /**
+     * The address of a page, which turns every number in the row into a real link.
+     *
+     * Without it the row is buttons, and a crawler cannot press one — so a paged
+     * list of articles, products or search results exists for a reader and stops
+     * at page one for everything else. With it the numbers are `<a href>`, the two
+     * steppers carry `rel="prev"` and `rel="next"`, and the browser's own
+     * behaviour comes back: open in a new tab, copy the address, see where a press
+     * is going before making it.
+     *
+     * `onPageChange` still fires and the navigation is still cancelled first, so a
+     * client-side router keeps the page it already has.
+     */
+    getPageHref?: (page: number) => string;
+    /**
+     * Which language the row names itself in — a BCP 47 tag such as `ko`, `pt-BR`
+     * or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * Nothing here is ever drawn, so without it a Korean page reads its pages out
+     * in English.
+     */
+    locale?: string;
+    /** Overrides for the words themselves. They win over the translation. */
+    labels?: Partial<MPPaginationLabels>;
+}
+/**
+ * A row of pages, one of which is the one being read.
+ *
+ * Material has no pagination component, so what is Material here is everything
+ * *around* the decision: the cells are pills at the library's own control
+ * heights, the current one is filled with the accent under its own ink, the rest
+ * are the quiet `text` treatment, and every one of them carries the state layer
+ * the specification uses in place of a hover colour.
+ *
+ * The current page is the one thing the row has to say without being read, which
+ * is why it is the only cell that is filled. Nine filled cells in a row would say
+ * that all nine are the primary action.
+ *
+ * ## The markup, and why it is that
+ *
+ * A `<nav>` around a `<ul>`: a named landmark a screen reader can skip, holding
+ * a list whose length says how far the pages go, with `aria-current="page"`
+ * marking where the reader is. The ellipsis is a `<span>` rather than a disabled
+ * button — it is not a control that happens to be unavailable, it is
+ * punctuation — and it is `aria-hidden`, because "horizontal ellipsis" read out
+ * between two numbers is noise.
+ *
+ * ## Why it builds its own cells
+ *
+ * For the reason [MPSegmentedButton](../inputs/segmented-button) does: a page
+ * cell is square-ish and grows only for a long number, which is not a shape
+ * [MPButton](../inputs/button) has — a button is a pill with inline padding
+ * proportional to its height, and nine of those in a row is a very long row. The
+ * heights, the type scale and the state layer are the shared ones, so a `sm`
+ * pagination still lines up with a `sm` button beside it.
+ */
+export declare const MPPagination: React.ForwardRefExoticComponent<MPPaginationProps & React.RefAttributes<HTMLElement>>;

package/dist/components/pagination/MPPagination.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as o}from"../../constants/icons";import{accentSlots as s}from"../../internal/accent";import{fillMessage as m}from"../../internal/i18n";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale";import{MPStateLayer as u}from"../../internal/StateLayer";import{CONTROL_ICON as f,CONTROL_TEXT as d}from"../../internal/scale";import{VISUALLY_HIDDEN as h}from"../../internal/visually-hidden";const g={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},x={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function b(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=t.forwardRef(function({count:y,page:v,defaultPage:M=1,onPageChange:w,siblingCount:N=1,boundaryCount:j=1,showEdges:P=!1,showArrows:C=!0,size:S="md",color:K="primary",fullWidth:_=!1,disabled:k=!1,getPageHref:z,locale:$,labels:A,className:B,style:D,...E},H){const I=c($),L=p("pagination",I,A),[R,W]=t.useState(M),q=void 0!==v,F=Math.min(Math.max(v??R,1),Math.max(y,1));if(y<2)return null;const G=function(e,n,t,a){const i=b(1,Math.min(a,e)),r=b(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...b(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(y,F,N,j),J=F<=1,O=F>=y,Q=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||z&&!w||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),y);n!==F&&(q||W(n),w?.(n))})(n))},T=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",g[S],d[S],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),U=(t,a,i,r,l,o,s)=>e("li",{className:"flex",children:!z||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:T(r,i),onClick:e=>Q(e,a),children:[i?null:e(u,{}),e("span",{className:"relative",children:o})]}):n("a",{href:z(a),rel:s,"aria-label":l,className:T(!1,!1),onClick:e=>Q(e,a),children:[e(u,{}),e("span",{className:"relative",children:o})]})},t),V=n=>e(a,{icon:n,size:f[S],className:"rtl:rotate-180"});return n("nav",{ref:H,"aria-label":L.label,"data-mp-size":S,className:["mp-pagination flex",_?"w-full justify-center":"",B??""].filter(Boolean).join(" "),style:{...s(K),...D},...E,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${x[S]}`,children:[P?U("first",1,k||J,!1,L.first,V(l)):null,C?U("previous",F-1,k||J,!1,L.previous,V(i),"prev"):null,G.map((n,t)=>"number"==typeof n?U(`slot-${t}`,n,k,n===F,m(L.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",g[S],d[S]].join(" "),children:"…"},`slot-${t}`)),C?U("next",F+1,k||O,!1,L.next,V(r),"next"):null,P?U("last",y,k||O,!1,L.last,V(o)):null]}),e("span",{className:h,"aria-live":"polite",children:m(L.status,{page:String(F),total:String(y)})})]})});

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

@@ -0,0 +1,2 @@
+export { MPPagination } from './MPPagination';
+export type { MPPaginationLabels, MPPaginationProps } from './MPPagination';

package/dist/components/pagination/index.js

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

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/radio-group/MPRadioGroup.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent";import{MPStateLayer as t}from"../../internal/StateLayer";import{MPSupportingText as s}from"../../internal/SupportingText";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale";const u={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},m=a.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=a.forwardRef(function({value:l,label:o,description:s,disabled:f=!1,id:x},h){const g=a.useContext(m),b=u[g.size],z=a.useId(),v=x??`mp-radio-${z}`;return e(n.Root,{className:"mp-radio inline-block align-top",disabled:f,"data-mp-value":l,children:r("div",{className:["flex items-start gap-3",c[g.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(i.Root,{ref:h,id:v,value:l,disabled:f,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",b.ring,f?"border-mp-on-surface/38 cursor-default":[g.readOnly?"cursor-default":"cursor-pointer",g.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",b.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",b.fill,f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(n.Label,{htmlFor:v,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":g.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(n.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=a.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:u,description:f,errorMessage:x,orientation:h="vertical",size:g="md",color:b="primary",required:z=!1,disabled:v=!1,readOnly:y=!1,name:j,children:N},R){const O=p(x),k=O?"error":b,w=a.useId(),M=a.useMemo(()=>({size:g,readOnly:y,invalid:O}),[g,y,O]);return e(m.Provider,{value:M,children:r(n.Root,{className:"mp-radio-group flex flex-col gap-2",disabled:v,invalid:O,"data-mp-size":g,"data-mp-orientation":h,style:o(k),children:[p(u)?r("span",{id:w,className:[d,v?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[u,z?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:R,"aria-labelledby":p(u)?w:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:v,readOnly:y,required:z,name:j,className:["flex","horizontal"===h?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as n}from"@base-ui/react/radio-group";import{Field as l}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent";import{MPStateLayer as t}from"../../internal/StateLayer";import{MPSupportingText as s}from"../../internal/SupportingText";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale";const m={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},u=r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=r.forwardRef(function({value:n,label:o,description:s,disabled:f=!1,id:x},g){const h=r.useContext(u),b=m[h.size],y=r.useId(),z=x??`mp-radio-${y}`;return e(l.Root,{className:"mp-radio inline-block align-top",disabled:f,"data-mp-value":n,children:a("div",{className:["flex items-start gap-3",c[h.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:g,id:z,value:n,disabled:f,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",b.ring,f?"border-mp-on-surface/38 cursor-default":[h.readOnly?"cursor-default":"cursor-pointer",h.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",b.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",b.fill,"transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0",f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(l.Label,{htmlFor:z,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":h.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(l.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:m,description:f,errorMessage:x,orientation:g="vertical",size:h="md",color:b="primary",required:y=!1,disabled:z=!1,readOnly:v=!1,name:j,children:N},R){const O=p(x),k=O?"error":b,w=r.useId(),M=r.useMemo(()=>({size:h,readOnly:v,invalid:O}),[h,v,O]);return e(u.Provider,{value:M,children:a(l.Root,{className:"mp-radio-group flex flex-col gap-2",disabled:z,invalid:O,"data-mp-size":h,"data-mp-orientation":g,style:o(k),children:[p(m)?a("span",{id:w,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:R,"aria-labelledby":p(m)?w:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:v,required:y,name:j,className:["flex","horizontal"===g?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});

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/segmented-button/MPSegmentedButton.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{Toggle as t}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon";import{CheckIcon as l}from"../../constants/icons";import{MPStateLayer as i}from"../../internal/StateLayer";import{CONTROL_GAP as s,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale";export const MPSegmentedButton=n.forwardRef(function({items:n,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:x="md",fullWidth:j=!1,disabled:v=!1,"aria-label":w},y){return e(o,{ref:y,"aria-label":w,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:v,"data-mp-size":x,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",v?"border-mp-on-surface/12":"border-mp-outline",j?"flex w-full":"inline-flex w-fit",d[x]].join(" "),children:n.map((n,o)=>{const d=v||n.disabled;return r(t,{value:n.value,disabled:n.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[x],s[x],m[x],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||n.icon?r("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[x],height:c[x]},children:[g?e("span",{className:"hidden items-center group-data-pressed:flex",children:e(a,{icon:l,size:c[x]})}):null,n.icon?e("span",{className:["flex items-center",g?"group-data-pressed:hidden":""].filter(Boolean).join(" "),children:n.icon}):null]}):null,e("span",{className:"truncate",children:n.label})]},n.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";import{CheckIcon as i}from"../../constants/icons";import{MPStateLayer as s}from"../../internal/StateLayer";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";export const MPSegmentedButton=r.forwardRef(function({items:r,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:x="md",fullWidth:y=!1,disabled:j=!1,"aria-label":v},w){return e(o,{ref:w,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:j,"data-mp-size":x,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",j?"border-mp-on-surface/12":"border-mp-outline",y?"flex w-full":"inline-flex w-fit",d[x]].join(" "),children:r.map((r,o)=>{const d=j||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[x],l[x],u[x],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(" "),y?"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[x],height:c[x]},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[x]})}):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)})})});

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{MPStateLayer as m}from"../../internal/StateLayer";import{MPSupportingText as p}from"../../internal/SupportingText";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale";import{FADE as g,PORTAL_LAYER as x}from"../../internal/surface";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=t.forwardRef(function({items:b,value:N,defaultValue:y,onValueChange:j,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(y??null),[E,G]=t.useState(!1),H=void 0===N?A:N,{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:N,defaultValue:y,onValueChange:e=>{D(e??null),j?.(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})]})});

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/slider/MPSlider.js

@@ -1 +1 @@
-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 l}from"../../internal/accent";import{MPStateLayer as t}from"../../internal/StateLayer";import{META_TEXT as n,hasContent as i}from"../../internal/scale";const o={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={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=r.forwardRef(function({value:r,defaultValue:m,onValueChange:u,onValueCommitted:p,min:d=0,max:f=100,step:h=1,label:x,description:g,showValue:b=!1,format:w,orientation:j="horizontal",size:z="md",color:v="primary",disabled:C=!1,name:y,"aria-label":N},_){const k="vertical"===j,V=o[z],$=r??m,A=Array.isArray($)?$.length:1;return s(a.Root,{ref:_,value:r,defaultValue:m,onValueChange:e=>u?.(e),onValueCommitted:e=>p?.(e),min:d,max:f,step:h,disabled:C,orientation:j,format:w,name:y,"data-mp-size":z,className:["mp-slider flex",k?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",C?"cursor-default":""].filter(Boolean).join(" "),style:l(v),children:[i(x)||b?s("div",{className:["flex w-full items-baseline gap-2",n].join(" "),children:[i(x)?e(a.Label,{className:C?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:x}):null,b?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 flex touch-none items-center justify-center select-none",k?`${V.stripCross} h-40 flex-col`:`w-full ${V.strip}`,C?"":"cursor-pointer"].filter(Boolean).join(" "),children:s(a.Track,{className:["mp-slider__track rounded-mp-full relative",k?`${V.cross} h-full`:`${V.thickness} w-full`,C?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full",C?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:A},(s,r)=>e(a.Thumb,{index:r,"aria-label":i(x)?void 0:N,className:["mp-slider__handle group rounded-mp-full relative outline-none",V.handle,C?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:C?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",c[z],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},r))]})}),i(g)?e("div",{className:[n,C?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:g}):null]})});
+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";import{MPStateLayer as n}from"../../internal/StateLayer";import{META_TEXT as i,hasContent as o}from"../../internal/scale";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=["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=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]})});

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 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";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as r}from"../../internal/accent";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale";import{MPStateLayer as c}from"../../internal/StateLayer";import{PORTAL_LAYER as m}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"},d=["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),u={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"},f={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},x={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"},b={xs:16,sm:18,md:20,lg:22,xl:24};function y(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(y(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,y(o)),promise:(t,o)=>e.promise(t,{loading:y(o.loading),success:e=>y("function"==typeof o.success?o.success(e):o.success),error:e=>y("function"==typeof o.error?o.error(e):o.error)}),snackbars:e.toasts}),[e])}function h({toast:o,color:a,size:l,showClose:m,closeLabel:p,swipeDirection:y,edge:h}){const g=o.data?.color??a,v=o.data?.icon,w={"--_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:y,"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",x[l],f[l],d,u[h],"data-limited:hidden"].join(" "),style:w,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:b[l]})]}):null]})}function g({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:[m,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",p[t]].join(" "),children:n.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof o?`${o}px`:o},children:e(h,{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:m="md",showClose:p=!0,closeLabel:d,locale:u,children:f}){const x=a(u),b=l("common",x);return t(s.Provider,{timeout:n,limit:r,children:[f,e(g,{position:i,width:c,color:o,size:m,showClose:p,closeLabel:d??b.close})]})}