material-plus-ui 1.8.0 → 1.10.0

package/dist/hooks/index.d.ts

@@ -25,8 +25,10 @@
  * had the switch and nothing to drive it with, so every application wrote the
  * same state, the same storage round trip and the same `<head>` script.
  */
-export { useMPColorScheme, mpColorSchemeScript } from './useMPColorScheme.js';
-export type { MPColorScheme, MPResolvedColorScheme, MPColorSchemeOptions, MPColorSchemeResult } from './useMPColorScheme.js';
+export { useMPColorScheme } from './useMPColorScheme.js';
+export { mpColorSchemeScript } from './mpColorSchemeScript.js';
+export type { MPColorScheme, MPResolvedColorScheme, MPColorSchemeResult } from './useMPColorScheme.js';
+export type { MPColorSchemeOptions } from './mpColorSchemeScript.js';
 export { useMPWindowClass } from './useMPWindowClass.js';
 export { useMPReducedMotion } from './useMPReducedMotion.js';
 export { useMPShortcut, useMPPlatform } from './useMPShortcut.js';

package/dist/hooks/index.js

@@ -1 +1 @@
-export{useMPColorScheme,mpColorSchemeScript}from"./useMPColorScheme.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";export{useMPMediaQuery}from"./useMPMediaQuery.js";export{useMPElementSize}from"./useMPElementSize.js";export{useMPOnScreen}from"./useMPOnScreen.js";export{useMPDisclosure}from"./useMPDisclosure.js";
+export{useMPColorScheme}from"./useMPColorScheme.js";export{mpColorSchemeScript}from"./mpColorSchemeScript.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";export{useMPMediaQuery}from"./useMPMediaQuery.js";export{useMPElementSize}from"./useMPElementSize.js";export{useMPOnScreen}from"./useMPOnScreen.js";export{useMPDisclosure}from"./useMPDisclosure.js";

package/dist/hooks/mpColorSchemeScript.d.ts

@@ -0,0 +1,46 @@
+export interface MPColorSchemeOptions {
+    /**
+     * Where the choice is remembered, in `localStorage`.
+     *
+     * Change it to keep two applications on one origin from sharing a theme, or
+     * to namespace it under a product. It has to match the key given to
+     * `mpColorSchemeScript`, or the page paints one scheme and then corrects
+     * itself to the other.
+     * @default 'mp-color-scheme'
+     */
+    storageKey?: string;
+}
+/**
+ * The two lines that stop the first paint flashing, as a string to inline.
+ *
+ * A hook runs after the browser has already painted, so a reader who chose dark
+ * gets a white page for a frame and then the right one. The only thing that can
+ * run earlier is a **synchronous script in the `<head>`**, before the body is
+ * parsed, and this is that script.
+ *
+ * ```tsx
+ * // app/layout.tsx
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: mpColorSchemeScript() }} />
+ * </head>
+ * ```
+ *
+ * It reads the same key the hook does, writes the same attribute, and does
+ * nothing at all when the stored value is absent or `system` — leaving the media
+ * query to answer, which it does before the first paint anyway.
+ *
+ * Pass the same `storageKey` you pass the hook. Two different keys is a page
+ * that paints one scheme and then corrects itself to the other, which is the
+ * flash this exists to remove.
+ *
+ * The output is a JavaScript source string and contains no interpolated markup:
+ * the key is JSON-encoded, so a key with a quote in it cannot end the script
+ * early.
+ *
+ * ## It has to be inline
+ *
+ * A `<script src>` is fetched, and a fetch is exactly the delay being avoided.
+ * If the page has a Content Security Policy without `unsafe-inline`, give the
+ * tag a nonce — this returns the source, not the tag, so the tag is yours.
+ */
+export declare function mpColorSchemeScript(options?: MPColorSchemeOptions): string;

package/dist/hooks/mpColorSchemeScript.js

@@ -0,0 +1 @@
+import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as e}from"../internal/color-scheme-keys.js";export function mpColorSchemeScript(r={}){const{storageKey:o=t}=r;return`try{var s=localStorage.getItem(${JSON.stringify(o)});if(s==="dark"||s==="light")document.documentElement.setAttribute(${JSON.stringify(e)},s)}catch(e){}`}

package/dist/hooks/useMPColorScheme.d.ts

@@ -1,17 +1,6 @@
 import { type MPColorScheme, type MPResolvedColorScheme } from '../internal/color-scheme.js';
-export type { MPColorScheme, MPResolvedColorScheme };
-export interface MPColorSchemeOptions {
-    /**
-     * Where the choice is remembered, in `localStorage`.
-     *
-     * Change it to keep two applications on one origin from sharing a theme, or
-     * to namespace it under a product. It has to match the key given to
-     * `mpColorSchemeScript`, or the page paints one scheme and then corrects
-     * itself to the other.
-     * @default 'mp-color-scheme'
-     */
-    storageKey?: string;
-}
+import type { MPColorSchemeOptions } from './mpColorSchemeScript.js';
+export type { MPColorScheme, MPColorSchemeOptions, MPResolvedColorScheme };
 export interface MPColorSchemeResult {
     /**
      * What has been **chosen** — including `'system'`, which is the absence of a
@@ -99,37 +88,3 @@ export interface MPColorSchemeResult {
  * for — see it for the two lines that go in the `<head>`.
  */
 export declare function useMPColorScheme(options?: MPColorSchemeOptions): MPColorSchemeResult;
-/**
- * The two lines that stop the first paint flashing, as a string to inline.
- *
- * A hook runs after the browser has already painted, so a reader who chose dark
- * gets a white page for a frame and then the right one. The only thing that can
- * run earlier is a **synchronous script in the `<head>`**, before the body is
- * parsed, and this is that script.
- *
- * ```tsx
- * // app/layout.tsx
- * <head>
- *   <script dangerouslySetInnerHTML={{ __html: mpColorSchemeScript() }} />
- * </head>
- * ```
- *
- * It reads the same key the hook does, writes the same attribute, and does
- * nothing at all when the stored value is absent or `system` — leaving the media
- * query to answer, which it does before the first paint anyway.
- *
- * Pass the same `storageKey` you pass the hook. Two different keys is a page
- * that paints one scheme and then corrects itself to the other, which is the
- * flash this exists to remove.
- *
- * The output is a JavaScript source string and contains no interpolated markup:
- * the key is JSON-encoded, so a key with a quote in it cannot end the script
- * early.
- *
- * ## It has to be inline
- *
- * A `<script src>` is fetched, and a fetch is exactly the delay being avoided.
- * If the page has a Content Security Policy without `unsafe-inline`, give the
- * tag a nonce — this returns the source, not the tag, so the tag is yours.
- */
-export declare function mpColorSchemeScript(options?: MPColorSchemeOptions): string;

package/dist/hooks/useMPColorScheme.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as r,setScheme as s,useChosenScheme as o,useSystemScheme as c}from"../internal/color-scheme.js";export function useMPColorScheme(r={}){const{storageKey:m=t}=r,a=o(m),i=c(),l="system"===a?i:a,n=e.useCallback(e=>s(m,e),[m]),u=e.useCallback(()=>s(m,"dark"===l?"light":"dark"),[m,l]);return e.useMemo(()=>({scheme:a,resolved:l,isSystem:"system"===a,setScheme:n,toggle:u}),[a,l,n,u])}export function mpColorSchemeScript(e={}){const{storageKey:s=t}=e;return`try{var s=localStorage.getItem(${JSON.stringify(s)});if(s==="dark"||s==="light")document.documentElement.setAttribute(${JSON.stringify(r)},s)}catch(e){}`}
+import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as s,applyScheme as o,setScheme as m,useChosenScheme as r,useSystemScheme as c}from"../internal/color-scheme.js";export function useMPColorScheme(l={}){const{storageKey:n=t}=l,u=r(n),a=c(),i="system"===u?a:u;e.useEffect(()=>{"system"!==u&&null===document.documentElement.getAttribute(s)&&o(u)},[u]);const d=e.useCallback(e=>m(n,e),[n]),f=e.useCallback(()=>m(n,"dark"===i?"light":"dark"),[n,i]);return e.useMemo(()=>({scheme:u,resolved:i,isSystem:"system"===u,setScheme:d,toggle:f}),[u,i,d,f])}

