material-plus-ui 1.10.0 → 1.12.0

package/dist/a2ui/index.d.ts

@@ -9,12 +9,14 @@
  * Material Plus on the other end with nothing changed at its end.
  *
  * ```tsx
- * import { A2uiSurface } from '@a2ui/react/v0_9';
+ * import { A2uiSurface, type ReactComponentImplementation } from '@a2ui/react/v0_9';
  * import { MessageProcessor } from '@a2ui/web_core/v0_9';
  * import { mpA2uiCatalog } from 'material-plus-ui/a2ui';
  * import 'material-plus-ui/styles.css';
  *
- * const processor = new MessageProcessor([mpA2uiCatalog]);
+ * // The processor does not infer its component type from the catalogs, and
+ * // `A2uiSurface` accepts its surfaces only with this type argument.
+ * const processor = new MessageProcessor<ReactComponentImplementation>([mpA2uiCatalog]);
  *
  * processor.processMessages(messagesFromTheAgent);
  *
@@ -27,10 +29,10 @@
  *
  * `@a2ui/react` and `@a2ui/web_core` are **optional peer dependencies**: install
  * them and this subpath works, leave them out and nothing else in the library
- * notices. That is not tidiness. The protocol SDK brings Lit, signals, Zod, a
- * date library and a Markdown parser with it, and the rest of this package
- * promises two runtime dependencies — so the SDK stays behind an import that only
- * a project rendering agent interfaces ever writes. Nothing in `src/` outside this
+ * notices. That is not tidiness. The protocol SDK brings Lit, signals, Zod and a
+ * Markdown parser with it, and the rest of this package promises two runtime
+ * dependencies — so the SDK stays behind an import that only a project
+ * rendering agent interfaces ever writes. Nothing in `src/` outside this
  * directory imports either package, and this module is not in the main barrel.
  *
  * ## No stylesheet of its own

package/dist/components/accordion/MPAccordion.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Accordion as i}from"@base-ui/react/accordion";import{MPIcon as a}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 d,META_TEXT as c,PROSE_TEXT as m,SHEET_TITLE as u}from"../../internal/scale.js";import{sheetPadX as p,sheetPadY as f}from"../../internal/density.js";import{containerSurface as h}from"../../internal/elevation.js";import{useMPDensity as v,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/n.createContext({size:"md",density:0,dividers:!0,headingLevel:3}),g={1:e("h1",{}),2:e("h2",{}),3:e("h3",{}),4:e("h4",{}),5:e("h5",{}),6:e("h6",{})},j=/*@__PURE__*/["h-(--accordion-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(" ");const N={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/n.forwardRef(function({multiple:t=!1,value:a,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",elevation:c,size:m,density:u,hiddenUntilFound:p=!1,keepMounted:f=!1,headingLevel:g=3,className:j,children:N,...y},w){const _=x(m),k=v(u),z=n.useMemo(()=>({size:_,density:k,dividers:s,headingLevel:g}),[_,k,s,g]);return e(b.Provider,{value:z,children:e(i.Root,{ref:w,multiple:t,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:p,keepMounted:f,"data-mp-size":_,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h(d,c),"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",j??""].filter(Boolean).join(" "),...y,children:N})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:x,startIcon:y,action:w,disabled:_=!1,className:k,children:z,...C},M){const{size:A,density:L,dividers:P,headingLevel:B}=n.useContext(b),I=p(A,L),R=f(A,L),V=n.useRef(null),[F,S]=n.useState(!1),$=n.useCallback(e=>{var t;V.current=e,e&&S(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(i.Item,{ref:M,value:h,disabled:_,className:["mp-accordion__item flex flex-col",k??""].filter(Boolean).join(" "),...C,children:[t(i.Header,{render:g[B]??g[3],className:"m-0 flex w-full items-center font-[inherit]",children:[t(i.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",I,R,s[A],P?"":"rounded-mp-sm","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"].filter(Boolean).join(" "),children:[e(o,{}),d(y)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:y}):null,t("span",{className:"mp-accordion__text flex min-w-0 flex-1 flex-col",children:[d(v)?e("span",{className:`mp-accordion__title truncate ${u[A]}`,children:v}):null,d(x)?e("span",{className:`mp-accordion__subtitle text-mp-on-surface-variant truncate ${c}`,children:x}):null]}),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(a,{icon:r,size:l[A]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${I}`,children:w}):null]}),e(i.Panel,{ref:$,className:[j,F?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===V.current&&"height"===e.propertyName&&S(V.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[A],"text-mp-on-surface-variant",I,N[A]].join(" "),children:z})})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Accordion as i}from"@base-ui/react/accordion";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{MPStateLayer as r}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_TITLE as p}from"../../internal/scale.js";import{sheetPadX as u,sheetPadY as f}from"../../internal/density.js";import{PANEL_SETTLED as h,useSettledPanel as b}from"../../internal/fold.js";import{containerSurface as v}from"../../internal/elevation.js";import{useMPDensity as x,useMPSize as g}from"../../internal/config.js";const j=/*@__PURE__*/t.createContext({size:"md",density:0,dividers:!0,headingLevel:3}),N={1:e("h1",{}),2:e("h2",{}),3:e("h3",{}),4:e("h4",{}),5:e("h5",{}),6:e("h6",{})},y=/*@__PURE__*/["h-(--accordion-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(" "),w={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},_={xs:["pb-2","pb-1.5","pb-1.5"],sm:["pb-2.5","pb-2","pb-1.5"],md:["pb-3.5","pb-3","pb-2.5"],lg:["pb-4.5","pb-4","pb-3.5"],xl:["pb-5.5","pb-5","pb-4.5"]};export const MPAccordion=/*@__PURE__*/t.forwardRef(function({multiple:n=!1,value:a,defaultValue:o,onValueChange:r,dividers:s=!0,disabled:l=!1,variant:d="outlined",elevation:c,size:m,density:p,hiddenUntilFound:u=!1,keepMounted:f=!1,headingLevel:h=3,className:b,children:N,...y},w){const _=g(m),z=x(p),M=t.useMemo(()=>({size:_,density:z,dividers:s,headingLevel:h}),[_,z,s,h]);return e(j.Provider,{value:M,children:e(i.Root,{ref:w,multiple:n,value:a,defaultValue:o,onValueChange:e=>r?.(e),disabled:l,hiddenUntilFound:u,keepMounted:f,"data-mp-size":_,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",v(d,c),"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",b??""].filter(Boolean).join(" "),...y,children:N})})});export const MPAccordionItem=/*@__PURE__*/t.forwardRef(function({value:v,title:x,subtitle:g,startIcon:z,action:M,disabled:k=!1,className:L,children:P,...B},C){const{size:I,density:V,dividers:R,headingLevel:T}=t.useContext(j),$=u(I,V),A=f(I,V),E=b();return n(i.Item,{ref:C,value:v,disabled:k,className:["mp-accordion__item flex flex-col",L??""].filter(Boolean).join(" "),...B,children:[n(i.Header,{render:N[T]??N[3],className:"m-0 flex w-full items-center font-[inherit]",children:[n(i.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",$,A,s[I],R?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].filter(Boolean).join(" "),children:[e(r,{}),d(z)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:z}):null,n("span",{className:"mp-accordion__text flex min-w-0 flex-1 flex-col",children:[d(x)?e("span",{className:`mp-accordion__title truncate ${p[I]}`,children:x}):null,d(g)?e("span",{className:`mp-accordion__subtitle text-mp-on-surface-variant truncate ${c}`,children:g}):null]}),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(a,{icon:o,size:l[I]})})]}),d(M)?e("span",{className:`flex shrink-0 items-center ${$}`,children:M}):null]}),e(i.Panel,{ref:E.attach,className:[y,E.settled?h:""].filter(Boolean).join(" "),onTransitionEnd:E.onTransitionEnd,children:e("div",{className:["min-w-0",m[I],"text-mp-on-surface-variant",$,0===V?w[I]:_[I][-V-1]].join(" "),children:P})})]})});

package/dist/components/badge/MPBadge.d.ts

@@ -2,11 +2,12 @@ import * as React from 'react';
 import type { MPColor, MPCorner, MPSize, MPVariant } from '../../types.js';
 export interface MPBadgeProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'content'> {
     /**
-     * What the badge says — usually a count, sometimes a word.
+     * What the badge says — usually a count, sometimes a word. This is MD3's
+     * large badge; `dot` is its small one, and they are the only two it has.
      *
-     * Omit it and the badge draws a dot instead, which is the honest thing when
-     * there is something to report but nothing to count. MD3 calls those two the
-     * large and the small badge, and they are the only two it has.
+     * Leave it out and the badge is hidden, as a count of zero is: a badge with
+     * nothing to say is not news. Pass `dot` for the honest middle, something to
+     * report and nothing to count.
      */
     content?: React.ReactNode;
     /**
@@ -16,8 +17,8 @@ export interface MPBadgeProps extends Omit<React.ComponentPropsWithoutRef<'span'
      */
     max?: number;
     /**
-     * Draws the marker as a dot even when there is content, keeping the content
-     * for screen readers only. For the corner that has to stay quiet.
+     * Draws MD3's small badge, a dot. With `content` as well, the content is kept
+     * for screen readers only — for the corner that has to stay quiet.
      * @default false
      */
     dot?: boolean;

package/dist/components/button/MPButton.d.ts

@@ -114,8 +114,10 @@ export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWi
  * All three parts matter, and `render`'s own note says why. Teaching the button
  * to take an `href` instead would be teaching it to lie about what it is.
  *
- * **No ripple.** MD3 dropped it: the state layer below is what replaced it, and
- * it says the same thing without an animation that has to finish before the
- * screen it triggered is allowed to change.
+ * **No ripple.** MD3 still has one: its pressed state is a ripple, a state
+ * layer that spreads out from where the press landed. The state layer below is
+ * drawn flat and all at once instead, which says the same thing without an
+ * animation that has to finish before the screen it triggered is allowed to
+ * change.
  */
 export declare const MPButton: React.ForwardRefExoticComponent<MPButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/chip/MPChip.d.ts

@@ -45,7 +45,7 @@ export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>
      *
      * MD3's selected filter chip fills with the container tone of its own family
      * rather than changing family, which is what this does: a filter that is on is
-     * still the same filter.
+     * still the same filter. It also leads with a tick, unless `startIcon` is set.
      *
      * Deliberately **without a default**, which is the one thing about it worth
      * knowing. Passing it — either way round — is what says this chip is a toggle,

package/dist/components/chip/MPChip.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{transitionProps as s}from"../../internal/transition.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{hasContent as p}from"../../internal/scale.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{useMPColor as u,useMPSize as b}from"../../internal/config.js";const f={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},x={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},g={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},h={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},v={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},y={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 border-0 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant border-0 bg-transparent"},j={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},_={filled:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 text-mp-on-surface/38 border bg-transparent",text:"border-0 bg-transparent text-mp-on-surface/38"},w=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0 text-inherit [font:inherit]","rounded-mp-full size-[1.35em] opacity-70","transition-opacity duration-(--mp-sys-motion-duration-short4)","hover:opacity-100 focus-visible:opacity-100","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:cursor-default disabled:opacity-38"].join(" "),k=/*@__PURE__*/["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch rounded-[inherit] font-[inherit] text-[inherit]","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(" "),N=/*@__PURE__*/["group cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ");export const MPChip=/*@__PURE__*/o.forwardRef(function({variant:o="outlined",size:$,color:C,startIcon:z,endIcon:B,count:I,onDelete:L,deleteLabel:M,locale:P,selected:D,disabled:F=!1,transition:R,className:S,style:q,children:A,onClick:E,...G},H){const J=s(R),K=b($),O=u(C),Q=l(P),T=c(m,Q),U=Boolean(E)&&!F,V=U&&Boolean(L),W=U&&!L,X=["mp-chip relative inline-flex max-w-full shrink-0 items-center","box-border overflow-hidden align-middle leading-none whitespace-nowrap select-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",f[K],x[K],h[K],v[K],F?_[o]:D?j[o]:y[o],V?"ps-0":g[K],L?"pe-2":"",W?N:"",S??""].filter(Boolean).join(" "),Y=t(n,{children:[z,p(A)?e("span",{className:"min-w-0 truncate leading-[normal]",children:A}):null,B,p(I)?e("span",{className:["rounded-mp-full ms-0.5 inline-flex shrink-0 items-center justify-center px-1.5 py-px","text-[0.85em] leading-none font-medium tabular-nums","filled"===o?"bg-(--_mp-on-accent)/20 text-(--_mp-on-accent)":"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"].join(" "),children:I}):null]}),Z={"data-mp-size":K,"data-mp-variant":o,"data-selected":D||void 0,className:`${X}${J.className?` ${J.className}`:""}`,style:{...i(O),...J.style,...q},...G};return W?t("button",{ref:H,type:"button","aria-pressed":D,onClick:E,...Z,children:[e(d,{}),Y]}):t("span",{ref:H,"aria-disabled":!(!F||U)||void 0,...Z,children:[V?t("button",{type:"button","aria-pressed":D,className:`${k} ${h[K]} ${g[K]}`,onClick:E,children:[e(d,{}),Y]}):Y,L?e("button",{type:"button","aria-label":M??T.remove,disabled:F,className:w,onClick:L,children:e(r,{icon:a,size:"1em"})}):null]})});
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as a,CloseIcon as i}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{transitionProps as l}from"../../internal/transition.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{COMMON as p}from"../../internal/messages/common.js";import{hasContent as d}from"../../internal/scale.js";import{MPStateLayer as u}from"../../internal/StateLayer.js";import{useMPColor as b,useMPSize as f}from"../../internal/config.js";const x={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},g={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},h={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},v={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},y={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},j={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 border-0 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant border-0 bg-transparent"},_={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},w={filled:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 text-mp-on-surface/38 border bg-transparent",text:"border-0 bg-transparent text-mp-on-surface/38"},k=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0 text-inherit [font:inherit]","rounded-mp-full size-[1.35em] opacity-70","transition-opacity duration-(--mp-sys-motion-duration-short4)","hover:opacity-100 focus-visible:opacity-100","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:cursor-default disabled:opacity-38"].join(" "),N=/*@__PURE__*/["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch rounded-[inherit] font-[inherit] text-[inherit]","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(" "),$=/*@__PURE__*/["group cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ");export const MPChip=/*@__PURE__*/o.forwardRef(function({variant:o="outlined",size:z,color:C,startIcon:B,endIcon:I,count:L,onDelete:M,deleteLabel:P,locale:D,selected:F,disabled:R=!1,transition:S,className:q,style:A,children:E,onClick:G,...H},J){const K=l(S),O=f(z),Q=b(C),T=c(D),U=m(p,T),V=Boolean(G)&&!R,W=V&&Boolean(M),X=V&&!M,Y=["mp-chip relative inline-flex max-w-full shrink-0 items-center","box-border overflow-hidden align-middle leading-none whitespace-nowrap select-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",x[O],g[O],v[O],y[O],R?w[o]:F?_[o]:j[o],W?"ps-0":h[O],M?"pe-2":"",X?$:"",q??""].filter(Boolean).join(" "),Z=B??(F?e(r,{icon:a,size:"1.25em"}):null),ee=t(n,{children:[Z,d(E)?e("span",{className:"min-w-0 truncate leading-[normal]",children:E}):null,I,d(L)?e("span",{className:["rounded-mp-full ms-0.5 inline-flex shrink-0 items-center justify-center px-1.5 py-px","text-[0.85em] leading-none font-medium tabular-nums","filled"===o?"bg-(--_mp-on-accent)/20 text-(--_mp-on-accent)":"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"].join(" "),children:L}):null]}),ne={"data-mp-size":O,"data-mp-variant":o,"data-selected":F||void 0,className:`${Y}${K.className?` ${K.className}`:""}`,style:{...s(Q),...K.style,...A},...H};return X?t("button",{ref:J,type:"button","aria-pressed":F,onClick:G,...ne,children:[e(u,{}),ee]}):t("span",{ref:J,"aria-disabled":!(!R||V)||void 0,...ne,children:[W?t("button",{type:"button","aria-pressed":F,className:`${N} ${v[O]} ${h[O]}`,onClick:G,children:[e(u,{}),ee]}):ee,M?e("button",{type:"button","aria-label":P??U.remove,disabled:R,className:k,onClick:M,children:e(r,{icon:i,size:"1em"})}):null]})});

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{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})})]})});
+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 o}from"../../constants/icons.js";import{PANEL_SETTLED as r,useSettledPanel as s}from"../../internal/fold.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_ICON as c,hasContent as m,META_TEXT as p,PROSE_TEXT as f,SHEET_PAD_X as u,SHEET_PAD_Y as h,SHEET_TITLE as x}from"../../internal/scale.js";import{containerSurface as b}from"../../internal/elevation.js";import{useMPSize as g}from"../../internal/config.js";const j=/*@__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(" "),v={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:N=!1,onOpenChange:w,title:y,subtitle:k,startIcon:M,action:O,trigger:T,indicator:z=!0,disabled:B=!1,padded:C=!0,variant:P="outlined",elevation:$,size:E,hiddenUntilFound:F=!1,keepMounted:I=!1,className:R,children:U,...L},S){const q=g(E),A=u[q],D=h[q],G=s();return n(a.Root,{ref:S,open:t,defaultOpen:N,onOpenChange:e=>w?.(e),disabled:B,"data-mp-size":q,"data-mp-variant":P,className:["mp-collapsible rounded-mp-md flex w-full flex-col overflow-hidden",b(P,$),"text-mp-on-surface",R??""].filter(Boolean).join(" "),...L,children:[T?e(a.Trigger,{render:T}):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",A,D,d[q],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(l,{}),m(M)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:M}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[m(y)?e("span",{className:`truncate ${x[q]}`,children:y}):null,m(k)?e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:k}):null]}),z?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:o,size:c[q]})}):null]}),m(O)?e("span",{className:`flex shrink-0 items-center ${A}`,children:O}):null]}),e(a.Panel,{ref:G.attach,hiddenUntilFound:F,keepMounted:I,className:[j,G.settled?r:""].filter(Boolean).join(" "),onTransitionEnd:G.onTransitionEnd,children:e("div",{className:["min-w-0",f[q],"text-mp-on-surface-variant",C?A:"",C?T?D:v[q]:""].filter(Boolean).join(" "),children:U})})]})});

