material-plus-ui 1.5.0 → 1.6.0

package/dist/components/pill/MPPill.js

@@ -1,2 +1,2 @@
 "use client";
-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.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";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.js";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=/*@__PURE__*/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]})});
+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.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";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.js";import{useMPSize as f}from"../../internal/config.js";const h={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},x={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={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"},w={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=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:j,description:y,details:N,expanded:k=!1,position:_="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(0);o.useEffect(()=>{const e=L.current;if(!e)return;const t=new ResizeObserver(()=>q(e.scrollHeight));return t.observe(e),q(e.scrollHeight),()=>t.disconnect()},[N]);const A=Boolean(B),D=u[F],G=t(n,{children:[m(g)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[F],height:l[F]},children:g}):null,m(j)||m(y)||m(P)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",x[F]].join(" "),children:[m(j)?e("span",{className:"max-w-full truncate",children:j}):null,m(y)?e("span",{className:`max-w-full truncate font-normal ${d} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:y}):null,P]}):null]});return t("div",{ref:E,"data-mp-size":F,"data-mp-variant":C,"data-mp-expanded":k||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",k?"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[F],b[C],w[_][z],$??""].filter(Boolean).join(" "),style:{...i(R),...H},...S,children:[t("div",{className:["flex shrink-0 items-center py-1",h[F],a[F],A?"ps-0":D,m(v)?"pe-1":A?"pe-0":""].filter(Boolean).join(" "),children:[A?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[F],D,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(N)?k:void 0,"aria-controls":m(N)?M:void 0,onClick:B,children:[e(s,{}),G]}):G,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(N)?e("div",{id:M,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:k?O:0},...r(!k),children:e("div",{ref:L,className:`${D} pb-2 whitespace-normal ${p[F]}`,children:N})}):null]})});

package/dist/components/popconfirm/MPPopconfirm.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPSide, MPSize } from '../../types.js';
+export interface MPPopconfirmProps {
+    /**
+     * The control that asks, and that the question hangs off. Exactly one element,
+     * and it must accept a ref and spread props — every Material Plus component
+     * does.
+     */
+    trigger: React.ReactElement;
+    /** The question, as the popup's heading. */
+    title?: React.ReactNode;
+    /** A line under it — what happens, and to what. */
+    description?: React.ReactNode;
+    /** Anything else the popup should hold. */
+    children?: React.ReactNode;
+    /**
+     * Called when the reader says yes.
+     *
+     * A callback rather than a promise, and that is the whole difference from
+     * [`useMPConfirm`](../feedback/confirm): this one is written where the button
+     * is, so there is already a handler there to put it in.
+     */
+    onConfirm?: () => void;
+    /** Called when they say no. Dismissing counts — see `onOpenChange`. */
+    onCancel?: () => void;
+    /** What the yes button says. @default the translation of `Confirm` */
+    confirmLabel?: React.ReactNode;
+    /** What the no button says. @default the translation of `Cancel` */
+    cancelLabel?: React.ReactNode;
+    /**
+     * The accent the yes button is drawn in. `'error'` is what a destructive
+     * question wants, and it is not the default for the reason `useMPConfirm`
+     * gives: a red button on every confirmation stops being a warning.
+     */
+    color?: MPColor;
+    /** Which edge of the trigger the question appears on. @default 'top' */
+    side?: MPSide;
+    /** @default 'center' */
+    align?: MPAlign;
+    /** @default true */
+    arrow?: boolean;
+    size?: MPSize;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * A confirmation that stays where the control is.
+ *
+ * ```tsx
+ * <MPPopconfirm
+ *   trigger={<MPButton color="error">Delete</MPButton>}
+ *   title="Delete this row?"
+ *   confirmLabel="Delete"
+ *   color="error"
+ *   onConfirm={() => remove(id)}
+ * />
+ * ```
+ *
+ * ## When this rather than `useMPConfirm`
+ *
+ * They ask the same question and the difference is **where the reader's eye
+ * is**, which is a real difference and not a stylistic one:
+ *
+ * | | `MPPopconfirm` | [`useMPConfirm`](../feedback/confirm) |
+ * | --- | --- | --- |
+ * | Appears | at the control | in the middle of the screen |
+ * | The page behind | stays put | goes under a scrim |
+ * | Costs | one element | a provider |
+ * | Answers with | a callback | a promise |
+ *
+ * A row of twelve delete buttons is the case for this one: a modal that covered
+ * the table would take away the row the reader was pointing at, and having to
+ * re-find it afterwards is how the wrong row gets deleted. A confirmation about
+ * the *page* — leaving with unsaved changes, an irreversible account action —
+ * wants the modal, because it is not about a thing on the page at all.
+ *
+ * ## Every other way out is *no*
+ *
+ * Escape, a press outside and the cancel button all close it without confirming,
+ * and `onCancel` is called for all three. That is the same rule `useMPConfirm`
+ * follows and for the same reason: the safe answer to "are you sure" is no.
+ *
+ * ## It is a popover, not a dialog
+ *
+ * So it does not trap the focus and the page behind it stays live. That is the
+ * point of the shape — but it also means a reader can walk away from the
+ * question with Tab, which a modal would not allow. Use the modal where the
+ * answer genuinely has to be given.
+ */
+export declare function MPPopconfirm({ trigger, title, description, children, onConfirm, onCancel, confirmLabel, cancelLabel, color: colorProp, side, align, arrow, size: sizeProp, open: openProp, defaultOpen, onOpenChange, className }: MPPopconfirmProps): React.JSX.Element;

package/dist/components/popconfirm/MPPopconfirm.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{MPButton as n}from"../button/MPButton.js";import{MPPopover as i}from"../popover/MPPopover.js";import{useMPLocale as t,useMPMessages as a}from"../../internal/locale.js";import{CONFIRM as s}from"../../internal/messages/confirm.js";import{useMPColor as c,useMPSize as l}from"../../internal/config.js";export function MPPopconfirm({trigger:m,title:p,description:f,children:d,onConfirm:g,onCancel:j,confirmLabel:u,cancelLabel:h,color:x,side:v="top",align:C="center",arrow:P=!0,size:z,open:b,defaultOpen:M,onOpenChange:N,className:O}){const k=l(z),w=c(x),L=a(s,t()),[y,B]=o.useState(M??!1),S=e=>{void 0===b&&B(e),N?.(e)},q=e=>{S(!1),e?g?.():j?.()};return r(i,{trigger:m,title:p,description:f,side:v,align:C,arrow:P,size:k,open:b??y,onOpenChange:e=>{e?S(!0):q(!1)},className:O,children:[d,r("div",{className:"mt-3 flex justify-end gap-1",children:[e(n,{variant:"text",size:"sm",onClick:()=>q(!1),children:h??L.cancel}),e(n,{variant:"text",size:"sm",color:w,onClick:()=>q(!0),children:u??L.confirm})]})]})}

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

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

package/dist/components/popconfirm/index.js

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

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

@@ -140,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, locale: localeProp, 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: sizeProp, className, style, children }: MPPopoverProps): React.JSX.Element;

