material-plus-ui 1.6.0 → 1.8.0

package/dist/components/scroll-zone/MPScrollZone.d.ts

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize, MPVariant } from '../../types.js';
+/**
+ * When the two scroll buttons are drawn.
+ *
+ * - `auto` — neither while everything fits, and at an end whichever costs less.
+ *   An `overlay` button with nowhere to go is removed, an `inline` one is drawn
+ *   `disabled`. The default.
+ * - `always` — both, from the first paint, `disabled` rather than gone at an
+ *   end. What a strip whose content arrives from a fetch wants, so the buttons
+ *   are not appearing under the pointer half a second in.
+ * - `none` — none at all. The wheel, a finger, a drag and the arrow keys are
+ *   all still there; this is the strip that scrolls the way a phone scrolls.
+ */
+export type MPScrollZoneButtons = 'auto' | 'always' | 'none';
+/**
+ * Where those buttons sit, which is also where the strip ends.
+ *
+ * - `inline` — beside the strip, in the layout. The default. The scroller stops
+ *   where the button starts, so an item is cut off at the button's edge rather
+ *   than sliding under it: nothing is ever half-hidden behind a control.
+ * - `overlay` — over the ends of the strip, which keeps every pixel of the box
+ *   for content. What a shelf of pictures wants, where the thing under the
+ *   button is a picture that carries on.
+ *
+ * The lane an `inline` button sits in is held open even while that button has
+ * nowhere to go, or the strip would resize under the pointer each time it
+ * reached an end. That is also what decides what `buttons="auto"` does there:
+ * the lane is paid for either way, so an inline button stays and goes
+ * `disabled`, while an overlay one — whose absence is free — is removed.
+ */
+export type MPScrollZoneButtonPlacement = 'inline' | 'overlay';
+/**
+ * What pressing one does.
+ *
+ * - `item` — moves to the next child along, `step` of them at a time. The
+ *   default, and the only one that lands on something rather than between two
+ *   things.
+ * - `page` — moves by everything currently in view, the way Page Down does.
+ * - `hold` — travels for as long as the button is held, at `speed` pixels a
+ *   second. A press too short to be a hold moves one item instead, so the
+ *   button is never dead to a quick tap.
+ */
+export type MPScrollZoneMode = 'item' | 'page' | 'hold';
+export interface MPScrollZoneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the children run, and so which way the zone scrolls.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * How many rows a horizontal zone lays its children out in before it starts a
+     * new column, and how many columns a vertical one uses. `2` is the shelf that
+     * holds twice as much in the same width.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * The space between children. A number is pixels, a string is any CSS length.
+     * @default 8
+     */
+    gap?: number | string;
+    /** When the scroll buttons are drawn. @default 'auto' */
+    buttons?: MPScrollZoneButtons;
+    /**
+     * Whether they sit beside the strip or over it.
+     * @default 'inline'
+     */
+    buttonPlacement?: MPScrollZoneButtonPlacement;
+    /** What pressing one does. @default 'item' */
+    mode?: MPScrollZoneMode;
+    /** How many children one press moves, in `item` mode. @default 1 */
+    step?: number;
+    /** How fast a held button travels, in pixels a second. @default 900 */
+    speed?: number;
+    /**
+     * Snaps the nearest child to the leading edge when the scrolling stops. The
+     * wheel and a drag included, not only the buttons.
+     * @default false
+     */
+    snap?: boolean;
+    /**
+     * Lets a mouse or a pen drag the strip along, the way a finger already can.
+     *
+     * Touch is left to the browser, whose own scrolling beats anything a handler
+     * can imitate: momentum, rubber-banding and the scrollbar all come with it.
+     * @default true
+     */
+    drag?: boolean;
+    /**
+     * Turns a wheel rolled over the strip into travel along it — the one axis a
+     * mouse has, on a strip that does not run along it.
+     *
+     * Off by default, because a wheel taken from the page is the page's: a reader
+     * who meant to scroll past the shelf is held by it instead. What it does take
+     * it gives back at the ends, so a strip with nothing left ahead of it is
+     * something to scroll past rather than something to be caught in. A trackpad
+     * swiping sideways is left alone, and a vertical zone ignores the prop —
+     * there the wheel already points the way the strip runs.
+     * @default false
+     */
+    wheel?: boolean;
+    /** Shows the browser's own scrollbar under the strip. @default false */
+    scrollbar?: boolean;
+    /**
+     * How the scroll buttons are drawn.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * The size of those buttons, and how far they sit from the strip. Not the
+     * size of a child, which is whatever the caller made it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** Which accent family they read. @default 'primary' */
+    color?: MPColor;
+    /** What the strip is called: "Categories", "Recent files". */
+    label?: string;
+    /** Defaults to the wording in `locale`. */
+    previousLabel?: string;
+    /** The same. */
+    nextLabel?: string;
+    /**
+     * Which language the buttons name themselves in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The strip. Every top-level child is one item of it. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of anything, laid out in one direction and scrolled in it.
+ *
+ * The mechanism is an ordinary scroll container, and everything the component
+ * offers is a way of driving one. Swiping on a phone, two-finger dragging on a
+ * trackpad, the arrow keys and the scrollbar are the browser's own and are never
+ * intercepted. What is added on top is a pair of buttons for the pointer that
+ * has neither a wheel nor a finger, a mouse drag for the strip that reads as
+ * something to pull, and — only where it is asked for — the wheel turned onto
+ * the axis the strip runs along.
+ *
+ * ```tsx
+ * <MPScrollZone label="Categories">
+ *   <MPChip>Coffee</MPChip>
+ *   <MPChip>Tea</MPChip>
+ * </MPScrollZone>
+ * ```
+ *
+ * ## Nothing is transformed
+ *
+ * A translated track would have to argue for an exception to the rule the rest
+ * of the library keeps; a scroll offset does not. It is also what makes the
+ * strip run the other way under RTL without being told, keeps the scrollbar
+ * honest, and lets the browser scroll a focused child into view on its own.
+ *
+ * ## What separates it from `MPCarousel`
+ *
+ * `lines`, and what it implies. A carousel is one thing at a time and knows
+ * which one — it has a `value`, an index, and a row of marks saying where the
+ * reader is. A scroll zone has none of those, because it is a shelf that
+ * happens to be longer than the room it is in: there is no current item to
+ * report, and two rows of thumbnails is a shape a carousel cannot hold.
+ */
+export declare const MPScrollZone: React.ForwardRefExoticComponent<MPScrollZoneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-zone/MPScrollZone.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIconButton as r}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as l,ChevronDownIcon as s}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{cssLength as c}from"../../internal/length.js";import{useMPLocale as u,useMPMessages as d}from"../../internal/locale.js";import{SCROLL as m}from"../../internal/messages/scroll.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{useMPColor as p,useMPSize as b}from"../../internal/config.js";const v={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},w={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const MPScrollZone=/*@__PURE__*/n.forwardRef(function({orientation:h="horizontal",lines:g=1,gap:y=8,buttons:x="auto",buttonPlacement:k="inline",mode:L="item",step:E=1,speed:j=900,snap:M=!1,drag:C=!0,wheel:P=!1,scrollbar:z=!1,variant:R="filled",size:N,color:T,label:A,previousLabel:B,nextLabel:D,locale:W,className:S,style:F,children:I,...Y},_){const H=b(N),X=p(T),q=d(m,u(W)),K="horizontal"===h,O=Math.max(1,Math.round(g)),$=Math.max(1,Math.round(E)),V="inline"===k,Z=n.useRef(null),G=n.useRef(null),[J,Q]=n.useState({back:!1,forward:!1}),U=n.useCallback(()=>{const e=Z.current;if(!e)return;const t=K?e.clientWidth:e.clientHeight,n=K?e.scrollWidth:e.scrollHeight,r=Math.abs(K?e.scrollLeft:e.scrollTop);Q(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[K]);n.useEffect(()=>{const e=Z.current,t=G.current;if(U(),!e||"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(U);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[U]);const ee=n.useCallback(()=>{const e=Z.current;return e&&K&&"rtl"===getComputedStyle(e).direction?-1:1},[K]),te=n.useCallback((e,t)=>{const n=Z.current;if(!n)return;const r=t?"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"auto":"smooth":"auto";n.scrollBy(K?{left:e,behavior:r}:{top:e,behavior:r})},[K]),ne=n.useCallback(()=>{const e=Z.current,t=G.current;if(!e||!t)return[];const n=K&&"rtl"===getComputedStyle(e).direction,r=K?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],l=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);l.includes(t)||l.push(t)}return l.sort((e,t)=>e-t)},[K]),re=n.useCallback((e,t=L)=>{const n=Z.current;if(!n)return;const r=ee(),o=K?n.clientWidth:n.clientHeight;if("page"===t)return void te(o*(e?1:-1)*r,!0);const i=ne(),l=i.filter(e=>e>1),s=i.filter(e=>e<-1),a=e?l[$-1]:s[s.length-$];te(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[ee,K,ne,$,L,te]),oe=n.useRef(null);n.useEffect(()=>()=>oe.current?.(),[]);const ie=n.useCallback((e,t)=>{if(oe.current)return;const n=ee(),r=performance.now();let o=r,i=0;const l=t=>{const r=t-o;o=t,te(j*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(l)};i=requestAnimationFrame(l);const s=()=>{cancelAnimationFrame(i),oe.current=null,window.removeEventListener(t,s),window.removeEventListener("pointercancel",s),window.removeEventListener("blur",s),performance.now()-r<140&&re(e,"item")};oe.current=s,window.addEventListener(t,s),window.addEventListener("pointercancel",s),window.addEventListener("blur",s)},[re,ee,te,j]),le=n.useRef(null);function se(e){return"hold"!==L?{onClick:()=>re(e)}:{onPointerDown:t=>{0===t.button&&ie(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),ie(e,"keyup"))}}}n.useEffect(()=>()=>le.current?.(),[]),n.useEffect(()=>{const e=Z.current;if(!e||!P||!K)return;const t=t=>{if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,r=t.deltaY*n;if(!r)return;const o=Math.abs(e.scrollLeft);(r>0?e.scrollWidth-e.clientWidth-o>1:o>1)&&(t.preventDefault(),te(r*ee(),!1))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[ee,K,te,P]);const ae="none"!==x&&("always"===x||J.back||J.forward);function ce(t){const n=t?J.forward:J.back;if("auto"===x&&!n&&!V)return e("span",{});const a=e(r,{variant:R,size:H,color:X,label:t?D??q.next:B??q.previous,disabled:!n,className:"pointer-events-auto",icon:e(o,{icon:K?t?l:i:s,size:f[H],className:K?"rtl:rotate-180":t?"":"rotate-180"}),...se(t)});return V?e("span",{className:"flex shrink-0 items-center justify-center",children:a}):a}return t("div",{ref:_,"data-mp-size":H,"data-mp-variant":R,className:["mp-scroll-zone relative flex min-w-0",V&&K?"flex-row items-stretch":"flex-col",V?w[H]:"",S??""].filter(Boolean).join(" "),style:{...a(X),...F},...Y,children:[ae&&V?ce(!1):null,e("div",{ref:Z,tabIndex:0,role:"group","aria-label":A??q.label,className:["mp-scroll-zone__scroller","min-h-0 min-w-0 grow",K?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",M?K?"snap-x snap-mandatory":"snap-y snap-mandatory":"",z?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",C&&(J.back||J.forward)?"cursor-grab data-dragging:cursor-grabbing":"","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "),onScroll:U,onPointerDown:function(e){if(!C||"touch"===e.pointerType||0!==e.button)return;le.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,i=t.scrollTop;let l=!1;const s=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const s=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(K?s:a)<4)return;l=!0;try{t.setPointerCapture(e.pointerId)}catch{}t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}K?t.scrollLeft=o-s:t.scrollTop=i-a},c=()=>{le.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,s?document.body.style.setProperty("-webkit-user-select",s):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=l;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};le.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:G,className:["mp-scroll-zone__track",M?"[&>*]:snap-start":""].filter(Boolean).join(" "),style:{display:"grid",gap:c(y),gridAutoFlow:K?"column":"row",...K?{width:"max-content",gridTemplateRows:`repeat(${O}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${O}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:I})}),ae&&V?ce(!0):null,ae&&!V?t("div",{className:["pointer-events-none absolute inset-0 flex justify-between",K?"items-center":"flex-col items-center",v[H]].join(" "),children:[ce(!1),ce(!0)]}):null]})});

package/dist/components/scroll-zone/index.d.ts

@@ -0,0 +1,2 @@
+export { MPScrollZone } from './MPScrollZone.js';
+export type { MPScrollZoneButtonPlacement, MPScrollZoneButtons, MPScrollZoneMode, MPScrollZoneProps } from './MPScrollZone.js';

package/dist/components/scroll-zone/index.js

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

package/dist/components/segmented-button/MPSegmentedButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as o}from"@base-ui/react/toggle";import{ToggleGroup as r}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as s}from"../../constants/icons.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as c,CONTROL_ICON as d,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale.js";import{useMPSize as p}from"../../internal/config.js";export const MPSegmentedButton=/*@__PURE__*/n.forwardRef(function({items:n,value:f,defaultValue:b,onValueChange:h,multiple:g=!1,showCheck:y=!0,size:j,fullWidth:x=!1,disabled:v=!1,"aria-label":w,className:N,style:B},V){const k=p(j);return e(r,{ref:V,"aria-label":w,value:f,defaultValue:b,onValueChange:e=>h?.(e),multiple:g,disabled:v,"data-mp-size":k,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",v?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",c[k],N??""].filter(Boolean).join(" "),style:B,children:n.map((n,r)=>{const c=v||n.disabled;return t(o,{value:n.value,disabled:n.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",u[k],l[k],m[k],0===r?"":"border-s",c?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[c?null:e(i,{}),y||n.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:d[k],height:d[k]},children:[y?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:s,size:d[k]})}):null,n.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",y?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:n.icon}):null]}):null,e("span",{className:"truncate",children:n.label})]},`${r}:${n.value}`)})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Toggle as o}from"@base-ui/react/toggle";import{ToggleGroup as n}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as s}from"../../constants/icons.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale.js";import{useMPSize as p}from"../../internal/config.js";export const MPSegmentedButton=/*@__PURE__*/r.forwardRef(function({items:r,value:f,defaultValue:b,onValueChange:h,multiple:g=!1,showCheck:y=!0,size:j,fullWidth:x=!1,disabled:v=!1,"aria-label":w,className:N,style:B},V){const k=p(j);return e(n,{ref:V,"aria-label":w,value:f,defaultValue:b,onValueChange:e=>h?.(e),multiple:g,disabled:v,"data-mp-size":k,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",v?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",d[k],N??""].filter(Boolean).join(" "),style:B,children:r.map((r,n)=>{const d=v||r.disabled;return t(o,{value:r.value,disabled:r.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",u[k],l[k],m[k],0===n?"border-0":"border-y-0 border-e-0 border-s",d?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(i,{}),y||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[k],height:c[k]},children:[y?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:s,size:c[k]})}):null,r.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",y?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:r.icon}):null]}):null,e("span",{className:"truncate",children:r.label})]},`${n}:${r.value}`)})})});

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

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

package/dist/components/select/MPSelect.js

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

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

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

package/dist/components/show/MPShow.js

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

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

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

package/dist/components/show/index.js

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

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

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

package/dist/components/sidebar/MPSidebar.js

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

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

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

package/dist/components/sparkline/MPSparkline.js

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

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

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

package/dist/components/sparkline/index.js

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

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

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

package/dist/components/spoiler/MPSpoiler.js

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