package/dist/components/color-picker/MPColorPicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as l,CloseIcon as i}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{useMPSize as d}from"../../internal/config.js";import{useMPLocale as p,useMPMessages as h}from"../../internal/locale.js";import{COLOR_PICKER as m}from"../../internal/messages/color-picker.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{MPSupportingText as g}from"../../internal/SupportingText.js";import{CONTROL_ICON as b,META_TEXT as v,PROSE_TEXT as x,STACK_GAP as y,hasContent as w}from"../../internal/scale.js";import{FADE as j,PORTAL_LAYER as N}from"../../internal/surface.js";import{CHECKER_BACKGROUND as k,DEFAULT_SWATCHES as C,clamp as _,cssColor as z,formatColor as P,parseColor as $,readableInk as M}from"../../internal/color.js";const T={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},I={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},A={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},R={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},O={xs:12,sm:14,md:16,lg:18,xl:20},B={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"}},D="border-mp-outline-variant relative overflow-hidden border",L=/*@__PURE__*/["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function S(e,a,r){return{x:0===e.width?0:_((a-e.left)/e.width,0,1),y:0===e.height?0:_((r-e.top)/e.height,0,1)}}function q(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function F({hsv:n,alphaValue:t,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:p,size:h,inert:m,labels:f}){const g=O[h],b=-g/2,x=z({h:n.h,s:100,v:100}),y=z(n),w=r.useRef(null),j=r.useRef(null),N=r.useRef(0);r.useEffect(()=>()=>{N.current&&cancelAnimationFrame(N.current)},[]);const C=e=>({onPointerDown:a=>{if(m)return;const r=a.currentTarget.getBoundingClientRect();w.current=r,a.currentTarget.setPointerCapture(a.pointerId),e(S(r,a.clientX,a.clientY))},onPointerMove:a=>{const r=w.current;var n;!m&&r&&a.currentTarget.hasPointerCapture(a.pointerId)&&(n=S(r,a.clientX,a.clientY),j.current=n,N.current||(N.current=requestAnimationFrame(()=>{N.current=0;const a=j.current;j.current=null,a&&e(a)})))},onPointerUp:()=>{w.current=null},onPointerCancel:()=>{w.current=null}}),B=(e,a,r,n)=>({role:"slider",tabIndex:m?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":m||void 0,onKeyDown:e=>{const a=q(e);!m&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),F=/*@__PURE__*/["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),V=r.useMemo(()=>d?d.map(e=>{const a=$(e);return{swatch:e,parsed:a,hex:null===a?null:P(a.hsv,a.alpha,"hex")}}):[],[d]),K=P(n,t,"hex");return a("div",{className:`mp-color-picker__panel flex flex-col ${T[h]} ${R[h]}`,children:[e("div",{...C(({x:e,y:a})=>i({hsv:{h:n.h,s:100*e,v:100*(1-a)},alpha:t})),role:"slider",tabIndex:m?-1:0,"aria-label":f.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(n.s),"aria-valuetext":`${Math.round(n.s)}%, ${Math.round(n.v)}%`,"aria-disabled":m||void 0,onKeyDown:e=>{const a=q(e);!m&&a&&(e.preventDefault(),i({hsv:{h:n.h,s:_(n.s+a.x,0,100),v:_(n.v+a.y,0,100)},alpha:t}))},className:[D,"rounded-mp-sm",I[h],F,m?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:x,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:L,style:{width:g,height:g,left:`${n.s}%`,top:100-n.v+"%",marginLeft:b,marginTop:b,backgroundColor:y}})}),e("div",{...C(({x:e})=>i({hsv:{...n,h:360*e},alpha:t})),...B(f.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:t})),className:[D,"rounded-mp-full",A[h],F,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:L,style:{width:g,height:g,left:n.h/360*100+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:x}})}),c?a("div",{...C(({x:e})=>i({hsv:n,alpha:e})),...B(f.alpha,100*t,100,e=>i({hsv:n,alpha:_(t+e/100,0,1)})),className:[D,"rounded-mp-full",A[h],F,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:k,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${z(n,0)}, ${y})`}}),e("span",{className:L,style:{width:g,height:g,left:100*t+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:z(n,t)}})]}):null,p?a("div",{className:`flex items-center ${R[h]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:g+8,height:g+8,...k},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:z(n,t)}})}),e("input",{type:"text",value:s,readOnly:m,spellCheck:!1,autoComplete:"off","aria-label":f.value,onChange:e=>u(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",v,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,V.length>0?e("div",{role:"group","aria-label":f.swatches,className:"grid grid-cols-8 gap-1",children:V.map(({swatch:a,parsed:r,hex:n},t)=>{const s=null!==r&&n===K;return e("button",{type:"button",disabled:m,"aria-label":a,"aria-pressed":s,onClick:()=>{r&&i({hsv:r.hsv,alpha:r.alpha})},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border","transition-[box-shadow] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",F,m?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:e("span",{"aria-hidden":"true",className:["transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",s?"opacity-100":"opacity-0"].join(" "),style:r?{color:M(r.hsv)}:void 0,children:e(o,{icon:l,size:12})})},`${t}:${a}`)})}):null]})}const V={h:202,s:100,v:61};export const MPColorPicker=/*@__PURE__*/r.forwardRef(function({value:l,defaultValue:_="#00639b",onValueChange:M,format:T="hex",alpha:I=!1,swatches:A=C,inline:R=!1,editable:O=!0,label:D,floatingLabel:L=!0,description:S,errorMessage:q,required:K=!1,disabled:E=!1,readOnly:U=!1,clearable:X=!1,name:Y,open:W,defaultOpen:G=!1,onOpenChange:H,locale:J,labels:Q,size:Z,fullWidth:ee=!1,id:ae,className:re,style:ne},te){const oe=d(Z),le=p(J),ie=h(m,le,Q),se=w(q),ue=B[oe],ce=r.useId(),de=ae??ce,[pe,he]=r.useState(_),me=l??pe,[fe,ge]=r.useState(G),be=W??fe,[ve,xe]=r.useState(()=>$(me)??{hsv:V,alpha:1}),[ye,we]=r.useState(()=>me),je=P(ve.hsv,I?ve.alpha:1,T),Ne=""===me;r.useEffect(()=>{const e=$(me);e?P(e.hsv,I?e.alpha:1,T)!==je&&(we(me),xe(e)):we(me)},[me,je,I,T]);const ke=E||U,Ce=X&&!ke&&!Ne,{shrunk:_e,focusProps:ze}=c({floating:L&&w(D),filled:!Ne,pinned:be}),Pe=(e,a)=>{xe(e);const r=P(e.hsv,I?e.alpha:1,T);we(a??r),void 0===l&&he(r),M?.(r)},$e=e(F,{hsv:ve.hsv,alphaValue:ve.alpha,onChange:Pe,text:ye,onTextChange:e=>{we(e);const a=$(e);a&&Pe(a,e)},withAlpha:I,swatches:A,editable:O,size:oe,inert:ke,labels:ie}),Me=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:k,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:Ne?"transparent":z(ve.hsv,I?ve.alpha:1)}})}),Te=Y?e("input",{type:"hidden",name:Y,value:Ne?"":je}):null;return R?a("div",{ref:te,"data-mp-size":oe,className:["mp-color-picker flex flex-col",y[oe],re??""].filter(Boolean).join(" "),style:ne,children:[w(D)?a("span",{className:[v,E?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[D,K?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,$e,w(q)?e("span",{className:`${v} text-mp-error`,children:q}):w(S)?e("span",{className:`${v} text-mp-on-surface-variant`,children:S}):null,Te]}):a(n.Root,{ref:te,disabled:E,invalid:se,"data-mp-size":oe,className:["mp-color-picker group flex-col align-top",ee?"flex w-full":"inline-flex w-fit",re??""].filter(Boolean).join(" "),style:ne,...ze,children:[a(t.Root,{open:be,onOpenChange:e=>{void 0===W&&ge(e),H?.(e)},children:[a("div",{className:"relative w-full",children:[a(t.Trigger,{id:de,disabled:E,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",ue.padding,Ce?"pe-10":"",ue.height,x[oe],E?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(U?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[Ne&&!_e?null:Me,e("span",{className:["min-w-0 flex-1 truncate text-start",Ne?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:Ne?_e?ie.empty:null:je})]}),Ce?a("button",{type:"button","aria-label":ie.clear,onClick:()=>{void 0===l&&he(""),we(""),M?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(f,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(o,{icon:i,size:b[oe]})]}):null,e(u,{label:D,required:K,notched:_e}),w(D)?e(s,{size:oe,label:D,required:K,htmlFor:de,shrunk:_e}):null]}),e(t.Portal,{children:e(t.Positioner,{className:N,sideOffset:4,align:"start",children:e(t.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",x[oe],j].join(" "),children:$e})})})]}),e(g,{description:S,errorMessage:q,className:ue.padding}),Te]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as l}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{MPFieldValue as d}from"../../internal/FieldValue.js";import{useMPSize as p}from"../../internal/config.js";import{useMPLocale as h,useMPMessages as m}from"../../internal/locale.js";import{COMMON as f}from"../../internal/messages/common.js";import{COLOR_PICKER as g}from"../../internal/messages/color-picker.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as b}from"../../internal/SupportingText.js";import{CONTROL_ICON as x,META_TEXT as y,PROSE_TEXT as w,STACK_GAP as j,hasContent as N}from"../../internal/scale.js";import{FADE as k,PORTAL_LAYER as C}from"../../internal/surface.js";import{VISUALLY_HIDDEN as _}from"../../internal/visually-hidden.js";import{CHECKER_BACKGROUND as z,DEFAULT_SWATCHES as P,clamp as $,cssColor as I,formatColor as M,parseColor as T,readableInk as q}from"../../internal/color.js";const A={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},O={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},R={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},L={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},B={xs:12,sm:14,md:16,lg:18,xl:20},D={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"}},S="border-mp-outline-variant relative overflow-hidden border",F=/*@__PURE__*/["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function V(e,r,a){return{x:0===e.width?0:$((r-e.left)/e.width,0,1),y:0===e.height?0:$((a-e.top)/e.height,0,1)}}function K(e){const r=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-r,y:0};case"ArrowRight":return{x:r,y:0};case"ArrowUp":return{x:0,y:r};case"ArrowDown":return{x:0,y:-r};default:return null}}function E({hsv:n,alphaValue:t,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:p,size:h,inert:m,labels:f}){const g=B[h],v=-g/2,b=I({h:n.h,s:100,v:100}),x=I(n),w=a.useRef(null),j=a.useRef(null),N=a.useRef(0);a.useEffect(()=>()=>{N.current&&cancelAnimationFrame(N.current)},[]);const k=e=>({onPointerDown:r=>{if(m)return;const a=r.currentTarget.getBoundingClientRect();w.current=a,r.currentTarget.setPointerCapture(r.pointerId),e(V(a,r.clientX,r.clientY))},onPointerMove:r=>{const a=w.current;var n;!m&&a&&r.currentTarget.hasPointerCapture(r.pointerId)&&(n=V(a,r.clientX,r.clientY),j.current=n,N.current||(N.current=requestAnimationFrame(()=>{N.current=0;const r=j.current;j.current=null,r&&e(r)})))},onPointerUp:()=>{w.current=null},onPointerCancel:()=>{w.current=null}}),C=(e,r,a,n)=>({role:"slider",tabIndex:m?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":a,"aria-valuenow":Math.round(r),"aria-orientation":"horizontal","aria-disabled":m||void 0,onKeyDown:e=>{const r=K(e);!m&&r&&0!==r.x&&(e.preventDefault(),n(r.x))}}),_=/*@__PURE__*/["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),P=a.useMemo(()=>d?d.map(e=>{const r=T(e);return{swatch:e,parsed:r,hex:null===r?null:M(r.hsv,r.alpha,"hex")}}):[],[d]),D=M(n,t,"hex");return r("div",{className:`mp-color-picker__panel flex flex-col ${A[h]} ${L[h]}`,children:[e("div",{...k(({x:e,y:r})=>i({hsv:{h:n.h,s:100*e,v:100*(1-r)},alpha:t})),role:"slider",tabIndex:m?-1:0,"aria-label":f.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(n.s),"aria-valuetext":`${Math.round(n.s)}%, ${Math.round(n.v)}%`,"aria-disabled":m||void 0,onKeyDown:e=>{const r=K(e);!m&&r&&(e.preventDefault(),i({hsv:{h:n.h,s:$(n.s+r.x,0,100),v:$(n.v+r.y,0,100)},alpha:t}))},className:[S,"rounded-mp-sm",O[h],_,m?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:b,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:F,style:{width:g,height:g,left:`${n.s}%`,top:100-n.v+"%",marginLeft:v,marginTop:v,backgroundColor:x}})}),e("div",{...k(({x:e})=>i({hsv:{...n,h:360*e},alpha:t})),...C(f.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:t})),className:[S,"rounded-mp-full",R[h],_,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:F,style:{width:g,height:g,left:n.h/360*100+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:b}})}),c?r("div",{...k(({x:e})=>i({hsv:n,alpha:e})),...C(f.alpha,100*t,100,e=>i({hsv:n,alpha:$(t+e/100,0,1)})),className:[S,"rounded-mp-full",R[h],_,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:z,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${I(n,0)}, ${x})`}}),e("span",{className:F,style:{width:g,height:g,left:100*t+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:I(n,t)}})]}):null,p?r("div",{className:`flex items-center ${L[h]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:g+8,height:g+8,...z},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:I(n,t)}})}),e("input",{type:"text",value:s,readOnly:m,spellCheck:!1,autoComplete:"off","aria-label":f.value,onChange:e=>u(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",y,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,P.length>0?e("div",{role:"group","aria-label":f.swatches,className:"grid grid-cols-8 gap-1",children:P.map(({swatch:r,parsed:a,hex:n},t)=>{const s=null!==a&&n===D;return e("button",{type:"button",disabled:m,"aria-label":r,"aria-pressed":s,onClick:()=>{a&&i({hsv:a.hsv,alpha:a.alpha})},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border","transition-[box-shadow] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",_,m?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:r},children:e("span",{"aria-hidden":"true",className:["transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",s?"opacity-100":"opacity-0"].join(" "),style:a?{color:q(a.hsv)}:void 0,children:e(l,{icon:o,size:12})})},`${t}:${r}`)})}):null]})}const U={h:202,s:100,v:61};export const MPColorPicker=/*@__PURE__*/a.forwardRef(function({value:o,defaultValue:$="#00639b",onValueChange:q,format:A="hex",alpha:O=!1,swatches:R=P,inline:L=!1,editable:B=!0,label:S,floatingLabel:F=!0,description:V,errorMessage:K,required:X=!1,disabled:Y=!1,readOnly:W=!1,clearable:G=!1,name:H,open:J,defaultOpen:Q=!1,onOpenChange:Z,locale:ee,labels:re,size:ae,fullWidth:ne=!1,id:te,className:le,style:oe},ie){const se=p(ae),ue=h(ee),ce=m(g,ue,re),de=m(f,ue),pe=N(K),he=D[se],me=a.useId(),fe=te??me,[ge,ve]=a.useState($),be=o??ge,[xe,ye]=a.useState(Q),we=J??xe,[je,Ne]=a.useState(()=>T(be)??{hsv:U,alpha:1}),[ke,Ce]=a.useState(()=>be),_e=M(je.hsv,O?je.alpha:1,A),ze=""===be;a.useEffect(()=>{const e=T(be);e?M(e.hsv,O?e.alpha:1,A)!==_e&&(Ce(be),Ne(e)):Ce(be)},[be,_e,O,A]);const Pe=Y||W,$e=G&&!Pe&&!ze,{shrunk:Ie,focusProps:Me}=c({floating:F&&N(S),filled:!ze,pinned:we}),Te=(e,r)=>{Ne(e);const a=M(e.hsv,O?e.alpha:1,A);Ce(r??a),void 0===o&&ve(a),q?.(a)},qe=e(E,{hsv:je.hsv,alphaValue:je.alpha,onChange:Te,text:ke,onTextChange:e=>{Ce(e);const r=T(e);r&&Te(r,e)},withAlpha:O,swatches:R,editable:B,size:se,inert:Pe,labels:ce}),Ae=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:z,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ze?"transparent":I(je.hsv,O?je.alpha:1)}})}),Oe=H?e("input",{type:"hidden",name:H,value:ze?"":_e}):null;return L?r("div",{ref:ie,"data-mp-size":se,className:["mp-color-picker flex flex-col",j[se],le??""].filter(Boolean).join(" "),style:oe,children:[N(S)?r("span",{className:[y,Y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[S,X?e("span",{"aria-hidden":"true",children:" *"}):null,X?r("span",{className:_,children:[" ",de.required]}):null]}):null,qe,N(K)?e("span",{className:`${y} text-mp-error`,children:K}):N(V)?e("span",{className:`${y} text-mp-on-surface-variant`,children:V}):null,Oe]}):r(n.Root,{ref:ie,name:H,disabled:Y,invalid:pe,"data-mp-size":se,className:["mp-color-picker group flex-col align-top",ne?"flex w-full":"inline-flex w-fit",le??""].filter(Boolean).join(" "),style:oe,...Me,children:[r(t.Root,{open:we,onOpenChange:e=>{void 0===J&&ye(e),Z?.(e)},children:[r("div",{className:"relative w-full",children:[r(t.Trigger,{id:fe,disabled:Y,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",he.padding,$e?"pe-10":"",he.height,w[se],Y?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(W?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[ze&&!Ie?null:Ae,e("span",{className:["min-w-0 flex-1 truncate text-start",ze?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:ze?Ie?ce.empty:null:_e})]}),$e?r("button",{type:"button","aria-label":ce.clear,onClick:()=>{void 0===o&&ve(""),Ce(""),q?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(v,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(l,{icon:i,size:x[se]})]}):null,e(d,{value:ze?"":_e,required:X,readOnly:W,targetId:fe}),e(u,{label:S,required:X,notched:Ie}),N(S)?e(s,{size:se,label:S,required:X,requiredLabel:de.required,htmlFor:fe,shrunk:Ie}):null]}),e(t.Portal,{children:e(t.Positioner,{className:C,sideOffset:4,align:"start",children:e(t.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",w[se],k].join(" "),children:qe})})})]}),e(b,{description:V,errorMessage:K,className:he.padding}),Oe]})});

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

@@ -41,6 +41,12 @@ export interface MPComboboxOption {
 }
 /** One value, or an array of them, depending on `multiple`. */
 type Selection<Multiple extends boolean | undefined> = Multiple extends true ? MPComboboxValue[] : MPComboboxValue | null;
+/**
+ * The same, as a caller hands it in. A `readonly` array is accepted because
+ * the field copies it before keeping it, and a caller holding one should not
+ * have to copy it first.
+ */
+type SelectionInput<Multiple extends boolean | undefined> = Multiple extends true ? readonly MPComboboxValue[] : MPComboboxValue | null;
 export interface MPComboboxProps<Multiple extends boolean | undefined = false> extends MPStyleProps, MPControlEventProps<HTMLInputElement> {
     /**
      * The options, as data — the same shape `MPSelect` takes, and for the same
@@ -77,9 +83,9 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      * "not picked yet" rather than a `0` or an empty string, or the field will
      * show it.
      */
-    value?: Selection<Multiple> | null;
+    value?: SelectionInput<Multiple> | null;
     /** The initially chosen value, for an uncontrolled combobox. `null` is none. */
-    defaultValue?: Selection<Multiple> | null;
+    defaultValue?: SelectionInput<Multiple> | null;
     onValueChange?: (value: Selection<Multiple>) => void;
     /** Called as the text in the input changes — the filter query, not the value. */
     onInputValueChange?: (inputValue: string) => void;
@@ -129,8 +135,9 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      * *is* the query, so a filter that hid it would be hiding the answer to the
      * question it was asked.
      *
-     * Left out, Base UI's own collator-backed match is used, which is what handles
-     * accents and case across eighteen locales.
+     * Left out, Base UI's own collator-backed match is used, in `locale`'s
+     * language: it leaves case, accents and punctuation out of the comparison.
+     * `MPTreeSelect` searches the same way.
      */
     filter?: ((option: MPComboboxOption, query: string) => boolean) | null;
     /**

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

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

@@ -76,7 +76,9 @@ export interface MPCommandPaletteProps {
      */
     size?: MPSize;
     /**
-     * Which accent family the highlighted row and the caret read.
+     * Which accent family the caret reads. The highlighted row is lit in the
+     * row's own ink, as a menu's is, so the pointer and the keyboard light it the
+     * same way whatever this is.
      * @default 'primary'
      */
     color?: MPColor;

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

@@ -27,7 +27,7 @@ export interface MPContainerProps extends React.ComponentPropsWithoutRef<'div'>
     /**
      * The margin's rung. `md` is 16dp, which is MD3's own compact margin; the
      * specification widens it to 24dp from a medium window up, which here is
-     * `size="lg"`.
+     * `size="xl"`.
      *
      * As on [MPBox](./box) this is the size of the *sheet* — it never touches a
      * height or the type scale — and it is independent of `maxWidth`, which is how

package/dist/components/data-table/MPDataTable.d.ts

@@ -268,8 +268,9 @@ export interface MPDataTableProps<Row> extends Omit<React.ComponentPropsWithoutR
     /** @default 'md' */
     size?: MPSize;
     /**
-     * Which accent family the sort arrow, the ticks and a chosen row read. The
-     * cells themselves stay neutral.
+     * Which accent family the sort arrow, the ticks, the export button and the
+     * pagination read. The cells stay neutral, and a chosen row is
+     * `secondary-container`, as a chosen option is everywhere in the library.
      * @default 'primary'
      */
     color?: MPColor;

package/dist/components/data-table/MPDataTable.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{MPButton as n}from"../button/MPButton.js";import{MPCheckbox as r}from"../checkbox/MPCheckbox.js";import{MPIcon as o}from"../icon/MPIcon.js";import{MPPagination as l}from"../pagination/MPPagination.js";import{MPSelect as s}from"../select/MPSelect.js";import{MPTextField as i}from"../text-field/MPTextField.js";import{ArrowDownIcon as c,ArrowUpIcon as d,SearchIcon as m}from"../../constants/icons.js";import{accentSlots as u}from"../../internal/accent.js";import{containerSurface as p}from"../../internal/elevation.js";import{useMPColor as f,useMPDensity as h,useMPSize as y}from"../../internal/config.js";import{useMPLocale as g,useMPMessages as b}from"../../internal/locale.js";import{fillMessage as v}from"../../internal/i18n.js";import{checkServerLocale as x,intlLocale as k}from"../../internal/intl.js";import{DATA_TABLE as w}from"../../internal/messages/data-table.js";import{TABLE as N}from"../../internal/messages/table.js";import{TRANSFER as S}from"../../internal/messages/transfer.js";import{CONTROL_ICON as C,META_TEXT as j}from"../../internal/scale.js";import{VISUALLY_HIDDEN as z}from"../../internal/visually-hidden.js";import{CELL_TEXT as _,HEAD_TEXT as M,ROW as P,cellPadX as L,cellPadY as E,drawableCell as $}from"../../internal/table.js";import{DEFAULT_COLUMN_WIDTH as A,MIN_COLUMN_WIDTH as D,compareValues as I,downloadText as K,keysBetween as R,nextSort as W,pageBounds as B,searchHaystack as F,searchText as T,sortRows as X,toCsv as V}from"../../internal/data-table.js";function H(e,t){return e.value?e.value(t):t[e.key]}const Y={xs:36,sm:40,md:48,lg:52,xl:60},q=/*@__PURE__*/["group/sort -m-1 flex w-full cursor-pointer items-center gap-1 rounded-mp-xs p-1","appearance-none border-0 bg-transparent text-inherit text-start [font:inherit]","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","hover:text-mp-on-surface","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),O=/*@__PURE__*/["mp-data-table__resize absolute inset-y-0 end-0 z-10 w-2 translate-x-1/2 rtl:-translate-x-1/2","cursor-col-resize touch-none select-none appearance-none border-0 bg-transparent p-0","after:absolute after:inset-y-1 after:start-1/2 after:w-px after:bg-transparent","after:transition-[background-color] after:duration-(--mp-sys-motion-duration-short4)","hover:after:bg-mp-primary data-dragging:after:bg-mp-primary","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-solid outline-none"].join(" "),G={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};function J({entry:a,index:n,at:o,chosen:l,headers:s,striped:i,lit:c,pressable:d,selectable:m,tabStop:u,ticks:p,rowClassName:f,cellClassName:h,padX:y,padY:g,size:b,color:v,selectLabel:x,onPress:k}){const w={padding:`${g} ${y}`};return t("tr",{"aria-selected":m?l:void 0,className:[P,f,i&&o%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",l?"[--_mp-row:var(--_mp-color-secondary-container)]":"",c&&!l?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",d&&"cursor-pointer",u&&["outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" ")].filter(Boolean).join(" "),style:G,tabIndex:u?0:void 0,onClick:e=>k(a,n,e.shiftKey),onKeyDown:u?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),k(a,n,e.shiftKey))}:void 0,children:[p?e("td",{style:w,children:e(r,{size:b,color:v,checked:l,onCheckedChange:()=>k(a,n,!1),label:e("span",{className:z,children:x})})}):null,s.map(t=>e("td",{className:h,style:{...w,textAlign:t.align??"start"},children:t.render?t.render(a.row,o):$(H(t,a.row))},t.key))]})}const Q=/*@__PURE__*/a.memo(J);export function MPDataTable({headers:$,items:J,getRowKey:U,caption:Z,empty:ee,locale:te,sortable:ae=!1,sortMode:ne="single",sort:re,defaultSort:oe,onSortChange:le,searchable:se=!1,search:ie,defaultSearch:ce,onSearchChange:de,searchLabel:me,filter:ue,toolbar:pe,paged:fe=!1,page:he,defaultPage:ye,onPageChange:ge,pageSize:be,defaultPageSize:ve,onPageSizeChange:xe,pageSizeOptions:ke=[10,25,50,100],resizable:we=!1,columnWidths:Ne,defaultColumnWidths:Se,onColumnWidthsChange:Ce,selectionMode:je="none",selected:ze,defaultSelected:_e,onSelectedChange:Me,checkboxes:Pe=!1,onRowClick:Le,exportable:Ee=!1,exportFileName:$e="table.csv",exportEscapeFormulas:Ae=!0,onExport:De,striped:Ie=!1,hoverable:Ke=!1,stickyHeader:Re=!1,variant:We="outlined",elevation:Be,size:Fe,color:Te,density:Xe,className:Ve,style:He,classNames:Ye,...qe}){const Oe=y(Fe),Ge=f(Te),Je=h(Xe),Qe=g(te),Ue=b(w,Qe),Ze=b(N,Qe),et=b(S,Qe),tt=L(Oe,Je),at=E(Oe,Je),[nt,rt]=a.useState(()=>[...oe??[]]),ot=re??nt,[lt,st]=a.useState(ce??""),it=ie??lt,[ct,dt]=a.useState(ye??1),mt=he??ct,[ut,pt]=a.useState(ve??25),ft=be??ut,[ht,yt]=a.useState(()=>({...Se})),gt=Ne??ht,[bt,vt]=a.useState(()=>[..._e??[]]),xt=ze??bt,kt=a.useMemo(()=>new Set(xt.map(e=>String(e))),[xt]),wt=a.useRef(null),Nt=a.useMemo(()=>J.map((e,t)=>{const a=U?U(e,t):t;return{row:e,identity:a,key:String(a),origin:t}}),[J,U]),St=T(it.trim()),Ct=""!==St,jt=a.useMemo(()=>{if(!Ct)return null;const e=$.filter(e=>!1!==e.searchable);return Nt.map(t=>F(e.map(e=>H(e,t.row))))},[Nt,$,Ct]),zt=a.useMemo(()=>{const e=""!==St&&jt?Nt.filter((e,t)=>jt[t].includes(St)):Nt;return ue?e.filter(e=>ue(e.row,e.origin)):e},[Nt,jt,St,ue]),_t=a.useMemo(()=>(x(Qe),new Intl.Collator(k(Qe),{numeric:!0,sensitivity:"base"})),[Qe]),Mt=a.useMemo(()=>X(zt,ot,(e,t)=>{const a=$.find(t=>t.key===e);if(!a)return null;const n="desc"===t,r=a.compare;if(r)return(e,t)=>n?-r(e.row,t.row):r(e.row,t.row);const o=new Map,l=e=>(o.has(e)||o.set(e,H(a,e.row)),o.get(e));return(e,t)=>I(l(e),l(t),_t,n)}),[zt,ot,$,_t]),Pt=B(Mt.length,mt,ft),Lt=fe?Mt.slice(Pt.start,Pt.end):Mt,Et=e=>{void 0===he&&dt(e),ge?.(e)},$t=e=>{void 0===Ne&&yt(e),Ce?.(e)},At=e=>{const t=new Set(e),a=[],n=[];for(const e of Nt)t.has(e.key)&&(n.push(e.identity),a.push(e.row));void 0===ze&&vt(n),Me?.(n,a)},Dt="none"!==je,It="multiple"===je,Kt=Pe&&Dt,Rt=(e,t,a)=>{if(Le?.(e.row,Pt.start+t),Dt){if(!It)return At(kt.has(e.key)?[]:[e.key]),void(wt.current=e.key);if(a&&null!==wt.current){const t=R(Lt.map(e=>e.key),wt.current,e.key);return void At([...new Set([...kt,...t])])}wt.current=e.key,At(kt.has(e.key)?[...kt].filter(t=>t!==e.key):[...kt,e.key])}},Wt=a.useRef(Rt);Wt.current=Rt;const Bt=a.useCallback((e,t,a)=>Wt.current(e,t,a),[]),Ft=Lt.map(e=>e.key),Tt=Ft.filter(e=>kt.has(e)).length,Xt=Ft.length>0&&Tt===Ft.length,Vt=e=>gt[e.key]??e.width??A,Ht=a.useRef(null);a.useEffect(()=>()=>{null!==Ht.current&&(document.body.style.userSelect=Ht.current,Ht.current=null)},[]);const Yt=(e,t)=>{const a=Math.max(D,e.minWidth??D);$t({...gt,[e.key]:Math.max(a,Vt(e)+t)})},qt=e=>{const t={...gt};delete t[e.key],$t(t)},Ot={padding:`${at} ${tt}`},Gt={...Ot,backgroundColor:"var(--_mp-color-surface-container)"},Jt=G,Qt=$.length+(Kt?1:0),Ut=Boolean(Le)||Dt&&!Kt,Zt=Ke||Dt||Boolean(Le),ea=se||Ee||void 0!==pe,ta=fe||Dt,aa=(...e)=>e.filter(Boolean).join(" ");return t("div",{"data-mp-size":Oe,"data-mp-variant":We,className:aa("mp-data-table rounded-mp-md flex flex-col",p(We,Be),Ve),style:{...u(Ge),...He},...qe,children:[ea?t("div",{className:aa("mp-data-table__toolbar flex flex-wrap items-center gap-2",Ye?.toolbar),style:{padding:`${at} ${tt}`},children:[se?e(i,{size:Oe,value:it,onChange:e=>{void 0===ie&&st(e),Et(1),de?.(e)},label:me??et.search,startIcon:e(o,{icon:m,size:C[Oe]}),className:"mp-data-table__search min-w-0 flex-1"}):e("div",{className:"min-w-0 flex-1"}),pe,Ee?e(n,{size:Oe,variant:"text",color:Ge,onClick:()=>{const e=$.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),a=Mt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):H(e,t.row))),n=V([t,...a],{escapeFormulas:Ae});De?De(n):K(n,$e,"text/csv;charset=utf-8")},startIcon:e(o,{icon:c,size:C[Oe]}),children:Ue.download}):null]}):null,e("div",{className:"mp-data-table__scroll min-h-0 flex-1 overflow-auto",children:t("table",{className:aa("text-mp-on-surface w-full text-start",_[Oe],Ye?.table),style:{borderCollapse:"collapse",...we?{tableLayout:"fixed",minWidth:$.reduce((e,t)=>e+Vt(t),Kt?Y[Oe]:0)}:void 0},children:[Z?e("caption",{className:`text-mp-on-surface-variant ${j}`,style:{...Ot,textAlign:"start"},children:Z}):null,t("colgroup",{children:[Kt?e("col",{style:{width:Y[Oe]}}):null,$.map(t=>e("col",{style:we||void 0!==gt[t.key]||void 0!==t.width?{width:Vt(t)}:void 0},t.key))]}),e("thead",{className:Ye?.head,children:t("tr",{children:[Kt?e("th",{scope:"col",className:aa("whitespace-nowrap",Re&&"sticky top-0 z-20"),style:Gt,children:e(r,{size:Oe,color:Ge,checked:Xt,indeterminate:Tt>0&&!Xt,onCheckedChange:()=>{const e=new Set(Ft);At(Xt?[...kt].filter(t=>!e.has(t)):[...new Set([...kt,...Ft])])},label:e("span",{className:z,children:Ue.selectAll}),disabled:!It||0===Ft.length})}):null,$.map(a=>{const n=a.sortable??ae,r=(l=a.key,ot.findIndex(e=>e.key===l));var l;const s=-1===r?void 0:ot[r],i=a.resizable??we,c=a.align??"start";return t("th",{scope:"col","aria-sort":n?void 0===s?"none":"asc"===s.direction?"ascending":"descending":void 0,className:aa("text-mp-on-surface-variant relative whitespace-nowrap",M[Oe],Re&&"sticky top-0 z-10"),style:{...Gt,textAlign:c},children:[n?t("button",{type:"button",className:aa(q,"end"===c&&"justify-end","center"===c&&"justify-center"),onClick:e=>((e,t)=>{const a=W(ot,e,t&&"multiple"===ne);void 0===re&&rt(a),le?.(a)})(a.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:a.label??a.key}),e(o,{icon:d,size:C[Oe]-6,className:aa("shrink-0 transition-[rotate,opacity]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",void 0===s?"opacity-0 group-hover/sort:opacity-38":"text-mp-primary opacity-100","desc"===s?.direction&&"rotate-180")}),ot.length>1&&-1!==r?e("span",{className:"text-mp-primary shrink-0 tabular-nums",children:r+1}):null]}):a.label??a.key,i?e("button",{type:"button","aria-label":Ue.resize,className:O,onPointerDown:e=>((e,t)=>{const a=t.currentTarget;try{a.setPointerCapture(t.pointerId)}catch{}a.dataset.dragging="true";const n=document.body.style.userSelect;Ht.current=n,document.body.style.userSelect="none";const r=t.clientX,o=Vt(e),l="rtl"===getComputedStyle(a).direction?-1:1,s=Math.max(D,e.minWidth??D);let i=null,c=0;const d=()=>{c=0,null!==i&&($t({...gt,[e.key]:i}),i=null)},m=e=>{i=Math.max(s,Math.round(o+(e.clientX-r)*l)),0===c&&(c=requestAnimationFrame(d))},u=()=>{cancelAnimationFrame(c),d(),a.removeEventListener("pointermove",m),a.removeEventListener("pointerup",u),a.removeEventListener("pointercancel",u),delete a.dataset.dragging,null!==Ht.current&&(document.body.style.userSelect=Ht.current,Ht.current=null)};a.addEventListener("pointermove",m),a.addEventListener("pointerup",u),a.addEventListener("pointercancel",u)})(a,e),onDoubleClick:()=>qt(a),onKeyDown:e=>{const t=e.shiftKey?32:8;"ArrowRight"===e.key?(e.preventDefault(),Yt(a,t)):"ArrowLeft"===e.key?(e.preventDefault(),Yt(a,-t)):"Home"===e.key&&(e.preventDefault(),qt(a))}}):null]},a.key)})]})}),e("tbody",{children:0===Lt.length?e("tr",{className:P,style:Jt,children:e("td",{colSpan:Qt,className:"text-mp-on-surface-variant",style:{padding:`2rem ${tt}`,textAlign:"center"},children:ee??Ze.empty})}):Lt.map((t,a)=>e(Q,{entry:t,index:a,at:Pt.start+a,chosen:kt.has(t.key),headers:$,striped:Ie,lit:Zt,pressable:Dt||Boolean(Le),selectable:Dt,tabStop:Ut,ticks:Kt,rowClassName:Ye?.row,cellClassName:Ye?.cell,padX:tt,padY:at,size:Oe,color:Ge,selectLabel:Ue.selectRow,onPress:Bt},t.key))})]})}),ta?t("div",{className:aa("mp-data-table__footer border-mp-outline-variant flex flex-wrap items-center gap-3","text-mp-on-surface-variant border-t",j,Ye?.footer),style:{padding:`${at} ${tt}`},children:[e("span",{className:"mp-data-table__count",children:v(Ue.total,{total:String(Mt.length)})}),kt.size>0?e("span",{className:"mp-data-table__selected text-mp-primary",children:v(Ue.selected,{count:String(kt.size)})}):null,e("span",{className:"flex-1"}),fe&&ke.length>0?e(s,{size:"xs",label:Ue.perPage,floatingLabel:!1,value:ft,onValueChange:e=>(e=>{void 0===be&&pt(e),Et(1),xe?.(e)})(Number(e)),items:ke.map(e=>({value:e})),className:"mp-data-table__page-size",style:{minWidth:"9.5rem"}}):null,fe?e(l,{size:"xs",color:Ge,count:Pt.pages,page:Pt.page,onPageChange:Et,locale:Qe}):null]}):null]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{MPButton as n}from"../button/MPButton.js";import{MPCheckbox as r}from"../checkbox/MPCheckbox.js";import{MPIcon as o}from"../icon/MPIcon.js";import{MPPagination as l}from"../pagination/MPPagination.js";import{MPSelect as s}from"../select/MPSelect.js";import{MPTextField as i}from"../text-field/MPTextField.js";import{ArrowDownIcon as c,ArrowUpIcon as d,SearchIcon as m}from"../../constants/icons.js";import{accentSlots as u}from"../../internal/accent.js";import{containerSurface as p}from"../../internal/elevation.js";import{useMPColor as f,useMPDensity as h,useMPSize as y}from"../../internal/config.js";import{useMPLocale as g,useMPMessages as b}from"../../internal/locale.js";import{fillMessage as v}from"../../internal/i18n.js";import{checkServerLocale as x,intlLocale as k}from"../../internal/intl.js";import{DATA_TABLE as w}from"../../internal/messages/data-table.js";import{TABLE as N}from"../../internal/messages/table.js";import{TRANSFER as S}from"../../internal/messages/transfer.js";import{CONTROL_ICON as C,META_TEXT as j}from"../../internal/scale.js";import{VISUALLY_HIDDEN as z}from"../../internal/visually-hidden.js";import{CELL_TEXT as _,HEAD_TEXT as M,ROW as P,cellPadX as L,cellPadY as E,drawableCell as $}from"../../internal/table.js";import{DEFAULT_COLUMN_WIDTH as A,MIN_COLUMN_WIDTH as D,compareValues as I,downloadText as K,keysBetween as R,nextSort as W,pageBounds as B,searchHaystack as F,searchText as T,sortRows as X,toCsv as V}from"../../internal/data-table.js";function H(e,t){return e.value?e.value(t):t[e.key]}const Y={xs:36,sm:40,md:48,lg:52,xl:60},q=/*@__PURE__*/["group/sort -m-1 flex w-full cursor-pointer items-center gap-1 rounded-mp-xs p-1","appearance-none border-0 bg-transparent text-inherit text-start [font:inherit]","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","hover:text-mp-on-surface","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),O=/*@__PURE__*/["mp-data-table__resize absolute inset-y-0 end-0 z-10 w-2 translate-x-1/2 rtl:-translate-x-1/2","cursor-col-resize touch-none select-none appearance-none border-0 bg-transparent p-0","after:absolute after:inset-y-1 after:start-1/2 after:w-px after:bg-transparent","after:transition-[background-color] after:duration-(--mp-sys-motion-duration-short4)","hover:after:bg-mp-primary data-dragging:after:bg-mp-primary","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-solid outline-none"].join(" "),G={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};function J({entry:a,index:n,at:o,chosen:l,headers:s,striped:i,lit:c,pressable:d,selectable:m,tabStop:u,ticks:p,rowClassName:f,cellClassName:h,padX:y,padY:g,size:b,color:v,selectLabel:x,onPress:k}){const w={padding:`${g} ${y}`};return t("tr",{"aria-selected":m?l:void 0,className:[P,f,i&&o%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",l?"[--_mp-row:var(--_mp-color-secondary-container)]":"",c&&!l?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",d&&"cursor-pointer",u&&["outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" ")].filter(Boolean).join(" "),style:G,tabIndex:u?0:void 0,onClick:e=>k(a,n,e.shiftKey),onKeyDown:u?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),k(a,n,e.shiftKey))}:void 0,children:[p?e("td",{style:w,children:e(r,{size:b,color:v,checked:l,onCheckedChange:()=>k(a,n,!1),label:e("span",{className:z,children:x})})}):null,s.map(t=>e("td",{className:h,style:{...w,textAlign:t.align??"start"},children:t.render?t.render(a.row,o):$(H(t,a.row))},t.key))]})}const Q=/*@__PURE__*/a.memo(J);export function MPDataTable({headers:$,items:J,getRowKey:U,caption:Z,empty:ee,locale:te,sortable:ae=!1,sortMode:ne="single",sort:re,defaultSort:oe,onSortChange:le,searchable:se=!1,search:ie,defaultSearch:ce,onSearchChange:de,searchLabel:me,filter:ue,toolbar:pe,paged:fe=!1,page:he,defaultPage:ye,onPageChange:ge,pageSize:be,defaultPageSize:ve,onPageSizeChange:xe,pageSizeOptions:ke=[10,25,50,100],resizable:we=!1,columnWidths:Ne,defaultColumnWidths:Se,onColumnWidthsChange:Ce,selectionMode:je="none",selected:ze,defaultSelected:_e,onSelectedChange:Me,checkboxes:Pe=!1,onRowClick:Le,exportable:Ee=!1,exportFileName:$e="table.csv",exportEscapeFormulas:Ae=!0,onExport:De,striped:Ie=!1,hoverable:Ke=!1,stickyHeader:Re=!1,variant:We="outlined",elevation:Be,size:Fe,color:Te,density:Xe,className:Ve,style:He,classNames:Ye,...qe}){const Oe=y(Fe),Ge=f(Te),Je=h(Xe),Qe=g(te),Ue=b(w,Qe),Ze=b(N,Qe),et=b(S,Qe),tt=L(Oe,Je),at=E(Oe,Je),[nt,rt]=a.useState(()=>[...oe??[]]),ot=re??nt,[lt,st]=a.useState(ce??""),it=ie??lt,[ct,dt]=a.useState(ye??1),mt=he??ct,[ut,pt]=a.useState(ve??25),ft=be??ut,[ht,yt]=a.useState(()=>({...Se})),gt=Ne??ht,[bt,vt]=a.useState(()=>[..._e??[]]),xt=ze??bt,kt=a.useMemo(()=>new Set(xt.map(e=>String(e))),[xt]),wt=a.useRef(null),Nt=a.useMemo(()=>J.map((e,t)=>{const a=U?U(e,t):t;return{row:e,identity:a,key:String(a),origin:t}}),[J,U]),St=T(it.trim()),Ct=""!==St,jt=a.useMemo(()=>{if(!Ct)return null;const e=$.filter(e=>!1!==e.searchable);return Nt.map(t=>F(e.map(e=>H(e,t.row))))},[Nt,$,Ct]),zt=a.useMemo(()=>{const e=""!==St&&jt?Nt.filter((e,t)=>jt[t].includes(St)):Nt;return ue?e.filter(e=>ue(e.row,e.origin)):e},[Nt,jt,St,ue]),_t=a.useMemo(()=>(x(Qe),new Intl.Collator(k(Qe),{numeric:!0,sensitivity:"base"})),[Qe]),Mt=a.useMemo(()=>X(zt,ot,(e,t)=>{const a=$.find(t=>t.key===e);if(!a)return null;const n="desc"===t,r=a.compare;if(r)return(e,t)=>n?-r(e.row,t.row):r(e.row,t.row);const o=new Map,l=e=>(o.has(e)||o.set(e,H(a,e.row)),o.get(e));return(e,t)=>I(l(e),l(t),_t,n)}),[zt,ot,$,_t]),Pt=B(Mt.length,mt,ft),Lt=fe?Mt.slice(Pt.start,Pt.end):Mt,Et=e=>{void 0===he&&dt(e),ge?.(e)},$t=e=>{void 0===Ne&&yt(e),Ce?.(e)},At=e=>{const t=new Set(e),a=[],n=[];for(const e of Nt)t.has(e.key)&&(n.push(e.identity),a.push(e.row));void 0===ze&&vt(n),Me?.(n,a)},Dt="none"!==je,It="multiple"===je,Kt=Pe&&Dt,Rt=(e,t,a)=>{if(Le?.(e.row,Pt.start+t),Dt){if(!It)return At(kt.has(e.key)?[]:[e.key]),void(wt.current=e.key);if(a&&null!==wt.current){const t=R(Lt.map(e=>e.key),wt.current,e.key);return void At([...new Set([...kt,...t])])}wt.current=e.key,At(kt.has(e.key)?[...kt].filter(t=>t!==e.key):[...kt,e.key])}},Wt=a.useRef(Rt);Wt.current=Rt;const Bt=a.useCallback((e,t,a)=>Wt.current(e,t,a),[]),Ft=Lt.map(e=>e.key),Tt=Ft.filter(e=>kt.has(e)).length,Xt=Ft.length>0&&Tt===Ft.length,Vt=e=>gt[e.key]??e.width??A,Ht=a.useRef(null);a.useEffect(()=>()=>{null!==Ht.current&&(document.body.style.userSelect=Ht.current,Ht.current=null)},[]);const Yt=(e,t)=>{const a=Math.max(D,e.minWidth??D);$t({...gt,[e.key]:Math.max(a,Vt(e)+t)})},qt=e=>{const t={...gt};delete t[e.key],$t(t)},Ot={padding:`${at} ${tt}`},Gt={...Ot,backgroundColor:"var(--_mp-color-surface-container)"},Jt=G,Qt=$.length+(Kt?1:0),Ut=Boolean(Le)||Dt&&!Kt,Zt=Ke||Dt||Boolean(Le),ea=se||Ee||void 0!==pe,ta=fe||Dt,aa=(...e)=>e.filter(Boolean).join(" ");return t("div",{"data-mp-size":Oe,"data-mp-variant":We,className:aa("mp-data-table rounded-mp-md flex flex-col",p(We,Be),Ve),style:{...u(Ge),...He},...qe,children:[ea?t("div",{className:aa("mp-data-table__toolbar flex flex-wrap items-center gap-2",Ye?.toolbar),style:{padding:`${at} ${tt}`},children:[se?e(i,{size:Oe,value:it,onChange:e=>{void 0===ie&&st(e),Et(1),de?.(e)},label:me??et.search,startIcon:e(o,{icon:m,size:C[Oe]}),className:"mp-data-table__search min-w-0 flex-1"}):e("div",{className:"min-w-0 flex-1"}),pe,Ee?e(n,{size:Oe,variant:"text",color:Ge,onClick:()=>{const e=$.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),a=Mt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):H(e,t.row))),n=V([t,...a],{escapeFormulas:Ae});De?De(n):K(n,$e,"text/csv;charset=utf-8")},startIcon:e(o,{icon:c,size:C[Oe]}),children:Ue.download}):null]}):null,e("div",{className:"mp-data-table__scroll min-h-0 flex-1 overflow-auto",children:t("table",{className:aa("text-mp-on-surface w-full text-start",_[Oe],Ye?.table),style:{borderCollapse:"collapse",...we?{tableLayout:"fixed",minWidth:$.reduce((e,t)=>e+Vt(t),Kt?Y[Oe]:0)}:void 0},children:[Z?e("caption",{className:`text-mp-on-surface-variant ${j}`,style:{...Ot,textAlign:"start"},children:Z}):null,t("colgroup",{children:[Kt?e("col",{style:{width:Y[Oe]}}):null,$.map(t=>e("col",{style:we||void 0!==gt[t.key]||void 0!==t.width?{width:Vt(t)}:void 0},t.key))]}),e("thead",{className:Ye?.head,children:t("tr",{children:[Kt?e("th",{scope:"col",className:aa("whitespace-nowrap",Re&&"sticky top-0 z-20"),style:Gt,children:e(r,{size:Oe,color:Ge,checked:Xt,indeterminate:Tt>0&&!Xt,onCheckedChange:()=>{const e=new Set(Ft);At(Xt?[...kt].filter(t=>!e.has(t)):[...new Set([...kt,...Ft])])},label:e("span",{className:z,children:Ue.selectAll}),disabled:!It||0===Ft.length})}):null,$.map(a=>{const n=a.sortable??ae,r=(l=a.key,ot.findIndex(e=>e.key===l));var l;const s=-1===r?void 0:ot[r],i=a.resizable??we,c=a.align??"start";return t("th",{scope:"col","aria-sort":n?void 0===s?"none":"asc"===s.direction?"ascending":"descending":void 0,className:aa("text-mp-on-surface-variant relative whitespace-nowrap",M[Oe],Re&&"sticky top-0 z-10"),style:{...Gt,textAlign:c},children:[n?t("button",{type:"button",className:aa(q,"end"===c&&"justify-end","center"===c&&"justify-center"),onClick:e=>((e,t)=>{const a=W(ot,e,t&&"multiple"===ne);void 0===re&&rt(a),le?.(a)})(a.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:a.label??a.key}),e(o,{icon:d,size:C[Oe]-6,className:aa("shrink-0 transition-[rotate,opacity]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",void 0===s?"opacity-0 group-hover/sort:opacity-38":"text-(--_mp-accent) opacity-100","desc"===s?.direction&&"rotate-180")}),ot.length>1&&-1!==r?e("span",{className:"text-mp-primary shrink-0 tabular-nums",children:r+1}):null]}):a.label??a.key,i?e("button",{type:"button","aria-label":Ue.resize,className:O,onPointerDown:e=>((e,t)=>{const a=t.currentTarget;try{a.setPointerCapture(t.pointerId)}catch{}a.dataset.dragging="true";const n=document.body.style.userSelect;Ht.current=n,document.body.style.userSelect="none";const r=t.clientX,o=Vt(e),l="rtl"===getComputedStyle(a).direction?-1:1,s=Math.max(D,e.minWidth??D);let i=null,c=0;const d=()=>{c=0,null!==i&&($t({...gt,[e.key]:i}),i=null)},m=e=>{i=Math.max(s,Math.round(o+(e.clientX-r)*l)),0===c&&(c=requestAnimationFrame(d))},u=()=>{cancelAnimationFrame(c),d(),a.removeEventListener("pointermove",m),a.removeEventListener("pointerup",u),a.removeEventListener("pointercancel",u),delete a.dataset.dragging,null!==Ht.current&&(document.body.style.userSelect=Ht.current,Ht.current=null)};a.addEventListener("pointermove",m),a.addEventListener("pointerup",u),a.addEventListener("pointercancel",u)})(a,e),onDoubleClick:()=>qt(a),onKeyDown:e=>{const t=e.shiftKey?32:8;"ArrowRight"===e.key?(e.preventDefault(),Yt(a,t)):"ArrowLeft"===e.key?(e.preventDefault(),Yt(a,-t)):"Home"===e.key&&(e.preventDefault(),qt(a))}}):null]},a.key)})]})}),e("tbody",{children:0===Lt.length?e("tr",{className:P,style:Jt,children:e("td",{colSpan:Qt,className:"text-mp-on-surface-variant",style:{padding:`2rem ${tt}`,textAlign:"center"},children:ee??Ze.empty})}):Lt.map((t,a)=>e(Q,{entry:t,index:a,at:Pt.start+a,chosen:kt.has(t.key),headers:$,striped:Ie,lit:Zt,pressable:Dt||Boolean(Le),selectable:Dt,tabStop:Ut,ticks:Kt,rowClassName:Ye?.row,cellClassName:Ye?.cell,padX:tt,padY:at,size:Oe,color:Ge,selectLabel:Ue.selectRow,onPress:Bt},t.key))})]})}),ta?t("div",{className:aa("mp-data-table__footer border-mp-outline-variant flex flex-wrap items-center gap-3","text-mp-on-surface-variant border-t",j,Ye?.footer),style:{padding:`${at} ${tt}`},children:[e("span",{className:"mp-data-table__count",children:v(Ue.total,{total:String(Mt.length)})}),kt.size>0?e("span",{className:"mp-data-table__selected text-mp-primary",children:v(Ue.selected,{count:String(kt.size)})}):null,e("span",{className:"flex-1"}),fe&&ke.length>0?e(s,{size:"xs",label:Ue.perPage,floatingLabel:!1,value:ft,onValueChange:e=>(e=>{void 0===be&&pt(e),Et(1),xe?.(e)})(Number(e)),items:ke.map(e=>({value:e})),className:"mp-data-table__page-size",style:{minWidth:"9.5rem"}}):null,fe?e(l,{size:"xs",color:Ge,count:Pt.pages,page:Pt.page,onPageChange:Et,locale:Qe}):null]}):null]})}