package/dist/components/popover/MPPopover.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as s}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{cssLength as r}from"../../internal/length.js";import{COMMON as n}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{hasContent as c,META_TEXT as d,PROSE_TEXT as p,SHEET_GAP as f,SHEET_PAD as u,SHEET_TITLE as h}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as g}from"../../internal/surface.js";const v={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},b={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=s.Close;export function MPPopover({trigger:j,title:w,description:N,side:O="bottom",align:P="center",sideOffset:y=8,alignOffset:C=0,arrow:z=!1,open:k,defaultOpen:M,onOpenChange:L,modal:B=!1,dismissible:T=!0,showClose:$=!1,closeLabel:A,locale:D,width:I,size:R="md",className:S,style:W,children:_}){const q=a(D),E=l(n,q),F=c(w)||c(N),G=b[R];return o(s.Root,{open:k,defaultOpen:M,modal:B,onOpenChange:(e,o)=>{T||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?L?.(e):o.cancel()},children:[j?e(s.Trigger,{render:j}):null,e(s.Portal,{children:e(s.Positioner,{className:g,side:O,align:P,sideOffset:y,alignOffset:C,children:o(s.Popup,{"data-mp-size":R,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",u[R],f[R],p[R],void 0===I?v[R]:"",x,S??""].filter(Boolean).join(" "),style:{...void 0===I?null:{maxWidth:r(I)},...W},children:[z?e(s.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:G,height:G/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,F||$?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(w)?e(s.Title,{className:`m-0 ${h[R]}`,children:w}):null,c(N)?e(s.Description,{className:`text-mp-on-surface-variant m-0 ${d}`,children:N}):null]}),$?o(s.Close,{"aria-label":A??E.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(m,{}),e(t,{icon:i,size:18})]}):null]}):null,c(_)?e("div",{className:"min-w-0",children:_}):null]})})})]})}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as s}from"../icon/MPIcon.js";import{CloseIcon as t}from"../../constants/icons.js";import{useMPLocale as r,useMPMessages as a}from"../../internal/locale.js";import{cssLength as l}from"../../internal/length.js";import{COMMON as n}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{hasContent as c,META_TEXT as d,PROSE_TEXT as p,SHEET_GAP as f,SHEET_PAD as u,SHEET_TITLE as h}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as g}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const b={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},j={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=i.Close;export function MPPopover({trigger:w,title:N,description:O,side:P="bottom",align:y="center",sideOffset:C=8,alignOffset:z=0,arrow:k=!1,open:M,defaultOpen:L,onOpenChange:B,modal:T=!1,dismissible:$=!0,showClose:A=!1,closeLabel:D,locale:I,width:R,size:S,className:W,style:_,children:q}){const E=v(S),F=r(I),G=a(n,F),H=c(N)||c(O),J=j[E];return o(i.Root,{open:M,defaultOpen:L,modal:T,onOpenChange:(e,o)=>{$||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?B?.(e):o.cancel()},children:[w?e(i.Trigger,{render:w}):null,e(i.Portal,{children:e(i.Positioner,{className:g,side:P,align:y,sideOffset:C,alignOffset:z,children:o(i.Popup,{"data-mp-size":E,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",u[E],f[E],p[E],void 0===R?b[E]:"",x,W??""].filter(Boolean).join(" "),style:{...void 0===R?null:{maxWidth:l(R)},..._},children:[k?e(i.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:J,height:J/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,H||A?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(N)?e(i.Title,{className:`m-0 ${h[E]}`,children:N}):null,c(O)?e(i.Description,{className:`text-mp-on-surface-variant m-0 ${d}`,children:O}):null]}),A?o(i.Close,{"aria-label":D??G.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(m,{}),e(s,{icon:t,size:18})]}):null]}):null,c(q)?e("div",{className:"min-w-0",children:q}):null]})})})]})}

