material-plus-ui 1.0.0 → 1.1.0

package/dist/components/floating-action-button/MPFloatingActionButton.d.ts

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import type { MPColor, MPCorner, MPPosition, MPSize } from '../../types';
+/**
+ * The three containers MD3 gives a floating button, and the reason there are not
+ * five of them.
+ *
+ * - `tonal` is the specification's own default: the accent *container* under its
+ *   own ink, which is `primary-container` on `on-primary-container` before any
+ *   colour is chosen.
+ * - `filled` is the accent itself, for the one screen where the button has to
+ *   carry more weight than the content behind it.
+ * - `elevated` is MD3's *surface* FAB: a neutral container with the accent as
+ *   the glyph, for a button floating over something colourful enough that a
+ *   tonal one has nothing quiet to sit on.
+ *
+ * `outlined` and `text` are absent because a floating button *is* its container.
+ * A hairline disc over a scrolling page is a shape with the page moving through
+ * it, and a text one is a glyph with nothing to press.
+ */
+export type MPFloatingActionButtonVariant = 'filled' | 'tonal' | 'elevated';
+export interface MPFloatingActionButtonProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+    /**
+     * The glyph.
+     *
+     * Wrap it in an [MPIcon](../display/icon) when it needs a size of its own;
+     * passed bare it is drawn at the rung's own glyph size.
+     */
+    icon?: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "a floating button with no
+     * `aria-label`" is a defect that ships precisely because the control looks
+     * finished without one. With `extended` this is also the word written on the
+     * button, so the two can never say different things.
+     */
+    label: string;
+    /**
+     * Writes `label` beside the glyph, which turns the disc into a stadium — MD3's
+     * extended floating button, for the one action a screen is about.
+     * @default false
+     */
+    extended?: boolean;
+    /**
+     * Which container it paints.
+     * @default 'tonal'
+     */
+    variant?: MPFloatingActionButtonVariant;
+    /**
+     * Which accent family it reads. Not an arbitrary colour: to change what
+     * `primary` *is*, set the token.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The button's size. `md` is MD3's own 56dp; `xs` and `xl` are the
+     * specification's small and large floating buttons at 40 and 96dp.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * How it sits in the page. `fixed` — the default, against the `static`
+     * everything else in this library defaults to — is what a floating button *is*:
+     * held against a corner of the window whatever the page under it does.
+     *
+     * `absolute` pins it to the nearest positioned ancestor instead, which is what
+     * a button floating over a card or a map wants. `static` puts it back in the
+     * flow — drawn as `position: relative`, because the state layer still needs
+     * something to fill.
+     * @default 'fixed'
+     */
+    position?: MPPosition;
+    /**
+     * Which corner it is pinned to. Logical, so `bottom-end` is bottom-left under
+     * RTL. No effect while `position` is `static`.
+     * @default 'bottom-end'
+     */
+    corner?: MPCorner;
+    /**
+     * How far in from both edges, as a CSS length or a number of pixels. MD3's own
+     * is 16dp.
+     * @default 16
+     */
+    offset?: number | string;
+    /** Unavailable. Keeps its place, stops answering, and stops floating. */
+    disabled?: boolean;
+    /**
+     * `button`, not `submit`. A native button defaults to submitting the form
+     * around it.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+}
+/**
+ * The one action a screen is about, floating over it.
+ *
+ * MD3's floating action button, drawn from the specification's own component
+ * tokens: the three containers, the three sizes with the corner each of them
+ * takes, level-3 elevation, the state layer, and the extended shape. The default
+ * — `tonal` on `primary` — is the specification's default FAB exactly:
+ * `primary-container` under `on-primary-container`.
+ *
+ * ## Why there is no speed dial
+ *
+ * A floating button that fans out into three or four smaller ones is a Material
+ * **2** pattern, and MD3 dropped it. It was never good: the actions are
+ * unlabelled discs in the corner of the screen, they cover the content the
+ * reader was looking at, and a fan of buttons that claims `role="menu"` without
+ * the keyboard contract of one is worse for a keyboard reader than something
+ * that never claimed anything.
+ *
+ * When there genuinely are several actions, they belong in an
+ * [MPMenu](../inputs/menu) — which *is* a menu, with the roving focus, the
+ * typeahead and the escape behaviour that word promises — opened from this
+ * button.
+ *
+ * ## Why it is `fixed` by default
+ *
+ * Because that is the component. Everything else in this library sits in the
+ * page's flow and would be wrong to take out of it; this one is defined by not
+ * being part of the page. `position="absolute"` is the escape hatch for a button
+ * that belongs to a region rather than to the window, and `static` puts it back
+ * in the flow entirely.
+ */
+export declare const MPFloatingActionButton: React.ForwardRefExoticComponent<MPFloatingActionButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/floating-action-button/MPFloatingActionButton.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as a}from"@base-ui/react/button";import{accentSlots as n}from"../../internal/accent";import{MPStateLayer as s}from"../../internal/StateLayer";import{hasContent as i}from"../../internal/scale";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},l={xs:"size-10",sm:"size-12",md:"size-14",lg:"size-18",xl:"size-24"},m={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},p={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},f={xs:24,sm:24,md:24,lg:30,xl:36},d={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},c={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},u={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},x={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=o.forwardRef(function({icon:o,label:b,extended:g=!1,variant:h="tonal",color:y="primary",size:_="md",position:w="fixed",corner:v="bottom-end",offset:z=16,disabled:$=!1,type:j="button",className:k,style:N,...B},A){return t(a,{ref:A,type:j,disabled:$,"aria-label":b,"data-mp-size":_,"data-mp-variant":h,className:["mp-fab group inline-flex shrink-0 items-center justify-center","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,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",p[_],g?`${m[_]} ${c[_]} ${d[_]}`:l[_],$?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${r[h]} shadow-mp-3`,"static"===w?"relative":`${u[w]} ${x[v]}`,k??""].filter(Boolean).join(" "),style:{...n(y),"--_mp-fab-offset":"number"==typeof z?`${z}px`:z,...N},...B,children:[$?null:e(s,{}),i(o)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:f[_],height:f[_]},children:o}):null,g?e("span",{className:"relative truncate",children:b}):null]})});

package/dist/components/floating-action-button/index.d.ts

@@ -0,0 +1,2 @@
+export { MPFloatingActionButton } from './MPFloatingActionButton';
+export type { MPFloatingActionButtonProps, MPFloatingActionButtonVariant } from './MPFloatingActionButton';

package/dist/components/floating-action-button/index.js

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

package/dist/components/grid/MPGrid.d.ts

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPResponsive } from '../../types';
+/**
+ * How a row divides the space its items did not take.
+ *
+ * CSS's own words rather than a set of this library's, because this is CSS's own
+ * question: a grid is the one component whose props are asking the layout engine
+ * for something directly, and inventing a second spelling for `space-between`
+ * would mean a caller has to translate what they already know.
+ */
+export type MPGridJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+/** How items sit against each other across a row. */
+export type MPGridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** The same, for one item overriding the row it is in. */
+export type MPGridAlignSelf = MPGridAlign | 'auto';
+export interface MPGridProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many columns a row is divided into. Every `span` and every `offset`
+     * inside is read against this number, so `columns={24}` makes `span={12}` a
+     * half rather than a full width.
+     *
+     * MD3's own layout grid is `{ compact: 4, medium: 12 }`.
+     * @default 12
+     */
+    columns?: MPResponsive<number>;
+    /**
+     * The gutter between items, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     *
+     * MD3's own gutter is `{ compact: 4, medium: 6 }` — 16dp on a phone, 24dp from
+     * a medium window up.
+     * @default 4
+     */
+    spacing?: MPResponsive<number>;
+    /** The gutter between rows only. Falls back to `spacing`. */
+    rowSpacing?: MPResponsive<number>;
+    /** The gutter between columns only. Falls back to `spacing`. */
+    columnSpacing?: MPResponsive<number>;
+    /** How a row distributes the width its items did not use. */
+    justifyContent?: MPGridJustify;
+    /**
+     * How items sit against each other across a row.
+     * @default 'stretch'
+     */
+    alignItems?: MPGridAlign;
+    /** Where the rows sit when the grid is shorter than the box holding it. */
+    alignContent?: MPGridJustify | 'stretch';
+    /**
+     * Whether a row that runs out of columns continues on the next one. Turned
+     * off, the grid is one row that overflows — which is what a horizontally
+     * scrolling strip wants and nothing else does.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<ul />}`. Base UI's own escape hatch, so it behaves here exactly as
+     * it does on every Base UI primitive.
+     */
+    render?: useRender.RenderProp;
+    /** The `MPGridItem`s. */
+    children?: React.ReactNode;
+}
+export interface MPGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many of the grid's columns the item takes. Read against the grid's
+     * `columns`, so `span={6}` is half of the default twelve and a quarter of
+     * `columns={24}`.
+     *
+     * Responsive: `span={{ compact: 12, medium: 6, expanded: 4 }}` is full width on
+     * a phone, half from 600dp and a third from 840dp. Each entry applies from its
+     * own window class up, so two of them usually describe a whole layout.
+     *
+     * A span wider than the row is clamped to the row rather than overflowing.
+     * @default the grid's full width
+     */
+    span?: MPResponsive<number>;
+    /**
+     * Columns left empty *before* the item — space pushed in ahead of it, not an
+     * absolute position in the row. First in a twelve-column row, `offset={4}` with
+     * `span={4}` is the middle third; after an item that already took four columns,
+     * the same offset skips four more and lands on the last third.
+     *
+     * Responsive in the same way `span` is.
+     * @default 0
+     */
+    offset?: MPResponsive<number>;
+    /** Overrides the row's `alignItems` for this item alone. */
+    alignSelf?: MPGridAlignSelf;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<article />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Material's layout grid: a row divided into columns, and items that take some
+ * of them.
+ *
+ * MD3 describes a page as a number of columns with a gutter between them, and
+ * describes how that number changes with the **window size class** rather than
+ * with a pixel width — four columns in a compact window, twelve from medium up.
+ * That is what this component is, and it is why `span` and `columns` take
+ * `{ compact, medium, expanded, large, extra-large }` rather than a set of
+ * breakpoints of the library's own invention. See `MPWindowClass` for why those
+ * are not Tailwind's four.
+ *
+ * ## Why the widths are real CSS and not utilities
+ *
+ * They cannot be utilities. A column is
+ * `(100% + gutter) * span / columns - gutter`, it has to be recomputed at four
+ * widths, and it is the width of an element whose column count is declared on its
+ * *parent* — none of which Tailwind can spell, because Tailwind finds classes by
+ * scanning source text and `columns` is a number the caller picks at runtime.
+ *
+ * So the arithmetic is written once, in `src/styles.css`, and the per-instance
+ * numbers arrive as inline `--_mp-*` slots — exactly how a `color` reaches a
+ * background in this library. The count and the two gutters are declared on the
+ * grid and *inherited* by the items rather than passed through a React context,
+ * which is not a shortcut: a media query can change an inherited custom property
+ * without React hearing about it, so the column count an item lays itself out
+ * against is always the one that is actually on screen. A context would have to
+ * re-render the subtree at every window class to say the same thing.
+ *
+ * ## Why a grid paints nothing
+ *
+ * No `variant`, no `color`, no padding. A grid is not a surface — it is the
+ * arrangement of the surfaces inside it — and the moment it draws a sheet of its
+ * own it stops being usable as the outermost thing on a page. Wrap it in an
+ * [MPBox](./box) or an [MPCard](./card) when the sheet is wanted, and in an
+ * [MPContainer](./container) when what is wanted is the page margin.
+ *
+ * Nesting is an `MPGrid` inside an `MPGridItem`, not a grid that is also an item:
+ * the inner grid redeclares the column count for its own subtree while the item
+ * around it keeps the width the outer grid gave it.
+ */
+export declare const MPGrid: React.ForwardRefExoticComponent<MPGridProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One cell of an `MPGrid`.
+ *
+ * It is a width and nothing else — no surface, no padding, no typography. What
+ * goes inside brings its own, which is the whole reason a cell and an
+ * [MPBox](./box) are two components: wrapping something in a layout must not
+ * change how it looks, and a cell that drew a sheet would make `span` a visual
+ * decision.
+ *
+ * The column count it divides by is inherited from the grid as a custom
+ * property, so an item with no `MPGrid` above it falls back to twelve rather than
+ * breaking. It will still be a plain block in a plain parent, which is not a
+ * layout — always wrap.
+ */
+export declare const MPGridItem: React.ForwardRefExoticComponent<MPGridItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/MPGrid.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const n=["compact","medium","expanded","large","extra-large"];function r(e,t,r){const a=function(e){return null==e?{}:"object"==typeof e?e:{compact:e}}(t),s={};for(const t of n){const n=a[t];void 0!==n&&(s[`--_mp-${e}-${t}`]=r(n))}return s}function a(e,t){return null==e?t:"object"==typeof e?{compact:t,...e}:e}function s(e){return String(Math.max(1,Math.round(e)))}function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(0,Math.round(e)))}function i(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const l={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},f={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},u={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},p={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=e.forwardRef(function({columns:e,spacing:n,rowSpacing:o,columnSpacing:c,justifyContent:p,alignItems:d,alignContent:m,wrap:y=!0,render:g,className:h,style:x,children:b,...j},w){return t({render:g,ref:w,props:{className:["mp-grid flex",y?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",p?l[p]:"",d?f[d]:"",m?u[m]:"",h??""].filter(Boolean).join(" "),style:{...r("cols",a(e,12),s),...r("gap-x",a(c??n,4),i),...r("gap-y",a(o??n,4),i),...x},children:b,...j}})});export const MPGridItem=e.forwardRef(function({span:e,offset:n,alignSelf:a,render:s,className:i,style:l,children:f,...u},d){return t({render:s,ref:d,props:{className:["mp-grid-item",a?p[a]:"",i??""].filter(Boolean).join(" "),style:{...r("span",e,o),...r("offset",n,c),...l},children:f,...u}})});

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

@@ -0,0 +1,2 @@
+export { MPGrid, MPGridItem } from './MPGrid';
+export type { MPGridAlign, MPGridAlignSelf, MPGridItemProps, MPGridJustify, MPGridProps } from './MPGrid';

package/dist/components/grid/index.js

@@ -0,0 +1 @@
+export{MPGrid,MPGridItem}from"./MPGrid";

package/dist/components/highlight/MPHighlight.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as t}from"../../internal/accent";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border border-(--_mp-accent) bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function l(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function a(e,n,t){const r=n>0?e[n-1]:"",o=t<e.length?e[t]:"";return!i.test(r)&&!i.test(o)}function c(e,n,t,r){n.lastIndex=0;const o=[];let i,l=0;for(;null!==(i=n.exec(e));){if(""===i[0]){n.lastIndex+=1;continue}const c=i.index,s=c+i[0].length;t&&!a(e,c,s)||(c>l&&o.push(e.slice(l,c)),o.push(r(i[0],String(c))),l=s)}return 0===o.length?e:(l<e.length&&o.push(e.slice(l)),o)}function s(e,t,r,o){if("string"==typeof e)return c(e,t,r,o);if("number"==typeof e)return c(String(e),t,r,o);if(Array.isArray(e))return n.Children.map(e,e=>s(e,t,r,o));if(n.isValidElement(e)){const i=e.props.children;return void 0===i||"function"==typeof i?e:n.cloneElement(e,void 0,s(i,t,r,o))}return e}export const MPHighlight=n.forwardRef(function({query:i,variant:a="tonal",color:c="tertiary",caseSensitive:u=!1,wholeWord:m=!1,underline:f=!1,weight:p,className:d,style:g,children:h,...x},b){const y=n.useMemo(()=>function(e,n){if(e instanceof RegExp)return e.global?e:new RegExp(e.source,`${e.flags}g`);const t=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===t.length?null:new RegExp(t.map(l).join("|"),n?"gu":"giu")}(i,u),[i,u]),_=["rounded-mp-xs -mx-0.5 px-0.5","box-decoration-clone",r[a],f?"underline decoration-2 underline-offset-2":"",p?o[p]:""].filter(Boolean).join(" "),j=y?s(h,y,m,(n,t)=>e("mark",{className:_,children:n},t)):h;return e("span",{ref:b,className:["mp-highlight",d??""].filter(Boolean).join(" "),style:{...t(c),...g},...x,children:j})});
+import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as t}from"../../internal/accent";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border border-(--_mp-accent) bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function l(e){return e.replace(/[-.*+?^${}()|[\]\\]/g,"\\$&")}function a(e,n,t){const r=n>0?e[n-1]:"",o=t<e.length?e[t]:"";return!i.test(r)&&!i.test(o)}function c(e,n,t,r){n.lastIndex=0;const o=[];let i,l=0;for(;null!==(i=n.exec(e));){if(""===i[0]){n.lastIndex+=1;continue}const c=i.index,s=c+i[0].length;t&&!a(e,c,s)||(c>l&&o.push(e.slice(l,c)),o.push(r(i[0],String(c))),l=s)}return 0===o.length?e:(l<e.length&&o.push(e.slice(l)),o)}function s(e,t,r,o){if("string"==typeof e)return c(e,t,r,o);if("number"==typeof e)return c(String(e),t,r,o);if(Array.isArray(e))return n.Children.map(e,e=>s(e,t,r,o));if(n.isValidElement(e)){const i=e.props.children;return void 0===i||"function"==typeof i?e:n.cloneElement(e,void 0,s(i,t,r,o))}return e}export const MPHighlight=n.forwardRef(function({query:i,variant:a="tonal",color:c="tertiary",caseSensitive:u=!1,wholeWord:f=!1,underline:m=!1,weight:p,className:g,style:d,children:h,...x},b){const y=i instanceof RegExp?`re ${i.source} ${i.flags}`:Array.isArray(i)?`a ${i.join("\0")}`:`s ${i}`,_=n.useMemo(()=>function(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const t=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===t.length?null:new RegExp(t.map(l).join("|"),n?"gu":"giu")}(i,u),[y,u]),$=["rounded-mp-xs -mx-0.5 px-0.5","box-decoration-clone",r[a],m?"underline decoration-2 underline-offset-2":"",p?o[p]:""].filter(Boolean).join(" "),j=n.useMemo(()=>_?s(h,_,f,(n,t)=>e("mark",{className:$,children:n},t)):h,[h,_,f,$]);return e("span",{ref:b,className:["mp-highlight",g??""].filter(Boolean).join(" "),style:{...t(c),...d},...x,children:j})});

package/dist/components/list/MPList.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent";import{CONTROL_GAP as l,hasContent as a,PROSE_TEXT as s,SHEET_PAD_X as c}from"../../internal/scale";import{MPStateLayer as d}from"../../internal/StateLayer";import{CONTAINER_SURFACE as m}from"../../internal/surface";const p=t.createContext({size:"md",color:"primary",dividers:!1}),u={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},f={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},x={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=t.forwardRef(function({variant:r="outlined",size:n="md",color:l="primary",dividers:a=!1,render:s,className:c,style:d,children:u,...f},x){const h=t.useMemo(()=>({size:n,color:l,dividers:a}),[n,l,a]),v=["mp-list rounded-mp-md flex flex-col",m[r],"text-mp-on-surface",a?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",c??""].filter(Boolean).join(" "),b=i({render:s??e("ul",{}),ref:x,props:{role:"list","data-mp-size":n,"data-mp-variant":r,className:v,style:{...o(l),...d},children:u,...f}});return e(p.Provider,{value:h,children:b})});export const MPListItem=t.forwardRef(function({startIcon:i,endIcon:o,description:m,action:h,href:v,selected:b=!1,disabled:y=!1,className:N,children:g,onClick:j,...k},w){const{size:z,dividers:C}=t.useContext(p),B=Boolean(j||v)&&!y,I=c[z],L=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",I,u[z],l[z],s[z],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",C?"":x[z],y?"text-mp-on-surface/38 cursor-default":b?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",B?["cursor-pointer 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(" "):"",B&&b?"bg-(--_mp-accent-container)":""].filter(Boolean).join(" "),M=r(n,{children:[B?e(d,{}):null,a(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[a(g)?e("span",{className:"truncate",children:g}):null,a(m)?e("span",{className:["truncate",f[z],b?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:m}):null]}),a(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:w,"data-selected":b||void 0,className:["flex w-full items-center",N??""].filter(Boolean).join(" "),...k,children:[B&&v?e("a",{href:v,className:L,"aria-current":b?"page":void 0,onClick:j,children:M}):B?e("button",{type:"button",className:L,"aria-current":!!b||void 0,onClick:j,children:M}):e("div",{className:L,"aria-disabled":y||void 0,children:M}),a(h)?e("div",{className:`flex shrink-0 items-center ${I}`,children:h}):null]})});
+import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent";import{CONTROL_GAP as l,hasContent as s,PROSE_TEXT as a,SHEET_PAD_X as d}from"../../internal/scale";import{MPStateLayer as c}from"../../internal/StateLayer";import{CONTAINER_SURFACE as m}from"../../internal/surface";const p=t.createContext({size:"md",color:"primary",dividers:!1}),u={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},f={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},x={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=t.forwardRef(function({variant:r="outlined",size:n="md",color:l="primary",dividers:s=!1,render:a,className:d,style:c,children:u,...f},x){const h=t.useMemo(()=>({size:n,color:l,dividers:s}),[n,l,s]),v=["mp-list rounded-mp-md flex flex-col",m[r],"text-mp-on-surface",s?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",d??""].filter(Boolean).join(" "),b=i({render:a??e("ul",{}),ref:x,props:{role:"list","data-mp-size":n,"data-mp-variant":r,className:v,style:{...o(l),...c},children:u,...f}});return e(p.Provider,{value:h,children:b})});export const MPListItem=t.forwardRef(function({startIcon:i,endIcon:o,description:m,action:h,href:v,selected:b=!1,disabled:y=!1,className:N,children:g,onClick:j,...k},w){const{size:z,dividers:B}=t.useContext(p),C=Boolean(j||v)&&!y,I=d[z],L=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",I,u[z],l[z],a[z],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",B?"":x[z],y?"text-mp-on-surface/38 cursor-default":b?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",C?["cursor-pointer appearance-none border-0",b?"":"bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "):""].filter(Boolean).join(" "),M=r(n,{children:[C?e(c,{}):null,s(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[s(g)?e("span",{className:"truncate",children:g}):null,s(m)?e("span",{className:["truncate",f[z],b?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:m}):null]}),s(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:w,"data-selected":b||void 0,className:["flex w-full items-center",N??""].filter(Boolean).join(" "),...k,children:[C&&v?e("a",{href:v,className:L,"aria-current":b?"page":void 0,onClick:j,children:M}):C?e("button",{type:"button",className:L,"aria-current":!!b||void 0,onClick:j,children:M}):e("div",{className:L,"aria-disabled":y||void 0,children:M}),s(h)?e("div",{className:`flex shrink-0 items-center ${I}`,children:h}):null]})});

package/dist/components/menu/MPMenu.d.ts

@@ -78,6 +78,15 @@ export interface MPMenuItemProps {
     href?: string;
     /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
     target?: string;
+    /**
+     * The link's relationship to the page. Ignored without `href`.
+     *
+     * Left unset, a `target="_blank"` row gets `noopener noreferrer` — the pair
+     * that stops the opened page reaching back through `window.opener`. Setting
+     * it replaces that rather than adding to it, so a row that needs `nofollow`
+     * should say `rel="noopener noreferrer nofollow"`.
+     */
+    rel?: string;
     /** Content before the label — an icon, a swatch, an avatar. */
     startIcon?: React.ReactNode;
     /** Content after the label, before any `shortcut`. */
@@ -160,7 +169,7 @@ export type MPMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
  * cannot be copied, and tells a screen reader the wrong thing about every one of
  * them.
  */
-export declare function MPMenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
+export declare function MPMenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the column a `startIcon` would. */
 export declare function MPMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */

package/dist/components/menu/MPMenu.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon";import{CheckIcon as o,ChevronRightIcon as s}from"../../constants/icons";import{MPMenuContext as i}from"../../internal/menu";import{accentSlots as c}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{CONTROL_ICON as m,META_TEXT as u,hasContent as p}from"../../internal/scale";import{FADE as h,PORTAL_LAYER as f}from"../../internal/surface";const x=["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",h].join(" "),b={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},g={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},N={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},v={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function C(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",b[e],g[e],N[e],v[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function y(){return e(d,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const k="relative flex shrink-0 items-center justify-center";function M({children:t,description:a}){return p(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${u}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function O({shortcut:n}){return p(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${u}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:o,startIcon:s,endIcon:c,shortcut:d,description:m,color:u,closeOnClick:h=!0,disabled:f=!1,label:x,children:b,className:g,style:N}){const{size:v}=t.useContext(i),P=n(t.Fragment,{children:[e(y,{}),p(s)?e("span",{className:`${k} text-mp-on-surface-variant`,children:s}):null,e(M,{description:m,children:b}),p(c)?e("span",{className:`${k} text-mp-on-surface-variant`,children:c}):null,e(O,{shortcut:d})]}),I=u?{"--_mp-accent":`var(--_mp-color-${u})`}:void 0,$=I||N?{...I,...N}:void 0;return void 0!==r?e(a.LinkItem,{href:r,target:o,label:x,closeOnClick:h,onClick:l,className:C(v,Boolean(u),g),style:$,children:P}):e(a.Item,{disabled:f,label:x,closeOnClick:h,onClick:l,className:C(v,Boolean(u),g),style:$,children:P})}export function MPMenuCheckboxItem({checked:l,defaultChecked:s,onCheckedChange:c,endIcon:d,shortcut:u,description:h,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:N,className:v,style:P}){const{size:I}=t.useContext(i),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:s,onCheckedChange:e=>c?.(e),disabled:b,label:g,closeOnClick:x,className:C(I,Boolean(f),v),style:$||P?{...$,...P}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[I]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:o,size:m[I]})})}),e(M,{description:h,children:N}),p(d)?e("span",{className:`${k} text-mp-on-surface-variant`,children:d}):null,e(O,{shortcut:u})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:o,className:s}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:s,children:o})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:o,description:s,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:b}){const{size:g}=t.useContext(i),N=c?{"--_mp-accent":`var(--_mp-color-${c})`}:void 0;return n(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:C(g,Boolean(c),x),style:N||b?{...N,...b}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(M,{description:s,children:f}),p(r)?e("span",{className:`${k} text-mp-on-surface-variant`,children:r}):null,e(O,{shortcut:o})]})}export function MPMenuGroup({label:l,children:r,className:o}){const{size:s}=t.useContext(i);return n(a.Group,{className:o,children:[p(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${g[s]} ${u}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:o,disabled:d=!1,side:u="right",sideOffset:h=0,children:b,className:g,style:N}){const{size:v,color:M}=t.useContext(i);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:d,className:C(v,!1),children:[e(y,{}),p(o)?e("span",{className:`${k} text-mp-on-surface-variant`,children:o}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${k} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:s,size:m[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:f,side:u,sideOffset:h,align:"start",children:e(a.Popup,{className:[x,g??""].filter(Boolean).join(" "),style:{...c(M),...N},children:b})})})]})}export function MPMenu({size:l="md",color:r="primary",trigger:o,open:s,defaultOpen:d,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:b=!0,openOnHover:g=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:y,children:k}){const M=t.useMemo(()=>({size:l,color:r}),[l,r]);return e(i.Provider,{value:M,children:n(a.Root,{open:s,defaultOpen:d,onOpenChange:e=>m?.(e),modal:b,loopFocus:N,disabled:v,children:[o?e(a.Trigger,{render:o,openOnHover:g,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:f,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":l,className:[x,C??""].filter(Boolean).join(" "),style:{...c(r),...y},children:k})})})]})})}export function MPContextMenu({size:a="md",color:r="primary",content:o,children:s,open:d,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:b,style:g}){const N=t.useMemo(()=>({size:a,color:r}),[a,r]);return e(i.Provider,{value:N,children:n(l.Root,{open:d,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:s}),e(l.Portal,{children:e(l.Positioner,{className:f,children:e(l.Popup,{"data-mp-size":a,className:[x,b??""].filter(Boolean).join(" "),style:{...c(r),...g},children:o})})})]})})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon";import{CheckIcon as o,ChevronRightIcon as s}from"../../constants/icons";import{MPMenuContext as i}from"../../internal/menu";import{accentSlots as c}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{CONTROL_ICON as m,META_TEXT as u,hasContent as p}from"../../internal/scale";import{FADE as h,PORTAL_LAYER as f}from"../../internal/surface";const x=["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",h].join(" "),b={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},g={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},N={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},v={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function C(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",b[e],g[e],N[e],v[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function y(){return e(d,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const k="relative flex shrink-0 items-center justify-center";function M({children:t,description:a}){return p(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${u}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function O({shortcut:n}){return p(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${u}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:o,rel:s,startIcon:c,endIcon:d,shortcut:m,description:u,color:h,closeOnClick:f=!0,disabled:x=!1,label:b,children:g,className:N,style:v}){const{size:P}=t.useContext(i),I=n(t.Fragment,{children:[e(y,{}),p(c)?e("span",{className:`${k} text-mp-on-surface-variant`,children:c}):null,e(M,{description:u,children:g}),p(d)?e("span",{className:`${k} text-mp-on-surface-variant`,children:d}):null,e(O,{shortcut:m})]}),$=h?{"--_mp-accent":`var(--_mp-color-${h})`}:void 0,z=$||v?{...$,...v}:void 0;return void 0===r||x?e(a.Item,{disabled:x,label:b,closeOnClick:f,onClick:l,className:C(P,Boolean(h),N),style:z,children:I}):e(a.LinkItem,{href:r,target:o,rel:s??("_blank"===o?"noopener noreferrer":void 0),label:b,closeOnClick:f,onClick:l,className:C(P,Boolean(h),N),style:z,children:I})}export function MPMenuCheckboxItem({checked:l,defaultChecked:s,onCheckedChange:c,endIcon:d,shortcut:u,description:h,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:N,className:v,style:P}){const{size:I}=t.useContext(i),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:s,onCheckedChange:e=>c?.(e),disabled:b,label:g,closeOnClick:x,className:C(I,Boolean(f),v),style:$||P?{...$,...P}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[I]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:o,size:m[I]})})}),e(M,{description:h,children:N}),p(d)?e("span",{className:`${k} text-mp-on-surface-variant`,children:d}):null,e(O,{shortcut:u})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:o,className:s}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:s,children:o})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:o,description:s,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:b}){const{size:g}=t.useContext(i),N=c?{"--_mp-accent":`var(--_mp-color-${c})`}:void 0;return n(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:C(g,Boolean(c),x),style:N||b?{...N,...b}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(M,{description:s,children:f}),p(r)?e("span",{className:`${k} text-mp-on-surface-variant`,children:r}):null,e(O,{shortcut:o})]})}export function MPMenuGroup({label:l,children:r,className:o}){const{size:s}=t.useContext(i);return n(a.Group,{className:o,children:[p(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${g[s]} ${u}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:o,disabled:d=!1,side:u="right",sideOffset:h=0,children:b,className:g,style:N}){const{size:v,color:M}=t.useContext(i);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:d,className:C(v,!1),children:[e(y,{}),p(o)?e("span",{className:`${k} text-mp-on-surface-variant`,children:o}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${k} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:s,size:m[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:f,side:u,sideOffset:h,align:"start",children:e(a.Popup,{className:[x,g??""].filter(Boolean).join(" "),style:{...c(M),...N},children:b})})})]})}export function MPMenu({size:l="md",color:r="primary",trigger:o,open:s,defaultOpen:d,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:b=!0,openOnHover:g=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:y,children:k}){const M=t.useMemo(()=>({size:l,color:r}),[l,r]);return e(i.Provider,{value:M,children:n(a.Root,{open:s,defaultOpen:d,onOpenChange:e=>m?.(e),modal:b,loopFocus:N,disabled:v,children:[o?e(a.Trigger,{render:o,openOnHover:g,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:f,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":l,className:[x,C??""].filter(Boolean).join(" "),style:{...c(r),...y},children:k})})})]})})}export function MPContextMenu({size:a="md",color:r="primary",content:o,children:s,open:d,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:b,style:g}){const N=t.useMemo(()=>({size:a,color:r}),[a,r]);return e(i.Provider,{value:N,children:n(l.Root,{open:d,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:s}),e(l.Portal,{children:e(l.Positioner,{className:f,children:e(l.Popup,{"data-mp-size":a,className:[x,b??""].filter(Boolean).join(" "),style:{...c(r),...g},children:o})})})]})})}

