material-plus-ui 1.5.0 → 1.7.0

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>>;

package/dist/components/calendar/MPCalendar.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Calendar as a}from"../../internal/Calendar.js";import{accentSlots as n}from"../../internal/accent.js";import{POPUP_PAD as s}from"../../internal/Picker.js";import{useMPLocale as r,useMPMessages as i}from"../../internal/locale.js";import{PICKER as l}from"../../internal/messages/picker.js";import{CONTAINER_SURFACE as m}from"../../internal/surface.js";import{isValidDate as u,localeWeekStart as c,mergeDateAndTime as d,startOfMonth as f,startOfUnit as p,toISODate as h,toISOMonth as x,toISOYear as j,today as v}from"../../internal/date.js";import{useMPColor as D,useMPSize as w}from"../../internal/config.js";const y={day:h,month:x,year:j};export const MPCalendar=/*@__PURE__*/o.forwardRef(function({value:h,defaultValue:x,onValueChange:j,month:g,defaultMonth:B,onMonthChange:C,precision:S="day",minDate:b,maxDate:k,shouldDisableDate:M,locale:N,weekStartsOn:O,showOutsideDays:P=!0,showPreviousButton:z=!0,showNextButton:F=!0,autoFocus:V=!1,variant:R="text",size:$,color:q,labels:A,name:E,className:G,style:H,...I},J){const K=w($),L=D(q),Q=r(N),T=i(l,Q,A),U=O??c(Q),[W,X]=o.useState(x??null),Y=void 0!==h?h:W,[Z,_]=o.useState(()=>{const e=h??x;return f(u(e)?e:B??v())}),ee=void 0!==g?f(g):Z,te=e=>{void 0===g&&_(e),C?.(e)};return t("div",{...I,ref:J,"data-mp-size":K,style:{...n(L),...H},className:["mp-calendar-root inline-flex flex-col","text"===R?"":`rounded-mp-md ${s[K]}`,m[R],"text"===R?"":"text-mp-on-surface",G??""].filter(Boolean).join(" "),children:[e(a,{size:K,color:L,locale:Q,weekStartsOn:U,month:ee,onMonthChange:te,selected:[Y],onSelect:e=>{const t=p(e,S),o=u(Y)?d(t,Y):t;void 0===h&&X(o),j?.(o),te(f(o))},minDate:b,maxDate:k,shouldDisableDate:M,showOutsideDays:P,showPreviousButton:z,showNextButton:F,precision:S,labels:T,autoFocus:V}),E?e("input",{type:"hidden",name:E,value:u(Y)?y[S](Y):""}):null]})});

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

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

package/dist/components/calendar/index.js

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

package/dist/components/card/MPCard.js

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

package/dist/components/carousel/MPCarousel.js

@@ -1,2 +1,2 @@
 "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,_):""})]})});
