material-plus-ui 1.4.0 → 1.6.0

package/.fix.py

@@ -0,0 +1,92 @@
+import pathlib, sys
+def rep(path, old, new):
+    p = pathlib.Path(path); s = p.read_text(encoding='utf-8')
+    if s.count(old) != 1: print(f'FAIL {path}: {s.count(old)}'); sys.exit(1)
+    p.write_text(s.replace(old, new, 1), encoding='utf-8'); print('ok ', path)
+
+EN_OLD = """Yours is appended to the component's own, and nothing is removed to make room for it. So **two utilities setting the same property are resolved by the stylesheet rather than by which of them you wrote.**
+
+Which one that is depends on how the styles were wired up. On the precompiled path it is whichever sheet the application imported second. On the Tailwind path both are generated in one pass, and Tailwind's own ordering decides — which is per property, and not something to work out at the call site:
+
+| You pass     | The component sets    | Which one wins |
+| ------------ | --------------------- | -------------- |
+| `p-8`        | `px-6`                | the component  |
+| `rounded-lg` | `rounded-mp-full`     | the component  |
+| `shadow-lg`  | `shadow-mp-1`         | the component  |
+| `text-lg`    | `text-mp-label-large` | yours          |
+| `bg-red-500` | `bg-mp-primary`       | yours          |
+| `h-20`       | `h-14`                | yours          |
+
+Read the column, not the rows: the answers are what one version of Tailwind happens to emit, and the point is that there is no rule connecting them. `className` is the right tool for what a component does **not** already set — margin, width, grid placement, position, an animation — and the wrong one for taking something over."""
+
+EN_NEW = """Yours is appended to the component's own, and nothing is removed to make room for it. Two classes setting the same property both end up on the element, at equal specificity, and **the one that wins is the one the stylesheet happens to put last** — not the one you wrote.
+
+A class for something the component does not already set always works. That is most of what a class is for, and there is nothing more to know about it:
+
+```tsx
+<MPButton className="mt-4 w-full">Save</MPButton>
+```
+
+Past that it depends on the pair. On the precompiled path it depends on which sheet the application imported second; on the Tailwind path both are generated in one pass and Tailwind's own ordering decides. Measured against this repository's own stylesheet, on an `MPButton` at the default size:
+
+| You pass                     | It sets                  | Result  |
+| ---------------------------- | ------------------------ | ------- |
+| `px-8`                       | `px-6`                   | applies |
+| `px-2`                       | `px-6`                   | ignored |
+| `h-20`                       | `h-14`                   | applies |
+| `h-8`                        | `h-14`                   | ignored |
+| `text-lg`, `text-xs`         | `text-mp-title-medium`   | applies |
+| `bg-red-500`                 | `bg-(--_mp-accent)`      | applies |
+| `rounded-lg`                 | `rounded-mp-full`        | ignored |
+| `shadow-lg`                  | `shadow-mp-1`            | ignored |
+| `p-8`                        | `px-6`                   | ignored |
+| any of the above with a `!`  | —                        | applies |
+
+The first four rows are the ones worth staring at. `px-8` works and `px-2` does not, on the same component and the same property, because Tailwind emits a scale in scale order and the larger step is therefore later — so *making a control bigger tends to work and making it smaller tends not to*. The rest is which of two theme keys Tailwind happened to sort first: the library's `--text-mp-*` land before Tailwind's own, so any `text-*` you pass wins, while `--radius-mp-*` and `--shadow-mp-*` land after, so `rounded-*` and `shadow-*` do not.
+
+None of that is a promise. It is what one version of Tailwind emits, it is per pair rather than per property, and it can move under you when either side adds a token. Treat `className` as the tool for what the component leaves alone."""
+
+KO_OLD = """넘긴 클래스는 컴포넌트 자신의 클래스 뒤에 붙고, 자리를 내주기 위해 지워지는 것은 없습니다. 그래서 **같은 속성을 지정하는 두 유틸리티는 어느 쪽을 썼는지가 아니라 스타일시트가 결정합니다.**
+
+어느 쪽이 되는지는 스타일을 어떻게 연결했는지에 달려 있습니다. 컴파일된 시트를 쓰는 경우에는 애플리케이션이 나중에 import한 시트가 이깁니다. Tailwind를 쓰는 경우에는 둘이 한 번의 패스에서 생성되고 Tailwind 자신의 정렬이 결정하는데, 그 정렬은 속성마다 다르고 호출부에서 따져볼 만한 것이 아닙니다.
+
+| 넘긴 것 | 컴포넌트가 지정한 것 | 이기는 쪽 |
+| --- | --- | --- |
+| `p-8` | `px-6` | 컴포넌트 |
+| `rounded-lg` | `rounded-mp-full` | 컴포넌트 |
+| `shadow-lg` | `shadow-mp-1` | 컴포넌트 |
+| `text-lg` | `text-mp-label-large` | 넘긴 쪽 |
+| `bg-red-500` | `bg-mp-primary` | 넘긴 쪽 |
+| `h-20` | `h-14` | 넘긴 쪽 |
+
+행이 아니라 열을 보세요. 이 답들은 어떤 한 버전의 Tailwind가 그렇게 내놓은 것일 뿐이고, 요점은 이들을 이어 주는 규칙이 없다는 것입니다. `className`은 컴포넌트가 **지정하지 않은** 것 — 마진, 너비, 그리드 배치, 위치, 애니메이션 — 에 쓰는 도구이고, 이미 지정된 것을 가져오는 데 쓰는 도구가 아닙니다."""
+
+KO_NEW = """넘긴 클래스는 컴포넌트 자신의 클래스 뒤에 붙고, 자리를 내주기 위해 지워지는 것은 없습니다. 같은 속성을 지정하는 두 클래스가 같은 명시도로 엘리먼트에 함께 올라가고, **이기는 쪽은 스타일시트가 뒤에 놓은 쪽입니다.** 어느 쪽을 썼는지가 아닙니다.
+
+컴포넌트가 지정하지 않은 것에 대한 클래스는 언제나 적용됩니다. 클래스로 하려는 일의 대부분이 이것이고, 여기에 더 알아야 할 것은 없습니다.
+
+```tsx
+<MPButton className="mt-4 w-full">저장</MPButton>
+```
+
+그 너머는 짝에 따라 다릅니다. 컴파일된 시트를 쓰는 경우에는 애플리케이션이 나중에 import한 시트가 이기고, Tailwind를 쓰는 경우에는 둘이 한 번의 패스에서 생성되어 Tailwind 자신의 정렬이 결정합니다. 이 저장소의 시트로, 기본 크기의 `MPButton`에 대고 실제로 측정한 결과입니다.
+
+| 넘긴 것 | 컴포넌트가 지정한 것 | 결과 |
+| --- | --- | --- |
+| `px-8` | `px-6` | 적용됨 |
+| `px-2` | `px-6` | 무시됨 |
+| `h-20` | `h-14` | 적용됨 |
+| `h-8` | `h-14` | 무시됨 |
+| `text-lg`, `text-xs` | `text-mp-title-medium` | 적용됨 |
+| `bg-red-500` | `bg-(--_mp-accent)` | 적용됨 |
+| `rounded-lg` | `rounded-mp-full` | 무시됨 |
+| `shadow-lg` | `shadow-mp-1` | 무시됨 |
+| `p-8` | `px-6` | 무시됨 |
+| 위의 어느 것이든 `!`를 붙이면 | — | 적용됨 |
+
+들여다볼 만한 것은 처음 네 줄입니다. 같은 컴포넌트, 같은 속성인데 `px-8`은 되고 `px-2`는 안 됩니다. Tailwind가 스케일을 스케일 순서로 내놓기 때문에 더 큰 단계가 더 뒤에 오고, 그래서 *컨트롤을 키우는 쪽은 대체로 되고 줄이는 쪽은 대체로 안 됩니다*. 나머지는 두 테마 키 중 어느 쪽을 Tailwind가 먼저 정렬했는가의 문제입니다. 이 라이브러리의 `--text-mp-*`는 Tailwind 자신의 것보다 앞에 놓이므로 넘긴 `text-*`가 이기고, `--radius-mp-*`와 `--shadow-mp-*`는 뒤에 놓이므로 `rounded-*`와 `shadow-*`는 지지 않고 집니다.
+
+이 중 무엇도 약속이 아닙니다. 어떤 한 버전의 Tailwind가 내놓은 결과이고, 속성 단위가 아니라 짝 단위이며, 양쪽 중 어느 한쪽이 토큰을 추가하면 발밑에서 움직일 수 있습니다. `className`은 컴포넌트가 건드리지 않는 것에 쓰는 도구로 두세요."""
+
+rep('docs/en/guide/getting-started.md', EN_OLD, EN_NEW)
+rep('docs/ko/guide/getting-started.md', KO_OLD, KO_NEW)

