material-plus-ui 1.3.1 → 1.4.0

package/dist/components/overlay/MPOverlay.d.ts

@@ -73,9 +73,15 @@ export interface MPOverlayProps {
      * this library does: an overlay that holds nothing readable — a bare spinner, a
      * `clear` sheet — still has to say what it is, and the alternative is a modal
      * region a screen reader announces as nothing at all.
-     * @default 'Overlay'
+     *
+     * Defaults to the word for it in `locale`.
      */
     label?: string;
+    /**
+     * Which language that default is written in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /** What sits on top — a spinner, a line of text, a small card. */
     children?: React.ReactNode;
     className?: string;
@@ -93,4 +99,4 @@ export interface MPOverlayProps {
  * else Base UI owns: the portal, the scroll lock, the focus held inside, the page
  * behind going inert, and focus returning to wherever it came from on close.
  */
-export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, label, className, style, children }: MPOverlayProps): React.JSX.Element;
+export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, label, locale: localeProp, className, style, children }: MPOverlayProps): React.JSX.Element;

package/dist/components/overlay/MPOverlay.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{FADE as s,PORTAL_LAYER as l,SCRIM as t}from"../../internal/surface.js";import{SHEET_PAD as i}from"../../internal/scale.js";const n={scrim:t,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},o={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:t,defaultOpen:c,onOpenChange:m,tone:p="scrim",dismissible:d=!1,modal:f=!0,align:u="center",size:x="md",label:b="Overlay",className:j,style:h,children:y}){return e(r.Root,{open:t,defaultOpen:c,modal:f,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?m?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`${l} fixed inset-0 ${s} ${n[p]}`}),e(r.Viewport,{className:[l,"fixed inset-0 flex justify-center",o[u],i[x]].join(" "),children:e(r.Popup,{"aria-label":b,"data-mp-size":x,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",s,j??""].filter(Boolean).join(" "),style:h,children:y})})]})})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{OVERLAY as t}from"../../internal/messages/overlay.js";import{FADE as n,PORTAL_LAYER as i,SCRIM as o}from"../../internal/surface.js";import{SHEET_PAD as m}from"../../internal/scale.js";const c={scrim:o,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},p={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:o,defaultOpen:f,onOpenChange:d,tone:u="scrim",dismissible:x=!1,modal:b=!0,align:j="center",size:h="md",label:y,locale:g,className:O,style:N,children:P}){const k=s(t,l(g));return e(r.Root,{open:o,defaultOpen:f,modal:b,disablePointerDismissal:!x,onOpenChange:(e,a)=>{x||e||"escape-key"!==a.reason?d?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`${i} fixed inset-0 ${n} ${c[u]}`}),e(r.Viewport,{className:[i,"fixed inset-0 flex justify-center",p[j],m[h]].join(" "),children:e(r.Popup,{"aria-label":y??k.label,"data-mp-size":h,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",n,O??""].filter(Boolean).join(" "),style:N,children:P})})]})})}

