material-plus-ui 1.5.0 → 1.7.0

package/dist/internal/ChartChrome.d.ts

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import { type ChartValue } from './chart.js';
+import type { MPChartCategory, MPChartLegend, MPChartTooltip, MPChartTooltipItem, MPSide, MPSize } from '../types.js';
+/**
+ * Everything a chart draws that is not the data.
+ *
+ * The legend, the hover panel, the spoken readout, the table behind the picture
+ * and the arrangement that holds them — the parts a pie chart and a line chart
+ * have in common, which is all of them except the plot.
+ *
+ * A file of its own for the reason `internal/density.ts` has one: the split
+ * stylesheet is cut along the import graph a **file** at a time, so a pie chart
+ * reaching into `ChartFrame.tsx` for a legend would carry the axes, the scales
+ * and the column hit-testing it has no use for. It arrives here instead, and
+ * the cartesian frame is one more consumer rather than the owner.
+ */
+/** What every framed chart takes, whatever it draws. */
+export interface ChartBaseProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'title'> {
+    /**
+     * How tall the drawing is. A number is pixels; a string is any CSS length.
+     * Defaults to the `size` ladder.
+     *
+     * The axis labels are drawn **inside** this rather than under it, so a card
+     * sized to the chart is a card the chart fits in.
+     */
+    height?: number | string;
+    /**
+     * How numbers are written everywhere they appear — the axis, the panel, the
+     * table. `Intl.NumberFormat` options, the same prop `MPStatistic` takes.
+     *
+     * Without it a tick is compacted past ten thousand, because four labels of
+     * seven digits is not an axis, it is a column of numbers beside a picture.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Which language the chart's own words and dates are in. */
+    locale?: string;
+    /**
+     * What the chart is a chart **of**. Read out in place of the drawing, and
+     * used as the caption of the table behind it.
+     */
+    label?: string;
+    /**
+     * The legend. Drawn from two series up and left off below that, because a
+     * legend with one swatch in it restates the title.
+     */
+    legend?: boolean | MPChartLegend;
+    /**
+     * What the pointer uncovers. On by default: a chart drawn in a browser is
+     * interactive, and a reader who wants March's number should not have to
+     * measure it against a gridline.
+     */
+    tooltip?: boolean | MPChartTooltip;
+    /** What to draw when there is nothing to draw. */
+    empty?: React.ReactNode;
+    /** @default 'md' */
+    size?: MPSize;
+}
+export interface Visibility {
+    visible: boolean[];
+    hovered: number | null;
+    toggle: (index: number) => void;
+    setHovered: (index: number | null) => void;
+}
+/**
+ * Which entries are drawn, and which one the legend is being pointed at.
+ *
+ * Keyed by an entry's place in the array as it was passed, which is what stops
+ * a hidden one renumbering those after it. Colours come off that same index, so
+ * hiding Europe leaves Asia exactly the colour it already was.
+ *
+ * It takes anything that can say whether it starts hidden rather than a series
+ * specifically, because a pie's entries are its slices.
+ */
+export declare function useVisibility(series: readonly {
+    hidden?: boolean;
+}[]): Visibility;
+export declare const LEGEND_SIDE: {
+    readonly top: "flex-col-reverse";
+    readonly bottom: "flex-col";
+    readonly left: "flex-row-reverse";
+    readonly right: "flex-row";
+};
+interface LegendProps {
+    /**
+     * What each entry is called. Names rather than series, because a pie's
+     * entries are its slices — the entity a legend identifies is not always a
+     * series, and a legend that insisted on one would be a legend a pie has to
+     * fake a series array for.
+     */
+    names: readonly (string | undefined)[];
+    colors: readonly string[];
+    options: MPChartLegend;
+    visibility: Visibility;
+    size: MPSize;
+    values?: readonly (string | undefined)[];
+    swatch?: (index: number, color: string) => React.ReactNode;
+}
+/**
+ * The identity channel that does not depend on being able to see a colour.
+ *
+ * A swatch and a word, and the swatch is the only thing on the row wearing the
+ * series' colour — the name beside it stays in ordinary ink. That is the rule
+ * for every piece of text in a chart: a label written in the mark's colour is a
+ * label the reader has to decode before they can read it, and it fails outright
+ * in forced colours.
+ *
+ * Interactive by default, and each entry is a real `<button>` with
+ * `aria-pressed`. A legend that filters is a control, and a control that is a
+ * `<div>` with an `onClick` is one a keyboard cannot reach.
+ */
+export declare function ChartLegend({ names, colors, options, visibility, size, values, swatch }: LegendProps): React.JSX.Element;
+interface PanelProps {
+    heading?: React.ReactNode;
+    items: readonly MPChartTooltipItem[];
+    x: number;
+    y: number;
+    flip: boolean;
+    size: MPSize;
+}
+/**
+ * What the pointer uncovers, as a panel.
+ *
+ * `pointer-events-none` is the load-bearing part: a panel that could be hovered
+ * would sit under the pointer, take the hover from the plot, and close itself —
+ * then reopen, then close, for as long as the reader held still.
+ */
+export declare function ChartTooltipPanel({ heading, items, x, y, flip, size }: PanelProps): React.JSX.Element;
+/**
+ * The same reading, said out loud instead of drawn.
+ *
+ * It cannot be the panel above, and that is a constraint rather than a
+ * preference: the panel is drawn inside the element carrying `role="img"`, and
+ * `img` is a leaf role — everything under it is cut out of the accessibility
+ * tree, so a live region in there announces to nobody. This is a **sibling** of
+ * the picture, clipped rather than painted, and it is what makes the arrow keys
+ * mean something to a reader who is not looking at the plot.
+ *
+ * Empty when nothing is active, so leaving the chart clears what was said
+ * rather than leaving the last column standing in the region forever.
+ */
+export declare function ChartStatus({ heading, items }: {
+    heading?: React.ReactNode;
+    items: readonly MPChartTooltipItem[];
+}): React.JSX.Element;
+interface TableProps {
+    id: string;
+    caption: string;
+    corner: React.ReactNode;
+    categories: readonly MPChartCategory[];
+    /** One per column, beside the category's own. */
+    names: readonly (string | undefined)[];
+    values: readonly (readonly ChartValue[])[];
+    format: (value: number) => string;
+    locale: string | undefined;
+    empty: string;
+}
+/**
+ * The numbers behind the picture, as a grid.
+ *
+ * Clipped rather than drawn. Every chart here ships one and it is what
+ * `aria-describedby` points at, so a reader who cannot see the plot has the
+ * data itself rather than a summary of it — and a reader who can see the plot
+ * is not made to scroll past a table they did not ask for.
+ *
+ * Rendered rather than built on demand, because it is the description of a
+ * focusable element: an `aria-describedby` pointing at an id that does not
+ * exist yet is an `aria-describedby` pointing at nothing.
+ */
+export declare function ChartTable({ id, caption, corner, categories, names, values, format, locale, empty }: TableProps): React.JSX.Element;
+export interface ChartShellProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'color' | 'title'> {
+    size: MPSize;
+    /** The element the drawing is measured in and focused on. */
+    plotRef: React.RefObject<HTMLDivElement | null>;
+    /** Its accessible name, already resolved — never an optional prop passed straight through. */
+    name: string;
+    /** The id of the table describing it, or nothing when there is nothing to describe. */
+    describedBy?: string;
+    /** Whether there is anything here to walk. A chart with no data is not a tab stop. */
+    interactive: boolean;
+    height?: number | string;
+    /** The pointer and keyboard handlers, which are the plot's own business. */
+    plotProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** The drawing: an `<svg>`, or the empty state. */
+    children: React.ReactNode;
+    /** Floated over the drawing. */
+    tooltip?: React.ReactNode;
+    legend?: React.ReactNode;
+    legendSide?: MPSide;
+    status: {
+        heading?: React.ReactNode;
+        items: readonly MPChartTooltipItem[];
+    };
+    table?: React.ReactNode;
+}
+/**
+ * The arrangement: a plot, a legend on one of its four sides, a readout beside
+ * it and the table underneath.
+ *
+ * The readout is a **sibling** of the plot rather than a child, and that is a
+ * constraint rather than a layout preference — see `ChartStatus`. Putting the
+ * arrangement here is what keeps the two frames from disagreeing about it: the
+ * one place this is easy to get wrong is the one place it must not be.
+ */
+export declare function ChartShell({ size, plotRef, name, describedBy, interactive, height, plotProps, children, tooltip, legend, legendSide, status, table, className, ...rest }: ChartShellProps): React.JSX.Element;
+export {};

