material-plus-ui 1.6.0 → 1.7.0

package/dist/components/collapsible/MPCollapsible.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Collapsible as a}from"@base-ui/react/collapsible";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as c,META_TEXT as d,PROSE_TEXT as m,SHEET_PAD_X as p,SHEET_PAD_Y as u,SHEET_TITLE as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as h}from"../../internal/surface.js";import{useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/["h-(--collapsible-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),g={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPCollapsible=/*@__PURE__*/t.forwardRef(function({open:t,defaultOpen:j=!1,onOpenChange:v,title:N,subtitle:w,startIcon:y,action:k,trigger:M,indicator:O=!0,disabled:z=!1,padded:C=!0,variant:P="outlined",size:$,hiddenUntilFound:B=!1,keepMounted:F=!1,className:I,children:R,...T},U){const L=x($),S=p[L],q=u[L];return n(a.Root,{ref:U,open:t,defaultOpen:j,onOpenChange:e=>v?.(e),disabled:z,"data-mp-size":L,"data-mp-variant":P,className:["mp-collapsible rounded-mp-md flex w-full flex-col overflow-hidden",h[P],"text-mp-on-surface",I??""].filter(Boolean).join(" "),...T,children:[M?e(a.Trigger,{render:M}):n("div",{className:"flex w-full items-center",children:[n(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",S,q,s[L],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:[e(o,{}),c(y)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:y}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(N)?e("span",{className:`truncate ${f[L]}`,children:N}):null,c(w)?e("span",{className:`text-mp-on-surface-variant truncate ${d}`,children:w}):null]}),O?e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:r,size:l[L]})}):null]}),c(k)?e("span",{className:`flex shrink-0 items-center ${S}`,children:k}):null]}),e(a.Panel,{hiddenUntilFound:B,keepMounted:F,className:b,children:e("div",{className:["min-w-0",m[L],"text-mp-on-surface-variant",C?S:"",C?M?q:g[L]:""].filter(Boolean).join(" "),children:R})})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Collapsible as a}from"@base-ui/react/collapsible";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as c,META_TEXT as d,PROSE_TEXT as m,SHEET_PAD_X as p,SHEET_PAD_Y as u,SHEET_TITLE as f}from"../../internal/scale.js";import{containerSurface as h}from"../../internal/elevation.js";import{useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/["h-(--collapsible-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),g={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPCollapsible=/*@__PURE__*/t.forwardRef(function({open:t,defaultOpen:v=!1,onOpenChange:j,title:N,subtitle:w,startIcon:y,action:k,trigger:M,indicator:O=!0,disabled:z=!1,padded:C=!0,variant:P="outlined",elevation:$,size:B,hiddenUntilFound:F=!1,keepMounted:I=!1,className:R,children:T,...U},L){const S=x(B),q=p[S],A=u[S];return n(a.Root,{ref:L,open:t,defaultOpen:v,onOpenChange:e=>j?.(e),disabled:z,"data-mp-size":S,"data-mp-variant":P,className:["mp-collapsible rounded-mp-md flex w-full flex-col overflow-hidden",h(P,$),"text-mp-on-surface",R??""].filter(Boolean).join(" "),...U,children:[M?e(a.Trigger,{render:M}):n("div",{className:"flex w-full items-center",children:[n(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",q,A,s[S],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:[e(o,{}),c(y)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:y}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(N)?e("span",{className:`truncate ${f[S]}`,children:N}):null,c(w)?e("span",{className:`text-mp-on-surface-variant truncate ${d}`,children:w}):null]}),O?e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:r,size:l[S]})}):null]}),c(k)?e("span",{className:`flex shrink-0 items-center ${q}`,children:k}):null]}),e(a.Panel,{hiddenUntilFound:F,keepMounted:I,className:b,children:e("div",{className:["min-w-0",m[S],"text-mp-on-surface-variant",C?q:"",C?M?A:g[S]:""].filter(Boolean).join(" "),children:T})})]})});

package/dist/components/combobox/MPCombobox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPControlEventProps, MPStyleProps, MPVariant } from '../../types.js';
+import type { MPColor, MPControlEventProps, MPSlots, MPStyleProps, MPVariant } from '../../types.js';
 /**
  * What a combobox's value may be — the same two types `MPSelect` submits, and for
  * the same reason: a form control's value is what a form sends, and every escape
@@ -67,9 +67,18 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      * @default false
      */
     multiple?: Multiple;
-    /** The chosen value. Use with `onValueChange` for a controlled combobox. */
+    /**
+     * The chosen value. Use with `onValueChange` for a controlled combobox.
+     *
+     * **Nothing chosen is `null`.** A value with no matching entry in `items` is
+     * drawn as itself, which here is not a fallback but the point — `allowCustom`
+     * is on by default and a value the list never held is a value a reader typed.
+     * The cost is that a sentinel is indistinguishable from one: pass `null` for
+     * "not picked yet" rather than a `0` or an empty string, or the field will
+     * show it.
+     */
     value?: Selection<Multiple> | null;
-    /** The initially chosen value, for an uncontrolled combobox. */
+    /** The initially chosen value, for an uncontrolled combobox. `null` is none. */
     defaultValue?: Selection<Multiple> | null;
     onValueChange?: (value: Selection<Multiple>) => void;
     /** Called as the text in the input changes — the filter query, not the value. */
