material-plus-ui 1.5.0 → 1.7.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 r from"react";import{Toggle as n}from"@base-ui/react/toggle";import{ToggleGroup as o}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";export const MPSegmentedButton=/*@__PURE__*/r.forwardRef(function({items:r,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:y="md",fullWidth:j=!1,disabled:x=!1,"aria-label":v,className:w,style:N},B){return e(o,{ref:B,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:x,"data-mp-size":y,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",x?"border-mp-on-surface/12":"border-mp-outline",j?"flex w-full":"inline-flex w-fit",d[y],w??""].filter(Boolean).join(" "),style:N,children:r.map((r,o)=>{const d=x||r.disabled;return t(n,{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[y],l[y],m[y],0===o?"":"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(" "),j?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(i,{}),g||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[y],height:c[y]},children:[g?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[y]})}):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",g?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:r.icon}):null]}):null,e("span",{className:"truncate",children:r.label})]},`${o}:${r.value}`)})})});
+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}`)})})});

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

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

package/dist/components/shortcut/MPShortcut.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as n,jsxs as a}from"react/jsx-runtime";import*as m from"react";import{accentSlots as t}from"../../internal/accent.js";import{tokenizeShortcut as o,useDetectedOS as r}from"../../internal/keys.js";import{VISUALLY_HIDDEN as l}from"../../internal/visually-hidden.js";const s=e=>({symbol:e,name:e}),i={mod:{mac:{symbol:"⌘",name:"Command"},windows:s("Ctrl"),linux:s("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:s("Win"),linux:s("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:s("Ctrl"),linux:s("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:s("Alt"),linux:s("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:s("Shift"),linux:s("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:s("Enter"),linux:s("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:s("Tab"),linux:s("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:s("Esc"),linux:s("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:s("Backspace"),linux:s("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:s("Del"),linux:s("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:s("Caps Lock"),linux:s("Caps Lock")}},c={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},d={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};const p={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},u={xs:"min-w-5",sm:"min-w-6",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"},w={xs:"text-mp-label-small",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},x={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},b={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},f={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline-variant text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-mp-surface-container"};export const MPShortcut=/*@__PURE__*/m.forwardRef(function({variant:y="outlined",size:h="md",color:g="secondary",keys:k,os:C="auto",separator:v,className:A,style:j,...E},N){const S=r(),_="auto"===C?S:C,B=o(k).map(e=>function(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),m=c[a]??a,t=d[m];if(t)return t;const o=i[m];return o?o[n]:s(1===e.length?e.toUpperCase():e)}(e,_)),L=void 0===v?"mac"===_?null:"+":v,D=/*@__PURE__*/["inline-flex shrink-0 items-center justify-center","font-mono leading-none whitespace-nowrap tabular-nums",p[h],u[h],w[h],x[h],b[h],f[y]].join(" ");return e("span",{ref:N,"data-mp-size":h,"data-mp-variant":y,className:["mp-shortcut inline-flex max-w-full items-center gap-1 align-middle",A??""].filter(Boolean).join(" "),style:{...t(g),...j},...E,children:B.map((t,o)=>a(m.Fragment,{children:[o>0&&null!==L?e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant",children:L}):null,e("kbd",{className:D,children:t.symbol===t.name?t.symbol:a(n,{children:[e("span",{"aria-hidden":"true",children:t.symbol}),e("span",{className:l,children:t.name})]})})]},o))})});
+import{jsx as e,Fragment as n,jsxs as a}from"react/jsx-runtime";import*as m from"react";import{accentSlots as t}from"../../internal/accent.js";import{tokenizeShortcut as o,useDetectedOS as r}from"../../internal/keys.js";import{VISUALLY_HIDDEN as l}from"../../internal/visually-hidden.js";import{useMPSize as s}from"../../internal/config.js";const i=e=>({symbol:e,name:e}),c={mod:{mac:{symbol:"⌘",name:"Command"},windows:i("Ctrl"),linux:i("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:i("Win"),linux:i("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:i("Ctrl"),linux:i("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:i("Alt"),linux:i("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:i("Shift"),linux:i("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:i("Enter"),linux:i("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:i("Tab"),linux:i("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:i("Esc"),linux:i("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:i("Backspace"),linux:i("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:i("Del"),linux:i("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:i("Caps Lock"),linux:i("Caps Lock")}},d={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},p={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};const u={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},w={xs:"min-w-5",sm:"min-w-6",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"},x={xs:"text-mp-label-small",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},b={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},f={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline-variant text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-mp-surface-container"};export const MPShortcut=/*@__PURE__*/m.forwardRef(function({variant:h="outlined",size:g,color:k="secondary",keys:C,os:j="auto",separator:v,className:A,style:E,...N},S){const _=s(g),B=r(),L="auto"===j?B:j,D=o(C).map(e=>function(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),m=d[a]??a,t=p[m];if(t)return t;const o=c[m];return o?o[n]:i(1===e.length?e.toUpperCase():e)}(e,L)),T=void 0===v?"mac"===L?null:"+":v,z=/*@__PURE__*/["inline-flex shrink-0 items-center justify-center","font-mono leading-none whitespace-nowrap tabular-nums",u[_],w[_],x[_],b[_],f[_],y[h]].join(" ");return e("span",{ref:S,"data-mp-size":_,"data-mp-variant":h,className:["mp-shortcut inline-flex max-w-full items-center gap-1 align-middle",A??""].filter(Boolean).join(" "),style:{...t(k),...E},...N,children:D.map((t,o)=>a(m.Fragment,{children:[o>0&&null!==T?e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant",children:T}):null,e("kbd",{className:z,children:t.symbol===t.name?t.symbol:a(n,{children:[e("span",{"aria-hidden":"true",children:t.symbol}),e("span",{className:l,children:t.name})]})})]},o))})});

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";const v={xs:"15rem",sm:"18rem",md:"22.5rem",lg:"26rem",xl:"30rem"};function y(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:h,minWidth:g=160,maxWidth:w=480,resizable:x=!1,onResize:_,onResizeEnd:j,collapseBelow:R,open:k,defaultOpen:C=!1,onOpenChange:z,sticky:P=!0,title:E,variant:M="outlined",size:L="md",padded:B=!0,label:S,locale:N,className:A,style:D,children:O,...$},I){const W=r.useContext(c),T=r.useContext(m),X=o??T??"start",K=i(N??W.locale),V=a(s,K),q=R??(W.present?W.collapseBelow:"none"),F=p(q),[G,H]=r.useState(C),J=void 0!==k,Q=J?k:W.present?W.open[X]:G,U=e=>{J||(W.present?W.setOpen(X,e):H(e)),z?.(e)},Y=void 0===h?v[L]:"number"==typeof h?`${h}px`:h,Z=r.useRef(null),ee=r.useRef(Y),te=r.useRef(null),re=r.useId();ee.current!==Y&&(ee.current=Y,Z.current=null);const ne=Z.current??Y,oe=r.useRef(null),ie=r.useCallback(e=>{oe.current=e,"function"==typeof I?I(e):I&&(I.current=e)},[I]),ae=r.useRef(null);r.useEffect(()=>()=>ae.current?.(),[]);const se=e=>{const t=oe.current;if(!t)return e;const r=Math.min(y(w,480),Math.max(y(g,160),Math.round(e)));return Z.current=`${r}px`,t.style.setProperty("--_mp-sidebar-width",Z.current),te.current?.setAttribute("aria-valuenow",String(r)),r};return F?e(n,{side:u(X),mode:"modal",open:Q,onOpenChange:U,title:E??S??V.sidebar,size:L,locale:K,extent:void 0===h?void 0:ne,className:A,style:D,children:O}):t("aside",{ref:ie,"aria-label":S??V.sidebar,"data-mp-size":L,"data-mp-variant":M,"data-mp-side":X,className:["mp-sidebar text-mp-on-surface relative box-border flex min-w-0 shrink-0 flex-col","w-(--_mp-sidebar-width)",l[M],"outlined"===M?"border-mp-outline-variant "+("start"===X?"border-e":"border-s"):"","content"===W.scroll?"h-full":P?["self-start sticky [top:var(--_mp-layout-header,0px)]","[height:calc(100dvh_-_var(--_mp-layout-header,0px)_-_var(--_mp-layout-footer,0px))]"].join(" "):"",d[q],A??""].filter(Boolean).join(" "),style:{"--_mp-sidebar-width":ne,...D},...$,children:[e("div",{id:re,className:["mp-sidebar__body min-h-0 flex-1 overflow-y-auto overscroll-contain",B?`${f[L]} ${b[L]}`:""].filter(Boolean).join(" "),children:O}),x?e("div",{ref:te,role:"separator","aria-orientation":"vertical","aria-label":V.resizeSidebar,"aria-valuemin":Math.round(y(g,160)),"aria-valuemax":Math.round(y(w,480)),"aria-valuenow":Math.round(y(ne,y(v[L],360))),"aria-controls":re,tabIndex:0,className:["mp-sidebar__handle absolute inset-y-0 z-1 w-2 cursor-col-resize bg-transparent","start"===X?"-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=oe.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"===X===a?-1:1;let l=i;const u=e=>{l=se(i+(e.clientX-o)*s),_?.(l)},d=()=>{ae.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(),j?.(l)};ae.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"===X===t?-1:1;(e=>{const t=oe.current;if(!t)return;const r=se(t.getBoundingClientRect().width+e);_?.(r),j?.(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/skeleton/MPSkeleton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{CONTROL_SQUARE as o}from"../../internal/scale.js";import{cssLength as a}from"../../internal/length.js";const n={xs:"h-3",sm:"h-3.5",md:"h-4",lg:"h-4",xl:"h-5.5"},s={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-1.5"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t="overflow-hidden bg-(--_mp-placeholder)";export const MPSkeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:m=1,size:d="md",color:p,width:h,height:c,animated:f=!0,label:u,render:g,className:x,style:w,...j},v){const b=f?"animate-pulse motion-reduce:animate-none":"",k="circle"===r?`rounded-mp-full shrink-0 ${o[d]}`:"rect"===r?`rounded-mp-md w-full ${void 0===c?i[d]:""}`:`rounded-mp-xs w-full ${n[d]}`,y=u?{role:"status","aria-busy":!0,"aria-label":u}:{"aria-hidden":!0},$="line"===r&&m>1;return l({render:g,ref:v,props:{"data-mp-size":d,className:($?["mp-skeleton flex w-full flex-col",s[d],x??""]:["mp-skeleton",t,b,k,x??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":p?`var(--_mp-color-${p}-container)`:"var(--_mp-color-surface-container-highest)",width:a(h),height:$?void 0:a(c),...w},...y,...$?{children:Array.from({length:m},(r,l)=>e("div",{className:[t,b,"rounded-mp-xs",n[d],l===m-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...j}})});
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{CONTROL_SQUARE as o}from"../../internal/scale.js";import{cssLength as a}from"../../internal/length.js";import{useMPSize as n}from"../../internal/config.js";const i={xs:"h-3",sm:"h-3.5",md:"h-4",lg:"h-4",xl:"h-5.5"},s={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-1.5"},t={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},m="overflow-hidden bg-(--_mp-placeholder)";export const MPSkeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:d=1,size:p,color:h,width:c,height:f,animated:u=!0,label:g,render:x,className:w,style:j,...v},b){const k=n(p),y=u?"animate-pulse motion-reduce:animate-none":"",$="circle"===r?`rounded-mp-full shrink-0 ${o[k]}`:"rect"===r?`rounded-mp-md w-full ${void 0===f?t[k]:""}`:`rounded-mp-xs w-full ${i[k]}`,_=g?{role:"status","aria-busy":!0,"aria-label":g}:{"aria-hidden":!0},N="line"===r&&d>1;return l({render:x,ref:b,props:{"data-mp-size":k,className:(N?["mp-skeleton flex w-full flex-col",s[k],w??""]:["mp-skeleton",m,y,$,w??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":h?`var(--_mp-color-${h}-container)`:"var(--_mp-color-surface-container-highest)",width:a(c),height:N?void 0:a(f),...j},..._,...N?{children:Array.from({length:d},(r,l)=>e("div",{className:[m,y,"rounded-mp-xs",i[k],l===d-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});

package/dist/components/slider/MPSlider.d.ts

@@ -1,5 +1,14 @@
 import * as React from 'react';
 import type { MPColor, MPOrientation, MPSize } from '../../types.js';
+export interface MPSliderMark {
+    /** Where on the range it sits. Outside `min`…`max` it is not drawn. */
+    value: number;
+    /**
+     * What is written under it — or beside it on a vertical slider. Left out, the
+     * mark is a tick on the track and nothing else.
+     */
+    label?: React.ReactNode;
+}
 export interface MPSliderProps {
     /**
      * The value, or the values. An array is what makes it a range slider — there is
@@ -19,6 +28,24 @@ export interface MPSliderProps {
     max?: number;
     /** How far one arrow key, or one notch of the drag, moves. @default 1 */
     step?: number;
+    /**
+     * The ticks on the track, and optionally what is written under them.
+     *
+     * `true` puts one at every `step`, which is MD3's discrete slider — up to fifty
+     * of them, past which they stop being ticks and become a dotted line (see
+     * `MAX_TICKS`). An array names them instead, and is the form that can carry
+     * labels: `[{ value: 1990, label: '1990' }, …]` for the decade markings under
+     * a year range.
+     *
+     * A tick over the filled part of the track is drawn in the accent's own ink and
+     * one over the groove in `on-surface-variant`, which is the specification's
+     * pairing and the reason a tick stays visible as the handle passes it.
+     *
+     * Labels are laid out from the tick's centre and are not measured, so two that
+     * would collide will overlap — an array with fewer entries is the answer, not a
+     * smaller type scale.
+     */
+    marks?: boolean | readonly MPSliderMark[];
     /** The label above the track. */
     label?: React.ReactNode;
     /** The line under the track. */

package/dist/components/slider/MPSlider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as t}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as i,hasContent as o}from"../../internal/scale.js";const l={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},c=/*@__PURE__*/["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),m={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=/*@__PURE__*/r.forwardRef(function({value:d,defaultValue:u,onValueChange:p,onValueCommitted:f,min:h=0,max:g=100,step:x=1,label:b,description:w,showValue:j=!1,format:y,orientation:z="horizontal",size:v="md",color:C="primary",disabled:N=!1,name:_,"aria-label":k,className:V,style:$},A){const B="vertical"===z,I=l[v],L=r.useId(),R=d??u,S=Array.isArray(R)?R.length:1;return s(a.Root,{ref:A,value:d,defaultValue:u,onValueChange:e=>p?.(e),onValueCommitted:e=>f?.(e),min:h,max:g,step:x,disabled:N,orientation:z,format:y,name:_,"data-mp-size":v,className:["mp-slider flex",B?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",N?"cursor-default":"",V??""].filter(Boolean).join(" "),style:{...t(C),...$},children:[o(b)||j?s("div",{className:["flex w-full items-baseline gap-2",i].join(" "),children:[o(b)?e(a.Label,{className:N?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:b}):null,j?e(a.Value,{className:["ms-auto tabular-nums",N?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",B?`${I.stripCross} h-40 flex-col`:`w-full ${I.strip}`,N?"":"cursor-pointer"].filter(Boolean).join(" "),children:s(a.Track,{className:["mp-slider__track rounded-mp-full relative",B?`${I.cross} h-full`:`${I.thickness} w-full`,N?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",c,"group-data-dragging/rail:transition-none",N?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:S},(s,r)=>e(a.Thumb,{index:r,"aria-label":o(b)?void 0:k,"aria-describedby":o(w)?L:void 0,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",c,"data-dragging:transition-none",I.handle,N?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:N?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",m[v],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},r))]})}),o(w)?e("div",{id:L,className:[i,N?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:w}):null]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Slider as r}from"@base-ui/react/slider";import{accentSlots as s}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as l,hasContent as i}from"../../internal/scale.js";import{useMPColor as o,useMPSize as m}from"../../internal/config.js";const u={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},c=/*@__PURE__*/["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),d={xs:"size-[2px]",sm:"size-[2px]",md:"size-[3px]",lg:"size-1",xl:"size-1.5"},p={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=/*@__PURE__*/t.forwardRef(function({value:f,defaultValue:h,onValueChange:g,onValueCommitted:b,min:x=0,max:v=100,step:w=1,marks:j,label:y,description:z,showValue:N=!1,format:_,orientation:k="horizontal",size:C,color:V,disabled:A=!1,name:M,"aria-label":S,className:$,style:I},B){const L=m(C),R=o(V),T="vertical"===k,F=u[L],P=t.useId(),X=f??h,Y=Array.isArray(X)?X.length:1,q=t.useMemo(()=>{if(!j||v<=x)return[];if(!0!==j)return j.filter(e=>e.value>=x&&e.value<=v);const e=Math.floor((v-x)/w);return!Number.isFinite(e)||e<1||e>50?[]:Array.from({length:e+1},(e,a)=>({value:x+a*w}))},[j,x,v,w]),[D,E]=t.useState(h),G=f??D,H=t.useMemo(()=>{const e=Array.isArray(G)?G:void 0===G?[]:[G];return 0===e.length?null:1===e.length?{from:x,to:e[0]}:{from:Math.min(...e),to:Math.max(...e)}},[G,x]),J=e=>(e-x)/(v-x)*100+"%";return a(r.Root,{ref:B,value:f,defaultValue:h,onValueChange:e=>{void 0===f&&E(e),g?.(e)},onValueCommitted:e=>b?.(e),min:x,max:v,step:w,disabled:A,orientation:k,format:_,name:M,"data-mp-size":L,className:["mp-slider flex",T?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",A?"cursor-default":"",$??""].filter(Boolean).join(" "),style:{...s(R),...I},children:[i(y)||N?a("div",{className:["flex w-full items-baseline gap-2",l].join(" "),children:[i(y)?e(r.Label,{className:A?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:y}):null,N?e(r.Value,{className:["ms-auto tabular-nums",A?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(r.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",T?`${F.stripCross} h-40 flex-col`:`w-full ${F.strip}`,A?"":"cursor-pointer"].filter(Boolean).join(" "),children:a(r.Track,{className:["mp-slider__track rounded-mp-full relative",T?`${F.cross} h-full`:`${F.thickness} w-full`,A?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(r.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",c,"group-data-dragging/rail:transition-none",A?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),q.map(a=>{const t=null!==H&&a.value>=H.from&&a.value<=H.to;return e("span",{"aria-hidden":"true",className:["mp-slider__tick pointer-events-none absolute rounded-full",d[L],A?"bg-mp-on-surface/38":t?"bg-(--_mp-on-accent)":"bg-mp-on-surface-variant"].join(" "),style:T?{bottom:J(a.value),insetInlineStart:"50%",transform:"translate(-50%, 50%)"}:{insetInlineStart:J(a.value),top:"50%",transform:"translate(-50%, -50%)"}},`tick:${a.value}`)}),Array.from({length:Y},(a,t)=>e(r.Thumb,{index:t,"aria-label":i(y)?void 0:S,"aria-describedby":i(z)?P:void 0,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",c,"data-dragging:transition-none",F.handle,A?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:A?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",p[L],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},t))]})}),q.some(e=>i(e.label))?e("div",{"aria-hidden":"true",className:["mp-slider__marks relative",l,T?"h-full":"w-full",A?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),style:T?void 0:{height:"1lh"},children:q.map(a=>i(a.label)?e("span",{className:"absolute whitespace-nowrap",style:T?{bottom:J(a.value),transform:"translateY(50%)"}:{insetInlineStart:J(a.value),transform:"translateX(-50%)"},children:a.label},`label:${a.value}`):null)}):null,i(z)?e("div",{id:P,className:[l,A?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:z}):null]})});

package/dist/components/snackbar/MPSnackbar.d.ts

@@ -20,6 +20,25 @@ export type MPSnackbarPosition = `top-${MPAlign}` | `bottom-${MPAlign}`;
 export interface MPSnackbarData {
     color?: MPColor;
     icon?: React.ReactNode | false;
+    /**
+     * Which stack this one joins, overriding the provider's `position`.
+     *
+     * For the message that has to be somewhere else *because of what it is* — a
+     * confirmation pinned under the thing it confirms, an error at the top of a
+     * page whose bottom corner is a toolbar. Not for a preference: an application
+     * whose snackbars all appear in the same wrong place should move the provider.
+     *
+     * All six stacks are on the page from the start whether or not anything is in
+     * them, which is not a detail: a stack is its own `aria-live` region, and a
+     * region added to the document at the same instant as the message inside it is
+     * a region a screen reader has nothing to compare against and does not read.
+     */
+    position?: MPSnackbarPosition;
+    /**
+     * Added to this snackbar's plate — the element that draws the surface, not the
+     * stack around it.
+     */
+    className?: string;
 }
 export interface MPSnackbarOptions extends MPSnackbarData {
     /**
@@ -172,4 +191,4 @@ export declare function useMPSnackbar(): {
  * is not part of Material Design 3 — so a `Toast` here would be a different
  * component wearing the name of one the specification still ships.
  */
-export declare function MPSnackbarProvider({ color, position, timeout, limit, width, size, showClose, closeLabel, locale: localeProp, children }: MPSnackbarProviderProps): React.JSX.Element;
+export declare function MPSnackbarProvider({ color, position, timeout, limit, width, size: sizeProp, showClose, closeLabel, locale: localeProp, children }: MPSnackbarProviderProps): React.JSX.Element;