package/README.md

@@ -23,7 +23,7 @@ It follows the specification directly rather than wrapping somebody's implementa
 - **IME-safe by construction.** Korean, Japanese and Chinese composition survives whatever your `onChange` does with the value.
 - **Bring your own icons.** `MPIcon` takes a component or an element from any set. `lucide-react` ships with the package, gathered in one readable constants file.
 - **Works in a Next.js server component**, and in any bundler: the components carry `"use client"`, the barrel and the data do not, and every specifier in `dist/` names a file — so webpack, Vite, esbuild, Rollup and plain Node all resolve it.
-- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 2.9 kB gzipped and five are 7.3 kB, against 74 kB for all hundred and eleven. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
+- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 2.9 kB gzipped and five are 7.4 kB, against 74 kB for all hundred and eleven. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
 - **One runtime dependency.** React 18 or 19, Node.js 22 or later.
 
 ## Documentation

package/dist/components/accordion/MPAccordion.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Accordion as i}from"@base-ui/react/accordion";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_PAD_X as u,SHEET_PAD_Y as f,SHEET_TITLE as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as h}from"../../internal/surface.js";const x=/*@__PURE__*/t.createContext({size:"md",dividers:!0}),v=/*@__PURE__*/["h-(--accordion-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),b={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/t.forwardRef(function({multiple:n=!1,value:a,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",size:c="md",hiddenUntilFound:m=!1,keepMounted:u=!1,className:f,children:p,...v},b){const j=t.useMemo(()=>({size:c,dividers:s}),[c,s]);return e(x.Provider,{value:j,children:e(i.Root,{ref:b,multiple:n,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:m,keepMounted:u,"data-mp-size":c,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h[d],"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",f??""].filter(Boolean).join(" "),...v,children:p})})});export const MPAccordionItem=/*@__PURE__*/t.forwardRef(function({value:h,title:j,subtitle:N,startIcon:g,action:w,disabled:y=!1,className:z,children:M,...k},P){const{size:C,dividers:I}=t.useContext(x),V=u[C],B=f[C];return n(i.Item,{ref:P,value:h,disabled:y,className:["mp-accordion__item flex flex-col",z??""].filter(Boolean).join(" "),...k,children:[n(i.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[n(i.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",V,B,s[C],I?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].filter(Boolean).join(" "),children:[e(o,{}),d(g)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:g}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(j)?e("span",{className:`truncate ${p[C]}`,children:j}):null,d(N)?e("span",{className:`text-mp-on-surface-variant truncate ${c}`,children:N}):null]}),e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(a,{icon:r,size:l[C]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${V}`,children:w}):null]}),e(i.Panel,{className:v,children:e("div",{className:["min-w-0",m[C],"text-mp-on-surface-variant",V,b[C]].join(" "),children:M})})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Accordion as a}from"@base-ui/react/accordion";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_PAD_X as u,SHEET_PAD_Y as p,SHEET_TITLE as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as h}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const x=/*@__PURE__*/n.createContext({size:"md",dividers:!0}),b=/*@__PURE__*/["h-(--accordion-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" ");const g={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/n.forwardRef(function({multiple:t=!1,value:i,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",size:c,hiddenUntilFound:m=!1,keepMounted:u=!1,className:p,children:f,...b},g){const j=v(c),N=n.useMemo(()=>({size:j,dividers:s}),[j,s]);return e(x.Provider,{value:N,children:e(a.Root,{ref:g,multiple:t,value:i,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:m,keepMounted:u,"data-mp-size":j,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h[d],"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",p??""].filter(Boolean).join(" "),...b,children:f})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:j,startIcon:N,action:w,disabled:y=!1,className:_,children:k,...z},C){const{size:M,dividers:A}=n.useContext(x),P=u[M],B=p[M],I=n.useRef(null),[R,V]=n.useState(!1),F=n.useCallback(e=>{var t;I.current=e,e&&V(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(a.Item,{ref:C,value:h,disabled:y,className:["mp-accordion__item flex flex-col",_??""].filter(Boolean).join(" "),...z,children:[t(a.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[t(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",P,B,s[M],A?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].filter(Boolean).join(" "),children:[e(o,{}),d(N)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:N}):null,t("span",{className:"mp-accordion__text flex min-w-0 flex-1 flex-col",children:[d(v)?e("span",{className:`mp-accordion__title truncate ${f[M]}`,children:v}):null,d(j)?e("span",{className:`mp-accordion__subtitle text-mp-on-surface-variant truncate ${c}`,children:j}):null]}),e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:r,size:l[M]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${P}`,children:w}):null]}),e(a.Panel,{ref:F,className:[b,R?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===I.current&&"height"===e.propertyName&&V(I.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[M],"text-mp-on-surface-variant",P,g[M]].join(" "),children:k})})]})});

package/dist/components/alert/MPAlert.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as l,ErrorIcon as i,InfoIcon as o}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as c}from"../../internal/locale.js";import{ALERT as m}from"../../internal/messages/alert.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_ICON as f,hasContent as d,PROSE_TEXT as u,SHEET_GAP as x,SHEET_PAD as v,SHEET_TITLE as h,STACK_GAP as b}from"../../internal/scale.js";const j={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline border bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"},y={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},N={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},g={primary:"polite",secondary:"polite",tertiary:"polite",error:"assertive"},_={assertive:"alert",polite:"status",off:void 0};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:n="tonal",color:w="primary",size:z="md",title:k,icon:B,action:C,live:L,onClose:M,closeLabel:P,locale:A,className:I,style:R,children:S,...$},q){const D=s(A),E=c(m,D),F=y[n],G=d(k),H=void 0===B?e(r,{icon:"error"===w?i:o,size:f[z]}):B;return t("div",{ref:q,role:_[L??g[w]],"data-mp-size":z,"data-mp-variant":n,className:["mp-alert rounded-mp-md flex w-full items-start","box-border",v[z],x[z],u[z],j[n],I??""].filter(Boolean).join(" "),style:{...a(w),...R},...$,children:[d(H)?e("span",{className:["flex h-[1lh] shrink-0 items-center",F].filter(Boolean).join(" "),children:H}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[z]}`,children:[G?e("div",{className:[h[z],F].filter(Boolean).join(" "),children:k}):null,d(S)?e("div",{className:G?N[n]:void 0,children:S}):null]}),d(C)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null,M?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":P??E.dismiss,onClick:M,className:["group rounded-mp-full relative -m-1 flex size-8 cursor-pointer items-center","justify-center bg-transparent text-inherit","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(p,{}),e(r,{icon:l,size:f[z]})]})}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as o,ErrorIcon as i,InfoIcon as l}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as c}from"../../internal/locale.js";import{ALERT as m}from"../../internal/messages/alert.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as p,hasContent as d,PROSE_TEXT as u,SHEET_GAP as x,SHEET_PAD as v,SHEET_TITLE as h,STACK_GAP as b}from"../../internal/scale.js";import{useMPColor as j,useMPSize as g}from"../../internal/config.js";const 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",outlined:"border-mp-outline border bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"},N={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},_={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},w={primary:"polite",secondary:"polite",tertiary:"polite",error:"assertive"},z={assertive:"alert",polite:"status",off:void 0};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:n="tonal",color:k,size:B,title:C,icon:L,action:M,live:P,onClose:A,closeLabel:I,locale:R,className:S,style:$,children:q,...D},E){const F=j(k),G=g(B),H=s(R),J=c(m,H),K=N[n],O=d(C),Q=void 0===L?e(r,{icon:"error"===F?i:l,size:p[G]}):L;return t("div",{ref:E,role:z[P??w[F]],"data-mp-size":G,"data-mp-variant":n,className:["mp-alert rounded-mp-md flex w-full items-start","box-border",v[G],x[G],u[G],y[n],S??""].filter(Boolean).join(" "),style:{...a(F),...$},...D,children:[d(Q)?e("span",{className:["flex h-[1lh] shrink-0 items-center",K].filter(Boolean).join(" "),children:Q}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[G]}`,children:[O?e("div",{className:[h[G],K].filter(Boolean).join(" "),children:C}):null,d(q)?e("div",{className:O?_[n]:void 0,children:q}):null]}),d(M)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:M}):null,A?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":I??J.dismiss,onClick:A,className:["group rounded-mp-full relative -m-1 flex size-8 cursor-pointer items-center","justify-center bg-transparent text-inherit","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(f,{}),e(r,{icon:o,size:p[G]})]})}):null]})});

package/dist/components/animate-lighting/MPAnimateLighting.js

@@ -1 +1 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent.js";import{isInfinite as n,repeatValue as t,useAnimationRun as m}from"../../internal/animate.js";const i={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-lg",xl:"rounded-mp-xl"};export const MPAnimateLighting=/*@__PURE__*/e.forwardRef(function({duration:e=3e3,delay:o=0,repeat:s="infinite",alternate:d,paused:p,trigger:l="mount",play:c,once:g=!0,threshold:u=.2,color:f="primary",size:h="md",spread:_=3,arc:x=50,blur:y=4,reverse:w=!1,render:$,className:b,style:j,children:v,...z},N){const A=m({trigger:l,play:c,once:g,threshold:u,paused:p,infinite:n(s)});return r({render:$,ref:[N,A.ref],props:{...z,"data-mp-size":h,className:["mp-anim-lighting",i[h],b].filter(Boolean).join(" "),style:{...a(f),"--_mp-anim-duration":`${e}ms`,"--_mp-anim-delay":`${o}ms`,"--_mp-anim-repeat":t(s),"--_mp-anim-direction":w?d?"alternate-reverse":"reverse":d?"alternate":"normal","--_mp-anim-state":A.state,"--_mp-anim-glow-width":`${_}px`,"--_mp-anim-glow-arc":`${x}deg`,"--_mp-anim-glow-blur":`${y}px`,...j},...A.handlers,"data-mp-animation":"lighting","data-mp-state":A.state,children:v}})});
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent.js";import{isInfinite as n,repeatValue as t,useAnimationRun as i}from"../../internal/animate.js";import{useMPColor as m,useMPSize as o}from"../../internal/config.js";const s={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-lg",xl:"rounded-mp-xl"};export const MPAnimateLighting=/*@__PURE__*/e.forwardRef(function({duration:e=3e3,delay:d=0,repeat:l="infinite",alternate:p,paused:c,trigger:g="mount",play:u,once:f=!0,threshold:h=.2,color:_,size:x,spread:y=3,arc:w=50,blur:$=4,reverse:j=!1,render:b,className:v,style:z,children:N,...A},B){const L=m(_),M=o(x),P=i({trigger:g,play:u,once:f,threshold:h,paused:c,infinite:n(l)});return r({render:b,ref:[B,P.ref],props:{...A,"data-mp-size":M,className:["mp-anim-lighting",s[M],v].filter(Boolean).join(" "),style:{...a(L),"--_mp-anim-duration":`${e}ms`,"--_mp-anim-delay":`${d}ms`,"--_mp-anim-repeat":t(l),"--_mp-anim-direction":j?p?"alternate-reverse":"reverse":p?"alternate":"normal","--_mp-anim-state":P.state,"--_mp-anim-glow-width":`${y}px`,"--_mp-anim-glow-arc":`${w}deg`,"--_mp-anim-glow-blur":`${$}px`,...z},...P.handlers,"data-mp-animation":"lighting","data-mp-state":P.state,children:N}})});

package/dist/components/aspect-ratio/MPAspectRatio.js

@@ -1 +1 @@
-import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";const i={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:c="cover",rounded:l=!1,size:n="md",render:s,className:d,style:m,children:a,...u},f){const p=["mp-aspect-ratio relative block w-full overflow-hidden",t,r[c],l?i[n]:"",d??""].filter(Boolean).join(" ");return o({render:s,ref:f,props:{"data-mp-size":n,className:p,style:{aspectRatio:e,...m},children:a,...u}})});
+import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMPSize as i}from"../../internal/config.js";const r={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),c={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:n="cover",rounded:l=!1,size:s,render:m,className:d,style:a,children:f,...u},p){const j=i(s),b=["mp-aspect-ratio relative block w-full overflow-hidden",t,c[n],l?r[j]:"",d??""].filter(Boolean).join(" ");return o({render:m,ref:p,props:{"data-mp-size":j,className:b,style:{aspectRatio:e,...a},children:f,...u}})});

package/dist/components/avatar/MPAvatar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{MPAvatarGroupContext as l}from"../../internal/avatar-group.js";import{CONTROL_SQUARE as i,hasContent as o}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";const m={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},c={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},d={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function p(){return a("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=/*@__PURE__*/t.forwardRef(function({src:u,srcSet:f,alt:h,name:x,initials:g,shape:v,variant:b,size:j,color:y,delay:N,imageProps:w,onLoadingStatusChange:z,className:C,style:_,children:A,...B},S){const L=t.useContext(l),M=v??L?.shape??"circle",k=b??L?.variant??"tonal",F=j??L?.size??"md",P=y??L?.color??"primary",R=x?function(e){const a=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===a.length?"":((Array.from(a[0])[0]??"")+(a.length>1?Array.from(a[a.length-1])[0]??"":"")).toLocaleUpperCase()}(x):"",Z=h??x,I=o(A)?A:(g??R)||e(p,{}),U=o(A)||Boolean(g??R),q=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",i[F],m[F],"circle"===M?"rounded-mp-full":c[F],d[k],C??""].filter(Boolean).join(" ");return a(n.Root,{ref:S,"data-mp-size":F,"data-mp-variant":k,className:q,style:{...r(P),..._},...B,children:[u?e(n.Image,{src:u,srcSet:f,alt:Z??"",onLoadingStatusChange:z,...w,className:"size-full object-cover"}):null,a(n.Fallback,{delay:u?N:void 0,className:"flex size-full items-center justify-center",children:[Z&&U?e("span",{className:s,children:Z}):null,e("span",{"aria-hidden":!(!Z||!U)||void 0,className:"contents",children:I})]})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{MPAvatarGroupContext as l}from"../../internal/avatar-group.js";import{CONTROL_SQUARE as o,hasContent as i}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{useMPColor as m,useMPSize as c}from"../../internal/config.js";const d={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},u={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-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function f(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=/*@__PURE__*/a.forwardRef(function({src:h,srcSet:x,alt:g,name:v,initials:b,shape:j,variant:y,size:N,color:w,delay:z,imageProps:C,onLoadingStatusChange:_,className:A,style:B,children:S,...L},M){const k=a.useContext(l),F=j??k?.shape??"circle",P=y??k?.variant??"tonal",R=c(N??k?.size),Z=m(w??k?.color),I=v?function(e){const t=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===t.length?"":((Array.from(t[0])[0]??"")+(t.length>1?Array.from(t[t.length-1])[0]??"":"")).toLocaleUpperCase()}(v):"",U=g??v,q=i(S)?S:(b??I)||e(f,{}),D=i(S)||Boolean(b??I),E=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",o[R],d[R],"circle"===F?"rounded-mp-full":p[R],u[P],A??""].filter(Boolean).join(" ");return t(n.Root,{ref:M,"data-mp-size":R,"data-mp-variant":P,className:E,style:{...r(Z),...B},...L,children:[h?e(n.Image,{src:h,srcSet:x,alt:U??"",onLoadingStatusChange:_,...C,className:"size-full object-cover"}):null,t(n.Fallback,{delay:h?z:void 0,className:"flex size-full items-center justify-center",children:[U&&D?e("span",{className:s,children:U}):null,e("span",{"aria-hidden":!(!U||!D)||void 0,className:"contents",children:q})]})]})});

package/dist/components/avatar-group/MPAvatarGroup.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{MPAvatar as t}from"../avatar/MPAvatar.js";import{MPAvatarGroupContext as i}from"../../internal/avatar-group.js";const o={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPAvatarGroup=/*@__PURE__*/e.forwardRef(function({max:l,total:m,overlap:n,size:s="md",shape:c="circle",variant:p="tonal",color:v="primary",className:d,style:f,children:h,...u},x){const g=e.useMemo(()=>({size:s,shape:c,variant:p,color:v}),[s,c,p,v]),j=e.Children.toArray(h),y=void 0===l?j:j.slice(0,Math.max(0,l)),M=m??j.length,z=Math.max(0,M-y.length);return r(i.Provider,{value:g,children:a("div",{ref:x,"data-mp-size":s,className:["mp-avatar-group isolate inline-flex items-center align-middle","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--_mp-avatar-overlap)*-1)]","ring-mp-surface [&>*]:ring-2",d??""].filter(Boolean).join(" "),style:{"--_mp-avatar-overlap":void 0===n?o[s]:"number"==typeof n?`${n}px`:n,...f},...u,children:[y,z>0?r(t,{initials:`+${z}`}):null]})})});
+import{jsx as r,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{MPAvatar as t}from"../avatar/MPAvatar.js";import{MPAvatarGroupContext as i}from"../../internal/avatar-group.js";import{useMPColor as o,useMPSize as l}from"../../internal/config.js";const n={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPAvatarGroup=/*@__PURE__*/e.forwardRef(function({max:s,total:m,overlap:c,size:p,shape:v="circle",variant:f="tonal",color:d,className:h,style:u,children:x,...g},j){const M=l(p),y=o(d),z=e.useMemo(()=>({size:M,shape:v,variant:f,color:y}),[M,v,f,y]),A=e.Children.toArray(x),P=void 0===s?A:A.slice(0,Math.max(0,s)),N=m??A.length,$=Math.max(0,N-P.length);return r(i.Provider,{value:z,children:a("div",{ref:j,"data-mp-size":M,className:["mp-avatar-group isolate inline-flex items-center align-middle","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--_mp-avatar-overlap)*-1)]","ring-mp-surface [&>*]:ring-2",h??""].filter(Boolean).join(" "),style:{"--_mp-avatar-overlap":void 0===c?n[M]:"number"==typeof c?`${c}px`:c,...u},...g,children:[P,$>0?r(t,{initials:`+${$}`}):null]})})});

package/dist/components/badge/MPBadge.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as a from"react";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as s}from"../../internal/scale.js";import{VISUALLY_HIDDEN as i}from"../../internal/visually-hidden.js";const l={xs:"h-3 min-w-3",sm:"h-3.5 min-w-3.5",md:"h-4 min-w-4",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},o={xs:"size-1",sm:"size-1.5",md:"size-1.5",lg:"size-2",xl:"size-2.5"},r={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-small",lg:"text-mp-label-medium",xl:"text-mp-label-medium"},d={xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},p={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},c={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},b={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},x={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-accent)",outlined:"border-mp-outline border bg-mp-surface-container text-(--_mp-accent)",text:"text-(--_mp-accent) bg-transparent"};export const MPBadge=/*@__PURE__*/a.forwardRef(function({variant:a="filled",size:u="md",color:g="error",content:f,max:h=99,dot:v=!1,showZero:w=!1,invisible:j=!1,placement:y="top-end",overlap:z="square",label:_,className:N,style:k,children:B,...$},q){const F=s(B),M=!s(f)||0===f&&!w,P=v||M,R=j||M&&!v,Z=["mp-badge pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","rounded-mp-full tabular-nums whitespace-nowrap",x[a],P?o[u]:[l[u],r[u],d[u]].join(" "),F?`absolute ${c[y]}`:"relative align-middle",F?P?p[u].dot:p[u].badge:"",F&&"circle"===z?b[y]:"","transition-[opacity,scale,visibility] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",R?"invisible scale-0 opacity-0":"",N??""].filter(Boolean).join(" "),A=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(f,h),C=e("span",{ref:q,"data-mp-size":u,"data-mp-variant":a,className:Z,style:{...n(g),...k},"aria-hidden":!!R||void 0,...$,children:M&&!v?null:m(t,{children:[P||_?e("span",{className:i,children:_??A}):null,P?null:e("span",{"aria-hidden":!!_||void 0,children:A})]})});return F?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[B,C]}):C});
+import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as n from"react";import{accentSlots as a}from"../../internal/accent.js";import{hasContent as s}from"../../internal/scale.js";import{VISUALLY_HIDDEN as i}from"../../internal/visually-hidden.js";import{useMPSize as l}from"../../internal/config.js";const o={xs:"h-3 min-w-3",sm:"h-3.5 min-w-3.5",md:"h-4 min-w-4",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},r={xs:"size-1",sm:"size-1.5",md:"size-1.5",lg:"size-2",xl:"size-2.5"},d={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-small",lg:"text-mp-label-medium",xl:"text-mp-label-medium"},p={xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},c={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},b={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},x={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},u={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-accent)",outlined:"border-mp-outline border bg-mp-surface-container text-(--_mp-accent)",text:"text-(--_mp-accent) bg-transparent"};export const MPBadge=/*@__PURE__*/n.forwardRef(function({variant:n="filled",size:f,color:g="error",content:h,max:v=99,dot:w=!1,showZero:j=!1,invisible:y=!1,placement:z="top-end",overlap:_="square",label:N,className:k,style:B,children:$,...q},F){const M=l(f),P=s($),R=!s(h)||0===h&&!j,Z=w||R,A=y||R&&!w,C=["mp-badge pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","rounded-mp-full tabular-nums whitespace-nowrap",u[n],Z?r[M]:[o[M],d[M],p[M]].join(" "),P?`absolute ${b[z]}`:"relative align-middle",P?Z?c[M].dot:c[M].badge:"",P&&"circle"===_?x[z]:"","transition-[opacity,scale,visibility] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",A?"invisible scale-0 opacity-0":"",k??""].filter(Boolean).join(" "),D=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(h,v),E=e("span",{ref:F,"data-mp-size":M,"data-mp-variant":n,className:C,style:{...a(g),...B},"aria-hidden":!!A||void 0,...q,children:R&&!w?null:m(t,{children:[Z||N?e("span",{className:i,children:N??D}):null,Z?null:e("span",{"aria-hidden":!!N||void 0,children:D})]})});return P?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[$,E]}):E});

package/dist/components/blockquote/MPBlockquote.js

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

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

@@ -96,6 +96,23 @@ export interface MPBottomNavigationItemProps extends Omit<React.ComponentPropsWi
      * a `<button>` that calls `router.push` can do. `onValueChange` still fires.
      */
     href?: string;
+    /** Where that link opens. `rel` follows on its own for `_blank` — see `rel`. */
+    target?: string;
+    /**
+     * Overrides the `rel` a `_blank` destination would otherwise get, which is
+     * `noopener noreferrer`. Writing one **replaces** it rather than adding to it.
+     */
+    rel?: string;
+    /**
+     * Renders the destination as something else — a router's `Link`, so tapping it
+     * is a client-side navigation rather than a full page load. `href`, `target`
+     * and everything the bar decides still go through, so `render={<NextLink />}`
+     * needs the URL written once, here.
+     *
+     * With no `href` this replaces the `<button>` instead, which is the same
+     * element in the same place — the bar's own `onValueChange` fires either way.
+     */
+    render?: useRender.RenderProp;
     /** Unavailable, but still part of the set. */
     disabled?: boolean;
     /** The destination's name. Read out even when `labels` keeps it undrawn. */

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

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

package/dist/components/breadcrumb/MPBreadcrumb.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon.js";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{BREADCRUMB as d}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as p,PROSE_TEXT as h}from"../../internal/scale.js";const f=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),x={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},b={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const v=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t="md",color:u="primary",separator:p="chevron",maxItems:b,itemsBeforeCollapse:g=1,itemsAfterCollapse:N=1,expandable:j=!0,label:y,expandLabel:k,locale:z,structuredData:B=!1,className:C,style:w,children:P,...M},I){const L=m(d,c(z)),[S,_]=r.useState(!1),A=r.Children.toArray(P).filter(r.isValidElement),E=A.length,F=A.some(e=>!0===e.props.current),R=!S&&!B&&void 0!==b&&E>Math.max(b,1)&&E-g-N>1?[...A.slice(0,Math.max(0,g)),null,...A.slice(E-Math.max(0,N))]:A,T="string"==typeof(D=p)&&v.includes(D)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(p):p;var D;const V=r.useMemo(()=>Array.from({length:R.length},(e,n)=>({size:t,last:!F&&n===R.length-1,position:B?n+1:null})),[t,F,R.length,B]),$=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",j?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:I,"aria-label":y??L.label,"data-mp-size":t,className:["mp-breadcrumb flex",h[t],C??""].filter(Boolean).join(" "),style:{...l(u),...w},...M,children:e("ol",{role:"list",itemScope:B||void 0,itemType:B?"https://schema.org/BreadcrumbList":void 0,className:`flex list-none flex-wrap items-center p-0 ${x[t]}`,children:R.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:T}):null,t?e(f.Provider,{value:V[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:j?e("button",{type:"button",className:$,"aria-label":k??L.expand,onClick:()=>_(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:$,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:c=!1,className:m,children:d,...h},x){const{size:v,last:g,position:N}=r.useContext(f),j=l??g,y=Boolean(o||i)&&!j&&!c,k=null!==N,z=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[v],b[v],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",c?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),B=n(t,{children:[p(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:k?"name":void 0,children:d}),p(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:x,itemProp:k?"itemListElement":void 0,itemScope:k||void 0,itemType:k?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",m??""].filter(Boolean).join(" "),...h,children:[k?e("meta",{itemProp:"position",content:String(N)}):null,y&&o?e("a",{href:o,itemProp:k?"item":void 0,className:z,onClick:i,children:B}):y?e("button",{type:"button",className:z,onClick:i,children:B}):e("span",{className:z,"aria-current":j?"page":void 0,"aria-disabled":c||void 0,children:B})]})});
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon.js";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{BREADCRUMB as d}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as p,PROSE_TEXT as f}from"../../internal/scale.js";import{useMPColor as h,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),v={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},g={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const N=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t,color:u,separator:p="chevron",maxItems:g,itemsBeforeCollapse:j=1,itemsAfterCollapse:y=1,expandable:k=!0,label:z,expandLabel:B,locale:C,structuredData:w=!1,className:P,style:M,children:I,...L},S){const _=x(t),A=h(u),E=m(d,c(C)),[F,R]=r.useState(!1),T=r.Children.toArray(I).filter(r.isValidElement),D=T.length,V=T.some(e=>!0===e.props.current),$=!F&&!w&&void 0!==g&&D>Math.max(g,1)&&D-j-y>1?[...T.slice(0,Math.max(0,j)),null,...T.slice(D-Math.max(0,y))]:T,q="string"==typeof(G=p)&&N.includes(G)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(p):p;var G;const H=r.useMemo(()=>Array.from({length:$.length},(e,n)=>({size:_,last:!V&&n===$.length-1,position:w?n+1:null})),[_,V,$.length,w]),J=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",k?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:S,"aria-label":z??E.label,"data-mp-size":_,className:["mp-breadcrumb flex",f[_],P??""].filter(Boolean).join(" "),style:{...l(A),...M},...L,children:e("ol",{role:"list",itemScope:w||void 0,itemType:w?"https://schema.org/BreadcrumbList":void 0,className:`flex list-none flex-wrap items-center p-0 ${v[_]}`,children:$.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:q}):null,t?e(b.Provider,{value:H[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:k?e("button",{type:"button",className:J,"aria-label":B??E.expand,onClick:()=>R(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:J,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:c=!1,className:m,children:d,...f},h){const{size:x,last:v,position:N}=r.useContext(b),j=l??v,y=Boolean(o||i)&&!j&&!c,k=null!==N,z=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[x],g[x],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",c?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),B=n(t,{children:[p(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:k?"name":void 0,children:d}),p(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:h,itemProp:k?"itemListElement":void 0,itemScope:k||void 0,itemType:k?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",m??""].filter(Boolean).join(" "),...f,children:[k?e("meta",{itemProp:"position",content:String(N)}):null,y&&o?e("a",{href:o,itemProp:k?"item":void 0,className:z,onClick:i,children:B}):y?e("button",{type:"button",className:z,onClick:i,children:B}):e("span",{className:z,"aria-current":j?"page":void 0,"aria-disabled":c||void 0,children:B})]})});

package/dist/components/button/MPButton.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type ButtonProps as BaseUIButtonProps } from '@base-ui/react/button';
 import type { MPColor, MPStyleProps, MPVariant } from '../../types.js';
 export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
     /**
@@ -44,6 +45,43 @@ export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWi
      * @default 'button'
      */
     type?: 'button' | 'submit' | 'reset';
+    /**
+     * Renders something other than a `<button>` while keeping every part of the
+     * surface. Base UI's own escape hatch, so it behaves here exactly as it does
+     * on every Base UI primitive.
+     *
+     * **A link wearing a button is the reason this exists**, and it is three props
+     * rather than one:
+     *
+     * ```tsx
+     * <MPButton render={<a href="/pricing" />} nativeButton={false} role="link">
+     *   Pricing
+     * </MPButton>
+     * ```
+     *
+     * `nativeButton={false}` tells Base UI the element is not a `<button>`, and
+     * `role` puts back the one thing it then assumes — see `nativeButton`. Without
+     * the `role` the anchor is announced as a button, which is exactly the lie the
+     * "no `href`" rule below exists to prevent.
+     */
+    render?: BaseUIButtonProps['render'];
+    /**
+     * Whether `render` produces a real `<button>`.
+     *
+     * Only meaningful alongside `render`, and then it is not optional: an `<a>` has
+     * no `disabled`, is not in a form's submit chain, and is activated by Enter but
+     * not by Space, so Base UI has to be told which set of behaviours to supply. It
+     * says so in the console when the two disagree, in either direction.
+     *
+     * What it also does is assume the element is *acting* as a button, and give it
+     * `role="button"` and a tab stop to say so. For an anchor that is one assumption
+     * too many — a link announced as a button is a link a reader will not expect to
+     * open in a new tab — so pass `role="link"` alongside it. Anything else that is
+     * genuinely a button (a `<div>`, a `<span>`) wants the role Base UI supplies and
+     * should leave it alone.
+     * @default true
+     */
+    nativeButton?: boolean;
     children?: React.ReactNode;
 }
 /**
@@ -64,9 +102,17 @@ export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWi
  *
  * **No `href`.** A button that navigates is a link, and the difference is not
  * cosmetic: a link is announced as one, opens in a new tab on the middle button,
- * and shows its destination in the status bar. Wrap an `<a>` in the styling, or
- * pass `render={<a href="…" />}` — Base UI's own escape hatch — rather than
- * teaching the button to lie about what it is.
+ * and shows its destination in the status bar. So a link that looks like a button
+ * is written as a link:
+ *
+ * ```tsx
+ * <MPButton render={<a href="/pricing" />} nativeButton={false} role="link">
+ *   Pricing
+ * </MPButton>
+ * ```
+ *
+ * All three parts matter, and `render`'s own note says why. Teaching the button
+ * to take an `href` instead would be teaching it to lie about what it is.
  *
  * **No ripple.** MD3 dropped it: the state layer below is what replaced it, and
  * it says the same thing without an animation that has to finish before the

package/dist/components/button/MPButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{Button as n}from"@base-ui/react/button";import{MPIcon as r}from"../icon/MPIcon.js";import{SpinnerIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{MPButtonGroupContext as s}from"../../internal/button-group.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_HEIGHT as u,CONTROL_ICON as f,CONTROL_PAD_X as b,CONTROL_SQUARE as g,CONTROL_TEXT as x,hasContent as v}from"../../internal/scale.js";const h={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 hover:shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},j={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPButton=/*@__PURE__*/t.forwardRef(function({variant:w,size:y,color:_,disabled:k,startIcon:z,endIcon:B,loading:C=!1,loadingLabel:I,locale:N,fullWidth:P=!1,type:L="button",className:M,style:D,children:R,onClick:S,...W},$){const q=l(N),A=c(m,q),E=t.useContext(s),F=w??E?.variant??"filled",G=y??E?.size??"md",H=_??E?.color??"primary",J=k??E?.disabled??!1,K=C||v(z),O=!(v(R)||K&&v(B));return o(n,{ref:$,type:L,disabled:J,"aria-busy":C||void 0,"aria-disabled":C||void 0,"data-mp-size":G,"data-mp-variant":F,"data-loading":C||void 0,className:["mp-button group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",u[G],x[G],d[G],O?`${g[G]} px-0`:b[G],J?j[F]:h[F],J?"cursor-default":"",C?"cursor-progress":"",P?"w-full":"",M??""].filter(Boolean).join(" "),style:{...i(H),...D},onClick:e=>{if(C)return e.preventDefault(),void e.stopPropagation();S?.(e)},...W,children:[J?null:e(p,{}),C?e(r,{icon:a,size:f[G],label:I??A.loading,className:"animate-spin"}):z,R,B]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"@base-ui/react/button";import{MPIcon as r}from"../icon/MPIcon.js";import{SpinnerIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{MPButtonGroupContext as s}from"../../internal/button-group.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_HEIGHT as u,CONTROL_ICON as f,CONTROL_PAD_X as b,CONTROL_SQUARE as g,CONTROL_TEXT as x,hasContent as v}from"../../internal/scale.js";import{useMPColor as j,useMPSize as h}from"../../internal/config.js";const w={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 hover:shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},y={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPButton=/*@__PURE__*/o.forwardRef(function({variant:_,size:B,color:k,disabled:z,startIcon:C,endIcon:I,loading:N=!1,loadingLabel:P,locale:L,fullWidth:M=!1,type:D="button",render:R,nativeButton:S=!0,className:W,style:$,children:q,onClick:A,...E},F){const G=l(L),H=c(m,G),J=o.useContext(s),K=_??J?.variant??"filled",O=h(B??J?.size),Q=j(k??J?.color),T=z??J?.disabled??!1,U=N||v(C),V=!(v(q)||U&&v(I));return t(n,{ref:F,render:R,nativeButton:S,type:S?D:void 0,disabled:T,"aria-busy":N||void 0,"aria-disabled":N||void 0,"data-mp-size":O,"data-mp-variant":K,"data-loading":N||void 0,className:["mp-button group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",u[O],x[O],d[O],V?`${g[O]} px-0`:b[O],T?y[K]:w[K],T?"cursor-default":"",N?"cursor-progress":"",M?"w-full":"",W??""].filter(Boolean).join(" "),style:{...i(Q),...$},onClick:e=>{if(N)return e.preventDefault(),void e.stopPropagation();A?.(e)},...E,children:[T?null:e(p,{}),N?e(r,{icon:a,size:f[O],label:P??H.loading,className:"animate-spin"}):C,q,I]})});

package/dist/components/calendar/MPCalendar.d.ts

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { type MPDatePrecision } from '../../internal/date.js';
+import type { MPPickerLabels } from '../../internal/Calendar.js';
+import type { MPColor, MPSize, MPVariant, MPWeekday } from '../../types.js';
+export type { MPDatePrecision };
+export interface MPCalendarProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect' | 'defaultValue' | 'color'> {
+    /** The chosen day. Use with `onValueChange` for a controlled calendar. */
+    value?: Date | null;
+    /** The day the calendar starts on, for an uncontrolled one. */
+    defaultValue?: Date | null;
+    /**
+     * Called with the newly chosen day — a `Date`, not an event.
+     *
+     * Never `null`, unlike `MPDatePicker`'s: there is no × on a calendar and
+     * pressing the chosen day again does not unchoose it. A control that emptied
+     * itself on a second press would lose a value to a double-click.
+     */
+    onValueChange?: (value: Date) => void;
+    /**
+     * The month on screen. Use with `onMonthChange` to drive the header yourself —
+     * two calendars kept a month apart, a "jump to December" button of your own.
+     */
+    month?: Date;
+    /**
+     * Which month it opens on.
+     * @default the month of `value`, or this month
+     */
+    defaultMonth?: Date;
+    /** Called when the header steps, or when choosing a month or a year moves it. */
+    onMonthChange?: (month: Date) => void;
+    /**
+     * Which unit the calendar stops at, and therefore what a press answers with.
+     *
+     * `'month'` never draws a day grid and answers with the 1st of the month
+     * pressed; `'year'` stops at the grid of years and answers with 1 January. The
+     * finer views are absent rather than refused — there is no way through a month
+     * calendar to a day.
+     * @default 'day'
+     */
+    precision?: MPDatePrecision;
+    /** The earliest day that may be chosen. Day-granular — the time is ignored. */
+    minDate?: Date | null;
+    /** The latest day that may be chosen. */
+    maxDate?: Date | null;
+    /**
+     * Blocks individual days that are inside the range but still not available —
+     * weekends, holidays, a room already booked. A blocked day is still drawn.
+     *
+     * Asked about days and only about days, so a calendar whose `precision` is a
+     * month or a year never consults it.
+     */
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * A BCP 47 tag deciding the month and weekday names, the order of the header's
+     * two buttons, and which day the week starts on. Falls back to the nearest
+     * `MPLocaleProvider`, then to the platform's own.
+     */
+    locale?: string;
+    /** Which day the week starts on. Defaults to whatever the locale says. */
+    weekStartsOn?: MPWeekday;
+    /**
+     * Draws the leading and trailing days belonging to the neighbouring months.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Whether the header offers its two steppers.
+     * @default true
+     */
+    showPreviousButton?: boolean;
+    /** @default true */
+    showNextButton?: boolean;
+    /**
+     * Takes the focus on mount.
+     *
+     * `false` here and `true` inside a picker, which is the whole difference
+     * between the two: a popup that has just opened is the reader's current
+     * business, and a calendar sitting in a page is not. One that grabbed the
+     * focus on mount would move the caret out of whatever was being typed above
+     * it.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * How much surface the calendar paints under itself.
+     *
+     * `'text'` — nothing — is the default, and it is the one that makes the
+     * component droppable. A standalone calendar almost always lands somewhere
+     * that is already a surface: an `MPCard`, a panel, a popover of your own. A
+     * default that painted a second one would be a box inside a box in the common
+     * case, and the only way out of a painted surface is an override.
+     * @default 'text'
+     */
+    variant?: MPVariant;
+    /**
+     * The cell size and the type scale. The same ladder every control is on, so a
+     * calendar beside a `size="sm"` form is drawn at the same weight.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** Which accent family the chosen day is painted in. @default 'primary' */
+    color?: MPColor;
+    /**
+     * Overrides for the words the calendar says on its own behalf — "Previous
+     * month", "Choose a year". Whatever is not given falls back to the translation
+     * for `locale`, and then to English.
+     */
+    labels?: Partial<MPPickerLabels>;
+    /**
+     * Identifies the value when a form is submitted, as `YYYY-MM-DD` — or as
+     * `YYYY-MM` or `YYYY` when `precision` asks for less.
+     */
+    name?: string;
+}
+/**
+ * A month on the page, rather than in a popup.
+ *
+ * The same grid `MPDatePicker` opens, and it was always the larger half of that
+ * component: three views on one footprint, a roving tab stop, arrow keys that
+ * step the month when they run off an edge, and a header where the month name
+ * and the year are each a button into a grid of their own. What it did not have
+ * was a way to be used without a trigger in front of it.
+ *
+ * Which is a real shape. A booking page shows the month it is talking about
+ * rather than asking the reader to open something to see it; a dashboard puts
+ * the calendar beside the list it filters; a form with room for it has no reason
+ * to hide it behind a field. In every one of those the popup is the part that is
+ * in the way.
+ *
+ * ```tsx
+ * const [day, setDay] = useState(new Date());
+ *
+ * <MPCalendar value={day} onValueChange={setDay} />;
+ * ```
+ *
+ * ## It paints nothing by default
+ *
+ * `variant` is `'text'`, so what arrives is the grid and the header and no
+ * surface under them — see the prop for why. Give it `'outlined'` or
+ * `'elevated'` to have it stand on its own.
+ *
+ * ## The month on screen is its own state
+ *
+ * And it stays where the reader left it. `MPDatePicker` puts the calendar back
+ * on the chosen day every time the popup opens, because opening is an event that
+ * says "start again"; a calendar that is always on screen has no such moment,
+ * and one that snapped back to July while somebody was reading September would
+ * be undoing a navigation they meant.
+ *
+ * `month` and `onMonthChange` are there for the cases that do want to drive it.
+ *
+ * ## What it is not
+ *
+ * Not a range calendar — two ends is `MPDateRangePicker`'s question, and the
+ * band it draws between them needs a preview of the half-chosen range that a
+ * single value has no room for. Not an event calendar either: there is no
+ * per-cell rendering hook, because a cell that could hold arbitrary content
+ * stops being a 40dp target and starts being a layout.
+ */
+export declare const MPCalendar: React.ForwardRefExoticComponent<MPCalendarProps & React.RefAttributes<HTMLDivElement>>;