material-plus-ui 1.3.0 → 1.4.0

package/dist/components/avatar-group/MPAvatarGroup.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type MPAvatarShape } from '../avatar/MPAvatar.js';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
+export interface MPAvatarGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * How many avatars are drawn before the rest become a count. Left out, every
+     * one of them is drawn.
+     */
+    max?: number;
+    /**
+     * How many there are altogether, when the group was handed only the first few.
+     *
+     * Without it the count is worked out from the children, which is right only
+     * when all of them were passed — and a list of forty faces that ships four
+     * `<img>`s and a number is exactly why this prop exists.
+     */
+    total?: number;
+    /**
+     * How far each avatar sits under the one before it — a number in pixels, or
+     * any CSS length. Left out it is a fraction of `size`, which keeps the overlap
+     * looking the same at every rung.
+     */
+    overlap?: number | string;
+    /**
+     * Passed to every avatar in the group.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Passed to every avatar in the group.
+     * @default 'circle'
+     */
+    shape?: MPAvatarShape;
+    /**
+     * Passed to every avatar in the group.
+     * @default 'tonal'
+     */
+    variant?: MPVariant;
+    /**
+     * Passed to every avatar in the group.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** The avatars. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of avatars, overlapping, with the ones that did not fit as a count.
+ *
+ * `size`, `shape`, `variant` and `color` are set once here rather than on every
+ * avatar — a stack whose fourth face is a rung out is not a stack — and an
+ * avatar's own prop still wins, which is what lets one of them be marked out
+ * from the rest.
+ *
+ * ## The ring is not decoration
+ *
+ * Two circles of similar tone laid over each other have no edge between them at
+ * all, and the stack reads as one smeared shape. The ring is drawn in the page's
+ * own `surface`, so it is the background showing through rather than a colour of
+ * its own — which is what puts the near avatar in front instead of putting a
+ * white line on it.
+ *
+ * `isolate` on the group is the other half: it makes the first avatar's ring
+ * paint against the page rather than against whatever the group happens to be
+ * stacked over.
+ *
+ * ## The first avatar is on top
+ *
+ * The order is the DOM order, and each avatar is drawn under the one before it.
+ * A stack read from the start is therefore read front to back, so the person the
+ * group is *about* comes first rather than last — and under RTL the whole thing
+ * flips on its own, because the overlap is a logical margin.
+ */
+export declare const MPAvatarGroup: React.ForwardRefExoticComponent<MPAvatarGroupProps & React.RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/avatar-group/index.d.ts

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

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

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

