material-plus-ui 1.6.0 → 1.7.0

package/dist/components/bar-chart/MPBarChart.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/ChartFrame.js';
+import type { MPChartValueLabels } from '../../types.js';
+export interface MPBarChartProps extends CartesianChartProps {
+    /**
+     * Stacks the series into one bar per category instead of standing them side
+     * by side.
+     *
+     * Grouped compares the parts with each other; stacked compares the totals and
+     * shows what makes them up. Both cannot be true at once, and picking the
+     * wrong one is the most common way a bar chart answers a question nobody
+     * asked.
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * Turns the chart on its side, so the bars run left to right.
+     *
+     * The prop that long category names want: a horizontal bar gives each name a
+     * whole row rather than a slot the width of one bar, so nothing has to be cut
+     * or turned on its side to fit. `xAxis` is still the category axis and
+     * `yAxis` is still the value axis — the orientation changes the drawing, not
+     * what the data means.
+     * @default false
+     */
+    horizontal?: boolean;
+    /**
+     * Which values are written onto the bars.
+     * @default 'none'
+     */
+    valueLabels?: MPChartValueLabels;
+}
+/**
+ * A measured length per category — how much, next to how much else.
+ *
+ * ```tsx
+ * <MPBarChart
+ *   categories={['Search', 'Direct', 'Social', 'Mail']}
+ *   series={[{ name: 'Sessions', data: [4820, 3110, 1940, 860] }]}
+ * />
+ * ```
+ *
+ * It is the shape for a magnitude compared across a handful of named things.
+ * What a bar encodes is **length**, and length is the one visual channel a
+ * reader judges accurately, which is why a bar chart beats a pie for almost
+ * every comparison somebody actually has to make.
+ *
+ * ## The axis starts at zero and there is no prop to stop it
+ *
+ * A bar's length is proportional to its value only from a zero baseline. Crop
+ * the axis and a bar twice the height of its neighbour stands for a value five
+ * percent larger — which is not a smaller lie for being a common one, and it is
+ * told in the shape a reader trusts most.
+ *
+ * `yAxis={{ min }}` still moves the scale, because a caller who has said so has
+ * said so. It is the wrong tool for a set of values that are close together;
+ * the right one is [MPLineChart](line-chart), whose marks claim nothing about
+ * proportion.
+ *
+ * ## Grouped or stacked, never both
+ *
+ * Side by side compares the parts with each other. Stacked compares the totals
+ * and shows what makes them up. A stack's inner segments sit on a wobbly floor
+ * and cannot be compared by eye, so reach for it when the total is the point
+ * and for grouping when it is not.
+ *
+ * ## Turn it sideways for long names
+ *
+ * `horizontal` gives every category a row of its own, which is what a set of
+ * names like "Onboarding flow" needs. The alternative is labels cut to a slot
+ * the width of one bar, or an axis of words rotated forty-five degrees, which
+ * is unreadable at a glance and takes a band of the plot to be unreadable in.
+ */
+export declare function MPBarChart({ stacked, horizontal, valueLabels, ...frame }: MPBarChartProps): React.JSX.Element;

package/dist/components/bar-chart/MPBarChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{useMPLocale as n}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{BAR_BAND_RATIO as o,BAR_MAX_THICKNESS as i,BAR_RADIUS as u,CHART_FONT_SIZE as s,MARK_GAP as m,barPath as c,formatStatistic as h,textWidth as f,toValues as d}from"../../internal/chart.js";export function MPBarChart({stacked:x=!1,horizontal:p=!1,valueLabels:v="none",...b}){const y=a(b.size),M=n(b.locale),g=l.useMemo(()=>{const t=s[y];if("none"===v||x)return 0;if(!p)return t+8;return d(b.series).flat().reduce((e,l)=>null===l.value?e:Math.max(e,f(String(l.label??h(l.value,M,b.format,!0)),t)),0)+10},[v,x,p,y,M,b.series,b.format]);return t(r,{...b,inset:!1,stacked:x,horizontal:p,bandRatio:o,includeZero:!0,headroom:g,children:({plot:l,values:r,visible:n,colors:a,band:o,valuePx:h,categoryPx:f,zeroPx:d,hovered:b,activeIndex:M,format:g})=>{const j=r.reduce((t,e)=>Math.max(t,e.length),0),k=r.map((t,e)=>e).filter(t=>n[t]),z=x?o.band:o.band/Math.max(1,k.length),_=Math.max(1,Math.min(z-(x?0:m),i[y]));return e("g",{className:"mp-bar-chart__marks",children:[r.map((i,d)=>{if(!n[d])return null;const w=a[d],P=null!==b&&b!==d,A=k.indexOf(d);return e("g",{opacity:P?.25:1,children:[Array.from({length:j},(e,n)=>{const a=i[n]?.value??null;if(null===a)return null;let s=0,v=d;if(x){let t=0,e=0;for(const l of k){const o=r[l][n]?.value??null;null!==o&&(l===d&&(s=o>=0?t:e),o>=0?t+=o:e+=o,o>=0==a>=0&&(v=l))}}const b=h(s),y=h(a+(x?s:0)),g=x&&0!==s?b+(y>b?m:-m):b,j=Math.abs(y-g);if(j<=0||y>b!=y>g)return null;const P=(p?l.top:l.left)+f(n)-o.band/2+(x?0:A*z)+(z-_)/2,B=d!==v?"none":p?a>=0?"right":"left":a>=0?"top":"bottom",C=p?{x:Math.min(g,y),y:P,w:j,h:_}:{x:P,y:Math.min(g,y),w:_,h:j},S=M===n;return t("path",{d:c(C.x,C.y,C.w,C.h,u,B),fill:w,opacity:null===M||S?1:.55},n)}),"none"===v||x?null:i.map((e,r)=>{if(null===e.value)return null;const n=i.map(t=>t.value).filter(t=>null!==t);if(!("all"===v||"last"===v&&r===j-1||"extremes"===v&&(e.value===Math.min(...n)||e.value===Math.max(...n))))return null;const a=h(e.value),u=(p?l.top:l.left)+f(r)-o.band/2+A*z+z/2,m=e.value>=0?-6:6;return t("text",{x:p?a-m:u,y:p?u:a+m,textAnchor:p?e.value>=0?"start":"end":"middle",dominantBaseline:p?"central":"auto",fill:"var(--_mp-color-on-surface)",fontSize:s[y]-1,children:e.label??g(e.value)},r)})]},d)}),t("line",p?{x1:d,x2:d,y1:l.top,y2:l.top+l.height,stroke:"var(--_mp-color-outline)",strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:d,y2:d,stroke:"var(--_mp-color-outline)",strokeWidth:1})]})}})}