package/dist/internal/ChartChrome.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{VISUALLY_HIDDEN as a}from"./visually-hidden.js";import{cssLength as r}from"./length.js";import{PLOT_HEIGHT as i,formatCategory as s}from"./chart.js";export function useVisibility(e){const[t,l]=n.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[a,r]=n.useState(null),i=n.useCallback(e=>{l(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]);return{visible:e.map((e,l)=>!t.has(l)),hovered:a,toggle:i,setHovered:r}}export const LEGEND_SIDE={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"};const o={start:"justify-start",center:"justify-center",end:"justify-end"};export function ChartLegend({names:n,colors:a,options:r,visibility:i,size:s,values:c,swatch:m}){const d=!1!==r.interactive,u="xs"===s||"sm"===s?"text-mp-label-small":"text-mp-label-medium";return e("ul",{className:["mp-chart__legend flex flex-wrap items-center gap-x-4 gap-y-1",o[r.align??"center"],u].join(" "),children:n.map((n,r)=>{const s=i.visible[r],o=!s||null!==i.hovered&&i.hovered!==r,u=n??`${r+1}`,p=l(t,{children:[e("span",{className:"shrink-0","aria-hidden":"true",children:m?m(r,a[r]):e("span",{className:"block size-2.5 rounded-mp-full",style:{background:a[r]}})}),e("span",{className:"text-mp-on-surface-variant truncate",children:u}),c?.[r]?e("span",{className:"text-mp-on-surface tabular-nums",children:c[r]}):null]});return e("li",{className:"min-w-0",children:d?e("button",{type:"button","aria-pressed":s,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(r),onBlur:()=>i.setHovered(null),className:["flex min-w-0 cursor-pointer items-center gap-1.5 rounded-mp-xs","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2",o?"opacity-40":"",s?"":"line-through"].filter(Boolean).join(" "),children:p}):e("span",{className:"flex min-w-0 items-center gap-1.5 "+(o?"opacity-40":""),children:p})},r)})})}export function ChartTooltipPanel({heading:t,items:n,x:a,y:r,flip:i,size:s}){return l("div",{"aria-hidden":"true",className:["mp-chart__tooltip pointer-events-none absolute z-10 min-w-24 max-w-64","bg-mp-surface-container-high shadow-mp-2 rounded-mp-xs px-2.5 py-2","xs"===s||"sm"===s?"text-mp-label-small":"text-mp-label-medium"].join(" "),style:{left:a,top:r,transform:`translate(${i?"calc(-100% - 12px)":"12px"}, -50%)`},children:[null==t||""===t?null:e("div",{className:"text-mp-on-surface-variant mb-1 truncate",children:t}),e("ul",{className:"flex flex-col gap-0.5",children:n.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"block size-2 shrink-0 rounded-mp-full",style:{background:t.color}}),t.name?e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:t.name}):null,e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:t.label??t.formatted})]},t.seriesIndex))})]})}export function ChartStatus({heading:r,items:i}){return e("span",{role:"status","aria-live":"polite",className:a,children:0===i.length?null:l(t,{children:[null==r||""===r?null:l(t,{children:[r,", "]}),i.map((e,t)=>l(n.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}export function ChartTable({id:t,caption:n,corner:r,categories:i,names:o,values:c,format:m,locale:d,empty:u}){return e("div",{id:t,className:a,children:l("table",{children:[e("caption",{children:n}),e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:r}),o.map((t,l)=>e("th",{scope:"col",children:t??l+1},l))]})}),e("tbody",{children:0===i.length?e("tr",{children:e("td",{colSpan:o.length+1,children:u})}):i.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:s(t,d)}),o.map((t,l)=>{const a=c[l]?.[n];return e("td",{children:a?.label??(null===a?.value||void 0===a?u:m(a.value))},l)})]},n))})]})})}export function ChartShell({size:t,plotRef:n,name:a,describedBy:s,interactive:o,height:c,plotProps:m,children:d,tooltip:u,legend:p,legendSide:h="bottom",status:f,table:x,className:v,...b}){return l("div",{"data-mp-size":t,className:["mp-chart flex min-w-0 flex-col gap-3",v??""].filter(Boolean).join(" "),...b,children:[l("div",{className:`flex min-w-0 gap-3 ${LEGEND_SIDE[h]}`,children:[l("div",{ref:n,role:"img",tabIndex:o?0:void 0,"aria-label":a,"aria-describedby":s,...m,className:["mp-chart__plot rounded-mp-xs relative min-w-0 flex-1","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),style:{height:r(c)??i[t]},children:[d,u]}),p]}),e(ChartStatus,{heading:f.heading,items:f.items}),x]})}