package/dist/components/progress-box/MPProgressBox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as l}from"../../internal/accent.js";import{META_TEXT as t,STACK_GAP as n}from"../../internal/scale.js";import{SEGMENT_GAP as o,SEGMENT_RADIUS as i,SEGMENT_SIZE as m,progressAriaText as c,progressFraction as u,progressText as f}from"../../internal/progress.js";export const MPProgressBox=/*@__PURE__*/r.forwardRef(function({size:r="md",color:p="primary",count:d=4,value:x=null,min:h=0,max:g=100,label:b,showValue:j=!1,format:y,className:v,style:w},N){const M=u(x,h,g),B=null===M,V=void 0!==y,_=Math.max(1,Math.floor(d));return a(s.Root,{ref:N,value:null===M?null:x??null,min:h,max:g,format:y,getAriaValueText:c(M,V),"data-mp-size":r,className:["mp-progress-box inline-flex flex-col",n[r],v??""].filter(Boolean).join(" "),style:{...l(p),...w},children:[b||j?a("div",{className:["flex items-baseline gap-2",b?"justify-between":"justify-end",t].join(" "),children:[b?e(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:b}):null,j?e(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>f(M,e,V)}):null]}):null,e(s.Track,{className:`flex ${o[r]}`,children:Array.from({length:_},(a,s)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",m[r],i[r],B?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:B?{"--_mp-index":s}:void 0,children:B?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(M*_-s)))}%`}})},s))})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as n}from"@base-ui/react/progress";import{accentSlots as r}from"../../internal/accent.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as o}from"../../internal/scale.js";import{SEGMENT_GAP as i,SEGMENT_RADIUS as m,SEGMENT_SIZE as c,progressAriaText as u,progressFraction as f,progressText as p}from"../../internal/progress.js";import{useMPColor as d,useMPSize as h}from"../../internal/config.js";export const MPProgressBox=/*@__PURE__*/l.forwardRef(function({size:l,color:x,count:b=4,value:g=null,min:j=0,max:v=100,label:y,hideLabel:N=!1,showValue:w=!1,format:M,className:B,style:L},V){const _=h(l),k=d(x),z=f(g,j,v),A=null===z,P=void 0!==M,R=N?null:y,T=Math.max(1,Math.floor(b));return a(n.Root,{ref:V,value:null===z?null:g??null,min:j,max:v,format:M,getAriaValueText:u(z,P),"data-mp-size":_,className:["mp-progress-box inline-flex flex-col",o[_],B??""].filter(Boolean).join(" "),style:{...r(k),...L},children:[N&&y?e(n.Label,{className:s,children:y}):null,R||w?a("div",{className:["flex items-baseline gap-2",R?"justify-between":"justify-end",t].join(" "),children:[R?e(n.Label,{className:"text-mp-on-surface min-w-0 truncate",children:R}):null,w?e(n.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>p(z,e,P)}):null]}):null,e(n.Track,{className:`flex ${i[_]}`,children:Array.from({length:T},(a,l)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",c[_],m[_],A?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:A?{"--_mp-index":l}:void 0,children:A?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(z*T-l)))}%`}})},l))})]})});

package/dist/components/progress-circular/MPProgressCircular.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{CONTROL_GAP as o,META_TEXT as n}from"../../internal/scale.js";import{RING_DIAMETER as l,RING_STROKE as i,progressAriaText as c,progressFraction as m,progressText as u}from"../../internal/progress.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a="md",color:p="primary",value:f=null,min:h=0,max:d=100,label:x,showValue:k=!1,format:g,className:v,style:y},j){const N=m(f,h,d),w=null===N,b=void 0!==g,$=l[a],L=i[a],V=$/2,z=V-L/2;return e(s.Root,{ref:j,value:null===N?null:f??null,min:h,max:d,format:g,getAriaValueText:c(N,b),"data-mp-size":a,className:["mp-progress-circular inline-flex items-center",o[a],n,v??""].filter(Boolean).join(" "),style:{...t(p),...y},children:[e("svg",{className:w?"mp-progress-circular-turn shrink-0":"shrink-0",width:$,height:$,viewBox:`0 0 ${$} ${$}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:V,cy:V,r:z,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:L}),r("circle",{cx:V,cy:V,r:z,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:L,strokeLinecap:"round",className:w?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${V} ${V})`,...w?null:{strokeDasharray:100,strokeDashoffset:100*(1-N)}})]}),x?r(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:x}):null,k?r(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>u(N,r,b)}):null]})});
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{VISUALLY_HIDDEN as o}from"../../internal/visually-hidden.js";import{CONTROL_GAP as l,META_TEXT as n}from"../../internal/scale.js";import{RING_DIAMETER as i,RING_STROKE as c,progressAriaText as m,progressFraction as u,progressText as p}from"../../internal/progress.js";import{useMPColor as f,useMPSize as h}from"../../internal/config.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a,color:d,value:x=null,min:k=0,max:g=100,label:j,hideLabel:v=!1,showValue:y=!1,format:N,className:b,style:w},L){const $=h(a),V=f(d),z=u(x,k,g),B=null===z,D=void 0!==N,P=i[$],R=c[$],W=P/2,_=W-R/2;return e(s.Root,{ref:L,value:null===z?null:x??null,min:k,max:g,format:N,getAriaValueText:m(z,D),"data-mp-size":$,className:["mp-progress-circular inline-flex items-center",l[$],n,b??""].filter(Boolean).join(" "),style:{...t(V),...w},children:[e("svg",{className:B?"mp-progress-circular-turn shrink-0":"shrink-0",width:P,height:P,viewBox:`0 0 ${P} ${P}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:W,cy:W,r:_,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:R}),r("circle",{cx:W,cy:W,r:_,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:R,strokeLinecap:"round",className:B?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${W} ${W})`,...B?null:{strokeDasharray:100,strokeDashoffset:100*(1-z)}})]}),v?j?r(s.Label,{className:o,children:j}):null:j?r(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:j}):null,y?r(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>p(z,r,D)}):null]})});

package/dist/components/progress-linear/MPProgressLinear.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as l}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent.js";import{META_TEXT as n,STACK_GAP as t}from"../../internal/scale.js";import{BAR_THICKNESS as i,progressAriaText as o,progressFraction as m,progressText as c}from"../../internal/progress.js";export const MPProgressLinear=/*@__PURE__*/r.forwardRef(function({size:u="md",color:p="primary",value:f=null,min:d=0,max:x=100,label:g,showValue:h=!1,format:j,className:b,style:N},w){const v=m(f,d,x),y=null===v,V=void 0!==j,$="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(l.Root,{ref:w,value:null===v?null:f??null,min:d,max:x,format:j,getAriaValueText:o(v,V),"data-mp-size":u,className:["mp-progress-linear flex w-full flex-col",t[u],b??""].filter(Boolean).join(" "),style:{...s(p),...N},children:[g||h?a("div",{className:["flex items-baseline gap-2",g?"justify-between":"justify-end",n].join(" "),children:[g?e(l.Label,{className:"text-mp-on-surface min-w-0 truncate",children:g}):null,h?e(l.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>c(v,e,V)}):null]}):null,e(l.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",i[u]].join(" "),children:y?a(r.Fragment,{children:[e("span",{className:`${$} mp-progress-linear-lead`}),e("span",{className:`${$} mp-progress-linear-trail`})]}):e(l.Indicator,{className:`${$} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as r}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent.js";import{VISUALLY_HIDDEN as n}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as i}from"../../internal/scale.js";import{BAR_THICKNESS as o,progressAriaText as m,progressFraction as c,progressText as u}from"../../internal/progress.js";import{useMPColor as f,useMPSize as p}from"../../internal/config.js";export const MPProgressLinear=/*@__PURE__*/l.forwardRef(function({size:d,color:h,value:j=null,min:g=0,max:x=100,label:b,hideLabel:N=!1,showValue:v=!1,format:w,className:y,style:L},V){const $=p(d),k=f(h),z=c(j,g,x),P=null===z,R=N?null:b,T=void 0!==w,A="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(r.Root,{ref:V,value:null===z?null:j??null,min:g,max:x,format:w,getAriaValueText:m(z,T),"data-mp-size":$,className:["mp-progress-linear flex w-full flex-col",i[$],y??""].filter(Boolean).join(" "),style:{...s(k),...L},children:[N&&b?e(r.Label,{className:n,children:b}):null,R||v?a("div",{className:["flex items-baseline gap-2",R?"justify-between":"justify-end",t].join(" "),children:[R?e(r.Label,{className:"text-mp-on-surface min-w-0 truncate",children:R}):null,v?e(r.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>u(z,e,T)}):null]}):null,e(r.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",o[$]].join(" "),children:P?a(l.Fragment,{children:[e("span",{className:`${A} mp-progress-linear-lead`}),e("span",{className:`${A} mp-progress-linear-trail`})]}):e(r.Indicator,{className:`${A} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});

package/dist/components/radio-group/MPRadioGroup.js

@@ -1,2 +1,2 @@
 "use client";
-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 l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale.js";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=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:l,label:o,description:s,disabled:f=!1,id:x,className:g,style:h},b){const y=r.useContext(u),z=m[y.size],j=r.useId(),v=x??j;return e(n.Root,{className:["mp-radio inline-block align-top",g??""].filter(Boolean).join(" "),style:h,disabled:f,"data-mp-value":l,children:a("div",{className:["flex items-start gap-3",c[y.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:b,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)",z.ring,f?"border-mp-on-surface/38 cursor-default":[y.readOnly?"cursor-default":"cursor-pointer",y.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",z.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",z.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(n.Label,{htmlFor:v,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":y.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=/*@__PURE__*/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:j=!1,name:v,children:N,className:R,style:O},k){const w=p(x),M=w?"error":b,_=r.useId(),C=r.useMemo(()=>({size:h,readOnly:j,invalid:w}),[h,j,w]);return e(u.Provider,{value:C,children:a(n.Root,{className:["mp-radio-group flex flex-col gap-2",R??""].filter(Boolean).join(" "),disabled:z,invalid:w,"data-mp-size":h,"data-mp-orientation":g,style:{...o(M),...O},children:[p(m)?a("span",{id:_,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(l,{ref:k,"aria-labelledby":p(m)?_:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:j,required:y,name:v,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})]})})});
+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.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale.js";import{useMPColor as m,useMPSize as u}from"../../internal/config.js";const f={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"}},g=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:n,label:o,description:s,disabled:m=!1,id:u,className:x,style:h},b){const y=r.useContext(g),z=f[y.size],j=r.useId(),v=u??j;return e(l.Root,{className:["mp-radio inline-block align-top",x??""].filter(Boolean).join(" "),style:h,disabled:m,"data-mp-value":n,children:a("div",{className:["flex items-start gap-3",c[y.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:b,id:v,value:n,disabled:m,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)",z.ring,m?"border-mp-on-surface/38 cursor-default":[y.readOnly?"cursor-default":"cursor-pointer",y.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[m?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",z.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",z.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",m?"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:v,className:["leading-[1.4]",m?"text-mp-on-surface/38 cursor-default":y.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=/*@__PURE__*/r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:f,description:x,errorMessage:h,orientation:b="vertical",size:y,color:z,required:j=!1,disabled:v=!1,readOnly:N=!1,name:R,children:O,className:k,style:w},M){const _=u(y),C=m(z),V=p(h),I=V?"error":C,P=r.useId(),S=r.useMemo(()=>({size:_,readOnly:N,invalid:V}),[_,N,V]);return e(g.Provider,{value:S,children:a(l.Root,{className:["mp-radio-group flex flex-col gap-2",k??""].filter(Boolean).join(" "),disabled:v,invalid:V,"data-mp-size":_,"data-mp-orientation":b,style:{...o(I),...w},children:[p(f)?a("span",{id:P,className:[d,v?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[f,j?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:M,"aria-labelledby":p(f)?P:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:v,readOnly:N,required:j,name:R,className:["flex","horizontal"===b?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:O}),e(s,{description:x,errorMessage:h})]})})});

package/dist/components/rating/MPRating.js

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPStyleProps } from '../../types.js';
+import type { MPControlEventProps, MPStyleProps } from '../../types.js';
 /**
  * What a select's value may be.
  *
@@ -18,7 +18,7 @@ export interface MPSelectOption {
     /** Unavailable, but still listed — the option exists, it just cannot be taken. */
     disabled?: boolean;
 }
-export interface MPSelectProps extends MPStyleProps {
+export interface MPSelectProps extends MPStyleProps, MPControlEventProps<HTMLButtonElement> {
     /**
      * The options, as data. There is no `<MPSelect.Option>` to compose: what a
      * caller has is almost always an array already, and the list has to be

package/dist/components/select/MPSelect.js

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

package/dist/components/shortcut/MPShortcut.js

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

package/dist/components/sidebar/MPSidebar.js

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

package/dist/components/skeleton/MPSkeleton.js

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

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

@@ -1,5 +1,14 @@
 import * as React from 'react';
 import type { MPColor, MPOrientation, MPSize } from '../../types.js';
+export interface MPSliderMark {
+    /** Where on the range it sits. Outside `min`…`max` it is not drawn. */
+    value: number;
+    /**
+     * What is written under it — or beside it on a vertical slider. Left out, the
+     * mark is a tick on the track and nothing else.
+     */
+    label?: React.ReactNode;
+}
 export interface MPSliderProps {
     /**
      * The value, or the values. An array is what makes it a range slider — there is
@@ -19,6 +28,24 @@ export interface MPSliderProps {
     max?: number;
     /** How far one arrow key, or one notch of the drag, moves. @default 1 */
     step?: number;
+    /**
+     * The ticks on the track, and optionally what is written under them.
+     *
+     * `true` puts one at every `step`, which is MD3's discrete slider — up to fifty
+     * of them, past which they stop being ticks and become a dotted line (see
+     * `MAX_TICKS`). An array names them instead, and is the form that can carry
+     * labels: `[{ value: 1990, label: '1990' }, …]` for the decade markings under
+     * a year range.
+     *
+     * A tick over the filled part of the track is drawn in the accent's own ink and
+     * one over the groove in `on-surface-variant`, which is the specification's
+     * pairing and the reason a tick stays visible as the handle passes it.
+     *
+     * Labels are laid out from the tick's centre and are not measured, so two that
+     * would collide will overlap — an array with fewer entries is the answer, not a
+     * smaller type scale.
+     */
+    marks?: boolean | readonly MPSliderMark[];
     /** The label above the track. */
     label?: React.ReactNode;
     /** The line under the track. */

package/dist/components/slider/MPSlider.js

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

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

@@ -20,6 +20,25 @@ export type MPSnackbarPosition = `top-${MPAlign}` | `bottom-${MPAlign}`;
 export interface MPSnackbarData {
     color?: MPColor;
     icon?: React.ReactNode | false;
+    /**
+     * Which stack this one joins, overriding the provider's `position`.
+     *
+     * For the message that has to be somewhere else *because of what it is* — a
+     * confirmation pinned under the thing it confirms, an error at the top of a
+     * page whose bottom corner is a toolbar. Not for a preference: an application
+     * whose snackbars all appear in the same wrong place should move the provider.
+     *
+     * All six stacks are on the page from the start whether or not anything is in
+     * them, which is not a detail: a stack is its own `aria-live` region, and a
+     * region added to the document at the same instant as the message inside it is
+     * a region a screen reader has nothing to compare against and does not read.
+     */
+    position?: MPSnackbarPosition;
+    /**
+     * Added to this snackbar's plate — the element that draws the surface, not the
+     * stack around it.
+     */
+    className?: string;
 }
 export interface MPSnackbarOptions extends MPSnackbarData {
     /**
@@ -172,4 +191,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, locale: localeProp, children }: MPSnackbarProviderProps): React.JSX.Element;
+export declare function MPSnackbarProvider({ color, position, timeout, limit, width, size: sizeProp, showClose, closeLabel, locale: localeProp, children }: MPSnackbarProviderProps): React.JSX.Element;

package/dist/components/snackbar/MPSnackbar.js

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