package/dist/components/page-layout/MPPageLayout.d.ts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { type MPPageCollapse, type MPPageScroll, type MPPageSpan } from '../../internal/page-layout.js';
+export type { MPPageCollapse, MPPageScroll, MPPageSpan, MPSidebarSide } from '../../internal/page-layout.js';
+export interface MPPageLayoutProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** The bar across the top. An [MPHeader](./header), usually. */
+    header?: React.ReactNode;
+    /** The sheet at the end. An [MPFooter](./footer), usually. */
+    footer?: React.ReactNode;
+    /**
+     * The leading column — the left of an English page, the right of an Arabic
+     * one. An [MPSidebar](./sidebar), which is told which end it is on and needs
+     * no `side` of its own here.
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * The trailing column, for the layouts that have two: navigation down one
+     * side and a table of contents, an inspector or a filter panel down the
+     * other. Each is a sidebar with its own width, its own drawer and its own
+     * trigger.
+     */
+    endSidebar?: React.ReactNode;
+    /**
+     * Which of the header and the sidebars takes the top corner.
+     * @default 'full'
+     */
+    headerSpan?: MPPageSpan;
+    /**
+     * The same question for the footer, and worth answering separately: a
+     * dashboard with a full-height navigation drawer still usually wants its
+     * copyright line under the content rather than under the drawer.
+     * @default 'full'
+     */
+    footerSpan?: MPPageSpan;
+    /**
+     * What scrolls: the document, or only the region between the bars.
+     * @default 'page'
+     */
+    scroll?: MPPageScroll;
+    /**
+     * How tall the layout is.
+     *
+     * - `viewport` — the window's, which is what a page wants: a short page still
+     *   pushes its footer to the bottom of the screen, and with `scroll="content"`
+     *   the layout is exactly one screen tall. The default.
+     * - `auto` — its parent's, for a layout that is not the page: a shell inside a
+     *   preview, a pane of a larger tool.
+     * - a length — a number in pixels, or any CSS length.
+     *
+     * It sets a floor while the page scrolls and an exact height while only the
+     * content does, which is the same difference `scroll` makes everywhere else.
+     * @default 'viewport'
+     */
+    height?: 'viewport' | 'auto' | number | string;
+    /**
+     * The window size class below which the sidebars stop being columns and
+     * become drawers, opened by an [MPSidebarTrigger](./sidebar#mpsidebartrigger).
+     * `none` keeps them columns at every width.
+     *
+     * `expanded` is the default because it is MD3's own answer: the specification
+     * gives a standard navigation drawer to an expanded window and puts the same
+     * destinations behind a modal drawer below one.
+     * @default 'expanded'
+     */
+    collapseBelow?: MPPageCollapse;
+    /**
+     * Whether the leading sidebar's drawer is open. Use with
+     * `onSidebarOpenChange` for a controlled layout — a route change that should
+     * close the drawer behind it, a state the application already holds.
+     */
+    sidebarOpen?: boolean;
+    /**
+     * Which state it starts in.
+     * @default false
+     */
+    defaultSidebarOpen?: boolean;
+    onSidebarOpenChange?: (open: boolean) => void;
+    /** The same three for the trailing sidebar. */
+    endSidebarOpen?: boolean;
+    /** @default false */
+    defaultEndSidebarOpen?: boolean;
+    onEndSidebarOpenChange?: (open: boolean) => void;
+    /**
+     * Puts a "Skip to content" link first in the document, drawn only while it
+     * holds the focus.
+     *
+     * On by default, and the one thing here that is not a style decision. A
+     * keyboard reader arriving on a page whose navigation holds forty links has to
+     * walk past all forty on every page before reaching the article; this is the
+     * one link that spares them, and it costs a sighted reader nothing because it
+     * is invisible until it is tabbed to.
+     * @default true
+     */
+    skipLink?: boolean;
+    /** What that link says. Defaults to the word for it in `locale`. */
+    skipLabel?: string;
+    /**
+     * The `id` the skip link jumps to, put on the `<main>`.
+     * @default 'main'
+     */
+    mainId?: string;
+    /** Anything else the `<main>` needs — a `className`, an `aria-label`. */
+    mainProps?: Omit<React.ComponentPropsWithoutRef<'main'>, 'id' | 'children'>;
+    /**
+     * Which language the layout's own words are in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English. Inherited by every sidebar and trigger
+     * inside it, so it is written once per page.
+     */
+    locale?: string;
+    /** The page. Rendered inside the `<main>`. */
+    children?: React.ReactNode;
+}
+/**
+ * The skeleton a page is hung on: a header, a footer, one sidebar or two, and
+ * the content between them.
+ *
+ * What it is really for is the **landmarks**. A page assembled out of divs is a
+ * page a screen reader offers as one undifferentiated region and a crawler reads
+ * as one undifferentiated blob; the same page built out of `<header>`, `<nav>`,
+ * `<aside>`, `<main>` and `<footer>` has a table of contents. Those tags come
+ * from the components this one arranges — it contributes exactly one element of
+ * its own, plus the `<main>` and the link that jumps to it.
+ *
+ * ## The arrangement is CSS, and that is the design
+ *
+ * Everything that decides where a column goes is flexbox and a media query, so
+ * the layout is right in the first frame the browser paints and right on a page
+ * whose JavaScript never arrives. The only things measured are the header's and
+ * the footer's heights, and only because a column that holds its place has to
+ * start below a bar whose height nobody but the bar knows.
+ *
+ * ## Why it draws no gutter and no measure
+ *
+ * That is [MPContainer](./container)'s job, and a layout that also did it would
+ * be a second spelling of one idea. Put a container inside the `<main>`, where a
+ * page can hold a full-width dashboard on one route and a 600dp article on the
+ * next.
+ *
+ * ## Why it takes no surface
+ *
+ * No `variant`, no `color`, no shadow, for [MPContainer](./container)'s reason:
+ * the outermost element on a page is the one thing that must not decide what the
+ * page looks like. The bars and the columns paint themselves; between them is
+ * whatever the application's own background is.
+ */
+export declare const MPPageLayout: React.ForwardRefExoticComponent<MPPageLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/page-layout/MPPageLayout.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useMPLocale as t,useMPMessages as n}from"../../internal/locale.js";import{LAYOUT as r}from"../../internal/messages/layout.js";import{MPPageLayoutContext as a,MPSidebarSideContext as i}from"../../internal/page-layout.js";import{hasContent as s}from"../../internal/scale.js";import{cssLength as u}from"../../internal/length.js";const p=["header","footer"];export const MPPageLayout=/*@__PURE__*/o.forwardRef(function({header:c,footer:f,sidebar:d,endSidebar:m,headerSpan:h="full",footerSpan:v="full",scroll:y="page",height:x="viewport",collapseBelow:b="expanded",sidebarOpen:g,defaultSidebarOpen:w=!1,onSidebarOpenChange:j,endSidebarOpen:_,defaultEndSidebarOpen:k=!1,onEndSidebarOpenChange:S,skipLink:P=!0,skipLabel:C,mainId:O="main",mainProps:N,locale:B,className:$,style:R,children:z,...E},I){const L=t(B),M=n(r,L),[H,T]=o.useState(w),[q,A]=o.useState(k),D=o.useMemo(()=>({start:g??H,end:_??q}),[g,H,_,q]),F=o.useCallback((e,l)=>{if("start"===e)return void 0===g&&T(l),void j?.(l);void 0===_&&A(l),S?.(l)},[g,_,j,S]),G=o.useRef(null),J=o.useCallback(e=>{G.current=e,"function"==typeof I?I(e):I&&(I.current=e)},[I]),K=o.useRef({header:null,footer:null}),Q=o.useRef(null),U=o.useCallback(()=>{const e=G.current;if(e)for(const l of p){const o=K.current[l],t="header"===l?h:v;if(!o){e.style.setProperty(`--_mp-layout-${l}`,"0px"),e.style.setProperty(`--_mp-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,a="sticky"===n||"fixed"===n;e.style.setProperty(`--_mp-layout-${l}`,a&&"full"===t?r:"0px"),e.style.setProperty(`--_mp-layout-${l}-inset`,"fixed"===n?r:"0px")}},[h,v]),V=o.useCallback(()=>{const e=Q.current;if(e){e.disconnect();for(const l of p){const o=K.current[l];o&&e.observe(o)}}U()},[U]);o.useEffect(()=>(Q.current=new ResizeObserver(()=>U()),V(),()=>{Q.current?.disconnect(),Q.current=null}),[U,V]);const W=o.useCallback((e,l)=>{K.current[e]=l,V()},[V]),X=o.useMemo(()=>({present:!0,register:W,collapseBelow:b,open:D,setOpen:F,scroll:y,locale:L}),[W,b,D,F,y,L]),Y="content"===y,Z=u("viewport"===x||"auto"===x?void 0:x),ee=void 0!==Z?"":"auto"===x?Y?"h-full":"min-h-full":Y?"h-dvh":"min-h-dvh",le=s(c)?c:null,oe=s(f)?f:null;return e(a.Provider,{value:X,children:l("div",{ref:J,"data-mp-scroll":y,className:["mp-page-layout relative flex w-full flex-col",Y?"overflow-hidden":"",ee,"full"===h?"[padding-top:var(--_mp-layout-header-inset,0px)]":"","full"===v?"[padding-bottom:var(--_mp-layout-footer-inset,0px)]":"",$??""].filter(Boolean).join(" "),style:void 0===Z?R:{...Y?{height:Z}:{minHeight:Z},...R},...E,children:[P?e("a",{href:`#${O}`,className:["mp-page-layout__skip absolute start-3 top-3 z-50 size-px overflow-hidden","whitespace-nowrap [clip-path:inset(50%)]","focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:bg-mp-primary focus:text-mp-on-primary focus:rounded-mp-full","focus:shadow-mp-2 focus:text-mp-label-large focus:px-4 focus:py-2.5","focus:no-underline focus:outline-none"].join(" "),children:C??M.skipToContent}):null,"full"===h?le:null,l("div",{className:["flex w-full flex-1",Y?"min-h-0":""].filter(Boolean).join(" "),children:[s(d)?e(i.Provider,{value:"start",children:d}):null,l("div",{className:["flex min-w-0 flex-1 flex-col",Y?"min-h-0":"","content"===h?"[padding-top:var(--_mp-layout-header-inset,0px)]":"","content"===v?"[padding-bottom:var(--_mp-layout-footer-inset,0px)]":""].filter(Boolean).join(" "),children:["content"===h?le:null,e("main",{...N,id:O,tabIndex:N?.tabIndex??-1,className:["mp-page-layout__main min-w-0 flex-1",Y?"min-h-0 overflow-y-auto":"",N?.className??""].filter(Boolean).join(" "),children:z}),"content"===v?oe:null]}),s(m)?e(i.Provider,{value:"end",children:m}):null]}),"full"===v?oe:null]})})});

package/dist/components/page-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { MPPageLayout } from './MPPageLayout.js';
+export type { MPPageCollapse, MPPageLayoutProps, MPPageScroll, MPPageSpan, MPSidebarSide } from './MPPageLayout.js';

package/dist/components/page-layout/index.js

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

package/dist/components/panes/MPPanes.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";const o=/*@__PURE__*/n.createContext({basis:null,id:null}),i={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function s(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*Number.parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:l="horizontal",resizable:u=!0,color:c="primary",size:m="md",onResize:d,onResizeEnd:f,className:p,style:h,children:g,...v},b){const x=n.Children.toArray(g).filter(n.isValidElement),y=x.length,z=n.useId(),w=n.useRef(null),S=n.useCallback(e=>{w.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),E=n.useRef([]),N=x.map(e=>e.props),[R,j]=n.useState(null),M=R&&R.length===y?R:null,C=n.useRef(null);n.useLayoutEffect(()=>{E.current=N,C.current=M});const k=n.useRef(null);n.useEffect(()=>()=>{null!==k.current&&(document.body.style.userSelect=k.current,k.current=null)},[]);const L="horizontal"===l,$=a[m]*Math.max(0,y-1);function P(e){const t=w.current,n=C.current;if(!u||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(L?r.width:r.height)-$;if(o<=0)return null;const i=E.current[e],a=E.current[e+1],l=n[e]*o,c=l+n[e+1]*o,m=Math.max(s(i?.minSize,o,t)??0,c-(s(a?.maxSize,o,t)??c)),f=Math.min(s(i?.maxSize,o,t)??c,c-(s(a?.minSize,o,t)??0));return f<m?null:{root:t,current:n,lower:m,upper:f,start:l,resize(t){const r=Math.min(f,Math.max(m,l+t)),i=[...n];return i[e]=r/o,i[e+1]=(c-r)/o,j(i),d?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=w.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(L?t.width:t.height)-$;n<=0||j(t=>t&&t.length===y?t:function(e,t,n){const r=e.map(e=>s(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,l=r.map(e=>Math.max(0,e??a)),u=l.reduce((e,t)=>e+t,0);return u<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/u)}(E.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,L,$]);const _=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",i[m],"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",u?[L?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:S,"data-mp-size":m,className:["mp-panes flex h-full w-full",L?"flex-row":"flex-col","min-h-0 min-w-0",p??""].filter(Boolean).join(" "),style:{...r(c),...h},...v,children:x.map((r,i)=>t(n.Fragment,{children:[i>0?e("div",{role:"separator","aria-orientation":L?"vertical":"horizontal","aria-valuenow":M?Math.round(100*M[i-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,"aria-controls":`${z}-${i-1}`,tabIndex:u?0:-1,className:_,onPointerDown:e=>{0===e.button&&function(e,t){const n=P(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;k.current=o,document.body.style.userSelect="none";const i=L?t.clientX:t.clientY,a=L&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=L?e.clientX:e.clientY;s=n.resize((t-i)*a)},u=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",u),r.removeEventListener("pointercancel",u),delete r.dataset.dragging,document.body.style.userSelect=o,k.current=null,f?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",u),r.addEventListener("pointercancel",u)}(i-1,e)},onKeyDown:e=>{const t=L?"ArrowLeft":"ArrowUp",n=L?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n)return e.preventDefault(),void function(e,t){const n=P(e);if(!n)return;const r=n.resize(t);f?.(r.map(e=>100*e))}(i-1,e.key===n?16:-16);"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=P(e);if(!n)return;const r=n.resize(n[t]-n.start);f?.(r.map(e=>100*e))}(i-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",L?"h-full w-px":"h-px w-full",u?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(o.Provider,{value:{basis:M?`calc((100% - ${$}px) * ${M[i].toFixed(6)})`:null,id:`${z}-${i}`},children:r})]},r.key??i))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:i,className:a,style:s,children:l,...u},c){const{basis:m,id:d}=n.useContext(o);return e("div",{ref:c,id:d??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:m?`0 0 ${m}`:"1 1 0%",...s},...u,children:l})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";const i=/*@__PURE__*/n.createContext({basis:null,id:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},s={xs:4,sm:6,md:8,lg:10,xl:12};function l(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:c=!0,color:u="primary",size:d="md",onResize:m,onResizeEnd:f,className:p,style:h,children:g,...v},y){const x=n.Children.toArray(g).filter(n.isValidElement),b=x.length,w=n.useId(),z=n.useRef(null),S=n.useCallback(e=>{z.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),j=n.useRef([]),E=x.map(e=>e.props),[R,M]=n.useState(null),k=R&&R.length===b?R:null,C=n.useRef(null);n.useLayoutEffect(()=>{j.current=E,C.current=k});const L=n.useRef(null);n.useEffect(()=>()=>{null!==L.current&&(document.body.style.userSelect=L.current,L.current=null)},[]);const P="horizontal"===o,$=s[d]*Math.max(0,b-1);function _(e){const t=z.current,n=C.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(P?r.width:r.height)-$;if(o<=0)return null;const i=j.current[e],a=j.current[e+1],s=n[e]*o,u=s+n[e+1]*o,d=Math.max(l(i?.minSize,o,t)??0,u-(l(a?.maxSize,o,t)??u)),f=Math.min(l(i?.maxSize,o,t)??u,u-(l(a?.minSize,o,t)??0));return f<d?null:{root:t,current:n,lower:d,upper:f,start:s,resize(t){const r=Math.min(f,Math.max(d,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(u-r)/o,M(i),m?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=z.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(P?t.width:t.height)-$;n<=0||M(t=>t&&t.length===b?t:function(e,t,n){const r=e.map(e=>l(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),c=s.reduce((e,t)=>e+t,0);return c<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/c)}(j.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,P,$]);const B=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[d],"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",c?[P?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:S,"data-mp-size":d,className:["mp-panes flex h-full w-full",P?"flex-row":"flex-col","min-h-0 min-w-0",p??""].filter(Boolean).join(" "),style:{...r(u),...h},...v,children:x.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":P?"vertical":"horizontal","aria-valuenow":k?Math.round(100*k[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,"aria-controls":`${w}-${o-1}`,tabIndex:c?0:-1,className:B,onPointerDown:e=>{0===e.button&&function(e,t){const n=_(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;L.current=o,document.body.style.userSelect="none";const i=P?t.clientX:t.clientY,a=P&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=P?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,L.current=null,f?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(o-1,e)},onKeyDown:e=>{const t=P?"ArrowLeft":"ArrowUp",n=P?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=P&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=_(e);if(!n)return;const r=n.resize(t);f?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=_(e);if(!n)return;const r=n.resize(n[t]-n.start);f?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",P?"h-full w-px":"h-px w-full",c?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(i.Provider,{value:{basis:k?`calc((100% - ${$}px) * ${k[o].toFixed(6)})`:null,id:`${w}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:a,style:s,children:l,...c},u){const{basis:d,id:m}=n.useContext(i);return e("div",{ref:u,id:m??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:"1 1 0%",...s},...c,children:l})});

package/dist/components/popover/MPPopover.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as s}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{COMMON as r}from"../../internal/messages/common.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{hasContent as m,META_TEXT as c,PROSE_TEXT as d,SHEET_GAP as p,SHEET_PAD as f,SHEET_TITLE as u}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as h}from"../../internal/surface.js";const g={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},v={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=s.Close;export function MPPopover({trigger:b,title:j,description:w,side:N="bottom",align:O="center",sideOffset:P=8,alignOffset:y=0,arrow:C=!1,open:z,defaultOpen:k,onOpenChange:M,modal:L=!1,dismissible:$=!0,showClose:B=!1,closeLabel:T,locale:A,width:D,size:I="md",className:R,style:S,children:W}){const _=a(A),q=l(r,_),E=m(j)||m(w),F=v[I];return o(s.Root,{open:z,defaultOpen:k,modal:L,onOpenChange:(e,o)=>{$||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?M?.(e):o.cancel()},children:[b?e(s.Trigger,{render:b}):null,e(s.Portal,{children:e(s.Positioner,{className:h,side:N,align:O,sideOffset:P,alignOffset:y,children:o(s.Popup,{"data-mp-size":I,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",f[I],p[I],d[I],void 0===D?g[I]:"",x,R??""].filter(Boolean).join(" "),style:{...void 0===D?null:{maxWidth:"number"==typeof D?`${D}px`:D},...S},children:[C?e(s.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:F,height:F/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,E||B?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[m(j)?e(s.Title,{className:`m-0 ${u[I]}`,children:j}):null,m(w)?e(s.Description,{className:`text-mp-on-surface-variant m-0 ${c}`,children:w}):null]}),B?o(s.Close,{"aria-label":T??q.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(n,{}),e(t,{icon:i,size:18})]}):null]}):null,m(W)?e("div",{className:"min-w-0",children:W}):null]})})})]})}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as s}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{cssLength as r}from"../../internal/length.js";import{COMMON as n}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{hasContent as c,META_TEXT as d,PROSE_TEXT as p,SHEET_GAP as f,SHEET_PAD as u,SHEET_TITLE as h}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as g}from"../../internal/surface.js";const v={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},b={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=s.Close;export function MPPopover({trigger:j,title:w,description:N,side:O="bottom",align:P="center",sideOffset:y=8,alignOffset:C=0,arrow:z=!1,open:k,defaultOpen:M,onOpenChange:L,modal:B=!1,dismissible:T=!0,showClose:$=!1,closeLabel:A,locale:D,width:I,size:R="md",className:S,style:W,children:_}){const q=a(D),E=l(n,q),F=c(w)||c(N),G=b[R];return o(s.Root,{open:k,defaultOpen:M,modal:B,onOpenChange:(e,o)=>{T||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?L?.(e):o.cancel()},children:[j?e(s.Trigger,{render:j}):null,e(s.Portal,{children:e(s.Positioner,{className:g,side:O,align:P,sideOffset:y,alignOffset:C,children:o(s.Popup,{"data-mp-size":R,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",u[R],f[R],p[R],void 0===I?v[R]:"",x,S??""].filter(Boolean).join(" "),style:{...void 0===I?null:{maxWidth:r(I)},...W},children:[z?e(s.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:G,height:G/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,F||$?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(w)?e(s.Title,{className:`m-0 ${h[R]}`,children:w}):null,c(N)?e(s.Description,{className:`text-mp-on-surface-variant m-0 ${d}`,children:N}):null]}),$?o(s.Close,{"aria-label":A??E.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{}),e(t,{icon:i,size:18})]}):null]}):null,c(_)?e("div",{className:"min-w-0",children:_}):null]})})})]})}

package/dist/components/progress-box/MPProgressBox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{META_TEXT as n,STACK_GAP as l}from"../../internal/scale.js";import{SEGMENT_GAP as o,SEGMENT_RADIUS as i,SEGMENT_SIZE as m,progressAriaText as c,progressFraction as u,progressText as f}from"../../internal/progress.js";export const MPProgressBox=/*@__PURE__*/r.forwardRef(function({size:r="md",color:p="primary",count:d=4,value:x=null,min:h=0,max:g=100,label:b,showValue:j=!1,format:y,className:v,style:w},N){const M=u(x,h,g),B=null===M,V=void 0!==y,_=Math.max(1,Math.floor(d));return a(s.Root,{ref:N,value:x??null,min:h,max:g,format:y,getAriaValueText:c(M,V),"data-mp-size":r,className:["mp-progress-box inline-flex flex-col",l[r],v??""].filter(Boolean).join(" "),style:{...t(p),...w},children:[b||j?a("div",{className:["flex items-baseline gap-2",b?"justify-between":"justify-end",n].join(" "),children:[b?e(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:b}):null,j?e(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>f(M,e,V)}):null]}):null,e(s.Track,{className:`flex ${o[r]}`,children:Array.from({length:_},(a,s)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",m[r],i[r],B?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:B?{"--_mp-index":s}:void 0,children:B?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(M*_-s)))}%`}})},s))})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as l}from"../../internal/accent.js";import{META_TEXT as t,STACK_GAP as n}from"../../internal/scale.js";import{SEGMENT_GAP as o,SEGMENT_RADIUS as i,SEGMENT_SIZE as m,progressAriaText as c,progressFraction as u,progressText as f}from"../../internal/progress.js";export const MPProgressBox=/*@__PURE__*/r.forwardRef(function({size:r="md",color:p="primary",count:d=4,value:x=null,min:h=0,max:g=100,label:b,showValue:j=!1,format:y,className:v,style:w},N){const M=u(x,h,g),B=null===M,V=void 0!==y,_=Math.max(1,Math.floor(d));return a(s.Root,{ref:N,value:null===M?null:x??null,min:h,max:g,format:y,getAriaValueText:c(M,V),"data-mp-size":r,className:["mp-progress-box inline-flex flex-col",n[r],v??""].filter(Boolean).join(" "),style:{...l(p),...w},children:[b||j?a("div",{className:["flex items-baseline gap-2",b?"justify-between":"justify-end",t].join(" "),children:[b?e(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:b}):null,j?e(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>f(M,e,V)}):null]}):null,e(s.Track,{className:`flex ${o[r]}`,children:Array.from({length:_},(a,s)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",m[r],i[r],B?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:B?{"--_mp-index":s}:void 0,children:B?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(M*_-s)))}%`}})},s))})]})});

package/dist/components/progress-circular/MPProgressCircular.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{CONTROL_GAP as o,META_TEXT as n}from"../../internal/scale.js";import{RING_DIAMETER as i,RING_STROKE as l,progressAriaText as c,progressFraction as m,progressText as u}from"../../internal/progress.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a="md",color:p="primary",value:f=null,min:h=0,max:d=100,label:x,showValue:k=!1,format:g,className:v,style:y},j){const N=m(f,h,d),w=null===N,b=void 0!==g,$=i[a],L=l[a],V=$/2,z=V-L/2;return e(s.Root,{ref:j,value:f??null,min:h,max:d,format:g,getAriaValueText:c(N,b),"data-mp-size":a,className:["mp-progress-circular inline-flex items-center",o[a],n,v??""].filter(Boolean).join(" "),style:{...t(p),...y},children:[e("svg",{className:w?"mp-progress-circular-turn shrink-0":"shrink-0",width:$,height:$,viewBox:`0 0 ${$} ${$}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:V,cy:V,r:z,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:L}),r("circle",{cx:V,cy:V,r:z,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:L,strokeLinecap:"round",className:w?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${V} ${V})`,...w?null:{strokeDasharray:100,strokeDashoffset:100*(1-N)}})]}),x?r(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:x}):null,k?r(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>u(N,r,b)}):null]})});
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{CONTROL_GAP as o,META_TEXT as n}from"../../internal/scale.js";import{RING_DIAMETER as l,RING_STROKE as i,progressAriaText as c,progressFraction as m,progressText as u}from"../../internal/progress.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a="md",color:p="primary",value:f=null,min:h=0,max:d=100,label:x,showValue:k=!1,format:g,className:v,style:y},j){const N=m(f,h,d),w=null===N,b=void 0!==g,$=l[a],L=i[a],V=$/2,z=V-L/2;return e(s.Root,{ref:j,value:null===N?null:f??null,min:h,max:d,format:g,getAriaValueText:c(N,b),"data-mp-size":a,className:["mp-progress-circular inline-flex items-center",o[a],n,v??""].filter(Boolean).join(" "),style:{...t(p),...y},children:[e("svg",{className:w?"mp-progress-circular-turn shrink-0":"shrink-0",width:$,height:$,viewBox:`0 0 ${$} ${$}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:V,cy:V,r:z,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:L}),r("circle",{cx:V,cy:V,r:z,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:L,strokeLinecap:"round",className:w?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${V} ${V})`,...w?null:{strokeDasharray:100,strokeDashoffset:100*(1-N)}})]}),x?r(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:x}):null,k?r(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>u(N,r,b)}):null]})});

package/dist/components/progress-linear/MPProgressLinear.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as l}from"../../internal/accent.js";import{META_TEXT as n,STACK_GAP as t}from"../../internal/scale.js";import{BAR_THICKNESS as i,progressAriaText as o,progressFraction as m,progressText as c}from"../../internal/progress.js";export const MPProgressLinear=/*@__PURE__*/r.forwardRef(function({size:u="md",color:p="primary",value:f=null,min:d=0,max:x=100,label:g,showValue:h=!1,format:j,className:b,style:N},w){const v=m(f,d,x),y=null===v,V=void 0!==j,$="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(s.Root,{ref:w,value:f??null,min:d,max:x,format:j,getAriaValueText:o(v,V),"data-mp-size":u,className:["mp-progress-linear flex w-full flex-col",t[u],b??""].filter(Boolean).join(" "),style:{...l(p),...N},children:[g||h?a("div",{className:["flex items-baseline gap-2",g?"justify-between":"justify-end",n].join(" "),children:[g?e(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:g}):null,h?e(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>c(v,e,V)}):null]}):null,e(s.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",i[u]].join(" "),children:y?a(r.Fragment,{children:[e("span",{className:`${$} mp-progress-linear-lead`}),e("span",{className:`${$} mp-progress-linear-trail`})]}):e(s.Indicator,{className:`${$} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as l}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent.js";import{META_TEXT as n,STACK_GAP as t}from"../../internal/scale.js";import{BAR_THICKNESS as i,progressAriaText as o,progressFraction as m,progressText as c}from"../../internal/progress.js";export const MPProgressLinear=/*@__PURE__*/r.forwardRef(function({size:u="md",color:p="primary",value:f=null,min:d=0,max:x=100,label:g,showValue:h=!1,format:j,className:b,style:N},w){const v=m(f,d,x),y=null===v,V=void 0!==j,$="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(l.Root,{ref:w,value:null===v?null:f??null,min:d,max:x,format:j,getAriaValueText:o(v,V),"data-mp-size":u,className:["mp-progress-linear flex w-full flex-col",t[u],b??""].filter(Boolean).join(" "),style:{...s(p),...N},children:[g||h?a("div",{className:["flex items-baseline gap-2",g?"justify-between":"justify-end",n].join(" "),children:[g?e(l.Label,{className:"text-mp-on-surface min-w-0 truncate",children:g}):null,h?e(l.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>c(v,e,V)}):null]}):null,e(l.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",i[u]].join(" "),children:y?a(r.Fragment,{children:[e("span",{className:`${$} mp-progress-linear-lead`}),e("span",{className:`${$} mp-progress-linear-trail`})]}):e(l.Indicator,{className:`${$} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});

package/dist/components/radio-group/MPRadioGroup.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as n}from"@base-ui/react/radio-group";import{Field as l}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale.js";const m={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},u=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:n,label:o,description:s,disabled:f=!1,id:x},g){const h=r.useContext(u),b=m[h.size],y=r.useId(),z=x??`mp-radio-${y}`;return e(l.Root,{className:"mp-radio inline-block align-top",disabled:f,"data-mp-value":n,children:a("div",{className:["flex items-start gap-3",c[h.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:g,id:z,value:n,disabled:f,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",b.ring,f?"border-mp-on-surface/38 cursor-default":[h.readOnly?"cursor-default":"cursor-pointer",h.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",b.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",b.fill,"transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0",f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(l.Label,{htmlFor:z,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":h.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(l.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:m,description:f,errorMessage:x,orientation:g="vertical",size:h="md",color:b="primary",required:y=!1,disabled:z=!1,readOnly:v=!1,name:j,children:N},R){const O=p(x),k=O?"error":b,w=r.useId(),M=r.useMemo(()=>({size:h,readOnly:v,invalid:O}),[h,v,O]);return e(u.Provider,{value:M,children:a(l.Root,{className:"mp-radio-group flex flex-col gap-2",disabled:z,invalid:O,"data-mp-size":h,"data-mp-orientation":g,style:o(k),children:[p(m)?a("span",{id:w,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:R,"aria-labelledby":p(m)?w:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:v,required:y,name:j,className:["flex","horizontal"===g?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as n}from"@base-ui/react/radio-group";import{Field as l}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale.js";const u={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},m=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:n,label:o,description:s,disabled:f=!1,id:x},g){const h=r.useContext(m),b=u[h.size],y=r.useId(),z=x??y;return e(l.Root,{className:"mp-radio inline-block align-top",disabled:f,"data-mp-value":n,children:a("div",{className:["flex items-start gap-3",c[h.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:g,id:z,value:n,disabled:f,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",b.ring,f?"border-mp-on-surface/38 cursor-default":[h.readOnly?"cursor-default":"cursor-pointer",h.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",b.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",b.fill,"transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0",f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(l.Label,{htmlFor:z,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":h.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(l.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:u,description:f,errorMessage:x,orientation:g="vertical",size:h="md",color:b="primary",required:y=!1,disabled:z=!1,readOnly:v=!1,name:j,children:N},R){const O=p(x),k=O?"error":b,w=r.useId(),M=r.useMemo(()=>({size:h,readOnly:v,invalid:O}),[h,v,O]);return e(m.Provider,{value:M,children:a(l.Root,{className:"mp-radio-group flex flex-col gap-2",disabled:z,invalid:O,"data-mp-size":h,"data-mp-orientation":g,style:o(k),children:[p(u)?a("span",{id:w,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[u,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:R,"aria-labelledby":p(u)?w:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:v,required:y,name:j,className:["flex","horizontal"===g?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});

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 i}from"../../constants/icons.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as u,CONTROL_TEXT as m}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:j="md",fullWidth:x=!1,disabled:y=!1,"aria-label":v},w){return e(o,{ref:w,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:y,"data-mp-size":j,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",y?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",d[j]].join(" "),children:r.map((r,o)=>{const d=y||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)",m[j],l[j],u[j],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(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(s,{}),g||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[j],height:c[j]},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:i,size:c[j]})}):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})]},r.value)})})});
+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 i}from"../../constants/icons.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as u,CONTROL_TEXT as m}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:j="md",fullWidth:x=!1,disabled:y=!1,"aria-label":v},w){return e(o,{ref:w,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:y,"data-mp-size":j,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",y?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",d[j]].join(" "),children:r.map((r,o)=>{const d=y||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)",m[j],l[j],u[j],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(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(s,{}),g||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[j],height:c[j]},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:i,size:c[j]})}):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}`)})})});

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

@@ -23,7 +23,18 @@ export interface MPSelectProps extends MPStyleProps {
      * 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
+     * — windowing costs a measured container, a scroll listener and a row height
+     * the component would have to decide for the caller — and it has a ceiling: a
+     * few hundred rows is nothing, a few thousand is a visible pause when the list
+     * opens, and past that the answer is a narrower list rather than a faster one.
+     *
+     * A list somebody has to scroll ten thousand rows of is a list that wanted a
+     * filter. Where it genuinely is that long, window it yourself and pass the
+     * slice.
      */
     items: readonly MPSelectOption[];
     /** The chosen value. Use with `onValueChange` for a controlled 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},L){const R=h(z),F=v[M],W=t.useId(),B=C??W,[A,D]=t.useState(N??null),[E,G]=t.useState(!1),H=void 0===j?A:j,{shrunk:J,focusProps:K}=c({floating:S&&h(I),filled:null!==H&&""!==H,pinned:E||!!P}),Q=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"].join(" "),disabled:q,invalid:R,"data-mp-size":M,...K,children:[a(n.Root,{id:B,name:_,items:Q,value:j,defaultValue:N,onValueChange:e=>{D(e??null),y?.(e??null)},onOpenChange:G,disabled:q,readOnly:T,required:V,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:L,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",F.padding,F.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:J?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:J}),h(I)?e(s,{size:M,label:I,required:V,htmlFor:B,shrunk:J}):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=>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)})]},String(t.value)))})})})})]}),e(p,{description:k,errorMessage:z,className:F.padding})]})});
+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},L){const R=h(z),F=v[M],W=t.useId(),$=C??W,[B,A]=t.useState(N??null),[D,E]=t.useState(!1),G=void 0===j?B:j,{shrunk:H,focusProps:J}=c({floating:S&&h(I),filled:null!==G&&""!==G,pinned:D||!!P}),K=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"].join(" "),disabled:q,invalid:R,"data-mp-size":M,...J,children:[a(n.Root,{id:$,name:_,items:K,value:j,defaultValue:N,onValueChange:e=>{A(e??null),y?.(e??null)},onOpenChange:E,disabled:q,readOnly:T,required:V,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:L,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",F.padding,F.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:H?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:H}),h(I)?e(s,{size:M,label:I,required:V,htmlFor:$,shrunk:H}):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:F.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 t from"react";import{accentSlots as o}from"../../internal/accent.js";import{VISUALLY_HIDDEN as r}from"../../internal/visually-hidden.js";const m=e=>({symbol:e,name:e}),l={mod:{mac:{symbol:"⌘",name:"Command"},windows:m("Ctrl"),linux:m("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:m("Win"),linux:m("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:m("Ctrl"),linux:m("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:m("Alt"),linux:m("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:m("Shift"),linux:m("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:m("Enter"),linux:m("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:m("Tab"),linux:m("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:m("Esc"),linux:m("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:m("Backspace"),linux:m("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:m("Del"),linux:m("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:m("Caps Lock"),linux:m("Caps Lock")}},s={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"},i={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"}};function c(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,n=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(n)?"mac":/win/i.test(n)?"windows":"linux"}function d(){return()=>{}}function p(){return"windows"}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"},f={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"},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__*/t.forwardRef(function({variant:h="outlined",size:g="md",color:v="secondary",keys:A,os:k="auto",separator:C,className:j,style:E,...S},B){const N=t.useSyncExternalStore(d,c,p),_="auto"===k?N:k,D=function(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(A),L=D.map(e=>function(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),t=s[a]??a,o=i[t];if(o)return o;const r=l[t];return r?r[n]:m(1===e.length?e.toUpperCase():e)}(e,_)),T=void 0===C?"mac"===_?null:"+":C,$=/*@__PURE__*/["inline-flex shrink-0 items-center justify-center","font-mono leading-none whitespace-nowrap tabular-nums",u[g],w[g],x[g],f[g],b[g],y[h]].join(" ");return e("span",{ref:B,"data-mp-size":g,"data-mp-variant":h,className:["mp-shortcut inline-flex max-w-full items-center gap-1 align-middle",j??""].filter(Boolean).join(" "),style:{...o(v),...E},...S,children:L.map((o,m)=>a(t.Fragment,{children:[m>0&&null!==T?e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant",children:T}):null,e("kbd",{className:$,children:o.symbol===o.name?o.symbol:a(n,{children:[e("span",{"aria-hidden":"true",children:o.symbol}),e("span",{className:r,children:o.name})]})})]},m))})});
+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))})});

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

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { type MPPageCollapse, type MPSidebarSide } from '../../internal/page-layout.js';
+import type { MPSize, MPVariant } from '../../types.js';
+export type { MPPageCollapse, MPSidebarSide } from '../../internal/page-layout.js';
+export interface MPSidebarProps extends Omit<React.ComponentPropsWithoutRef<'aside'>, 'title'> {
+    /**
+     * Which end of the band it takes. Logical rather than physical — `start` is
+     * the left of an English page and the right of an Arabic one — because
+     * navigation sits beside the text it belongs to in every writing direction.
+     *
+     * Inside an [MPPageLayout](./page-layout) this is already decided by which
+     * slot the sidebar was handed to, and setting it again is only a way of
+     * disagreeing with the layout.
+     * @default 'start'
+     */
+    side?: MPSidebarSide;
+    /**
+     * How wide the column is — a number in pixels or any CSS length. Left out, it
+     * is the width `size` implies.
+     *
+     * With `resizable` this is only the width the column *starts* at: a drag
+     * writes over it, and the caller hears about it through `onResizeEnd`.
+     */
+    width?: number | string;
+    /**
+     * How narrow it may be dragged.
+     * @default 160
+     */
+    minWidth?: number | string;
+    /**
+     * And how wide.
+     * @default 480
+     */
+    maxWidth?: number | string;
+    /**
+     * Lets the reader drag the inner edge to change the column's width.
+     *
+     * Off by default. A sidebar that can be resized is a sidebar whose width is
+     * the reader's to remember, so a caller who turns this on usually also wants
+     * to store what `onResizeEnd` reports.
+     * @default false
+     */
+    resizable?: boolean;
+    /** Fires with the width in pixels while the edge is being dragged. */
+    onResize?: (width: number) => void;
+    /** Fires once, with the same number, when it is let go. */
+    onResizeEnd?: (width: number) => void;
+    /**
+     * The window size class below which the column becomes a drawer, opened by an
+     * [MPSidebarTrigger](#mpsidebartrigger). `none` keeps it a column at every
+     * width.
+     *
+     * Defaults to the [MPPageLayout](./page-layout)'s own `collapseBelow`, and to
+     * `none` outside one: a sidebar that collapsed with nothing on the page able
+     * to bring it back would be a sidebar the reader has lost.
+     */
+    collapseBelow?: MPPageCollapse;
+    /**
+     * Whether the drawer is open. Only meaningful once the sidebar has collapsed;
+     * a column is not opened, it is there.
+     *
+     * Inside an [MPPageLayout](./page-layout) the layout owns this — it is what a
+     * trigger anywhere on the page talks to — so control it there rather than
+     * here. `onOpenChange` still fires either way.
+     */
+    open?: boolean;
+    /**
+     * Which state it starts in, for an uncontrolled standalone sidebar.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the column holds its place while the page scrolls past it.
+     *
+     * On by default, and it costs nothing when it is not needed: with the page
+     * scrolling it becomes a `sticky` column as tall as what is left of the window
+     * under the header, and with only the content scrolling it is already as tall
+     * as the layout and this changes nothing.
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * The heading, drawn only while the sidebar is a drawer.
+     *
+     * A column has the page around it to say what it is. A panel that has covered
+     * the page does not, and a dialog with no heading has no accessible name — so
+     * without one the drawer falls back to `label`, and then to the word for
+     * "sidebar" in `locale`.
+     */
+    title?: React.ReactNode;
+    /**
+     * How much surface the column paints, on the **container** ladder — a sidebar
+     * is never dyed, because what sits on it arrives with colours of its own.
+     *
+     * `outlined` is the default: the page's own surface, with a hairline down the
+     * edge that faces the content. That is the column *in the layout*. Once it has
+     * collapsed it is an [MPDrawer](./drawer), which paints MD3's own navigation
+     * drawer surface and takes no weight from here.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * 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
+     * [MPDrawer](./drawer) is drawn at.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * The gutter, and the air above and below the content.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The name the region is announced by.
+     *
+     * Every `<aside>` on a page should have one, and a page with two sidebars
+     * *must*, or a screen reader offers two regions called "complementary".
+     * Defaults to the word for "sidebar" in `locale`.
+     */
+    label?: string;
+    /**
+     * Which language the sidebar's own words are in. Falls back to the
+     * [MPPageLayout](./page-layout)'s, then to the nearest `MPLocaleProvider`,
+     * then to English.
+     */
+    locale?: string;
+    /** Everything in it: a nav, a filter panel, a table of contents. */
+    children?: React.ReactNode;
+}
+/**
+ * A column beside the page's content, and a drawer once the window is too narrow
+ * to hold one.
+ *
+ * Two presentations of one panel, which is exactly the distinction MD3 draws:
+ * the **standard** navigation drawer is part of the layout and the content is
+ * laid out around it, and below an expanded window the same destinations arrive
+ * as a **modal** drawer over a scrim. They are one component here because they
+ * are one thing — a caller should not have to swap components at a breakpoint —
+ * and because the children exist once either way, so nothing inside is put into
+ * the document twice for a screen reader to read twice.
+ *
+ * A real `<aside>`, which is the `complementary` landmark: the region a screen
+ * reader offers as "related to the page but not the page", and what a crawler
+ * reads as navigation chrome rather than as the article.
+ *
+ * ## Which of the two is showing is answered twice, on purpose
+ *
+ * In CSS for the first paint, and in JavaScript from then on.
+ *
+ * The markup a server sends is the **column**, because a collapsed sidebar is a
+ * drawer, a modal drawer is a portal into `document.body`, and there is no body
+ * to portal into while the markup is being rendered. So a narrow screen would
+ * draw a full-width sidebar and throw it away a moment later — the class that
+ * hides the column below the breakpoint is what stops that, and `matchMedia` is
+ * what decides, once there is a window to ask, that the drawer should exist at
+ * all.
+ */
+export declare const MPSidebar: React.ForwardRefExoticComponent<MPSidebarProps & React.RefAttributes<HTMLElement>>;

package/dist/components/sidebar/MPSidebar.js

@@ -0,0 +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]})});