material-plus-ui 1.6.0 → 1.7.0

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPControlEventProps, MPStyleProps } from '../../types.js';
+import type { MPControlEventProps, MPSlots, MPStyleProps } from '../../types.js';
 /**
  * What a select's value may be.
  *
@@ -23,7 +23,8 @@ export interface MPSelectProps extends MPStyleProps, MPControlEventProps<HTMLBut
      * The options, as data. There is no `<MPSelect.Option>` to compose: what a
      * caller has is almost always an array already, and the list has to be
      * available to the trigger before the popup has ever been opened — otherwise
-     * a closed select can only show its raw value.   *
+     * a closed select can only show its raw value.
+     *
      * ## How long a list this holds
      *
      * Every row is rendered, and there is no windowing. That is the right default
@@ -37,9 +38,19 @@ export interface MPSelectProps extends MPStyleProps, MPControlEventProps<HTMLBut
      * slice.
      */
     items: readonly MPSelectOption[];
-    /** The chosen value. Use with `onValueChange` for a controlled select. */
+    /**
+     * The chosen value. Use with `onValueChange` for a controlled select.
+     *
+     * **Nothing chosen is `null`**, and it is worth saying out loud because the
+     * near miss is quiet. A value with no matching entry in `items` has no label
+     * to show, so the trigger draws the value itself: a form holding `0` for "not
+     * picked yet" sits there reading `0`. That is the right answer for a value
+     * that is real and whose row has not arrived yet — the alternative is a field
+     * that says nothing about a value it is holding and will submit — but it is
+     * not the answer anybody wants for a sentinel.
+     */
     value?: MPSelectValue | null;
-    /** The value chosen at the start, for an uncontrolled select. */
+    /** The value chosen at the start, for an uncontrolled select. `null` is none. */
     defaultValue?: MPSelectValue | null;
     /** Called with the newly chosen value — a value, not an event. */
     onValueChange?: (value: MPSelectValue | null) => void;