package/dist/components/badge/MPBadge.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPCorner, MPSize, MPVariant } from '../../types';
+import type { MPColor, MPCorner, MPSize, MPVariant } from '../../types.js';
 export interface MPBadgeProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'content'> {
     /**
      * What the badge says — usually a count, sometimes a word.

package/dist/components/badge/MPBadge.js

@@ -1 +1,2 @@
-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";import{hasContent as s}from"../../internal/scale";import{VISUALLY_HIDDEN as i}from"../../internal/visually-hidden";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:y=!1,placement:z="top-end",overlap:_="square",label:j,className:N,style:k,children:B,...$},q){const F=s(B),M=!s(f)||0===f&&!w,P=v||M,R=y||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[z]}`:"relative align-middle",F?P?p[u].dot:p[u].badge:"",F&&"circle"===_?b[z]:"","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||j?e("span",{className:i,children:j??A}):null,P?null:e("span",{"aria-hidden":!!j||void 0,children:A})]})});return F?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[B,C]}):C});
+"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});

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

@@ -1,2 +1,2 @@
-export { MPBadge } from './MPBadge';
-export type { MPBadgeProps } from './MPBadge';
+export { MPBadge } from './MPBadge.js';
+export type { MPBadgeProps } from './MPBadge.js';

package/dist/components/badge/index.js

@@ -1 +1 @@
-export{MPBadge}from"./MPBadge";
+export{MPBadge}from"./MPBadge.js";

package/dist/components/blockquote/MPBlockquote.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
 /**
  * The props are a `<figure>`'s rather than a `<blockquote>`'s, which is a
  * consequence of where the drawing happens: everything a caller passes lands on

package/dist/components/blockquote/MPBlockquote.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{accentSlots as r}from"../../internal/accent";import{hasContent as n,META_TEXT as i,SHEET_PAD as l}from"../../internal/scale";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})});
+"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})});

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

@@ -1,2 +1,2 @@
-export { MPBlockquote } from './MPBlockquote';
-export type { MPBlockquoteProps } from './MPBlockquote';
+export { MPBlockquote } from './MPBlockquote.js';
+export type { MPBlockquoteProps } from './MPBlockquote.js';

package/dist/components/blockquote/index.js

@@ -1 +1 @@
-export{MPBlockquote}from"./MPBlockquote";
+export{MPBlockquote}from"./MPBlockquote.js";

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPPosition, MPSize } from '../../types';
+import type { MPPosition, MPSize } from '../../types.js';
 /** A destination's value. The same restraint `MPTabs` puts on a tab's. */
 export type MPBottomNavigationValue = string | number;
 /**

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

@@ -1 +1,2 @@
-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";import{hasContent as i}from"../../internal/scale";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden";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:i="fixed",labels:s="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),N=void 0!==t,j=N?t:y,k=l.useCallback(e=>{N||z(e),o?.(e)},[N,o]),C=l.useMemo(()=>({value:j??null,change:k,size:d,labels:s,disabled:p}),[j,k,d,s,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[i],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),N=x||z.disabled,j=null!==z.value&&z.value===n,k="all"===z.labels||"selected"===z.labels&&j,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",N?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",h??""].filter(Boolean).join(" "),B=t(a,{children:[i(m)||i(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,j&&!N?"text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[N?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",j?`${d[z.size].open} opacity-100`:`${d[z.size].shut} opacity-0`].join(" ")}),N?null:e(o,{}),e("span",{className:"relative flex items-center justify-center",style:{width:u[z.size],height:u[z.size]},children:j?f??m:m})]}):null,i(v)?e("span",{className:k?`max-w-full truncate ${c[z.size]}`:s,children:v}):null]}),$=e=>{N?e.preventDefault():(z.change(n),g?.(e))};return b?e("a",{ref:y,href:N?void 0:b,"aria-current":j?"page":void 0,"aria-disabled":N||void 0,className:C,onClick:$,...w,children:B}):e("button",{ref:y,type:"button",disabled:N,"aria-current":j?"page":void 0,className:C,onClick:$,...w,children:B})});
+"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})});

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

@@ -1,2 +1,2 @@
-export { MPBottomNavigation, MPBottomNavigationItem } from './MPBottomNavigation';
-export type { MPBottomNavigationItemProps, MPBottomNavigationLabels, MPBottomNavigationProps, MPBottomNavigationValue } from './MPBottomNavigation';
+export { MPBottomNavigation, MPBottomNavigationItem } from './MPBottomNavigation.js';
+export type { MPBottomNavigationItemProps, MPBottomNavigationLabels, MPBottomNavigationProps, MPBottomNavigationValue } from './MPBottomNavigation.js';

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

@@ -1 +1 @@
-export{MPBottomNavigation,MPBottomNavigationItem}from"./MPBottomNavigation";
+export{MPBottomNavigation,MPBottomNavigationItem}from"./MPBottomNavigation.js";

package/dist/components/box/MPBox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPSize, MPVariant } from '../../types';
+import type { MPSize, MPVariant } from '../../types.js';
 export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How much surface the sheet paints.

package/dist/components/box/MPBox.js

@@ -1 +1 @@
-import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{SHEET_PAD as a}from"../../internal/scale";import{CONTAINER_SURFACE as o}from"../../internal/surface";export const MPBox=/*@__PURE__*/r.forwardRef(function({variant:r="outlined",size:n="md",padded:t=!0,render:d,className:i,children:m,...s},p){return e({render:d,ref:p,props:{"data-mp-size":n,"data-mp-variant":r,className:["mp-box rounded-mp-md block","box-border",t?a[n]:"",o[r],"text-mp-on-surface",i??""].filter(Boolean).join(" "),children:m,...s}})});
+import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{SHEET_PAD as a}from"../../internal/scale.js";import{CONTAINER_SURFACE as o}from"../../internal/surface.js";export const MPBox=/*@__PURE__*/r.forwardRef(function({variant:r="outlined",size:n="md",padded:t=!0,render:d,className:i,children:m,...s},p){return e({render:d,ref:p,props:{"data-mp-size":n,"data-mp-variant":r,className:["mp-box rounded-mp-md block","box-border",t?a[n]:"",o[r],"text-mp-on-surface",i??""].filter(Boolean).join(" "),children:m,...s}})});

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

@@ -1,2 +1,2 @@
-export { MPBox } from './MPBox';
-export type { MPBoxProps } from './MPBox';
+export { MPBox } from './MPBox.js';
+export type { MPBoxProps } from './MPBox.js';

package/dist/components/box/index.js

@@ -1 +1 @@
-export{MPBox}from"./MPBox";
+export{MPBox}from"./MPBox.js";

package/dist/components/breadcrumb/MPBreadcrumb.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize } from '../../types';
+import type { MPColor, MPSize } from '../../types.js';
 /**
  * What is drawn between two steps of the trail.
  *
@@ -45,15 +45,21 @@ export interface MPBreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'
      */
     expandable?: boolean;
     /**
-     * The name the trail is announced by.
-     * @default 'Breadcrumb'
+     * The name the trail is announced by. Defaults to the word for it in `locale`.
      */
     label?: string;
     /**
-     * What the `…` is announced as.
-     * @default 'Show hidden steps'
+     * What the `…` is announced as. Defaults to the wording in `locale`.
      */
     expandLabel?: string;
