material-plus-ui 1.3.1 → 1.5.0

package/dist/internal/FieldOutline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{PROSE_TEXT as a}from"./scale.js";const i={xs:"left-1",sm:"left-2",md:"left-3",lg:"left-3",xl:"left-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(o,n){return t(e,{children:[o,n?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:e,required:t=!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:e?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(e,t)}):null})}export function MPFieldLabel({size:e,label:t,required:o=!1,htmlFor:p,shrunk:l=!0,multiline:u=!1}){return r(n.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)","absolute -translate-y-1/2 px-1 leading-none",i[e],l?"text-mp-body-small pointer-events-auto top-0 max-w-none":[a[e],"pointer-events-none max-w-[calc(100%-2rem)] truncate",u?s[e]:"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(t,o)})}export function useFloatingLabel({floating:r,filled:e,pinned:t=!1}){const[n,a]=o.useState(!1);return{shrunk:!r||e||n||t,focusProps:{onFocusCapture:()=>a(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||a(!1)}}}}
+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)}}}}

package/dist/internal/SupportingText.d.ts

@@ -20,4 +20,4 @@ export declare function MPSupportingText({ description, errorMessage, className
     errorMessage?: React.ReactNode;
     /** Whatever inset lines the text up with the control it belongs to. */
     className?: string;
-}): React.JSX.Element | null;
+}): React.JSX.Element;

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 n=["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:`${n} text-mp-error`,children:s}):o(a)?r(e.Description,{className:`${n} text-mp-on-surface-variant`,children:a}):null}
+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`})}

package/dist/internal/animate.d.ts

@@ -52,28 +52,11 @@ export declare const ANIM_BASE = "mp-anim";
 export declare const ANIMATION_CLASS: Record<MPAnimation, string>;
 /** A curve, as the stylesheet spells it. */
 export declare function easingValue(easing: MPEasing): string;
-/**
- * A duration, as the stylesheet spells it.
- *
- * A number is milliseconds and lands as milliseconds. Nothing at all lands as
- * the effect's own Material token, so a page that retunes its motion moves this
- * animation with it.
- */
-export declare function durationValue(duration: number | undefined, effect: MPAnimation, mode?: MPAnimateMode): string;
 /** A number is pixels; a string is already a CSS length. */
 export declare function lengthValue(value: number | string): string;
 /** `'infinite'` reaches CSS as the word; a count reaches it as the number. */
 export declare function repeatValue(repeat: MPAnimateRepeat): string;
 export declare function isInfinite(repeat: MPAnimateRepeat | undefined): boolean;
-/**
- * `normal`, `reverse`, `alternate`, `alternate-reverse` — the four CSS already
- * has, assembled from the two props that mean something to a caller.
- *
- * `mode="out"` is a reversed run rather than a keyframe of its own, which is
- * also why a reversed animation ends held on its own first frame: `fill-mode`
- * is `both`, so a faded-out element stays faded out instead of snapping back.
- */
-export declare function directionValue(mode: MPAnimateMode, alternate: boolean | undefined): string;
 export interface AnimationSlotOptions {
     /** Which effect's tokens to fall back to, and which keyframe to run. */
     effect: MPAnimation;

package/dist/internal/animate.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export const ANIM_BASE="mp-anim";export const ANIMATION_CLASS={fade:"mp-anim-fade",grow:"mp-anim-scale",slide:"mp-anim-slide",zoom:"mp-anim-scale",rotate:"mp-anim-rotate",blink:"mp-anim-blink"};const n={fade:{in:"medium2",out:"short4"},grow:{in:"medium4",out:"short4"},slide:{in:"medium4",out:"short4"},zoom:{in:"medium4",out:"short4"},rotate:{in:"long2",out:"medium2"},blink:{in:"extra-long4",out:"extra-long4"}},t={fade:"emphasized-decelerate",grow:"emphasized-decelerate",slide:"emphasized-decelerate",zoom:"emphasized-decelerate",rotate:"emphasized-decelerate",blink:"standard"};export function easingValue(e){return`var(--mp-sys-motion-easing-${e})`}export function durationValue(e,t,i="in"){return void 0!==e?`${e}ms`:`var(--mp-sys-motion-duration-${n[t][i]})`}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n=e.mode??"in",i={"--_mp-anim-duration":durationValue(e.duration,e.effect,n),"--_mp-anim-delay":`${e.delay}ms`,"--_mp-anim-ease":easingValue(e.easing??t[e.effect]),"--_mp-anim-repeat":repeatValue(e.repeat),"--_mp-anim-direction":directionValue(n,e.alternate)};return void 0!==e.opacity&&(i["--_mp-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(i["--_mp-anim-scale"]=String(e.scale)),void 0!==e.x&&(i["--_mp-anim-x"]=e.x),void 0!==e.y&&(i["--_mp-anim-y"]=e.y),void 0!==e.angle&&(i["--_mp-anim-angle"]=e.angle),void 0!==e.angleTo&&(i["--_mp-anim-angle-to"]=e.angleTo),i}export function slideOffsets(e,n){const t=lengthValue(n),i="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:t};case"left":return{x:i,y:"0px"};default:return{x:t,y:"0px"}}}const i="(prefers-reduced-motion: reduce)";function a(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(i);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)}function r(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(i).matches}function o(){return!1}export function usePrefersReducedMotion(){return e.useSyncExternalStore(a,r,o)}export function useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o}){const s=e.useRef(null),[u,m]=e.useState("mount"===n),[c,d]=e.useState(0),l=e.useCallback(()=>{m(!0),d(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=s.current;if(!e||0===c)return;const n=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[c]),e.useEffect(()=>{if("visible"!==n)return;const e=s.current;if(!e||"undefined"==typeof IntersectionObserver)return void m(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),i&&t.disconnect()):i||m(!1)},{threshold:a});return t.observe(e),()=>t.disconnect()},[n,i,a,l]),e.useEffect(()=>{"manual"===n&&(t?l():m(!1))},[n,t,l]);const p=e.useCallback(()=>{o&&m(!1)},[o]),f="hover"===n?{onPointerEnter:l,onFocus:l,onPointerLeave:p,onBlur:p}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:u&&!r?"running":"paused",started:u,handlers:f}}export function useAnimateElement(e){const{trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o,...s}=e,u=useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o});return{ref:u.ref,className:`mp-anim ${ANIMATION_CLASS[s.effect]}`,style:{...animationSlots(s),"--_mp-anim-state":u.state},props:{...u.handlers,"data-mp-animation":s.effect,"data-mp-state":u.state}}}
+import*as e from"react";export const ANIM_BASE="mp-anim";export const ANIMATION_CLASS={fade:"mp-anim-fade",grow:"mp-anim-scale",slide:"mp-anim-slide",zoom:"mp-anim-scale",rotate:"mp-anim-rotate",blink:"mp-anim-blink"};const n={fade:{in:"medium2",out:"short4"},grow:{in:"medium4",out:"short4"},slide:{in:"medium4",out:"short4"},zoom:{in:"medium4",out:"short4"},rotate:{in:"long2",out:"medium2"},blink:{in:"extra-long4",out:"extra-long4"}},t={fade:"emphasized-decelerate",grow:"emphasized-decelerate",slide:"emphasized-decelerate",zoom:"emphasized-decelerate",rotate:"emphasized-decelerate",blink:"standard"};export function easingValue(e){return`var(--mp-sys-motion-easing-${e})`}function i(e,t,i="in"){return void 0!==e?`${e}ms`:`var(--mp-sys-motion-duration-${n[t][i]})`}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}function a(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n=e.mode??"in",r={"--_mp-anim-duration":i(e.duration,e.effect,n),"--_mp-anim-delay":`${e.delay}ms`,"--_mp-anim-ease":easingValue(e.easing??t[e.effect]),"--_mp-anim-repeat":repeatValue(e.repeat),"--_mp-anim-direction":a(n,e.alternate)};return void 0!==e.opacity&&(r["--_mp-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(r["--_mp-anim-scale"]=String(e.scale)),void 0!==e.x&&(r["--_mp-anim-x"]=e.x),void 0!==e.y&&(r["--_mp-anim-y"]=e.y),void 0!==e.angle&&(r["--_mp-anim-angle"]=e.angle),void 0!==e.angleTo&&(r["--_mp-anim-angle-to"]=e.angleTo),r}export function slideOffsets(e,n){const t=lengthValue(n),i="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:t};case"left":return{x:i,y:"0px"};default:return{x:t,y:"0px"}}}const r="(prefers-reduced-motion: reduce)";function o(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(r);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)}function s(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(r).matches}function m(){return!1}export function usePrefersReducedMotion(){return e.useSyncExternalStore(o,s,m)}export function useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o}){const s=e.useRef(null),[m,u]=e.useState("mount"===n),[c,d]=e.useState(0),l=e.useCallback(()=>{u(!0),d(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=s.current;if(!e||0===c)return;const n=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[c]),e.useEffect(()=>{if("visible"!==n)return;const e=s.current;if(!e||"undefined"==typeof IntersectionObserver)return void u(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),i&&t.disconnect()):i||u(!1)},{threshold:a});return t.observe(e),()=>t.disconnect()},[n,i,a,l]),e.useEffect(()=>{"manual"===n&&(t?l():u(!1))},[n,t,l]);const p=e.useCallback(()=>{o&&u(!1)},[o]),f="hover"===n?{onPointerEnter:l,onFocus:l,onPointerLeave:p,onBlur:p}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:m&&!r?"running":"paused",started:m,handlers:f}}export function useAnimateElement(e){const{trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o,...s}=e,m=useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o});return{ref:m.ref,className:`mp-anim ${ANIMATION_CLASS[s.effect]}`,style:{...animationSlots(s),"--_mp-anim-state":m.state},props:{...m.handlers,"data-mp-animation":s.effect,"data-mp-state":m.state}}}

package/dist/internal/avatar-group.d.ts

@@ -0,0 +1,22 @@
+/**
+ * What an avatar inherits from the stack around it.
+ *
+ * Its own module rather than a file `MPAvatarGroup` exports, for the reason
+ * `button-group.ts` gives: both sides import it — the group provides the
+ * context and the avatar reads it — so putting it in either component would
+ * make one of them pull in the other, and an `MPAvatar` that dragged a group
+ * nobody used into the bundle is dead weight on every page with a face on it.
+ *
+ * Every field is optional and every one of them may legitimately be `undefined`.
+ * An avatar reads the group as a *fallback*, so "not set on the group" has to
+ * keep meaning "use the avatar's own default" rather than turning into one.
+ */
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../types.js';
+export interface MPAvatarGroupContextValue {
+    size?: MPSize;
+    shape?: 'circle' | 'square';
+    variant?: MPVariant;
+    color?: MPColor;
+}
+export declare const MPAvatarGroupContext: React.Context<MPAvatarGroupContextValue | null>;

package/dist/internal/avatar-group.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";export const MPAvatarGroupContext=/*@__PURE__*/t.createContext(null);

package/dist/internal/button-group.d.ts

@@ -11,7 +11,7 @@
  * meaning "use the button's own default" rather than turning into one.
  */
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../types.js';
+import type { MPColor, MPOrientation, MPSize, MPVariant } from '../types.js';
 export interface MPButtonGroupContextValue {
     variant?: MPVariant;
     size?: MPSize;
@@ -19,3 +19,22 @@ export interface MPButtonGroupContextValue {
     disabled?: boolean;
 }
 export declare const MPButtonGroupContext: React.Context<MPButtonGroupContextValue | null>;
+/**
+ * The corners that face a neighbour.
+ *
+ * MD3's connected button group keeps the run's *outer* corners fully round and
+ * cuts the inner ones back to `corner-small`, so the row reads as one shape that
+ * has been divided rather than as three pills that happen to be adjacent. The
+ * seam is a 2px gap rather than a border, which is what lets a filled group work
+ * at all: two filled buttons sharing an edge merge into one blob, and a hairline
+ * between them would be the only line on the page drawn between two fills.
+ *
+ * Logical properties (`s`/`e`) rather than left/right: under RTL the first
+ * button is on the right, and `rounded-l-none` would flatten the wrong side.
+ *
+ * It is here rather than in `MPButtonGroup`, which was its first reader, because
+ * `MPToggleGroup` is a connected run of exactly the same shape — and two copies
+ * of one table is how a run of toggles ends up cut differently from a run of
+ * buttons beside it.
+ */
+export declare const GROUP_JOIN: Record<MPOrientation, string>;

package/dist/internal/button-group.js

@@ -1,2 +1,2 @@
 "use client";
-import*as t from"react";export const MPButtonGroupContext=/*@__PURE__*/t.createContext(null);
+import*as t from"react";export const MPButtonGroupContext=/*@__PURE__*/t.createContext(null);export const GROUP_JOIN={horizontal:"[&>*:not(:first-child)]:rounded-s-mp-sm [&>*:not(:last-child)]:rounded-e-mp-sm",vertical:"[&>*:not(:first-child)]:rounded-t-mp-sm [&>*:not(:last-child)]:rounded-b-mp-sm"};

package/dist/internal/color.d.ts

@@ -58,10 +58,6 @@ export interface MPColorValue {
 /** The three ways the picker will write a colour back out. */
 export type MPColorFormat = 'hex' | 'rgb' | 'hsl';
 export declare function clamp(value: number, min: number, max: number): number;
-export declare function hsvToRgb({ h, s, v }: MPHsv): MPRgb;
-export declare function rgbToHsv({ r, g, b }: MPRgb): MPHsv;
-export declare function rgbToHsl({ r, g, b }: MPRgb): MPHsl;
-export declare function hslToRgb({ h, s, l }: MPHsl): MPRgb;
 /**
  * A CSS colour string, or `null` if it is not one this understands.
  *
@@ -71,7 +67,6 @@ export declare function hslToRgb({ h, s, l }: MPHsl): MPRgb;
  * honest way back from `rebeccapurple` to a point on the panel.
  */
 export declare function parseColor(input: string): MPColorValue | null;
-export declare function rgbToHex({ r, g, b }: MPRgb, alpha?: number): string;
 /**
  * The value the component hands back, in whichever notation was asked for.
  *

package/dist/internal/color.js

@@ -1 +1 @@
-export function clamp(r,t,n){return r<t?t:r>n?n:r}function r(r){const t=r%360;return t<0?t+360:t}export function hsvToRgb({h:t,s:n,v:o}){const e=r(t)/60,a=clamp(n,0,100)/100,s=clamp(o,0,100)/100,c=s*a,l=c*(1-Math.abs(e%2-1)),u=s-c,i=Math.floor(e)%6,[g,h,f]=[[c,l,0],[l,c,0],[0,c,l],[0,l,c],[l,0,c],[c,0,l]][i];return{r:Math.round(255*(g+u)),g:Math.round(255*(h+u)),b:Math.round(255*(f+u))}}export function rgbToHsv({r:t,g:n,b:o}){const e=clamp(t,0,255)/255,a=clamp(n,0,255)/255,s=clamp(o,0,255)/255,c=Math.max(e,a,s),l=c-Math.min(e,a,s);let u=0;return 0!==l&&(u=c===e?(a-s)/l%6:c===a?(s-e)/l+2:(e-a)/l+4),{h:r(60*u),s:0===c?0:l/c*100,v:100*c}}export function rgbToHsl({r:r,g:t,b:n}){const{h:o,s:e,v:a}=rgbToHsv({r:r,g:t,b:n}),s=a/100,c=s*(1-e/100/2),l=Math.min(c,1-c);return{h:o,s:0===l?0:(s-c)/l*100,l:100*c}}export function hslToRgb({h:r,s:t,l:n}){const o=clamp(n,0,100)/100,e=o+clamp(t,0,100)/100*Math.min(o,1-o);return hsvToRgb({h:r,s:0===e?0:2*(1-o/e)*100,v:100*e})}const t=/^#?([0-9a-f]{3,8})$/i;export function parseColor(r){const n=r.trim().toLowerCase();if(!n)return null;if(n.startsWith("#")||t.test(n))return function(r){const n=t.exec(r.trim());if(!n)return null;const o=n[1],e=3===o.length||4===o.length?[...o].map(r=>r+r).join(""):o;if(6!==e.length&&8!==e.length)return null;const a=r=>parseInt(e.slice(2*r,2*r+2),16);return{hsv:rgbToHsv({r:a(0),g:a(1),b:a(2)}),alpha:8===e.length?a(3)/255:1}}(n);const o=/^(rgba?|hsla?)\((.*)\)$/.exec(n);if(!o)return null;const[,e,a]=o,s=function(r){return r.match(/-?[\d.]+%?/g)??[]}(a),c=s.map(r=>parseFloat(r));if(c.length<3||c.some(Number.isNaN))return null;const l=function(r,t){return t.length<=3?1:clamp(r[3]?.endsWith("%")?t[3]/100:t[3],0,1)}(s,c);return e.startsWith("rgb")?{hsv:rgbToHsv({r:c[0],g:c[1],b:c[2]}),alpha:l}:{hsv:rgbToHsv(hslToRgb({h:c[0],s:c[1],l:c[2]})),alpha:l}}function n(r){return clamp(Math.round(r),0,255).toString(16).padStart(2,"0")}export function rgbToHex({r:r,g:t,b:o},e=1){const a=`#${n(r)}${n(t)}${n(o)}`;return e>=1?a:`${a}${n(255*e)}`}function o(r){return String(Math.round(100*clamp(r,0,1))/100)}export function formatColor(r,t,n){const e=hsvToRgb(r);if("hex"===n)return rgbToHex(e,t);if("rgb"===n){const r=`${e.r}, ${e.g}, ${e.b}`;return t>=1?`rgb(${r})`:`rgba(${r}, ${o(t)})`}const{h:a,s:s,l:c}=rgbToHsl(e),l=`${Math.round(a)}, ${Math.round(s)}%, ${Math.round(c)}%`;return t>=1?`hsl(${l})`:`hsla(${l}, ${o(t)})`}export function cssColor(r,t=1){const{r:n,g:e,b:a}=hsvToRgb(r);return t>=1?`rgb(${n}, ${e}, ${a})`:`rgba(${n}, ${e}, ${a}, ${o(t)})`}export function readableInk(r){const{r:t,g:n,b:o}=hsvToRgb(r),e=r=>{const t=r/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4};return.2126*e(t)+.7152*e(n)+.0722*e(o)>.42?"#000000":"#ffffff"}export const DEFAULT_SWATCHES=["#000000","#4b5563","#9ca3af","#ffffff","#ef4444","#f97316","#f59e0b","#84cc16","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#d946ef","#ec4899"];export const CHECKER_BACKGROUND={backgroundImage:"linear-gradient(45deg, var(--_mp-color-outline-variant) 25%, transparent 25%), linear-gradient(-45deg, var(--_mp-color-outline-variant) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_mp-color-outline-variant) 75%), linear-gradient(-45deg, transparent 75%, var(--_mp-color-outline-variant) 75%)",backgroundSize:"8px 8px",backgroundPosition:"0 0, 0 4px, 4px -4px, -4px 0"};
+export function clamp(n,t,r){return n<t?t:n>r?r:n}function n(n){const t=n%360;return t<0?t+360:t}function t({h:t,s:r,v:a}){const o=n(t)/60,e=clamp(r,0,100)/100,c=clamp(a,0,100)/100,u=c*e,l=u*(1-Math.abs(o%2-1)),i=c-u,s=Math.floor(o)%6,[f,h,p]=[[u,l,0],[l,u,0],[0,u,l],[0,l,u],[l,0,u],[u,0,l]][s];return{r:Math.round(255*(f+i)),g:Math.round(255*(h+i)),b:Math.round(255*(p+i))}}function r({r:t,g:r,b:a}){const o=clamp(t,0,255)/255,e=clamp(r,0,255)/255,c=clamp(a,0,255)/255,u=Math.max(o,e,c),l=u-Math.min(o,e,c);let i=0;return 0!==l&&(i=u===o?(e-c)/l%6:u===e?(c-o)/l+2:(o-e)/l+4),{h:n(60*i),s:0===u?0:l/u*100,v:100*u}}function a({h:n,s:r,l:a}){const o=clamp(a,0,100)/100,e=o+clamp(r,0,100)/100*Math.min(o,1-o);return t({h:n,s:0===e?0:2*(1-o/e)*100,v:100*e})}const o=/^#?([0-9a-f]{3,8})$/i;export function parseColor(n){const t=n.trim().toLowerCase();if(!t)return null;if(t.startsWith("#")||o.test(t))return function(n){const t=o.exec(n.trim());if(!t)return null;const a=t[1],e=3===a.length||4===a.length?[...a].map(n=>n+n).join(""):a;if(6!==e.length&&8!==e.length)return null;const c=n=>parseInt(e.slice(2*n,2*n+2),16);return{hsv:r({r:c(0),g:c(1),b:c(2)}),alpha:8===e.length?c(3)/255:1}}(t);const e=/^(rgba?|hsla?)\((.*)\)$/.exec(t);if(!e)return null;const[,c,u]=e,l=function(n){return n.match(/-?[\d.]+%?/g)??[]}(u),i=l.map(n=>parseFloat(n));if(i.length<3||i.some(Number.isNaN))return null;const s=function(n,t){return t.length<=3?1:clamp(n[3]?.endsWith("%")?t[3]/100:t[3],0,1)}(l,i);return c.startsWith("rgb")?{hsv:r({r:i[0],g:i[1],b:i[2]}),alpha:s}:{hsv:r(a({h:i[0],s:i[1],l:i[2]})),alpha:s}}function e(n){return clamp(Math.round(n),0,255).toString(16).padStart(2,"0")}function c(n){return String(Math.round(100*clamp(n,0,1))/100)}export function formatColor(n,a,o){const u=t(n);if("hex"===o)return function({r:n,g:t,b:r},a=1){const o=`#${e(n)}${e(t)}${e(r)}`;return a>=1?o:`${o}${e(255*a)}`}(u,a);if("rgb"===o){const n=`${u.r}, ${u.g}, ${u.b}`;return a>=1?`rgb(${n})`:`rgba(${n}, ${c(a)})`}const{h:l,s:i,l:s}=function({r:n,g:t,b:a}){const{h:o,s:e,v:c}=r({r:n,g:t,b:a}),u=c/100,l=u*(1-e/100/2),i=Math.min(l,1-l);return{h:o,s:0===i?0:(u-l)/i*100,l:100*l}}(u),f=`${Math.round(l)}, ${Math.round(i)}%, ${Math.round(s)}%`;return a>=1?`hsl(${f})`:`hsla(${f}, ${c(a)})`}export function cssColor(n,r=1){const{r:a,g:o,b:e}=t(n);return r>=1?`rgb(${a}, ${o}, ${e})`:`rgba(${a}, ${o}, ${e}, ${c(r)})`}export function readableInk(n){const{r:r,g:a,b:o}=t(n),e=n=>{const t=n/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4};return.2126*e(r)+.7152*e(a)+.0722*e(o)>.42?"#000000":"#ffffff"}export const DEFAULT_SWATCHES=["#000000","#4b5563","#9ca3af","#ffffff","#ef4444","#f97316","#f59e0b","#84cc16","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#d946ef","#ec4899"];export const CHECKER_BACKGROUND={backgroundImage:"linear-gradient(45deg, var(--_mp-color-outline-variant) 25%, transparent 25%), linear-gradient(-45deg, var(--_mp-color-outline-variant) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_mp-color-outline-variant) 75%), linear-gradient(-45deg, transparent 75%, var(--_mp-color-outline-variant) 75%)",backgroundSize:"8px 8px",backgroundPosition:"0 0, 0 4px, 4px -4px, -4px 0"};

package/dist/internal/date.js

@@ -1 +1 @@
-export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),daysInMonth(n.getFullYear(),n.getMonth()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}const t=new Map;export function dateFormatter(e,r){const n=`${e??""}\0${JSON.stringify(r)}`;let o=t.get(n);return o||(o=new Intl.DateTimeFormat(e,r),t.set(n,o)),o}export function formatDate(t,e,r){return isValidDate(t)?dateFormatter(e,r).format(t):""}const e=Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(t,r){const n=dateFormatter(t,r);return[...new Set(e.map(t=>n.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const e=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${e(t.getMonth()+1)}-${e(t.getDate())}`}export function toISOTime(t,e=!1){const r=t=>String(t).padStart(2,"0"),n=`${r(t.getHours())}:${r(t.getMinutes())}`;return e?`${n}:${r(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const r=makeDate(2021,7,1),n=new Map;export function weekdayLabels(t,e,o="narrow"){const a=`w ${t??""} ${e} ${o}`;let s=n.get(a);if(!s){const i=dateFormatter(t,{weekday:o});s=Array.from({length:7},(t,n)=>i.format(addDays(r,(e+n)%7))),n.set(a,s)}return s}export function monthLabels(t,e="short"){const r=`m ${t??""} ${e}`;let o=n.get(r);if(!o){const a=dateFormatter(t,{month:e});o=Array.from({length:12},(t,e)=>a.format(makeDate(2021,e,1))),n.set(r,o)}return o}export function isMonthBeforeYear(t){const e=dateFormatter(t,{year:"numeric",month:"long"}).formatToParts(r);return e.findIndex(t=>"month"===t.type)<e.findIndex(t=>"year"===t.type)}export function isHour12(t){const e=dateFormatter(t,{hour:"numeric"}).resolvedOptions();return e.hourCycle?"h11"===e.hourCycle||"h12"===e.hourCycle:!0===e.hour12}export function meridiemLabels(t){const e=dateFormatter(t,{hour:"numeric",hour12:!0}),n=t=>{const n=e.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return n?.value??(t<12?"AM":"PM")};return[n(9),n(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}
+export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),daysInMonth(n.getFullYear(),n.getMonth()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}function t(t,e,r){if(t.set(e,r),t.size>64){const e=t.keys().next();e.done||t.delete(e.value)}return r}const e=new Map;export function dateFormatter(r,n){const o=`${r??""}\0${JSON.stringify(n)}`,a=e.get(o);return a||t(e,o,new Intl.DateTimeFormat(r,n))}export function formatDate(t,e,r){return isValidDate(t)?dateFormatter(e,r).format(t):""}const r=Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(t,e){const n=dateFormatter(t,e);return[...new Set(r.map(t=>n.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const e=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${e(t.getMonth()+1)}-${e(t.getDate())}`}export function toISOTime(t,e=!1){const r=t=>String(t).padStart(2,"0"),n=`${r(t.getHours())}:${r(t.getMinutes())}`;return e?`${n}:${r(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const n=makeDate(2021,7,1),o=new Map;export function weekdayLabels(e,r,a="narrow"){const u=`w ${e??""} ${r} ${a}`,i=o.get(u);if(i)return i;const s=dateFormatter(e,{weekday:a});return t(o,u,Array.from({length:7},(t,e)=>s.format(addDays(n,(r+e)%7))))}export function monthLabels(e,r="short"){const n=`m ${e??""} ${r}`,a=o.get(n);if(a)return a;const u=dateFormatter(e,{month:r});return t(o,n,Array.from({length:12},(t,e)=>u.format(makeDate(2021,e,1))))}export function isMonthBeforeYear(t){const e=dateFormatter(t,{year:"numeric",month:"long"}).formatToParts(n);return e.findIndex(t=>"month"===t.type)<e.findIndex(t=>"year"===t.type)}export function isHour12(t){const e=dateFormatter(t,{hour:"numeric"}).resolvedOptions();return e.hourCycle?"h11"===e.hourCycle||"h12"===e.hourCycle:!0===e.hour12}export function meridiemLabels(t){const e=dateFormatter(t,{hour:"numeric",hour12:!0}),r=t=>{const r=e.formatToParts(withTime(n,{hours:t})).find(t=>"dayPeriod"===t.type);return r?.value??(t<12?"AM":"PM")};return[r(9),r(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}

package/dist/internal/i18n.d.ts

@@ -39,7 +39,7 @@
  * the languages it speaks. Once it has, `locale="ko"` resolves through exactly
  * the path it always did.
  *
- * English left too, for the same reason one step smaller. It is nine modules
+ * English left too, for the same reason one step smaller. It is thirteen modules
  * under `internal/messages/`, one per namespace, because a bundler that can drop
  * a module it can also drop an export — and cannot drop a property. Held as one
  * object, English was 1.75 kB that every component carried whole: `MPButton`
@@ -151,6 +151,101 @@ export interface MPMessages {
         start: string;
         end: string;
     };
+    /**
+     * MPNumberField.
+     *
+     * The two steppers, which are a plus and a minus and have no words of their
+     * own — the same case the pagination's chevrons and the chat's delivery marks
+     * are in. They are read out and never drawn.
+     */
+    numberField: {
+        increase: string;
+        decrease: string;
+    };
+    /**
+     * MPCarousel.
+     *
+     * Every string here is read out and never drawn: the strip is pictures, the
+     * arrows are chevrons and the marks under it are dots. `{index}` and
+     * `{total}` are filled in by `fillMessage`, and they are named rather than
+     * positional for the reason the pagination's are — a language that counts the
+     * total first is not a language this table can serve with an argument order.
+     */
+    carousel: {
+        /** The name of the `region` the strip is inside. */
+        label: string;
+        /** The two arrows. */
+        previous: string;
+        next: string;
+        /** One slide, and its own position mark. `Slide 2 of 5`. */
+        slide: string;
+    };
+    /**
+     * MPBreadcrumb.
+     *
+     * Both read out and never drawn: a trail's steps are the caller's words, and
+     * these are the two things around them that are not.
+     */
+    breadcrumb: {
+        /** The name of the `<nav>` the trail is inside. */
+        label: string;
+        /** The `…` that puts the folded middle back. */
+        expand: string;
+    };
+    /**
+     * MPCombobox.
+     *
+     * Both **drawn**, which is what makes them belong here rather than in a prop:
+     * a Korean page whose search box says *No matches* has answered in a language
+     * the reader did not ask a question in. `{label}` is the text they typed, and
+     * is filled in by `fillMessage`.
+     */
+    combobox: {
+        /** The line where the rows would be, when nothing matched. */
+        empty: string;
+        /** The row that offers what was typed as a value of its own. */
+        add: string;
+    };
+    /**
+     * MPTable.
+     *
+     * One string, drawn across the whole width where the rows would be. A table
+     * that says *No data* in the middle of a translated page is the one part of it
+     * that was not translated.
+     */
+    table: {
+        empty: string;
+    };
+    /**
+     * MPFilePicker.
+     *
+     * The line inside the box, and the largest piece of text this table holds. It
+     * is drawn, it is an instruction, and it is the whole of what the component
+     * tells a reader to do.
+     */
+    filePicker: {
+        prompt: string;
+    };
+    /**
+     * MPTextLink.
+     *
+     * The sentence after a link that takes over the window. Read out and never
+     * drawn — the arrow says it to a reader who can see it, and this says it to
+     * everybody else.
+     */
+    textLink: {
+        newTab: string;
+    };
+    /**
+     * MPOverlay.
+     *
+     * The name of a modal region that may hold nothing readable at all — a bare
+     * spinner, a `clear` sheet. Without it a screen reader announces the region as
+     * nothing, which is why the component defaults it rather than requiring it.
+     */
+    overlay: {
+        label: string;
+    };
     /** MPAlert. */
     alert: {
         /** The × in the corner, which has no text of its own. */
@@ -234,6 +329,108 @@ export interface MPMessages {
         /** The line above the button, saying why the content is covered. */
         notice: string;
     };
+    /**
+     * MPPageLayout, and the parts of a page it arranges.
+     *
+     * One namespace for the skeleton rather than one per component, for the reason
+     * the pickers share theirs: they are one vocabulary, written by whoever
+     * translates a page's chrome, and a caller who has translated the word for a
+     * sidebar has translated the button that opens it in the same breath.
+     */
+    layout: {
+        /**
+         * The link that jumps past the navigation, drawn only while it holds the
+         * focus.
+         *
+         * Drawn rather than only announced, which makes it one of the few strings
+         * here that a sighted keyboard reader actually sees — and the one it would
+         * be least forgivable to leave in English, because the readers it exists for
+         * are the ones who cannot skip it.
+         */
+        skipToContent: string;
+        /**
+         * What an `MPSidebar` is called when nothing named it.
+         *
+         * Read out and never drawn. Every `<aside>` needs a name and a page with two
+         * of them *must* have one each, or a screen reader offers two regions called
+         * "complementary" — which is exactly why this is a default rather than a
+         * required prop.
+         */
+        sidebar: string;
+        /** The hamburger, which is a drawing and has no word of its own. */
+        openSidebar: string;
+        /** The same button once the drawer is open. */
+        closeSidebar: string;
+        /** The handle on a resizable column's inner edge. */
+        resizeSidebar: string;
+    };
+    /**
+     * MPTransfer.
+     *
+     * Every string here is **drawn**, which is unusual in this table and is what
+     * makes the namespace necessary: the two headings, the filter's placeholder
+     * and the line an empty list shows are all read off the screen, and a Korean
+     * page with a column headed *Available* is a page the component broke.
+     *
+     * The two arrows are the exception and are read out rather than drawn, for the
+     * reason the pagination's steppers are.
+     */
+    transfer: {
+        /** The heading over the list of things that have not been chosen. */
+        source: string;
+        /** And over the list of things that have. */
+        target: string;
+        /** The arrow that sends the ticked rows across. */
+        toTarget: string;
+        /** And the one that brings them back. */
+        toSource: string;
+        /** The filter above each list. */
+        search: string;
+        /** What a list with nothing in it says. */
+        empty: string;
+    };
+    /**
+     * MPCommandPalette.
+     *
+     * Three strings, two of them drawn: a palette that says *Type a command or
+     * search…* to a Korean reader is a palette that has told them, in the first
+     * thing they see, that it is not for them.
+     */
+    command: {
+        /** The dialog's accessible name. It has no visible title to take one from. */
+        label: string;
+        /** The placeholder in the field. */
+        search: string;
+        /** The line where the rows would be, when nothing matched. */
+        empty: string;
+    };
+    /**
+     * MPColorPicker.
+     *
+     * The one control in the library whose parts have **nowhere to take a name
+     * from**: a saturation square, a hue rail and an opacity rail are three
+     * draggable rectangles, and without these they are three draggable rectangles
+     * to a screen reader too.
+     *
+     * `empty` is the exception and is drawn — it is what the trigger reads before
+     * a colour has been chosen.
+     */
+    colorPicker: {
+        /** The saturation/brightness square. */
+        area: string;
+        /** The hue rail beside it. */
+        hue: string;
+        /** The opacity rail, when `alpha` is on. */
+        alpha: string;
+        /** The field the value can be typed into. */
+        value: string;
+        /** The grid of ready-made colours. */
+        swatches: string;
+        /** The × that empties the control. */
+        clear: string;
+        /** What the trigger reads before anything has been chosen. */
+        empty: string;
+    };
 }
 /** A translation may fill in as much or as little of the table as it has. */
 export type MPPartialMessages = {
@@ -269,10 +466,10 @@ export interface MPLocale {
 /**
  * One namespace's English strings, carrying the name they answer to.
  *
- * The nine of them live in `internal/messages/`, one to a module, and a
+ * The thirteen of them live in `internal/messages/`, one to a module, and a
  * component imports the one it speaks. That is the whole reason this type
  * exists: `resolveNamespace` below is handed the English table rather than
- * looking it up, so the eight tables a component does not use are eight modules
+ * looking it up, so the twelve tables a component does not use are twelve modules
  * nothing imports.
  *
  * The name travels with the strings rather than beside them, so a call site is
@@ -313,7 +510,7 @@ export declare function registerMPMessages(...locales: MPLocale[]): void;
  * A namespace at a time, so a language that has one and not another keeps
  * English for the rest rather than losing both. That was already how the merge
  * worked; what changed is that the namespaces are no longer merged all at once,
- * because a component that reads one of them should not carry the other eight.
+ * because a component that reads one of them should not carry the other twelve.
  *
  * Note that this is only about the words in the table. The dates themselves are
  * formatted by `Intl` against the same tag, and `Intl` speaks every language the

package/dist/internal/keys.d.ts

@@ -0,0 +1,72 @@
+/**
+ * What keyboard the reader is on, and how a shortcut is spelled.
+ *
+ * Two components speak this vocabulary and they speak it in opposite
+ * directions: [MPShortcut](../components/shortcut/MPShortcut.tsx) *writes* a
+ * shortcut down, and [MPCommandPalette](../components/command-palette/MPCommandPalette.tsx)
+ * *reads* one off a real keyboard event. Both files already said that the two
+ * had to agree — "a shortcut a component displays and one it binds have to be
+ * spelled the same way, or the label on the screen is a claim nobody checked" —
+ * and both then answered the question separately.
+ *
+ * They disagreed. The palette tested `navigator.userAgent` alone, which is the
+ * one of the three sources a browser is most willing to freeze or lie about, so
+ * a page could draw `⌘K` and bind Ctrl+K. Written once, they cannot.
+ *
+ * Nothing here is exported from `src/index.ts`. It is the library talking to
+ * itself, in the sense `internal/` always means.
+ */
+/** The three real platforms a shortcut is spelled for. */
+export type MPResolvedOS = 'mac' | 'windows' | 'linux';
+/**
+ * What the browser says it is running on.
+ *
+ * `userAgentData.platform` is the modern spelling and `navigator.platform` the
+ * deprecated one that every browser still answers; the user agent string is the
+ * last resort. All three are matched at once because the question is coarse —
+ * which of three key caps to print — and getting it slightly wrong is a label,
+ * not a bug.
+ */
+export declare function detectOS(): MPResolvedOS;
+/**
+ * `useSyncExternalStore` rather than `useEffect` plus state, and rather than
+ * reading `navigator` during render.
+ *
+ * Reading it during render is a hydration mismatch waiting to happen: the server
+ * has no `navigator`, so it would render `Ctrl` and the client would render `⌘`
+ * into the same markup. This hook is the one API that tells React the two are
+ * *meant* to differ — it hydrates with the server's answer and re-renders with
+ * the browser's, which is exactly the sequence a Mac reader sees.
+ */
+export declare function useDetectedOS(): MPResolvedOS;
+/**
+ * Splits the string form. Empty segments are what `'Ctrl++'` leaves behind, and
+ * dropping them is why the array form exists for that case.
+ */
+export declare function tokenizeShortcut(keys: string | string[]): string[];
+/**
+ * Whether a keyboard event is the shortcut this string names.
+ *
+ * The same vocabulary `MPShortcut` draws, read rather than written — and the
+ * same tokenizer, so a shortcut that can be displayed is a shortcut that can be
+ * matched.
+ *
+ * ## `Mod` is a name for a key, not a fifth modifier
+ *
+ * It resolves to Command on a Mac and Control everywhere else, so `Mod+K` and
+ * `Ctrl+K` are the *same combination* on Windows — and the check has to say so.
+ * Tested as a modifier of its own, they contradicted each other: `Ctrl+K` on
+ * Windows held Control, `Mod` was not named, and "is Control down without Mod
+ * being asked for" answered no. `Ctrl+K` simply never matched anywhere except a
+ * Mac, on the component whose whole job is to answer a shortcut.
+ *
+ * So `Mod` is folded into whichever real key it stands for, and the four
+ * modifiers are then compared as themselves.
+ *
+ * Each is checked in **both** directions. A shortcut that fired with extra
+ * modifiers held would take a combination the page had given to something else.
+ *
+ * The platform is passed rather than sniffed, so a caller reads it through the
+ * same hook the label does and the two cannot end up on different answers.
+ */
+export declare function matchesShortcut(event: KeyboardEvent, shortcut: string | string[], os: MPResolvedOS): boolean;

package/dist/internal/keys.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";export function detectOS(){if("undefined"==typeof navigator)return"windows";const t=navigator.userAgentData,e=`${t?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(e)?"mac":/win/i.test(e)?"windows":"linux"}function e(){return()=>{}}function r(){return"windows"}export function useDetectedOS(){return t.useSyncExternalStore(e,detectOS,r)}export function tokenizeShortcut(t){return Array.isArray(t)?t.map(t=>t.trim()).filter(Boolean):t.split("+").map(t=>t.trim()).filter(Boolean)}export function matchesShortcut(t,e,r){const n=tokenizeShortcut(e).map(t=>t.toLowerCase()),o=n[n.length-1];if(void 0===o)return!1;const a=new Set(n.slice(0,-1)),i=a.has("mod"),s=a.has("ctrl")||i&&"mac"!==r,c=a.has("meta")||i&&"mac"===r;return s===t.ctrlKey&&c===t.metaKey&&(a.has("shift")===t.shiftKey&&a.has("alt")===t.altKey&&t.key.toLowerCase()===o)}

package/dist/internal/length.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A length, said the way this library says lengths.
+ *
+ * One rule, everywhere: **a number is CSS pixels and a string is already a CSS
+ * length.** Twelve components had written it out inline and four more had a
+ * private `toLength` of their own, which is sixteen copies of a sentence that is
+ * either true of the whole library or true of nothing.
+ *
+ * They all happened to agree. That is the argument for collecting them rather
+ * than against it — sixteen agreeing copies are sixteen chances for the
+ * seventeenth to be written slightly differently, and the difference would be a
+ * prop that quietly took a number to mean something else.
+ *
+ * Nothing here is exported from `src/index.ts`. It is the library talking to
+ * itself, in the sense `internal/` always means.
+ */
+/** A number is pixels; a string is whatever it says; nothing is nothing. */
+export declare function cssLength(value: number | string): string;
+export declare function cssLength(value: number | string | undefined | null): string | undefined;
+/**
+ * A CSS length string, in pixels, or `undefined` for one this cannot resolve.
+ *
+ * The two components that let a reader *drag* a size — `MPSidebar` and
+ * `MPPanes` — both have to turn a written bound into a number to clamp against,
+ * and both had the same regex and the same unit arithmetic. This is that,
+ * once.
+ *
+ * `undefined` rather than a fallback, so each caller decides what an
+ * unresolvable bound means. They do not agree, and should not: a pane with an
+ * unreadable `minSize` is a pane with no minimum, and a sidebar with an
+ * unreadable one still has a default to fall back to. A parser that picked for
+ * them would have to pick wrongly for one of them.
+ *
+ * ## What the units are measured against
+ *
+ * `%` is a share of `extent`, which is whatever the caller is dividing up — the
+ * split's own width, the window's. `rem` is the document's font size and `em` is
+ * `root`'s, which is the distinction that makes `em` worth accepting at all: a
+ * bound written in `em` is a bound in the *component's* text, and a component
+ * inside a scaled-down panel means something different by it than the page does.
+ */
+export declare function pixelsIn(value: string, extent?: number, root?: Element | null): number | undefined;

package/dist/internal/length.js

@@ -0,0 +1 @@
+export function cssLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const e=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function pixelsIn(t,n,o){const r=e.exec(t);if(!r)return;const u=Number(r[1]);if(!Number.isNaN(u))switch(r[2]){case"px":return u;case"%":return void 0===n?void 0:n*u/100;case"rem":return"undefined"==typeof document?void 0:u*(Number.parseFloat(getComputedStyle(document.documentElement).fontSize)||16);default:return"undefined"!=typeof document&&o?u*(Number.parseFloat(getComputedStyle(o).fontSize)||16):void 0}}

package/dist/internal/link.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The two questions a component has to ask about a URL it did not write.
+ *
+ * Four components render an `<a>` whose `target` a caller can set, and three of
+ * them had worked out the same `rel` independently — which is three chances for
+ * the fourth to forget, and the fourth did. One of them also renders a URL that
+ * arrives from somewhere else entirely, which is a different question with a
+ * worse failure.
+ *
+ * Nothing here is exported from `src/index.ts`. It is the library talking to
+ * itself, in the sense `internal/` always means.
+ */
+/**
+ * The `rel` a link opening in a new tab needs, unless the caller named one.
+ *
+ * `target="_blank"` hands the opened page a `window.opener` back into this one
+ * unless it is told not to. Modern browsers imply `noopener` and older ones do
+ * not; `noreferrer` is never implied by anything, and is what stops the address
+ * of the page the reader was on travelling to wherever they just went.
+ *
+ * A caller's own `rel` **replaces** this rather than extending it, which is the
+ * bargain these components already documented: a row that also needs `nofollow`
+ * says `rel="noopener noreferrer nofollow"` and means it. The alternative —
+ * merging — is a component quietly adding tokens to an attribute the caller
+ * wrote out in full.
+ */
+export declare function linkRel(target: string | undefined, rel: string | undefined): string | undefined;
+/**
+ * A URL if it is one a reader can safely be sent to, and nothing if it is not.
+ *
+ * This is for the URLs that arrive from **somewhere else** — the link preview on
+ * a message somebody else sent — rather than for the ones an application writes
+ * into its own navigation. React renders a `javascript:` href with a development
+ * warning and no more, so on a page built out of user-generated content a
+ * hostile preview URL is a one-click script execution.
+ *
+ * A URL with no scheme at all is relative, and a relative URL cannot escalate to
+ * anything: it resolves against the page it is already on. Those pass.
+ *
+ * Rejected means `undefined`, so the element renders with no `href` — visibly
+ * not a link, rather than a link that quietly goes nowhere. Half-sanitising a
+ * URL into something that still navigates is how a filter becomes a bypass.
+ */
+export declare function safeHref(href: string | undefined): string | undefined;

package/dist/internal/link.js

@@ -0,0 +1 @@
+export function linkRel(e,t){return void 0!==t?t:"_blank"===e?"noopener noreferrer":void 0}const e=/[\u0000-\u0020\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]/g,t=/^([a-z][a-z0-9+.-]*):/i,u=new Set(["http:","https:","mailto:","tel:"]);export function safeHref(r){if(!r)return;const n=t.exec(r.replace(e,""));return n?u.has(`${n[1].toLowerCase()}:`)?r:void 0:r}