@@ -97,6 +108,18 @@ export interface MPSelectProps extends MPStyleProps, MPControlEventProps<HTMLBut
      */
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * A class name for a part `className` cannot reach.
+     *
+     * The list renders at the end of `<body>`, outside the element `className`
+     * lands on — no selector written against the root will ever find it — and the
+     * options are drawn from `options` rather than written by the caller, so there
+     * is no element of theirs to put a class on.
+     *
+     * - `popup` — the sheet the options are drawn on.
+     * - `item` — every option in it.
+     */
+    classNames?: MPSlots<'popup' | 'item'>;
 }
 /**
  * A Material Design select.

package/dist/components/select/MPSelect.js

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

package/dist/components/show/MPShow.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPWindowClass } from '../../types.js';
+export interface MPShowProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The narrowest window this is shown in. `from="medium"` is 600dp up, so it is
+     * absent on a phone and present everywhere else.
+     */
+    from?: MPWindowClass;
+    /**
+     * The class this stops being shown at, exclusive. `until="expanded"` is every
+     * window under 840dp — the mirror of `from="expanded"`, and the two of them
+     * over the same class cover every width exactly once.
+     */
+    until?: MPWindowClass;
+    /**
+     * One class and no other, which is `from` and `until` said together:
+     * `only="medium"` is 600dp to 839dp.
+     *
+     * `from` and `until` still override their own half, so
+     * `only="medium" until="large"` is 600dp to 1199dp. That is the same range
+     * `from="medium" until="large"` is, and which of the two to write is a
+     * question of which one reads like the intention.
+     */
+    only?: MPWindowClass;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<td />}` — for the places where a bare `<div>` would not be allowed
+     * to sit. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content at some window sizes and not others.
+ *
+ * ```tsx
+ * <MPShow from="expanded">
+ *   <MPSidebar>{nav}</MPSidebar>
+ * </MPShow>
+ * <MPShow until="expanded">
+ *   <MPBottomNavigation items={nav} />
+ * </MPShow>
+ * ```
+ *
+ * The two halves of that pair are exclusive and exhaustive over the same class,
+ * which is the shape worth writing: one of them is on screen at every width, and
+ * never both.
+ *
+ * ## It is `display: none`, not a condition
+ *
+ * Both branches are rendered and one of them is hidden by CSS, which is a
+ * deliberate trade rather than a shortcut. A media query is resolved by the
+ * browser before it paints anything, including on the server's markup — so the
+ * first frame is already right. [useMPWindowClass](../../guide/hooks) answers
+ * the same question in JavaScript, and cannot answer it until the page has
+ * hydrated: the first paint is a guess and the correction is a second render,
+ * which on a phone is a desktop navigation drawn and thrown away.
+ *
+ * So this is the one to reach for when what changes is *which* of two
+ * arrangements is on screen. The hook is the one to reach for when the subtree
+ * that is not on screen is expensive — a chart, a map, a table of a thousand
+ * rows — because hidden is not unmounted: it is built, laid out and skipped at
+ * paint, and its effects run.
+ *
+ * `display: none` also takes the content off the accessibility tree, which is
+ * the point. A screen reader on a narrow window reads the compact arrangement
+ * and not both of them.
+ *
+ * ## It is not a box
+ *
+ * The wrapper is `display: contents` while it is shown, so it takes no part in
+ * the layout: an `MPShow` inside a flex row makes its children the flex items,
+ * exactly as if it were not there. That declaration is written at zero
+ * specificity, so a `className` of your own that sets a display wins over it
+ * without a fight — and the hiding, which is a real class, still wins over both.
+ */
+export declare const MPShow: React.ForwardRefExoticComponent<MPShowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/show/MPShow.js

@@ -0,0 +1,2 @@
+"use client";
+import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{HIDDEN_BELOW as o,HIDDEN_FROM as i}from"../../internal/visibility.js";import{WINDOW_CLASSES as n}from"../../internal/window-class.js";export const MPShow=/*@__PURE__*/r.forwardRef(function({from:r,until:s,only:t,render:a,className:l,children:m,...f},c){const d=r??t,p=s??(t?(u=t,n[n.indexOf(u)+1]):void 0);var u;return e({render:a,ref:c,props:{className:["mp-show",d?o[d]:"",p?i[p]:"",l??""].filter(Boolean).join(" "),children:m,...f}})});

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

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

package/dist/components/show/index.js

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

package/dist/components/sidebar/MPSidebar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type MPPageCollapse, type MPSidebarSide } from '../../internal/page-layout.js';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPDensity, MPSize, MPElevation, MPVariant } from '../../types.js';
 export type { MPPageCollapse, MPSidebarSide } from '../../internal/page-layout.js';
 export interface MPSidebarProps extends Omit<React.ComponentPropsWithoutRef<'aside'>, 'title'> {
     /**
@@ -100,6 +100,16 @@ export interface MPSidebarProps extends Omit<React.ComponentPropsWithoutRef<'asi
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the bar is lifted, on MD3's own scale.
+     *
+     * It moves the tone as well as the shadow — see `MPElevation`. A bar's
+     * `elevated` is level 2 rather than 1, because a bar sits over the page's
+     * content rather than in it; an explicit level says exactly what it says.
+     *
+     * Left unset, `variant` decides.
+     */
+    elevation?: MPElevation;
     /**
      * The column's default width and the air around its content. `md` is 360px,
      * which is MD3's own navigation drawer and the same rung
@@ -107,6 +117,15 @@ export interface MPSidebarProps extends Omit<React.ComponentPropsWithoutRef<'asi
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of the air around the column's content.
+     *
+     * The width is `size`'s and does not move — a navigation column narrower than
+     * its labels is a column of truncated labels — so what this tightens is the
+     * gutter, which is what a sidebar full of destinations is competing for.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * The gutter, and the air above and below the content.
      * @default true

package/dist/components/sidebar/MPSidebar.js

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

package/dist/components/sparkline/MPSparkline.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { MPChartCurve, MPColor, MPSize } from '../../types.js';
+/** What the series is drawn as. */
+export type MPSparklineShape = 'line' | 'area' | 'bar';
+export interface MPSparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * The series, oldest first. A `null` is a gap — a point nothing was measured
+     * at — and it breaks the line rather than being joined across.
+     */
+    data: readonly (number | null)[];
+    /** @default 'line' */
+    shape?: MPSparklineShape;
+    /** How the line between two points is drawn. @default 'linear' */
+    curve?: MPChartCurve;
+    /**
+     * Marks the newest point.
+     *
+     * On by default, and it is most of what makes a sparkline readable: the whole
+     * shape is context for the last value, and without the dot a reader has to
+     * work out which end is now.
+     * @default true
+     */
+    endDot?: boolean;
+    /** The value the area or the bars are measured from. @default the series' floor */
+    baseline?: number;
+    /** Pins the bottom of the scale, so two sparklines can be compared. */
+    min?: number;
+    /** And the top. */
+    max?: number;
+    /** How wide. A number is pixels; a string is any CSS length. @default '100%' */
+    width?: number | string;
+    /** How tall. Defaults to the `size` ladder. */
+    height?: number;
+    /**
+     * Which accent family the mark reads, or any CSS colour. Left out, it takes
+     * the first slot of the chart palette.
+     */
+    color?: MPColor | (string & {});
+    /**
+     * What the shape says, for a reader who cannot see it.
+     *
+     * Left out, the component writes one from the numbers — how many points, the
+     * range they cover, and which way it ended. See the note on the component for
+     * why that is the whole of its accessibility rather than a hover layer.
+     */
+    label?: string;
+    /** Which language the generated label is written in. */
+    locale?: string;
+    /** @default 'md' */
+    size?: MPSize;
+}
+/**
+ * A series as a mark, with no axes and nothing to read a value against.
+ *
+ * ```tsx
+ * <MPSparkline data={[12, 15, 14, 19, 22, 21, 27]} />
+ * ```
+ *
+ * It answers one question — which way has this been going — and it answers it in
+ * the space of a word. That is the whole of its job: put it beside the number it
+ * is the history of, in a table cell, in a list row, in an
+ * [MPStatistic](statistic)'s `trend`.
+ *
+ * ## It has no hover layer, on purpose
+ *
+ * Every other chart in this library ships one, because a chart is something a
+ * reader interrogates. A sparkline is not. It is thirty pixels tall, it has no
+ * axis to read a value against, and a floating card over a mark that size covers
+ * the mark. A reader who needs the numbers needs [MPLineChart](line-chart), and
+ * a reader who needs one number has it in the figure this is sitting under.
+ *
+ * What it does have is a **sentence**. The accessible name says the shape in
+ * words — how many points, the range, and which way it ended — so the thing a
+ * sighted reader gets from the outline is a thing every reader gets. That is the
+ * relief channel, and it is a better one than a tooltip nobody can hover on a
+ * phone.
+ *
+ * ## The line is quiet and the end is not
+ *
+ * The stroke takes a faded step of its colour and the end dot takes the whole
+ * of it. The history is context; the last value is the point. Drawn at one
+ * weight throughout, a sparkline is a shape with no emphasis in it, and the eye
+ * has to find the end for itself.
+ */
+export declare const MPSparkline: React.ForwardRefExoticComponent<MPSparklineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sparkline/MPSparkline.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{useMPLocale as i,useMPMessages as l}from"../../internal/locale.js";import{useMPSize as o}from"../../internal/config.js";import{fillMessage as a}from"../../internal/i18n.js";import{SPARKLINE as s}from"../../internal/messages/sparkline.js";import{TABLE as m}from"../../internal/messages/table.js";import{cssLength as c}from"../../internal/length.js";import{areaPath as p,barPath as f,extentOf as h,linePath as u,seriesColor as d}from"../../internal/chart.js";const g={xs:16,sm:24,md:32,lg:44,xl:56},b={xs:1.25,sm:1.5,md:2,lg:2.5,xl:3};export const MPSparkline=/*@__PURE__*/n.forwardRef(function({data:k,shape:x="line",curve:y="linear",endDot:j=!0,baseline:v,min:w,max:M,width:N="100%",height:F,color:L,label:$,locale:z,size:B,className:E,style:R,...W},A){const D=o(B),I=i(z),P=l(s,I),S=l(m,I),q=F??g[D],C=b[D],G=d(0,L),H=100,J=q,K="bar"===x?0:C/2,O=h(k,w,M),Q=O.max-O.min,T=e=>J-K-(e-O.min)/Q*(J-2*K),U=k.length>1?H/(k.length-1):0,V=k.map((e,t)=>null!==e&&Number.isFinite(e)?{x:k.length>1?t*U:50,y:T(e)}:null),X=v??O.min,Y=[...V].reverse().find(e=>null!==e)??null,Z=n.useMemo(()=>{if(void 0!==$)return $;const e=k.filter(e=>null!==e&&Number.isFinite(e));if(0===e.length)return S.empty;const t=new Intl.NumberFormat(I);return a(P.summary,{count:t.format(e.length),first:t.format(e[0]),last:t.format(e[e.length-1])})},[$,k,I,P.summary,S.empty]);return e("div",{ref:A,"data-mp-size":D,className:["mp-sparkline block",E??""].filter(Boolean).join(" "),style:{width:c(N),...R},...W,children:r("svg",{role:"img","aria-label":Z,viewBox:`0 0 100 ${J}`,preserveAspectRatio:"none",width:"100%",height:q,style:{display:"block",overflow:"visible"},children:["bar"===x?k.map((t,r)=>{if(null===t||!Number.isFinite(t))return null;const n=H/k.length,i=Math.max(.5,n-2),l=T(X),o=T(t);return e("path",{d:f(r*n+(n-i)/2,Math.min(o,l),i,Math.abs(l-o),i/3,t>=X?"top":"bottom"),fill:G,opacity:j&&r===k.length-1?1:.55},r)}):r(t,{children:["area"===x?e("path",{d:p(V,T(X),y),fill:G,opacity:.16}):null,e("path",{d:u(V,y),fill:"none",stroke:G,strokeWidth:C,strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke",opacity:.55})]}),j&&Y&&"bar"!==x?e("path",{d:`M${Y.x} ${Y.y}h0`,stroke:G,strokeWidth:2.5*C,strokeLinecap:"round",vectorEffect:"non-scaling-stroke"}):null]})})});

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

@@ -0,0 +1,2 @@
+export { MPSparkline } from './MPSparkline.js';
+export type { MPSparklineProps, MPSparklineShape } from './MPSparkline.js';

package/dist/components/sparkline/index.js

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

package/dist/components/spoiler/MPSpoiler.d.ts

@@ -102,5 +102,17 @@ export interface MPSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div
  * three matter: a spoiler that can be defeated by Ctrl-A is not a spoiler, and
  * `aria-hidden` alone would leave a keyboard reader tabbing into a link their
  * screen reader has been told is not there.
+ *
+ * ## The box holds still
+ *
+ * Two separate things were moving it, and both of them are the same mistake in
+ * different clothes: something that is drawn in one state and not in the other,
+ * without the state that lacks it paying for the space.
+ *
+ * A `reversible` sheet's way back out is **reserved** rather than mounted on
+ * reveal, so pressing the button does not push the rest of the page down by the
+ * height of the row that replaces it. And the cover is a **grid item** rather
+ * than an `absolute` box, so a cover taller than what it covers makes the sheet
+ * taller instead of being cut off by it.
  */
 export declare const MPSpoiler: React.ForwardRefExoticComponent<MPSpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/MPSpoiler.js

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

package/dist/components/stack/MPStack.d.ts

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import type { MPAnimateTimeline, MPAnimateTrigger, MPAnimation, MPEasing, MPSize } from '../../types.js';
+/**
+ * Which way the pile grows.
+ *
+ * `diagonal` is a **horizontal** flow with a per-item vertical offset, not a
+ * flow of its own: see the note on `drop` for why the second axis cannot be
+ * left to the layout.
+ */
+export type MPStackDirection = 'horizontal' | 'vertical' | 'diagonal';
+/** Which end of the pile is nearest the reader. */
+export type MPStackFront = 'first' | 'last';
+export interface MPStackProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the pile grows.
+     * @default 'horizontal'
+     */
+    direction?: MPStackDirection;
+    /**
+     * How far each item sits under the one before it, along the axis the pile
+     * flows on — a number in pixels, or any CSS length. Left out it is a fraction
+     * of `size`.
+     */
+    overlap?: number | string;
+    /**
+     * How far each item sits below the one before it on `diagonal`, which is the
+     * axis the flow is **not** on. Defaults to `overlap`, which is a shallow fan.
+     *
+     * It is a prop rather than an angle because a true 45° would need the items'
+     * own width, and a library does not have it: the horizontal advance is
+     * `width − overlap`, and `width` is whatever the caller put in. Nothing here
+     * pretends otherwise.
+     */
+    drop?: number | string;
+    /**
+     * Sets the default `overlap`, and nothing else. It is not passed to the
+     * items — a `Stack` does not know what they are.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** How many items are drawn before the rest become an `overflow`. */
+    max?: number;
+    /**
+     * How many there are altogether, when the stack was handed only the first few.
+     * Without it the count is worked out from the children, which is right only
+     * when all of them were passed.
+     */
+    total?: number;
+    /**
+     * The last item in the pile, built from the number that did not fit.
+     *
+     * A **function** rather than a node, because the count is the whole of what
+     * that item has to say: `(hidden) => <MPAvatar initials={`+${hidden}`} />`.
+     * Left out, nothing is drawn for the remainder.
+     */
+    overflow?: (hidden: number) => React.ReactNode;
+    /**
+     * Which end of the pile is nearest the reader.
+     * @default 'first'
+     */
+    front?: MPStackFront;
+    /**
+     * What each item is scaled by relative to the one in front of it. `1` is no
+     * change; `0.94` puts the fifth card at about three quarters.
+     *
+     * It changes what is drawn and not what is measured, so the spacing of the
+     * pile is the same either way — a scaled card does not pull the ones behind
+     * it closer.
+     * @default 1
+     */
+    scaleStep?: number;
+    /**
+     * The same, for opacity. `0.85` fades a deck into the page behind it.
+     * @default 1
+     */
+    opacityStep?: number;
+    /**
+     * Draws a hairline of the page's own `surface` around each item, so two
+     * shapes of similar tone have an edge between them.
+     *
+     * On the **item** rather than on the wrapper around it, because a ring has to
+     * follow the shape it is tracing and a square ring around a circular avatar
+     * is worse than none. That is a fixed-depth selector, so it reaches a child
+     * this stack put there and not one wrapped in something else — see the
+     * component's documentation.
+     * @default false
+     */
+    ring?: boolean;
+    /**
+     * An entrance for each item, from the same six the `MPAnimate*` components
+     * run. Left out, nothing is animated.
+     */
+    transition?: MPAnimation;
+    /** How long one item's entrance takes, in milliseconds. */
+    duration?: number;
+    /** How long before the first one starts, in milliseconds. */
+    delay?: number;
+    /** Which Material easing curve the entrance runs on. */
+    easing?: MPEasing;
+    /**
+     * How long after one item the next one starts, in milliseconds.
+     * @default 60
+     */
+    stagger?: number;
+    /** How much longer each item takes than the one before it, in milliseconds. */
+    durationStep?: number;
+    /** Deals the pile from the back. */
+    reverse?: boolean;
+    /**
+     * What starts the entrance.
+     * @default 'mount'
+     */
+    trigger?: MPAnimateTrigger;
+    /** Runs it, when `trigger` is `manual`. */
+    play?: boolean;
+    /**
+     * With `trigger="visible"`, whether it runs only the first time.
+     * @default true
+     */
+    once?: boolean;
+    /**
+     * With `trigger="visible"`, how much has to be on screen to count.
+     * @default 0.2
+     */
+    threshold?: number;
+    /** Holds the entrance where it is. */
+    paused?: boolean;
+    /** Hands the entrance to the reader's scrolling. */
+    timeline?: MPAnimateTimeline;
+    /** Which part of the travel through the scrollport the entrance covers. */
+    range?: string;
+    /** The things in the pile. */
+    children?: React.ReactNode;
+}
+/**
+ * Things laid over each other in a pile.
+ *
+ * A stack of avatars, a deck of cards, a heap of documents, a run of overlapped
+ * thumbnails: one component, because "several of these, overlapping" is one
+ * idea and the things being overlapped are not this component's business.
+ *
+ * ## Why the overlap is a margin and not a `translate`
+ *
+ * This is the detail nearly every implementation of this gets wrong. Move the
+ * items with `translate` and each one still **occupies its full width**: the
+ * box stays the size of one item plus the full width of all the others, the
+ * pile is drawn outside it, and everything after the stack on the page is laid
+ * out against a measurement that is wrong. It cannot go in a sentence.
+ *
+ * A negative margin takes the space back, so the box is exactly the size of
+ * what is drawn. At 32px items with a 10px overlap, five of them come to
+ * 120×32 horizontally, 32×120 vertically and 120×72 on the diagonal — the box
+ * fits the content in all three.
+ *
+ * The margin is **logical**, so a horizontal pile overlaps the other way under
+ * RTL without being asked to.
+ *
+ * ## Why `diagonal` is a horizontal flow
+ *
+ * Because a flow only overlaps items on the axis it flows along. The other axis
+ * has to be written per item, as a margin multiplied by the item's index — a
+ * fixed `margin-block-start` in a row does not accumulate, it puts every item
+ * at the same offset and the fan does not happen.
+ *
+ * ## What it does not do
+ *
+ * It does not know what the items **are**, which is the price of being general.
+ * There is no `variant`, no `color` and no `shape` to set once for the pile:
+ * `size` here picks the default overlap and is not passed on. Set the ones your
+ * items share on [MPConfigProvider](../../guide/config), and the rest per item.
+ *
+ * ## Two layers per item, and why
+ *
+ * Each item is wrapped twice. The outer span carries the offset, the `z-index`
+ * and the entrance; the inner one carries the static `scale` and `opacity` that
+ * make depth. They are separate because the `grow` and `zoom` keyframes
+ * animate the individual `scale` property — an animation and a resting depth on
+ * the same element means the keyframe wins and the depth is gone the moment
+ * something is animated.
+ *
+ * The wrappers are also what keeps this off the children. Cloning them to add a
+ * `className` would require every child to accept one, and a face wrapped in a
+ * router's link or a tooltip trigger has no obligation to.
+ *
+ * `ring` is the one exception, and it is honest about the cost: it is a
+ * fixed-depth descendant selector, so it lands on the element this stack
+ * wrapped. A child that is itself a wrapper gets the ring on the wrapper.
+ *
+ * ## What `transition` costs
+ *
+ * 2.1 kB gzipped against the 0.9 kB the layout alone would come to, because it
+ * reads the same effect tables `MPAnimateFade` does. It is here rather than
+ * composed from outside because the items are inside wrappers this component
+ * builds and nothing outside can reach them — but a stack of four faces with no
+ * `transition` is paying for six effects it will never run, and that is written
+ * into the documentation rather than left to be found.
+ */
+export declare const MPStack: React.ForwardRefExoticComponent<MPStackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stack/MPStack.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{ANIMATION_CLASS as a,ANIM_BASE as r,animationSlots as i,useAnimationRun as n}from"../../internal/animate.js";import{lengthValue as l}from"../../internal/animate.js";import{useMPSize as o}from"../../internal/config.js";const s={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPStack=/*@__PURE__*/t.forwardRef(function({direction:c="horizontal",overlap:m,drop:d,size:p,max:f,total:g,overflow:h,front:u="first",scaleStep:v=1,opacityStep:y=1,ring:x=!1,transition:S,duration:k,delay:j=0,easing:$,stagger:w=60,durationStep:z=0,reverse:N=!1,trigger:B="mount",play:M,once:_=!0,threshold:I=.2,paused:b,timeline:A,range:C,className:E,style:O,children:P,...R},V){const q=o(p),D=n({trigger:B,play:M,once:_,threshold:I,paused:b,infinite:!1}),F="view"===A?b?"paused":"running":D.state,G=t.Children.toArray(P),H=void 0===f?G:G.slice(0,Math.max(0,f)),J=g??G.length,K=Math.max(0,J-H.length),L=h&&K>0?h(K):null,Q=null===L?H:[...H,L],T=void 0===m?s[q]:l(m),U=void 0===d?T:l(d),W="vertical"===c?"flex-col":"flex-row",X=S?`${r} ${a[S]}`:"";return e("div",{ref:e=>{D.ref(e),"function"==typeof V?V(e):V&&(V.current=e)},"data-mp-size":q,"data-mp-direction":c,className:["mp-stack isolate inline-flex align-middle",W,"diagonal"===c?"items-start":"items-center",x?"ring-mp-surface [&>*>*>*]:ring-2":"",E??""].filter(Boolean).join(" "),style:{"--_mp-anim-state":F,...O},...D.handlers,...R,children:Q.map((a,r)=>{const n=N?Q.length-1-r:r,l="first"===u?r:Q.length-1-r;return e("span",{className:X,style:{zIndex:"first"===u?Q.length-r:r+1,...r>0&&"vertical"===c?{marginBlockStart:`calc(${T} * -1)`}:{},...r>0&&"vertical"!==c?{marginInlineStart:`calc(${T} * -1)`}:{},..."diagonal"===c?{marginBlockStart:`calc(${U} * ${r})`}:{},...S?i({effect:S,duration:k,delay:j+n*w,easing:$,repeat:1,durationOffset:n*z,timeline:A,range:C}):{}},children:e("span",{className:"mp-stack__item block",style:{scale:1===v?void 0:String(v**l),opacity:1===y?void 0:y**l},children:a})},t.isValidElement(a)?a.key??r:r)})})});

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

@@ -0,0 +1,2 @@
+export { MPStack } from './MPStack.js';
+export type { MPStackDirection, MPStackFront, MPStackProps } from './MPStack.js';

package/dist/components/stack/index.js

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