package/dist/components/number-field/MPNumberField.d.ts

@@ -60,13 +60,31 @@ export interface MPNumberFieldProps extends MPStyleProps {
     incrementLabel?: string;
     /** The accessible name of the decrement button. @default 'Decrease' */
     decrementLabel?: string;
-    /** Label in the outline's notch. */
+    /**
+     * Label for the field, drawn in the outline's notch and — while the field is
+     * empty, unfocused and has nothing standing at its start — resting on the
+     * field's own line where a placeholder would be. See `floatingLabel`.
+     */
     label?: React.ReactNode;
+    /**
+     * Whether the label rests on the field's line while there is nothing to make
+     * room for, and rises into the notch on focus or on the first digit.
+     *
+     * `false` pins it in the notch, which is the one thing a floating label costs:
+     * a field with a label and one without no longer sit at the same height in a
+     * form until both are filled. A `startIcon` — or `steppers="split"`, whose
+     * minus sits in the same place — holds the label up regardless.
+     * @default true
+     */
+    floatingLabel?: boolean;
     /** The line under the control. Replaced by `errorMessage` when there is one. */
     description?: React.ReactNode;
     /** The message under the control, which also turns the field over. */
     errorMessage?: React.ReactNode;
-    /** Placeholder shown while the field is empty. */
+    /**
+     * Placeholder shown while the field is empty. With a floating label it is held
+     * back until the label has risen out of its way.
+     */
     placeholder?: string;
     /** Content placed before the number — a currency mark, a unit, an icon. */
     startIcon?: React.ReactNode;
@@ -96,4 +114,4 @@ export interface MPNumberFieldProps extends MPStyleProps {
  * owns the parsing against the locale, the clamping, the press-and-hold repeat on
  * the steppers, and the hidden input that submits with a form.
  */
-export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id }: MPNumberFieldProps): React.JSX.Element;
+export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id }: MPNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/MPNumberField.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{NumberField as l}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons";import{MPFieldLabel as o,MPFieldOutline as p}from"../../internal/FieldOutline";import{MPStateLayer as m}from"../../internal/StateLayer";import{MPSupportingText as d}from"../../internal/SupportingText";import{CONTROL_ICON as c,PROSE_TEXT as u,hasContent as f}from"../../internal/scale";const h={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:x,defaultValue:g,onValueChange:b,onValueCommitted:N,min:v,max:z,step:j,largeStep:y,smallStep:w,allowWheelScrub:S=!1,format:I,locale:V,steppers:q="end",incrementLabel:C="Increase",decrementLabel:M="Decrease",label:k,description:F,errorMessage:L,placeholder:O,startIcon:W,size:D="md",fullWidth:P=!1,required:R=!1,disabled:$=!1,readOnly:_=!1,name:B,id:G}){const T=f(L),A=h[D],E=r.useId(),H=G??`mp-number-field-${B??E}`,J="none"!==q&&!_&&!$,K=["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",A.stepper].join(" "),Q=a(l.Decrement,{"aria-label":M,className:K,children:[e(m,{}),e(t,{icon:s,size:c[D]})]}),U=a(l.Increment,{"aria-label":C,className:K,children:[e(m,{}),e(t,{icon:i,size:c[D]})]});return a(n.Root,{className:["mp-number-field group flex-col align-top",P?"flex w-full":"inline-flex w-fit"].join(" "),disabled:$,invalid:T,"data-mp-size":D,children:[e(l.Root,{id:H,name:B,className:"contents",value:x,defaultValue:g,onValueChange:e=>b?.(e),onValueCommitted:e=>N?.(e),min:v,max:z,step:j,largeStep:y,smallStep:w,allowWheelScrub:S,format:I,locale:V,disabled:$,readOnly:_,required:R,children:a("div",{className:"relative w-full",children:[a(l.Group,{className:["flex w-full items-center gap-2",A.height,J&&"end"===q?`${A.padding} pe-1`:J&&"split"===q?"px-1":A.padding].join(" "),children:[J&&"split"===q?Q:null,W?e("span",{className:["flex shrink-0 items-center",$?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:W}):null,e(l.Input,{placeholder:O,className:["w-full min-w-0 flex-1 tabular-nums",u[D],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",J&&"split"===q?"text-center":""].filter(Boolean).join(" ")}),J&&"end"===q?a("span",{className:"flex shrink-0 items-center",children:[Q,U]}):null,J&&"split"===q?U:null]}),e(p,{label:k,required:R}),f(k)?e(o,{size:D,label:k,required:R,htmlFor:H}):null]})}),e(d,{description:F,errorMessage:L,className:A.padding})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{NumberField as n}from"@base-ui/react/number-field";import{Field as r}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons";import{MPFieldLabel as o,MPFieldOutline as p,useFloatingLabel as d}from"../../internal/FieldOutline";import{MPStateLayer as m}from"../../internal/StateLayer";import{MPSupportingText as c}from"../../internal/SupportingText";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale";const x={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:g,defaultValue:b,onValueChange:v,onValueCommitted:N,min:z,max:j,step:y,largeStep:S,smallStep:w,allowWheelScrub:I=!1,format:V,locale:k,steppers:q="end",incrementLabel:C="Increase",decrementLabel:L="Decrease",label:M,floatingLabel:F=!0,description:O,errorMessage:P,placeholder:W,startIcon:D,size:R="md",fullWidth:_=!1,required:B=!1,disabled:G=!1,readOnly:T=!1,name:$,id:A}){const E=h(P),H=x[R],J=l.useId(),K=A??J,Q="none"!==q&&!T&&!G,[U,X]=l.useState(b??null),Y=void 0===g?U:g,{shrunk:Z,focusProps:ee}=d({floating:F&&h(M),filled:null!==Y,pinned:!!D||Q&&"split"===q}),ae=["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",H.stepper].join(" "),le=a(n.Decrement,{"aria-label":L,className:ae,children:[e(m,{}),e(t,{icon:s,size:u[R]})]}),ne=a(n.Increment,{"aria-label":C,className:ae,children:[e(m,{}),e(t,{icon:i,size:u[R]})]});return a(r.Root,{className:["mp-number-field group flex-col align-top",_?"flex w-full":"inline-flex w-fit"].join(" "),disabled:G,invalid:E,"data-mp-size":R,...ee,children:[e(n.Root,{id:K,name:$,className:"contents",value:g,defaultValue:b,onValueChange:e=>{X(e),v?.(e)},onValueCommitted:e=>N?.(e),min:z,max:j,step:y,largeStep:S,smallStep:w,allowWheelScrub:I,format:V,locale:k,disabled:G,readOnly:T,required:B,children:a("div",{className:"relative w-full",children:[a(n.Group,{className:["flex w-full items-center gap-2",H.height,Q&&"end"===q?`${H.padding} pe-1`:Q&&"split"===q?"px-1":H.padding].join(" "),children:[Q&&"split"===q?le:null,D?e("span",{className:["flex shrink-0 items-center",G?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null,e(n.Input,{placeholder:Z?W:void 0,className:["w-full min-w-0 flex-1 tabular-nums",f[R],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",Q&&"split"===q?"text-center":""].filter(Boolean).join(" ")}),Q&&"end"===q?a("span",{className:"flex shrink-0 items-center",children:[le,ne]}):null,Q&&"split"===q?ne:null]}),e(p,{label:M,required:B,notched:Z}),h(M)?e(o,{size:R,label:M,required:B,htmlFor:K,shrunk:Z}):null]})}),e(c,{description:O,errorMessage:P,className:H.padding})]})}

package/dist/components/pagination/MPPagination.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { type MPMessages } from '../../internal/i18n';
+import type { MPColor, MPStyleProps } from '../../types';
+/** The words the row says on its own behalf. */
+export type MPPaginationLabels = MPMessages['pagination'];
+export interface MPPaginationProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'onChange'> {
+    /**
+     * How many pages there are. Fewer than two and the whole control renders
+     * nothing — one page is not a set of pages, and a row holding a lone disabled
+     * "1" is a control advertising that it has nothing to do.
+     */
+    count: number;
+    /** The current page, 1-based. Use with `onPageChange` for a controlled row. */
+    page?: number;
+    /**
+     * Which page starts current, for an uncontrolled row.
+     * @default 1
+     */
+    defaultPage?: number;
+    /** Called with the page that was chosen. */
+    onPageChange?: (page: number) => void;
+    /**
+     * How many pages are always shown on either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * How many pages are always shown at each end, whatever page is current. `0`
+     * drops the first and last page from the row, leaving only the window.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Shows the two steppers that jump to the first and last page.
+     * @default false
+     */
+    showEdges?: boolean;
+    /**
+     * Shows the two steppers that move by one page.
+     * @default true
+     */
+    showArrows?: boolean;
+    /**
+     * Which accent family the current page is filled with.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Unavailable. Every cell in the row stops answering. */
+    disabled?: boolean;
+    /**
+     * The address of a page, which turns every number in the row into a real link.
+     *
+     * Without it the row is buttons, and a crawler cannot press one — so a paged
+     * list of articles, products or search results exists for a reader and stops
+     * at page one for everything else. With it the numbers are `<a href>`, the two
+     * steppers carry `rel="prev"` and `rel="next"`, and the browser's own
+     * behaviour comes back: open in a new tab, copy the address, see where a press
+     * is going before making it.
+     *
+     * `onPageChange` still fires and the navigation is still cancelled first, so a
+     * client-side router keeps the page it already has.
+     */
+    getPageHref?: (page: number) => string;
+    /**
+     * Which language the row names itself in — a BCP 47 tag such as `ko`, `pt-BR`
+     * or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * Nothing here is ever drawn, so without it a Korean page reads its pages out
+     * in English.
+     */
+    locale?: string;
+    /** Overrides for the words themselves. They win over the translation. */
+    labels?: Partial<MPPaginationLabels>;
+}
+/**
+ * A row of pages, one of which is the one being read.
+ *
+ * Material has no pagination component, so what is Material here is everything
+ * *around* the decision: the cells are pills at the library's own control
+ * heights, the current one is filled with the accent under its own ink, the rest
+ * are the quiet `text` treatment, and every one of them carries the state layer
+ * the specification uses in place of a hover colour.
+ *
+ * The current page is the one thing the row has to say without being read, which
+ * is why it is the only cell that is filled. Nine filled cells in a row would say
+ * that all nine are the primary action.
+ *
+ * ## The markup, and why it is that
+ *
+ * A `<nav>` around a `<ul>`: a named landmark a screen reader can skip, holding
+ * a list whose length says how far the pages go, with `aria-current="page"`
+ * marking where the reader is. The ellipsis is a `<span>` rather than a disabled
+ * button — it is not a control that happens to be unavailable, it is
+ * punctuation — and it is `aria-hidden`, because "horizontal ellipsis" read out
+ * between two numbers is noise.
+ *
+ * ## Why it builds its own cells
+ *
+ * For the reason [MPSegmentedButton](../inputs/segmented-button) does: a page
+ * cell is square-ish and grows only for a long number, which is not a shape
+ * [MPButton](../inputs/button) has — a button is a pill with inline padding
+ * proportional to its height, and nine of those in a row is a very long row. The
+ * heights, the type scale and the state layer are the shared ones, so a `sm`
+ * pagination still lines up with a `sm` button beside it.
+ */
+export declare const MPPagination: React.ForwardRefExoticComponent<MPPaginationProps & React.RefAttributes<HTMLElement>>;

package/dist/components/pagination/MPPagination.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as o}from"../../constants/icons";import{accentSlots as s}from"../../internal/accent";import{fillMessage as m}from"../../internal/i18n";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale";import{MPStateLayer as u}from"../../internal/StateLayer";import{CONTROL_ICON as f,CONTROL_TEXT as d}from"../../internal/scale";import{VISUALLY_HIDDEN as h}from"../../internal/visually-hidden";const g={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},x={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function b(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=t.forwardRef(function({count:y,page:v,defaultPage:M=1,onPageChange:w,siblingCount:N=1,boundaryCount:j=1,showEdges:P=!1,showArrows:C=!0,size:S="md",color:K="primary",fullWidth:_=!1,disabled:k=!1,getPageHref:z,locale:$,labels:A,className:B,style:D,...E},H){const I=c($),L=p("pagination",I,A),[R,W]=t.useState(M),q=void 0!==v,F=Math.min(Math.max(v??R,1),Math.max(y,1));if(y<2)return null;const G=function(e,n,t,a){const i=b(1,Math.min(a,e)),r=b(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...b(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(y,F,N,j),J=F<=1,O=F>=y,Q=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||z&&!w||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),y);n!==F&&(q||W(n),w?.(n))})(n))},T=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",g[S],d[S],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),U=(t,a,i,r,l,o,s)=>e("li",{className:"flex",children:!z||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:T(r,i),onClick:e=>Q(e,a),children:[i?null:e(u,{}),e("span",{className:"relative",children:o})]}):n("a",{href:z(a),rel:s,"aria-label":l,className:T(!1,!1),onClick:e=>Q(e,a),children:[e(u,{}),e("span",{className:"relative",children:o})]})},t),V=n=>e(a,{icon:n,size:f[S],className:"rtl:rotate-180"});return n("nav",{ref:H,"aria-label":L.label,"data-mp-size":S,className:["mp-pagination flex",_?"w-full justify-center":"",B??""].filter(Boolean).join(" "),style:{...s(K),...D},...E,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${x[S]}`,children:[P?U("first",1,k||J,!1,L.first,V(l)):null,C?U("previous",F-1,k||J,!1,L.previous,V(i),"prev"):null,G.map((n,t)=>"number"==typeof n?U(`slot-${t}`,n,k,n===F,m(L.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",g[S],d[S]].join(" "),children:"…"},`slot-${t}`)),C?U("next",F+1,k||O,!1,L.next,V(r),"next"):null,P?U("last",y,k||O,!1,L.last,V(o)):null]}),e("span",{className:h,"aria-live":"polite",children:m(L.status,{page:String(F),total:String(y)})})]})});

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

@@ -0,0 +1,2 @@
+export { MPPagination } from './MPPagination';
+export type { MPPaginationLabels, MPPaginationProps } from './MPPagination';

package/dist/components/pagination/index.js

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