package/dist/hooks/useMPMediaQuery.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export function useMPMediaQuery(t,a=!1){const r=e.useMemo(()=>function(e){if("undefined"==typeof window||!window.matchMedia)return null;let t=n.get(e);t||(t=window.matchMedia(e),n.set(e,t));return t}(t),[t]),c=e.useCallback(e=>r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{},[r]),o=e.useCallback(()=>r?r.matches:a,[r,a]),u=e.useCallback(()=>a,[a]);return e.useSyncExternalStore(c,o,u)}const n=new Map;
+import*as e from"react";import{mediaList as a}from"../internal/media.js";export function useMPMediaQuery(a,n=!1){const r=e.useMemo(()=>t(a),[a]),s=e.useCallback(e=>r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{},[r]),c=e.useCallback(()=>r?r.matches:n,[r,n]),o=e.useCallback(()=>n,[n]);return e.useSyncExternalStore(s,c,o)}const t=a;

package/dist/hooks/useMPOnScreen.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export function useMPOnScreen(r,{threshold:n=.2,once:t=!0,rootMargin:o}={}){const[s,c]=e.useState(!1);return e.useEffect(()=>{const e=r.current;if(!e)return;if("undefined"==typeof IntersectionObserver)return void c(!0);const s=new IntersectionObserver(([e])=>{e.isIntersecting?(c(!0),t&&s.disconnect()):t||c(!1)},{threshold:n,rootMargin:o});return s.observe(e),()=>s.disconnect()},[r,n,t,o]),s}
+import*as e from"react";import{watchIntersection as r}from"../internal/intersection.js";export function useMPOnScreen(t,{threshold:n=.2,once:o=!0,rootMargin:i}={}){const[s,c]=e.useState(!1);return e.useEffect(()=>{const e=t.current;if(!e)return;if("undefined"==typeof IntersectionObserver)return void c(!0);const s=r(e,e=>{e.isIntersecting?(c(!0),o&&s()):o||c(!1)},{threshold:n,rootMargin:i});return s},[t,n,o,i]),s}