@@ -219,6 +228,14 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
     id?: string;
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * A class name for a part `className` cannot reach.
+     *
+     * - `item` — every row of matches. They are drawn from `options` rather than
+     *   written by the caller, and they render at the end of `<body>`, so neither
+     *   a prop nor a selector against the root reaches one.
+     */
+    classNames?: MPSlots<'item'>;
 }
 /**
  * A field you can type into and also choose from.
@@ -238,5 +255,5 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
  * navigation across both the list and the chips, and the hidden input that makes
  * the whole thing submit with a form.
  */
-export declare function MPCombobox<Multiple extends boolean | undefined = false>({ items, multiple, value, defaultValue, onValueChange, onInputValueChange, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, allowCustom, customLabel, clearable, emptyMessage, limit, filter, chipVariant, chipColor, placeholder, label, floatingLabel, description, errorMessage, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, locale: localeProp, removeLabel, inputRef, id, className, style }: MPComboboxProps<Multiple>): React.JSX.Element;
+export declare function MPCombobox<Multiple extends boolean | undefined = false>({ items, multiple, value, defaultValue, onValueChange, onInputValueChange, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, allowCustom, customLabel, clearable, emptyMessage, limit, filter, chipVariant, chipColor, placeholder, label, floatingLabel, description, errorMessage, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, locale: localeProp, removeLabel, inputRef, id, classNames, className, style }: MPComboboxProps<Multiple>): React.JSX.Element;
 export {};