+    /**
+     * Which language those two are written in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     *
+     * Neither is ever drawn — the steps are the caller's own words — so without it
+     * a Korean page announces its trail in English.
+     */
+    locale?: string;
     /**
      * Publishes the trail as schema.org `BreadcrumbList` microdata, which is what
      * a search engine reads to draw the trail under a result instead of the bare

package/dist/components/breadcrumb/MPBreadcrumb.js

@@ -1 +1,2 @@
-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";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{CONTROL_GAP as c,hasContent as m,PROSE_TEXT as d}from"../../internal/scale";const u=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},h={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const f=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t="md",color:c="primary",separator:m="chevron",maxItems:h,itemsBeforeCollapse:x=1,itemsAfterCollapse:b=1,expandable:v=!0,label:g="Breadcrumb",expandLabel:N="Show hidden steps",structuredData:y=!1,className:k,style:B,children:j,...w},z){const[C,P]=r.useState(!1),M=r.Children.toArray(j).filter(r.isValidElement),I=M.length,S=M.some(e=>!0===e.props.current),L=!C&&!y&&void 0!==h&&I>Math.max(h,1)&&I-x-b>1?[...M.slice(0,Math.max(0,x)),null,...M.slice(I-Math.max(0,b))]:M,_="string"==typeof(A=m)&&f.includes(A)?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}}(m):m;var A;const E=r.useMemo(()=>Array.from({length:L.length},(e,n)=>({size:t,last:!S&&n===L.length-1,position:y?n+1:null})),[t,S,L.length,y]),F=["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)",v?["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:z,"aria-label":g,"data-mp-size":t,className:["mp-breadcrumb flex",d[t],k??""].filter(Boolean).join(" "),style:{...l(c),...B},...w,children:e("ol",{role:"list",itemScope:y||void 0,itemType:y?"https://schema.org/BreadcrumbList":void 0,className:`flex list-none flex-wrap items-center p-0 ${p[t]}`,children:L.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:_}):null,t?e(u.Provider,{value:E[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:v?e("button",{type:"button",className:F,"aria-label":N,onClick:()=>P(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:F,"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:d=!1,className:p,children:f,...x},b){const{size:v,last:g,position:N}=r.useContext(u),y=l??g,k=Boolean(o||i)&&!y&&!d,B=null!==N,j=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",c[v],h[v],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",d?"text-mp-on-surface/38 cursor-default":y?"text-mp-on-surface font-medium":k?["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(" "),w=n(t,{children:[m(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:B?"name":void 0,children:f}),m(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:b,itemProp:B?"itemListElement":void 0,itemScope:B||void 0,itemType:B?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",p??""].filter(Boolean).join(" "),...x,children:[B?e("meta",{itemProp:"position",content:String(N)}):null,k&&o?e("a",{href:o,itemProp:B?"item":void 0,className:j,onClick:i,children:w}):k?e("button",{type:"button",className:j,onClick:i,children:w}):e("span",{className:j,"aria-current":y?"page":void 0,"aria-disabled":d||void 0,children:w})]})});
+"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})]})});

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

@@ -1,2 +1,2 @@
-export { MPBreadcrumb, MPBreadcrumbItem } from './MPBreadcrumb';
-export type { MPBreadcrumbItemProps, MPBreadcrumbProps, MPBreadcrumbSeparator } from './MPBreadcrumb';
+export { MPBreadcrumb, MPBreadcrumbItem } from './MPBreadcrumb.js';
+export type { MPBreadcrumbItemProps, MPBreadcrumbProps, MPBreadcrumbSeparator } from './MPBreadcrumb.js';

package/dist/components/breadcrumb/index.js

@@ -1 +1 @@
-export{MPBreadcrumb,MPBreadcrumbItem}from"./MPBreadcrumb";
+export{MPBreadcrumb,MPBreadcrumbItem}from"./MPBreadcrumb.js";

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPStyleProps, MPVariant } from '../../types';
+import type { MPColor, MPStyleProps, MPVariant } from '../../types.js';
 export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
     /**
      * How much surface the button paints.

package/dist/components/button/MPButton.js

@@ -1 +1,2 @@
-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";import{SpinnerIcon as a}from"../../constants/icons";import{accentSlots as i}from"../../internal/accent";import{MPButtonGroupContext as s}from"../../internal/button-group";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale";import{MPStateLayer as m}from"../../internal/StateLayer";import{CONTROL_GAP as p,CONTROL_HEIGHT as d,CONTROL_ICON as u,CONTROL_PAD_X as f,CONTROL_SQUARE as b,CONTROL_TEXT as x,hasContent as g}from"../../internal/scale";const v={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)"},h={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:j,startIcon:k,endIcon:z,loading:B=!1,loadingLabel:C,locale:I,fullWidth:N=!1,type:P="button",className:L,style:M,children:D,onClick:R,...S},W){const $=l(I),q=c("common",$),A=t.useContext(s),E=w??A?.variant??"filled",F=y??A?.size??"md",G=_??A?.color??"primary",H=j??A?.disabled??!1,J=!g(D);return o(n,{ref:W,type:P,disabled:H,"aria-busy":B||void 0,"aria-disabled":B||void 0,"data-mp-size":F,"data-mp-variant":E,"data-loading":B||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)",d[F],x[F],p[F],J?`${b[F]} px-0`:f[F],H?h[E]:v[E],H?"cursor-default":"",B?"cursor-progress":"",N?"w-full":"",L??""].filter(Boolean).join(" "),style:{...i(G),...M},onClick:e=>{if(B)return e.preventDefault(),void e.stopPropagation();R?.(e)},...S,children:[H?null:e(m,{}),B?e(r,{icon:a,size:u[F],label:C??q.loading,className:"animate-spin"}):k,D,z]})});
+"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]})});

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

@@ -1,2 +1,2 @@
-export { MPButton } from './MPButton';
-export type { MPButtonProps } from './MPButton';
+export { MPButton } from './MPButton.js';
+export type { MPButtonProps } from './MPButton.js';

package/dist/components/button/index.js

@@ -1 +1 @@
-export{MPButton}from"./MPButton";
+export{MPButton}from"./MPButton.js";

package/dist/components/button-group/MPButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPOrientation, MPStyleProps, MPVariant } from '../../types';
+import type { MPColor, MPOrientation, MPStyleProps, MPVariant } from '../../types.js';
 export interface MPButtonGroupProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
     /**
      * Which way the buttons run.
@@ -12,6 +12,15 @@ export interface MPButtonGroupProps extends MPStyleProps, Omit<React.ComponentPr
     color?: MPColor;
     /** Disables every button in the group at once. */
     disabled?: boolean;