package/dist/components/bar-chart/index.d.ts

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

package/dist/components/bar-chart/index.js

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

package/dist/components/blockquote/MPBlockquote.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPSize, MPTransition, MPVariant } from '../../types.js';
 /**
  * The props are a `<figure>`'s rather than a `<blockquote>`'s, which is a
  * consequence of where the drawing happens: everything a caller passes lands on
@@ -48,6 +48,15 @@ export interface MPBlockquoteProps extends Omit<React.ComponentPropsWithoutRef<'
     icon?: React.ReactNode | false;
     /** What was said. */
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * Somebody else's words, set apart from your own.

package/dist/components/blockquote/MPBlockquote.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as r,META_TEXT as i,SHEET_PAD as l}from"../../internal/scale.js";import{useMPColor as o,useMPSize as c}from"../../internal/config.js";const s={xs:"text-mp-body-medium",sm:"text-mp-body-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},m="border-s-2 [border-inline-start-color:var(--_mp-accent)]",d={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline-variant border border-s-2 bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"};function p(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const MPBlockquote=/*@__PURE__*/a.forwardRef(function({variant:a="text",size:u,color:f,author:x,source:h,cite:b,icon:g,className:v,style:j,children:N,...y},w){const z=c(u),_=o(f),k=r(x)||r(h),q=void 0===g?e(p,{}):g,B="text"!==a,M=["mp-blockquote flex flex-col",s[z],m,B?"rounded-mp-md rounded-s-none":"",d[a],B?l[z]:"ps-4",v??""].filter(Boolean).join(" "),Z=t("blockquote",{cite:b,children:[r(q)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] opacity-38",children:q}):null,N]}),C={...n(_),...j};return k?t("figure",{ref:w,"data-mp-size":z,"data-mp-variant":a,className:M,style:C,...y,children:[Z,t("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5",B?"opacity-80":"text-mp-on-surface-variant",i].join(" "),children:[r(x)?t("span",{className:"font-medium",children:[e("span",{"aria-hidden":"true",children:"— "}),x]}):null,r(h)?e("cite",{className:"not-italic",children:h}):null]})]}):e("div",{ref:w,"data-mp-size":z,"data-mp-variant":a,className:M,style:C,...y,children:Z})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{accentSlots as n}from"../../internal/accent.js";import{transitionProps as r}from"../../internal/transition.js";import{hasContent as i,META_TEXT as l,SHEET_PAD as o}from"../../internal/scale.js";import{useMPColor as c,useMPSize as s}from"../../internal/config.js";const m={xs:"text-mp-body-medium",sm:"text-mp-body-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},d="border-s-2 [border-inline-start-color:var(--_mp-accent)]",p={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline-variant border border-s-2 bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"};function u(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const MPBlockquote=/*@__PURE__*/a.forwardRef(function({variant:a="text",size:f,color:x,author:h,source:b,cite:g,icon:v,transition:j,className:N,style:y,children:w,...z},_){const k=s(f),q=c(x),B=i(h)||i(b),M=void 0===v?e(u,{}):v,Z="text"!==a,C=r(j),P=["mp-blockquote flex flex-col",m[k],d,Z?"rounded-mp-md rounded-s-none":"",p[a],Z?o[k]:"ps-4",C.className,N??""].filter(Boolean).join(" "),R=t("blockquote",{cite:g,children:[i(M)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] opacity-38",children:M}):null,w]}),A={...n(q),...C.style,...y};return B?t("figure",{ref:_,"data-mp-size":k,"data-mp-variant":a,className:P,style:A,...z,children:[R,t("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5",Z?"opacity-80":"text-mp-on-surface-variant",l].join(" "),children:[i(h)?t("span",{className:"font-medium",children:[e("span",{"aria-hidden":"true",children:"— "}),h]}):null,i(b)?e("cite",{className:"not-italic",children:b}):null]})]}):e("div",{ref:_,"data-mp-size":k,"data-mp-variant":a,className:P,style:A,...z,children:R})});

package/dist/components/bottom-navigation/MPBottomNavigation.d.ts

@@ -1,24 +1,8 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import { type MPBottomNavigationLabels, type MPBottomNavigationValue } from '../../internal/bottom-navigation.js';
 import type { MPPosition, MPSize } from '../../types.js';