package/dist/internal/ChartFrame.d.ts

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { type ChartBaseProps } from './ChartChrome.js';
+import { BandScale, ChartValue, PlotBox, ValueScale } from './chart.js';
+import type { MPChartAxis, MPChartCategory, MPChartSeries, MPChartTooltipItem, MPSize } from '../types.js';
+/**
+ * The frame a chart with two axes is drawn in.
+ *
+ * The plot box once the axes have taken their bands, the value scale, the band
+ * scale, the grid and the crosshair — everything that is identical on a line
+ * chart and a bar chart. What is left for a chart to do is its marks, and it is
+ * handed **pixels** to draw them at: a component that had to know which way
+ * round the axes run is a component that gets it wrong when somebody turns it
+ * sideways.
+ *
+ * The parts a chart with no axes also needs — the legend, the hover panel, the
+ * spoken readout, the table and the arrangement holding them — are in
+ * `ChartChrome.tsx`, so a pie chart can have them without carrying any of this.
+ */
+/** What a chart with two axes adds. */
+export interface CartesianChartProps extends ChartBaseProps {
+    /** The series, in the order their colours are handed out. */
+    series: readonly MPChartSeries[];
+    /** The category axis' labels. Points may carry their own `x` instead. */
+    categories?: readonly MPChartCategory[];
+    /** The category axis. */
+    xAxis?: MPChartAxis;
+    /** The value axis. */
+    yAxis?: MPChartAxis;
+}
+/**
+ * One mark on a plot whose marks are not arranged in columns.
+ *
+ * A scatter has no shared categories, so there is no column for a pointer to be
+ * inside and nothing for a crosshair to be dropped through — the only question
+ * a reader can be asking is "which of these dots". A chart that says so hands
+ * the frame its marks and gets the nearest-mark search, the arrow keys and the
+ * panel's anchoring for free.
+ */
+export interface ChartMark {
+    /** Its series' place in the array as it was passed — where its colour is from. */
+    series: number;
+    /** Its own place within that series. */
+    index: number;
+    /** Its centre, in pixels from the chart's top-left. */
+    x: number;
+    y: number;
+    /** How big it is. Widens the hit target, so a bubble is easier to hit than a dot. */
+    r: number;
+    /**
+     * Its half-width and half-height, where the mark is a box rather than a disc.
+     *
+     * A span on a timeline is two hundred pixels of bar whose centre a pointer may
+     * never go near, so measuring to that centre would hand the row's short bar a
+     * hover the reader is plainly not making. Given these, the pointer is tested
+     * against the mark's **body**.
+     */
+    rx?: number;
+    ry?: number;
+}
+/**
+ * Where everything goes — the half of the context settled before the pointer is
+ * consulted.
+ *
+ * Split out because the marks are built from it: a chart hands the frame a
+ * builder, the frame runs it on the layout, and only then is there a list for
+ * the pointer to be nearest to. A builder that could read what is active would
+ * be reading a value that does not exist yet.
+ */
+export interface CartesianLayout {
+    plot: PlotBox;
+    /** Every series unpacked, in the order it was passed. */
+    values: readonly (readonly ChartValue[])[];
+    /** Which of them are drawn. */
+    visible: readonly boolean[];
+    /** And what colour each one is, by its original index. */
+    colors: readonly string[];
+    scale: ValueScale;
+    band: BandScale;
+    /** Bars run along the category axis rather than across it. */
+    horizontal: boolean;
+    /** Where a value sits along the value axis, in pixels from the chart's edge. */
+    valuePx: (value: number) => number;
+    /** Where a category's centre sits along the category axis, as an offset along it. */
+    categoryPx: (index: number) => number;
+    /** The two combined, whichever way round the chart runs. */
+    point: (index: number, value: number) => {
+        x: number;
+        y: number;
+    };
+    /**
+     * The scale the **category** axis runs on, where `xScale` made it a second
+     * value axis. `null` on every chart whose categories are columns.
+     */
+    categoryScale: ValueScale | null;
+    /**
+     * Where a value sits along the category axis, in pixels from the chart's
+     * edge — the same absolute reckoning `valuePx` uses, and deliberately not
+     * `categoryPx`'s offset-along-the-axis. Only meaningful with `xScale="value"`.
+     */
+    categoryValuePx: (value: number) => number;
+    /** Where the baseline sits along the value axis. */
+    zeroPx: number;
+    categories: readonly MPChartCategory[];
+    format: (value: number) => string;
+    size: MPSize;
+}
+/** The layout, plus everything the pointer decides. */
+export interface CartesianContext extends CartesianLayout {
+    /** The series the legend is being hovered over, if any. */
+    hovered: number | null;
+    /** The category under the pointer, if any. */
+    activeIndex: number | null;
+    /** Every mark, where the chart supplied a builder. Empty otherwise. */
+    marks: readonly ChartMark[];
+    /** The one the pointer is on, or the one the arrow keys walked to. */
+    activeMark: ChartMark | null;
+}
+interface CartesianFrameProps extends CartesianChartProps {
+    /**
+     * Makes the category axis a second **value** axis instead of a row of
+     * columns. What a scatter needs and what nothing else does.
+     * @default 'band'
+     */
+    xScale?: 'band' | 'value';
+    /**
+     * Builds every mark on the plot, which swaps the frame's column hit-testing
+     * for a nearest-mark search and makes the arrow keys walk this list. The
+     * result comes back on the context, so the marks are laid out once and drawn
+     * from the same array they are tested against.
+     */
+    marks?: (layout: CartesianLayout) => readonly ChartMark[];
+    /**
+     * How far off a mark the pointer still counts as on it, in pixels, added to
+     * the mark's own radius. An 8px dot is not a hit target.
+     * @default 24
+     */
+    markRadius?: number;
+    /** The legend's swatch, where a chart's marks are not all the same shape. */
+    swatch?: (index: number, color: string) => React.ReactNode;
+    /**
+     * The value axis' scale, already worked out.
+     *
+     * For an axis that is not a count. `valueScale` rounds to 1-2-5-10, which is
+     * the family a reader does arithmetic in and exactly the wrong one for an
+     * instant — sixty, twenty-four, seven, twelve. A chart whose axis has its own
+     * arithmetic builds the scale itself and hands it over.
+     */
+    scale?: ValueScale;
+    /**
+     * The table behind the picture, for a chart whose data are not a grid of
+     * series against categories.
+     *
+     * The default one is right wherever the marks *are* that grid, and useless
+     * where they are not: a timeline's rows are the category axis and its marks
+     * are spans within them, so the frame has no cell to look an answer up in.
+     */
+    table?: (id: string) => React.ReactNode;
+    /** What the panel says about a mark whose value is not a cell of the grid. */
+    markTooltip?: (mark: ChartMark) => {
+        heading: React.ReactNode;
+        items: readonly MPChartTooltipItem[];
+    } | null;
+    /** Bars, and only bars, run the other way. */
+    horizontal?: boolean;
+    /** The value axis measures totals rather than parts. */
+    stacked?: boolean;
+    /** A line chart may leave zero out; a bar chart may not. */
+    includeZero?: boolean;
+    /** How much of a band the marks take. Bars need room reserved; lines do not. */
+    bandRatio?: number;
+    /**
+     * Lines and areas sit **on** the category ticks; bars sit **between** them.
+     * The difference is one half-step, and getting it wrong is what leaves a line
+     * chart's first point floating a centimetre off the axis.
+     */
+    inset?: boolean;
+    /**
+     * Extra room at the **far end of the value axis**, for labels that ride the
+     * marks. The top of the plot on an upright chart and its right-hand edge on a
+     * horizontal one — a value label sits past the end of the mark, and which
+     * edge that is turns with the chart.
+     */
+    headroom?: number;
+    /**
+     * Room on **every** side, for marks drawn from their centre. `headroom` is
+     * not enough for those: a dot at the largest x hangs over the right edge and
+     * one at the smallest hangs over the value axis' own labels.
+     */
+    markInset?: number;
+    /** Draws the marks. */
+    children: (context: CartesianContext) => React.ReactNode;
+}
+/**
+ * The frame: two axes, a grid, a crosshair, a legend, a panel and the table.
+ */
+export declare function CartesianFrame({ series, categories, xAxis, yAxis, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, swatch, scale: givenScale, table: givenTable, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, className, style, children, ...rest }: CartesianFrameProps): React.JSX.Element;
+export {};