+    /**
+     * The group's name is `aria-label` through the rest props, and is worth
+     * setting whenever the run is a *set* rather than a row that happens to be
+     * adjacent — "Alignment", "Text style".
+     *
+     * A screen reader announces the boundaries of a `role="group"` either way; the
+     * name is what makes crossing that boundary mean something rather than being
+     * an interruption between two buttons.
+     */
     children?: React.ReactNode;
 }
 /**

package/dist/components/button-group/MPButtonGroup.js

@@ -1 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import*as r from"react";import{MPButtonGroupContext as e}from"../../internal/button-group";const t={horizontal:"[&>*:not(:first-child)]:rounded-s-mp-sm [&>*:not(:last-child)]:rounded-e-mp-sm",vertical:"[&>*:not(:first-child)]:rounded-t-mp-sm [&>*:not(:last-child)]:rounded-b-mp-sm"};export const MPButtonGroup=/*@__PURE__*/r.forwardRef(function({variant:i,size:l,color:n,disabled:a,orientation:s="horizontal",fullWidth:d=!1,className:c,children:m,...u},f){const p=r.useMemo(()=>({variant:i,size:l,color:n,disabled:a}),[i,l,n,a]);return o(e.Provider,{value:p,children:o("div",{ref:f,role:"group","data-mp-orientation":s,className:["mp-button-group inline-flex gap-0.5 align-middle","vertical"===s?"flex-col":"flex-row",t[s],"[&>*]:relative [&>*:focus-visible]:z-10",d?"flex w-full [&>*]:flex-1":"",c??""].filter(Boolean).join(" "),...u,children:m})})});
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{GROUP_JOIN as r,MPButtonGroupContext as i}from"../../internal/button-group.js";export const MPButtonGroup=/*@__PURE__*/o.forwardRef(function({variant:l,size:t,color:a,disabled:n,orientation:s="horizontal",fullWidth:f=!1,className:c,children:u,...d},m){const p=o.useMemo(()=>({variant:l,size:t,color:a,disabled:n}),[l,t,a,n]);return e(i.Provider,{value:p,children:e("div",{ref:m,role:"group","data-mp-orientation":s,className:["mp-button-group inline-flex gap-0.5 align-middle","vertical"===s?"flex-col":"flex-row",r[s],"[&>*]:relative [&>*:focus-visible]:z-10",f?"flex w-full [&>*]:flex-1":"",c??""].filter(Boolean).join(" "),...d,children:u})})});

package/dist/components/button-group/index.d.ts

@@ -1,2 +1,2 @@
-export { MPButtonGroup } from './MPButtonGroup';
-export type { MPButtonGroupProps } from './MPButtonGroup';
+export { MPButtonGroup } from './MPButtonGroup.js';
+export type { MPButtonGroupProps } from './MPButtonGroup.js';

package/dist/components/button-group/index.js

@@ -1 +1 @@
-export{MPButtonGroup}from"./MPButtonGroup";
+export{MPButtonGroup}from"./MPButtonGroup.js";