-/** A destination's value. The same restraint `MPTabs` puts on a tab's. */
-export type MPBottomNavigationValue = string | number;
-/**
- * Which names are drawn.
- *
- * MD3's three label behaviours, and the order they lose information in:
- *
- * - `all` — every destination is named. The default, and the only one that works
- *   for a reader who has not used the application before.
- * - `selected` — only the destination the reader is on. The bar keeps its height
- *   either way.
- * - `none` — glyphs only.
- *
- * Undrawn is never unsaid: in both of the last two the names stay in the
- * document for a screen reader, because a glyph on its own has no accessible
- * name at all.
- */
-export type MPBottomNavigationLabels = 'all' | 'selected' | 'none';
+export type { MPBottomNavigationLabels, MPBottomNavigationValue };
 export interface MPBottomNavigationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'defaultValue' | 'onChange'> {
     /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
     value?: MPBottomNavigationValue | null;

package/dist/components/bottom-navigation/MPBottomNavigation.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{linkRel as r}from"../../internal/link.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{hasContent as i}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{useMPSize as d}from"../../internal/config.js";const m=/*@__PURE__*/n.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1}),u={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},c={xs:{box:"h-6 w-12",open:"w-12",shut:"w-6"},sm:{box:"h-7 w-14",open:"w-14",shut:"w-7"},md:{box:"h-8 w-16",open:"w-16",shut:"w-8"},lg:{box:"h-9 w-18",open:"w-18",shut:"w-9"},xl:{box:"h-10 w-20",open:"w-20",shut:"w-10"}},p={xs:20,sm:22,md:24,lg:26,xl:28},f={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},x={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=/*@__PURE__*/n.forwardRef(function({value:t,defaultValue:a=null,onValueChange:r,position:o="fixed",labels:i="all",size:s,divider:c=!1,safeArea:p=!0,disabled:f=!1,label:b,render:h,className:v,children:g,...w},y){const j=d(s),[z,N]=n.useState(a),k=void 0!==t,C=k?t:z,B=n.useCallback(e=>{k||N(e),r?.(e)},[k,r]),$=n.useMemo(()=>({value:C??null,change:B,size:j,labels:i,disabled:f}),[C,B,j,i,f]);return l({render:h??e("nav",{}),ref:y,props:{"aria-label":b,"data-mp-size":j,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",c?"border-mp-outline-variant border-t":"",x[o],p?"pb-[env(safe-area-inset-bottom)]":"",v??""].filter(Boolean).join(" "),children:e(m.Provider,{value:$,children:e("div",{className:`flex w-full items-stretch ${u[j]}`,children:g})}),...w}})});export const MPBottomNavigationItem=/*@__PURE__*/n.forwardRef(function({value:l,icon:d,activeIcon:u,href:x,target:v,rel:g,render:w,disabled:y=!1,className:j,children:z,onClick:N,...k},C){const B=n.useContext(m),$=y||B.disabled,M=null!==B.value&&B.value===l,P="all"===B.labels||"selected"===B.labels&&M,I=["mp-bottom-navigation__item group flex min-w-0 flex-1 flex-col items-center justify-center","box-border appearance-none bg-transparent px-1 font-[inherit] no-underline select-none",b[B.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",$?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",j??""].filter(Boolean).join(" "),R=t(a,{children:[i(d)||i(u)?t("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[color] duration-(--mp-sys-motion-duration-short4)",c[B.size].box,M&&!$?"text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[$?null:e("span",{"aria-hidden":"true",className:["pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2","rounded-mp-full bg-mp-secondary-container","transition-[width,opacity] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",M?`${c[B.size].open} opacity-100`:`${c[B.size].shut} opacity-0`].join(" ")}),$?null:e(o,{}),e("span",{className:"relative flex items-center justify-center",style:{width:p[B.size],height:p[B.size]},children:M?u??d:d})]}):null,i(z)?e("span",{className:P?`max-w-full truncate ${f[B.size]}`:s,children:z}):null]}),S=e=>{$?e.preventDefault():(B.change(l),N?.(e))};return e(h,x?{render:w,props:{ref:C,href:$?void 0:x,target:v,rel:r(v,g),"aria-current":M?"page":void 0,"aria-disabled":$||void 0,className:I,onClick:S,children:R,...k}}:{render:w,props:{ref:C,type:w?void 0:"button",disabled:$,"aria-current":M?"page":void 0,className:I,onClick:S,children:R,...k}})});function h({render:t,props:a}){return l({render:t??(a.href?e("a",{}):e("button",{})),props:a})}
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as a from"react";import{useRender as o}from"@base-ui/react/use-render";import{linkRel as r}from"../../internal/link.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{hasContent as l}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{MPBottomNavigationContext as m}from"../../internal/bottom-navigation.js";import{useMPSize as d}from"../../internal/config.js";const u={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},c={xs:{box:"h-6 w-12",open:"w-12",shut:"w-6"},sm:{box:"h-7 w-14",open:"w-14",shut:"w-7"},md:{box:"h-8 w-16",open:"w-16",shut:"w-8"},lg:{box:"h-9 w-18",open:"w-18",shut:"w-9"},xl:{box:"h-10 w-20",open:"w-20",shut:"w-10"}},p={xs:20,sm:22,md:24,lg:26,xl:28},f={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},x={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=/*@__PURE__*/a.forwardRef(function({value:t,defaultValue:n=null,onValueChange:r,position:i="fixed",labels:l="all",size:s,divider:c=!1,safeArea:p=!0,disabled:f=!1,label:b,render:h,className:v,children:g,...w},y){const j=d(s),[z,N]=a.useState(n),k=void 0!==t,C=k?t:z,B=a.useCallback(e=>{k||N(e),r?.(e)},[k,r]),$=a.useMemo(()=>({value:C??null,change:B,size:j,labels:l,disabled:f,floating:!1}),[C,B,j,l,f]);return o({render:h??e("nav",{}),ref:y,props:{"aria-label":b,"data-mp-size":j,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",c?"border-mp-outline-variant border-t":"",x[i],p?"pb-[env(safe-area-inset-bottom)]":"",v??""].filter(Boolean).join(" "),children:e(m.Provider,{value:$,children:e("div",{className:`flex w-full items-stretch ${u[j]}`,children:g})}),...w}})});export const MPBottomNavigationItem=/*@__PURE__*/a.forwardRef(function({value:o,icon:d,activeIcon:u,href:x,target:v,rel:g,render:w,disabled:y=!1,className:j,children:z,onClick:N,...k},C){const B=a.useContext(m),$=y||B.disabled,M=null!==B.value&&B.value===o,P="all"===B.labels||"selected"===B.labels&&M,I=["mp-bottom-navigation__item group flex min-w-0 flex-col items-center justify-center",B.floating?"shrink-0":"flex-1","box-border appearance-none bg-transparent px-1 font-[inherit] no-underline select-none",b[B.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",$?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",j??""].filter(Boolean).join(" "),R=t(n,{children:[l(d)||l(u)?t("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[color] duration-(--mp-sys-motion-duration-short4)",c[B.size].box,M&&!$?"text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[$?null:e("span",{"aria-hidden":"true",className:["pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2","rounded-mp-full bg-mp-secondary-container","transition-[width,opacity] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",M?`${c[B.size].open} opacity-100`:`${c[B.size].shut} opacity-0`].join(" ")}),$?null:e(i,{}),e("span",{className:"relative flex items-center justify-center",style:{width:p[B.size],height:p[B.size]},children:M?u??d:d})]}):null,l(z)?e("span",{className:P?`max-w-full truncate ${f[B.size]}`:s,children:z}):null]}),S=e=>{$?e.preventDefault():(B.change(o),N?.(e))};return e(h,x?{render:w,props:{ref:C,href:$?void 0:x,target:v,rel:r(v,g),"aria-current":M?"page":void 0,"aria-disabled":$||void 0,className:I,onClick:S,children:R,...k}}:{render:w,props:{ref:C,type:w?void 0:"button",disabled:$,"aria-current":M?"page":void 0,className:I,onClick:S,children:R,...k}})});function h({render:t,props:n}){return o({render:t??(n.href?e("a",{}):e("button",{})),props:n})}

package/dist/components/box/MPBox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPDensity, MPElevation, MPSize, MPTransition, MPVariant } from '../../types.js';
 export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How much surface the sheet paints.
@@ -11,6 +11,17 @@ export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the sheet is lifted, on MD3's own scale.
+     *
+     * It moves the **tone** as well as the shadow, because Material pairs the two:
+     * a level-2 surface is `surface-container` under a level-2 shadow, and a prop
+     * that only cast a shadow would raise this into a surface the specification
+     * has no name for. Given a level, `variant` is left holding only its hairline.
+     *
+     * Left unset, `variant` decides — and `variant="elevated"` is this at `1`.
+     */
+    elevation?: MPElevation;
     /**
      * The room inside.
      *
@@ -27,6 +38,26 @@ export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of the padding `size` chose, two pixels a face per step.
+     *
+     * On a box that is the whole of what density can mean, because padding is the
+     * whole of what `size` does here. It is the axis that matters when boxes are
+     * being repeated — a grid of tiles, a column of panels — where the room around
+     * each one is multiplied by however many there are.
+     * @default 0
+     */
+    density?: MPDensity;
+    /**
+     * An entrance, run once as the box mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings, and wrapping is
+     * the right answer there.
+     */
+    transition?: MPTransition;
     /**
      * Inner padding. Turn it off for full-bleed content — a picture, a table, a
      * list that draws its own rows.
@@ -66,13 +97,17 @@ export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
  * that is [MPAlert](../feedback/alert) for a message, [MPChip](../display/chip)
  * for a token, [MPButton](../inputs/button) for an action.
  *
- * ## Why there is no `elevation`
+ * ## What `elevation` does, and why it took the shape it did
+ *
+ * MD3 does not treat height as a free axis: an elevated surface is
+ * `surface-container-low` **under** a level-1 shadow, and the tone and the
+ * shadow are one decision rather than two. A prop that only cast a shadow would
+ * raise a `filled` box into a surface the specification has no name for — a
+ * lifted object that is somehow still the flattest tone in the system.
  *
- * There is no `elevation` prop anywhere in this library, and a box is where the
- * absence is most tempting to fix. It stays absent because MD3 does not treat
- * height as a free axis: an elevated surface is `surface-container-low` under a
- * level-1 shadow, and the tone and the shadow are one decision. A prop that
- * raised a `filled` box would produce a surface the specification has no name
- * for. `variant="elevated"` is that decision, made once.
+ * So a level names both, and `variant="elevated"` is that decision made once, at
+ * level 1. The variant stays because it is the answer nearly every raised sheet
+ * wants and because the vocabulary is about *emphasis*; the prop is there for
+ * the sheet that has a reason to be somewhere else on the ladder.
  */
 export declare const MPBox: React.ForwardRefExoticComponent<MPBoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/box/MPBox.js

@@ -1 +1,2 @@
-import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{SHEET_PAD as a}from"../../internal/scale.js";import{CONTAINER_SURFACE as o}from"../../internal/surface.js";export const MPBox=/*@__PURE__*/r.forwardRef(function({variant:r="outlined",size:n="md",padded:t=!0,render:d,className:i,children:m,...s},p){return e({render:d,ref:p,props:{"data-mp-size":n,"data-mp-variant":r,className:["mp-box rounded-mp-md block","box-border",t?a[n]:"",o[r],"text-mp-on-surface",i??""].filter(Boolean).join(" "),children:m,...s}})});
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{sheetPad as t}from"../../internal/density.js";import{containerSurface as n}from"../../internal/elevation.js";import{useMPDensity as o,useMPSize as a}from"../../internal/config.js";import{transitionProps as i}from"../../internal/transition.js";export const MPBox=/*@__PURE__*/e.forwardRef(function({variant:e="outlined",elevation:s,size:m,density:d,transition:l,padded:p=!0,render:c,className:f,style:u,children:b,...j},x){const y=a(m),v=o(d),N=i(l);return r({render:c,ref:x,props:{"data-mp-size":y,"data-mp-variant":e,className:["mp-box rounded-mp-md block","box-border",p?t(y,v):"",n(e,s),"text-mp-on-surface",N.className,f??""].filter(Boolean).join(" "),style:{...N.style,...u},children:b,...j}})});

package/dist/components/card/MPCard.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{MPBox as n}from"../box/MPBox.js";import{hasContent as i,META_TEXT as o,PROSE_TEXT as t,SHEET_GAP as s,SHEET_PAD_X as c,SHEET_PAD_Y as m,SHEET_TITLE as d}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";export const MPCard=/*@__PURE__*/r.forwardRef(function({size:r,title:p,subtitle:u,headerAction:x,media:h,footer:_,dividers:v=!1,className:N,children:j,...w},b){const g=f(r),k=c[g],$=m[g],y=v?`${k} ${$}`:k,B=i(p)||i(u)||i(x),z=i(h),M=[B?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(p)||i(u)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(p)?e("div",{className:`mp-card__title ${d[g]}`,children:p}):null,i(u)?e("div",{className:`text-mp-on-surface-variant ${o}`,children:u}):null]}):null,i(x)?e("div",{className:"ms-auto shrink-0",children:x}):null]})}:null,i(j)?{key:"content",className:`mp-card__body min-w-0 ${t[g]}`,content:j}:null,i(_)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:_}:null].filter(e=>null!==e);return l(n,{ref:b,size:g,padded:!1,className:["mp-card flex flex-col",z?"overflow-hidden":"",N??""].filter(Boolean).join(" "),...w,children:[z?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:h}):null,M.length>0?e("div",{className:["flex min-w-0 flex-col",v?"":`${$} ${s[g]}`].filter(Boolean).join(" "),children:M.map((l,a)=>e("div",{className:[y,l.className,v&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});
+import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{MPBox as r}from"../box/MPBox.js";import{hasContent as i,META_TEXT as t,PROSE_TEXT as o,SHEET_GAP as s,SHEET_TITLE as c}from"../../internal/scale.js";import{sheetPadX as m,sheetPadY as d}from"../../internal/density.js";import{useMPDensity as f,useMPSize as p}from"../../internal/config.js";export const MPCard=/*@__PURE__*/n.forwardRef(function({size:n,density:u,title:x,subtitle:h,headerAction:_,media:v,footer:N,dividers:j=!1,className:w,children:y,...b},g){const k=p(n),$=f(u),B=m(k,$),z=d(k,$),M=j?`${B} ${z}`:B,P=i(x)||i(h)||i(_),A=i(v),C=[P?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(x)||i(h)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(x)?e("div",{className:`mp-card__title ${c[k]}`,children:x}):null,i(h)?e("div",{className:`text-mp-on-surface-variant ${t}`,children:h}):null]}):null,i(_)?e("div",{className:"ms-auto shrink-0",children:_}):null]})}:null,i(y)?{key:"content",className:`mp-card__body min-w-0 ${o[k]}`,content:y}:null,i(N)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:N}:null].filter(e=>null!==e);return l(r,{ref:g,size:k,density:$,padded:!1,className:["mp-card flex flex-col",A?"overflow-hidden":"",w??""].filter(Boolean).join(" "),...b,children:[A?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:v}):null,C.length>0?e("div",{className:["flex min-w-0 flex-col",j?"":`${z} ${s[k]}`].filter(Boolean).join(" "),children:C.map((l,a)=>e("div",{className:[M,l.className,j&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});

package/dist/components/checkbox/MPCheckbox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{MPSupportingText as d}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as h,useMPSize as u}from"../../internal/config.js";const f={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/r.forwardRef(function({checked:b,defaultChecked:g,onCheckedChange:x,indeterminate:y=!1,label:k,description:j,errorMessage:z,size:N,color:_,required:v=!1,disabled:C=!1,readOnly:M=!1,name:I,value:R,id:q,className:w,style:L},O){const P=u(N),S=h(_),B=p(z),F=B?"error":S,T=f[P],W=r.useId(),A=q??W;return e(n.Root,{className:["mp-checkbox inline-block align-top",w??""].filter(Boolean).join(" "),disabled:C,invalid:B,"data-mp-size":P,style:{...c(F),...L},children:a("div",{className:["flex items-start gap-3",m[P]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(t.Root,{ref:O,id:A,name:I,value:R,checked:b,defaultChecked:g,indeterminate:y,required:v,disabled:C,readOnly:M,onCheckedChange:e=>x?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",T.box,C?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[M?"cursor-default":"cursor-pointer",B?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[C?null:e(l,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",T.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:["flex items-center justify-center","transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-60 data-starting-style:opacity-0","data-ending-style:scale-60 data-ending-style:opacity-0"].join(" "),children:e(o,{icon:y?s:i,size:T.glyph,strokeWidth:3})})]})}),p(k)||p(j)||B?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(k)?a(n.Label,{htmlFor:A,className:["leading-[1.4]",C?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[k,v?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(d,{description:j,errorMessage:z})]}):null]})})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MARK_MOTION as l}from"../../internal/mark.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as m}from"../../internal/SupportingText.js";import{PROSE_TEXT as p,hasContent as h}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/a.forwardRef(function({checked:x,defaultChecked:g,onCheckedChange:k,indeterminate:j=!1,label:y,description:z,errorMessage:N,size:_,color:v,required:C=!1,disabled:M=!1,readOnly:I=!1,name:R,value:q,id:w,className:L,style:O},P){const S=f(_),B=u(v),F=h(N),T=F?"error":B,W=b[S],$=a.useId(),A=w??$;return e(n.Root,{className:["mp-checkbox inline-block align-top",L??""].filter(Boolean).join(" "),disabled:M,invalid:F,"data-mp-size":S,style:{...c(T),...O},children:r("div",{className:["flex items-start gap-3",p[S]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(t.Root,{ref:P,id:A,name:R,value:q,checked:x,defaultChecked:g,indeterminate:j,required:C,disabled:M,readOnly:I,onCheckedChange:e=>k?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",W.box,M?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[I?"cursor-default":"cursor-pointer",F?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[M?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",W.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:`flex items-center justify-center ${l}`,children:e(o,{icon:j?s:i,size:W.glyph,strokeWidth:3})})]})}),h(y)||h(z)||F?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[h(y)?r(n.Label,{htmlFor:A,className:["leading-[1.4]",M?"text-mp-on-surface/38 cursor-default":I?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,C?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(m,{description:z,errorMessage:N})]}):null]})})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPSize, MPTransition, MPVariant } from '../../types.js';
 export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * How much surface the chip paints.
@@ -57,6 +57,15 @@ export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>
     /** Unavailable. Drops the accent family, as everywhere else in the library. */
     disabled?: boolean;
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * A compact token: a tag, a filter, a status, an entity plucked out of a list.

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 a}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{hasContent as m}from"../../internal/scale.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{useMPColor as d,useMPSize as u}from"../../internal/config.js";const f={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},b={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"},x={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},g={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},h={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},v={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-transparent"},y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},j={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"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:"bg-transparent text-mp-on-surface/38"},_=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","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(" "),w=/*@__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(" "),k=/*@__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:N,color:C,startIcon:z,endIcon:B,count:I,onDelete:$,deleteLabel:L,locale:M,selected:P,disabled:D=!1,className:F,style:R,children:S,onClick:q,...A},E){const G=u(N),H=d(C),J=s(M),K=l(c,J),O=Boolean(q)&&!D,Q=O&&Boolean($),T=O&&!$,U=["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[G],b[G],g[G],h[G],D?j[o]:P?y[o]:v[o],Q?"ps-0":x[G],$?"pe-2":"",T?k:"",F??""].filter(Boolean).join(" "),V=t(n,{children:[z,m(S)?e("span",{className:"min-w-0 truncate",children:S}):null,B,m(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]}),W={"data-mp-size":G,"data-mp-variant":o,"data-selected":P||void 0,className:U,style:{...r(H),...R},...A};return T?t("button",{ref:E,type:"button","aria-pressed":P,onClick:q,...W,children:[e(p,{}),V]}):t("span",{ref:E,"aria-disabled":!(!D||O)||void 0,...W,children:[Q?t("button",{type:"button","aria-pressed":P,className:`${w} ${g[G]} ${x[G]}`,onClick:q,children:[e(p,{}),V]}):V,$?e("button",{type:"button","aria-label":L??K.remove,disabled:D,className:_,onClick:$,children:e(a,{icon:i,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 a}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{accentSlots as r}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 f}from"../../internal/config.js";const b={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:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-transparent"},j={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},_={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"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:"bg-transparent text-mp-on-surface/38"},w=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","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=f($),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)",b[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",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:{...r(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(a,{icon:i,size:"1em"})}):null]})});

package/dist/components/code-block/MPCodeBlock.d.ts

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import type { MPDensity, MPSize } from '../../types.js';
+export { registerMPLanguage } from '../../internal/highlight.js';
+/**
+ * Which palette the block wears.
+ *
+ * - `auto` — the page's own scheme, light on a light page and dark on a dark
+ *   one. The default, because that is what every other surface in this library
+ *   does and a reader who has chosen a scheme has chosen it for the whole page.
+ * - `dark` and `light` — pinned, whatever the page is doing. `dark` is what a
+ *   documentation site usually wants: code has been read on a dark ground since
+ *   terminals, and the choice is one prop.
+ * - `mono` — no hue at all. Structure carried by weight and by how far a run is
+ *   muted, which is what a block printed on paper, or read by somebody who
+ *   cannot separate the hues, is left with.
+ *
+ * The type is open on purpose. A theme is a set of `--mp-code-*` custom
+ * properties under a `[data-mp-code-theme]` selector and nothing else, so a
+ * consumer who writes one in their own stylesheet has a theme — with nothing to
+ * register, nothing to import, and no cost to anybody who did not.
+ *
+ * No third-party palettes ship here. One Dark, Dracula and the rest are other
+ * projects' published work under their own licences, and porting them into this
+ * package would be shipping somebody else's design; the open string is how to
+ * bring the one you read in all day.
+ */
+export type MPCodeBlockTheme = 'auto' | 'dark' | 'light' | 'mono' | (string & {});
+export interface MPCodeBlockProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'prefix' | 'children' | 'onCopy'> {
+    /**
+     * The code.
+     *
+     * Trailing whitespace is trimmed off the end of the block: a template literal
+     * is almost always written with a newline before its closing backtick, and
+     * that newline is a blank line at the bottom of every block. Nothing is
+     * trimmed off the front, because indentation is meaningful in half of the
+     * languages here.
+     */
+    code: string;
+    /**
+     * What it is written in — `ts`, `bash`, `yml`, `dockerfile`. The common
+     * spellings and file extensions are understood, so a value copied off a
+     * fenced code block works as it stands.
+     *
+     * A language nothing here knows is drawn plain rather than refused. Teach it
+     * one with `registerMPLanguage`.
+     */
+    language?: string;
+    /**
+     * The palette.
+     * @default 'auto'
+     */
+    theme?: MPCodeBlockTheme;
+    /** The type scale and the air around the code. @default 'md' */
+    size?: MPSize;
+    /** Tightens that air and nothing else. @default 0 */
+    density?: MPDensity;
+    /**
+     * Colours the code.
+     *
+     * Off, nothing is fetched at all — the grammar engine is behind a dynamic
+     * import, so a block that does not colour itself costs no more than the text
+     * in it. On, the block draws plain on the first frame and colours itself when
+     * the grammar lands: a few milliseconds, and never a blank space where the
+     * code should be.
+     * @default true
+     */
+    highlight?: boolean;
+    /**
+     * The bar over the code, and the master switch for it. With it off there is
+     * no bar, and none of `showLanguage`, `copyable` or `rawToggle` draws
+     * anything whatever they say.
+     * @default true
+     */
+    toolbar?: boolean;
+    /**
+     * A name at the start of the bar, usually a file path. Takes the place the
+     * language would otherwise have, and both can be shown at once.
+     */
+    title?: React.ReactNode;
+    /** Names the language at the start of the bar. @default true */
+    showLanguage?: boolean;
+    /** The button that puts the code on the clipboard. @default true */
+    copyable?: boolean;
+    /**
+     * The toggle that drops the colouring and shows the characters as they are.
+     *
+     * Off by default: it is a second control on a bar that usually wants one, and
+     * it means nothing at all when `highlight` is off.
+     * @default false
+     */
+    rawToggle?: boolean;
+    /**
+     * Lines to mark: a tinted row with a rule down its leading edge.
+     *
+     * A number is one line, a string is a list of lines and ranges — `'4'`,
+     * `'4-9'`, `'1,4-9,12'` — and an array is any mix of the two. They are
+     * counted the way the gutter counts, so with `startLine={286}` a
+     * `markLines={288}` marks the line the gutter calls 288.
+     */
+    markLines?: number | string | Array<number | string>;
+    /** Numbers down the side. @default false */
+    lineNumbers?: boolean;
+    /** What the first line is numbered. @default 1 */
+    startLine?: number;
+    /**
+     * A shell prompt in front of every line that has something on it — `$`, `#`,
+     * `>>>`.
+     *
+     * Drawn but never *present*: the symbol is generated content, so it cannot be
+     * selected, cannot be found by find-in-page, and is not what the copy button
+     * puts on the clipboard. A transcript stays a transcript and still pastes
+     * into a shell.
+     */
+    prompt?: string;
+    /** Wraps long lines instead of scrolling them sideways. @default false */
+    wrap?: boolean;
+    /**
+     * How tall the block may get before the code scrolls inside it. A number is
+     * pixels, a string is any CSS length. Left out, the block is as tall as the
+     * code.
+     */
+    maxHeight?: number | string;
+    /** The typeface. Defaults to the page's own monospace stack. */
+    fontFamily?: string;
+    /** Overrides the size the `size` ladder chose. A number is pixels. */
+    fontSize?: number | string;
+    /** Overrides the leading. A bare number is a ratio, as in CSS. */
+    lineHeight?: number | string;
+    /**
+     * Which language the block's own words are in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The copy button's label. Defaults to the wording in `locale`. */
+    copyLabel?: string;
+    /** And what it says once the code is on the clipboard. */
+    copiedLabel?: string;
+    /** The raw toggle's label. */
+    rawLabel?: string;
+    /** Fires with the copied text once the clipboard has taken it. */
+    onCopy?: (code: string) => void;
+}
+/**
+ * A viewer for one line of code or a thousand.
+ *
+ * ```tsx
+ * <MPCodeBlock code={source} language="ts" title="src/index.ts" lineNumbers />
+ * ```
+ *
+ * Everything above the code is optional and off one prop each, because the same
+ * component has to be a snippet inside a sentence — no bar, no numbers, no
+ * chrome — and the full transcript at the top of a README. Those are the same
+ * block with different things turned on rather than two components.
+ *
+ * ## The colouring arrives separately
+ *
+ * highlight.js, reached through a dynamic import, which makes it the one thing
+ * in this library that is loaded rather than imported. The grammars are forty
+ * kilobytes and there are thirty-four of them, so they come as their own chunk,
+ * one language at a time, and only for a block that asked to be coloured. The
+ * block draws plain on the first frame and colours itself when the chunk lands;
+ * there is never a blank space where the code should be.
+ *
+ * ## It is drawn as lines, always
+ *
+ * Even with no numbers and no prompt. A line is what carries a number, a prompt
+ * and a place in the scroll, and a component that switched between two
+ * renderings would have two sets of wrapping behaviour to keep in step.
+ *
+ * ## The block does not take the page's accent
+ *
+ * It has a palette of its own, because code is read against a ground chosen for
+ * code and the twelve hues it needs are not the four MD3 has. `theme` picks
+ * which set fills the slots, and `auto` — the default — is the one that follows
+ * the page's light and dark the way every other surface here does.
+ */
+export declare const MPCodeBlock: React.ForwardRefExoticComponent<MPCodeBlockProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/code-block/MPCodeBlock.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as n}from"../icon/MPIcon.js";import{CheckIcon as r,CodeIcon as i,CopyIcon as l}from"../../constants/icons.js";import{canonicalLanguage as a,highlightCode as s,plainLines as c}from"../../internal/highlight.js";import{cssLength as m}from"../../internal/length.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{CODE as u}from"../../internal/messages/code.js";import{META_TEXT as f,hasContent as g}from"../../internal/scale.js";import{VISUALLY_HIDDEN as x}from"../../internal/visually-hidden.js";import{useMPDensity as h,useMPSize as b}from"../../internal/config.js";export{registerMPLanguage}from"../../internal/highlight.js";const y={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},v={xs:8,sm:12,md:14,lg:16,xl:20},w={xs:8,sm:12,md:14,lg:16,xl:20},j={xs:4,sm:4,md:6,lg:8,xl:8};function N(e,t,o){return Math.max(o,e+2*t)}export const MPCodeBlock=/*@__PURE__*/o.forwardRef(function({code:k,language:_,theme:M="auto",size:S,density:$,highlight:L=!0,toolbar:T=!0,title:z,showLanguage:C=!0,copyable:F=!0,rawToggle:R=!1,markLines:A,lineNumbers:H=!1,startLine:K=1,prompt:B,wrap:E=!1,maxHeight:P,fontFamily:D,fontSize:I,lineHeight:q,locale:G,copyLabel:J,copiedLabel:O,rawLabel:Q,onCopy:U,className:V,style:W,...X},Y){const Z=b(S),ee=h($),te=p(u,d(G)),oe=o.useMemo(()=>k.replace(/\r\n?/g,"\n").replace(/\s+$/,""),[k]),ne=a(_),[re,ie]=o.useState(!1),[le,ae]=o.useState(null),[se,ce]=o.useState(null),me=L&&!re&&null!==ne;o.useEffect(()=>{if(!me||!ne)return void ce(null);let e=!1;return s(oe,ne).then(t=>{e||ce(t)},()=>{e||ce(null)}),()=>{e=!0}},[oe,ne,me]);const de=o.useMemo(()=>me&&se?se:c(oe),[me,se,oe]),pe=o.useMemo(()=>function(e){const t=new Set;if(void 0===e)return t;for(const o of Array.isArray(e)?e:[e])if("number"!=typeof o)for(const e of o.split(",")){const o=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!o)continue;const n=Number(o[1]),r=void 0===o[2]?n:Number(o[2]);for(let e=Math.min(n,r);e<=Math.max(n,r);e+=1)t.add(e)}else Number.isFinite(o)&&t.add(Math.trunc(o));return t}(A),[A]),ue=o.useRef(void 0);o.useEffect(()=>()=>clearTimeout(ue.current),[]);const fe=o.useRef(null),ge=J??te.copy,xe=O??te.copied,he=Q??te.raw,be=/*@__PURE__*/["mp-code__button inline-flex shrink-0 cursor-pointer items-center gap-1 border-0","rounded-mp-xs bg-transparent px-1.5 py-1","text-(--mp-code-dim) hover:text-(--mp-code-fg) hover:bg-(--mp-code-hover)",f,"transition-[color,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),ye=g(z)?"string"==typeof z?z:void 0:ne??te.label,ve=T&&(C||F||R||g(z));return t("div",{ref:Y,"data-mp-size":Z,"data-mp-code-theme":M,"data-mp-code-wrap":E?"true":void 0,className:["mp-code rounded-mp-md flex min-w-0 flex-col overflow-hidden","border-(--mp-code-rule) bg-(--mp-code-bg) text-(--mp-code-fg) border",V??""].filter(Boolean).join(" "),style:{"--mp-code-gutter":`${String(K+Math.max(de.length-1,0)).length}ch`,"--mp-code-pad-x":`${N(w[Z],ee,6)}px`,"--mp-code-pad-y":`${N(v[Z],ee,4)}px`,"--mp-code-bar-pad-y":`${N(j[Z],ee,2)}px`,...D?{fontFamily:D}:null,...void 0===I?null:{fontSize:m(I)},...void 0===q?null:{lineHeight:q},...W},...X,children:[ve?t("div",{className:["mp-code__bar border-(--mp-code-rule) flex min-w-0 items-center gap-1 border-b","px-[calc(var(--mp-code-pad-x)+2px)] py-(--mp-code-bar-pad-y)"].join(" "),children:[g(z)?e("span",{className:`mp-code__title min-w-0 truncate font-mono ${f}`,children:z}):null,C&&ne?e("span",{className:["mp-code__language text-(--mp-code-dim) min-w-0 truncate font-mono","tracking-wide uppercase select-none",f].join(" "),children:ne}):null,e("span",{className:"flex-1"}),R&&L?e("button",{type:"button","aria-pressed":re,"aria-label":he,title:he,onClick:()=>ie(e=>!e),className:[be,re?"bg-(--mp-code-hover) text-(--mp-code-fg)":""].filter(Boolean).join(" "),children:e(n,{icon:i,size:"1.15em"})}):null,F?t("button",{type:"button",onClick:async()=>{const e=await async function(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const o=document.execCommand("copy");return t.remove(),o}catch{return!1}}(oe);clearTimeout(ue.current),ae(e),ue.current=setTimeout(()=>ae(null),2e3),e&&U?.(oe)},className:be,children:[e(n,{icon:le?r:l,size:"1.15em"}),e("span",{children:null===le?ge:le?xe:te.copyFailed})]}):null]}):null,e("div",{className:`mp-code__body flex min-h-0 flex-col ${y[Z]}`,children:e("div",{role:"region","aria-label":ye,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=fe.current,o="undefined"==typeof window?null:window.getSelection();if(!t||!o)return;e.preventDefault();const n=document.createRange();n.selectNodeContents(t),o.removeAllRanges(),o.addRange(n)},className:["mp-code__scroller box-border min-h-0 overflow-auto py-(--mp-code-pad-y)","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),style:void 0===P?void 0:{maxHeight:m(P)},children:e("pre",{ref:fe,className:["m-0 bg-transparent p-0 font-mono",E?"w-full":"w-max min-w-full"].join(" "),children:de.map((t,n)=>{const r=K+n;return e("div",{className:"mp-code-line px-(--mp-code-pad-x)","data-line":H?r:void 0,"data-mark":pe.has(r)?"":void 0,"data-prompt":B&&t.length>0?B:void 0,children:e("code",{children:t.map((t,n)=>t.token?e("span",{className:t.token,children:t.text},n):e(o.Fragment,{children:t.text},n))})},n)})})})}),e("span",{"aria-live":"polite",className:x,children:null===le?"":le?xe:te.copyFailed})]})});

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export { MPCodeBlock, registerMPLanguage } from './MPCodeBlock.js';
+export type { MPCodeBlockProps, MPCodeBlockTheme } from './MPCodeBlock.js';

package/dist/components/code-block/index.js

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

package/dist/components/collapsible/MPCollapsible.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPCollapsibleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'onChange'> {
     /** Whether the panel is showing. Use with `onOpenChange` for a controlled one. */
     open?: boolean;
@@ -51,6 +51,17 @@ export interface MPCollapsibleProps extends Omit<React.ComponentPropsWithoutRef<
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the sheet is lifted, on MD3's own scale.
+     *
+     * It moves the **tone** as well as the shadow, because Material pairs the two:
+     * a level-2 surface is `surface-container` under a level-2 shadow, and a prop
+     * that only cast a shadow would raise this into a surface the specification
+     * has no name for. Given a level, `variant` is left holding only its hairline.
+     *
+     * Left unset, `variant` decides — and `variant="elevated"` is this at `1`.
+     */
+    elevation?: MPElevation;
     /**
      * The room inside, and the type scale of the header and the body.
      * @default 'md'