package/dist/internal/ChartFrame.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useMPElementSize as i}from"../hooks/useMPElementSize.js";import{useMPLocale as a,useMPMessages as n}from"./locale.js";import{useMPSize as o}from"./config.js";import{CHART as r}from"./messages/chart.js";import{TABLE as s}from"./messages/table.js";import{ChartLegend as h,ChartShell as c,ChartTable as d,ChartTooltipPanel as u,useVisibility as m}from"./ChartChrome.js";import{CHART_FONT_SIZE as x,MARKER_RADIUS as f,PLOT_HEIGHT as p,bandScale as g,categoryAt as y,categoryCount as v,categoryExtent as k,fitsLast as b,formatCategory as M,formatStatistic as w,seriesColor as z,seriesExtent as S,showsTick as P,textWidth as A,tickStride as C,toValues as j,truncate as B,valueScale as $}from"./chart.js";const R=[],W="var(--_mp-color-outline-variant)",F="var(--_mp-color-outline)",N="var(--_mp-color-on-surface-variant)";function T({plot:l,scale:i,horizontal:a,categoryPx:n,categoryScale:o,categoryValuePx:r,valuePx:s,tickTexts:h,categoryTexts:c,valueAxis:d,categoryAxis:u,fontSize:m,zeroPx:x}){const f=!1!==d?.grid&&!d?.hidden,p=!u?.hidden&&(u?.grid??null!==o),g=e=>o?r(o.ticks[e]):(a?l.top:l.left)+n(e),y=C(c.length,a?l.height:l.width,a?1.8*m:Math.max(...c.map(e=>A(e,m)),1)+12),v=C(i.ticks.length,a?l.width:l.height,a?Math.max(...h.map(e=>A(e,m)),1)+16:2*m),k=c.length>1?Math.abs(g(1)-g(0)):l.width,M=i.ticks.length>1?Math.abs(s(i.ticks[1])-s(i.ticks[0])):l.height,w=b(c.length,y,k,a?1.8*m:A(c[c.length-1]??"",m)),z=b(i.ticks.length,v,M,a?A(h[h.length-1]??"",m):1.6*m);return t("g",{className:"mp-chart__axes",children:[i.ticks.map((n,o)=>{const r=s(n),c=Math.abs(n)<1e-9&&i.min<0,u=!d?.hidden&&P(o,i.ticks.length,v,z);return t("g",{children:[f?e("line",a?{x1:r,x2:r,y1:l.top,y2:l.top+l.height,stroke:c?F:W,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:r,y2:r,stroke:c?F:W,strokeWidth:1}):null,u?e("text",{x:a?r:l.left-8,y:a?l.top+l.height+m+6:r,textAnchor:a?"middle":"end",dominantBaseline:a?"auto":"central",fill:N,fontSize:m,children:h[o]}):null]},`v${o}`)}),c.map((i,n)=>{const o=g(n),r=!u?.hidden&&P(n,c.length,y,w);return t("g",{children:[p?e("line",a?{x1:l.left,x2:l.left+l.width,y1:o,y2:o,stroke:W,strokeWidth:1}:{x1:o,x2:o,y1:l.top,y2:l.top+l.height,stroke:W,strokeWidth:1}):null,r?e("text",{x:a?l.left-8:o,y:a?o:l.top+l.height+m+6,textAnchor:a?"end":"middle",dominantBaseline:a?"central":"auto",fill:N,fontSize:m,children:i}):null]},`c${n}`)}),e("line",a?{x1:x,x2:x,y1:l.top,y2:l.top+l.height,stroke:F,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:x,y2:x,stroke:F,strokeWidth:1}),d?.label&&!d.hidden?e("text",{x:a?l.left+l.width/2:m,y:a?l.top+l.height+2*m+12:l.top+l.height/2,textAnchor:"middle",dominantBaseline:a?"auto":"central",fill:N,fontSize:m,transform:a?void 0:`rotate(-90 ${m} ${l.top+l.height/2})`,children:d.label}):null,u?.label&&!u.hidden?e("text",{x:a?m:l.left+l.width/2,y:a?l.top+l.height/2:l.top+l.height+2*m+12,textAnchor:"middle",dominantBaseline:a?"central":"auto",fill:N,fontSize:m,transform:a?`rotate(-90 ${m} ${l.top+l.height/2})`:void 0,children:u.label}):null]})}export function CartesianFrame({series:b,categories:P,xAxis:C,yAxis:W,horizontal:N=!1,stacked:_=!1,includeZero:E=!0,bandRatio:I=1,inset:V=!1,headroom:D=0,markInset:X=0,xScale:Y="band",marks:Z,markRadius:L=24,swatch:H,scale:K,table:U,markTooltip:q,height:G,format:J,locale:O,label:Q,legend:ee,tooltip:te,empty:le,size:ie,className:ae,style:ne,children:oe,...re}){const se=o(ie),he=a(O),ce=n(r,he),de=n(s,he),ue=l.useRef(null),me=i(ue),xe=me.width,fe=l.useId(),pe=m(b),[ge,ye]=l.useState(null),[ve,ke]=l.useState(null),[be,Me]=l.useState(null),we=l.useCallback(e=>w(e,he,J,!0),[J,he]),ze=l.useMemo(()=>j(b),[b]),Se=l.useMemo(()=>b.map((e,t)=>z(t,e.color)),[b]),Pe=l.useMemo(()=>b.map(e=>e.name),[b]),Ae=v(b),Ce=l.useMemo(()=>Array.from({length:Ae},(e,t)=>y(t,P,ze)),[Ae,P,ze]),je=ze.filter((e,t)=>pe.visible[t]),Be=S(je,_),$e=x[se],Re=W,We=C,Fe=K??$(Be,{min:Re?.min,max:Re?.max,tickCount:Re?.tickCount,includeZero:E}),Ne="value"===Y?k(je,P):null,Te="value"===Y?$(Ne,{min:We?.min,max:We?.max,tickCount:We?.tickCount,includeZero:!1}):null,_e=Fe.ticks.map((e,t)=>Re?.tickFormat?String(Re.tickFormat(e,t)):we(e)),Ee=Te?Te.ticks.map((e,t)=>We?.tickFormat?String(We.tickFormat(e,t)):w(e,he,void 0,!0)):Ce.map((e,t)=>We?.tickFormat?String(We.tickFormat(e,t)):M(e,he)),Ie=_e.reduce((e,t)=>Math.max(e,A(t,$e)),0),Ve=$e+6,De=Re?.hidden?0:Ie+10+(Re?.label?Ve:0),Xe=(xe-(N?0:De)-16)/Math.max(1,Ae),Ye=Te?Ee:N||Xe-6>=2.4*$e?Ee.map(e=>B(e,N?150:Xe-6,$e)):Ee,Ze=Ye.reduce((e,t)=>Math.max(e,A(t,$e)),0),Le=N?We?.hidden?0:Ze+10+(We?.label?Ve:0):De,He=N?Re?.hidden?0:$e+12+(Re?.label?Ve:0):We?.hidden?0:$e+12+(We?.label?Ve:0),Ke=(N?We:Re)?.thickness??Le,Ue=(N?Re:We)?.thickness??He,qe=(N?12+D:Math.max(8,Ze/2))+X,Ge=f[se]+4+(N?0:D)+X,Je="number"==typeof G?G:void 0===G?p[se]:me.height,Oe={left:Ke+X,top:Ge,width:Math.max(0,xe-Ke-X-qe),height:Math.max(0,Je-Ge-Ue-X)},Qe=N?Oe.height:Oe.width,et=g(V?Math.max(1,Ae-1):Ae,Qe,I),tt=l.useCallback(e=>V?Ae<=1?Qe/2:Qe*e/(Ae-1):et.centre(e),[V,Ae,Qe,et]),lt=l.useCallback(e=>N?Oe.left+Fe.fraction(e)*Oe.width:Oe.top+(1-Fe.fraction(e))*Oe.height,[N,Oe.left,Oe.top,Oe.width,Oe.height,Fe]),it=l.useCallback(e=>N?Oe.top+(1-(Te?.fraction(e)??0))*Oe.height:Oe.left+(Te?.fraction(e)??0)*Oe.width,[N,Oe.left,Oe.top,Oe.width,Oe.height,Te]),at=l.useCallback((e,t)=>N?{x:lt(t),y:Oe.top+tt(e)}:{x:Oe.left+tt(e),y:lt(t)},[N,lt,tt,Oe.left,Oe.top]),nt=lt(Math.min(Math.max(0,Fe.min),Fe.max)),ot={plot:Oe,values:ze,visible:pe.visible,colors:Se,scale:Fe,band:et,horizontal:N,valuePx:lt,categoryPx:tt,point:at,categoryScale:Te,categoryValuePx:it,zeroPx:nt,categories:Ce,format:we,size:se},rt=Z?Z(ot):R,st=!1===te?{mode:"none"}:!0===te||void 0===te?{}:te,ht=st.mode??(Z?"item":"index"),ct=null===ve?null:rt[ve]??null,dt=Z?ct?ct.index:null:ge,ut=Z?rt.length:Ae,mt=()=>{ye(null),ke(null),Me(null)},xt=e=>{const t=null===e?null:Math.min(ut-1,Math.max(0,e));Z?ke(t):ye(t)},ft=e=>{Me(null);xt(((Z?ve:ge)??(e>0?-1:ut))+e)},pt=null===dt?[]:b.flatMap((e,t)=>{if(!pe.visible[t]||ct&&ct.series!==t)return[];const l=ze[t]?.[dt];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??Se[t],value:l.value,formatted:we(l.value),label:l.label}]:[]}),gt=ct&&q?q(ct):null,yt=gt?gt.items:"item"===ht&&pt.length>1&&null!==be?[pt.reduce((e,t)=>Math.abs(lt(t.value??0)-be)<Math.abs(lt(e.value??0)-be)?t:e)]:pt,vt=gt?gt.heading:ct?M(ze[ct.series]?.[ct.index]?.x??P?.[ct.index]??ct.index,he):null===dt?void 0:M(Ce[dt]??dt,he),kt=ct?ct.x:N?lt(yt[0]?.value??0):Oe.left+tt(dt??0),bt=ct?ct.y:N?Oe.top+tt(dt??0):Oe.top+Oe.height/2,Mt=ct?(ct.x-Oe.left)/Math.max(1,Oe.width)>.6:(N?Fe.fraction(yt[0]?.value??0):tt(dt??0)/Math.max(1,Qe))>.6,wt=!1===ee?{interactive:!1}:!0===ee||void 0===ee?{}:ee,zt=!0===ee||!1!==ee&&b.length>1,St=wt.side??"bottom",Pt={...ot,hovered:pe.hovered,activeIndex:dt,marks:rt,activeMark:ct},At=0===Ae||null===Be||"value"===Y&&null===Ne;return e(c,{...re,size:se,className:ae,style:ne,plotRef:ue,name:Q??ce.label,describedBy:At?void 0:fe,interactive:!At,height:G,legendSide:St,plotProps:{onPointerMove:At||"none"===ht?void 0:e=>{Z?ke(((e,t)=>{const l=ue.current;if(!l||0===rt.length)return null;const i=l.getBoundingClientRect(),a=e-i.left,n=t-i.top;let o=null,r=1/0,s=1/0;return rt.forEach((e,t)=>{const l=Math.hypot(e.x-a,e.y-n),i=void 0===e.rx?Math.max(0,l-e.r):Math.hypot(Math.max(0,Math.abs(e.x-a)-e.rx),Math.max(0,Math.abs(e.y-n)-(e.ry??e.rx)));i<=L&&(i<r||i===r&&l<s)&&(r=i,s=l,o=t)}),o})(e.clientX,e.clientY)):ye(((e,t)=>{const l=ue.current;if(!l||0===Ae)return null;const i=l.getBoundingClientRect(),a=N?t-i.top-Oe.top:e-i.left-Oe.left;if(a<-et.step||a>Qe+et.step)return null;const n=V?Ae<=1?0:Math.round(a/Qe*(Ae-1)):Math.floor(a/et.step);return Math.min(Ae-1,Math.max(0,n))})(e.clientX,e.clientY)),"item"===ht&&Me(((e,t)=>{const l=ue.current;if(!l)return null;const i=l.getBoundingClientRect();return N?e-i.left:t-i.top})(e.clientX,e.clientY))},onPointerLeave:mt,onKeyDown:At||"none"===ht?void 0:e=>{const t=N?"ArrowDown":"ArrowRight",l=N?"ArrowUp":"ArrowLeft";if(e.key===t)ft(1);else if(e.key===l)ft(-1);else if("Home"===e.key)xt(0);else if("End"===e.key)xt(ut-1);else{if("Escape"!==e.key)return;mt()}e.preventDefault()},onBlur:mt},tooltip:null!==dt&&yt.length>0&&"none"!==ht?st.render?e("div",{"aria-hidden":"true",className:"pointer-events-none absolute z-10",style:{left:kt,top:bt,transform:`translate(${Mt?"calc(-100% - 12px)":"12px"}, -50%)`},children:st.render({index:dt,category:Ce[dt]??dt,items:yt})}):e(u,{heading:vt,items:yt,x:kt,y:bt,flip:Mt,size:se}):null,legend:zt?e(h,{names:Pe,colors:Se,options:wt,visibility:pe,size:se,swatch:H,values:wt.showValue&&null!==dt?b.map((e,t)=>{const l=ze[t]?.[dt]?.value;return null==l?void 0:we(l)}):void 0}):null,status:{heading:vt,items:yt},table:At?null:U?.(fe)??e(d,{id:fe,caption:Q??ce.table,corner:We?.label??ce.category,categories:Ce,names:Pe,values:ze,format:we,locale:he,empty:de.empty}),children:At?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:le??de.empty}):xe>0&&Je>0?t("svg",{width:xe,height:Je,viewBox:`0 0 ${xe} ${Je}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(T,{plot:Oe,scale:Fe,horizontal:N,categoryPx:tt,categoryScale:Te,categoryValuePx:it,valuePx:lt,tickTexts:_e,categoryTexts:Ye,valueAxis:Re,categoryAxis:We,fontSize:$e,zeroPx:nt}),null===dt||Z||"index"!==ht||!1===st.crosshair?null:(()=>{const t=tt(dt);return e("line",N?{x1:Oe.left,x2:Oe.left+Oe.width,y1:Oe.top+t,y2:Oe.top+t,stroke:F,strokeWidth:1}:{x1:Oe.left+t,x2:Oe.left+t,y1:Oe.top,y2:Oe.top+Oe.height,stroke:F,strokeWidth:1})})(),oe(Pt)]}):null})}

package/dist/internal/FieldOutline.d.ts

@@ -55,11 +55,20 @@ export interface MPFieldLabelProps extends MPFieldOutlineProps {
  * outline is `pointer-events-none` so that clicks land on the control
  * underneath, and a label inside it would stop being clickable.
  *
- * Resting, it is `pointer-events-none` instead — it is lying over the text the
- * caret goes into, and a click on it has to reach the control so the caret
- * lands where the pointer did. A `<label for>` would only have focused the
- * control, which puts the caret at the end of the text rather than under the
- * pointer.
+ * It is `pointer-events-none` in both states, and for a different reason in
+ * each. Resting, it is lying over the text the caret goes into, and a click on
+ * it has to reach the control so the caret lands where the pointer did. A
+ * `<label for>` would only have focused the control, which puts the caret at the
+ * end of the text rather than under the pointer.
+ *
+ * Shrunk, it is out of the way and could safely take a click. What it cannot do
+ * is take one *halfway*. The press focuses the control, the focus is what starts
+ * the label rising, and the label arrives under the pointer before the button
+ * comes back up: the press goes down on the control and up on the label, and a
+ * press whose two ends disagree is delivered to their nearest common ancestor
+ * rather than to either. The control never sees the click. That is what made a
+ * picker asked for without its glyph — `startIcon={null}`, which is the whole
+ * point of `floatingLabel` on a picker — impossible to open with a mouse.
  */
 export declare function MPFieldLabel({ size, label, required, htmlFor, shrunk, multiline }: MPFieldLabelProps): React.JSX.Element;
 export interface MPFloatingLabel {

package/dist/internal/FieldOutline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,Fragment as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";const i={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(o,a){return e(t,{children:[o,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:e=!1,notched:o=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 -top-[5px] m-0 min-w-0 px-2 pt-0","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].join(" "),children:t?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",o?"max-w-full px-1":"max-w-0 px-0"].join(" "),children:d(t,e)}):null})}export function MPFieldLabel({size:t,label:e,required:o=!1,htmlFor:p,shrunk:u=!0,multiline:l=!1}){return r(a.Label,{htmlFor:p,"data-mp-shrunk":u?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","absolute -translate-y-1/2 px-1 leading-none",i[t],u?"text-mp-body-small pointer-events-auto top-0 max-w-none":[n[t],"pointer-events-none max-w-[calc(100%-2rem)] truncate",l?s[t]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:d(e,o)})}export function useFloatingLabel({floating:r,filled:t,pinned:e=!1}){const[a,n]=o.useState(!1);return{shrunk:!r||t||a||e,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}
+import{jsx as r,Fragment as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";const i={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(e,a){return o(t,{children:[e,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:o=!1,notched:e=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 -top-[5px] m-0 min-w-0 px-2 pt-0","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].join(" "),children:t?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",e?"max-w-full px-1":"max-w-0 px-0"].join(" "),children:d(t,o)}):null})}export function MPFieldLabel({size:t,label:o,required:e=!1,htmlFor:p,shrunk:l=!0,multiline:u=!1}){return r(a.Label,{htmlFor:p,"data-mp-shrunk":l?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","pointer-events-none absolute -translate-y-1/2 px-1 leading-none",i[t],l?"text-mp-body-small top-0 max-w-none":[n[t],"max-w-[calc(100%-2rem)] truncate",u?s[t]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:d(o,e)})}export function useFloatingLabel({floating:r,filled:t,pinned:o=!1}){const[a,n]=e.useState(!1);return{shrunk:!r||t||a||o,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}

package/dist/internal/Picker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { MPPickerLabels } from './Calendar.js';
-import type { MPColor, MPSize, MPStyleProps } from '../types.js';
+import type { MPColor, MPControlEventProps, MPSize, MPStyleProps } from '../types.js';
 /**
  * The strings a trigger is held open by, kept across renders that did not
  * change what it could say.
@@ -25,6 +25,18 @@ import type { MPColor, MPSize, MPStyleProps } from '../types.js';
  * never a wrong answer.
  */
 export declare function useDisplaySamples(locale: string | undefined, options: Intl.DateTimeFormatOptions): string[];
+/**
+ * The popup's room, one track tighter than a control's.
+ *
+ * A calendar is already a grid of forty-two padded cells; giving the sheet
+ * around it a control's 16px as well would put 24px of nothing between the last
+ * column and the edge.
+ *
+ * Exported because `MPCalendar` draws the same grid on a surface of its own, and
+ * a standalone calendar sitting one track wider than the identical calendar in a
+ * picker's popup is the drift a shared table exists to prevent.
+ */
+export declare const POPUP_PAD: Record<MPSize, string>;
 /**
  * The props a picker takes from its shell rather than inventing.
  *
@@ -32,7 +44,7 @@ export declare function useDisplaySamples(locale: string | undefined, options: I
  * the rows a reader of the docs is actually looking at — every one of the four
  * pickers lists them, and they mean the same thing on all four.
  */
-export interface MPPickerShellProps extends MPStyleProps {
+export interface MPPickerShellProps extends MPStyleProps, MPControlEventProps<HTMLButtonElement> {
     /**
      * Which accent family the popup reads: the chosen day's fill, the band across
      * a range, today's outline, the footer's confirm button.
@@ -130,7 +142,7 @@ interface InternalShellProps extends MPPickerShellProps {
  * treatment, and the popup's `surface-container` at elevation 2 — which is the
  * same floating sheet a menu and a select's list are drawn on.
  */
-export declare function MPPickerShell({ slug, size, color, fullWidth, label, floatingLabel, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef }: InternalShellProps): React.JSX.Element;
+export declare function MPPickerShell({ slug, size, color, fullWidth, label, floatingLabel, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/Picker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as o}from"../components/icon/MPIcon.js";import{CloseIcon as a}from"../constants/icons.js";import{accentSlots as s}from"./accent.js";import{MPFieldLabel as l,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline.js";import{MPStateLayer as m}from"./StateLayer.js";import{MPSupportingText as d}from"./SupportingText.js";import{MPWidthSizer as u}from"./WidthSizer.js";import{displaySamples as f}from"./date.js";import{CONTROL_ICON as h,hasContent as g,PROSE_TEXT as x}from"./scale.js";import{FADE as b,PORTAL_LAYER as j}from"./surface.js";export function useDisplaySamples(e,r){const n=`${e??""} ${JSON.stringify(r)}`;return i.useMemo(()=>f(e,r),[n])}const v={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},y={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:f,size:N="md",color:P="primary",fullWidth:w=!1,label:O,floatingLabel:k=!0,description:M,errorMessage:S,startIcon:z,required:F=!1,disabled:B=!1,readOnly:C=!1,id:I,className:R,style:$,display:q,samples:T,empty:_,clearable:D=!1,onClear:E,open:L,onOpenChange:W,labels:J,hiddenValues:V,children:Z,triggerRef:A}){const G=g(S),H=v[N],K=i.useId(),Q=I??K,U=D&&!_&&!(B||C),{shrunk:X,focusProps:Y}=c({floating:k&&g(O),filled:!_,pinned:L||g(z)});return r(n.Root,{disabled:B,invalid:G,"data-mp-size":N,className:[`mp-${f} group flex-col align-top`,w?"flex w-full":"inline-flex w-fit",R??""].filter(Boolean).join(" "),style:{...s(P),...$},...Y,children:[r(t.Root,{open:L,onOpenChange:W,children:[r("div",{className:"relative w-full",children:[r(t.Trigger,{id:Q,ref:A,disabled:B,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",H.padding,U?"pe-10":"",H.height,x[N],B?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(C?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[z?e("span",{className:["flex shrink-0 items-center",B?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:z}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",_&&!B?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:_&&!X?null:q}),e(u,{samples:T??[]})]})]}),U?r("button",{type:"button","aria-label":J.clear,onClick:E,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(o,{icon:a,size:h[N]})]}):null,e(p,{label:O,required:F,notched:X}),g(O)?e(l,{size:N,label:O,required:F,htmlFor:Q,shrunk:X}):null]}),e(t.Portal,{children:e(t.Positioner,{className:j,sideOffset:4,align:"start",children:e(t.Popup,{initialFocus:!1,className:[`mp-${f}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",y[N],x[N],b].join(" "),children:Z})})})]}),e(d,{description:M,errorMessage:S,className:H.padding}),V?.map((r,i)=>e("input",{type:"hidden",name:r.name,value:r.value},i))]})}export function MPPickerFooter({children:r}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:r})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Field as r}from"@base-ui/react/field";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as t}from"../components/icon/MPIcon.js";import{CloseIcon as l}from"../constants/icons.js";import{accentSlots as s}from"./accent.js";import{MPFieldLabel as a,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline.js";import{MPStateLayer as u}from"./StateLayer.js";import{MPSupportingText as m}from"./SupportingText.js";import{MPWidthSizer as d}from"./WidthSizer.js";import{displaySamples as f}from"./date.js";import{CONTROL_ICON as h,hasContent as x,PROSE_TEXT as g}from"./scale.js";import{FADE as b,PORTAL_LAYER as y}from"./surface.js";export function useDisplaySamples(e,n){const r=`${e??""} ${JSON.stringify(n)}`;return o.useMemo(()=>f(e,n),[r])}const j={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const POPUP_PAD={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:f,size:v="md",color:P="primary",fullWidth:N=!1,label:k,floatingLabel:w=!0,description:C,errorMessage:O,startIcon:M,required:D=!1,disabled:F=!1,readOnly:S=!1,id:z,className:B,style:_,onKeyDown:I,onKeyUp:K,onFocus:R,onBlur:U,onClick:$,onDoubleClick:q,onContextMenu:T,display:A,samples:E,empty:L,clearable:W=!1,onClear:J,open:V,onOpenChange:Z,labels:G,hiddenValues:H,children:Q,triggerRef:X}){const Y=x(O),ee=j[v],ne=o.useId(),oe=z??ne,re=W&&!L&&!(F||S),{shrunk:ie,focusProps:te}=c({floating:w&&x(k),filled:!L,pinned:V||x(M)});return n(r.Root,{disabled:F,invalid:Y,"data-mp-size":v,className:[`mp-${f} group flex-col align-top`,N?"flex w-full":"inline-flex w-fit",B??""].filter(Boolean).join(" "),style:{...s(P),..._},...te,children:[n(i.Root,{open:V,onOpenChange:Z,children:[n("div",{className:"relative w-full",children:[n(i.Trigger,{id:oe,ref:X,disabled:F,nativeButton:!0,onKeyDown:I,onKeyUp:K,onFocus:R,onBlur:U,onClick:$,onDoubleClick:q,onContextMenu:T,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ee.padding,re?"pe-10":"",ee.height,g[v],F?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(S?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[M?e("span",{className:["flex shrink-0 items-center",F?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:M}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",L&&!F?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:L&&!ie?null:A}),e(d,{samples:E??[]})]})]}),re?n("button",{type:"button","aria-label":G.clear,onClick:J,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(u,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:l,size:h[v]})]}):null,e(p,{label:k,required:D,notched:ie}),x(k)?e(a,{size:v,label:k,required:D,htmlFor:oe,shrunk:ie}):null]}),e(i.Portal,{children:e(i.Positioner,{className:y,sideOffset:4,align:"start",children:e(i.Popup,{initialFocus:!1,style:s(P),className:[`mp-${f}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",POPUP_PAD[v],g[v],b].join(" "),children:Q})})})]}),e(m,{description:C,errorMessage:O,className:ee.padding}),H?.map((n,o)=>e("input",{type:"hidden",name:n.name,value:n.value},o))]})}export function MPPickerFooter({children:n}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:n})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};

package/dist/internal/SupportingText.d.ts

@@ -14,6 +14,30 @@ import * as React from 'react';
  * validity state; here the message's presence *is* the state, which is the same
  * bargain `MPTextField.errorMessage` makes — there is no way to render a control
  * that is visibly wrong with no explanation of why.
+ *
+ * ## The line arrives rather than appearing
+ *
+ * A field that turned invalid grew by a line of text between one frame and the
+ * next, and everything under it on the page moved down by that much. On a form
+ * validated on blur that is the whole page stepping as the reader tabs through
+ * it.
+ *
+ * So the space opens. `mp-supporting-text__reveal` in `styles.css` has the
+ * argument for the row it opens as and for why swapping a description for an
+ * error is a different animation from having something to say at all.
+ *
+ * What is worth knowing on this side is that the animation is **switched on by
+ * an attribute this component sets**, rather than by a class that is simply
+ * always there. A page load is not a change: a server-rendered form would
+ * otherwise grow six description lines out of nothing the moment it hydrated,
+ * which is a page assembling itself in front of a reader who asked for a form.
+ * The effect below only ever runs when it has watched the message change.
+ *
+ * The wrapper is drawn only when there is a message, and that is not a detail
+ * to lose either: every control that shows one puts it in a flex column with a
+ * `gap`, so an element that was always there would be a gap that was always
+ * there — two pixels under every checkbox in the library that has nothing to
+ * say.
  */
 export declare function MPSupportingText({ description, errorMessage, className }: {
     description?: React.ReactNode;

package/dist/internal/SupportingText.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import{Field as e}from"@base-ui/react/field";import{META_TEXT as t,hasContent as o}from"./scale.js";export function MPSupportingText({description:a,errorMessage:s,className:i}){const c=["mp-supporting-text block",t,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return o(s)?r(e.Error,{match:!0,className:`${c} text-mp-error`,children:s}):o(a)?r(e.Description,{className:`${c} text-mp-on-surface-variant`,children:a}):r(e.Error,{className:`${c} text-mp-error`})}
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{Field as t}from"@base-ui/react/field";import{META_TEXT as a,hasContent as n}from"./scale.js";export function MPSupportingText({description:o,errorMessage:s,className:i}){const c=n(s)?"error":n(o)?"description":"none",m=r.useRef(null),p=r.useRef(c);r.useLayoutEffect(()=>{const e=m.current,r=p.current;p.current=c,e&&c!==r&&"none"!==c&&(e.dataset.mpReveal="none"===r?"open":"swap",e.style.animationName="none",e.offsetWidth,e.style.animationName="")},[c]);const l=["mp-supporting-text block min-h-0",a,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return n(s)?e("div",{ref:m,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`${l} text-mp-error`,children:s})}):n(o)?e("div",{ref:m,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`${l} text-mp-on-surface-variant`,children:o})}):e(t.Error,{className:`${l} text-mp-error`})}