+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";import{useMPColor as h,useMPSize as b}from"../../internal/config.js";const v={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"},w={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:g,defaultValue:x=0,onValueChange:j,loop:N=!0,autoPlay:y=!1,interval:M=5e3,arrows:k=!0,indicators:R=!0,variant:C="outlined",size:z,color:I,label:P,previousLabel:S,nextLabel:L,slideLabel:E,locale:T,className:$,style:A,children:B,...F},V){const W=b(z),q=h(I),_=u(d,c(T)),D=P??_.label,G=E??((e,r)=>l(_.slide,{index:String(e),total:String(r)})),H=t.Children.toArray(B),J=H.length,[K,O]=t.useState(x),Q=Math.min(Math.max(g??K,0),Math.max(J-1,0)),U=t.useRef(null),X=t.useRef([]),Y=t.useRef(!1),Z=t.useRef(!1),ee=t.useRef(!1),[re,te]=t.useState(!1),[ne,oe]=t.useState(!1),ae=re||ne,ie=t.useRef(Q),se=t.useRef(j);ie.current=Q,se.current=j;const le=t.useCallback((e,r=!1)=>{if(0===J)return;const t=N?(e%J+J)%J:Math.min(Math.max(e,0),J-1);Y.current=r,void 0===g&&O(t),t!==ie.current&&se.current?.(t)},[J,N,g]);t.useEffect(()=>{if(Y.current)return void(Y.current=!1);if(!Z.current)return void(Z.current=!0);X.current[Q]?.scrollIntoView({block:"nearest",inline:"start"}),ee.current=!0;const e=window.setTimeout(()=>{ee.current=!1},700);return()=>window.clearTimeout(e)},[Q]),t.useEffect(()=>{if(!y||ae||J<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||le(ie.current+1)},M);return()=>window.clearInterval(e)},[y,ae,J,M,le]);const ce=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(ce.current),[]);const ue=Q<=0,de=Q>=J-1;return r("div",{ref:V,role:"region","aria-roledescription":"carousel","aria-label":D,"data-mp-size":W,"data-mp-variant":C,className:["mp-carousel flex w-full flex-col",$??""].filter(Boolean).join(" "),style:{...s(q),...A},onPointerEnter:()=>te(!0),onPointerLeave:()=>te(!1),onFocus:()=>oe(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||oe(!1)},...F,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",f[C],"text-mp-on-surface"].join(" "),children:[e("div",{ref:U,tabIndex:0,role:"group","aria-label":D,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:()=>{ce.current||(ce.current=requestAnimationFrame(()=>{ce.current=0;const e=U.current;if(!e||0===e.clientWidth||ee.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==ie.current&&r>=0&&r<J&&le(r,!0)}))},children:H.map((r,t)=>e("div",{ref:e=>{X.current[t]=e,X.current.length=J},role:"group","aria-roledescription":"slide","aria-label":G(t+1,J),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),k&&J>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${v[W]}`,children:[e(n,{variant:"filled",size:W,color:q,label:S??_.previous,disabled:!N&&ue,className:"pointer-events-auto",icon:e(o,{icon:a,size:m[W],className:"rtl:rotate-180"}),onClick:()=>le(Q-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:W,color:q,label:L??_.next,disabled:!N&&de,className:"pointer-events-auto",icon:e(o,{icon:i,size:m[W],className:"rtl:rotate-180"}),onClick:()=>le(Q+1)})]}):null]}),R&&J>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${w[W].gap}`,children:H.map((r,t)=>e("button",{type:"button","aria-label":G(t+1,J),"aria-current":t===Q?"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===Q?`${w[W].current} bg-(--_mp-accent)`:`${w[W].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>le(t)},t))}):null,e("span",{className:p,"aria-live":y?"off":"polite",children:J>0?G(Q+1,J):""})]})});

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

@@ -1,2 +1,2 @@
 "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]})]})}
+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 i,ClockIcon as l,ErrorIcon as t,LinkIcon as o}from"../../constants/icons.js";import{accentSlots as s}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";import{useMPColor as v,useMPSize as g}from"../../internal/config.js";const y={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"},N={start:"[border-start-start-radius:var(--mp-sys-shape-corner-extra-small)]",end:"[border-start-end-radius:var(--mp-sys-shape-corner-extra-small)]"},w={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 k(){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 j={sending:e(a,{icon:l,size:"1.15em"}),sent:e(a,{icon:i,size:"1.15em"}),delivered:e("span",{className:"block size-[1.15em]",children:e(k,{})}),read:e("span",{className:"block size-[1.15em]",children:e(k,{})}),failed:e(a,{icon:t,size:"1.15em"})},_={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"},z=/*@__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(" "),C=/*@__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:i,avatar:l,status:t,statusLabel:o,typing:d=!1,media:p,preview:k,actions:z,locale:$,variant:M="tonal",size:P,color:W,className:I,style:R,children:T,...q},A){const D=g(P),E=v(W),F=c($),G=m(u,F),H="end"===r,J=f(a)||f(i),K=d||f(T)||Boolean(k);return n("div",{ref:A,"data-mp-size":D,"data-mp-variant":M,"data-mp-side":r,className:["mp-chat-bubble group/bubble flex w-full items-start gap-2",H?"flex-row-reverse":"",I??""].filter(Boolean).join(" "),style:{...s(E),...R},...q,children:[f(l)?e("div",{className:"shrink-0",children:l}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col gap-1",H?"items-end":"items-start"].join(" "),children:[J?n("div",{className:`flex items-baseline gap-2 ${h}`,children:[f(a)?e("span",{className:"font-medium",children:a}):null,f(i)?e("span",{className:"text-mp-on-surface-variant",children:i}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(H?"flex-row-reverse":""),children:[n("div",{className:["mp-chat-bubble__sheet rounded-mp-xl flex min-w-0 flex-col overflow-hidden","box-border",N[r],w[M],b[D]].join(" "),children:[f(p)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:p}):null,K?n("div",{className:`flex min-w-0 flex-col gap-2 ${y[D]}`,children:[d?e(L,{label:G.typing}):f(T)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:T}):null,k?e(B,{preview:k}):null]}):null]}),f(z)?e("div",{className:C,children:z}):null]}),t?n("div",{className:`flex items-center gap-1 ${h} ${_[t]}`,children:[j[t],e("span",{className:x,children:o??G[t]})]}):null]})]})});function L({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 B({preview:r}){const{url:i,title:l,description:t,image:s,site:c,newTab:m=!1}=r,u=m?"_blank":void 0;return n("a",{href:p(i),target:u,rel:d(u,void 0),className:z,children:[s?e("img",{src:s,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:o,size:"1em"}),e("span",{className:"truncate",children:c})]}):null,f(l)?e("span",{className:"font-medium",children:l}):null,f(t)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:t}):null]})]})}

package/dist/components/checkbox/MPCheckbox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as l}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const h={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/r.forwardRef(function({checked:u,defaultChecked:f,onCheckedChange:b,indeterminate:x=!1,label:g,description:y,errorMessage:k,size:j="md",color:z="primary",required:N=!1,disabled:_=!1,readOnly:v=!1,name:C,value:M,id:I,className:R,style:q},w){const L=p(k),O=L?"error":z,P=h[j],S=r.useId(),B=I??S;return e(n.Root,{className:["mp-checkbox inline-block align-top",R??""].filter(Boolean).join(" "),disabled:_,invalid:L,"data-mp-size":j,style:{...c(O),...q},children:a("div",{className:["flex items-start gap-3",m[j]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(t.Root,{ref:w,id:B,name:C,value:M,checked:u,defaultChecked:f,indeterminate:x,required:N,disabled:_,readOnly:v,onCheckedChange:e=>b?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",P.box,_?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[v?"cursor-default":"cursor-pointer",L?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[_?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",P.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:["flex items-center justify-center","transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-60 data-starting-style:opacity-0","data-ending-style:scale-60 data-ending-style:opacity-0"].join(" "),children:e(o,{icon:x?s:i,size:P.glyph,strokeWidth:3})})]})}),p(g)||p(y)||L?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(g)?a(n.Label,{htmlFor:B,className:["leading-[1.4]",_?"text-mp-on-surface/38 cursor-default":v?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[g,N?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{description:y,errorMessage:k})]}):null]})})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MARK_MOTION as l}from"../../internal/mark.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as m}from"../../internal/SupportingText.js";import{PROSE_TEXT as p,hasContent as h}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/a.forwardRef(function({checked:x,defaultChecked:g,onCheckedChange:k,indeterminate:j=!1,label:y,description:z,errorMessage:N,size:_,color:v,required:C=!1,disabled:M=!1,readOnly:I=!1,name:R,value:q,id:w,className:L,style:O},P){const S=f(_),B=u(v),F=h(N),T=F?"error":B,W=b[S],$=a.useId(),A=w??$;return e(n.Root,{className:["mp-checkbox inline-block align-top",L??""].filter(Boolean).join(" "),disabled:M,invalid:F,"data-mp-size":S,style:{...c(T),...O},children:r("div",{className:["flex items-start gap-3",p[S]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(t.Root,{ref:P,id:A,name:R,value:q,checked:x,defaultChecked:g,indeterminate:j,required:C,disabled:M,readOnly:I,onCheckedChange:e=>k?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",W.box,M?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[I?"cursor-default":"cursor-pointer",F?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[M?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",W.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:`flex items-center justify-center ${l}`,children:e(o,{icon:j?s:i,size:W.glyph,strokeWidth:3})})]})}),h(y)||h(z)||F?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[h(y)?r(n.Label,{htmlFor:A,className:["leading-[1.4]",M?"text-mp-on-surface/38 cursor-default":I?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,C?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(m,{description:z,errorMessage:N})]}):null]})})});

package/dist/components/chip/MPChip.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPSize, MPTransition, MPVariant } from '../../types.js';
 export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * How much surface the chip paints.
@@ -57,18 +57,42 @@ export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>
     /** Unavailable. Drops the accent family, as everywhere else in the library. */
     disabled?: boolean;
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * A compact token: a tag, a filter, a status, an entity plucked out of a list.
  *
- * The shell is always a `<span>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` is given — a real `<button>` wrapping that
- * content, plus a second button for `onDelete`. Both are reachable by keyboard,
- * and neither is nested inside the other.
+ * A chip that does nothing is a `<span>`. A chip with an `onClick` is a real
+ * `<button>` — the shell itself, so there is one element, one tab stop, and one
+ * thing for a parent to hang `aria-expanded` on.
+ *
+ * The exception is `onDelete`, which is a second control and cannot be nested
+ * inside the first. A chip with both goes back to a `<span>` shell holding two
+ * sibling buttons: one wrapping the label, one drawing the ×. Both are reachable
+ * by keyboard and neither is inside the other.
  *
  * An inert `<span>` carrying a click handler is the single most common way a
  * component library loses its keyboard users, and a `<button>` inside a
  * `<button>` is the most common way one invents a chip that Chrome silently
- * rewrites. This shape avoids both.
+ * rewrites. Both shapes avoid both.
+ *
+ * ## Why the shell is the button, and not always a span
+ *
+ * Because of what wraps a chip. Base UI's `render` — which is how a chip becomes
+ * an [MPMenu](./menu)'s trigger, a popover's, a tooltip's — merges its handlers
+ * and its ARIA onto the element this component *returns*. With a `<span>` there
+ * that meant `aria-haspopup`, `aria-expanded`, `id` and `tabindex` landing on
+ * something that was not focusable, a second tab stop on the label button
+ * underneath carrying none of it, and Base UI logging that it expected a native
+ * `<button>`. One element is the fix, and it is also simply less markup for the
+ * common case.
  */
-export declare const MPChip: React.ForwardRefExoticComponent<MPChipProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MPChip: React.ForwardRefExoticComponent<MPChipProps & React.RefAttributes<HTMLElement>>;

package/dist/components/chip/MPChip.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{CloseIcon as r}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{hasContent as m}from"../../internal/scale.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";const d={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},u={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},f={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},x={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},b={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},g={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-transparent"},h={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},v={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 text-mp-on-surface/38 border bg-transparent",text:"bg-transparent text-mp-on-surface/38"},y=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","rounded-mp-full size-[1.35em] opacity-70","transition-opacity duration-(--mp-sys-motion-duration-short4)","hover:opacity-100 focus-visible:opacity-100","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:cursor-default disabled:opacity-38"].join(" "),_=/*@__PURE__*/["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch rounded-[inherit] font-[inherit] text-[inherit]","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ");export const MPChip=/*@__PURE__*/o.forwardRef(function({variant:o="outlined",size:j="md",color:w="primary",startIcon:k,endIcon:N,count:z,onDelete:C,deleteLabel:I,locale:$,selected:B,disabled:L=!1,className:M,style:P,children:D,onClick:F,...R},S){const q=s($),A=l(c,q),E=Boolean(F)&&!L,G=["mp-chip relative inline-flex max-w-full shrink-0 items-center","box-border overflow-hidden align-middle leading-none whitespace-nowrap select-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",d[j],u[j],x[j],b[j],L?v[o]:B?h[o]:g[o],E?"ps-0":f[j],C?"pe-2":E?"pe-0":"",M??""].filter(Boolean).join(" "),H=n(t,{children:[k,m(D)?e("span",{className:"min-w-0 truncate",children:D}):null,N,m(z)?e("span",{className:["rounded-mp-full ms-0.5 inline-flex shrink-0 items-center justify-center px-1.5 py-px","text-[0.85em] leading-none font-medium tabular-nums","filled"===o?"bg-(--_mp-on-accent)/20 text-(--_mp-on-accent)":"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"].join(" "),children:z}):null]});return n("span",{ref:S,"data-mp-size":j,"data-mp-variant":o,"data-selected":B||void 0,className:G,style:{...i(w),...P},"aria-disabled":!(!L||E)||void 0,...R,children:[E?n("button",{type:"button","aria-pressed":B,className:`${_} ${x[j]} ${f[j]}`,onClick:F,children:[e(p,{}),H]}):H,C?e("button",{type:"button","aria-label":I??A.remove,disabled:L,className:y,onClick:C,children:e(a,{icon:r,size:"1em"})}):null]})});
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{transitionProps as s}from"../../internal/transition.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{hasContent as p}from"../../internal/scale.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},x={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},g={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},h={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},v={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-transparent"},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-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},_={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 text-mp-on-surface/38 border bg-transparent",text:"bg-transparent text-mp-on-surface/38"},w=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","rounded-mp-full size-[1.35em] opacity-70","transition-opacity duration-(--mp-sys-motion-duration-short4)","hover:opacity-100 focus-visible:opacity-100","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:cursor-default disabled:opacity-38"].join(" "),k=/*@__PURE__*/["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch rounded-[inherit] font-[inherit] text-[inherit]","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),N=/*@__PURE__*/["group cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ");export const MPChip=/*@__PURE__*/o.forwardRef(function({variant:o="outlined",size:$,color:C,startIcon:z,endIcon:B,count:I,onDelete:L,deleteLabel:M,locale:P,selected:D,disabled:F=!1,transition:R,className:S,style:q,children:A,onClick:E,...G},H){const J=s(R),K=f($),O=u(C),Q=l(P),T=c(m,Q),U=Boolean(E)&&!F,V=U&&Boolean(L),W=U&&!L,X=["mp-chip relative inline-flex max-w-full shrink-0 items-center","box-border overflow-hidden align-middle leading-none whitespace-nowrap select-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",b[K],x[K],h[K],v[K],F?_[o]:D?j[o]:y[o],V?"ps-0":g[K],L?"pe-2":"",W?N:"",S??""].filter(Boolean).join(" "),Y=t(n,{children:[z,p(A)?e("span",{className:"min-w-0 truncate",children:A}):null,B,p(I)?e("span",{className:["rounded-mp-full ms-0.5 inline-flex shrink-0 items-center justify-center px-1.5 py-px","text-[0.85em] leading-none font-medium tabular-nums","filled"===o?"bg-(--_mp-on-accent)/20 text-(--_mp-on-accent)":"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"].join(" "),children:I}):null]}),Z={"data-mp-size":K,"data-mp-variant":o,"data-selected":D||void 0,className:`${X}${J.className?` ${J.className}`:""}`,style:{...r(O),...J.style,...q},...G};return W?t("button",{ref:H,type:"button","aria-pressed":D,onClick:E,...Z,children:[e(d,{}),Y]}):t("span",{ref:H,"aria-disabled":!(!F||U)||void 0,...Z,children:[V?t("button",{type:"button","aria-pressed":D,className:`${k} ${h[K]} ${g[K]}`,onClick:E,children:[e(d,{}),Y]}):Y,L?e("button",{type:"button","aria-label":M??T.remove,disabled:F,className:w,onClick:L,children:e(a,{icon:i,size:"1em"})}):null]})});

package/dist/components/code-block/MPCodeBlock.d.ts

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import type { MPDensity, MPSize } from '../../types.js';
+export { registerMPLanguage } from '../../internal/highlight.js';
+/**
+ * Which palette the block wears.
+ *
+ * - `auto` — the page's own scheme, light on a light page and dark on a dark
+ *   one. The default, because that is what every other surface in this library
+ *   does and a reader who has chosen a scheme has chosen it for the whole page.
+ * - `dark` and `light` — pinned, whatever the page is doing. `dark` is what a
+ *   documentation site usually wants: code has been read on a dark ground since
+ *   terminals, and the choice is one prop.
+ * - `mono` — no hue at all. Structure carried by weight and by how far a run is
+ *   muted, which is what a block printed on paper, or read by somebody who
+ *   cannot separate the hues, is left with.
+ *
+ * The type is open on purpose. A theme is a set of `--mp-code-*` custom
+ * properties under a `[data-mp-code-theme]` selector and nothing else, so a
+ * consumer who writes one in their own stylesheet has a theme — with nothing to
+ * register, nothing to import, and no cost to anybody who did not.
+ *
+ * No third-party palettes ship here. One Dark, Dracula and the rest are other
+ * projects' published work under their own licences, and porting them into this
+ * package would be shipping somebody else's design; the open string is how to
+ * bring the one you read in all day.
+ */
+export type MPCodeBlockTheme = 'auto' | 'dark' | 'light' | 'mono' | (string & {});
+export interface MPCodeBlockProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'prefix' | 'children' | 'onCopy'> {
+    /**
+     * The code.
+     *
+     * Trailing whitespace is trimmed off the end of the block: a template literal
+     * is almost always written with a newline before its closing backtick, and
+     * that newline is a blank line at the bottom of every block. Nothing is
+     * trimmed off the front, because indentation is meaningful in half of the
+     * languages here.
+     */
+    code: string;
+    /**
+     * What it is written in — `ts`, `bash`, `yml`, `dockerfile`. The common
+     * spellings and file extensions are understood, so a value copied off a
+     * fenced code block works as it stands.
+     *
+     * A language nothing here knows is drawn plain rather than refused. Teach it
+     * one with `registerMPLanguage`.
+     */
+    language?: string;
+    /**
+     * The palette.
+     * @default 'auto'
+     */
+    theme?: MPCodeBlockTheme;
+    /** The type scale and the air around the code. @default 'md' */
+    size?: MPSize;
+    /** Tightens that air and nothing else. @default 0 */
+    density?: MPDensity;
+    /**
+     * Colours the code.
+     *
+     * Off, nothing is fetched at all — the grammar engine is behind a dynamic
+     * import, so a block that does not colour itself costs no more than the text
+     * in it. On, the block draws plain on the first frame and colours itself when
+     * the grammar lands: a few milliseconds, and never a blank space where the
+     * code should be.
+     * @default true
+     */
+    highlight?: boolean;
+    /**
+     * The bar over the code, and the master switch for it. With it off there is
+     * no bar, and none of `showLanguage`, `copyable` or `rawToggle` draws
+     * anything whatever they say.
+     * @default true
+     */
+    toolbar?: boolean;
+    /**
+     * A name at the start of the bar, usually a file path. Takes the place the
+     * language would otherwise have, and both can be shown at once.
+     */
+    title?: React.ReactNode;
+    /** Names the language at the start of the bar. @default true */
+    showLanguage?: boolean;
+    /** The button that puts the code on the clipboard. @default true */
+    copyable?: boolean;
+    /**
+     * The toggle that drops the colouring and shows the characters as they are.
+     *
+     * Off by default: it is a second control on a bar that usually wants one, and
+     * it means nothing at all when `highlight` is off.
+     * @default false
+     */
+    rawToggle?: boolean;
+    /**
+     * Lines to mark: a tinted row with a rule down its leading edge.
+     *
+     * A number is one line, a string is a list of lines and ranges — `'4'`,
+     * `'4-9'`, `'1,4-9,12'` — and an array is any mix of the two. They are
+     * counted the way the gutter counts, so with `startLine={286}` a
+     * `markLines={288}` marks the line the gutter calls 288.
+     */
+    markLines?: number | string | Array<number | string>;
+    /** Numbers down the side. @default false */
+    lineNumbers?: boolean;
+    /** What the first line is numbered. @default 1 */
+    startLine?: number;
+    /**
+     * A shell prompt in front of every line that has something on it — `$`, `#`,
+     * `>>>`.
+     *
+     * Drawn but never *present*: the symbol is generated content, so it cannot be
+     * selected, cannot be found by find-in-page, and is not what the copy button
+     * puts on the clipboard. A transcript stays a transcript and still pastes
+     * into a shell.
+     */
+    prompt?: string;
+    /** Wraps long lines instead of scrolling them sideways. @default false */
+    wrap?: boolean;
+    /**
+     * How tall the block may get before the code scrolls inside it. A number is
+     * pixels, a string is any CSS length. Left out, the block is as tall as the
+     * code.
+     */
+    maxHeight?: number | string;
+    /** The typeface. Defaults to the page's own monospace stack. */
+    fontFamily?: string;
+    /** Overrides the size the `size` ladder chose. A number is pixels. */
+    fontSize?: number | string;
+    /** Overrides the leading. A bare number is a ratio, as in CSS. */
+    lineHeight?: number | string;
+    /**
+     * Which language the block's own words are in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The copy button's label. Defaults to the wording in `locale`. */
+    copyLabel?: string;
+    /** And what it says once the code is on the clipboard. */
+    copiedLabel?: string;
+    /** The raw toggle's label. */
+    rawLabel?: string;
+    /** Fires with the copied text once the clipboard has taken it. */
+    onCopy?: (code: string) => void;
+}
+/**
+ * A viewer for one line of code or a thousand.
+ *
+ * ```tsx
+ * <MPCodeBlock code={source} language="ts" title="src/index.ts" lineNumbers />
+ * ```
+ *
+ * Everything above the code is optional and off one prop each, because the same
+ * component has to be a snippet inside a sentence — no bar, no numbers, no
+ * chrome — and the full transcript at the top of a README. Those are the same
+ * block with different things turned on rather than two components.
+ *
+ * ## The colouring arrives separately
+ *
+ * highlight.js, reached through a dynamic import, which makes it the one thing
+ * in this library that is loaded rather than imported. The grammars are forty
+ * kilobytes and there are thirty-four of them, so they come as their own chunk,
+ * one language at a time, and only for a block that asked to be coloured. The
+ * block draws plain on the first frame and colours itself when the chunk lands;
+ * there is never a blank space where the code should be.
+ *
+ * ## It is drawn as lines, always
+ *
+ * Even with no numbers and no prompt. A line is what carries a number, a prompt
+ * and a place in the scroll, and a component that switched between two
+ * renderings would have two sets of wrapping behaviour to keep in step.
+ *
+ * ## The block does not take the page's accent
+ *
+ * It has a palette of its own, because code is read against a ground chosen for
+ * code and the twelve hues it needs are not the four MD3 has. `theme` picks
+ * which set fills the slots, and `auto` — the default — is the one that follows
+ * the page's light and dark the way every other surface here does.
+ */
+export declare const MPCodeBlock: React.ForwardRefExoticComponent<MPCodeBlockProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/code-block/MPCodeBlock.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as n}from"../icon/MPIcon.js";import{CheckIcon as r,CodeIcon as i,CopyIcon as l}from"../../constants/icons.js";import{canonicalLanguage as a,highlightCode as s,plainLines as c}from"../../internal/highlight.js";import{cssLength as m}from"../../internal/length.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{CODE as u}from"../../internal/messages/code.js";import{META_TEXT as f,hasContent as g}from"../../internal/scale.js";import{VISUALLY_HIDDEN as x}from"../../internal/visually-hidden.js";import{useMPDensity as h,useMPSize as b}from"../../internal/config.js";export{registerMPLanguage}from"../../internal/highlight.js";const y={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},v={xs:8,sm:12,md:14,lg:16,xl:20},w={xs:8,sm:12,md:14,lg:16,xl:20},j={xs:4,sm:4,md:6,lg:8,xl:8};function N(e,t,o){return Math.max(o,e+2*t)}export const MPCodeBlock=/*@__PURE__*/o.forwardRef(function({code:k,language:_,theme:M="auto",size:S,density:$,highlight:L=!0,toolbar:T=!0,title:z,showLanguage:C=!0,copyable:F=!0,rawToggle:R=!1,markLines:A,lineNumbers:H=!1,startLine:K=1,prompt:B,wrap:E=!1,maxHeight:P,fontFamily:D,fontSize:I,lineHeight:q,locale:G,copyLabel:J,copiedLabel:O,rawLabel:Q,onCopy:U,className:V,style:W,...X},Y){const Z=b(S),ee=h($),te=p(u,d(G)),oe=o.useMemo(()=>k.replace(/\r\n?/g,"\n").replace(/\s+$/,""),[k]),ne=a(_),[re,ie]=o.useState(!1),[le,ae]=o.useState(null),[se,ce]=o.useState(null),me=L&&!re&&null!==ne;o.useEffect(()=>{if(!me||!ne)return void ce(null);let e=!1;return s(oe,ne).then(t=>{e||ce(t)},()=>{e||ce(null)}),()=>{e=!0}},[oe,ne,me]);const de=o.useMemo(()=>me&&se?se:c(oe),[me,se,oe]),pe=o.useMemo(()=>function(e){const t=new Set;if(void 0===e)return t;for(const o of Array.isArray(e)?e:[e])if("number"!=typeof o)for(const e of o.split(",")){const o=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!o)continue;const n=Number(o[1]),r=void 0===o[2]?n:Number(o[2]);for(let e=Math.min(n,r);e<=Math.max(n,r);e+=1)t.add(e)}else Number.isFinite(o)&&t.add(Math.trunc(o));return t}(A),[A]),ue=o.useRef(void 0);o.useEffect(()=>()=>clearTimeout(ue.current),[]);const fe=o.useRef(null),ge=J??te.copy,xe=O??te.copied,he=Q??te.raw,be=/*@__PURE__*/["mp-code__button inline-flex shrink-0 cursor-pointer items-center gap-1 border-0","rounded-mp-xs bg-transparent px-1.5 py-1","text-(--mp-code-dim) hover:text-(--mp-code-fg) hover:bg-(--mp-code-hover)",f,"transition-[color,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),ye=g(z)?"string"==typeof z?z:void 0:ne??te.label,ve=T&&(C||F||R||g(z));return t("div",{ref:Y,"data-mp-size":Z,"data-mp-code-theme":M,"data-mp-code-wrap":E?"true":void 0,className:["mp-code rounded-mp-md flex min-w-0 flex-col overflow-hidden","border-(--mp-code-rule) bg-(--mp-code-bg) text-(--mp-code-fg) border",V??""].filter(Boolean).join(" "),style:{"--mp-code-gutter":`${String(K+Math.max(de.length-1,0)).length}ch`,"--mp-code-pad-x":`${N(w[Z],ee,6)}px`,"--mp-code-pad-y":`${N(v[Z],ee,4)}px`,"--mp-code-bar-pad-y":`${N(j[Z],ee,2)}px`,...D?{fontFamily:D}:null,...void 0===I?null:{fontSize:m(I)},...void 0===q?null:{lineHeight:q},...W},...X,children:[ve?t("div",{className:["mp-code__bar border-(--mp-code-rule) flex min-w-0 items-center gap-1 border-b","px-[calc(var(--mp-code-pad-x)+2px)] py-(--mp-code-bar-pad-y)"].join(" "),children:[g(z)?e("span",{className:`mp-code__title min-w-0 truncate font-mono ${f}`,children:z}):null,C&&ne?e("span",{className:["mp-code__language text-(--mp-code-dim) min-w-0 truncate font-mono","tracking-wide uppercase select-none",f].join(" "),children:ne}):null,e("span",{className:"flex-1"}),R&&L?e("button",{type:"button","aria-pressed":re,"aria-label":he,title:he,onClick:()=>ie(e=>!e),className:[be,re?"bg-(--mp-code-hover) text-(--mp-code-fg)":""].filter(Boolean).join(" "),children:e(n,{icon:i,size:"1.15em"})}):null,F?t("button",{type:"button",onClick:async()=>{const e=await async function(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const o=document.execCommand("copy");return t.remove(),o}catch{return!1}}(oe);clearTimeout(ue.current),ae(e),ue.current=setTimeout(()=>ae(null),2e3),e&&U?.(oe)},className:be,children:[e(n,{icon:le?r:l,size:"1.15em"}),e("span",{children:null===le?ge:le?xe:te.copyFailed})]}):null]}):null,e("div",{className:`mp-code__body flex min-h-0 flex-col ${y[Z]}`,children:e("div",{role:"region","aria-label":ye,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=fe.current,o="undefined"==typeof window?null:window.getSelection();if(!t||!o)return;e.preventDefault();const n=document.createRange();n.selectNodeContents(t),o.removeAllRanges(),o.addRange(n)},className:["mp-code__scroller box-border min-h-0 overflow-auto py-(--mp-code-pad-y)","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),style:void 0===P?void 0:{maxHeight:m(P)},children:e("pre",{ref:fe,className:["m-0 bg-transparent p-0 font-mono",E?"w-full":"w-max min-w-full"].join(" "),children:de.map((t,n)=>{const r=K+n;return e("div",{className:"mp-code-line px-(--mp-code-pad-x)","data-line":H?r:void 0,"data-mark":pe.has(r)?"":void 0,"data-prompt":B&&t.length>0?B:void 0,children:e("code",{children:t.map((t,n)=>t.token?e("span",{className:t.token,children:t.text},n):e(o.Fragment,{children:t.text},n))})},n)})})})}),e("span",{"aria-live":"polite",className:x,children:null===le?"":le?xe:te.copyFailed})]})});

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export { MPCodeBlock, registerMPLanguage } from './MPCodeBlock.js';
+export type { MPCodeBlockProps, MPCodeBlockTheme } from './MPCodeBlock.js';

package/dist/components/code-block/index.js

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

package/dist/components/collapsible/MPCollapsible.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPCollapsibleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'onChange'> {
     /** Whether the panel is showing. Use with `onOpenChange` for a controlled one. */
     open?: boolean;
@@ -51,6 +51,17 @@ export interface MPCollapsibleProps extends Omit<React.ComponentPropsWithoutRef<
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the sheet is lifted, on MD3's own scale.
+     *
+     * It moves the **tone** as well as the shadow, because Material pairs the two:
+     * a level-2 surface is `surface-container` under a level-2 shadow, and a prop
+     * that only cast a shadow would raise this into a surface the specification
+     * has no name for. Given a level, `variant` is left holding only its hairline.
+     *
+     * Left unset, `variant` decides — and `variant="elevated"` is this at `1`.
+     */
+    elevation?: MPElevation;
     /**
      * The room inside, and the type scale of the header and the body.
      * @default 'md'