plass-ui 1.7.0 → 1.8.0

package/dist/internal/data-table.d.ts

@@ -34,9 +34,9 @@ export interface PlassSort {
  * **Strings compare with `localeCompare`.** `'a' < 'B'` is false by code point,
  * which puts every capitalised word above every lower-case one and sorts `Ösi`
  * after `Zoe`. A list of names a reader cannot scan is a list that was sorted
- * for the machine.
+ * for the machine. `locale` is the collation, and left out it is the runtime's.
  */
-export declare function compareValues(a: unknown, b: unknown, direction?: 1 | -1): number;
+export declare function compareValues(a: unknown, b: unknown, direction?: 1 | -1, locale?: Intl.LocalesArgument): number;
 /**
  * What pressing a column heading does next.
  *

package/dist/internal/data-table.js

@@ -1 +1 @@
-export function compareValues(e,n,t=1){const o=null==e||""===e,r=null==n||""===n;return o||r?o&&r?0:o?1:-1:function compareKnown(e,n){return"number"==typeof e&&"number"==typeof n?e-n:"boolean"==typeof e&&"boolean"==typeof n?Number(e)-Number(n):e instanceof Date&&n instanceof Date?e.getTime()-n.getTime():String(e).localeCompare(String(n))}(e,n)*t}export function nextSort(e,n){return null===e||e.key!==n?{key:n,direction:"asc"}:"asc"===e.direction?{key:n,direction:"desc"}:null}export function keysBetween(e,n,t){const o=e.indexOf(n),r=e.indexOf(t);return-1===o||-1===r?[]:o<=r?e.slice(o,r+1):e.slice(r,o+1)}export function pageBounds(e,n,t){const o=Math.max(1,Math.ceil(e/t)),r=(Math.min(Math.max(1,Math.trunc(n)),o)-1)*t;return[r,Math.min(r+t,e)]}
+export function compareValues(e,n,t=1,o){const r=null==e||""===e,i=null==n||""===n;return r||i?r&&i?0:r?1:-1:function compareKnown(e,n,t){return"number"==typeof e&&"number"==typeof n?e-n:"boolean"==typeof e&&"boolean"==typeof n?Number(e)-Number(n):e instanceof Date&&n instanceof Date?e.getTime()-n.getTime():String(e).localeCompare(String(n),t)}(e,n,o)*t}export function nextSort(e,n){return null===e||e.key!==n?{key:n,direction:"asc"}:"asc"===e.direction?{key:n,direction:"desc"}:null}export function keysBetween(e,n,t){const o=e.indexOf(n),r=e.indexOf(t);return-1===o||-1===r?[]:o<=r?e.slice(o,r+1):e.slice(r,o+1)}export function pageBounds(e,n,t){const o=Math.max(1,Math.ceil(e/t)),r=(Math.min(Math.max(1,Math.trunc(n)),o)-1)*t;return[r,Math.min(r+t,e)]}

package/dist/internal/date.d.ts

@@ -54,6 +54,15 @@ export declare function startOfYear(date: Date): Date;
 export declare function daysInMonth(year: number, month: number): number;
 /** Today, at midnight. The one place the pickers read the clock for a *date*. */
 export declare function today(): Date;
+/**
+ * Today as the clock reads in `timeZone`, at local midnight — the day it is
+ * there, as the local date everything else here works on. Left out, it is
+ * {@link today}.
+ *
+ * A server render reads the clock in UTC rather than in whatever zone the
+ * machine is set to, so the browser hydrating it can ask for the same day.
+ */
+export declare function todayIn(timeZone: string | undefined): Date;
 export declare function addDays(date: Date, amount: number): Date;
 /**
  * Months, with the day of the month clamped rather than allowed to overflow.

package/dist/internal/date.js

@@ -1 +1 @@
-import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,n){const r=new Date(0);return r.setFullYear(t,e,n),r.setHours(0,0,0,0),r}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 startOfYear(t){return makeDate(t.getFullYear(),0,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 n=new Date(t.getTime());return n.setDate(n.getDate()+e),n}export function addMonths(t,e){const n=new Date(t.getTime()),r=makeDate(t.getFullYear(),t.getMonth()+e,1);return n.setFullYear(r.getFullYear(),r.getMonth(),Math.min(t.getDate(),daysInMonth(r.getFullYear(),r.getMonth()))),n}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 clampDate(t,e,n){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(n)&&t.getTime()>n.getTime()?new Date(n.getTime()):t}export function isDayOutside(t,e,n){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(n)&&compareDay(t,n)>0}export function isMonthOutside(t,e,n){const r=t.getFullYear(),o=t.getMonth();return isDayOutside(makeDate(r,o,daysInMonth(r,o)),e,null)||isDayOutside(makeDate(r,o,1),null,n)}export function isYearOutside(t,e,n){const r=t.getFullYear();return isValidDate(e)&&r<e.getFullYear()||isValidDate(n)&&r>n.getFullYear()}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const n=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(n/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(n/60);return[t,t+59]}if("second"===t)return[n,n];const r=e.getHours()<12?0:43200;return[r,r+43200-1]}export function withTime(t,e){const n=new Date(t.getTime());return n.setHours(e.hours??n.getHours(),e.minutes??n.getMinutes(),e.seconds??n.getSeconds(),0),n}export function clampMoment(t,e,n,r){const o=r?1e3:6e4,floor=t=>withTime(t,{seconds:r?t.getSeconds():0});if(isValidDate(e)&&t.getTime()<e.getTime()){const t=floor(e),r=t.getTime()<e.getTime()?new Date(t.getTime()+o):t;return isValidDate(n)&&r.getTime()>n.getTime()?new Date(e.getTime()):r}if(isValidDate(n)&&t.getTime()>n.getTime()){const t=floor(n);return isValidDate(e)&&t.getTime()<e.getTime()?new Date(n.getTime()):t}return t}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const n=startOfMonth(t),r=(n.getDay()-e+7)%7,o=addDays(n,-r);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,n)=>addDays(o,7*e+n)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,n,r){return isValidDate(e)?t(n,r).format(e):""}const e=/* @__PURE__ */[...Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58)),new Date(2027,0,22,12,58,58)];export function displaySamples(n,r){const o=t(n,r);return[...new Set(e.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOMonth(t){return`${String(t.getFullYear()).padStart(4,"0")}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),n=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${n}:${pad(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const n=/* @__PURE__ */makeDate(2021,7,1);export function weekdayLabels(e,r,o="short"){const a=t(e,{weekday:o});return Array.from({length:7},(t,e)=>a.format(addDays(n,(r+e)%7)))}export function monthLabels(e,n="short"){const r=t(e,{month:n});return Array.from({length:12},(t,e)=>r.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const r=t(e,{year:"numeric",month:"long"}).formatToParts(n);return r.findIndex(t=>"month"===t.type)<r.findIndex(t=>"year"===t.type)}export function isHour12(e){const n=t(e,{hour:"numeric"}).resolvedOptions();return n.hourCycle?"h11"===n.hourCycle||"h12"===n.hourCycle:!0===n.hour12}export function meridiemLabels(e){const r=t(e,{hour:"numeric",hour12:!0}),read=t=>{const e=r.formatToParts(withTime(n,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,n=new Intl.Locale(e),r="function"==typeof n.getWeekInfo?n.getWeekInfo():n.weekInfo;if("number"==typeof r?.firstDay)return r.firstDay%7}catch{}return 0}
+import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,n){const r=new Date(0);return r.setFullYear(t,e,n),r.setHours(0,0,0,0),r}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 startOfYear(t){return makeDate(t.getFullYear(),0,1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}const e={year:"numeric",month:"numeric",day:"numeric"};export function todayIn(n){if(void 0===n)return today();const r=t("en-US",{...e,timeZone:n}).formatToParts(new Date),part=t=>Number(r.find(e=>e.type===t)?.value);return makeDate(part("year"),part("month")-1,part("day"))}export function addDays(t,e){const n=new Date(t.getTime());return n.setDate(n.getDate()+e),n}export function addMonths(t,e){const n=new Date(t.getTime()),r=makeDate(t.getFullYear(),t.getMonth()+e,1);return n.setFullYear(r.getFullYear(),r.getMonth(),Math.min(t.getDate(),daysInMonth(r.getFullYear(),r.getMonth()))),n}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 clampDate(t,e,n){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(n)&&t.getTime()>n.getTime()?new Date(n.getTime()):t}export function isDayOutside(t,e,n){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(n)&&compareDay(t,n)>0}export function isMonthOutside(t,e,n){const r=t.getFullYear(),o=t.getMonth();return isDayOutside(makeDate(r,o,daysInMonth(r,o)),e,null)||isDayOutside(makeDate(r,o,1),null,n)}export function isYearOutside(t,e,n){const r=t.getFullYear();return isValidDate(e)&&r<e.getFullYear()||isValidDate(n)&&r>n.getFullYear()}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const n=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(n/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(n/60);return[t,t+59]}if("second"===t)return[n,n];const r=e.getHours()<12?0:43200;return[r,r+43200-1]}export function withTime(t,e){const n=new Date(t.getTime());return n.setHours(e.hours??n.getHours(),e.minutes??n.getMinutes(),e.seconds??n.getSeconds(),0),n}export function clampMoment(t,e,n,r){const o=r?1e3:6e4,floor=t=>withTime(t,{seconds:r?t.getSeconds():0});if(isValidDate(e)&&t.getTime()<e.getTime()){const t=floor(e),r=t.getTime()<e.getTime()?new Date(t.getTime()+o):t;return isValidDate(n)&&r.getTime()>n.getTime()?new Date(e.getTime()):r}if(isValidDate(n)&&t.getTime()>n.getTime()){const t=floor(n);return isValidDate(e)&&t.getTime()<e.getTime()?new Date(n.getTime()):t}return t}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const n=startOfMonth(t),r=(n.getDay()-e+7)%7,o=addDays(n,-r);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,n)=>addDays(o,7*e+n)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,n,r){return isValidDate(e)?t(n,r).format(e):""}const n=/* @__PURE__ */[...Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58)),new Date(2027,0,22,12,58,58)];export function displaySamples(e,r){const o=t(e,r);return[...new Set(n.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOMonth(t){return`${String(t.getFullYear()).padStart(4,"0")}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),n=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${n}:${pad(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}function weekdayOrigin(){return makeDate(2021,7,1)}export function weekdayLabels(e,n,r="short"){const o=t(e,{weekday:r}),a=weekdayOrigin();return Array.from({length:7},(t,e)=>o.format(addDays(a,(n+e)%7)))}export function monthLabels(e,n="short"){const r=t(e,{month:n});return Array.from({length:12},(t,e)=>r.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const n=t(e,{year:"numeric",month:"long"}).formatToParts(weekdayOrigin());return n.findIndex(t=>"month"===t.type)<n.findIndex(t=>"year"===t.type)}export function isHour12(e){const n=t(e,{hour:"numeric"}).resolvedOptions();return n.hourCycle?"h11"===n.hourCycle||"h12"===n.hourCycle:!0===n.hour12}export function meridiemLabels(e){const n=t(e,{hour:"numeric",hour12:!0}),r=weekdayOrigin(),read=t=>{const e=n.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}const r=new Map;export function localeWeekStart(t){let e=r.get(t);return void 0===e&&(e=function readWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,n=new Intl.Locale(e),r="function"==typeof n.getWeekInfo?n.getWeekInfo():n.weekInfo;if("number"==typeof r?.firstDay)return r.firstDay%7}catch{}return 0}(t),r.set(t,e)),e}

package/dist/internal/defaults.d.ts

@@ -53,7 +53,14 @@ export interface PlassDefaults {
      * to cut, so its label stays above the row whatever this says.
      */
     labelPlacement?: PlassFieldLabelPlacement;
-    /** The BCP 47 tag the date and time components format and read against. */
+    /**
+     * The BCP 47 tag the date and time components format and read against.
+     *
+     * Left out, it is the browser's own, which a server cannot ask for: a server
+     * render and its hydration write `en-US`, and the components switch once
+     * hydration is done. A server-rendered page that names it paints the reader's
+     * format from the start.
+     */
     locale?: string;
     /** Which day their weeks start on, as `Date` counts them — Sunday is `0`. */
     weekStartsOn?: PlassWeekday;
@@ -85,3 +92,29 @@ export declare const DefaultsContext: React.Context<PlassDefaults>;
  * compact application.
  */
 export declare function useDefaults(): PlassDefaults;
+/** What a server render and its hydration format in when nobody named a locale. */
+declare const hydrationLocale = "en-US";
+/**
+ * The locale to format in, given the one a component was told.
+ *
+ * `given` comes back as it is. Left out, it is `undefined` — the runtime's own
+ * locale — except in a server render and its hydration, where it is `en-US`.
+ * For the few components that do not read the provider's locale; the rest call
+ * {@link useLocale}.
+ */
+export declare function useRuntimeLocale<T extends Intl.LocalesArgument>(given: T): T | typeof hydrationLocale;
+/**
+ * The locale a component formats in: its own `locale` prop, then the nearest
+ * provider's, then the runtime's, which a server render and its hydration pin
+ * to `en-US`. See {@link useRuntimeLocale}.
+ */
+export declare function useLocale<T extends Intl.LocalesArgument = string | undefined>(own?: T): T | string | undefined;
+/** What a server render and its hydration read the clock in. */
+declare const hydrationTimeZone = "UTC";
+/**
+ * The zone to read the clock in: `undefined` — the runtime's own — except in a
+ * server render and its hydration, where it is `UTC`. `todayIn` in
+ * `internal/date.ts` turns it into a day.
+ */
+export declare function useRuntimeTimeZone(): typeof hydrationTimeZone | undefined;
+export {};

package/dist/internal/defaults.js

@@ -1 +1 @@
-"use client";import*as t from"react";const e=/* @__PURE__ */Object.freeze({});export const DefaultsContext=/* @__PURE__ */t.createContext(e);export function useDefaults(){return t.useContext(DefaultsContext)}
+"use client";import*as e from"react";const n=/* @__PURE__ */Object.freeze({});export const DefaultsContext=/* @__PURE__ */e.createContext(n);export function useDefaults(){return e.useContext(DefaultsContext)}function subscribeToNothing(){return unsubscribeFromNothing}function unsubscribeFromNothing(){}export function useRuntimeLocale(n){return e.useSyncExternalStore(subscribeToNothing,()=>n,()=>n??"en-US")}export function useLocale(n){const t=e.useContext(DefaultsContext).locale;return useRuntimeLocale(n??t)}function runtimeTimeZone(){}function pinnedTimeZone(){return"UTC"}export function useRuntimeTimeZone(){return e.useSyncExternalStore(subscribeToNothing,runtimeTimeZone,pinnedTimeZone)}

package/dist/internal/direction.d.ts

@@ -1,4 +1,10 @@
 /** The two directions a document can run in. */
 export type PlassDirection = 'ltr' | 'rtl';
-/** Which way the document runs, re-rendering when it turns over. */
-export declare function useDocumentDirection(): PlassDirection;
+/**
+ * Which way the document runs, re-rendering when it turns over.
+ *
+ * `active: false` answers `ltr` without reading the document or listening to
+ * it, for a component that needs the direction only in one of its states and
+ * should cost nothing in the others.
+ */
+export declare function useDocumentDirection(active?: boolean): PlassDirection;

package/dist/internal/direction.js

@@ -1 +1 @@
-"use client";import*as e from"react";function read(){return"undefined"==typeof document?"ltr":"rtl"===getComputedStyle(document.documentElement).direction?"rtl":"ltr"}let t=null,n=null;const r=new Set;function snapshot(){return null===t&&(t=read()),t}function onServer(){return"ltr"}function subscribe(e){return r.add(e),n||"undefined"==typeof document||(n=new MutationObserver(()=>{const e=read();e!==t&&(t=e,r.forEach(e=>e()))}),n.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class","style"]})),()=>{r.delete(e),0===r.size&&(n?.disconnect(),n=null,t=null)}}export function useDocumentDirection(){return e.useSyncExternalStore(subscribe,snapshot,onServer)}
+"use client";import*as e from"react";function read(){return"undefined"==typeof document?"ltr":"rtl"===getComputedStyle(document.documentElement).direction?"rtl":"ltr"}let t=null,n=null;const r=new Set;function snapshot(){return null===t&&(t=read()),t}function onServer(){return"ltr"}function subscribe(e){return r.add(e),n||"undefined"==typeof document||(n=new MutationObserver(()=>{const e=read();e!==t&&(t=e,r.forEach(e=>e()))}),n.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class","style"]})),()=>{r.delete(e),0===r.size&&(n?.disconnect(),n=null,t=null)}}function idle(){return()=>{}}export function useDocumentDirection(t=!0){return e.useSyncExternalStore(t?subscribe:idle,t?snapshot:onServer,onServer)}

package/dist/internal/form.d.ts

@@ -53,6 +53,49 @@ export declare const FadedContext: React.Context<boolean>;
  * a control in one draws itself exactly as it would with `disabled` of its own.
  */
 export declare function useDisabled(disabled: boolean | undefined): boolean;
+/** The two attributes a caller names a control with. */
+export interface ControlNaming {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * A caller's `aria-label` and `aria-labelledby`, for the control a field's
+ * other props are carried past.
+ *
+ * A labelled field spreads what it does not know onto the stack around it, and
+ * a `<div>` with no role is named by neither: a select in a toolbar, with no
+ * room for a `label`, had no way to name its trigger.
+ *
+ * Base UI merges a caller's props over its own, and its own `aria-labelledby`
+ * points at the visible label, which would outrank an `aria-label`. So an
+ * `aria-label` given without an `aria-labelledby` comes with that key holding
+ * `undefined`, which takes Base UI's away and leaves the `aria-label` as the
+ * name in the label's place, as an `aria-label` outranks a `<label>` on a
+ * native control. A caller's `aria-labelledby` outranks both. With neither,
+ * neither key is there, and the label goes on naming the control.
+ *
+ * A meter and the three progress indicators take them on their root for the
+ * same reason: Base UI's `Meter.Root` and `Progress.Root` point their own
+ * `aria-labelledby` at the visible label.
+ */
+export declare function controlNaming(label: string | undefined, labelledBy: string | undefined): ControlNaming;
+/**
+ * The `aria-labelledby` that names a control by a caller's `aria-label`, and
+ * the hidden words it points at, for a Base UI part `controlNaming` cannot
+ * reach.
+ *
+ * A checkbox, a switch, a radio, and the group around a slider's thumbs or a
+ * code's slots read `aria-labelledby` themselves and fall back to the visible
+ * label for anything but a reference of the caller's, `undefined` included. So
+ * an `aria-label` given without an `aria-labelledby` is written into a hidden
+ * node as well, and the part is pointed at that, which leaves the `aria-label`
+ * as the name in the label's place. A caller's `aria-labelledby` comes back as
+ * it was, and with neither there is no reference and no node.
+ */
+export declare function useLabelReference(label: string | undefined, labelledBy: string | undefined): {
+    labelledBy: string | undefined;
+    node: React.ReactNode;
+};
 /**
  * Whether `element` is inside a disabled `<fieldset>`, re-rendering when a
  * fieldset around it turns `disabled` on or off.

package/dist/internal/form.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Field as r}from"@base-ui/react/field";export const FormReportContext=/* @__PURE__ */o.createContext(null);export function useFormReport(e,t,n=!0){const r=o.useContext(FormReportContext),s=o.useRef(t);o.useEffect(()=>{s.current=t}),o.useEffect(()=>{if(!r||!e||!n)return;const entry=()=>s.current();return r.set(e,entry),()=>{r.get(e)===entry&&r.delete(e)}},[r,e,n])}export const FieldsetDisabledContext=/* @__PURE__ */o.createContext(!1);export const FadedContext=/* @__PURE__ */o.createContext(!1);export function useDisabled(e){return o.useContext(FieldsetDisabledContext)||!0===e}function fieldsetsAround(e){const t=[];for(let n=e.parentElement?.closest("fieldset");n;n=n.parentElement?.closest("fieldset"))t.push(n);return t}export function useFieldsetDisabled(e){const t=o.useCallback(t=>{if(!e)return()=>{};const n=new MutationObserver(t);return fieldsetsAround(e).forEach(e=>n.observe(e,{attributes:!0,attributeFilter:["disabled"]})),()=>n.disconnect()},[e]);return o.useSyncExternalStore(t,()=>null!==e&&fieldsetsAround(e).some(t=>t.disabled&&!t.querySelector(":scope > legend")?.contains(e)),()=>!1)}export function leaveFormControl(e){e?.dispatchEvent(new FocusEvent("focusout",{bubbles:!0}))}export const FormControl=/* @__PURE__ */o.forwardRef(function FormControl({name:o,value:s,required:i,disabled:u,standIn:a},l){const d=Array.isArray(s),c=d?s.length>0&&s.every(e=>""!==e):""!==s;return useFormReport(o,()=>[...s],d&&!u),n(t,{children:[e(r.Control,{ref:l,name:o,value:d?c?s.join("\n"):"":s,required:i,disabled:u,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",className:"pointer-events-none absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onFocus:()=>a()?.focus(),render:d?t=>e("input",{...t,name:void 0}):void 0}),d&&o?s.map((t,n)=>e("input",{type:"hidden",name:o,value:t,disabled:u},n)):null]})});
+import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Field as r}from"@base-ui/react/field";export const FormReportContext=/* @__PURE__ */o.createContext(null);export function useFormReport(e,t,n=!0){const r=o.useContext(FormReportContext),s=o.useRef(t);o.useEffect(()=>{s.current=t}),o.useEffect(()=>{if(!r||!e||!n)return;const entry=()=>s.current();return r.set(e,entry),()=>{r.get(e)===entry&&r.delete(e)}},[r,e,n])}export const FieldsetDisabledContext=/* @__PURE__ */o.createContext(!1);export const FadedContext=/* @__PURE__ */o.createContext(!1);export function useDisabled(e){return o.useContext(FieldsetDisabledContext)||!0===e}export function controlNaming(e,t){return{...void 0===e?null:{"aria-label":e},...void 0!==t||e?{"aria-labelledby":t}:null}}export function useLabelReference(t,n){const r=o.useId();return void 0===n&&t?{labelledBy:r,node:e("span",{id:r,hidden:!0,children:t})}:{labelledBy:n,node:null}}function fieldsetsAround(e){const t=[];for(let n=e.parentElement?.closest("fieldset");n;n=n.parentElement?.closest("fieldset"))t.push(n);return t}export function useFieldsetDisabled(e){const t=o.useCallback(t=>{if(!e)return()=>{};const n=new MutationObserver(t);return fieldsetsAround(e).forEach(e=>n.observe(e,{attributes:!0,attributeFilter:["disabled"]})),()=>n.disconnect()},[e]);return o.useSyncExternalStore(t,()=>null!==e&&fieldsetsAround(e).some(t=>t.disabled&&!t.querySelector(":scope > legend")?.contains(e)),()=>!1)}export function leaveFormControl(e){e?.dispatchEvent(new FocusEvent("focusout",{bubbles:!0}))}export const FormControl=/* @__PURE__ */o.forwardRef(function FormControl({name:o,value:s,required:l,disabled:i,standIn:a},u){const d=Array.isArray(s),c=d?s.length>0&&s.every(e=>""!==e):""!==s;return useFormReport(o,()=>[...s],d&&!i),n(t,{children:[e(r.Control,{ref:u,name:o,value:d?c?s.join("\n"):"":s,required:l,disabled:i,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",className:"pointer-events-none absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onFocus:()=>a()?.focus(),render:d?t=>e("input",{...t,name:void 0}):void 0}),d&&o?s.map((t,n)=>e("input",{type:"hidden",name:o,value:t,disabled:i},n)):null]})});

package/dist/internal/format.d.ts

@@ -20,7 +20,10 @@
  * object on every render, which is the ordinary way that prop gets written, and
  * keying on identity would miss every time and cache nothing but garbage.
  */
-/** A memoised `Intl.DateTimeFormat`. */
+/**
+ * A memoised `Intl.DateTimeFormat`, built again when the runtime's time zone
+ * has changed since it was.
+ */
 export declare function dateFormatter(locale: string | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
 /** A memoised `Intl.NumberFormat`. */
 export declare function numberFormatter(locale: string | undefined, options?: Intl.NumberFormatOptions): Intl.NumberFormat;

package/dist/internal/format.js

@@ -1 +1 @@
-function cacheKey(t,e){return`${t??""}\0${e?JSON.stringify(e):""}`}const t=new Map;export function dateFormatter(e,n){const r=cacheKey(e,n);let c=t.get(r);return c||(c=new Intl.DateTimeFormat(e,n),t.set(r,c)),c}const e=new Map;export function numberFormatter(t,n){const r=cacheKey(t,n);let c=e.get(r);return c||(c=new Intl.NumberFormat(t,n),e.set(r,c)),c}
+function cacheKey(e,t){return`${e??""}\0${t?JSON.stringify(t):""}`}const e=new Map,t=/* @__PURE__ */new Date(16094592e5),n=/* @__PURE__ */new Date(16250976e5);let r=Number.NaN,o=Number.NaN;export function dateFormatter(a,c){(function zoneHasMoved(){const e=t.getTimezoneOffset(),a=n.getTimezoneOffset();return(e!==r||a!==o)&&(r=e,o=a,!0)})()&&e.clear();const u=cacheKey(a,c);let m=e.get(u);return m||(m=new Intl.DateTimeFormat(a,c),e.set(u,m)),m}const a=new Map;export function numberFormatter(e,t){const n=cacheKey(e,t);let r=a.get(n);return r||(r=new Intl.NumberFormat(e,t),a.set(n,r)),r}

package/dist/internal/gallery.d.ts

@@ -1,3 +1,4 @@
+import type { PlassResponsive } from '../types.js';
 /**
  * A tile's proportion as the number the layouts do arithmetic on.
  *
@@ -78,3 +79,30 @@ export declare function masonryRows(ratios: readonly number[], columns: number,
     tracks: PlassMasonryTrack[];
     tiles: PlassMasonryTile[];
 };
+/**
+ * A column count as a gallery uses it: a whole number of lanes, and at least
+ * one. The column slot and the masonry deal both read it through here, so the
+ * columns the stylesheet draws are the columns the tiles were dealt into.
+ */
+export declare function laneCount(value: number): number;
+/**
+ * A masonry dealt at every rung of the breakpoint ladder, as the slots the
+ * stylesheet switches between.
+ *
+ * Which lane a tile lands in depends on the heights of the tiles before it, so
+ * a stylesheet cannot work it out — but it can choose between answers worked
+ * out ahead of time. The deal is made once per lane count the columns name,
+ * and the rung it starts at is written as slots: the list's rows as
+ * `--p-lane-rows-{rung}`, and each tile's place and the number of rows it spans
+ * as `--p-lane-area-{rung}` and `--p-lane-span-{rung}`. A rung that changes
+ * nothing is left out, and the stylesheet carries the rung below up through it,
+ * so a server's markup is laid out right at every width before any script has
+ * run, and a resize redraws without React hearing about it.
+ *
+ * `track` writes one row track as CSS, because the gap and the caption rows
+ * are lengths only the gallery knows.
+ */
+export declare function masonrySlots(ratios: readonly number[], columns: PlassResponsive<number>, captions: boolean, track: (track: PlassMasonryTrack) => string): {
+    list: Record<string, string>;
+    tiles: Array<Record<string, string>>;
+};

package/dist/internal/gallery.js

@@ -1 +1 @@
-import{isSideways as t,quartersOf as r}from"./image.js";export function ratioOf(t,r){if(void 0===t)return r;if("number"==typeof t)return t>0?t:r;const[n,o]=t.split("/"),e=void 0===o?Number(n):Number(n)/Number(o);return Number.isFinite(e)&&e>0?e:r}export function isTurned(n){return void 0!==n&&t(r(n))}export function shownRatio(t,r){return isTurned(r)?1/t:t}export function dealColumns(t,r){const n=Array.from({length:r},()=>[]),o=new Array(r).fill(0);return t.forEach((t,e)=>{let s=0;for(let t=1;t<r;t+=1)o[t]<o[s]&&(s=t);n[s].push(e),o[s]+=1/t}),n}export function masonryRows(t,r,n){const o=dealColumns(t,r),e=[],s=[],u=[];o.forEach((r,n)=>{let o=0;r.forEach((i,a)=>{o+=1/t[i],e[i]=n,s[i]=o,u[i]=0===a?-1:r[a-1]})});const i=[],a=[];for(const r of t.map((t,r)=>r).sort((t,r)=>s[t]-s[r]))(0===i.length||s[r]-i[i.length-1]>.001)&&i.push(s[r]),a[r]=i.length-1;const f=new Set(u.filter(t=>-1!==t).map(t=>a[t])),c=[],l=[],p=[];i.forEach((t,r)=>{c.push(t-(0===r?0:i[r-1])),n&&c.push("caption"),l[r]=c.length+1,f.has(r)&&c.push("gap"),p[r]=c.length+1});const h=t.map((t,r)=>({column:e[r]+1,start:-1===u[r]?1:p[a[u[r]]],end:l[a[r]]}));return{tracks:c,tiles:h}}
+import{isSideways as t,quartersOf as n}from"./image.js";import{breakpoints as o,resolveAt as r}from"./responsive.js";export function ratioOf(t,n){if(void 0===t)return n;if("number"==typeof t)return t>0?t:n;const[o,r]=t.split("/"),e=void 0===r?Number(o):Number(o)/Number(r);return Number.isFinite(e)&&e>0?e:n}export function isTurned(o){return void 0!==o&&t(n(o))}export function shownRatio(t,n){return isTurned(n)?1/t:t}export function dealColumns(t,n){const o=Array.from({length:n},()=>[]),r=new Array(n).fill(0);return t.forEach((t,e)=>{let s=0;for(let t=1;t<n;t+=1)r[t]<r[s]&&(s=t);o[s].push(e),r[s]+=1/t}),o}export function masonryRows(t,n,o){const r=dealColumns(t,n),e=[],s=[],a=[];r.forEach((n,o)=>{let r=0;n.forEach((u,i)=>{r+=1/t[u],e[u]=o,s[u]=r,a[u]=0===i?-1:n[i-1]})});const u=[],i=[];for(const n of t.map((t,n)=>n).sort((t,n)=>s[t]-s[n]))(0===u.length||s[n]-u[u.length-1]>.001)&&u.push(s[n]),i[n]=u.length-1;const c=new Set(a.filter(t=>-1!==t).map(t=>i[t])),l=[],p=[],f=[];u.forEach((t,n)=>{l.push(t-(0===n?0:u[n-1])),o&&l.push("caption"),p[n]=l.length+1,c.has(n)&&l.push("gap"),f[n]=l.length+1});const m=t.map((t,n)=>({column:e[n]+1,start:-1===a[n]?1:f[i[a[n]]],end:p[i[n]]}));return{tracks:l,tiles:m}}export function laneCount(t){return Math.max(1,Math.round(t))}export function masonrySlots(t,n,e,s){const a={},u=t.map(()=>({})),i=[],c=[];let l,p;for(const f of o){const o=laneCount(r(n,f)??2);if(o===p)continue;p=o;const m=masonryRows(t,o,e),h=m.tracks.map(s).join(" ");h!==l&&(a[`--p-lane-rows-${f}`]=h,l=h),m.tiles.forEach(({column:t,start:n,end:o},r)=>{const e=`${n} / ${t} / ${o}`,s=String(o-n);e!==i[r]&&(u[r][`--p-lane-area-${f}`]=e,i[r]=e),s!==c[r]&&(u[r][`--p-lane-span-${f}`]=s,c[r]=s)})}return{list:a,tiles:u}}

package/dist/internal/glow.d.ts

@@ -11,8 +11,13 @@ import * as React from 'react';
  * `offsetX` and `offsetY` cost nothing, but they are measured from whatever the
  * pointer is over. On a surface whose own element is under the pointer — a
  * button, whose icons ignore the pointer — that is the surface, and they are
- * used as they are. On one that holds other elements the pointer can land on,
- * the position is read against the surface's own box instead.
+ * used as they are: every browser counts them in the surface's own pixels from
+ * inside its border, through any `transform` above it. On one that holds other
+ * elements the pointer can land on, the position is read against the surface's
+ * box on the screen instead, and turned into those same pixels from inside the
+ * border, which is where the two layers are laid out. The screen and the
+ * surface differ inside a scaled ancestor, a field in a scaled `PlMockup` for
+ * one. `offsetWidth` is read after the box, so it costs no second layout.
  */
 export declare function followPointer(event: React.PointerEvent<HTMLElement>): void;
 /**

package/dist/internal/glow.js

@@ -1 +1 @@
-import*as t from"react";export function followPointer(t){const e=t.currentTarget;let o=t.nativeEvent.offsetX,n=t.nativeEvent.offsetY;if(t.target!==e){const r=e.getBoundingClientRect();o=t.clientX-r.left,n=t.clientY-r.top}e.style.setProperty("--p-mx",`${o}px`),e.style.setProperty("--p-my",`${n}px`)}export function glowPointerMove(t,e){return t?t=>{followPointer(t),e?.(t)}:e}const e=/* @__PURE__ */new Set(["Tab","Escape","Shift","Control","Alt","Meta","CapsLock"]);export function useFieldLight(o){const[n,r]=t.useState(!1),l=t.useRef(!1),i=t.useCallback(t=>{l.current!==t&&(l.current=t,r(t))},[]),a=t.useCallback(t=>{followPointer(t),i(!1)},[i]),s=t.useCallback(t=>{e.has(t.key)||i(!0)},[i]);return o?{"data-quiet":n?"":void 0,onPointerMove:a,onKeyDown:s}:{}}
+import*as t from"react";export function followPointer(t){const e=t.currentTarget;let o=t.nativeEvent.offsetX,n=t.nativeEvent.offsetY;if(t.target!==e){const i=e.getBoundingClientRect(),r=i.width?e.offsetWidth/i.width:1,l=i.height?e.offsetHeight/i.height:1;o=(t.clientX-i.left)*r-e.clientLeft,n=(t.clientY-i.top)*l-e.clientTop}e.style.setProperty("--p-mx",`${o}px`),e.style.setProperty("--p-my",`${n}px`)}export function glowPointerMove(t,e){return t?t=>{followPointer(t),e?.(t)}:e}const e=/* @__PURE__ */new Set(["Tab","Escape","Shift","Control","Alt","Meta","CapsLock"]);export function useFieldLight(o){const[n,i]=t.useState(!1),r=t.useRef(!1),l=t.useCallback(t=>{r.current!==t&&(r.current=t,i(t))},[]),s=t.useCallback(t=>{followPointer(t),l(!1)},[l]),c=t.useCallback(t=>{e.has(t.key)||l(!0)},[l]);return o?{"data-quiet":n?"":void 0,onPointerMove:s,onKeyDown:c}:{}}

package/dist/internal/heading.d.ts

@@ -0,0 +1,11 @@
+import type { PlassHeadingLevel } from '../types.js';
+/**
+ * The heading level a caller asked for, or `undefined` when what arrived is
+ * not one.
+ *
+ * The type keeps a TypeScript caller inside the six; this keeps a JavaScript
+ * one there too, where a `7` would have written an `<h7>`, which is no heading
+ * at all. Every component that takes a `headingLevel` reads it through here,
+ * so they cannot come to disagree about what a level is.
+ */
+export declare function headingLevelOf(value: unknown): PlassHeadingLevel | undefined;

package/dist/internal/heading.js

@@ -0,0 +1 @@
+export function headingLevelOf(e){return"number"==typeof e&&Number.isInteger(e)&&e>=1&&e<=6?e:void 0}

package/dist/internal/highlight.d.ts

@@ -76,9 +76,11 @@ export declare function canonicalLanguage(language: string | undefined): string
  * Highlighting the block as a whole and splitting afterwards, never line by
  * line: a block comment, a template literal and a heredoc all span lines, and a
  * highlighter handed one line at a time sees the second line of a comment as
- * code.
+ * code. A block is coloured in its own turn, after the blocks that asked before
+ * it, with the browser given the main thread in between, and `signal` takes a
+ * block that has gone away by then out of the queue.
  */
-export declare function highlight(code: string, language: string): Promise<PlCodeLine[] | null>;
+export declare function highlight(code: string, language: string, signal?: AbortSignal): Promise<PlCodeLine[] | null>;
 /**
  * highlight.js's own markup, as lines of coloured runs.
  *

package/dist/internal/highlight.js

@@ -1 +1 @@
-const i={bash:()=>import("highlight.js/lib/languages/bash"),c:()=>import("highlight.js/lib/languages/c"),cpp:()=>import("highlight.js/lib/languages/cpp"),csharp:()=>import("highlight.js/lib/languages/csharp"),css:()=>import("highlight.js/lib/languages/css"),dart:()=>import("highlight.js/lib/languages/dart"),diff:()=>import("highlight.js/lib/languages/diff"),dockerfile:()=>import("highlight.js/lib/languages/dockerfile"),go:()=>import("highlight.js/lib/languages/go"),graphql:()=>import("highlight.js/lib/languages/graphql"),ini:()=>import("highlight.js/lib/languages/ini"),java:()=>import("highlight.js/lib/languages/java"),javascript:()=>import("highlight.js/lib/languages/javascript"),json:()=>import("highlight.js/lib/languages/json"),kotlin:()=>import("highlight.js/lib/languages/kotlin"),less:()=>import("highlight.js/lib/languages/less"),lua:()=>import("highlight.js/lib/languages/lua"),makefile:()=>import("highlight.js/lib/languages/makefile"),markdown:()=>import("highlight.js/lib/languages/markdown"),objectivec:()=>import("highlight.js/lib/languages/objectivec"),perl:()=>import("highlight.js/lib/languages/perl"),php:()=>import("highlight.js/lib/languages/php"),plaintext:()=>import("highlight.js/lib/languages/plaintext"),powershell:()=>import("highlight.js/lib/languages/powershell"),python:()=>import("highlight.js/lib/languages/python"),r:()=>import("highlight.js/lib/languages/r"),ruby:()=>import("highlight.js/lib/languages/ruby"),rust:()=>import("highlight.js/lib/languages/rust"),scss:()=>import("highlight.js/lib/languages/scss"),shell:()=>import("highlight.js/lib/languages/shell"),sql:()=>import("highlight.js/lib/languages/sql"),swift:()=>import("highlight.js/lib/languages/swift"),typescript:()=>import("highlight.js/lib/languages/typescript"),xml:()=>import("highlight.js/lib/languages/xml"),yaml:()=>import("highlight.js/lib/languages/yaml")},t={"c++":"cpp",cc:"cpp",cjs:"javascript",console:"bash",cs:"csharp",cts:"typescript",docker:"dockerfile",gql:"graphql",golang:"go",h:"cpp",hpp:"cpp",htm:"xml",html:"xml",js:"javascript",jsx:"javascript",kt:"kotlin",kts:"kotlin",md:"markdown",mdx:"markdown",mjs:"javascript",mm:"objectivec",mts:"typescript",mysql:"sql",node:"javascript",none:"plaintext",objc:"objectivec",plain:"plaintext",posh:"powershell",ps1:"powershell",psql:"sql",py:"python",rb:"ruby",rs:"rust",sh:"bash",svelte:"xml",svg:"xml",text:"plaintext",toml:"ini",ts:"typescript",tsx:"typescript",txt:"plaintext",vue:"xml",yml:"yaml",zsh:"bash"},l=new Map;export function registerLanguage(i,t){const g=i.toLowerCase();l.set(g,t),s.delete(g)}let g=null;const s=new Map;export function canonicalLanguage(i){if(!i)return null;const g=i.trim().toLowerCase();return g?l.has(g)?g:t[g]??g:null}export async function highlight(t,a){let e=s.get(a);e||(e=async function prepare(t){const s=l.get(t),a=s?void 0:i[t];if(!s&&!a)return null;g??=import("highlight.js/lib/core").then(i=>i.default);const e=await g;return s?e.registerLanguage(t,s):e.getLanguage(t)||e.registerLanguage(t,(await a()).default),t}(a).catch(i=>{throw s.delete(a),i}),s.set(a,e));const h=await e;return h&&g?tokenize((await g).highlight(t,{language:h,ignoreIllegals:!0}).value):null}const a={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#x27;":"'"};export function tokenize(i){const t=[[]],l=[],g=/<span class="([^"]*)">|<\/span>/g;let s=0;const push=i=>{if(!i)return;const g=l[l.length-1];i.replace(/&(?:amp|lt|gt|quot|#x27);/g,i=>a[i]).split("\n").forEach((i,l)=>{l>0&&t.push([]),i&&t[t.length-1].push(g?{text:i,token:g}:{text:i})})};for(const t of i.matchAll(g))push(i.slice(s,t.index)),s=t.index+t[0].length,void 0===t[1]?l.pop():l.push(t[1]);return push(i.slice(s)),t}export function plainLines(i){return i.split("\n").map(i=>i?[{text:i}]:[])}
+const i={bash:()=>import("highlight.js/lib/languages/bash"),c:()=>import("highlight.js/lib/languages/c"),cpp:()=>import("highlight.js/lib/languages/cpp"),csharp:()=>import("highlight.js/lib/languages/csharp"),css:()=>import("highlight.js/lib/languages/css"),dart:()=>import("highlight.js/lib/languages/dart"),diff:()=>import("highlight.js/lib/languages/diff"),dockerfile:()=>import("highlight.js/lib/languages/dockerfile"),go:()=>import("highlight.js/lib/languages/go"),graphql:()=>import("highlight.js/lib/languages/graphql"),ini:()=>import("highlight.js/lib/languages/ini"),java:()=>import("highlight.js/lib/languages/java"),javascript:()=>import("highlight.js/lib/languages/javascript"),json:()=>import("highlight.js/lib/languages/json"),kotlin:()=>import("highlight.js/lib/languages/kotlin"),less:()=>import("highlight.js/lib/languages/less"),lua:()=>import("highlight.js/lib/languages/lua"),makefile:()=>import("highlight.js/lib/languages/makefile"),markdown:()=>import("highlight.js/lib/languages/markdown"),objectivec:()=>import("highlight.js/lib/languages/objectivec"),perl:()=>import("highlight.js/lib/languages/perl"),php:()=>import("highlight.js/lib/languages/php"),plaintext:()=>import("highlight.js/lib/languages/plaintext"),powershell:()=>import("highlight.js/lib/languages/powershell"),python:()=>import("highlight.js/lib/languages/python"),r:()=>import("highlight.js/lib/languages/r"),ruby:()=>import("highlight.js/lib/languages/ruby"),rust:()=>import("highlight.js/lib/languages/rust"),scss:()=>import("highlight.js/lib/languages/scss"),shell:()=>import("highlight.js/lib/languages/shell"),sql:()=>import("highlight.js/lib/languages/sql"),swift:()=>import("highlight.js/lib/languages/swift"),typescript:()=>import("highlight.js/lib/languages/typescript"),xml:()=>import("highlight.js/lib/languages/xml"),yaml:()=>import("highlight.js/lib/languages/yaml")},t={"c++":"cpp",cc:"cpp",cjs:"javascript",console:"bash",cs:"csharp",cts:"typescript",docker:"dockerfile",gql:"graphql",golang:"go",h:"cpp",hpp:"cpp",htm:"xml",html:"xml",js:"javascript",jsx:"javascript",kt:"kotlin",kts:"kotlin",md:"markdown",mdx:"markdown",mjs:"javascript",mm:"objectivec",mts:"typescript",mysql:"sql",node:"javascript",none:"plaintext",objc:"objectivec",plain:"plaintext",posh:"powershell",ps1:"powershell",psql:"sql",py:"python",rb:"ruby",rs:"rust",sh:"bash",svelte:"xml",svg:"xml",text:"plaintext",toml:"ini",ts:"typescript",tsx:"typescript",txt:"plaintext",vue:"xml",yml:"yaml",zsh:"bash"},l=new Map;export function registerLanguage(i,t){const s=i.toLowerCase();l.set(s,t),e.delete(s)}let s=null;const e=new Map;export function canonicalLanguage(i){if(!i)return null;const s=i.trim().toLowerCase();return s?l.has(s)?s:t[s]??s:null}function yieldToBrowser(){const{scheduler:i}=globalThis;return"function"==typeof i?.yield?i.yield():new Promise(i=>{const t=new MessageChannel;t.port1.onmessage=()=>{t.port1.close(),i()},t.port2.postMessage(null)})}let g=Promise.resolve();export async function highlight(t,a,h){let n=e.get(a);n||(n=async function prepare(t){const e=l.get(t),g=e?void 0:i[t];if(!e&&!g)return null;if(!s){const i=import("highlight.js/lib/core").then(i=>i.default);i.catch(()=>{s===i&&(s=null)}),s=i}const[a,h]=await Promise.all([s,e??g().then(i=>i.default)]);return!e&&a.getLanguage(t)||a.registerLanguage(t,h),t}(a).catch(i=>{throw e.delete(a),i}),e.set(a,n));const o=await n;if(!o||!s)return null;const r=await s;return await function nextTurn(){return g=g.then(yieldToBrowser),g}(),h?.aborted?null:tokenize(r.highlight(t,{language:o,ignoreIllegals:!0}).value)}const a={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#x27;":"'"};export function tokenize(i){const t=[[]],l=[],s=/<span class="([^"]*)">|<\/span>/g;let e=0;const push=i=>{if(!i)return;const s=l[l.length-1];i.replace(/&(?:amp|lt|gt|quot|#x27);/g,i=>a[i]).split("\n").forEach((i,l)=>{l>0&&t.push([]),i&&t[t.length-1].push(s?{text:i,token:s}:{text:i})})};for(const t of i.matchAll(s))push(i.slice(e,t.index)),e=t.index+t[0].length,void 0===t[1]?l.pop():l.push(t[1]);return push(i.slice(e)),t}export function plainLines(i){return i.split("\n").map(i=>i?[{text:i}]:[])}

package/dist/internal/labels.d.ts

@@ -72,6 +72,11 @@ export interface PlassLabels {
     chartMore: (count: number) => string;
     /** And the way back, once they are all showing. */
     chartFewer: string;
+    /**
+     * The head of the column a chart's table names each mark in, for marks that
+     * carry a name of their own: a timeline's spans.
+     */
+    name: string;
     minimize: string;
     maximize: string;
     restore: string;

package/dist/internal/labels.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useDefaults as a}from"./defaults.js";import{loadingLabel as o}from"./loading.js";export const defaultLabels={close:"Close",cancel:"Cancel",confirm:"Confirm",acknowledge:"OK",clear:"Clear",done:"Done",skip:"Skip",search:"Search",selectAll:"Select all",selectRow:"Select row",remove:"Remove",dismiss:"Dismiss",open:"Open",previous:"Previous",next:"Next",reveal:"Reveal",hide:"Hide",increase:"Increase",decrease:"Decrease",preview:"Preview",empty:"Nothing here",optional:"Optional",loading:o,breadcrumb:"Breadcrumb",breadcrumbExpand:"Show the hidden steps",carousel:"Carousel",carouselPrevious:"Previous slide",carouselNext:"Next slide",carouselPlay:"Start slide show",carouselStop:"Stop slide show",slide:"slide",commandPalette:"Command palette",commandPalettePlaceholder:"Search commands",gallery:"Gallery",chart:"Chart",chartOther:"Other",chartMore:e=>`${e} more`,chartFewer:"Show fewer",minimize:"Minimize",maximize:"Maximize",restore:"Restore",resizeWindow:"Resize window",moveWindow:"Move window",overlay:"Overlay",notifications:"Notifications",pagination:"Pagination",paginationPrevious:"Previous page",paginationNext:"Next page",paginationFirst:"First page",paginationLast:"Last page",rating:"Rating",sidebar:"Sidebar",sidebarOpen:"Open sidebar",sidebarClose:"Close sidebar",sidebarResize:"Resize sidebar",skipToContent:"Skip to content",backToTop:"Back to top",onThisPage:"On this page",typing:"Typing…",messageSending:"Sending",messageSent:"Sent",messageDelivered:"Delivered",messageRead:"Read",messageFailed:"Not delivered",spoilerWarning:"This may contain spoilers",filePickerTitle:"Drop files here, or click to browse",newTab:"(opens in a new tab)",transferAvailable:"Available",transferSelected:"Selected",transferToSelected:"Move to selected",transferToAvailable:"Move to available",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",code:"Code",previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End",paginationPage:e=>`Page ${e}`,paginationStatus:(e,a)=>`Page ${e} of ${a}`,ratingValue:(e,a)=>`${e.toLocaleString("en")} out of ${a}`,ratingNone:"No rating",carouselSlide:(e,a)=>`Slide ${e} of ${a}`,galleryItem:(e,a)=>`${e} of ${a}`,removeItem:e=>`Remove ${e}`,addCustom:e=>`Add “${e}”`,otpSlot:(e,a)=>`Character ${e} of ${a}`,transferSelectAll:e=>`Select all in ${e}`,transferMoved:(e,a)=>`${e} ${1===e?"item":"items"} moved to ${a}`,filesRejectedType:e=>`${e} ${1===e?"file is":"files are"} not an accepted type`,filesRejectedSize:e=>`${e} ${1===e?"file is":"files are"} too large`,filesRejectedCount:e=>`${e} ${1===e?"file":"files"} did not fit`};export function useLabels(){const{labels:o}=a();return e.useMemo(()=>o?{...defaultLabels,...o}:defaultLabels,[o])}
+"use client";import*as e from"react";import{useDefaults as a}from"./defaults.js";import{loadingLabel as o}from"./loading.js";export const defaultLabels={close:"Close",cancel:"Cancel",confirm:"Confirm",acknowledge:"OK",clear:"Clear",done:"Done",skip:"Skip",search:"Search",selectAll:"Select all",selectRow:"Select row",remove:"Remove",dismiss:"Dismiss",open:"Open",previous:"Previous",next:"Next",reveal:"Reveal",hide:"Hide",increase:"Increase",decrease:"Decrease",preview:"Preview",empty:"Nothing here",optional:"Optional",loading:o,breadcrumb:"Breadcrumb",breadcrumbExpand:"Show the hidden steps",carousel:"Carousel",carouselPrevious:"Previous slide",carouselNext:"Next slide",carouselPlay:"Start slide show",carouselStop:"Stop slide show",slide:"slide",commandPalette:"Command palette",commandPalettePlaceholder:"Search commands",gallery:"Gallery",chart:"Chart",chartOther:"Other",chartMore:e=>`${e} more`,chartFewer:"Show fewer",name:"Name",minimize:"Minimize",maximize:"Maximize",restore:"Restore",resizeWindow:"Resize window",moveWindow:"Move window",overlay:"Overlay",notifications:"Notifications",pagination:"Pagination",paginationPrevious:"Previous page",paginationNext:"Next page",paginationFirst:"First page",paginationLast:"Last page",rating:"Rating",sidebar:"Sidebar",sidebarOpen:"Open sidebar",sidebarClose:"Close sidebar",sidebarResize:"Resize sidebar",skipToContent:"Skip to content",backToTop:"Back to top",onThisPage:"On this page",typing:"Typing…",messageSending:"Sending",messageSent:"Sent",messageDelivered:"Delivered",messageRead:"Read",messageFailed:"Not delivered",spoilerWarning:"This may contain spoilers",filePickerTitle:"Drop files here, or click to browse",newTab:"(opens in a new tab)",transferAvailable:"Available",transferSelected:"Selected",transferToSelected:"Move to selected",transferToAvailable:"Move to available",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",code:"Code",previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End",paginationPage:e=>`Page ${e}`,paginationStatus:(e,a)=>`Page ${e} of ${a}`,ratingValue:(e,a)=>`${e.toLocaleString("en")} out of ${a}`,ratingNone:"No rating",carouselSlide:(e,a)=>`Slide ${e} of ${a}`,galleryItem:(e,a)=>`${e} of ${a}`,removeItem:e=>`Remove ${e}`,addCustom:e=>`Add “${e}”`,otpSlot:(e,a)=>`Character ${e} of ${a}`,transferSelectAll:e=>`Select all in ${e}`,transferMoved:(e,a)=>`${e} ${1===e?"item":"items"} moved to ${a}`,filesRejectedType:e=>`${e} ${1===e?"file is":"files are"} not an accepted type`,filesRejectedSize:e=>`${e} ${1===e?"file is":"files are"} too large`,filesRejectedCount:e=>`${e} ${1===e?"file":"files"} did not fit`};export function useLabels(){const{labels:o}=a();return e.useMemo(()=>o?{...defaultLabels,...o}:defaultLabels,[o])}

package/dist/internal/layout-box.d.ts

@@ -0,0 +1,35 @@
+/**
+ * An element's length along one axis as it is laid out, which is not always
+ * the length it is drawn at.
+ *
+ * The two differ under a `transform` on an ancestor, a component inside a
+ * scaled `PlMockup` for one. `getBoundingClientRect` measures the box on the
+ * screen, which is the drawn size there, while a `width`, a `flex-basis`
+ * percentage and a `scrollLeft` are all counted in the element's own pixels.
+ * So the laid-out size is read off the computed style, which a transform does
+ * not reach, and the box on the screen is kept for what is measured on the
+ * screen: a pointer's movement, and the distance between two boxes.
+ */
+export interface LayoutBox {
+    /**
+     * The used `width` or `height`, which is the border box or the content box
+     * as `box-sizing` says: the length a declaration of either sets.
+     */
+    size: number;
+    /**
+     * The content box, inside the padding and the border: what a child's
+     * percentage is a percentage of.
+     */
+    content: number;
+    /**
+     * How many of the element's own pixels one pixel on the screen is. `1`
+     * unless an ancestor scales it.
+     */
+    perPixel: number;
+}
+/**
+ * Measures `element` across when `horizontal` and down otherwise. An element
+ * that is not laid out, inside a closed `PlAccordion` for example, measures
+ * nothing.
+ */
+export declare function layoutBox(element: HTMLElement, horizontal: boolean): LayoutBox;

package/dist/internal/layout-box.js

@@ -0,0 +1 @@
+export function layoutBox(t,e){const n=t.getBoundingClientRect(),d=e?n.width:n.height;if(!(d>0))return{size:0,content:0,perPixel:1};const i=getComputedStyle(t),r=(e?[i.paddingInlineStart,i.paddingInlineEnd,i.borderInlineStartWidth,i.borderInlineEndWidth]:[i.paddingBlockStart,i.paddingBlockEnd,i.borderBlockStartWidth,i.borderBlockEndWidth]).reduce((t,e)=>t+(parseFloat(e)||0),0),o=parseFloat(e?i.width:i.height)||0,l="border-box"===i.boxSizing?o:o+r;return{size:o,content:l-r,perPixel:l>0?l/d:1}}

package/dist/internal/lazy.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/**
+ * A part of a component that is a download of its own, and that steps back
+ * rather than throwing when the download fails.
+ *
+ * Four components keep a piece most pages never show behind an `import()`:
+ * `PlConfirmProvider` its dialog, `PlSidebar` the drawer it becomes on a narrow
+ * window, `PlImage` its preview and `PlGallery` its viewer. `React.lazy` on its
+ * own throws to the nearest error boundary when that chunk cannot be fetched —
+ * a connection that dropped, or a deploy that replaced the chunk under a page
+ * that was already open — and the boundary takes down everything it holds over
+ * a part the reader may only have pointed at.
+ *
+ * So the import is tried a second time, and if that fails as well the part
+ * renders nothing and says so once through `onUnavailable`, which is where the
+ * component that asked for it steps back: closes what it was opening, answers
+ * what it was asking. A failed attempt is forgotten, so the next mount tries
+ * again. Chromium keeps a module whose fetch failed for the life of the page,
+ * so there a second try, now or later, fails at once without a request; Firefox
+ * and WebKit fetch it again.
+ */
+/** A part's own props, and the one it adds. */
+export type LazyPartProps<P> = P & {
+    /** Called once, after the second try has failed. The part then renders nothing. */
+    onUnavailable?: () => void;
+};
+export interface LazyPart<P> {
+    (props: LazyPartProps<P>): React.ReactElement;
+    /** Starts the download without rendering anything. A failure is kept quiet. */
+    preload: () => void;
+}
+/**
+ * `React.lazy` with one retry and a quiet failure. Render the result inside a
+ * `Suspense` as a lazy component would be, and unmount it when it reports
+ * `onUnavailable`, so that the next mount is the next attempt.
+ */
+export declare function lazyPart<P extends object>(load: () => Promise<React.ComponentType<P>>): LazyPart<P>;

package/dist/internal/lazy.js

@@ -0,0 +1 @@
+"use client";import{jsx as n}from"react/jsx-runtime";import*as t from"react";function Unavailable({onUnavailable:n}){const a=t.useRef(!1);return t.useLayoutEffect(()=>{a.current||(a.current=!0,n?.())}),null}export function lazyPart(a){let e=null;const download=()=>(e??=a().catch(()=>a()).catch(()=>(e=null,null)),e),attempt=()=>{const a=t.lazy(async()=>{const t=await download();if(!t){const retire=()=>{r===a&&(r=attempt())};function Failed({onUnavailable:t}){return n(Unavailable,{onUnavailable:()=>{retire(),t?.()}})}return{default:Failed}}const e=t;return{default:function Ready({onUnavailable:t,...a}){return n(e,{...a})}}});return a};let r=attempt();function Part(a){const[e]=t.useState(()=>r);return n(e,{...a})}return Part.preload=()=>{download()},Part}

package/dist/internal/media.d.ts

@@ -24,3 +24,9 @@ export declare function useMediaQuery(query: string | null): boolean;
  * — before any of these animations has had a frame to run in.
  */
 export declare function usePrefersReducedMotion(): boolean;
+/**
+ * The same answer, read at the moment it is asked rather than on the render
+ * after it changes: for an event handler that has to act before the next frame
+ * is drawn.
+ */
+export declare function prefersReducedMotion(): boolean;

package/dist/internal/media.js

@@ -1 +1 @@
-"use client";import*as e from"react";const n=new Map;function listFor(e){if("undefined"==typeof window||!window.matchMedia)return null;let r=n.get(e);return r||(r=window.matchMedia(e),n.set(e,r)),r}function onServer(){return!1}export const reducedMotionQuery="(prefers-reduced-motion: reduce)";export function useMediaQuery(n){const r=e.useCallback(e=>{const r=null===n?null:listFor(n);return r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{}},[n]),t=e.useCallback(()=>null!==n&&(listFor(n)?.matches??!1),[n]);return e.useSyncExternalStore(r,t,onServer)}export function usePrefersReducedMotion(){return useMediaQuery(reducedMotionQuery)}
+"use client";import*as e from"react";const r=new Map;function listFor(e){if("undefined"==typeof window||!window.matchMedia)return null;let n=r.get(e);return n||(n=window.matchMedia(e),r.set(e,n)),n}function onServer(){return!1}export const reducedMotionQuery="(prefers-reduced-motion: reduce)";export function useMediaQuery(r){const n=e.useCallback(e=>{const n=null===r?null:listFor(r);return n?(n.addEventListener("change",e),()=>n.removeEventListener("change",e)):()=>{}},[r]),t=e.useCallback(()=>null!==r&&(listFor(r)?.matches??!1),[r]);return e.useSyncExternalStore(n,t,onServer)}export function usePrefersReducedMotion(){return useMediaQuery(reducedMotionQuery)}export function prefersReducedMotion(){return listFor(reducedMotionQuery)?.matches??!1}

package/dist/internal/page-layout.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PlassDirection } from './direction.js';
-import type { PlassBreakpoint, PlassSide } from '../types.js';
+import type { PlassBreakpoint, PlassPosition, PlassSide } from '../types.js';
 /**
  * The vocabulary a page's structure is written in, and the context the four
  * components that build one share.
@@ -75,6 +75,12 @@ export interface PlPageLayoutContextValue {
      * reliably as one that is not.
      */
     register: (slot: PlPageLayoutSlot, node: HTMLElement | null) => void;
+    /**
+     * Measures the registered bars again, for the one change to a bar that
+     * neither its ref nor the layout's `ResizeObserver` reports: its `position`,
+     * which decides what its height is reserved for. See `useSlotPosition`.
+     */
+    remeasure: () => void;
     /** Where the sidebars stop being columns. */
     collapseBelow: PlPageLayoutCollapse;
     /** Whether each sidebar's drawer is open. Only meaningful while it is collapsed. */
@@ -84,6 +90,16 @@ export interface PlPageLayoutContextValue {
     scroll: PlPageLayoutScroll;
 }
 export declare const PlPageLayoutContext: React.Context<PlPageLayoutContextValue>;
+/**
+ * Tells the layout around a bar that the bar's `position` changed.
+ *
+ * A bar that turns from `static` to `fixed` keeps its element, so its ref is
+ * not handed over again, and usually its size, so the layout's observer has
+ * nothing to report either — and the layout went on reserving nothing for a
+ * bar that had left the flow, until something else happened to resize it. Not
+ * on the first commit, which the layout measures on its own.
+ */
+export declare function useSlotPosition(position: PlassPosition): void;
 /**
  * Which end of the band the sidebar being rendered right now takes.
  *
@@ -132,16 +148,11 @@ export declare function useCollapsed(breakpoint: PlPageLayoutCollapse): boolean;
  * a tooltip above a button is above it in every writing direction — so the two
  * have to be translated.
  *
- * `direction` is what the nearest `PlassProvider` was told, and it wins for the
- * reason it wins there: a provider given a direction is describing a subtree
- * that runs the other way from the page, and a drawer is portalled out of that
- * subtree, so the document is the one place that cannot say which way it runs.
- * Without one, the document's own direction is the answer, as it is for the
- * provider.
- *
- * The document is read during render rather than in an effect, which is safe
- * here for a narrower reason than it looks: the only caller is a sidebar that
- * has already collapsed, and collapsing is a client-side answer. There is no
- * server render of this to disagree with.
+ * `direction` is the caller's to resolve: what the nearest `PlassProvider` was
+ * told, which wins for the reason it wins there — a provider given a direction
+ * is describing a subtree that runs the other way from the page, and a drawer
+ * is portalled out of that subtree, so the document is the one place that
+ * cannot say which way it runs — and without one, the document's own
+ * direction, as it is for the provider.
  */
-export declare function drawerSide(side: PlassSidebarSide, direction?: PlassDirection): PlassSide;
+export declare function drawerSide(side: PlassSidebarSide, direction: PlassDirection): PlassSide;

package/dist/internal/page-layout.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{belowQuery as t}from"./breakpoints.js";import{useMediaQuery as n}from"./media.js";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(e){return n("none"===e?null:function collapseQuery(e){return"xs"===e?null:t(e)}(e))}export function drawerSide(e,t){const n=t?"rtl"===t:"undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}
+"use client";import*as e from"react";import{belowQuery as t}from"./breakpoints.js";import{useMediaQuery as n}from"./media.js";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},remeasure:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export function useSlotPosition(t){const{remeasure:n}=e.useContext(PlPageLayoutContext),o=e.useRef(t);e.useLayoutEffect(()=>{o.current!==t&&(o.current=t,n())},[t,n])}export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(e){return n("none"===e?null:function collapseQuery(e){return"xs"===e?null:t(e)}(e))}export function drawerSide(e,t){const n="rtl"===t;return"start"===e?n?"right":"left":n?"left":"right"}

package/dist/internal/picker.d.ts

@@ -153,7 +153,7 @@ interface InternalShellProps extends PlassPickerShellProps {
  * and the way `invalid` re-points the whole colour family at `danger` so the
  * edge, the ring and the message turn over together.
  */
-export declare function PickerShell({ variant, size, color, density, elevation, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, name, formValue, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
+export declare function PickerShell({ variant, size, color, density, elevation, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, name, formValue, children, triggerRef, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *