material-plus-ui 1.5.0 → 1.7.0

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

@@ -0,0 +1,127 @@
+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 { MPElevation, MPPosition, MPSize, MPVariant } from '../../types.js';
+export interface MPFloatingBottomNavigationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'defaultValue' | 'onChange'> {
+    /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
+    value?: MPBottomNavigationValue | null;
+    /** Which starts current, for an uncontrolled bar. */
+    defaultValue?: MPBottomNavigationValue | null;
+    /** Called with the value of the destination that was pressed. */
+    onValueChange?: (value: MPBottomNavigationValue) => void;
+    /**
+     * How the bar sits in the page's scroll.
+     *
+     * `fixed` — the default — holds it against the bottom of the window.
+     * `sticky` holds it against the bottom of whatever is scrolling, `absolute`
+     * against the bottom of the nearest positioned ancestor — which is what a bar
+     * inside a phone screen of its own wants — and `static` puts it back in the
+     * flow, centred.
+     * @default 'fixed'
+     */
+    position?: MPPosition;
+    /**
+     * How far the bar floats above the bottom edge. A number is pixels, a string
+     * is any CSS length.
+     *
+     * This is the whole difference between this component and
+     * `MPBottomNavigation`: the gap under it is what makes the page keep going
+     * underneath rather than stop at a bar.
+     * @default 16
+     */
+    offset?: number | string;
+    /**
+     * Which names are drawn. `selected` here, against the `all` a full-width bar
+     * defaults to: this one is only as wide as what is in it, so five drawn names
+     * would stretch it across the screen and it would stop being a lozenge.
+     * @default 'selected'
+     */
+    labels?: MPBottomNavigationLabels;
+    /**
+     * How much surface the lozenge paints.
+     *
+     * A container's ladder, so the sheet is never dyed — what carries the accent
+     * is the one destination that is current.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * How far off the page it is lifted.
+     *
+     * `3` here, against the nothing every other surface defaults to, because this
+     * bar is *defined* by not being part of the page: a lozenge lying flat over
+     * the content it is floating above reads as a mistake rather than as a
+     * decision.
+     * @default 3
+     */
+    elevation?: MPElevation;
+    /**
+     * The height of the row and its type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Adds `env(safe-area-inset-bottom)` to `offset`, so the bar clears a phone's
+     * home indicator rather than sitting on it.
+     *
+     * Unlike on `MPBottomNavigation` this moves the whole sheet rather than the
+     * row inside it: there is nothing under a floating bar that has to stay
+     * covered.
+     * @default true
+     */
+    safeArea?: boolean;
+    /** Every destination stops answering. */
+    disabled?: boolean;
+    /**
+     * The name the bar is announced by — "Main", "Sections". A landmark with no
+     * name is one a screen reader lists as "navigation".
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<nav>`. Rarely what you want here: a row of
+     * destinations is navigation.
+     */
+    render?: useRender.RenderProp;
+    /** The `MPBottomNavigationItem`s — the same item the full-width bar takes. */
+    children?: React.ReactNode;
+}
+/**
+ * A row of destinations floating clear of the bottom edge of the window.
+ *
+ * ```tsx
+ * <MPFloatingBottomNavigation defaultValue="home" label="Main">
+ *   <MPBottomNavigationItem value="home" icon={<HomeIcon />}>Home</MPBottomNavigationItem>
+ *   <MPBottomNavigationItem value="search" icon={<SearchIcon />}>Search</MPBottomNavigationItem>
+ * </MPFloatingBottomNavigation>
+ * ```
+ *
+ * It is `MPBottomNavigation` lifted off the page. The same `<nav>`, the same
+ * `MPBottomNavigationItem` children, the same `aria-current="page"` — and
+ * deliberately not a `role="tablist"`, for the same reason: a bottom navigation
+ * changes what the page *is*, not which panel of one is showing.
+ *
+ * ## Everything about the shape follows from `offset`
+ *
+ * Because the page keeps going underneath, the sheet is a stadium rather than a
+ * bar with two corners; it is only as wide as its destinations; it carries a
+ * shadow, because a lozenge lying flat over what it is floating above reads as
+ * a mistake; and it names only the destination the reader is on, since five
+ * drawn names would stretch it back into a bar.
+ *
+ * ## There is no second highlight
+ *
+ * The destination the reader is on wears the same active indicator it wears in
+ * the full-width bar — MD3's pill, widening out of a circle behind the glyph.
+ * A floating bar could instead have one tile that slides between destinations,
+ * and this deliberately does not: the specification draws one selected
+ * treatment, and a lozenge with both would be saying where the reader is twice,
+ * on two different curves.
+ *
+ * ## Which bar to reach for
+ *
+ * `MPBottomNavigation` when the bar is the bottom of the screen — the page
+ * stops at it, and the tonal step between `surface-container` and `surface` is
+ * what separates them. This one when the content is meant to run underneath: a
+ * map, a photograph, a feed that should not end in a bar.
+ */
+export declare const MPFloatingBottomNavigation: React.ForwardRefExoticComponent<MPFloatingBottomNavigationProps & React.RefAttributes<HTMLElement>>;

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

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

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

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

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

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

package/dist/components/footer/MPFooter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPPosition, MPSize, MPVariant } from '../../types.js';
+import type { MPDensity, MPMeasure, MPPosition, MPResponsive, MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPFooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'title'> {
     /**
      * How the sheet sits in the page's scroll.
@@ -25,6 +25,16 @@ export interface MPFooterProps extends Omit<React.ComponentPropsWithoutRef<'foot
      * @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 sheet's scale — its gutter and the air above and below its content. As
      * on [MPBox](./box), `size` here is the size of the *sheet*: it sets no height
@@ -32,13 +42,23 @@ export interface MPFooterProps extends Omit<React.ComponentPropsWithoutRef<'foot
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of the gutter and the air above and below the content.
+     *
+     * A footer is the sheet a page ends on, and the amount of screen it takes is
+     * mostly padding. On a dense page it is the first thing that should give some
+     * back.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * Holds the content to a measure and centres it while the sheet itself still
-     * spans the window. The same ladder [MPContainer](./container)'s `maxWidth`
-     * uses.
+     * spans the window. The same prop [MPContainer](./container)'s `maxWidth` is —
+     * a rung of the size ladder, a CSS length of your own, or a map keyed by
+     * window size class.
      * @default 'none'
      */
-    maxWidth?: MPSize | 'none';
+    maxWidth?: MPResponsive<MPMeasure>;
     /**
      * The gutter, and the air above and below.
      * @default true

package/dist/components/footer/MPFooter.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as o}from"@base-ui/react/use-render";import{BAR_SURFACE as r,MPPageLayoutContext as a}from"../../internal/page-layout.js";import{MEASURE as i,SHEET_PAD_X as n,SHEET_PAD_Y as s}from"../../internal/scale.js";const l={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 MPFooter=/*@__PURE__*/t.forwardRef(function({position:m="static",variant:c="outlined",size:d="md",maxWidth:f="none",padded:u=!0,label:p,render:b,className:x,children:j,...z},h){const{register:v}=t.useContext(a),w=t.useCallback(e=>{v("footer",e),"function"==typeof h?h(e):h&&(h.current=e)},[v,h]);return o({render:b??e("footer",{}),ref:w,props:{"aria-label":p,"data-mp-size":d,"data-mp-variant":c,className:["mp-footer text-mp-on-surface box-border w-full min-w-0",r[c],"outlined"===c?"border-mp-outline-variant border-t":"",l[m],x??""].filter(Boolean).join(" "),children:e("div",{className:["mp-footer__inner w-full",u?`${n[d]} ${s[d]}`:"","none"===f?"":`${i[f]} mx-auto`].filter(Boolean).join(" "),children:j}),...z}})});
+import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{useRender as t}from"@base-ui/react/use-render";import{barSurface as r,MPPageLayoutContext as n}from"../../internal/page-layout.js";import{sheetPadX as i,sheetPadY as a}from"../../internal/density.js";import{measureValue as s}from"../../internal/measure.js";import{useWindowMins as m}from"../../internal/window-class.js";import{responsiveSlots as l,withBaseline as f}from"../../internal/responsive.js";import{useMPDensity as d,useMPSize as p}from"../../internal/config.js";const c={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 MPFooter=/*@__PURE__*/o.forwardRef(function({position:u="static",variant:b="outlined",elevation:x,size:j,density:v,maxWidth:y="none",padded:w=!0,label:z,render:h,className:g,children:k,...N},B){const C=p(j),$=d(v),_=m(),{register:F}=o.useContext(n),M=o.useCallback(e=>{F("footer",e),"function"==typeof B?B(e):B&&(B.current=e)},[F,B]);return t({render:h??e("footer",{}),ref:M,props:{"aria-label":z,"data-mp-size":C,"data-mp-variant":b,className:["mp-footer text-mp-on-surface box-border w-full min-w-0",r(b,x),"outlined"===b?"border-mp-outline-variant border-t":"",c[u],g??""].filter(Boolean).join(" "),children:e("div",{className:["mp-footer__inner w-full",w?`${i(C,$)} ${a(C,$)}`:"","none"===y?"":"mp-measure mx-auto"].filter(Boolean).join(" "),style:"none"===y?void 0:l("measure",f(y,"none"),e=>s(e,_)),children:k}),...N}})});

package/dist/components/form/MPForm.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{SHEET_GAP as i}from"../../internal/scale.js";export const MPForm=/*@__PURE__*/o.forwardRef(function({validationMode:o="onSubmit",errors:m,onSubmit:a,size:t="md",className:n,children:s,...f},l){return r(e,{ref:l,validationMode:o,errors:m,onFormSubmit:r=>a?.(r),"data-mp-size":t,className:["mp-form flex flex-col",i[t],n??""].filter(Boolean).join(" "),...f,children:s})});
+import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{useMPSize as i}from"../../internal/config.js";import{SHEET_GAP as t}from"../../internal/scale.js";export const MPForm=/*@__PURE__*/o.forwardRef(function({validationMode:o="onSubmit",errors:m,onSubmit:a,size:n,className:s,children:f,...l},c){const d=i(n);return r(e,{ref:c,validationMode:o,errors:m,onFormSubmit:r=>a?.(r),"data-mp-size":d,className:["mp-form flex flex-col",t[d],s??""].filter(Boolean).join(" "),...l,children:f})});

package/dist/components/gauge-chart/MPGaugeChart.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPThreshold } from '../../types.js';
+export interface MPGaugeChartProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /** The reading. */
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /**
+     * How far round the dial goes, in degrees, centred on twelve o'clock.
+     *
+     * `180` is a half dial sitting on its base; `240` is the classic gauge, open
+     * at the bottom. Past about 300 the two ends meet and the reader can no
+     * longer tell the start from the finish.
+     * @default 240
+     */
+    sweep?: number;
+    /** What the reading is called, under the figure. */
+    label?: React.ReactNode;
+    /**
+     * Where the reading changes colour. The last threshold it has reached wins,
+     * so they are listed smallest first.
+     */
+    thresholds?: readonly MPThreshold[];
+    /**
+     * Paints the **track** in threshold bands as well as the fill, so a reader
+     * sees where the trouble starts before the needle gets there.
+     * @default false
+     */
+    bands?: boolean;
+    /** The family the dial carries before any threshold is reached. @default 'primary' */
+    color?: MPColor;
+    /** How the figure in the middle is written. */
+    format?: Intl.NumberFormatOptions;
+    /** Which language that figure is written in. */
+    locale?: string;
+    /** How tall the drawing is. Defaults to the `size` ladder. */
+    height?: number | string;
+    /** @default 'md' */
+    size?: MPSize;
+}
+/**
+ * One reading on a dial.
+ *
+ * ```tsx
+ * <MPGaugeChart value={72} label="CPU" thresholds={[{ from: 80, color: 'error' }]} />
+ * ```
+ *
+ * ## Consider not using one
+ *
+ * A gauge spends a whole panel on a single number, and the arc adds nothing a
+ * reader could not get from the figure and a bar: an angle is judged less
+ * accurately than a length, and a dial's ends are the two places the eye is
+ * worst at. [MPStatistic](statistic) with an [MPMeter](../feedback/meter) under
+ * it says the same thing in a third of the room and reads better.
+ *
+ * What a gauge is genuinely good for is a **thresholded** reading somebody
+ * watches — a dial where the amber band is drawn on the face, so the question
+ * "how close is this to trouble" is answered by where the needle sits rather
+ * than by arithmetic. That is what `bands` is for, and it is the case worth
+ * reaching for this shape over the other two.
+ *
+ * ## It is a meter, in the markup
+ *
+ * `role="meter"` with the value, the minimum and the maximum on it — the same
+ * semantics [MPMeter](../feedback/meter) carries, because they are the same
+ * quantity in two shapes. There is no table behind it and no hover layer: a
+ * chart of one number has nothing a reader could uncover that the figure in the
+ * middle is not already saying.
+ *
+ * ## Thresholds name roles
+ *
+ * `{ from: 80, color: 'error' }` and never a hex, so a dial and a bar on the
+ * same page cannot disagree about where the amber starts. Both read the same
+ * resolver.
+ */
+export declare function MPGaugeChart({ value, min, max, sweep, label, thresholds, bands, color: colorProp, format, locale: localeProp, height, size: sizeProp, className, style, ...props }: MPGaugeChartProps): React.JSX.Element;

package/dist/components/gauge-chart/MPGaugeChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Meter as l}from"@base-ui/react/meter";import{useMPElementSize as r}from"../../hooks/useMPElementSize.js";import{useMPColor as o,useMPSize as m}from"../../internal/config.js";import{useMPLocale as i}from"../../internal/locale.js";import{accentSlots as s}from"../../internal/accent.js";import{thresholdColor as n}from"../../internal/threshold.js";import{progressFraction as c}from"../../internal/progress.js";import{CHART_FONT_SIZE as h,PLOT_HEIGHT as p,arcPath as f,formatStatistic as u}from"../../internal/chart.js";import{cssLength as d}from"../../internal/length.js";import{META_TEXT as x}from"../../internal/scale.js";const g={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-display-small"};export function MPGaugeChart({value:v,min:j=0,max:M=100,sweep:_=240,label:b,thresholds:y,bands:w=!1,color:N,format:P,locale:$,height:z,size:I,className:k,style:B,...R}){const C=m(I),E=o(N),G=i($),L=a.useRef(null),S=r(L),V=c(v,j,M)??0,W=n(v,E,y),q=h[C],A=S.width,D="number"==typeof z?z:void 0===z?p[C]:S.height,F=Math.min(300,Math.max(30,_))*Math.PI/180,H=F/2,J=H>Math.PI/2?Math.cos(Math.PI-H):0,K=Math.min(A/2,D/(1+J)),O=Math.max(0,K-2),Q=.78*O,T=A/2,U=O+2,X=-H,Y=H,Z=X+V*F,ee=a.useMemo(()=>{if(!w||!y||0===y.length)return[{from:0,to:1,color:E}];const e=[...y.map(e=>({at:c(e.from,j,M)??0,color:e.color})).filter(e=>e.at>0&&e.at<1).sort((e,t)=>e.at-t.at)],t=[];let a=0,l=E;for(const r of e)t.push({from:a,to:r.at,color:l}),a=r.at,l=r.color;return t.push({from:a,to:1,color:l}),t},[w,y,E,j,M]),te=u(v,G,P,!1);return t(l.Root,{value:v,min:j,max:M,format:P,"data-mp-size":C,className:["mp-gauge-chart flex min-w-0 flex-col items-center",k??""].filter(Boolean).join(" "),style:{...s(W),...B},...R,children:[t("div",{ref:L,className:"mp-gauge-chart__dial relative w-full",style:{height:d(z)??p[C]},children:[A>0&&O>0?t("svg",{width:A,height:D,viewBox:`0 0 ${A} ${D}`,"aria-hidden":"true",className:"block overflow-visible",children:[ee.map((t,a)=>e("path",{d:f(T,U,O,Q,X+t.from*F,X+t.to*F),fill:w?`var(--_mp-color-${t.color})`:"var(--_mp-color-on-surface)",opacity:w?.22:.12},a)),e("path",{d:f(T,U,O,Q,X,Z),fill:"var(--_mp-accent)"}),e("path",{d:f(T,U,O,Q,X,X+.004*F),fill:"var(--_mp-color-outline)"}),e("path",{d:f(T,U,O,Q,Y-.004*F,Y),fill:"var(--_mp-color-outline)"})]}):null,t("div",{className:"pointer-events-none absolute inset-x-0 flex flex-col items-center",style:{top:U-.45*Q},children:[e(l.Value,{className:`mp-gauge-chart__value text-mp-on-surface font-medium tabular-nums ${g[C]}`,children:e=>P?e:te}),b?e(l.Label,{className:`mp-gauge-chart__label text-mp-on-surface-variant ${x}`,style:{maxWidth:1.8*Q},children:b}):null]})]}),J>0?e("span",{"aria-hidden":"true",style:{height:q/2}}):null]})}

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

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

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

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

package/dist/components/grid/MPGrid.d.ts

@@ -14,6 +14,20 @@ export type MPGridJustify = 'start' | 'center' | 'end' | 'space-between' | 'spac
 export type MPGridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 /** The same, for one item overriding the row it is in. */
 export type MPGridAlignSelf = MPGridAlign | 'auto';
+/**
+ * How wide one item is: a number of the grid's columns, or `'grow'`.
+ *
+ * `'grow'` is the one value that is not a measurement. It is "whatever the row
+ * has left after everybody else has taken theirs", which is the width a
+ * thumbnail's neighbour wants and the one thing a twelve-column arithmetic
+ * cannot express — the remainder is only known once the other items in *that*
+ * row have been laid out, and no `span` a caller writes down knows what else is
+ * in the row.
+ *
+ * Two growing items in a row split the remainder equally rather than by their
+ * contents, which is the useful half of what makes it predictable.
+ */
+export type MPGridSpan = number | 'grow';
 export interface MPGridProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How many columns a row is divided into. Every `span` and every `offset`
@@ -74,9 +88,17 @@ export interface MPGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
      * own window class up, so two of them usually describe a whole layout.
      *
      * A span wider than the row is clamped to the row rather than overflowing.
+     *
+     * `span="grow"` is the exception to all of the above: it takes the width the
+     * row has left rather than a share of it, which is the layout a thumbnail
+     * beside a body of text wants — `<MPGridItem span={3}>` for the picture and
+     * `<MPGridItem span="grow">` for the words, with no arithmetic to keep in step
+     * when the picture's column count changes. It is responsive like any other
+     * value: `span={{ compact: 12, medium: 'grow' }}` stacks on a phone and fills
+     * the rest of the row from 600dp.
      * @default the grid's full width
      */
-    span?: MPResponsive<number>;
+    span?: MPResponsive<MPGridSpan>;
     /**
      * Columns left empty *before* the item — space pushed in ahead of it, not an
      * absolute position in the row. First in a twelve-column row, `offset={4}` with

package/dist/components/grid/MPGrid.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const n=["compact","medium","expanded","large","extra-large"];function r(e,t,r){const a=function(e){return null==e?{}:"object"==typeof e?e:{compact:e}}(t),s={};for(const t of n){const n=a[t];void 0!==n&&(s[`--_mp-${e}-${t}`]=r(n))}return s}function a(e,t){return null==e?t:"object"==typeof e?{compact:t,...e}:e}function s(e){return String(Math.max(1,Math.round(e)))}function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(0,Math.round(e)))}function i(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const l={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},f={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},u={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},p={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:o,columnSpacing:c,justifyContent:p,alignItems:d,alignContent:m,wrap:y=!0,render:g,className:h,style:x,children:b,...j},w){return t({render:g,ref:w,props:{className:["mp-grid flex",y?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",p?l[p]:"",d?f[d]:"",m?u[m]:"",h??""].filter(Boolean).join(" "),style:{...r("cols",a(e,12),s),...r("gap-x",a(c??n,4),i),...r("gap-y",a(o??n,4),i),...x},children:b,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:a,render:s,className:i,style:l,children:f,...u},d){return t({render:s,ref:d,props:{className:["mp-grid-item",a?p[a]:"",i??""].filter(Boolean).join(" "),style:{...r("span",e,o),...r("offset",n,c),...l},children:f,...u}})});
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{classMap as n,responsiveSlots as r,withBaseline as s}from"../../internal/responsive.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(1,Math.round(e)))}function i(e){const t=n(e),r=Object.values(t).some(e=>"grow"===e),s={};for(const e of a){const n=t[e];void 0!==n&&("grow"!==n&&(s[`--_mp-span-${e}`]=c(n)),r&&(s[`--_mp-grow-${e}`]="grow"===n?"1":"0"))}return s}function l(e){return String(Math.max(0,Math.round(e)))}function f(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const p={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},u={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},m={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},d={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:a,columnSpacing:c,justifyContent:i,alignItems:l,alignContent:d,wrap:g=!0,render:y,className:h,style:w,children:x,...j},b){return t({render:y,ref:b,props:{className:["mp-grid flex",g?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",i?p[i]:"",l?u[l]:"",d?m[d]:"",h??""].filter(Boolean).join(" "),style:{...r("cols",s(e,12),o),...r("gap-x",s(c??n,4),f),...r("gap-y",s(a??n,4),f),...w},children:x,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:s,render:a,className:o,style:c,children:f,...p},u){return t({render:a,ref:u,props:{className:["mp-grid-item",s?d[s]:"",o??""].filter(Boolean).join(" "),"data-mp-offset":null==n?void 0:"",style:{...i(e),...r("offset",n,l),...c},children:f,...p}})});

package/dist/components/header/MPHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAlign, MPPosition, MPSize, MPVariant } from '../../types.js';
+import type { MPAlign, MPDensity, MPMeasure, MPPosition, MPResponsive, MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPHeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'title'> {
     /**
      * The leading slot: the mark, the product's name, the thing that is the same
@@ -50,6 +50,16 @@ export interface MPHeaderProps extends Omit<React.ComponentPropsWithoutRef<'head
      * @default 'tonal'
      */
     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 bar's height floor, its gutter and the air between its slots.
      *
@@ -59,13 +69,25 @@ export interface MPHeaderProps extends Omit<React.ComponentPropsWithoutRef<'head
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of the bar's gutter.
+     *
+     * The height floor is `size`'s and stays where it is: a top app bar that a
+     * dense page shrank would move every fixed thing under it, and the bar is the
+     * one part of a screen a reader locates by position. What tightens is the
+     * room at its edges.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * Holds the row of slots to a measure and centres it while the sheet itself
-     * still spans the window. The same ladder [MPContainer](./container)'s
-     * `maxWidth` uses, so a header and the container under it line up on one edge.
+     * still spans the window. The same prop [MPContainer](./container)'s
+     * `maxWidth` is — a rung of the size ladder, a CSS length of your own, or a
+     * map keyed by window size class — so a header and the container under it line
+     * up on one edge by being given the same value.
      * @default 'none'
      */
-    maxWidth?: MPSize | 'none';
+    maxWidth?: MPResponsive<MPMeasure>;
     /**
      * The gutter down each side of the row.
      * @default true

package/dist/components/header/MPHeader.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as i}from"@base-ui/react/use-render";import{BAR_SURFACE as n,MPPageLayoutContext as r}from"../../internal/page-layout.js";import{hasContent as s,MEASURE as l,SHEET_PAD_X as m}from"../../internal/scale.js";const d={xs:"min-h-12",sm:"min-h-14",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},o={xs:"text-mp-title-small",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},c={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},p={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},x={static:"",absolute:"absolute inset-x-0 top-0 z-30",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},f={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},u={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const MPHeader=/*@__PURE__*/a.forwardRef(function({brand:h,actions:g,align:b="start",position:j="sticky",variant:v="tonal",size:w="md",maxWidth:y="none",padded:N=!0,label:k,render:_,className:z,children:$,...B},C){const{register:H}=a.useContext(r),M=a.useCallback(e=>{H("header",e),"function"==typeof C?C(e):C&&(C.current=e)},[H,C]);return i({render:_??e("header",{}),ref:M,props:{"aria-label":k,"data-mp-size":w,"data-mp-variant":v,className:["mp-header text-mp-on-surface box-border w-full min-w-0",n[v],"outlined"===v?"border-mp-outline-variant border-b":"",x[j],z??""].filter(Boolean).join(" "),children:t("div",{className:["flex w-full items-center",d[w],p[w],N?m[w]:"","none"===y?"":`${l[y]} mx-auto`].filter(Boolean).join(" "),children:[s(h)?e("div",{className:["mp-header__brand flex min-w-0 items-center",f[b],c[w],o[w]].join(" "),children:h}):"center"===b?e("div",{"aria-hidden":"true",className:f[b]}):null,s($)?e("div",{className:`mp-header__middle ${u[b]} ${c[w]}`,children:$}):null,s(g)?e("div",{className:["mp-header__actions flex min-w-0 items-center justify-end",f[b],c[w]].join(" "),children:g}):"center"===b?e("div",{"aria-hidden":"true",className:f[b]}):null]}),...B}})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{useRender as n}from"@base-ui/react/use-render";import{barSurface as r,MPPageLayoutContext as a}from"../../internal/page-layout.js";import{hasContent as s}from"../../internal/scale.js";import{sheetPadX as l}from"../../internal/density.js";import{measureValue as m}from"../../internal/measure.js";import{useWindowMins as o}from"../../internal/window-class.js";import{responsiveSlots as d,withBaseline as c}from"../../internal/responsive.js";import{useMPDensity as p,useMPSize as f}from"../../internal/config.js";const x={xs:"min-h-12",sm:"min-h-14",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},u={xs:"text-mp-title-small",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},h={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},g={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},j={static:"",absolute:"absolute inset-x-0 top-0 z-30",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},b={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},v={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const MPHeader=/*@__PURE__*/i.forwardRef(function({brand:y,actions:w,align:N="start",position:k="sticky",variant:_="tonal",elevation:z,size:B,density:C,maxWidth:$="none",padded:H=!0,label:M,render:P,className:R,children:W,...q},A){const D=f(B),E=p(C),F=o(),{register:G}=i.useContext(a),I=i.useCallback(e=>{G("header",e),"function"==typeof A?A(e):A&&(A.current=e)},[G,A]);return n({render:P??e("header",{}),ref:I,props:{"aria-label":M,"data-mp-size":D,"data-mp-variant":_,className:["mp-header text-mp-on-surface box-border w-full min-w-0",r(_,z),"outlined"===_?"border-mp-outline-variant border-b":"",j[k],R??""].filter(Boolean).join(" "),children:t("div",{className:["flex w-full items-center",x[D],g[D],H?l(D,E):"","none"===$?"":"mp-measure mx-auto"].filter(Boolean).join(" "),style:"none"===$?void 0:d("measure",c($,"none"),e=>m(e,F)),children:[s(y)?e("div",{className:["mp-header__brand flex min-w-0 items-center",b[N],h[D],u[D]].join(" "),children:y}):"center"===N?e("div",{"aria-hidden":"true",className:b[N]}):null,s(W)?e("div",{className:`mp-header__middle ${v[N]} ${h[D]}`,children:W}):null,s(w)?e("div",{className:["mp-header__actions flex min-w-0 items-center justify-end",b[N],h[D]].join(" "),children:w}):"center"===N?e("div",{"aria-hidden":"true",className:b[N]}):null]}),...q}})});

package/dist/components/heatmap-chart/MPHeatmapChart.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/ChartChrome.js';
+import type { MPChartAxis, MPChartCategory, MPChartSeries } from '../../types.js';
+export interface MPHeatmapChartProps extends ChartBaseProps {
+    /**
+     * The rows. Each series is one row and its `data` are that row's cells, in
+     * the order `categories` names the columns.
+     */
+    series: readonly MPChartSeries[];
+    /** The column headings. */
+    categories?: readonly MPChartCategory[];
+    /** The column axis. Only `label`, `hidden` and `tickFormat` mean anything here. */
+    xAxis?: MPChartAxis;
+    /** The row axis, same three. */
+    yAxis?: MPChartAxis;
+    /**
+     * Where the colour scale starts and ends. Taken from the data otherwise.
+     *
+     * Worth pinning when two heatmaps are meant to be compared: without it each
+     * one scales to its own range, and the darkest cell of a quiet week looks
+     * exactly like the darkest cell of a bad one.
+     */
+    min?: number;
+    max?: number;
+    /**
+     * Writes each cell's value in it, where the cell is big enough to hold the
+     * text. One that does not fit is dropped rather than clipped.
+     * @default false
+     */
+    valueLabels?: boolean;
+}
+/**
+ * A grid of cells, coloured by how much.
+ *
+ * ```tsx
+ * <MPHeatmapChart
+ *   categories={['Mon', 'Tue', 'Wed']}
+ *   series={[
+ *     { name: '09:00', data: [4, 9, 2] },
+ *     { name: '10:00', data: [7, 12, 5] }
+ *   ]}
+ * />
+ * ```
+ *
+ * Two categorical axes and a magnitude in the cells. It is the shape for a
+ * pattern across two dimensions — a week by hour, a cohort by month — where
+ * what a reader is looking for is *where* the dense part is rather than what
+ * any one cell holds.
+ *
+ * ## Its colour is a ramp, not the palette
+ *
+ * The eight chart slots are an **identity** channel: they say which series, and
+ * nobody can tell whether slot 6 is more than slot 3. A cell's colour here has
+ * to say how much, so it comes from a sequential ramp instead — one hue, five
+ * steps, running pale to deep on a light page and deep to bright on a dark one,
+ * because "more" has to be further from the page in both.
+ *
+ * That also sidesteps the cap the palette runs into: every cell touches its
+ * neighbours, and colour separates only three touching series. A ramp is not
+ * being asked to separate anything — it is being asked to be ordered.
+ *
+ * ## Steps rather than a gradient
+ *
+ * A smooth fill looks better and reads worse. Given a gradient a reader can say
+ * "darker" and nothing else; given five steps they can match a cell to a band
+ * in the legend and come away with a number.
+ *
+ * ## Pin the scale to compare two of them
+ *
+ * By default each heatmap scales to its own range, so two side by side say
+ * nothing to each other — the darkest cell of a quiet week looks exactly like
+ * the darkest cell of a bad one. Give both the same `min` and `max` when the
+ * comparison is the point.
+ */
+export declare function MPHeatmapChart({ series, categories, xAxis, yAxis, min, max, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, className, style, ...rest }: MPHeatmapChartProps): React.JSX.Element;

package/dist/components/heatmap-chart/MPHeatmapChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useMPElementSize as n}from"../../hooks/useMPElementSize.js";import{useMPLocale as a,useMPMessages as r}from"../../internal/locale.js";import{useMPSize as o}from"../../internal/config.js";import{CHART as i}from"../../internal/messages/chart.js";import{TABLE as m}from"../../internal/messages/table.js";import{ChartShell as s,ChartTable as c,ChartTooltipPanel as h}from"../../internal/ChartChrome.js";import{CHART_FONT_SIZE as u,MARK_GAP as d,PLOT_HEIGHT as f,RAMP_STEPS as p,formatCategory as x,formatStatistic as g,rampFill as v,rampInk as y,rampStep as w,textWidth as b,toValues as k,truncate as M}from"../../internal/chart.js";export function MPHeatmapChart({series:j,categories:A,xAxis:N,yAxis:S,min:$,max:_,valueLabels:z=!1,height:B,format:C,locale:P,label:D,legend:R,tooltip:L,empty:E,size:F,className:I,style:W,...H}){const K=o(F),U=a(P),X=r(i,U),Y=r(m,U),q=t.useRef(null),G=n(q),J=t.useId(),[O,Q]=t.useState(null),T=t.useMemo(()=>k(j),[j]),V=T.reduce((e,l)=>Math.max(e,l.length),0),Z=t.useCallback(e=>g(e,U,C,!0),[C,U]),ee=j.map((e,l)=>e.name??String(l+1)),le=Array.from({length:V},(e,l)=>N?.tickFormat?String(N.tickFormat(A?.[l]??l,l)):x(A?.[l]??l,U)),te=T.flat().filter(e=>null!==e.value),ne=$??(te.length>0?Math.min(...te.map(e=>e.value)):0),ae=_??(te.length>0?Math.max(...te.map(e=>e.value)):0),re=ae-ne||1,oe=u[K],ie=G.width,me="number"==typeof B?B:void 0===B?f[K]:G.height,se=ee.reduce((e,l)=>Math.max(e,b(l,oe)),0),ce=S?.hidden?0:S?.thickness??Math.min(140,se+10),he=N?.hidden?0:N?.thickness??oe+12,ue=ce,de=0,fe=Math.max(0,ie-ce),pe=Math.max(0,me-he),xe=V>0?fe/V:0,ge=T.length>0?pe/T.length:0,ve=(e,l)=>{Q(t=>{const n=t??{row:0,column:0};return{row:Math.min(T.length-1,Math.max(0,n.row+(t?e:0))),column:Math.min(V-1,Math.max(0,n.column+(t?l:0)))}})},ye=O?T[O.row]?.[O.column]??null:null,we=O&&ye&&null!==ye.value?[{seriesIndex:O.row,name:ee[O.row],color:v(w((ye.value-ne)/re)),value:ye.value,formatted:Z(ye.value),label:ye.label}]:[],be=!1===L?{mode:"none"}:!0===L||void 0===L?{}:L,ke=!1!==R&&te.length>0,Me=0===V||0===T.length||0===te.length,je=Array.from({length:V},(e,l)=>T.map(e=>e[l]??{value:null}));return e(s,{...H,size:K,className:["mp-heatmap-chart",I??""].filter(Boolean).join(" "),style:W,plotRef:q,name:D??X.label,describedBy:Me?void 0:J,interactive:!Me,height:B,legendSide:"bottom",plotProps:{onPointerMove:Me||"none"===be.mode?void 0:e=>Q(((e,l)=>{const t=q.current;if(!t||xe<=0||ge<=0)return null;const n=t.getBoundingClientRect(),a=Math.floor((e-n.left-ue)/xe),r=Math.floor((l-n.top-de)/ge);return a<0||a>=V||r<0||r>=T.length?null:{row:r,column:a}})(e.clientX,e.clientY)),onPointerLeave:()=>Q(null),onKeyDown:Me||"none"===be.mode?void 0:e=>{if("ArrowRight"===e.key)ve(0,1);else if("ArrowLeft"===e.key)ve(0,-1);else if("ArrowDown"===e.key)ve(1,0);else if("ArrowUp"===e.key)ve(-1,0);else{if("Escape"!==e.key)return;Q(null)}e.preventDefault()},onBlur:()=>Q(null)},tooltip:O&&we.length>0&&"none"!==be.mode?e(h,{heading:`${ee[O.row]} · ${le[O.column]}`,items:we,x:ue+(O.column+.5)*xe,y:de+(O.row+.5)*ge,flip:O.column>V/2,size:K}):null,legend:ke?l("div",{className:"mp-chart__legend flex items-center justify-center gap-2",children:[e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:Z(ne)}),e("span",{className:"flex","aria-hidden":"true",children:Array.from({length:p},(l,t)=>e("span",{className:"block h-3 w-6 first:rounded-s-mp-xs last:rounded-e-mp-xs",style:{background:v(t)}},t))}),e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:Z(ae)})]}):null,status:{heading:O?`${ee[O.row]} · ${le[O.column]}`:void 0,items:we},table:Me?null:e(c,{id:J,caption:D??X.table,corner:S?.label??X.category,categories:ee,names:le,values:je,format:Z,locale:U,empty:Y.empty}),children:Me?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:E??Y.empty}):ie>0&&me>0?l("svg",{width:ie,height:me,viewBox:`0 0 ${ie} ${me}`,"aria-hidden":"true",className:"block overflow-visible",children:[e("g",{className:"mp-heatmap-chart__cells",children:T.map((t,n)=>Array.from({length:V},(a,r)=>{const o=t[r],i=O?.row===n&&O?.column===r,m=ue+r*xe,s=de+n*ge,c=Math.max(0,xe-d),h=Math.max(0,ge-d);if(!o||null===o.value)return e("rect",{x:m+d/2,y:s+d/2,width:c,height:h,fill:"none",stroke:"var(--_mp-color-outline-variant)",strokeWidth:1,strokeDasharray:"2 2",rx:2},r);const u=w((o.value-ne)/re);return l("g",{children:[e("rect",{x:m+d/2,y:s+d/2,width:c,height:h,fill:o.color??v(u),rx:2,stroke:i?"var(--_mp-color-on-surface)":"none",strokeWidth:i?2:0}),z&&c>b(Z(o.value),oe)+8&&h>oe+4?e("text",{x:m+xe/2,y:s+ge/2,textAnchor:"middle",dominantBaseline:"central",fill:y(u),fontSize:oe,children:Z(o.value)}):null]},r)}))}),S?.hidden?null:ee.map((l,t)=>e("text",{x:ue-8,y:de+(t+.5)*ge,textAnchor:"end",dominantBaseline:"central",fill:"var(--_mp-color-on-surface-variant)",fontSize:oe,children:M(l,ce-10,oe)},`r${t}`)),N?.hidden?null:le.map((l,t)=>e("text",{x:ue+(t+.5)*xe,y:de+pe+oe+4,textAnchor:"middle",fill:"var(--_mp-color-on-surface-variant)",fontSize:oe,children:M(l,xe-2,oe)},`c${t}`))]}):null})}

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

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

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

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