package/dist/components/combobox/MPCombobox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as n}from"@base-ui/react/combobox";import{Field as o}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as i}from"../icon/MPIcon.js";import{AddIcon as r,CheckIcon as s,ChevronDownIcon as c,CloseIcon as m}from"../../constants/icons.js";import{MPFieldLabel as u,MPFieldOutline as p,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale.js";import{COMBOBOX as g}from"../../internal/messages/combobox.js";import{COMMON as x}from"../../internal/messages/common.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as y}from"../../internal/SupportingText.js";import{CONTROL_ICON as j,PROSE_TEXT as C,hasContent as w}from"../../internal/scale.js";import{FADE as N,PORTAL_LAYER as L}from"../../internal/surface.js";import{useMPSize as M}from"../../internal/config.js";const S={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},I={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},k={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function z(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:V,multiple:O,value:P,defaultValue:$,onValueChange:q,onInputValueChange:F,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:_,onContextMenu:B,allowCustom:E=!0,customLabel:U,clearable:G=!1,emptyMessage:H,limit:W,filter:J,chipVariant:Q,chipColor:X,placeholder:Y,label:Z,floatingLabel:ee=!0,description:ae,errorMessage:le,startIcon:ne,size:oe,fullWidth:te=!1,required:ie=!1,disabled:re=!1,readOnly:se=!1,name:ce,open:me,defaultOpen:ue,onOpenChange:pe,clearLabel:de,openLabel:he,locale:fe,removeLabel:be,inputRef:ge,id:xe,className:ve,style:ye}){const je=M(oe),Ce=f(fe),we=b(x,Ce),Ne=b(g,Ce),Le=w(le),Me=!0===O,Se=S[je],Ie=l.useId(),ke=xe??Ie,ze=l.useMemo(()=>V.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[V]),[Ve,Oe]=l.useState(()=>z($)),Pe=void 0===P?Ve:z(P),[$e,qe]=l.useState(""),{shrunk:Fe,focusProps:Te}=d({floating:ee&&w(Z),filled:Pe.length>0||""!==$e,pinned:!!ne}),Ae=l.useMemo(()=>new Map(ze.map(e=>[e.value,e])),[ze]),De=l.useMemo(()=>{const e=new Set;for(const a of ze)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[ze]),Ke=l.useCallback(e=>Ae.get(e)??{value:e,label:String(e),custom:!0},[Ae]),Re=$e.trim(),_e=Re.toLocaleLowerCase(),Be=""===Re||De.has(_e)||Pe.some(e=>String(e).toLocaleLowerCase()===_e),Ee=!E||se||re||Be?null:Re,Ue=l.useMemo(()=>null==J?J:(e,a)=>!0===e.custom||J(e,a),[J]),Ge=l.useMemo(()=>null===Ee?ze:[...ze,{value:Ee,label:Ee,custom:!0}],[ze,Ee]),He=Me?Pe.map(Ke):Pe.length>0?Ke(Pe[0]):null;const We=/*@__PURE__*/["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",re?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Je=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),Qe=a=>e(n.Input,{ref:ge,id:ke,placeholder:Fe?Y:void 0,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:_,onContextMenu:B,className:Me?`${We} min-w-16 ${a?"ms-1.5":""}`:We});return a(o.Root,{disabled:re,invalid:Le,"data-mp-size":je,className:["mp-combobox group flex-col align-top",te?"flex w-full":"inline-flex w-fit",ve??""].filter(Boolean).join(" "),style:ye,...Te,children:[a(n.Root,{name:ce,items:Ge,multiple:Me,value:He,onValueChange:e=>{!function(e){void 0===P&&Oe(e),q?.(Me?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{qe(e),F?.(e)},open:me,defaultOpen:ue,onOpenChange:e=>pe?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:W,filter:Ue,disabled:re,readOnly:se,required:ie,children:[a("div",{className:"relative w-full",children:[a(n.InputGroup,{className:["relative flex w-full items-center gap-2",Se.padding,Me?I[je]:Se.height,C[je],re?"cursor-default":"cursor-text"].join(" "),children:[ne?e("span",{className:["flex shrink-0 items-center",re?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:ne}):null,Me?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:o=>a(l.Fragment,{children:[o.map((a,l)=>e(n.Chip,{render:e(t,{variant:Q??(Le?"outlined":"tonal"),color:X??(Le?"error":"primary"),size:k[je],disabled:re,endIcon:se||re?null:e(n.ChipRemove,{"aria-label":be?be(a.label):h(we.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(i,{icon:m,size:16})})}),children:a.label},`${l}:${String(a.value)}`)),Qe(o.length>0)]})})}):Qe(!1),G&&!se?a(n.Clear,{"aria-label":de??we.clear,className:Je,children:[e(v,{}),e(i,{icon:m,size:j[je]})]}):null,a(n.Trigger,{"aria-label":he??we.open,className:Je,children:[e(v,{}),e(n.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(i,{icon:c,size:j[je]})})]})]}),e(p,{label:Z,required:ie,notched:Fe}),w(Z)?e(u,{size:je,label:Z,required:ie,htmlFor:ke,shrunk:Fe}):null]}),e(n.Portal,{children:e(n.Positioner,{className:L,sideOffset:4,children:a(n.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",C[je],N].join(" "),children:[e(n.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:H??Ne.empty}),e(n.List,{children:(l,o)=>a(n.Item,{value:l,disabled:l.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(v,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:l.custom?e(i,{icon:r,size:18}):e(n.ItemIndicator,{children:e(i,{icon:s,size:18})})}),e("span",{className:w(l.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:l.custom?U?U(l.label):h(Ne.add,{label:l.label}):l.content??l.label})]},`${o}:${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(y,{description:ae,errorMessage:le,className:Se.padding})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as n}from"@base-ui/react/combobox";import{Field as o}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as i}from"../icon/MPIcon.js";import{AddIcon as r,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as u,MPFieldOutline as p,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale.js";import{COMBOBOX as g}from"../../internal/messages/combobox.js";import{COMMON as x}from"../../internal/messages/common.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as y}from"../../internal/SupportingText.js";import{CONTROL_ICON as j,PROSE_TEXT as C,hasContent as w}from"../../internal/scale.js";import{MARK_MOTION_KEPT as N}from"../../internal/mark.js";import{FADE as L,PORTAL_LAYER as M}from"../../internal/surface.js";import{useMPSize as k}from"../../internal/config.js";const S={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},I={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},z={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function V(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:O,multiple:$,value:P,defaultValue:_,onValueChange:q,onInputValueChange:F,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:B,onContextMenu:E,allowCustom:U=!0,customLabel:G,clearable:H=!1,emptyMessage:W,limit:J,filter:Q,chipVariant:X,chipColor:Y,placeholder:Z,label:ee,floatingLabel:ae=!0,description:le,errorMessage:ne,startIcon:oe,size:te,fullWidth:ie=!1,required:re=!1,disabled:se=!1,readOnly:me=!1,name:ce,open:ue,defaultOpen:pe,onOpenChange:de,clearLabel:he,openLabel:fe,locale:be,removeLabel:ge,inputRef:xe,id:ve,classNames:ye,className:je,style:Ce}){const we=k(te),Ne=f(be),Le=b(x,Ne),Me=b(g,Ne),ke=w(ne),Se=!0===$,Ie=S[we],ze=l.useId(),Ve=ve??ze,Oe=l.useMemo(()=>O.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[O]),[$e,Pe]=l.useState(()=>V(_)),_e=void 0===P?$e:V(P),[qe,Fe]=l.useState(""),{shrunk:Te,focusProps:Ae}=d({floating:ae&&w(ee),filled:_e.length>0||""!==qe,pinned:!!oe}),De=l.useMemo(()=>new Map(Oe.map(e=>[e.value,e])),[Oe]),Ke=l.useMemo(()=>{const e=new Set;for(const a of Oe)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[Oe]),Re=l.useCallback(e=>De.get(e)??{value:e,label:String(e),custom:!0},[De]),Be=qe.trim(),Ee=Be.toLocaleLowerCase(),Ue=""===Be||Ke.has(Ee)||_e.some(e=>String(e).toLocaleLowerCase()===Ee),Ge=!U||me||se||Ue?null:Be,He=l.useMemo(()=>null==Q?Q:(e,a)=>!0===e.custom||Q(e,a),[Q]),We=l.useMemo(()=>null===Ge?Oe:[...Oe,{value:Ge,label:Ge,custom:!0}],[Oe,Ge]),Je=Se?_e.map(Re):_e.length>0?Re(_e[0]):null;const Qe=/*@__PURE__*/["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",se?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Xe=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),Ye=a=>e(n.Input,{ref:xe,id:Ve,placeholder:Te?Z:void 0,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:B,onContextMenu:E,className:Se?`${Qe} min-w-16 ${a?"ms-1.5":""}`:Qe});return a(o.Root,{disabled:se,invalid:ke,"data-mp-size":we,className:["mp-combobox group flex-col align-top",ie?"flex w-full":"inline-flex w-fit",je??""].filter(Boolean).join(" "),style:Ce,...Ae,children:[a(n.Root,{name:ce,items:We,multiple:Se,value:Je,onValueChange:e=>{!function(e){void 0===P&&Pe(e),q?.(Se?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Fe(e),F?.(e)},open:ue,defaultOpen:pe,onOpenChange:e=>de?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:J,filter:He,disabled:se,readOnly:me,required:re,children:[a("div",{className:"relative w-full",children:[a(n.InputGroup,{className:["relative flex w-full items-center gap-2",Ie.padding,Se?I[we]:Ie.height,C[we],se?"cursor-default":"cursor-text"].join(" "),children:[oe?e("span",{className:["flex shrink-0 items-center",se?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:oe}):null,Se?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:o=>a(l.Fragment,{children:[o.map((a,l)=>e(n.Chip,{render:e(t,{variant:X??(ke?"outlined":"tonal"),color:Y??(ke?"error":"primary"),size:z[we],disabled:se,endIcon:me||se?null:e(n.ChipRemove,{"aria-label":ge?ge(a.label):h(Le.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(i,{icon:c,size:16})})}),children:a.label},`${l}:${String(a.value)}`)),Ye(o.length>0)]})})}):Ye(!1),H&&!me?a(n.Clear,{"aria-label":he??Le.clear,className:Xe,children:[e(v,{}),e(i,{icon:c,size:j[we]})]}):null,a(n.Trigger,{"aria-label":fe??Le.open,className:Xe,children:[e(v,{}),e(n.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(i,{icon:m,size:j[we]})})]})]}),e(p,{label:ee,required:re,notched:Te}),w(ee)?e(u,{size:we,label:ee,required:re,htmlFor:Ve,shrunk:Te}):null]}),e(n.Portal,{children:e(n.Positioner,{className:M,sideOffset:4,children:a(n.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",C[we],L].join(" "),children:[e(n.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:W??Me.empty}),e(n.List,{children:(l,o)=>a(n.Item,{value:l,disabled:l.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer",ye?.item??"","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(v,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:l.custom?e(i,{icon:r,size:18}):e(n.ItemIndicator,{keepMounted:!0,className:`mp-combobox__mark ${N}`,children:e(i,{icon:s,size:18})})}),e("span",{className:w(l.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:l.custom?G?G(l.label):h(Me.add,{label:l.label}):l.content??l.label})]},`${o}:${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(y,{description:le,errorMessage:ne,className:Ie.padding})]})}

package/dist/components/command-palette/MPCommandPalette.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize } from '../../types.js';
+import type { MPColor, MPSize, MPSlots } from '../../types.js';
 /** One thing the palette can do. */
 export interface MPCommand {
     /** What identifies the command. */
@@ -93,6 +93,16 @@ export interface MPCommandPaletteProps {
     label?: string;
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * A class name for a part `className` cannot reach.
+     *
+     * - `backdrop` — the scrim behind the sheet.
+     * - `input` — the search field at the top of it.
+     * - `list` — the scrolling region under that.
+     * - `row` — every result in the list. They are drawn from `items`, so there is
+     *   no element of the caller's to put a class on.
+     */
+    classNames?: MPSlots<'backdrop' | 'input' | 'list' | 'row'>;
 }
 /**
  * Everything an application can do, behind one field.
@@ -129,4 +139,4 @@ export interface MPCommandPaletteProps {
  * the focus back wherever the reader was. What is left here is the surface, the
  * matching, and the key that opens it.
  */
-export declare function MPCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, size: sizeProp, color: colorProp, locale: localeProp, placeholder, emptyMessage, label, className, style }: MPCommandPaletteProps): React.JSX.Element;
+export declare function MPCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, size: sizeProp, color: colorProp, locale: localeProp, placeholder, emptyMessage, label, classNames, className, style }: MPCommandPaletteProps): React.JSX.Element;

package/dist/components/command-palette/MPCommandPalette.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{MPShortcut as l}from"../shortcut/MPShortcut.js";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as s}from"../../internal/length.js";import{matchesShortcut as i,useDetectedOS as m}from"../../internal/keys.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{COMMAND as d}from"../../internal/messages/command.js";import{MPStateLayer as u}from"../../internal/StateLayer.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as x}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as v,SCRIM as y,SHEET_MOTION as w}from"../../internal/surface.js";import{useMPColor as b,useMPSize as j}from"../../internal/config.js";const N={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},$={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-16",xl:"h-18"},k={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},C={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"};function S(e){return[e.label,e.group??"",...e.keywords??[]].join("\n").toLowerCase()}export function MPCommandPalette({items:_,open:L,defaultOpen:M=!1,onOpenChange:P,onSelect:E,shortcut:z="Mod+K",width:O,maxHeight:V=320,size:B,color:F,locale:H,placeholder:I,emptyMessage:R,label:D,className:K,style:T}){const W=j(B),q=b(F),A=c(H),G=p(d,A),J=m(),[Q,U]=a.useState(M),[X,Y]=a.useState(""),Z=L??Q,ee=a.useCallback(e=>{e||Y(""),void 0===L&&U(e),P?.(e)},[L,P]);a.useEffect(()=>{if(!1===z)return;const e=e=>{i(e,z,J)&&(e.preventDefault(),ee(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[z,J,ee]);const te=a.useMemo(()=>_.map(S),[_]),ae=a.useMemo(()=>{if(""===X)return _;const e=X.toLowerCase();return _.filter((t,a)=>te[a].includes(e))},[_,te,X]),ne=s(O),re=s(V);return e(r.Root,{open:Z,onOpenChange:ee,children:t(r.Portal,{children:[e(r.Backdrop,{className:`${v} fixed inset-0 ${g} ${y}`}),e(r.Viewport,{className:`${v} fixed inset-0 flex justify-center p-4 pt-[12vh]`,children:e(r.Popup,{"aria-label":D??G.label,"data-mp-size":W,className:["mp-command-palette relative flex w-full flex-col self-start overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 rounded-mp-xl","outline-none",x[W],void 0===ne?N[W]:"",`transition-[opacity,scale] ${w}`,"motion-safe:data-starting-style:scale-95 motion-safe:data-ending-style:scale-95",K??""].filter(Boolean).join(" "),style:{...o(q),...void 0===ne?null:{maxWidth:ne},...T},children:t(n.Root,{open:!0,mode:"list",items:ae,filter:null,value:X,onValueChange:e=>Y(e),itemToStringValue:e=>e.label,children:[e("div",{className:`border-mp-outline-variant flex shrink-0 items-center border-b ${k[W]}`,children:e(n.Input,{autoFocus:!0,placeholder:I??G.search,className:["mp-command-palette__input min-w-0 flex-1 bg-transparent font-[inherit]","text-inherit outline-none","placeholder:text-mp-on-surface-variant caret-(--_mp-accent)",$[W]].join(" ")})}),e(n.List,{className:"mp-command-palette__list min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:re},children:(r,o)=>t(a.Fragment,{children:[r.group&&r.group!==ae[o-1]?.group?e("div",{role:"presentation",className:`text-mp-on-surface-variant pt-2 pb-1 font-medium ${k[W]} ${h}`,children:r.group}):null,t(n.Item,{index:o,value:r,disabled:r.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),E?.(e),ee(!1))})(r),className:["mp-command-palette__row group rounded-mp-xs relative flex cursor-pointer","items-center gap-3 select-none outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",k[W],C[W]].join(" "),children:[e(u,{layer:"inset-0 rounded-[inherit] bg-current",className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),f(r.icon)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:r.icon}):null,t("span",{className:"relative flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:r.label}),f(r.description)?e("span",{className:`text-mp-on-surface-variant truncate ${h}`,children:r.description}):null]}),r.shortcut?e(l,{size:"xs",keys:r.shortcut,className:"relative shrink-0"}):null]})]},`${o}:${r.value}`)}),e(n.Empty,{className:`text-mp-on-surface-variant py-6 text-center ${k[W]} ${h}`,children:R??G.empty})]})})})]})})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{MPShortcut as r}from"../shortcut/MPShortcut.js";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as s}from"../../internal/length.js";import{matchesShortcut as i,useDetectedOS as m}from"../../internal/keys.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{COMMAND as d}from"../../internal/messages/command.js";import{MPStateLayer as u}from"../../internal/StateLayer.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as x}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as v,SCRIM as y,SHEET_MOTION as w}from"../../internal/surface.js";import{useMPColor as b,useMPSize as j}from"../../internal/config.js";const N={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},k={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-16",xl:"h-18"},$={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},C={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"};function S(e){return[e.label,e.group??"",...e.keywords??[]].join("\n").toLowerCase()}export function MPCommandPalette({items:_,open:L,defaultOpen:M=!1,onOpenChange:P,onSelect:E,shortcut:z="Mod+K",width:B,maxHeight:O=320,size:V,color:F,locale:H,placeholder:I,emptyMessage:R,label:D,classNames:K,className:T,style:W}){const q=j(V),A=b(F),G=c(H),J=p(d,G),Q=m(),[U,X]=a.useState(M),[Y,Z]=a.useState(""),ee=L??U,te=a.useCallback(e=>{e||Z(""),void 0===L&&X(e),P?.(e)},[L,P]);a.useEffect(()=>{if(!1===z)return;const e=e=>{i(e,z,Q)&&(e.preventDefault(),te(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[z,Q,te]);const ae=a.useMemo(()=>_.map(S),[_]),ne=a.useMemo(()=>{if(""===Y)return _;const e=Y.toLowerCase();return _.filter((t,a)=>ae[a].includes(e))},[_,ae,Y]),le=s(B),re=s(O);return e(l.Root,{open:ee,onOpenChange:te,children:t(l.Portal,{children:[e(l.Backdrop,{className:[`${v} fixed inset-0`,g,y,K?.backdrop??""].filter(Boolean).join(" ")}),e(l.Viewport,{className:`${v} fixed inset-0 flex justify-center p-4 pt-[12vh]`,children:e(l.Popup,{"aria-label":D??J.label,"data-mp-size":q,className:["mp-command-palette relative flex w-full flex-col self-start overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 rounded-mp-xl","outline-none",x[q],void 0===le?N[q]:"",`transition-[opacity,scale] ${w}`,"motion-safe:data-starting-style:scale-95 motion-safe:data-ending-style:scale-95",T??""].filter(Boolean).join(" "),style:{...o(A),...void 0===le?null:{maxWidth:le},...W},children:t(n.Root,{open:!0,mode:"list",items:ne,filter:null,value:Y,onValueChange:e=>Z(e),itemToStringValue:e=>e.label,children:[e("div",{className:`border-mp-outline-variant flex shrink-0 items-center border-b ${$[q]}`,children:e(n.Input,{autoFocus:!0,placeholder:I??J.search,className:["mp-command-palette__input min-w-0 flex-1 bg-transparent font-[inherit]",K?.input??"","text-inherit outline-none","placeholder:text-mp-on-surface-variant caret-(--_mp-accent)",k[q]].join(" ")})}),e(n.List,{className:"mp-command-palette__list min-h-0 flex-1 overflow-y-auto overscroll-contain p-1"+(K?.list?` ${K.list}`:""),style:{maxHeight:re},children:(l,o)=>t(a.Fragment,{children:[l.group&&l.group!==ne[o-1]?.group?e("div",{role:"presentation",className:`text-mp-on-surface-variant pt-2 pb-1 font-medium ${$[q]} ${h}`,children:l.group}):null,t(n.Item,{index:o,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),E?.(e),te(!1))})(l),className:["mp-command-palette__row group rounded-mp-xs relative flex cursor-pointer",K?.row??"","items-center gap-3 select-none outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",$[q],C[q]].join(" "),children:[e(u,{layer:"inset-0 rounded-[inherit] bg-current",className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),f(l.icon)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:l.icon}):null,t("span",{className:"relative flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),f(l.description)?e("span",{className:`text-mp-on-surface-variant truncate ${h}`,children:l.description}):null]}),l.shortcut?e(r,{size:"xs",keys:l.shortcut,className:"relative shrink-0"}):null]})]},`${o}:${l.value}`)}),e(n.Empty,{className:`text-mp-on-surface-variant py-6 text-center ${$[q]} ${h}`,children:R??J.empty})]})})})]})})}

package/dist/components/config/MPConfigProvider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMPConfig, type MPConfigValue } from '../../internal/config.js';
-import type { MPColor, MPSize } from '../../types.js';
+import type { MPColor, MPDensity, MPSize, MPWindowClass } from '../../types.js';
 export interface MPConfigProviderProps {
     /**
      * The size every control under this starts at.
@@ -18,6 +18,46 @@ export interface MPConfigProviderProps {
      * line here rather than a prop on every button, chip, tab and slider.
      */
     color?: MPColor;
+    /**
+     * How tightly every component that holds things is packed under this.
+     *
+     * `0` unless set — the size that was asked for, with nothing taken out. A
+     * product that runs dense sets it here, and only the containers read it: the
+     * lists, tables and cards tighten and the controls keep the height a finger
+     * needs. See `MPDensity`.
+     */
+    density?: MPDensity;
+    /**
+     * Where the window size classes begin, in CSS pixels, for everything the
+     * library decides in **JavaScript** — `useMPWindowClass`, `MPSidebar`'s
+     * collapse, and the rungs `maxWidth` resolves to.
+     *
+     * Partial and merged over MD3's own, so `{ medium: 700 }` moves one boundary
+     * and leaves the other three. `compact` is always nought whatever it is given:
+     * a first class whose floor is above zero leaves a band of windows in no class
+     * at all.
+     *
+     * ## This does not move the stylesheet
+     *
+     * It cannot. A media query is resolved before any of this runs and cannot name
+     * a custom property, so `MPGrid`'s reflow, `MPShow`'s hiding and every other
+     * width-driven rule are decided by the CSS the build produced. This prop is
+     * how you tell the JavaScript side what you already did on the CSS side — it
+     * is not the source, and a page that sets it alone has moved half its layout.
+     *
+     * The CSS side is a project that runs its own Tailwind, redeclaring both
+     * halves of the boundary after importing the library:
+     *
+     * ```css
+     * @custom-variant mp-medium (@media (width >= 700px));
+     * @custom-variant mp-below-medium (@media (width < 700px));
+     * ```
+     *
+     * A project on the compiled `material-plus-ui/styles.css` cannot move the
+     * stylesheet at all, and should not set this either. See
+     * [Breakpoints](../../design/breakpoints).
+     */
+    breakpoints?: Partial<Record<MPWindowClass, number>>;
     /**
      * The language the components speak — the same value `MPLocaleProvider` takes,
      * carried here so an application needs one provider rather than two.
@@ -52,8 +92,9 @@ export interface MPConfigProviderProps {
  * The prop defaults for everything under it.
  *
  * Wrap the application. Every component in this library still takes `size` and
- * `color` of its own, and this is where those props get their default — so a
- * design that runs at `size="sm"` is one decision rather than one per call site.
+ * `color` of its own — and every container takes `density` — and this is where
+ * those props get their default, so a design that runs at `size="sm"` is one
+ * decision rather than one per call site.
  *
  * ```tsx
  * <MPConfigProvider size="sm" color="tertiary" locale="ko">
@@ -61,7 +102,7 @@ export interface MPConfigProviderProps {
  * </MPConfigProvider>
  * ```
  *
- * ## Why it carries these two and not a theme
+ * ## Why it carries these three and not a theme
  *
  * Everything a theme normally holds is already a CSS custom property here — the
  * colour roles, the type scale, the corners, the motion durations. Those reach a
@@ -73,8 +114,9 @@ export interface MPConfigProviderProps {
  * Tailwind class strings — `h-14`, `text-mp-body-large` — because Tailwind finds
  * classes by scanning source text and an interpolated `h-${n}` generates no rule
  * at all. A value that cannot be a custom property and has to reach every call
- * site is exactly what context is for. `color` joins it because the two are the
- * axes a whole product is usually set on together.
+ * site is exactly what context is for. `color` and `density` join it because the
+ * three are the axes a whole product is usually set on together — and because
+ * `density` resolves to class strings for the same reason `size` does.
  *
  * ## Why `variant` is not here
  *
@@ -107,7 +149,7 @@ export interface MPConfigProviderProps {
  * </MPConfigProvider>
  * ```
  */
-export declare function MPConfigProvider({ size, color, locale, dir, children }: MPConfigProviderProps): React.JSX.Element;
+export declare function MPConfigProvider({ size, color, density, breakpoints, locale, dir, children }: MPConfigProviderProps): React.JSX.Element;
 /**
  * The configuration in force at this point in the tree.
  *

package/dist/components/config/MPConfigProvider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{DirectionProvider as e}from"@base-ui/react/direction-provider";import{MPConfigContext as i,useMPConfig as t}from"../../internal/config.js";import{MPLocaleContext as c,useMPLocale as n}from"../../internal/locale.js";export function MPConfigProvider({size:l,color:s,locale:d,dir:a,children:m}){const p=t(),f=n(),u=o.useMemo(()=>({size:l??p.size,color:s??p.color}),[l,s,p.size,p.color]),v=d??f,h=r(i.Provider,{value:u,children:r(c.Provider,{value:v,children:m})});return a?r(e,{direction:a,children:r("div",{dir:a,style:{display:"contents"},children:h})}):h}export{t as useMPConfig};
+import{jsx as r}from"react/jsx-runtime";import*as i from"react";import{DirectionProvider as o}from"@base-ui/react/direction-provider";import{MPConfigContext as e,useMPConfig as n}from"../../internal/config.js";import{MPLocaleContext as t,useMPLocale as s}from"../../internal/locale.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";export function MPConfigProvider({size:c,color:d,density:l,breakpoints:p,locale:m,dir:f,children:v}){const u=n(),b=s(),j=a.map(r=>p?.[r]??u.breakpoints?.[r]??"").join(","),y=i.useMemo(()=>({size:c??u.size,color:d??u.color,density:l??u.density,breakpoints:p||u.breakpoints?{...u.breakpoints,...p}:void 0}),[c,d,l,u.size,u.color,u.density,j]),h=m??b,k=r(e.Provider,{value:y,children:r(t.Provider,{value:h,children:v})});return f?r(o,{direction:f,children:r("div",{dir:f,style:{display:"contents"},children:k})}):k}export{n as useMPConfig};

package/dist/components/container/MPContainer.d.ts

@@ -1,16 +1,23 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPSize } from '../../types.js';
+import type { MPMeasure, MPResponsive, MPSize } from '../../types.js';
 export interface MPContainerProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How wide the content is allowed to get, on a ladder pinned to MD3's window
      * size classes — `sm` 600dp, `md` 840dp, `lg` 1200dp, `xl` 1600dp, `xs` 480dp.
      *
+     * Or a CSS length of your own: `maxWidth="60ch"` is the measure a paragraph
+     * actually wants, and no ladder of window widths can spell it.
+     *
+     * Responsive, like the grid's props: `maxWidth={{ compact: 'none', expanded: 'lg' }}`
+     * is edge to edge on a phone and held to 1200dp from 840 up. Each entry applies
+     * from its own window class upward.
+     *
      * `none`, the default, is no limit: a container's job is the margin, and a
      * measure is a second decision that a page should have to ask for.
      * @default 'none'
      */
-    maxWidth?: MPSize | 'none';
+    maxWidth?: MPResponsive<MPMeasure>;
     /**
      * The page margin. Turn it off to keep the centring and the measure without
      * the gutter — a full-bleed hero, a section that pads itself.

package/dist/components/container/MPContainer.js

@@ -1 +1,2 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{MEASURE as n,SHEET_PAD_X as o}from"../../internal/scale.js";import{useMPSize as a}from"../../internal/config.js";export const MPContainer=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:t=!0,size:i,centered:s=!0,render:c,className:m,children:d,...l},f){const p=a(i);return r({render:c,ref:f,props:{"data-mp-size":p,className:["mp-container block w-full","box-border","none"===e?"":n[e],s?"mx-auto":"",t?o[p]:"",m??""].filter(Boolean).join(" "),children:d,...l}})});
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{SHEET_PAD_X as n}from"../../internal/scale.js";import{measureValue as o}from"../../internal/measure.js";import{useWindowMins as t}from"../../internal/window-class.js";import{responsiveSlots as a,withBaseline as s}from"../../internal/responsive.js";import{useMPSize as i}from"../../internal/config.js";export const MPContainer=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:m=!0,size:l,centered:c=!0,render:p,className:d,style:f,children:u,...j},b){const w=i(l),x=t(),h="none"!==e;return r({render:p,ref:b,props:{"data-mp-size":w,className:["mp-container block w-full","box-border",h?"mp-measure":"",c?"mx-auto":"",m?n[w]:"",d??""].filter(Boolean).join(" "),style:h?{...a("measure",s(e,"none"),e=>o(e,x)),...f}:f,children:u,...j}})});

package/dist/components/data-list/MPDataList.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { MPDensity, MPOrientation, MPSize } from '../../types.js';
+export interface MPDataListProps extends Omit<React.ComponentPropsWithoutRef<'dl'>, 'color'> {
+    /**
+     * Where the label sits.
+     *
+     * - `horizontal` — beside the value, in a column of its own. The default, and
+     *   the shape a details panel takes.
+     * - `vertical` — above it. For a narrow column, and for values long enough
+     *   that a label beside them would leave most of the row empty.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * How wide the label column is when `horizontal`. A number is pixels, a
+     * string is any CSS length.
+     *
+     * Left out it is as wide as the widest label, which is what keeps every value
+     * in the list starting at the same place without anybody measuring anything.
+     */
+    labelWidth?: number | string;
+    /** Draws a hairline between the rows. @default false */
+    dividers?: boolean;
+    /** @default 'md' */
+    size?: MPSize;
+    /**
+     * Tightens the gaps between rows and columns, and nothing else. The type
+     * scale does not move.
+     * @default 0
+     */
+    density?: MPDensity;
+    /** The pairs. */
+    children?: React.ReactNode;
+}
+export interface MPDataListItemProps {
+    /** What the value is called. */
+    label: React.ReactNode;
+    /** The value. A node, so a chip, a link or a piece of code all fit. */
+    children?: React.ReactNode;
+}
+/**
+ * One pair: what it is called, and what it is.
+ *
+ * A fragment rather than an element, so the `<dt>` and the `<dd>` land as direct
+ * children of the `<dl>` and the grid can line every label up against every
+ * other. It has no `size` or `density` of its own — those belong to the list,
+ * because a details panel with one row set tighter than its neighbours is not a
+ * thing anybody wants.
+ */
+export declare function MPDataListItem({ label, children }: MPDataListItemProps): React.JSX.Element;
+/**
+ * A list of things and what they are called — a details panel, the summary of a
+ * record, the metadata under a heading.
+ *
+ * ```tsx
+ * <MPDataList>
+ *   <MPDataListItem label="Status">Active</MPDataListItem>
+ *   <MPDataListItem label="Owner">Priya Raman</MPDataListItem>
+ * </MPDataList>
+ * ```
+ *
+ * ## Why not a two-column `MPTable`
+ *
+ * Because they are read differently, and the difference is the whole reason
+ * this is a component. A table is a grid of **rows**, all of the same shape,
+ * and a screen reader walks it as a grid — announcing column headers, offering
+ * cell-by-cell navigation, counting rows. This is a set of **pairs**, and each
+ * one is announced as "label, value", which is what a details panel actually
+ * is.
+ *
+ * So it is a real `<dl>` of real `<dt>`/`<dd>` pairs, and `MPDataListItem`
+ * renders a fragment rather than a wrapper: the two elements have to be direct
+ * children of the `<dl>` for the grid to line every label up against every
+ * other, and a `<div>` between them would take the grid with it.
+ *
+ * ## It draws no surface
+ *
+ * No sheet, no padding, no corner. Put it in an `MPCard` when one is wanted,
+ * which is what makes the same list work inside a card, inside a popover, and
+ * loose under a heading.
+ */
+export declare const MPDataList: React.ForwardRefExoticComponent<MPDataListProps & React.RefAttributes<HTMLDListElement>>;

package/dist/components/data-list/MPDataList.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{cssLength as i}from"../../internal/length.js";import{META_TEXT as n,PROSE_TEXT as r,hasContent as l}from"../../internal/scale.js";import{useMPDensity as o,useMPSize as s}from"../../internal/config.js";const m=/*@__PURE__*/a.createContext({size:"md",orientation:"horizontal"}),d={xs:12,sm:16,md:20,lg:24,xl:32},p={xs:8,sm:10,md:12,lg:14,xl:16};function c(t,e,a){return Math.max(a,t+4*e)}export function MPDataListItem({label:i,children:o}){const{size:s,orientation:d}=a.useContext(m),p="vertical"===d;return e(a.Fragment,{children:[t("dt",{className:["mp-data-list__label text-mp-on-surface-variant min-w-0",n,p?"mt-(--_mp-data-list-row) first:mt-0":""].filter(Boolean).join(" "),children:i}),t("dd",{className:`mp-data-list__value text-mp-on-surface m-0 min-w-0 ${r[s]}`,children:l(o)?o:null})]})}export const MPDataList=/*@__PURE__*/a.forwardRef(function({orientation:e="horizontal",labelWidth:n,dividers:r=!1,size:l,density:f,className:x,style:h,children:u,..._},j){const b=s(l),g=o(f),v="vertical"===e,w=a.useMemo(()=>({size:b,orientation:e}),[b,e]);return t(m.Provider,{value:w,children:t("dl",{ref:j,"data-mp-size":b,className:["mp-data-list m-0 min-w-0",v?"flex flex-col":["grid items-baseline","[grid-template-columns:var(--_mp-data-list-label)_minmax(0,1fr)]","gap-x-(--_mp-data-list-col) gap-y-(--_mp-data-list-row)"].join(" "),r?["border-mp-outline-variant","[&>dt:nth-of-type(n+2)]:border-t [&>dt:nth-of-type(n+2)]:pt-(--_mp-data-list-row)",v?"":"[&>dd:nth-of-type(n+2)]:border-t [&>dd:nth-of-type(n+2)]:pt-(--_mp-data-list-row)"].filter(Boolean).join(" "):"",x??""].filter(Boolean).join(" "),style:{"--_mp-data-list-label":i(n)??"max-content","--_mp-data-list-col":`${c(d[b],g,8)}px`,"--_mp-data-list-row":`${c(p[b],g,4)}px`,...h},..._,children:u})})});

package/dist/components/data-list/index.d.ts

@@ -0,0 +1,2 @@
+export { MPDataList, MPDataListItem } from './MPDataList.js';
+export type { MPDataListItemProps, MPDataListProps } from './MPDataList.js';

package/dist/components/data-list/index.js

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