package/dist/components/date-picker/MPDatePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{MPButton as t}from"../button/MPButton.js";import{MPIcon as n}from"../icon/MPIcon.js";import{CalendarIcon as l}from"../../constants/icons.js";import{Calendar as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as u}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{formatDate as h,isUnitOutside as y,TO_ISO as j,isValidDate as b,localeWeekStart as g,mergeDateAndTime as v,startOfMonth as x,startOfUnit as D,today as k,withPlaceholder as C}from"../../internal/date.js";import{useMPColor as O,useMPSize as S}from"../../internal/config.js";const z={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}};export const MPDatePicker=/*@__PURE__*/o.forwardRef(function({value:M,defaultValue:P,onValueChange:w,open:I,defaultOpen:V,onOpenChange:B,precision:R="day",defaultMonth:E,minDate:F,maxDate:N,shouldDisableDate:T,locale:Y,weekStartsOn:q,format:A,placeholder:G,clearable:H=!1,showTodayButton:J=!0,closeOnSelect:K=!0,labels:L,name:Q,size:U,color:W,readOnly:X=!1,disabled:Z=!1,startIcon:$,..._},ee){const ae=S(U),oe=O(W),te=d(Y),ne=u(p,te,L),le=q??g(te),re=A??z[R],[ie,se]=o.useState(P??null),ce=void 0!==M?M:ie,[me,de]=o.useState(V??!1),ue=I??me,[pe,fe]=o.useState(()=>x(b(ce)?ce:E??k()));o.useEffect(()=>{ue&&fe(x(b(ce)?ce:E??k()))},[ue]);const he=e=>{e&&(X||Z)||(void 0===I&&de(e),B?.(e))},ye=e=>{void 0===M&&se(e),w?.(e)},je=e=>{const a=D(e,R),o=b(ce)?v(a,ce):a;ye(o),fe(x(o)),K&&he(!1)},be=k(),ge=y(be,R,F,N)||"day"===R&&(T?.(be)??!1),ve="year"===R?ne.thisYear:"month"===R?ne.thisMonth:ne.today,xe=J||H,De=C(m(te,re),G);return e(c,{..._,slug:"date-picker",size:ae,color:oe,readOnly:X,disabled:Z,triggerRef:ee,startIcon:void 0===$?e(n,{icon:l,size:f[ae]}):$,display:b(ce)?h(ce,te,re):G??"",samples:De,empty:!b(ce),clearable:H,onClear:()=>ye(null),open:ue,onOpenChange:he,labels:ne,hiddenValues:Q?[{name:Q,value:b(ce)?j[R](ce):""}]:void 0,children:a("div",{className:"flex flex-col "+(xe?"gap-1.5":""),children:[e(r,{size:ae,color:oe,locale:te,weekStartsOn:le,month:pe,onMonthChange:fe,selected:[ce],onSelect:je,minDate:F,maxDate:N,shouldDisableDate:T,precision:R,labels:ne,autoFocus:!0}),xe?a(s,{children:[H?e(t,{variant:"text",size:i[ae],color:oe,onClick:()=>{ye(null),he(!1)},children:ne.clear}):null,J?e(t,{variant:"text",size:i[ae],color:oe,disabled:ge,onClick:()=>je(be),children:ve}):null]}):null]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{MPButton as t}from"../button/MPButton.js";import{MPIcon as n}from"../icon/MPIcon.js";import{CalendarIcon as l}from"../../constants/icons.js";import{Calendar as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as u}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{formatDate as h,isUnitOutside as y,TO_ISO as j,isValidDate as b,localeWeekStart as g,mergeDateAndTime as v,startOfMonth as x,startOfUnit as D,today as k,withPlaceholder as C}from"../../internal/date.js";import{useMPColor as O,useMPSize as S}from"../../internal/config.js";const z={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}};export const MPDatePicker=/*@__PURE__*/o.forwardRef(function({value:M,defaultValue:P,onValueChange:w,open:V,defaultOpen:I,onOpenChange:B,precision:R="day",defaultMonth:E,minDate:F,maxDate:N,shouldDisableDate:T,locale:Y,weekStartsOn:q,format:A,placeholder:G,clearable:H=!1,showTodayButton:J=!0,closeOnSelect:K=!0,labels:L,name:Q,size:U,color:W,readOnly:X=!1,disabled:Z=!1,startIcon:$,..._},ee){const ae=S(U),oe=O(W),te=d(Y),ne=u(p,te,L),le=q??g(te),re=A??z[R],[ie,se]=o.useState(P??null),ce=void 0!==M?M:ie,[me,de]=o.useState(I??!1),ue=V??me,[pe,fe]=o.useState(()=>x(b(ce)?ce:E??k()));o.useEffect(()=>{ue&&fe(x(b(ce)?ce:E??k()))},[ue]);const he=e=>{e&&(X||Z)||(void 0===V&&de(e),B?.(e))},ye=e=>{void 0===M&&se(e),w?.(e)},je=e=>{const a=D(e,R),o=b(ce)?v(a,ce):a;ye(o),fe(x(o)),K&&he(!1)},be=k(),ge=y(be,R,F,N)||"day"===R&&(T?.(be)??!1),ve="year"===R?ne.thisYear:"month"===R?ne.thisMonth:ne.today,xe=J||H,De=C(m(te,re),G),ke=b(ce)?j[R](ce):"";return e(c,{..._,slug:"date-picker",size:ae,color:oe,name:Q,locale:te,readOnly:X,disabled:Z,triggerRef:ee,startIcon:void 0===$?e(n,{icon:l,size:f[ae]}):$,display:b(ce)?h(ce,te,re):G??"",samples:De,empty:!b(ce),clearable:H,onClear:()=>ye(null),open:ue,onOpenChange:he,labels:ne,formValue:ke,hiddenValues:Q?[{name:Q,value:ke}]:void 0,children:a("div",{className:"flex flex-col "+(xe?"gap-1.5":""),children:[e(r,{size:ae,color:oe,locale:te,weekStartsOn:le,month:pe,onMonthChange:fe,selected:[ce],onSelect:je,minDate:F,maxDate:N,shouldDisableDate:T,precision:R,labels:ne,autoFocus:!0}),xe?a(s,{children:[H?e(t,{variant:"text",size:i[ae],color:oe,onClick:()=>{ye(null),he(!1)},children:ne.clear}):null,J?e(t,{variant:"text",size:i[ae],color:oe,disabled:ge,onClick:()=>je(be),children:ve}):null]}):null]})})});

package/dist/components/date-range-picker/MPDateRangePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPButton as a}from"../button/MPButton.js";import{MPIcon as t}from"../icon/MPIcon.js";import{ArrowRightIcon as r,CalendarIcon as s}from"../../constants/icons.js";import{Calendar as o}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as c,MPPickerShell as u,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{MPWidthSizer as h}from"../../internal/WidthSizer.js";import{CONTROL_ICON as v,META_TEXT as x}from"../../internal/scale.js";import{addMonths as g,compareDay as j,formatDate as b,isValidDate as w,localeWeekStart as N,startOfDay as S,startOfMonth as C,toISODate as D,today as k,withPlaceholder as y}from"../../internal/date.js";import{useMPColor as O,useMPSize as P}from"../../internal/config.js";const z={start:null,end:null};export const MPDateRangePicker=/*@__PURE__*/n.forwardRef(function({value:M,defaultValue:B,onValueChange:I,open:R,defaultOpen:V,onOpenChange:E,defaultMonth:F,minDate:W,maxDate:$,shouldDisableDate:_,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:L,clearable:Q=!1,closeOnSelect:T=!0,labels:U,name:X,size:Y,color:Z,readOnly:ee=!1,disabled:le=!1,startIcon:ne,...ae},te){const re=P(Y),se=O(Z),oe=d(q),ie=p(f,oe,U),ce=A??N(oe),[ue,me]=n.useState(B??z),de=void 0!==M?M??z:ue,pe=w(de.start)?de.start:null,fe=w(de.end)?de.end:null,[he,ve]=n.useState(V??!1),xe=R??he,[ge,je]=n.useState(null),[be,we]=n.useState(null),[Ne,Se]=n.useState(()=>C(pe??F??k()));n.useEffect(()=>{xe?Se(C(pe??F??k())):(je(null),we(null))},[xe]);const Ce=e=>{e&&(ee||le)||(void 0===R&&ve(e),E?.(e))},De=e=>{void 0===M&&me(e),I?.(e)},ke=ge??pe,ye=null!==ge?be:fe,Oe=(l,n)=>w(l)?b(l,oe,G):e("span",{className:"text-mp-on-surface-variant",children:n??""}),Pe=n.useMemo(()=>g(Ne,1),[Ne]),ze=2===H,Me=m(oe,G),Be=null!==ge?ie.end:null===pe?ie.start:null,Ie={size:re,color:se,locale:oe,weekStartsOn:ce,selected:[pe,fe,ge],rangeStart:ke,rangeEnd:ye,onSelect:e=>{const l=S(e);if(null===ge)return je(l),we(l),void De({start:l,end:null});const[n,a]=j(l,ge)<0?[l,ge]:[ge,l];je(null),we(null),De({start:n,end:a}),T&&Ce(!1)},onPreviewChange:e=>{null!==ge&&we(e??ge)},minDate:W,maxDate:$,shouldDisableDate:_,showOutsideDays:!1,labels:ie};return e(u,{...ae,slug:"date-range-picker",size:re,color:se,readOnly:ee,disabled:le,triggerRef:te,startIcon:void 0===ne?e(t,{icon:s,size:v[re]}):ne,display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(pe,J)}),e(h,{samples:y(Me,J)})]}),e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center rtl:rotate-180",children:e(t,{icon:r,size:v[re]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(fe,K)}),e(h,{samples:y(Me,K)})]})]}),empty:null===pe&&null===fe,clearable:Q,onClear:()=>De(z),open:xe,onOpenChange:Ce,labels:ie,hiddenValues:X?[{name:X,value:pe?D(pe):""},{name:X,value:fe?D(fe):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:"flex items-stretch gap-2",children:[L&&L.length>0?e("div",{className:"border-mp-outline-variant flex max-h-[calc(var(--_mp-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5",children:L.map((l,n)=>e(a,{variant:"text",size:i[re],color:se,className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;je(null),we(null),De(l),w(l.start)&&Se(C(l.start)),T&&Ce(!1)})(l),children:l.label},n))}):null,e(o,{...Ie,month:Ne,onMonthChange:Se,showNextButton:!ze,autoFocus:!0}),ze?e(o,{...Ie,month:Pe,onMonthChange:e=>Se(g(e,-1)),showPreviousButton:!1}):null]}),Q||null!==Be?l(c,{children:[null!==Be?e("span",{className:`text-mp-on-surface-variant me-auto ${x}`,children:Be}):null,Q?e(a,{variant:"text",size:i[re],color:se,onClick:()=>{je(null),we(null),De(z),Ce(!1)},children:ie.clear}):null]}):null]})})});
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPButton as a}from"../button/MPButton.js";import{MPIcon as t}from"../icon/MPIcon.js";import{ArrowRightIcon as r,CalendarIcon as s}from"../../constants/icons.js";import{Calendar as o}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as c,MPPickerShell as u,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{MPWidthSizer as h}from"../../internal/WidthSizer.js";import{CONTROL_ICON as v,META_TEXT as x}from"../../internal/scale.js";import{addMonths as g,compareDay as j,formatDate as b,isValidDate as w,localeWeekStart as N,startOfDay as S,startOfMonth as C,toISODate as D,today as k,withPlaceholder as y}from"../../internal/date.js";import{useMPColor as O,useMPSize as P}from"../../internal/config.js";const z={start:null,end:null};export const MPDateRangePicker=/*@__PURE__*/n.forwardRef(function({value:M,defaultValue:V,onValueChange:B,open:I,defaultOpen:R,onOpenChange:$,defaultMonth:E,minDate:F,maxDate:W,shouldDisableDate:_,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:L,clearable:Q=!1,closeOnSelect:T=!0,labels:U,name:X,size:Y,color:Z,readOnly:ee=!1,disabled:le=!1,startIcon:ne,...ae},te){const re=P(Y),se=O(Z),oe=d(q),ie=p(f,oe,U),ce=A??N(oe),[ue,me]=n.useState(V??z),de=void 0!==M?M??z:ue,pe=w(de.start)?de.start:null,fe=w(de.end)?de.end:null,[he,ve]=n.useState(R??!1),xe=I??he,[ge,je]=n.useState(null),[be,we]=n.useState(null),[Ne,Se]=n.useState(()=>C(pe??E??k()));n.useEffect(()=>{xe?Se(C(pe??E??k())):(je(null),we(null))},[xe]);const Ce=e=>{e&&(ee||le)||(void 0===I&&ve(e),$?.(e))},De=e=>{void 0===M&&me(e),B?.(e)},ke=ge??pe,ye=null!==ge?be:fe,Oe=(l,n)=>w(l)?b(l,oe,G):e("span",{className:"text-mp-on-surface-variant",children:n??""}),Pe=n.useMemo(()=>g(Ne,1),[Ne]),ze=2===H,Me=m(oe,G),Ve=null!==ge?ie.end:null===pe?ie.start:null,Be={size:re,color:se,locale:oe,weekStartsOn:ce,selected:[pe,fe,ge],rangeStart:ke,rangeEnd:ye,onSelect:e=>{const l=S(e);if(null===ge)return je(l),we(l),void De({start:l,end:null});const[n,a]=j(l,ge)<0?[l,ge]:[ge,l];je(null),we(null),De({start:n,end:a}),T&&Ce(!1)},onPreviewChange:e=>{null!==ge&&we(e??ge)},minDate:F,maxDate:W,shouldDisableDate:_,showOutsideDays:!1,labels:ie};return e(u,{...ae,slug:"date-range-picker",size:re,color:se,name:X,locale:oe,readOnly:ee,disabled:le,triggerRef:te,startIcon:void 0===ne?e(t,{icon:s,size:v[re]}):ne,display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(pe,J)}),e(h,{samples:y(Me,J)})]}),e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center rtl:rotate-180",children:e(t,{icon:r,size:v[re]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(fe,K)}),e(h,{samples:y(Me,K)})]})]}),empty:null===pe&&null===fe,clearable:Q,onClear:()=>De(z),open:xe,onOpenChange:Ce,labels:ie,formValue:pe&&fe?`${D(pe)}/${D(fe)}`:"",hiddenValues:X?[{name:X,value:pe?D(pe):""},{name:X,value:fe?D(fe):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:"flex items-stretch gap-2",children:[L&&L.length>0?e("div",{className:"border-mp-outline-variant flex max-h-[calc(var(--_mp-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5",children:L.map((l,n)=>e(a,{variant:"text",size:i[re],color:se,className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;je(null),we(null),De(l),w(l.start)&&Se(C(l.start)),T&&Ce(!1)})(l),children:l.label},n))}):null,e(o,{...Be,month:Ne,onMonthChange:Se,showNextButton:!ze,autoFocus:!0}),ze?e(o,{...Be,month:Pe,onMonthChange:e=>Se(g(e,-1)),showPreviousButton:!1}):null]}),Q||null!==Ve?l(c,{children:[null!==Ve?e("span",{className:`text-mp-on-surface-variant me-auto ${x}`,children:Ve}):null,Q?e(a,{variant:"text",size:i[re],color:se,onClick:()=>{je(null),we(null),De(z),Ce(!1)},children:ie.clear}):null]}):null]})})});

package/dist/components/date-time-picker/MPDateTimePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as n}from"../icon/MPIcon.js";import{CalendarIcon as a}from"../../constants/icons.js";import{Calendar as s,MPTimeGrid as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerDivider as c,MPPickerFooter as m,MPPickerShell as d,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as p,useMPMessages as h}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{CONTROL_ICON as S}from"../../internal/scale.js";import{formatDate as g,isDayOutside as b,isHour12 as j,isValidDate as v,localeWeekStart as D,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as T}from"../../internal/date.js";import{useMPColor as M,useMPSize as P}from"../../internal/config.js";export const MPDateTimePicker=/*@__PURE__*/t.forwardRef(function({value:I,defaultValue:N,onValueChange:V,open:B,defaultOpen:R,onOpenChange:E,defaultMonth:F,minDate:q,maxDate:A,shouldDisableDate:G,shouldDisableTime:H,locale:J,weekStartsOn:K,format:L,hour12:Q,showSeconds:U=!1,hourStep:W=1,minuteStep:X=1,secondStep:Y=1,placeholder:Z,clearable:$=!1,showNowButton:_=!0,closeOnSelect:ee=!1,labels:oe,name:te,size:le,color:ne,readOnly:ae=!1,disabled:se=!1,startIcon:re,...ie},ce){const me=P(le),de=M(ne),ue=p(J),pe=h(f,ue,oe),he=K??D(ue),fe=Q??j(ue),[Se,ge]=t.useState(N??null),be=void 0!==I?I:Se,[je,ve]=t.useState(R??!1),De=B??je,[xe,Ce]=t.useState(()=>k(v(be)?be:F??O()));t.useEffect(()=>{De&&Ce(k(v(be)?be:F??O()))},[De]);const ke=e=>{e&&(ae||se)||(void 0===B&&ve(e),E?.(e))},we=e=>{void 0===I&&ge(e),V?.(e)},ze=t.useCallback((e,o)=>{const[t,l]=w(o,e),n=C(e).getTime();return!!(v(q)&&n+1e3*l<q.getTime())||(!!(v(A)&&n+1e3*t>A.getTime())||(H?.(e,o)??!1))},[q,A,H]),Oe=L??{dateStyle:"medium",timeStyle:"short",hour12:fe},ye=new Date,Te=T(ye,{seconds:U?ye.getSeconds():0}),Me=b(Te,q,A)||(G?.(Te)??!1)||ze(Te,"second"),Pe=y(u(ue,Oe),Z);return e(d,{...ie,slug:"date-time-picker",size:me,color:de,readOnly:ae,disabled:se,triggerRef:ce,startIcon:void 0===re?e(n,{icon:a,size:S[me]}):re,display:v(be)?g(be,ue,Oe):Z??"",samples:Pe,empty:!v(be),clearable:$,onClear:()=>we(null),open:De,onOpenChange:ke,labels:pe,hiddenValues:te?[{name:te,value:v(be)?z(be,U):""}]:void 0,children:o("div",{className:"flex flex-col gap-1.5",children:[o("div",{className:"flex items-stretch gap-2",children:[e(s,{size:me,color:de,locale:ue,weekStartsOn:he,month:xe,onMonthChange:Ce,selected:[be],onSelect:e=>{const o=v(be)?x(e,be):C(e);we(o),Ce(k(o)),ee&&ke(!1)},minDate:q,maxDate:A,shouldDisableDate:G,labels:pe,autoFocus:!0}),e(c,{}),e(r,{size:me,locale:ue,value:v(be)?be:null,referenceDate:v(be)?be:O(),onChange:we,hour12:fe,showSeconds:U,hourStep:W,minuteStep:X,secondStep:Y,shouldDisableTime:ze,labels:pe})]}),o(m,{children:[$?e(l,{variant:"text",size:i[me],color:de,onClick:()=>{we(null),ke(!1)},children:pe.clear}):null,_?e(l,{variant:"text",size:i[me],color:de,disabled:Me,onClick:()=>{we(Te),Ce(k(Te))},children:pe.now}):null,e(l,{variant:"filled",size:i[me],color:de,onClick:()=>ke(!1),children:pe.done})]})]})})});
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as a}from"../icon/MPIcon.js";import{CalendarIcon as n}from"../../constants/icons.js";import{Calendar as s,MPTimeGrid as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerDivider as c,MPPickerFooter as m,MPPickerShell as d,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as p,useMPMessages as h}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{CONTROL_ICON as S}from"../../internal/scale.js";import{formatDate as g,isDayOutside as b,isHour12 as j,isValidDate as v,localeWeekStart as D,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as T}from"../../internal/date.js";import{useMPColor as M,useMPSize as P}from"../../internal/config.js";export const MPDateTimePicker=/*@__PURE__*/t.forwardRef(function({value:V,defaultValue:I,onValueChange:N,open:B,defaultOpen:R,onOpenChange:E,defaultMonth:F,minDate:q,maxDate:A,shouldDisableDate:G,shouldDisableTime:H,locale:J,weekStartsOn:K,format:L,hour12:Q,showSeconds:U=!1,hourStep:W=1,minuteStep:X=1,secondStep:Y=1,placeholder:Z,clearable:$=!1,showNowButton:_=!0,closeOnSelect:ee=!1,labels:oe,name:te,size:le,color:ae,readOnly:ne=!1,disabled:se=!1,startIcon:re,...ie},ce){const me=P(le),de=M(ae),ue=p(J),pe=h(f,ue,oe),he=K??D(ue),fe=Q??j(ue),[Se,ge]=t.useState(I??null),be=void 0!==V?V:Se,[je,ve]=t.useState(R??!1),De=B??je,[xe,Ce]=t.useState(()=>k(v(be)?be:F??O()));t.useEffect(()=>{De&&Ce(k(v(be)?be:F??O()))},[De]);const ke=e=>{e&&(ne||se)||(void 0===B&&ve(e),E?.(e))},we=e=>{void 0===V&&ge(e),N?.(e)},ze=t.useCallback((e,o)=>{const[t,l]=w(o,e),a=C(e).getTime();return!!(v(q)&&a+1e3*l<q.getTime())||(!!(v(A)&&a+1e3*t>A.getTime())||(H?.(e,o)??!1))},[q,A,H]),Oe=L??{dateStyle:"medium",timeStyle:"short",hour12:fe},ye=new Date,Te=T(ye,{seconds:U?ye.getSeconds():0}),Me=b(Te,q,A)||(G?.(Te)??!1)||ze(Te,"second"),Pe=y(u(ue,Oe),Z),Ve=v(be)?z(be,U):"";return e(d,{...ie,slug:"date-time-picker",size:me,color:de,name:te,locale:ue,readOnly:ne,disabled:se,triggerRef:ce,startIcon:void 0===re?e(a,{icon:n,size:S[me]}):re,display:v(be)?g(be,ue,Oe):Z??"",samples:Pe,empty:!v(be),clearable:$,onClear:()=>we(null),open:De,onOpenChange:ke,labels:pe,formValue:Ve,hiddenValues:te?[{name:te,value:Ve}]:void 0,children:o("div",{className:"flex flex-col gap-1.5",children:[o("div",{className:"flex items-stretch gap-2",children:[e(s,{size:me,color:de,locale:ue,weekStartsOn:he,month:xe,onMonthChange:Ce,selected:[be],onSelect:e=>{const o=v(be)?x(e,be):C(e);we(o),Ce(k(o)),ee&&ke(!1)},minDate:q,maxDate:A,shouldDisableDate:G,labels:pe,autoFocus:!0}),e(c,{}),e(r,{size:me,locale:ue,value:v(be)?be:null,referenceDate:v(be)?be:O(),onChange:we,hour12:fe,showSeconds:U,hourStep:W,minuteStep:X,secondStep:Y,shouldDisableTime:ze,labels:pe})]}),o(m,{children:[$?e(l,{variant:"text",size:i[me],color:de,onClick:()=>{we(null),ke(!1)},children:pe.clear}):null,_?e(l,{variant:"text",size:i[me],color:de,disabled:Me,onClick:()=>{we(Te),Ce(k(Te))},children:pe.now}):null,e(l,{variant:"filled",size:i[me],color:de,onClick:()=>ke(!1),children:pe.done})]})]})})});

package/dist/components/dialog/MPDialog.d.ts

@@ -62,8 +62,9 @@ export interface MPDialogProps extends MPControlEventProps<HTMLElement> {
      *
      * Defaults to whatever `fullScreen` is, which is MD3's own split: a basic
      * dialog is answered by its actions and has no ×, while a full-screen dialog
-     * carries one at the start of its top bar because there is no scrim left to
-     * click. Set it explicitly to disagree with either.
+     * carries one because there is no scrim left to click. MD3 puts it at the start
+     * of a top bar; here it is at the end of the header, where a basic dialog's
+     * goes. Set it explicitly to disagree with either default.
      */
     showClose?: boolean;
     /**

package/dist/components/floating-action-button/MPFloatingActionButton.d.ts

@@ -104,7 +104,9 @@ export interface MPFloatingActionButtonProps extends Omit<React.ComponentPropsWi
  * ## Why there is no speed dial
  *
  * A floating button that fans out into three or four smaller ones is a Material
- * **2** pattern, and MD3 dropped it. It was never good: the actions are
+ * **2** pattern, and MD3 dropped it. M3 Expressive brought back a FAB menu in
+ * 2025, but that is a column of two to six labelled actions rather than a fan
+ * of discs, and this library does not draw one either. The fan was never good: the actions are
  * unlabelled discs in the corner of the screen, they cover the content the
  * reader was looking at, and a fan of buttons that claims `role="menu"` without
  * the keyboard contract of one is worse for a keyboard reader than something

package/dist/components/floating-bottom-navigation/MPFloatingBottomNavigation.d.ts

@@ -42,6 +42,11 @@ export interface MPFloatingBottomNavigationProps extends Omit<React.ComponentPro
      *
      * A container's ladder, so the sheet is never dyed — what carries the accent
      * is the one destination that is current.
+     *
+     * Naming one draws that surface as any container draws it, flat unless it is
+     * `elevated`. Leaving it unset is what gives the bar its default `elevation`
+     * of 3, and setting `elevation` as well takes the tone from the level, as it
+     * does everywhere else.
      * @default 'filled'
      */
     variant?: MPVariant;
@@ -52,7 +57,11 @@ export interface MPFloatingBottomNavigationProps extends Omit<React.ComponentPro
      * bar is *defined* by not being part of the page: a lozenge lying flat over
      * the content it is floating above reads as a mistake rather than as a
      * decision.
-     * @default 3
+     *
+     * The default applies only while `variant` is unset. A level brings its own
+     * tone, so a default level would leave a chosen `variant` with nothing to
+     * paint.
+     * @default 3, unless `variant` is set
      */
     elevation?: MPElevation;
     /**

package/dist/components/floating-bottom-navigation/MPFloatingBottomNavigation.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{MPBottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{containerSurface as i}from"../../internal/elevation.js";import{cssLength as l}from"../../internal/length.js";import{useMPSize as s}from"../../internal/config.js";const n={xs:"h-12",sm:"h-14",md:"h-16",lg:"h-18",xl:"h-20"},r={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},m={xs:"gap-0.5",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},f={static:"mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--_mp-nav-offset) z-40 mx-auto w-fit"};export const MPFloatingBottomNavigation=/*@__PURE__*/t.forwardRef(function({value:p,defaultValue:d=null,onValueChange:x,position:u="fixed",offset:c=16,labels:b="selected",variant:g="filled",elevation:v=3,size:h,safeArea:j=!0,disabled:w=!1,label:z,render:y,className:_,style:k,children:N,...B},C){const M=s(h),[P,V]=t.useState(d),A=void 0!==p,F=A?p:P,R=t.useCallback(e=>{A||V(e),x?.(e)},[A,x]),S=t.useMemo(()=>({value:F??null,change:R,size:M,labels:b,disabled:w,floating:!0}),[F,R,M,b,w]),$=l(c);return a({render:y??e("nav",{}),ref:C,props:{"aria-label":z,"data-mp-size":M,"data-mp-variant":g,className:["mp-floating-bottom-navigation rounded-mp-full box-border flex max-w-full min-w-0","items-stretch",n[M],r[M],m[M],i(g,v),"text-mp-on-surface",f[u],_??""].filter(Boolean).join(" "),style:{"--_mp-nav-offset":j?`calc(${$} + env(safe-area-inset-bottom))`:$,...k},children:e(o.Provider,{value:S,children:N}),...B}})});
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{MPBottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{containerSurface as i}from"../../internal/elevation.js";import{cssLength as l}from"../../internal/length.js";import{useMPSize as s}from"../../internal/config.js";const n={xs:"h-12",sm:"h-14",md:"h-16",lg:"h-18",xl:"h-20"},r={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},m={xs:"gap-0.5",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},f={static:"mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--_mp-nav-offset) z-40 mx-auto w-fit"};export const MPFloatingBottomNavigation=/*@__PURE__*/t.forwardRef(function({value:p,defaultValue:d=null,onValueChange:x,position:u="fixed",offset:c=16,labels:v="selected",variant:b,elevation:g,size:h,safeArea:j=!0,disabled:w=!1,label:z,render:y,className:_,style:k,children:N,...B},C){const M=s(h),P=b??"filled",V=g??(void 0===b?3:void 0),[A,F]=t.useState(d),R=void 0!==p,S=R?p:A,$=t.useCallback(e=>{R||F(e),x?.(e)},[R,x]),q=t.useMemo(()=>({value:S??null,change:$,size:M,labels:v,disabled:w,floating:!0}),[S,$,M,v,w]),D=l(c);return a({render:y??e("nav",{}),ref:C,props:{"aria-label":z,"data-mp-size":M,"data-mp-variant":P,className:["mp-floating-bottom-navigation rounded-mp-full box-border flex max-w-full min-w-0","items-stretch",n[M],r[M],m[M],i(P,V),"text-mp-on-surface",f[u],_??""].filter(Boolean).join(" "),style:{"--_mp-nav-offset":j?`calc(${D} + env(safe-area-inset-bottom))`:D,...k},children:e(o.Provider,{value:q,children:N}),...B}})});