package/dist/internal/Calendar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as r}from"../components/button/MPButton.js";import{MPIcon as l}from"../components/icon/MPIcon.js";import{MPIconButton as a}from"../components/icon-button/MPIconButton.js";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons.js";import{MPStateLayer as u}from"./StateLayer.js";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale.js";import{VISUALLY_HIDDEN as p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as b,calendarWeeks as y,compareDay as v,dateFormatter as w,isDayOutside as x,isMonthBeforeYear as D,isSameDay as S,isSameMonth as M,isUnitOutside as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as z,today as A,weekdayLabels as E,withTime as T,YEAR_PAGE_SIZE as F,yearPageStart as Y}from"./date.js";const B={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},R={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},H=/*@__PURE__*/["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none p-0 font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" "),$={day:0,month:1,year:2};function K({children:n,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[H,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"border-0 bg-transparent cursor-default text-mp-on-surface/38":r?"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)":l?"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"bg-transparent border border-(--_mp-accent) text-(--_mp-accent)":c?"border-0 bg-transparent text-mp-on-surface-variant":"border-0 bg-transparent text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),n]})}function L({size:o,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:b,showNextButton:y,onStep:v,onViewChange:w}){const x=k(f,"long")[p.getMonth()],S=String(p.getFullYear()),M=D(f),N=R[o],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(t,n)=>n?e(a,{size:N,color:u,label:P[-1===t?0:1],icon:e(l,{icon:-1===t?c:i,size:m[N],className:"rtl:rotate-180"}),onClick:()=>v(t)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=t=>e(l,{icon:s,size:m[N],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",t?"rotate-180":""].filter(Boolean).join(" ")}),j=e(r,{variant:"text",size:N,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>w("month"===d?"day":"month"),children:x},"month"),z=e(r,{variant:"text",size:N,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>w("year"===d?"day":"year"),children:S},"year"),A=Y(p.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,b),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[o]}`,children:`${A}–${A+F-1}`}):"month"===d?z:t(n,M?{children:[j,z]}:{children:[z,j]})}),_(1,y)]})}export function Calendar({size:n,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:y,showOutsideDays:v=!0,autoFocus:w=!1,showPreviousButton:D=!0,showNextButton:S=!0,precision:N="day",labels:C}){const[k,E]=o.useState(N),T=$[k]<$[N]?N:k,Y=o.useMemo(()=>i.filter(P),[i]),[R,H]=o.useState(()=>{const e=Y.find(e=>M(e,s));return e?j(e):M(A(),s)?A():z(s)}),K=o.useRef(w),U=o.useRef(null);o.useEffect(()=>{H(e=>M(e,s)?e:z(s))},[s]),o.useLayoutEffect(()=>{K.current&&(K.current=!1,U.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const V=o.useCallback(e=>x(e,p,f)||(y?.(e)??!1),[p,f,y]),G=e=>{K.current=!0,E(e)},W=e=>{K.current=!0,c(e)};return t("div",{ref:U,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(L,{size:n,color:r,view:T,month:s,locale:l,labels:C,showPreviousButton:D,showNextButton:S,onStep:e=>{c("day"===T?g(s,e):b(s,"month"===T?e:e*F))},onViewChange:G}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===T?e(I,{size:n,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:R,showOutsideDays:v,isDisabled:V,onSelect:e=>{H(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{K.current=!0,H(e),M(e,s)||c(z(e))}}):"month"===T?e(O,{size:n,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{const t=_(s.getFullYear(),e,1);"month"!==N?(c(t),G("day")):d(t)}}):e(q,{size:n,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{"year"!==N?(c(_(e,s.getMonth(),1)),G("month")):d(_(e,0,1))}})})]})}function U(e){return"rtl"===getComputedStyle(e).direction?-1:1}function I({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:b,onPreviewChange:x,onMoveFocus:D}){const N=E(r,l,"narrow"),_=E(r,l,"long"),C=(j=i,P(k=c)&&P(j)?v(k,j)<=0?[k,j]:[j,k]:null);var k,j;const z=A(),T=o.useMemo(()=>{const e=w(r,{dateStyle:"full"});return y(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),F=o.useRef(null),Y=o.useRef(a);o.useLayoutEffect(()=>{const e=F.current,t=Y.current;if(Y.current=a,!e||M(t,a))return;const n=t.getTime()<a.getTime(),o="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(n===o?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return t("div",{role:"grid","aria-label":w(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:N.map((t,n)=>e("span",{role:"columnheader","aria-label":_[n],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:t},n))})}),e("div",{ref:F,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:T.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!M(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>S(e,t)),i=null!==C&&v(t,C[0])>=0&&v(t,C[1])<=0,d=null!==C&&i&&S(t,C[0]),y=null!==C&&i&&S(t,C[1]);return e(K,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&y?"both":d?"start":y?"end":"middle":null,current:S(t,z)&&!c,muted:r,disabled:p(t),focused:S(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>b(t),onPointerEnter:()=>x?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=U(e.currentTarget),r={ArrowLeft:()=>f(t,-o),ArrowRight:()=>f(t,o),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(t,6-n),PageUp:()=>g(t,e.shiftKey?-12:-1),PageDown:()=>g(t,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,t),children:t.getDate()},t.getTime())})},o))})]})}function O({size:t,locale:n,month:r,chosen:l,minDate:a,maxDate:s,onMoveCursor:c,onPick:i}){const u=k(n,"short"),m=r.getFullYear(),d=new Date,p=o.useMemo(()=>{const e=w(n,{year:"numeric",month:"long"});return Array.from({length:12},(t,n)=>e.format(_(m,n,1)))},[n,m]),f=e=>{const t=U(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),c(g(z(r),n)))};return e("div",{role:"grid","aria-label":String(m),className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(o=>{const c=3*n+o;return e(K,{label:p[c],selected:l.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:d.getFullYear()===m&&d.getMonth()===c,disabled:N(_(m,c,1),"month",a,s),focused:c===r.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>i(c),onKeyDown:f,children:u[c]},c)})},n))})}function q({size:t,month:n,chosen:o,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=Y(n.getFullYear()),i=(new Date).getFullYear(),u=e=>{const t=U(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==o&&(e.preventDefault(),a(b(z(n),o)))};return e("div",{role:"grid","aria-label":`${c}–${c+F-1}`,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(K,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:N(_(d,0,1),"year",r,l),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function V(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function G(e,t="auto"){const n=e.parentElement;if(!n)return;const o=e.getBoundingClientRect(),r=n.getBoundingClientRect(),l=o.top-r.top-n.clientTop+n.scrollTop,a=l+o.height;l<n.scrollTop?n.scrollTo({top:l,behavior:t}):a>n.scrollTop+n.clientHeight&&n.scrollTo({top:a-n.clientHeight,behavior:t})}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:b=!1,labels:y}){const v=l??a,x=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=x.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(e=>G(e,"instant")),b){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[b]);const M=o.useMemo(()=>{const e=c?12:24,t=V(m,e),n=Array.from({length:Math.ceil(e/t)},(e,n)=>n*t);return c?n.map(e=>0===e?12:e):n},[c,m]),N=o.useMemo(()=>{const e=V(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=V(f,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[f]),_=e=>String(e).padStart(2,"0"),k=c?v.getHours()%12||12:v.getHours(),[j,z]=o.useState({}),A=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),p=j[o]??(d>=0?d:0);return e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","motion-safe:scroll-smooth","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),onKeyDown:e=>{const t={ArrowDown:1,ArrowUp:-1,PageDown:5,PageUp:-5}[e.key],n=void 0!==t?(e=>{const t=[...e.children].indexOf(document.activeElement);return t>=0?t:p})(e.currentTarget)+t:"Home"===e.key?0:"End"===e.key?a.length-1:null;null!==n&&(e.preventDefault(),((e,t)=>{const n=Math.min(a.length-1,Math.max(0,e)),r=t.children[n];z(e=>({...e,[o]:n})),r instanceof HTMLElement&&(r.focus({preventScroll:!0}),G(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>T(v,"hour"===e?{hours:c?t%12+(v.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:v.getHours()%12+12*t}))(o,r),f=null!==l&&i(r),b=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":b||void 0,"data-chosen":f?"true":void 0,tabIndex:a===p?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0 border-0",h[n],b?"bg-transparent cursor-default text-mp-on-surface/38":f?"bg-(--_mp-accent) text-(--_mp-on-accent)":"bg-transparent text-mp-on-surface"].join(" "),onFocus:()=>z(e=>({...e,[o]:a})),onClick:()=>{b||s(d)},children:[b?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:x,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[A("hour",y.hour,M,e=>e===k,e=>c?String(e):_(e)),A("minute",y.minute,N,e=>e===v.getMinutes(),_),i?A("second",y.second,P,e=>e===v.getSeconds(),_):null,c?A("meridiem",y.meridiem,[0,1],e=>(v.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":w(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as r}from"../components/button/MPButton.js";import{MPIcon as l}from"../components/icon/MPIcon.js";import{MPIconButton as a}from"../components/icon-button/MPIconButton.js";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons.js";import{MPStateLayer as u}from"./StateLayer.js";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale.js";import{VISUALLY_HIDDEN as p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as y,calendarWeeks as b,compareDay as v,dateFormatter as x,isDayOutside as w,isMonthBeforeYear as D,isSameDay as S,isSameMonth as M,isUnitOutside as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as T,today as z,weekdayLabels as A,withTime as E,YEAR_PAGE_SIZE as F,yearPageStart as Y}from"./date.js";const B={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},R={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},H=/*@__PURE__*/["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none p-0 font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" "),$={day:0,month:1,year:2};let K=null;function L(){const e=z();return null!==K&&K.getTime()===e.getTime()||(K=e),K}const U=()=>()=>{},I=()=>null;function O(){return o.useSyncExternalStore(U,L,I)}function q({children:n,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[H,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"border-0 bg-transparent cursor-default text-mp-on-surface/38":r?"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)":l?"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"bg-transparent border border-(--_mp-accent) text-(--_mp-accent)":c?"border-0 bg-transparent text-mp-on-surface-variant":"border-0 bg-transparent text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),n]})}function V({size:o,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:y,showNextButton:b,onStep:v,onViewChange:x}){const w=k(f,"long")[p.getMonth()],S=String(p.getFullYear()),M=D(f),N=R[o],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(t,n)=>n?e(a,{size:N,color:u,label:P[-1===t?0:1],icon:e(l,{icon:-1===t?c:i,size:m[N],className:"rtl:rotate-180"}),onClick:()=>v(t)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=t=>e(l,{icon:s,size:m[N],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",t?"rotate-180":""].filter(Boolean).join(" ")}),j=e(r,{variant:"text",size:N,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>x("month"===d?"day":"month"),children:w},"month"),T=e(r,{variant:"text",size:N,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>x("year"===d?"day":"year"),children:S},"year"),z=Y(p.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,y),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[o]}`,children:`${z}–${z+F-1}`}):"month"===d?T:t(n,M?{children:[j,T]}:{children:[T,j]})}),_(1,b)]})}export function Calendar({size:n,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:b,showOutsideDays:v=!0,autoFocus:x=!1,showPreviousButton:D=!0,showNextButton:S=!0,precision:N="day",labels:C}){const[k,A]=o.useState(N),E=$[k]<$[N]?N:k,Y=o.useMemo(()=>i.filter(P),[i]),[R,H]=o.useState(()=>{const e=Y.find(e=>M(e,s));return e?j(e):M(z(),s)?z():T(s)}),K=o.useRef(x),L=o.useRef(null);o.useEffect(()=>{H(e=>M(e,s)?e:T(s))},[s]),o.useLayoutEffect(()=>{K.current&&(K.current=!1,L.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const U=o.useCallback(e=>w(e,p,f)||(b?.(e)??!1),[p,f,b]),I=e=>{K.current=!0,A(e)},O=e=>{K.current=!0,c(e)};return t("div",{ref:L,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(V,{size:n,color:r,view:E,month:s,locale:l,labels:C,showPreviousButton:D,showNextButton:S,onStep:e=>{c("day"===E?g(s,e):y(s,"month"===E?e:e*F))},onViewChange:I}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===E?e(W,{size:n,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:R,showOutsideDays:v,isDisabled:U,onSelect:e=>{H(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{K.current=!0,H(e),M(e,s)||c(T(e))}}):"month"===E?e(J,{size:n,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:O,onPick:e=>{const t=_(s.getFullYear(),e,1);"month"!==N?(c(t),I("day")):d(t)}}):e(Q,{size:n,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:O,onPick:e=>{"year"!==N?(c(_(e,s.getMonth(),1)),I("month")):d(_(e,0,1))}})})]})}function G(e){return"rtl"===getComputedStyle(e).direction?-1:1}function W({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:y,onPreviewChange:w,onMoveFocus:D}){const N=A(r,l,"narrow"),_=A(r,l,"long"),C=(j=i,P(k=c)&&P(j)?v(k,j)<=0?[k,j]:[j,k]:null);var k,j;const T=O(),z=o.useMemo(()=>{const e=x(r,{dateStyle:"full"});return b(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),E=o.useRef(null),F=o.useRef(a);o.useLayoutEffect(()=>{const e=E.current,t=F.current;if(F.current=a,!e||M(t,a))return;const n=t.getTime()<a.getTime(),o="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(n===o?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return t("div",{role:"grid","aria-label":x(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:N.map((t,n)=>e("span",{role:"columnheader","aria-label":_[n],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:t},n))})}),e("div",{ref:E,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:z.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!M(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>S(e,t)),i=null!==C&&v(t,C[0])>=0&&v(t,C[1])<=0,d=null!==C&&i&&S(t,C[0]),b=null!==C&&i&&S(t,C[1]);return e(q,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&b?"both":d?"start":b?"end":"middle":null,current:null!==T&&S(t,T)&&!c,muted:r,disabled:p(t),focused:S(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>y(t),onPointerEnter:()=>w?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=G(e.currentTarget),r={ArrowLeft:()=>f(t,-o),ArrowRight:()=>f(t,o),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(t,6-n),PageUp:()=>g(t,e.shiftKey?-12:-1),PageDown:()=>g(t,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,t),children:t.getDate()},t.getTime())})},o))})]})}function J({size:t,locale:n,month:r,chosen:l,minDate:a,maxDate:s,onMoveCursor:c,onPick:i}){const u=k(n,"short"),m=r.getFullYear(),d=O(),p=o.useMemo(()=>{const e=x(n,{year:"numeric",month:"long"});return Array.from({length:12},(t,n)=>e.format(_(m,n,1)))},[n,m]),f=e=>{const t=G(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),c(g(T(r),n)))};return e("div",{role:"grid","aria-label":String(m),className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(o=>{const c=3*n+o;return e(q,{label:p[c],selected:l.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:null!==d&&d.getFullYear()===m&&d.getMonth()===c,disabled:N(_(m,c,1),"month",a,s),focused:c===r.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>i(c),onKeyDown:f,children:u[c]},c)})},n))})}function Q({size:t,month:n,chosen:o,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=Y(n.getFullYear()),i=O()?.getFullYear(),u=e=>{const t=G(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==o&&(e.preventDefault(),a(y(T(n),o)))};return e("div",{role:"grid","aria-label":`${c}–${c+F-1}`,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(q,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:N(_(d,0,1),"year",r,l),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function X(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function Z(e,t="auto"){const n=e.parentElement;if(!n)return;const o=e.getBoundingClientRect(),r=n.getBoundingClientRect(),l=o.top-r.top-n.clientTop+n.scrollTop,a=l+o.height;l<n.scrollTop?n.scrollTo({top:l,behavior:t}):a>n.scrollTop+n.clientHeight&&n.scrollTo({top:a-n.clientHeight,behavior:t})}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:y=!1,labels:b}){const v=l??a,w=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=w.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(e=>Z(e,"instant")),y){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[y]);const M=o.useMemo(()=>{const e=c?12:24,t=X(m,e),n=Array.from({length:Math.ceil(e/t)},(e,n)=>n*t);return c?n.map(e=>0===e?12:e):n},[c,m]),N=o.useMemo(()=>{const e=X(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=X(f,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[f]),_=e=>String(e).padStart(2,"0"),k=c?v.getHours()%12||12:v.getHours(),[j,T]=o.useState({}),z=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),p=j[o]??(d>=0?d:0);return e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","motion-safe:scroll-smooth","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),onKeyDown:e=>{const t={ArrowDown:1,ArrowUp:-1,PageDown:5,PageUp:-5}[e.key],n=void 0!==t?(e=>{const t=[...e.children].indexOf(document.activeElement);return t>=0?t:p})(e.currentTarget)+t:"Home"===e.key?0:"End"===e.key?a.length-1:null;null!==n&&(e.preventDefault(),((e,t)=>{const n=Math.min(a.length-1,Math.max(0,e)),r=t.children[n];T(e=>({...e,[o]:n})),r instanceof HTMLElement&&(r.focus({preventScroll:!0}),Z(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>E(v,"hour"===e?{hours:c?t%12+(v.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:v.getHours()%12+12*t}))(o,r),f=null!==l&&i(r),y=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":y||void 0,"data-chosen":f?"true":void 0,tabIndex:a===p?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0 border-0",h[n],y?"bg-transparent cursor-default text-mp-on-surface/38":f?"bg-(--_mp-accent) text-(--_mp-on-accent)":"bg-transparent text-mp-on-surface"].join(" "),onFocus:()=>T(e=>({...e,[o]:a})),onClick:()=>{y||s(d)},children:[y?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:w,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[z("hour",b.hour,M,e=>e===k,e=>c?String(e):_(e)),z("minute",b.minute,N,e=>e===v.getMinutes(),_),i?z("second",b.second,P,e=>e===v.getSeconds(),_):null,c?z("meridiem",b.meridiem,[0,1],e=>(v.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":x(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}

package/dist/internal/ChartChrome.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type ChartValue } from './chart.js';
-import type { MPChartCategory, MPChartLegend, MPChartTooltip, MPChartTooltipItem, MPSide, MPSize } from '../types.js';
+import type { MPChartCategory, MPChartLabelColor, MPChartLegend, MPChartTooltip, MPChartTooltipItem, MPSide, MPSize } from '../types.js';
 /**
  * Everything a chart draws that is not the data.
  *
@@ -52,6 +52,22 @@ export interface ChartBaseProps extends Omit<React.ComponentPropsWithoutRef<'div
     tooltip?: boolean | MPChartTooltip;
     /** What to draw when there is nothing to draw. */
     empty?: React.ReactNode;
+    /**
+     * What ink the text naming a series is written in — the legend's entries, and
+     * the values written onto the marks.
+     *
+     * `'series'` matches each name to the mark it names, which is the fastest way
+     * to pair a long legend with a crowded plot. It is not the default because it
+     * is a trade: the eight chart slots are fitted to 3:1 against the surface,
+     * which is the bar for a *mark*, and small text wants 4.5:1. Reach for it on
+     * a chart whose legend is doing real work, and leave it alone where the
+     * swatch beside the name is already enough.
+     *
+     * Labels drawn **on** a fill — a pie's shares, a heatmap's cells — ignore it
+     * and keep the ink that reads against what they sit on.
+     * @default 'ink'
+     */
+    labelColor?: MPChartLabelColor;
     /** @default 'md' */
     size?: MPSize;
 }
@@ -74,6 +90,10 @@ export interface Visibility {
 export declare function useVisibility(series: readonly {
     hidden?: boolean;
 }[]): Visibility;
+/** `legend` left out or `true`, as one object for every render to share. */
+export declare const LEGEND_ON: MPChartLegend;
+/** `legend={false}`, the same way. */
+export declare const LEGEND_OFF: MPChartLegend;
 interface LegendProps {
     /**
      * What each entry is called. Names rather than series, because a pie's
@@ -88,24 +108,39 @@ interface LegendProps {
     size: MPSize;
     values?: readonly (string | undefined)[];
     swatch?: (index: number, color: string) => React.ReactNode;
+    /** Writes each name in its own series' colour rather than in ordinary ink. */
+    colorNames?: boolean;
 }
 /**
  * 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.
+ * A swatch and a word. The swatch carries the series' colour and the name
+ * beside it stays in ordinary ink, because a label written in the mark's colour
+ * is one more thing between the reader and the word — `colorNames` is the
+ * caller saying they want that trade anyway, and it is off unless they do.
  *
  * 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.
+ *
+ * ## Off and quiet are two states, and they look different
+ *
+ * A series the reader has switched off is drawn at Material's disabled
+ * opacity — swatch and name together, the same treatment a disabled control
+ * gets, because that is what it is. A series merely standing back while another
+ * is hovered is quieter than usual and no more, so the two cannot be mistaken
+ * for each other at a glance. Opacity survives greyscale and forced colours,
+ * which a change of hue would not, and `aria-pressed` carries the same fact to
+ * a reader who is not looking at all.
  */
-export declare function ChartLegend({ names, colors, options, visibility, size, values, swatch }: LegendProps): React.JSX.Element;
+export declare const ChartLegend: React.MemoExoticComponent<({ names, colors, options, visibility, size, values, swatch, colorNames }: LegendProps) => React.JSX.Element>;
 interface PanelProps {
     heading?: React.ReactNode;
     items: readonly MPChartTooltipItem[];
+    /** What the rows add up to, where the chart is a picture of that sum. */
+    total?: string;
+    /** And what that row is called, in the chart's own language. */
+    totalLabel?: string;
     x: number;
     y: number;
     flip: boolean;
@@ -118,7 +153,7 @@ interface PanelProps {
  * 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;
+export declare function ChartTooltipPanel({ heading, items, total, totalLabel, x, y, flip, size }: PanelProps): React.JSX.Element;
 /**
  * The same reading, said out loud instead of drawn.
  *
@@ -132,9 +167,11 @@ export declare function ChartTooltipPanel({ heading, items, x, y, flip, size }:
  * 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 }: {
+export declare function ChartStatus({ heading, items, total, totalLabel }: {
     heading?: React.ReactNode;
     items: readonly MPChartTooltipItem[];
+    total?: string;
+    totalLabel?: string;
 }): React.JSX.Element;
 interface TableProps {
     id: string;
@@ -159,8 +196,13 @@ interface TableProps {
  * 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.
+ *
+ * Memoised, because it is the largest thing a chart renders and the one thing a
+ * hover never changes. Every column the pointer crosses re-renders the chart,
+ * and before this every one of them formatted every cell of the table again —
+ * half the cost of a hover on a line chart of a few hundred points.
  */
-export declare function ChartTable({ id, caption, corner, categories, names, values, format, locale, empty }: TableProps): React.JSX.Element;
+export declare const ChartTable: React.MemoExoticComponent<({ 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. */
@@ -178,11 +220,22 @@ export interface ChartShellProps extends Omit<React.ComponentPropsWithoutRef<'di
     children: React.ReactNode;
     /** Floated over the drawing. */
     tooltip?: React.ReactNode;
+    /**
+     * A control over the corner of the plot — the one thing a chart has that is
+     * neither the picture nor a legend entry.
+     *
+     * A **sibling** of the plot rather than a child, for the reason the readout
+     * is one: `role="img"` is a leaf role, and a button inside it is a button no
+     * keyboard can reach and no screen reader can find.
+     */
+    overlay?: React.ReactNode;
     legend?: React.ReactNode;
     legendSide?: MPSide;
     status: {
         heading?: React.ReactNode;
         items: readonly MPChartTooltipItem[];
+        total?: string;
+        totalLabel?: string;
     };
     table?: React.ReactNode;
 }
@@ -191,9 +244,15 @@ export interface ChartShellProps extends Omit<React.ComponentPropsWithoutRef<'di
  * 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.
+ * constraint rather than a layout preference — see `ChartStatus`. So is
+ * anything in `overlay`, for the same reason. 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.
+ *
+ * The plot sits in a positioning box of its own rather than directly in the
+ * row. The box is always there, zoomed or not — a wrapper that came and went
+ * would unmount the plot with it, and a plot that unmounts takes the reader's
+ * focus with it.
  */
-export declare function ChartShell({ size, plotRef, name, describedBy, interactive, height, plotProps, children, tooltip, legend, legendSide, status, table, className, ...rest }: ChartShellProps): React.JSX.Element;
+export declare function ChartShell({ size, plotRef, name, describedBy, interactive, height, plotProps, children, tooltip, overlay, legend, legendSide, status, table, className, ...rest }: ChartShellProps): React.JSX.Element;
 export {};

package/dist/internal/ChartChrome.js

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

package/dist/internal/ChartFrame.d.ts

@@ -1,7 +1,7 @@
 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';
+import type { MPChartAxis, MPChartCategory, MPChartSeries, MPChartStack, MPChartTooltipItem, MPChartZoom, MPSize } from '../types.js';
 /**
  * The frame a chart with two axes is drawn in.
  *
@@ -26,6 +26,15 @@ export interface CartesianChartProps extends ChartBaseProps {
     xAxis?: MPChartAxis;
     /** The value axis. */
     yAxis?: MPChartAxis;
+    /**
+     * Lets a reader drag a range out of the category axis and redraws to it.
+     *
+     * For the chart with ninety points on it, where the shape of one week is
+     * inside a picture of a quarter. Everything follows the window — the scale,
+     * the panel, the readout and the table — so what is drawn is a chart of that
+     * range rather than a magnified picture of the whole one.
+     */
+    zoom?: boolean | MPChartZoom;
 }
 /**
  * One mark on a plot whose marks are not arranged in columns.
@@ -74,6 +83,15 @@ export interface CartesianLayout {
     visible: readonly boolean[];
     /** And what colour each one is, by its original index. */
     colors: readonly string[];
+    /**
+     * What ink a value written onto one of series `index`' marks wears.
+     *
+     * Ordinary ink unless the caller asked for `labelColor="series"`. A chart
+     * whose labels sit **on** a fill rather than beside a mark ignores it: there
+     * the question is what reads against the colour underneath, which is not a
+     * question about identity at all.
+     */
+    labelInk: (series: number) => string;
     scale: ValueScale;
     band: BandScale;
     /** Bars run along the category axis rather than across it. */
@@ -102,6 +120,8 @@ export interface CartesianLayout {
     zeroPx: number;
     categories: readonly MPChartCategory[];
     format: (value: number) => string;
+    /** A fraction as the chart writes a share — whole percentages. */
+    share: (fraction: number) => string;
     size: MPSize;
 }
 /** The layout, plus everything the pointer decides. */
@@ -162,8 +182,8 @@ interface CartesianFrameProps extends CartesianChartProps {
     } | null;
     /** Bars, and only bars, run the other way. */
     horizontal?: boolean;
-    /** The value axis measures totals rather than parts. */
-    stacked?: boolean;
+    /** The value axis measures totals rather than parts, or shares of one. */
+    stacked?: MPChartStack;
     /** 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. */
@@ -193,5 +213,5 @@ interface CartesianFrameProps extends CartesianChartProps {
 /**
  * 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 declare function CartesianFrame({ series, categories, xAxis, yAxis, horizontal, zoom, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, swatch, scale: givenScale, table: givenTable, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, labelColor, size: sizeProp, className, style, children, ...rest }: CartesianFrameProps): React.JSX.Element;
 export {};

package/dist/internal/ChartFrame.js

@@ -1,2 +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})}
+import{jsx as t,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useBoxSize as a}from"./box-size.js";import{useMPLocale as o,useMPMessages as i}from"./locale.js";import{useMPSize as r}from"./config.js";import{CHART as s}from"./messages/chart.js";import{TABLE as h}from"./messages/table.js";import{ChartLegend as c,ChartShell as u,LEGEND_OFF as d,LEGEND_ON as m,ChartTable as p,ChartTooltipPanel as f,useVisibility as x}from"./ChartChrome.js";import{VISUALLY_HIDDEN as g}from"./visually-hidden.js";import{CHART_FONT_SIZE as v,MARKER_RADIUS as y,PLOT_HEIGHT as b,bandScale as k,categoryAt as M,categoryCount as w,categoryExtent as z,fitsLast as S,formatCategory as C,formatShare as P,formatStatistic as A,seriesColor as $,seriesExtent as _,showsTick as B,textWidth as j,tickStride as R,tickTurn as N,toNumber as W,toValues as I,truncate as F,turnedBand as T,turnedRoom as D,turnedStep as L,valueScale as X,withReferences as Y}from"./chart.js";const V=[];function E({text:e,along:l,top:n,turn:a,fontSize:o}){return t("text",a<=0?{x:l,y:n+o+6,textAnchor:"middle",fill:H,fontSize:o,children:e}:{x:l,y:n+8,textAnchor:"end",dominantBaseline:"central",transform:`rotate(${-a} ${l} ${n+8})`,fill:H,fontSize:o,children:e})}const Z="var(--_mp-color-outline-variant)",U="var(--_mp-color-outline)",H="var(--_mp-color-on-surface-variant)";function K({plot:l,scale:n,horizontal:a,categoryPx:o,categoryScale:i,categoryValuePx:r,valuePx:s,tickTexts:h,categoryTexts:c,valueAxis:u,categoryAxis:d,fontSize:m,zeroPx:p,turn:f,tickBand:x}){const g=!1!==u?.grid&&!u?.hidden,v=!d?.hidden&&(d?.grid??null!==i),y=t=>i?r(i.ticks[t]):(a?l.top:l.left)+o(t),b=(t,e)=>f>0?L(f,m):t.reduce((t,e)=>Math.max(t,j(e,m)),1)+e,k=R(c.length,a?l.height:l.width,a?1.8*m:b(c,12)),M=R(n.ticks.length,a?l.width:l.height,a?b(h,16):2*m),w=c.length>1?Math.abs(y(1)-y(0)):l.width,z=n.ticks.length>1?Math.abs(s(n.ticks[1])-s(n.ticks[0])):l.height,C=S(c.length,k,w,a?1.8*m:f>0?L(f,m):j(c[c.length-1]??"",m)),P=S(n.ticks.length,M,z,a?f>0?L(f,m):j(h[h.length-1]??"",m):1.6*m);return e("g",{className:"mp-chart__axes",children:[n.ticks.map((o,i)=>{const r=s(o),c=Math.abs(o)<1e-9&&n.min<0,d=!u?.hidden&&B(i,n.ticks.length,M,P);return e("g",{children:[g?t("line",a?{x1:r,x2:r,y1:l.top,y2:l.top+l.height,stroke:c?U:Z,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:r,y2:r,stroke:c?U:Z,strokeWidth:1}):null,d?a?t(E,{text:h[i],along:r,top:l.top+l.height,turn:f,fontSize:m}):t("text",{x:l.left-8,y:r,textAnchor:"end",dominantBaseline:"central",fill:H,fontSize:m,children:h[i]}):null]},`v${i}`)}),c.map((n,o)=>{const i=y(o),r=!d?.hidden&&B(o,c.length,k,C);return v||r?e("g",{children:[v?t("line",a?{x1:l.left,x2:l.left+l.width,y1:i,y2:i,stroke:Z,strokeWidth:1}:{x1:i,x2:i,y1:l.top,y2:l.top+l.height,stroke:Z,strokeWidth:1}):null,r?a?t("text",{x:l.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fill:H,fontSize:m,children:n}):t(E,{text:n,along:i,top:l.top+l.height,turn:f,fontSize:m}):null]},`c${o}`):null}),t("line",a?{x1:p,x2:p,y1:l.top,y2:l.top+l.height,stroke:U,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:p,y2:p,stroke:U,strokeWidth:1}),u?.label&&!u.hidden?t("text",{x:a?l.left+l.width/2:m,y:a?l.top+l.height+x+m:l.top+l.height/2,textAnchor:"middle",dominantBaseline:a?"auto":"central",fill:H,fontSize:m,transform:a?void 0:`rotate(-90 ${m} ${l.top+l.height/2})`,children:u.label}):null,d?.label&&!d.hidden?t("text",{x:a?m:l.left+l.width/2,y:a?l.top+l.height/2:l.top+l.height+x+m,textAnchor:"middle",dominantBaseline:a?"central":"auto",fill:H,fontSize:m,transform:a?`rotate(-90 ${m} ${l.top+l.height/2})`:void 0,children:d.label}):null]})}function O(t,e){try{e?t.currentTarget.setPointerCapture(t.pointerId):t.currentTarget.releasePointerCapture(t.pointerId)}catch{}}function q(t,e,l){return(t??[]).map(t=>({...t,at:W(t.value),end:void 0===t.to?null:W(t.to)})).filter(t=>null!==t.at).map(t=>({at:e(t.at),to:null===t.end?null:e(t.end),upright:l,label:t.label,color:t.color?$(0,t.color):"var(--_mp-color-outline)",dashed:!1!==t.dashed}))}function G({marks:l,plot:n,pass:a,fontSize:o}){return 0===l.length?null:t("g",{className:`mp-chart__references mp-chart__references--${a}`,"aria-hidden":"true",children:l.map((l,i)=>{if("band"===a)return null===l.to?null:t("rect",{...(r=l.at,s=l.to,l.upright?{x:Math.min(r,s),y:n.top,width:Math.abs(s-r),height:n.height}:{x:n.left,y:Math.min(r,s),width:n.width,height:Math.abs(s-r)}),fill:l.color,opacity:.12},i);var r,s;const h=null===l.to?[l.at]:[l.at,l.to];return e("g",{children:[h.map(e=>t("line",{x1:l.upright?e:n.left,x2:l.upright?e:n.left+n.width,y1:l.upright?n.top:e,y2:l.upright?n.top+n.height:e,stroke:l.color,strokeWidth:1,strokeDasharray:l.dashed?"4 3":void 0},e)),void 0===l.label||null===l.label||""===l.label?null:t("text",{x:l.upright?l.at+4:n.left+n.width,y:l.upright?n.top+o:l.at-4,textAnchor:l.upright?"start":"end",fill:l.color,fontSize:o,children:l.label})]},i)})})}export function CartesianFrame({series:S,categories:B,xAxis:R,yAxis:W,horizontal:L=!1,zoom:E,stacked:Z=!1,includeZero:J=!0,bandRatio:Q=1,inset:tt=!1,headroom:et=0,markInset:lt=0,xScale:nt="band",marks:at,markRadius:ot=24,swatch:it,scale:rt,table:st,markTooltip:ht,height:ct,format:ut,locale:dt,label:mt,legend:pt,tooltip:ft,empty:xt,labelColor:gt="ink",size:vt,className:yt,style:bt,children:kt,...Mt}){const wt=r(vt),zt=o(dt),St=i(s,zt),Ct=i(h,zt),Pt=n.useRef(null),At=a(Pt),$t=At.width,_t=n.useId(),Bt=n.useId(),jt=x(S),[Rt,Nt]=n.useState(null),[Wt,It]=n.useState(null),[Ft,Tt]=n.useState(null),[Dt,Lt]=n.useState(null),Xt=n.useRef(null),Yt=t=>{Xt.current=t,Lt(t)},Vt=n.useCallback(t=>A(t,zt,ut,!0),[ut,zt]),Et=n.useMemo(()=>I(S),[S]),Zt=n.useMemo(()=>S.map((t,e)=>$(e,t.color)),[S]),Ut=n.useMemo(()=>S.map(t=>t.name),[S]),Ht=w(S),Kt=n.useMemo(()=>Array.from({length:Ht},(t,e)=>M(e,B,Et)),[Ht,B,Et]),Ot=!0!==E&&!1!==E&&E?E:{},qt=void 0!==E&&!1!==E&&"band"===nt,[Gt,Jt]=n.useState(()=>Ot.defaultRange??null),Qt=(void 0!==Ot.range?Ot.range:Gt)??null,te=qt&&null!==Qt&&0!==Ht?[Math.max(0,Math.min(Ht-1,Math.min(Qt[0],Qt[1]))),Math.max(0,Math.min(Ht-1,Math.max(Qt[0],Qt[1])))]:null,ee=te?te[0]:0,le=te?te[1]-te[0]+1:Ht,ne=null!==te,ae=n.useMemo(()=>ne?Et.map(t=>t.slice(ee,ee+le)):Et,[Et,ne,ee,le]),oe=n.useMemo(()=>ne?Kt.slice(ee,ee+le):Kt,[Kt,ne,ee,le]),ie=t=>{void 0===Ot.range&&Jt(t),Ot.onRangeChange?.(t)},re=ae.filter((t,e)=>jt.visible[e]),se="percent"===Z,he=se?{min:0,max:1}:_(re,Boolean(Z)),ce=v[wt],ue=W,de=R,me=rt??X(se?he:Y(he,ue?.references),{min:se?0:ue?.min,max:se?1:ue?.max,tickCount:ue?.tickCount??(se?4:void 0),includeZero:J}),pe="value"===nt?z(re,B):null,fe="value"===nt?X(Y(pe,de?.references),{min:de?.min,max:de?.max,tickCount:de?.tickCount,includeZero:!1}):null,xe=me.ticks.map((t,e)=>ue?.tickFormat?String(ue.tickFormat(t,e)):se?P(t,zt):Vt(t)),ge=fe?fe.ticks.map((t,e)=>de?.tickFormat?String(de.tickFormat(t,e)):A(t,zt,void 0,!0)):oe.map((t,e)=>de?.tickFormat?String(de.tickFormat(t,e)):C(t,zt)),ve=xe.reduce((t,e)=>Math.max(t,j(e,ce)),0),ye=ce+6,be=ue?.hidden?0:ve+10+(ue?.label?ye:0),ke="number"==typeof ct?ct:void 0===ct?b[wt]:At.height,Me=($t-(L?0:be)-16)/Math.max(1,le),we=L?ue:de,ze=L?xe:ge,Se=L?de?.hidden?0:ge.reduce((t,e)=>Math.max(t,Math.min(150,j(e,ce))),0)+10+(de?.label?ye:0):be,Ce=ze.reduce((t,e)=>Math.max(t,j(e,ce)),0),Pe=L?12+et:Math.max(8,Ce/2),Ae=($t-Se-Pe-2*lt)/Math.max(1,ze.length),$e=L||null!==fe,_e=we?.hidden?0:N(we?.tickLabels??($e?"truncate":"auto"),ze,ce,Ae),Be=Math.min(120,.5*ke),je=_e>0&&!L?ge.map((t,e)=>F(t,(t=>Math.min(D(_e,Be,ce),_e>=90?1/0:(Se+Ae*(t+(tt?0:.5)))/Math.cos(_e*Math.PI/180)))(e),ce)):fe?ge:L||Me-6>=2.4*ce?ge.map(t=>F(t,L?150:Me-6,ce)):ge,Re=je.reduce((t,e)=>Math.max(t,j(e,ce)),0),Ne=we?.hidden?0:_e>0?8+Math.min(Be,T(_e,L?ve:Re,ce))+4:ce+12,We=L?de?.hidden?0:Re+10+(de?.label?ye:0):be,Ie=Ne+(we?.hidden||!we?.label?0:ye),Fe=(L?de:ue)?.thickness??We,Te=we?.thickness??Ie,De=(L||_e>0?12+(L?et:0):Math.max(8,Re/2))+lt,Le=y[wt]+4+(L?0:et)+lt,Xe={left:Fe+lt,top:Le,width:Math.max(0,$t-Fe-lt-De),height:Math.max(0,ke-Le-Te-lt)},Ye=L?Xe.height:Xe.width,Ve=k(tt?Math.max(1,le-1):le,Ye,Q),Ee=n.useCallback(t=>tt?le<=1?Ye/2:Ye*t/(le-1):Ve.centre(t),[tt,le,Ye,Ve]),Ze=n.useCallback(t=>L?Xe.left+me.fraction(t)*Xe.width:Xe.top+(1-me.fraction(t))*Xe.height,[L,Xe.left,Xe.top,Xe.width,Xe.height,me]),Ue=n.useCallback(t=>L?Xe.top+(1-(fe?.fraction(t)??0))*Xe.height:Xe.left+(fe?.fraction(t)??0)*Xe.width,[L,Xe.left,Xe.top,Xe.width,Xe.height,fe]),He=n.useCallback((t,e)=>L?{x:Ze(e),y:Xe.top+Ee(t)}:{x:Xe.left+Ee(t),y:Ze(e)},[L,Ze,Ee,Xe.left,Xe.top]),Ke=Ze(Math.min(Math.max(0,me.min),me.max)),Oe=[...q(ue?.references,Ze,L),...fe?q(de?.references,Ue,!L):[]],qe=t=>t instanceof Date?C(t,zt):Vt(t),Ge=[...ue?.references??[],...fe?de?.references??[]:[]].filter(t=>void 0!==t.label&&null!==t.label&&""!==t.label),Je={plot:Xe,values:ae,visible:jt.visible,colors:Zt,labelInk:t=>"series"===gt?Zt[t]??H:"var(--_mp-color-on-surface)",scale:me,band:Ve,horizontal:L,valuePx:Ze,categoryPx:Ee,point:He,categoryScale:fe,categoryValuePx:Ue,zeroPx:Ke,categories:oe,format:Vt,share:t=>P(t,zt),size:wt},Qe=at?at(Je):V,tl=!1===ft?{mode:"none"}:!0===ft||void 0===ft?{}:ft,el=tl.mode??(at?"item":"index"),ll=(t,e)=>{const l=Pt.current;if(!l||0===le)return null;const n=l.getBoundingClientRect(),a=L?e-n.top-Xe.top:t-n.left-Xe.left;if(a<-Ve.step||a>Ye+Ve.step)return null;const o=tt?le<=1?0:Math.round(a/Ye*(le-1)):Math.floor(a/Ve.step);return Math.min(le-1,Math.max(0,o))},nl=null===Wt?null:Qe[Wt]??null,al=at?nl?nl.index:null:Rt,ol=at?Qe.length:le,il=()=>{Nt(null),It(null),Tt(null)},rl=t=>{const e=Xt.current;if(null===e)return;O(t,!1);const l=Math.min(e.start,e.to),n=Math.max(e.start,e.to);Yt(null),n-l+1>=Math.max(2,Ot.min??2)&&ie([ee+l,ee+n])},sl=t=>{const e=null===t?null:Math.min(ol-1,Math.max(0,t));at?It(e):Nt(e)},hl=t=>{Tt(null);sl(((at?Wt:Rt)??(t>0?-1:ol))+t)},cl=null!==al&&se?ae.reduce((t,e,l)=>{const n=jt.visible[l]?e[al]?.value:null;return t+(null!=n&&n>0?n:0)},0):0,ul=null===al?[]:S.flatMap((t,e)=>{if(!jt.visible[e]||nl&&nl.series!==e)return[];const l=ae[e]?.[al];return l&&null!==l.value?[{seriesIndex:e,name:t.name,color:l.color??Zt[e],value:l.value,formatted:se&&cl>0&&l.value>0?`${Vt(l.value)} · ${P(l.value/cl,zt)}`:Vt(l.value),label:l.label}]:[]}),dl=nl&&ht?ht(nl):null,ml=dl?dl.items:"item"===el&&ul.length>1&&null!==Ft?[ul.reduce((t,e)=>Math.abs(Ze(e.value??0)-Ft)<Math.abs(Ze(t.value??0)-Ft)?e:t)]:ul,pl="value"===tl.sort?[...ml].sort((t,e)=>(e.value??-1/0)-(t.value??-1/0)):ml,fl=!(tl.total??!0===Z)||dl||ml.length<2?void 0:Vt(ml.reduce((t,e)=>t+(e.value??0),0)),xl=dl?dl.heading:nl?C(ae[nl.series]?.[nl.index]?.x??B?.[nl.index]??nl.index,zt):null===al?void 0:C(oe[al]??al,zt),gl=nl?nl.x:L?Ze(ml[0]?.value??0):Xe.left+Ee(al??0),vl=nl?nl.y:L?Xe.top+Ee(al??0):Xe.top+Xe.height/2,yl=nl?(nl.x-Xe.left)/Math.max(1,Xe.width)>.6:(L?me.fraction(ml[0]?.value??0):Ee(al??0)/Math.max(1,Ye))>.6,bl=!1===pt?d:!0===pt||void 0===pt?m:pt,kl=!0===pt||!1!==pt&&S.length>1,Ml=bl.side??"bottom",wl={...Je,hovered:jt.hovered,activeIndex:al,marks:Qe,activeMark:nl},zl=0===le||null===he||"value"===nt&&null===pe;return t(u,{...Mt,size:wt,className:yt,style:bt,plotRef:Pt,name:mt??St.label,describedBy:zl?void 0:Ge.length>0?`${_t} ${Bt}`:_t,interactive:!zl,height:ct,legendSide:Ml,plotProps:{onPointerDown:qt&&!zl?t=>{const e=ll(t.clientX,t.clientY);null!==e&&(O(t,!0),il(),Yt({start:e,to:e}))}:void 0,onPointerMove:zl?void 0:t=>{if(null!==Xt.current){const e=ll(t.clientX,t.clientY)??Xt.current.to;return void(e!==Xt.current.to&&Yt({...Xt.current,to:e}))}"none"!==el&&(at?It(((t,e)=>{const l=Pt.current;if(!l||0===Qe.length)return null;const n=l.getBoundingClientRect(),a=t-n.left,o=e-n.top;let i=null,r=1/0,s=1/0;return Qe.forEach((t,e)=>{const l=Math.hypot(t.x-a,t.y-o),n=void 0===t.rx?Math.max(0,l-t.r):Math.hypot(Math.max(0,Math.abs(t.x-a)-t.rx),Math.max(0,Math.abs(t.y-o)-(t.ry??t.rx)));n<=ot&&(n<r||n===r&&l<s)&&(r=n,s=l,i=e)}),i})(t.clientX,t.clientY)):Nt(ll(t.clientX,t.clientY)),"item"!==el||at||Tt(((t,e)=>{const l=Pt.current;if(!l)return null;const n=l.getBoundingClientRect();return L?t-n.left:e-n.top})(t.clientX,t.clientY)))},onPointerUp:qt&&!zl?rl:void 0,onPointerCancel:qt&&!zl?()=>Yt(null):void 0,onPointerLeave:t=>{qt&&!zl&&rl(t),il()},onKeyDown:zl||"none"===el&&!qt?void 0:t=>{const e=L?"ArrowDown":"ArrowRight",l=L?"ArrowUp":"ArrowLeft";if(t.key===e)hl(1);else if(t.key===l)hl(-1);else if("Home"===t.key)sl(0);else if("End"===t.key)sl(ol-1);else{if("Escape"!==t.key)return;null===al&&null!==te?ie(null):il()}t.preventDefault()},onBlur:il},overlay:null===te||zl?null:t("button",{type:"button",onClick:()=>ie(null),className:["mp-chart__reset absolute end-0 top-0 z-10 cursor-pointer","text-mp-primary text-mp-label-medium rounded-mp-xs px-2 py-1","appearance-none border-0 bg-transparent [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),children:St.showAll}),tooltip:null!==al&&ml.length>0&&"none"!==el&&null===Dt?tl.render?t("div",{"aria-hidden":"true",className:"pointer-events-none absolute z-10",style:{left:gl,top:vl,transform:`translate(${yl?"calc(-100% - 12px)":"12px"}, -50%)`},children:tl.render({index:al,category:oe[al]??al,items:pl,total:fl})}):t(f,{heading:xl,items:pl,total:fl,totalLabel:St.total,x:gl,y:vl,flip:yl,size:wt}):null,legend:kl?t(c,{names:Ut,colors:Zt,options:bl,visibility:jt,size:wt,swatch:it,colorNames:"series"===gt,values:bl.showValue&&null!==al?S.map((t,e)=>{const l=ae[e]?.[al]?.value;return null==l?void 0:Vt(l)}):void 0}):null,status:{heading:xl,items:pl,total:fl,totalLabel:St.total},table:zl?null:e(l,{children:[st?.(_t)??t(p,{id:_t,caption:mt??St.table,corner:de?.label??St.category,categories:oe,names:Ut,values:ae,format:Vt,locale:zt,empty:Ct.empty}),0===Ge.length?null:t("ul",{id:Bt,className:g,children:Ge.map((t,l)=>e("li",{children:[t.label,":"," ",void 0===t.to?qe(t.value):`${qe(t.value)}–${qe(t.to)}`]},l))})]}),children:zl?t("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:xt??Ct.empty}):$t>0&&ke>0?e("svg",{width:$t,height:ke,viewBox:`0 0 ${$t} ${ke}`,"aria-hidden":"true",className:"block overflow-visible",children:[t(K,{plot:Xe,scale:me,horizontal:L,categoryPx:Ee,categoryScale:fe,categoryValuePx:Ue,valuePx:Ze,tickTexts:xe,categoryTexts:je,valueAxis:ue,categoryAxis:de,fontSize:ce,zeroPx:Ke,turn:_e,tickBand:Ne}),t(G,{marks:Oe,plot:Xe,pass:"band",fontSize:ce}),null===al||at||"index"!==el||!1===tl.crosshair?null:(()=>{const e=Ee(al);return t("line",L?{x1:Xe.left,x2:Xe.left+Xe.width,y1:Xe.top+e,y2:Xe.top+e,stroke:U,strokeWidth:1}:{x1:Xe.left+e,x2:Xe.left+e,y1:Xe.top,y2:Xe.top+Xe.height,stroke:U,strokeWidth:1})})(),kt(wl),t(G,{marks:Oe,plot:Xe,pass:"line",fontSize:ce}),null===Dt?null:(()=>{const e=[Dt.start,Dt.to].map(t=>(L?Xe.top:Xe.left)+Ee(t)).sort((t,e)=>t-e),l=Math.max(Ve.step,1),n=e[0]-l/2,a=e[1]-e[0]+l;return t("rect",{x:L?Xe.left:n,y:L?n:Xe.top,width:L?Xe.width:a,height:L?a:Xe.height,fill:"var(--_mp-color-primary)",fillOpacity:.12,stroke:"var(--_mp-color-primary)",strokeWidth:1})})()]}):null})}

package/dist/internal/FieldOutline.d.ts

@@ -32,7 +32,15 @@ export interface MPFieldLabelProps extends MPFieldOutlineProps {
      * for the type scale it rests at.
      */
     size: MPSize;
-    /** The control the label names. */
+    /**
+     * The control the label names, for a control that is not Base UI's own.
+     *
+     * Left out for a `Field.Control`, whose label follows the id the control is
+     * actually drawn with: a generated one in a server's markup, and the caller's
+     * `id` once the page has hydrated. Naming the caller's `id` here pointed the
+     * server's `<label for>` at an element that did not exist, so the label named
+     * nothing until hydration, and every field rendered once more to repair it.
+     */
     htmlFor?: string;
     /**
      * Whether the label is up in the notch. `false` rests it on the control's own

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 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","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"].filter(Boolean).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: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(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 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","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"].filter(Boolean).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,{...void 0===p?null:{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/RenderedLink.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+/**
+ * An `<a>`, or whatever a caller's `render` makes of it — a router's `Link`.
+ *
+ * A component rather than a `useRender` call where the link is drawn, because
+ * the link is one branch of a ternary and a hook cannot sit in one. The same
+ * shape as the control inside an `MPListItem`, which was the first `render` in
+ * the library to replace an inner link rather than a component's root.
+ *
+ * Under App Router a plain `<a>` to a page of the same site is a full page
+ * load: no client-side navigation, and no prefetch while the link is on
+ * screen. A router owns both through its own `Link`, which takes the same
+ * `href`, so `render={<Link />}` keeps the URL written once — on the
+ * component — and lets the router draw the element.
+ */
+export declare function RenderedLink({ render, props }: {
+    render: useRender.RenderProp | undefined;
+    props: Record<string, unknown>;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;