package/dist/components/card/MPCard.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MPBoxProps } from '../box/MPBox';
+import { type MPBoxProps } from '../box/MPBox.js';
 export interface MPCardProps extends Omit<MPBoxProps, 'title' | 'padded'> {
     /**
      * The card's heading.

package/dist/components/card/MPCard.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{MPBox as n}from"../box/MPBox";import{hasContent as i,META_TEXT as o,PROSE_TEXT as t,SHEET_GAP as c,SHEET_PAD_X as s,SHEET_PAD_Y as d,SHEET_TITLE as m}from"../../internal/scale";export const MPCard=/*@__PURE__*/r.forwardRef(function({size:r="md",title:f,subtitle:u,headerAction:p,media:x,footer:h,dividers:_=!1,className:v,children:N,...w},b){const k=s[r],$=d[r],g=_?`${k} ${$}`:k,j=i(f)||i(u)||i(p),y=i(x),B=[j?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(f)||i(u)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(f)?e("div",{className:`mp-card__title ${m[r]}`,children:f}):null,i(u)?e("div",{className:`text-mp-on-surface-variant ${o}`,children:u}):null]}):null,i(p)?e("div",{className:"ms-auto shrink-0",children:p}):null]})}:null,i(N)?{key:"content",className:`mp-card__body min-w-0 ${t[r]}`,content:N}:null,i(h)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:h}:null].filter(e=>null!==e);return l(n,{ref:b,size:r,padded:!1,className:["mp-card flex flex-col",y?"overflow-hidden":"",v??""].filter(Boolean).join(" "),...w,children:[y?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:x}):null,B.length>0?e("div",{className:["flex min-w-0 flex-col",_?"":`${$} ${c[r]}`].filter(Boolean).join(" "),children:B.map((l,a)=>e("div",{className:[g,l.className,_&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});
+"use client";
+import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{MPBox as n}from"../box/MPBox.js";import{hasContent as i,META_TEXT as o,PROSE_TEXT as t,SHEET_GAP as s,SHEET_PAD_X as c,SHEET_PAD_Y as d,SHEET_TITLE as m}from"../../internal/scale.js";export const MPCard=/*@__PURE__*/r.forwardRef(function({size:r="md",title:f,subtitle:u,headerAction:p,media:x,footer:h,dividers:_=!1,className:v,children:N,...j},w){const b=c[r],k=d[r],$=_?`${b} ${k}`:b,g=i(f)||i(u)||i(p),y=i(x),B=[g?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(f)||i(u)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(f)?e("div",{className:`mp-card__title ${m[r]}`,children:f}):null,i(u)?e("div",{className:`text-mp-on-surface-variant ${o}`,children:u}):null]}):null,i(p)?e("div",{className:"ms-auto shrink-0",children:p}):null]})}:null,i(N)?{key:"content",className:`mp-card__body min-w-0 ${t[r]}`,content:N}:null,i(h)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:h}:null].filter(e=>null!==e);return l(n,{ref:w,size:r,padded:!1,className:["mp-card flex flex-col",y?"overflow-hidden":"",v??""].filter(Boolean).join(" "),...j,children:[y?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:x}):null,B.length>0?e("div",{className:["flex min-w-0 flex-col",_?"":`${k} ${s[r]}`].filter(Boolean).join(" "),children:B.map((l,a)=>e("div",{className:[$,l.className,_&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});

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

@@ -1,2 +1,2 @@
-export { MPCard } from './MPCard';
-export type { MPCardProps } from './MPCard';
+export { MPCard } from './MPCard.js';
+export type { MPCardProps } from './MPCard.js';

package/dist/components/card/index.js

@@ -1 +1 @@
-export{MPCard}from"./MPCard";
+export{MPCard}from"./MPCard.js";

package/dist/components/carousel/MPCarousel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
 export interface MPCarouselProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
     /** Which slide is showing, counted from 0. Use with `onValueChange`. */
     value?: number;
@@ -62,20 +62,25 @@ export interface MPCarouselProps extends Omit<React.ComponentPropsWithoutRef<'di
      * @default 'primary'
      */
     color?: MPColor;
-    /**
-     * The carousel's accessible name.
-     * @default 'Carousel'
-     */
+    /** The carousel's accessible name. Defaults to the word for it in `locale`. */
     label?: string;
-    /** @default 'Previous slide' */
+    /** Defaults to the wording in `locale`. */
     previousLabel?: string;
-    /** @default 'Next slide' */
+    /** The same. */
     nextLabel?: string;
     /**
      * How one slide is named to a screen reader, and how its mark is labelled.
-     * @default (index, count) => `Slide ${index} of ${count}`
+     * Defaults to the wording in `locale` with the two numbers set into it.
      */
     slideLabel?: (index: number, count: number) => string;
+    /**
+     * Which language the carousel's own names are written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     *
+     * Nothing here is ever drawn — the strip is pictures and the arrows are
+     * chevrons — so without it a Korean page reads its slides out in English.
+     */
+    locale?: string;
     /** The slides. Every top-level child becomes one. */
     children?: React.ReactNode;
 }

package/dist/components/carousel/MPCarousel.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton";import{MPIcon as o}from"../icon/MPIcon";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{CONTROL_ICON as s}from"../../internal/scale";import{CONTAINER_SURFACE as c}from"../../internal/surface";import{VISUALLY_HIDDEN as u}from"../../internal/visually-hidden";const d={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},m={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}},f=(e,r)=>`Slide ${e} of ${r}`;export const MPCarousel=/*@__PURE__*/t.forwardRef(function({value:p,defaultValue:h=0,onValueChange:b,loop:v=!0,autoPlay:w=!1,interval:g=5e3,arrows:x=!0,indicators:N=!0,variant:y="outlined",size:M="md",color:k="primary",label:R="Carousel",previousLabel:j="Previous slide",nextLabel:C="Next slide",slideLabel:P=f,className:z,style:I,children:$,...L},E){const S=t.Children.toArray($),T=S.length,[A,B]=t.useState(h),F=Math.min(Math.max(p??A,0),Math.max(T-1,0)),V=t.useRef(null),W=t.useRef([]),q=t.useRef(!1),_=t.useRef(!1),D=t.useRef(!1),[G,H]=t.useState(!1),J=t.useRef(F),K=t.useRef(b);J.current=F,K.current=b;const O=t.useCallback((e,r=!1)=>{if(0===T)return;const t=v?(e%T+T)%T:Math.min(Math.max(e,0),T-1);q.current=r,void 0===p&&B(t),t!==J.current&&K.current?.(t)},[T,v,p]);t.useEffect(()=>{if(q.current)return void(q.current=!1);if(!_.current)return void(_.current=!0);W.current[F]?.scrollIntoView({block:"nearest",inline:"start"}),D.current=!0;const e=window.setTimeout(()=>{D.current=!1},700);return()=>window.clearTimeout(e)},[F]),t.useEffect(()=>{if(!w||G||T<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||O(J.current+1)},g);return()=>window.clearInterval(e)},[w,G,T,g,O]);const Q=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(Q.current),[]);const U=F<=0,X=F>=T-1;return r("div",{ref:E,role:"region","aria-roledescription":"carousel","aria-label":R,"data-mp-size":M,"data-mp-variant":y,className:["mp-carousel flex w-full flex-col",z??""].filter(Boolean).join(" "),style:{...l(k),...I},onPointerEnter:()=>H(!0),onPointerLeave:()=>H(!1),onFocus:()=>H(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||H(!1)},...L,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",c[y],"text-mp-on-surface"].join(" "),children:[e("div",{ref:V,tabIndex:0,role:"group","aria-label":R,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{Q.current||(Q.current=requestAnimationFrame(()=>{Q.current=0;const e=V.current;if(!e||0===e.clientWidth||D.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==J.current&&r>=0&&r<T&&O(r,!0)}))},children:S.map((r,t)=>e("div",{ref:e=>{W.current[t]=e,W.current.length=T},role:"group","aria-roledescription":"slide","aria-label":P(t+1,T),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),x&&T>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${d[M]}`,children:[e(n,{variant:"filled",size:M,color:k,label:j,disabled:!v&&U,className:"pointer-events-auto",icon:e(o,{icon:a,size:s[M],className:"rtl:rotate-180"}),onClick:()=>O(F-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:M,color:k,label:C,disabled:!v&&X,className:"pointer-events-auto",icon:e(o,{icon:i,size:s[M],className:"rtl:rotate-180"}),onClick:()=>O(F+1)})]}):null]}),N&&T>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${m[M].gap}`,children:S.map((r,t)=>e("button",{type:"button","aria-label":P(t+1,T),"aria-current":t===F?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===F?`${m[M].current} bg-(--_mp-accent)`:`${m[M].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>O(t)},t))}):null,e("span",{className:u,"aria-live":w?"off":"polite",children:T>0?P(F+1,T):""})]})});
+"use client";
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as l}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as u}from"../../internal/locale.js";import{CAROUSEL as d}from"../../internal/messages/carousel.js";import{CONTROL_ICON as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";const h={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},b={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/t.forwardRef(function({value:v,defaultValue:w=0,onValueChange:g,loop:x=!0,autoPlay:j=!1,interval:N=5e3,arrows:y=!0,indicators:M=!0,variant:k="outlined",size:R="md",color:C="primary",label:z,previousLabel:I,nextLabel:P,slideLabel:S,locale:L,className:E,style:T,children:$,...A},B){const F=u(d,c(L)),V=z??F.label,W=S??((e,r)=>l(F.slide,{index:String(e),total:String(r)})),q=t.Children.toArray($),_=q.length,[D,G]=t.useState(w),H=Math.min(Math.max(v??D,0),Math.max(_-1,0)),J=t.useRef(null),K=t.useRef([]),O=t.useRef(!1),Q=t.useRef(!1),U=t.useRef(!1),[X,Y]=t.useState(!1),[Z,ee]=t.useState(!1),re=X||Z,te=t.useRef(H),ne=t.useRef(g);te.current=H,ne.current=g;const oe=t.useCallback((e,r=!1)=>{if(0===_)return;const t=x?(e%_+_)%_:Math.min(Math.max(e,0),_-1);O.current=r,void 0===v&&G(t),t!==te.current&&ne.current?.(t)},[_,x,v]);t.useEffect(()=>{if(O.current)return void(O.current=!1);if(!Q.current)return void(Q.current=!0);K.current[H]?.scrollIntoView({block:"nearest",inline:"start"}),U.current=!0;const e=window.setTimeout(()=>{U.current=!1},700);return()=>window.clearTimeout(e)},[H]),t.useEffect(()=>{if(!j||re||_<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||oe(te.current+1)},N);return()=>window.clearInterval(e)},[j,re,_,N,oe]);const ae=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(ae.current),[]);const ie=H<=0,se=H>=_-1;return r("div",{ref:B,role:"region","aria-roledescription":"carousel","aria-label":V,"data-mp-size":R,"data-mp-variant":k,className:["mp-carousel flex w-full flex-col",E??""].filter(Boolean).join(" "),style:{...s(C),...T},onPointerEnter:()=>Y(!0),onPointerLeave:()=>Y(!1),onFocus:()=>ee(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ee(!1)},...A,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",f[k],"text-mp-on-surface"].join(" "),children:[e("div",{ref:J,tabIndex:0,role:"group","aria-label":V,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{ae.current||(ae.current=requestAnimationFrame(()=>{ae.current=0;const e=J.current;if(!e||0===e.clientWidth||U.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==te.current&&r>=0&&r<_&&oe(r,!0)}))},children:q.map((r,t)=>e("div",{ref:e=>{K.current[t]=e,K.current.length=_},role:"group","aria-roledescription":"slide","aria-label":W(t+1,_),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),y&&_>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${h[R]}`,children:[e(n,{variant:"filled",size:R,color:C,label:I??F.previous,disabled:!x&&ie,className:"pointer-events-auto",icon:e(o,{icon:a,size:m[R],className:"rtl:rotate-180"}),onClick:()=>oe(H-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:R,color:C,label:P??F.next,disabled:!x&&se,className:"pointer-events-auto",icon:e(o,{icon:i,size:m[R],className:"rtl:rotate-180"}),onClick:()=>oe(H+1)})]}):null]}),M&&_>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${b[R].gap}`,children:q.map((r,t)=>e("button",{type:"button","aria-label":W(t+1,_),"aria-current":t===H?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===H?`${b[R].current} bg-(--_mp-accent)`:`${b[R].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>oe(t)},t))}):null,e("span",{className:p,"aria-live":j?"off":"polite",children:_>0?W(H+1,_):""})]})});

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

@@ -1,2 +1,2 @@
-export { MPCarousel } from './MPCarousel';
-export type { MPCarouselProps } from './MPCarousel';
+export { MPCarousel } from './MPCarousel.js';
+export type { MPCarouselProps } from './MPCarousel.js';

package/dist/components/carousel/index.js

@@ -1 +1 @@
-export{MPCarousel}from"./MPCarousel";
+export{MPCarousel}from"./MPCarousel.js";

package/dist/components/chat-bubble/MPChatBubble.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
 /**
  * Whose message this is.
  *
@@ -17,9 +17,22 @@ export type MPChatBubbleSide = 'start' | 'end';
  * colour family.
  */
 export type MPChatBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
-/** What a link inside a message unfurls to. */
+/**
+ * What a link inside a message unfurls to.
+ *
+ * This is the one shape in the library whose contents typically come from
+ * **somebody else** — a preview is attached to a message another person sent —
+ * so `url` is checked before it is rendered rather than trusted. See the note on
+ * `LinkPreview` below.
+ */
 export interface MPChatBubblePreview {
-    /** Where the card goes. */
+    /**
+     * Where the card goes.
+     *
+     * Only `http:`, `https:`, `mailto:`, `tel:` and relative URLs are rendered.
+     * Anything else — `javascript:`, `data:` — draws the card without a link
+     * rather than handing the reader a one-click script execution.
+     */
     url: string;
     /** The page's title. */
     title?: React.ReactNode;

package/dist/components/chat-bubble/MPChatBubble.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{MPIcon as r}from"../icon/MPIcon";import{CheckIcon as l,ClockIcon as t,ErrorIcon as i,LinkIcon as o}from"../../constants/icons";import{accentSlots as s}from"../../internal/accent";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale";import{hasContent as d,META_TEXT as p,PROSE_TEXT as u}from"../../internal/scale";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden";const h={xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},b={start:"[border-start-start-radius:var(--mp-sys-shape-corner-extra-small)]",end:"[border-start-end-radius:var(--mp-sys-shape-corner-extra-small)]"},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-on-surface",outlined:"border-mp-outline-variant border bg-transparent text-mp-on-surface",text:"bg-mp-surface-container-low text-mp-on-surface"};function v(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const g={sending:e(r,{icon:t,size:"1.15em"}),sent:e(r,{icon:l,size:"1.15em"}),delivered:e("span",{className:"block size-[1.15em]",children:e(v,{})}),read:e("span",{className:"block size-[1.15em]",children:e(v,{})}),failed:e(r,{icon:i,size:"1.15em"})},N={sending:"text-mp-on-surface-variant",sent:"text-mp-on-surface-variant",delivered:"text-mp-on-surface-variant",read:"text-(--_mp-accent)",failed:"text-mp-error"},w=["rounded-mp-sm block overflow-hidden border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","transition-[background-color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),y=["shrink-0 opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const MPChatBubble=/*@__PURE__*/a.forwardRef(function({side:a="start",name:r,time:l,avatar:t,status:i,statusLabel:o,typing:v=!1,media:w,preview:j,actions:z,locale:C,variant:L="tonal",size:B="md",color:$="primary",className:M,style:P,children:W,...I},R){const T=c(C),q=m("chat",T),A="end"===a,D=d(r)||d(l),E=v||d(W)||Boolean(j);return n("div",{ref:R,"data-mp-size":B,"data-mp-variant":L,"data-mp-side":a,className:["mp-chat-bubble group/bubble flex w-full items-start gap-2",A?"flex-row-reverse":"",M??""].filter(Boolean).join(" "),style:{...s($),...P},...I,children:[d(t)?e("div",{className:"shrink-0",children:t}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col gap-1",A?"items-end":"items-start"].join(" "),children:[D?n("div",{className:`flex items-baseline gap-2 ${p}`,children:[d(r)?e("span",{className:"font-medium",children:r}):null,d(l)?e("span",{className:"text-mp-on-surface-variant",children:l}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(A?"flex-row-reverse":""),children:[n("div",{className:["mp-chat-bubble__sheet rounded-mp-xl flex min-w-0 flex-col overflow-hidden","box-border",b[a],x[L],u[B]].join(" "),children:[d(w)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:w}):null,E?n("div",{className:`flex min-w-0 flex-col gap-2 ${h[B]}`,children:[v?e(k,{label:q.typing}):d(W)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:W}):null,j?e(_,{preview:j}):null]}):null]}),d(z)?e("div",{className:y,children:z}):null]}),i?n("div",{className:`flex items-center gap-1 ${p} ${N[i]}`,children:[g[i],e("span",{className:f,children:o??q[i]})]}):null]})]})});function k({label:a}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"mp-chat-typing size-[0.45em] rounded-full bg-current",style:{"--_mp-index":n}},n)),e("span",{className:f,children:a})]})}function _({preview:a}){const{url:l,title:t,description:i,image:s,site:c,newTab:m=!1}=a;return n("a",{href:l,target:m?"_blank":void 0,rel:m?"noopener noreferrer":void 0,className:w,children:[s?e("img",{src:s,alt:"",className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[d(c)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70",children:[e(r,{icon:o,size:"1em"}),e("span",{className:"truncate",children:c})]}):null,d(t)?e("span",{className:"font-medium",children:t}):null,d(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}
+"use client";
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as l,ClockIcon as i,ErrorIcon as t,LinkIcon as s}from"../../constants/icons.js";import{accentSlots as o}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{linkRel as d,safeHref as p}from"../../internal/link.js";import{CHAT as u}from"../../internal/messages/chat.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as b}from"../../internal/scale.js";import{VISUALLY_HIDDEN as x}from"../../internal/visually-hidden.js";const v={xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},g={start:"[border-start-start-radius:var(--mp-sys-shape-corner-extra-small)]",end:"[border-start-end-radius:var(--mp-sys-shape-corner-extra-small)]"},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-variant border bg-transparent text-mp-on-surface",text:"bg-mp-surface-container-low text-mp-on-surface"};function N(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const w={sending:e(a,{icon:i,size:"1.15em"}),sent:e(a,{icon:l,size:"1.15em"}),delivered:e("span",{className:"block size-[1.15em]",children:e(N,{})}),read:e("span",{className:"block size-[1.15em]",children:e(N,{})}),failed:e(a,{icon:t,size:"1.15em"})},k={sending:"text-mp-on-surface-variant",sent:"text-mp-on-surface-variant",delivered:"text-mp-on-surface-variant",read:"text-(--_mp-accent)",failed:"text-mp-error"},j=/*@__PURE__*/["rounded-mp-sm block overflow-hidden border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","transition-[background-color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),_=/*@__PURE__*/["shrink-0 opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const MPChatBubble=/*@__PURE__*/r.forwardRef(function({side:r="start",name:a,time:l,avatar:i,status:t,statusLabel:s,typing:d=!1,media:p,preview:N,actions:j,locale:L,variant:B="tonal",size:$="md",color:M="primary",className:P,style:W,children:I,...R},T){const q=c(L),A=m(u,q),D="end"===r,E=f(a)||f(l),F=d||f(I)||Boolean(N);return n("div",{ref:T,"data-mp-size":$,"data-mp-variant":B,"data-mp-side":r,className:["mp-chat-bubble group/bubble flex w-full items-start gap-2",D?"flex-row-reverse":"",P??""].filter(Boolean).join(" "),style:{...o(M),...W},...R,children:[f(i)?e("div",{className:"shrink-0",children:i}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col gap-1",D?"items-end":"items-start"].join(" "),children:[E?n("div",{className:`flex items-baseline gap-2 ${h}`,children:[f(a)?e("span",{className:"font-medium",children:a}):null,f(l)?e("span",{className:"text-mp-on-surface-variant",children:l}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(D?"flex-row-reverse":""),children:[n("div",{className:["mp-chat-bubble__sheet rounded-mp-xl flex min-w-0 flex-col overflow-hidden","box-border",g[r],y[B],b[$]].join(" "),children:[f(p)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:p}):null,F?n("div",{className:`flex min-w-0 flex-col gap-2 ${v[$]}`,children:[d?e(z,{label:A.typing}):f(I)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:I}):null,N?e(C,{preview:N}):null]}):null]}),f(j)?e("div",{className:_,children:j}):null]}),t?n("div",{className:`flex items-center gap-1 ${h} ${k[t]}`,children:[w[t],e("span",{className:x,children:s??A[t]})]}):null]})]})});function z({label:r}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"mp-chat-typing size-[0.45em] rounded-full bg-current",style:{"--_mp-index":n}},n)),e("span",{className:x,children:r})]})}function C({preview:r}){const{url:l,title:i,description:t,image:o,site:c,newTab:m=!1}=r,u=m?"_blank":void 0;return n("a",{href:p(l),target:u,rel:d(u,void 0),className:j,children:[o?e("img",{src:o,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",width:640,height:112,className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[f(c)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70",children:[e(a,{icon:s,size:"1em"}),e("span",{className:"truncate",children:c})]}):null,f(i)?e("span",{className:"font-medium",children:i}):null,f(t)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:t}):null]})]})}

package/dist/components/chat-bubble/index.d.ts

@@ -1,2 +1,2 @@
-export { MPChatBubble } from './MPChatBubble';
-export type { MPChatBubblePreview, MPChatBubbleProps, MPChatBubbleSide, MPChatBubbleStatus } from './MPChatBubble';
+export { MPChatBubble } from './MPChatBubble.js';
+export type { MPChatBubblePreview, MPChatBubbleProps, MPChatBubbleSide, MPChatBubbleStatus } from './MPChatBubble.js';

package/dist/components/chat-bubble/index.js

@@ -1 +1 @@
-export{MPChatBubble}from"./MPChatBubble";
+export{MPChatBubble}from"./MPChatBubble.js";

package/dist/components/checkbox/MPCheckbox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize } from '../../types';
+import type { MPColor, MPSize } from '../../types.js';
 export interface MPCheckboxProps {
     /** Whether the box is ticked. Use with `onCheckedChange` for a controlled box. */
     checked?: boolean;