@parallelworks/ui 0.77.0 → 0.79.0

package/dist/components/MenuEntries.js

@@ -1,19 +1,23 @@
 import { cx } from "../cx.js";
-import { MenuCheckboxItem, MenuItem, MenuLinkItem, MenuPopup, MenuSeparator, MenuSubmenuTrigger } from "./Menu.js";
+import { EmptyState } from "./EmptyState.js";
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon, ExternalLinkIcon } from "../icons.js";
+import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuSeparator, MenuSubmenuTrigger } from "./Menu.js";
 import { isDev } from "../dev.js";
-import { keyedByContent } from "./keys.js";
 import { Tooltip } from "./Tooltip.js";
+import { useStrings } from "./Provider.js";
 import { AppLink } from "./AppLink.js";
-import { EmptyState } from "./EmptyState.js";
+import { keyedByContent } from "./keys.js";
 import { useQueryMatch } from "./search.js";
 import { useCopy } from "./useCopy.js";
+import { useNarrow } from "./useNarrow.js";
 import { Menu } from "@base-ui/react/menu";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MenuEntries.tsx
 var menuDivider = { divider: true };
 var isMenuDivider = (entry) => "divider" in entry;
-var isMenuSubmenu = (entry) => "items" in entry;
+var isMenuGroup = (entry) => "group" in entry;
+var isMenuSubmenu = (entry) => "items" in entry && !("group" in entry);
 /** Gives a menu root its search's filter; `children` renders the root with the query. */
 function MenuFilter({ search, children }) {
 	const [query, setQuery] = useState("");
@@ -26,13 +30,99 @@ function MenuFilter({ search, children }) {
 		children: children(query)
 	});
 }
+var DrillContext = createContext(null);
 /** A menu's rows, with its search field when it has one. */
 function MenuEntries({ entries, search, query = "" }) {
+	const narrow = useNarrow();
+	const [drilled, setDrilled] = useState();
+	const [returnTo, setReturnTo] = useState();
+	useLayoutEffect(() => {
+		if (!returnTo) return;
+		const { label, popup } = returnTo;
+		const frame = requestAnimationFrame(() => {
+			for (const row of popup?.querySelectorAll("[data-drill]") ?? []) if (row.getAttribute("data-drill") === label) row.focus();
+			setReturnTo(void 0);
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [returnTo]);
+	if (narrow && drilled) {
+		const back = () => {
+			setReturnTo({
+				label: drilled.submenu.label,
+				popup: drilled.popup
+			});
+			setDrilled(void 0);
+		};
+		return /* @__PURE__ */ jsx(DrilledSubmenu, {
+			submenu: drilled.submenu,
+			onBack: back
+		});
+	}
+	return /* @__PURE__ */ jsx(DrillContext, {
+		value: narrow ? (submenu, row) => setDrilled({
+			submenu,
+			popup: row.closest("[role=\"menu\"]")
+		}) : null,
+		children: /* @__PURE__ */ jsx(SearchedEntries, {
+			entries,
+			search,
+			query
+		})
+	});
+}
+/** A submenu opened in its parent's place: a row back to the parent, then its rows. */
+function DrilledSubmenu({ submenu, onBack }) {
+	const t = useStrings().common;
+	const backRef = useRef(null);
+	useLayoutEffect(() => {
+		const frame = requestAnimationFrame(() => backRef.current?.focus());
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	const onKeyDown = (e) => {
+		if (e.key === "ArrowLeft" && !(e.target instanceof HTMLInputElement)) {
+			e.preventDefault();
+			onBack();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "none",
+		className: "contents",
+		onKeyDown,
+		children: [
+			/* @__PURE__ */ jsx(MenuItem, {
+				ref: backRef,
+				closeOnClick: false,
+				onClick: onBack,
+				className: "font-medium",
+				children: /* @__PURE__ */ jsx(RowContent, {
+					icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+						"aria-hidden": "true",
+						className: "size-3 opacity-60"
+					}),
+					label: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [t.back, ": "]
+					}), submenu.label] })
+				})
+			}),
+			/* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(MenuFilter, {
+				search: submenu.search,
+				children: (query) => /* @__PURE__ */ jsx(MenuEntries, {
+					entries: submenu.items,
+					search: submenu.search,
+					query
+				})
+			})
+		]
+	});
+}
+function SearchedEntries({ entries, search, query }) {
 	const matches = useQueryMatch();
 	if (!search) return /* @__PURE__ */ jsx(EntryRows, { entries });
 	const needle = query.trim();
-	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.keywords)) : entries;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.description, a.keywords), (submenu) => matches(needle, submenu.label, submenu.keywords)) : entries;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-1 pt-0.5 pb-1",
 			children: /* @__PURE__ */ jsx(Menu.Input, {
@@ -48,29 +138,131 @@ function MenuEntries({ entries, search, query = "" }) {
 		})
 	] });
 }
-function searchMatches(entries, match) {
+function searchMatches(entries, match, matchSubmenu) {
 	const found = /* @__PURE__ */ new Map();
-	const walk = (list) => {
-		for (const entry of list) if (isMenuSubmenu(entry)) walk(entry.items);
-		else if (!isMenuDivider(entry) && !found.has(entry.label) && match(entry)) found.set(entry.label, entry);
+	const walk = (list, all) => {
+		for (const entry of list) {
+			if (isMenuDivider(entry)) continue;
+			if (isMenuGroup(entry)) walk(entry.items, all);
+			else if (isMenuSubmenu(entry)) {
+				if (!entry.disabled) walk(entry.items, all || matchSubmenu(entry));
+			} else if (!found.has(entry.label) && (all || match(entry))) found.set(entry.label, entry);
+		}
 	};
-	walk(entries);
+	walk(entries, false);
 	return [...found.values()];
 }
+var entryKey = (entry) => isMenuDivider(entry) ? "divider" : isMenuGroup(entry) ? `group:${entry.group}` : entry.label;
 function EntryRows({ entries }) {
-	return keyedByContent(entries, (entry) => isMenuDivider(entry) ? "divider" : entry.label).map(({ key, item }) => isMenuDivider(item) ? /* @__PURE__ */ jsx(MenuSeparator, {}, key) : isMenuSubmenu(item) ? /* @__PURE__ */ jsx(SubmenuRow, { submenu: item }, key) : /* @__PURE__ */ jsx(ActionRow, { action: item }, key));
+	return keyedByContent(entries, entryKey).map(({ key, item }) => isMenuDivider(item) ? /* @__PURE__ */ jsx(MenuSeparator, {}, key) : isMenuGroup(item) ? /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: item.group }), /* @__PURE__ */ jsx(EntryRows, { entries: item.items })] }, key) : isMenuSubmenu(item) ? /* @__PURE__ */ jsx(SubmenuRow, { submenu: item }, key) : /* @__PURE__ */ jsx(ActionRow, { action: item }, key));
+}
+/** A key as `aria-keyshortcuts` spells it: `⌘K` reads Meta+K, `⇧P` Shift+P. */
+function ariaKeyShortcut(shortcut) {
+	if (!shortcut) return;
+	const names = {
+		"⌘": "Meta",
+		"⌃": "Control",
+		"⌥": "Alt",
+		"⇧": "Shift"
+	};
+	const parts = [];
+	let rest = shortcut.replace(/\s+/g, "");
+	while (rest.length > 1 && names[rest[0] ?? ""]) {
+		parts.push(names[rest[0] ?? ""] ?? "");
+		rest = rest.slice(1);
+	}
+	for (const part of rest.split("+").filter(Boolean)) parts.push(part.length === 1 ? part.toUpperCase() : part);
+	return parts.join("+");
+}
+/** A detail at the row's end, held to the first line's height so it sits beside the label
+*  even when a description adds a second. */
+function RowEnd({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("flex h-5 shrink-0 items-center in-data-[size=sm]:h-4", className),
+		children
+	});
+}
+var shortcutClassName = "ps-3 text-xs text-(--theme-muted-text-color) tabular-nums in-data-[size=sm]:text-[11px]";
+/** A row's icon, label, second line and end details, laid out alike in every kind of row. */
+function RowContent({ icon, label, description, end }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		icon !== void 0 && icon !== null && /* @__PURE__ */ jsx("span", {
+			className: "flex h-5 min-w-4 shrink-0 items-center justify-center in-data-[size=sm]:h-4",
+			children: icon
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "wrap-break-word",
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-(--theme-muted-text-color) in-data-[size=sm]:text-[11px]",
+				children: description
+			})]
+		}),
+		end
+	] });
 }
 function SubmenuRow({ submenu }) {
+	const reason = submenu.disabled ? submenu.disabledReason : void 0;
+	const drill = use(DrillContext);
+	if (drill) return /* @__PURE__ */ jsx(MenuItem, {
+		closeOnClick: false,
+		disabled: submenu.disabled,
+		"data-drill": submenu.label,
+		"aria-haspopup": "menu",
+		"aria-keyshortcuts": ariaKeyShortcut(submenu.shortcut),
+		onClick: (e) => drill(submenu, e.currentTarget),
+		onKeyDown: (e) => {
+			if (e.key === "ArrowRight") {
+				e.preventDefault();
+				drill(submenu, e.currentTarget);
+			}
+		},
+		children: /* @__PURE__ */ jsx(RowContent, {
+			icon: submenu.icon,
+			label: /* @__PURE__ */ jsxs(Fragment$1, { children: [submenu.label, reason && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [". ", reason]
+			})] }),
+			end: /* @__PURE__ */ jsxs(Fragment$1, { children: [submenu.shortcut && /* @__PURE__ */ jsx(RowEnd, {
+				className: shortcutClassName,
+				children: submenu.shortcut
+			}), /* @__PURE__ */ jsx(RowEnd, { children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3 opacity-60" }) })] })
+		})
+	});
 	return /* @__PURE__ */ jsx(MenuFilter, {
 		search: submenu.search,
-		children: (query) => /* @__PURE__ */ jsxs(Menu.SubmenuRoot, { children: [/* @__PURE__ */ jsxs(MenuSubmenuTrigger, { children: [submenu.icon, submenu.label] }), /* @__PURE__ */ jsx(MenuPopup, {
-			side: "inline-end",
-			children: /* @__PURE__ */ jsx(MenuEntries, {
-				entries: submenu.items,
-				search: submenu.search,
-				query
-			})
-		})] })
+		children: (query) => /* @__PURE__ */ jsxs(Menu.SubmenuRoot, {
+			disabled: submenu.disabled,
+			children: [/* @__PURE__ */ jsx(Tooltip, {
+				content: reason,
+				side: "right",
+				children: /* @__PURE__ */ jsx(MenuSubmenuTrigger, {
+					disabled: submenu.disabled,
+					"aria-keyshortcuts": ariaKeyShortcut(submenu.shortcut),
+					children: /* @__PURE__ */ jsx(RowContent, {
+						icon: submenu.icon,
+						label: /* @__PURE__ */ jsxs(Fragment$1, { children: [submenu.label, reason && /* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [". ", reason]
+						})] }),
+						end: submenu.shortcut && /* @__PURE__ */ jsx(RowEnd, {
+							className: shortcutClassName,
+							children: submenu.shortcut
+						})
+					})
+				})
+			}), /* @__PURE__ */ jsx(MenuPopup, {
+				side: "inline-end",
+				children: /* @__PURE__ */ jsx(MenuEntries, {
+					entries: submenu.items,
+					search: submenu.search,
+					query
+				})
+			})]
+		})
 	});
 }
 var destructiveClassName = "text-(--theme-error-text) data-highlighted:text-(--theme-error-text)";
@@ -92,42 +284,77 @@ function useRunAction() {
 		else action.onClick?.();
 	}, [copy]);
 }
+/** One action as a menu row: a link, an on/off choice, or a plain item. */
 function ActionRow({ action }) {
 	warnIfInert(action, "MenuEntries");
 	const runAction = useRunAction();
-	const className = cx(action.destructive && destructiveClassName);
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [action.icon, action.label] });
-	if (action.href && !action.disabled) return /* @__PURE__ */ jsx(MenuLinkItem, {
-		render: /* @__PURE__ */ jsx(AppLink, {
-			href: action.href,
-			reloadDocument: action.reloadDocument,
-			target: action.target
+	const className = cx(action.description && "items-start", action.destructive && destructiveClassName, action.current && "font-medium");
+	const keyshortcuts = ariaKeyShortcut(action.shortcut);
+	const end = (trailing) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		action.badge !== void 0 && action.badge !== null && action.badge !== false && /* @__PURE__ */ jsx(RowEnd, {
+			className: "ps-2",
+			children: action.badge
 		}),
-		className,
-		children: content
-	});
+		action.shortcut && /* @__PURE__ */ jsx(RowEnd, {
+			className: shortcutClassName,
+			children: action.shortcut
+		}),
+		trailing
+	] });
+	if (action.href && !action.disabled) {
+		const newTab = action.target === "_blank";
+		return /* @__PURE__ */ jsx(MenuLinkItem, {
+			render: /* @__PURE__ */ jsx(AppLink, {
+				href: action.href,
+				reloadDocument: action.reloadDocument,
+				target: action.target,
+				"aria-current": action.current ? "page" : void 0
+			}),
+			"aria-keyshortcuts": keyshortcuts,
+			className,
+			children: /* @__PURE__ */ jsx(RowContent, {
+				icon: action.icon,
+				label: action.label,
+				description: action.description,
+				end: end(action.current ? /* @__PURE__ */ jsx(RowEnd, {
+					className: "ps-2",
+					children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 opacity-80" })
+				}) : newTab ? /* @__PURE__ */ jsx(RowEnd, {
+					className: "ps-2 text-(--theme-muted-text-color)",
+					children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3" })
+				}) : void 0)
+			})
+		});
+	}
 	const run = () => runAction(action);
 	const reason = action.disabled ? action.disabledReason : void 0;
-	const label = /* @__PURE__ */ jsxs(Fragment, { children: [content, reason && /* @__PURE__ */ jsxs("span", {
-		className: "sr-only",
-		children: [". ", reason]
-	})] });
+	const content = (trailing) => /* @__PURE__ */ jsx(RowContent, {
+		icon: action.icon,
+		label: /* @__PURE__ */ jsxs(Fragment$1, { children: [action.label, reason && /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [". ", reason]
+		})] }),
+		description: action.description,
+		end: end(trailing)
+	});
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: reason,
 		side: "right",
 		children: action.checked === void 0 ? /* @__PURE__ */ jsx(MenuItem, {
 			disabled: action.disabled,
 			onClick: run,
+			"aria-keyshortcuts": keyshortcuts,
 			className,
-			children: label
+			children: content()
 		}) : /* @__PURE__ */ jsx(MenuCheckboxItem, {
 			checked: action.checked,
 			onCheckedChange: run,
 			disabled: action.disabled,
+			"aria-keyshortcuts": keyshortcuts,
 			className,
-			children: label
+			children: content()
 		})
 	});
 }
 //#endregion
-export { MenuEntries, MenuFilter, isMenuDivider, isMenuSubmenu, menuDivider, useRunAction, warnIfInert };
+export { ActionRow, MenuEntries, MenuFilter, ariaKeyShortcut, isMenuDivider, isMenuGroup, isMenuSubmenu, menuDivider, useRunAction, warnIfInert };

package/dist/components/Meter.d.ts

@@ -1,12 +1,16 @@
 import type { ReactNode } from 'react';
 /** A bar's color: the theme's accent, a status, or muted for something stopped. */
-export type BarTone = 'accent' | 'success' | 'warning' | 'error' | 'muted';
-declare const trackClassName: {
+export type BarTone = 'accent' | 'info' | 'success' | 'warning' | 'error' | 'muted';
+declare const trackHeight: {
     readonly sm: 'h-1';
     readonly md: 'h-1.5';
     readonly lg: 'h-2';
 };
-export type BarSize = keyof typeof trackClassName;
+export type BarSize = keyof typeof trackHeight;
+/** Where a bar's value shows: `beside` its label, over the bar on `tooltip` when
+ *  room is short, at the bar's `end` on the same row (so a column of bars lines up),
+ *  or `none`. */
+export type BarValuePlacement = 'beside' | 'tooltip' | 'end' | 'none';
 interface BarProps {
     /** Shown above the bar, which it names. */
     label?: ReactNode;
@@ -15,15 +19,20 @@ interface BarProps {
     /** Shown under the bar, such as the amounts behind it. */
     detail?: ReactNode;
     size?: BarSize;
+    /** On the track, such as a fixed `w-24` so bars in a column line up whatever
+     *  the value beside them reads. */
+    trackClassName?: string | undefined;
+    /** The locale the value is written in; the browser's own without it. */
+    locale?: string | undefined;
     className?: string;
 }
 /** The tone for `value` against a warning and an error level, for a measure
- *  that's worse the higher it reads. */
-export declare function levelTone(value: number, warnAt: number, errorAt: number): BarTone;
+ *  that's worse the higher it reads; `okTone` below the warning. */
+export declare function levelTone(value: number, warnAt: number, errorAt: number, okTone?: BarTone): BarTone;
 /** How full something is, such as storage used or a quota spent: a reading,
- *  not a task under way (that's `ProgressBar`). The bar turns amber, then red,
- *  as it passes `warnAt` and `errorAt`; `tone` overrides that. */
-export declare function Meter({ value, min, max, warnAt, errorAt, tone, format, showValue, label, 'aria-label': ariaLabel, detail, size, className, }: BarProps & {
+ *  not a task under way (that's `ProgressBar`). The bar is blue, then turns
+ *  amber, then red, as it passes `warnAt` and `errorAt`; `tone` overrides that. */
+export declare function Meter({ value, min, max, warnAt, errorAt, tone, okTone, format, showValue, valueText, getAriaValueText, minFill, locale, label, 'aria-label': ariaLabel, detail, size, trackClassName, className, }: BarProps & {
     value: number;
     min?: number;
     max?: number;
@@ -31,18 +40,48 @@ export declare function Meter({ value, min, max, warnAt, errorAt, tone, format,
     warnAt?: number;
     errorAt?: number;
     tone?: BarTone;
+    /** The tone below `warnAt`. Info by default, so the bar reads the same in every
+     *  host whatever its accent. */
+    okTone?: BarTone | undefined;
     /** How the value itself reads; without it, as a percentage of the range. */
     format?: Intl.NumberFormatOptions;
-    /** Beside the label, or over the bar on hover when room is short. */
-    showValue?: 'beside' | 'tooltip';
+    showValue?: BarValuePlacement;
+    /** The value as shown, from its formatted text, such as "45% used". */
+    valueText?: ((formatted: string, value: number) => ReactNode) | undefined;
+    /** The value as read by assistive technology, such as "82%, near limit", for a
+     *  level the bar's color alone shows. */
+    getAriaValueText?: ((formatted: string, value: number) => string) | undefined;
+    /** The narrowest the fill draws for a value above `min`, as a percent of the
+     *  track, so a small reading still shows. */
+    minFill?: number | undefined;
 }): import("react").JSX.Element;
+/** A further stretch of a progress bar, drawn after its value, such as work
+ *  started but not yet done. */
+export interface ProgressSegment {
+    /** In the same units as the bar's `max`. */
+    value: number;
+    tone?: BarTone | undefined;
+    /** At 60% strength, for a stretch that's less settled than the one before it. */
+    subtle?: boolean | undefined;
+}
 /** How far a task has come, such as an upload, out of `max`; `null` while
  *  that's not known. Name it with `label` or `aria-label`. */
-export declare function ProgressBar({ value, max, tone, status, label, 'aria-label': ariaLabel, detail, size, className, }: BarProps & {
+export declare function ProgressBar({ value, max, tone, segments, status, format, showValue, valueText, getAriaValueText, locale, label, 'aria-label': ariaLabel, detail, size, trackClassName, className, }: BarProps & {
     value: number | null;
     max?: number;
     tone?: BarTone;
+    /** Further stretches after `value`, in one bar, such as started work after done
+     *  work. `value` alone is what the bar reads as to assistive technology. */
+    segments?: ReadonlyArray<ProgressSegment> | undefined;
     /** Beside the label in place of the percentage, such as "Completed". */
     status?: ReactNode;
+    /** How the value itself reads; without it, as a percentage of `max`. */
+    format?: Intl.NumberFormatOptions | undefined;
+    /** `beside` the label, at the bar's `end` on the same row, or `none`. */
+    showValue?: Exclude<BarValuePlacement, 'tooltip'> | undefined;
+    /** The value as shown, from its formatted text, such as "3 of 8 done, 38%". */
+    valueText?: ((formatted: string | null, value: number | null) => ReactNode) | undefined;
+    /** The value as read by assistive technology. */
+    getAriaValueText?: ((formatted: string | null, value: number | null) => string) | undefined;
 }): import("react").JSX.Element;
 export {};

package/dist/components/Meter.js

@@ -7,39 +7,56 @@ import { Progress } from "@base-ui/react/progress";
 //#region src/components/Meter.tsx
 var fillClassName = {
 	accent: "bg-(--theme-accent)",
+	info: toneFill.info,
 	success: toneFill.success,
 	warning: toneFill.warning,
 	error: toneFill.error,
 	muted: toneFill.muted
 };
-var trackClassName = {
+var trackHeight = {
 	sm: "h-1",
 	md: "h-1.5",
 	lg: "h-2"
 };
 var labelRowClassName = "mb-1 flex items-baseline justify-between gap-2 text-[13px]";
 var detailClassName = "mt-1 text-[11px] tabular-nums text-(--theme-muted-text-color)";
+var endRowClassName = "flex items-center gap-2";
+var endValueClassName = "shrink-0 text-xs tabular-nums text-(--theme-muted-text-color)";
+var trackBaseClassName = "w-full overflow-hidden rounded-full bg-(--theme-border)";
+function trackClasses(size, end, own) {
+	return cx(trackBaseClassName, trackHeight[size], end && (own ? "shrink-0" : "min-w-0 flex-1"), own);
+}
 /** The tone for `value` against a warning and an error level, for a measure
-*  that's worse the higher it reads. */
-function levelTone(value, warnAt, errorAt) {
-	return value >= errorAt ? "error" : value >= warnAt ? "warning" : "accent";
+*  that's worse the higher it reads; `okTone` below the warning. */
+function levelTone(value, warnAt, errorAt, okTone = "info") {
+	return value >= errorAt ? "error" : value >= warnAt ? "warning" : okTone;
 }
 /** How full something is, such as storage used or a quota spent: a reading,
-*  not a task under way (that's `ProgressBar`). The bar turns amber, then red,
-*  as it passes `warnAt` and `errorAt`; `tone` overrides that. */
-function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, format, showValue = "beside", label, "aria-label": ariaLabel, detail, size = "md", className }) {
+*  not a task under way (that's `ProgressBar`). The bar is blue, then turns
+*  amber, then red, as it passes `warnAt` and `errorAt`; `tone` overrides that. */
+function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, okTone = "info", format, showValue = "beside", valueText, getAriaValueText, minFill = 0, locale, label, "aria-label": ariaLabel, detail, size = "md", trackClassName, className }) {
 	const clamped = Math.min(Math.max(value, min), max);
-	const fill = fillClassName[tone ?? levelTone(clamped, warnAt, errorAt)];
-	const shownValue = /* @__PURE__ */ jsx(Meter.Value, { className: "shrink-0 font-medium tabular-nums theme-text" });
+	const fill = fillClassName[tone ?? levelTone(clamped, warnAt, errorAt, okTone)];
+	const end = showValue === "end";
+	const shownValue = /* @__PURE__ */ jsx(Meter.Value, {
+		className: end ? endValueClassName : "shrink-0 font-medium tabular-nums theme-text",
+		children: valueText
+	});
 	const track = /* @__PURE__ */ jsx(Meter.Track, {
-		className: cx("w-full overflow-hidden rounded-full bg-(--theme-border)", trackClassName[size]),
-		children: /* @__PURE__ */ jsx(Meter.Indicator, { className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill) })
+		className: trackClasses(size, end, trackClassName),
+		children: /* @__PURE__ */ jsx(Meter.Indicator, {
+			className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill),
+			style: minFill > 0 && clamped > min ? { minWidth: `${minFill}%` } : void 0
+		})
 	});
+	const share = formatShare(clamped, min, max, format, locale);
 	return /* @__PURE__ */ jsxs(Meter.Root, {
 		value: clamped,
 		min,
 		max,
 		format,
+		locale,
+		getAriaValueText,
 		"aria-label": ariaLabel,
 		className: cx("min-w-0", className),
 		children: [
@@ -51,8 +68,11 @@ function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, f
 				}), showValue === "beside" && shownValue]
 			}),
 			showValue === "tooltip" ? /* @__PURE__ */ jsx(Tooltip, {
-				content: formatShare(clamped, min, max, format),
+				content: valueText ? valueText(share, clamped) : share,
 				children: track
+			}) : end ? /* @__PURE__ */ jsxs("div", {
+				className: endRowClassName,
+				children: [track, shownValue]
 			}) : track,
 			detail !== void 0 && /* @__PURE__ */ jsx("div", {
 				className: detailClassName,
@@ -61,29 +81,46 @@ function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, f
 		]
 	});
 }
-function formatShare(value, min, max, format) {
-	return format ? new Intl.NumberFormat(void 0, format).format(value) : new Intl.NumberFormat(void 0, { style: "percent" }).format((value - min) / (max - min || 1));
+function formatShare(value, min, max, format, locale) {
+	return format ? new Intl.NumberFormat(locale, format).format(value) : new Intl.NumberFormat(locale, { style: "percent" }).format((value - min) / (max - min || 1));
 }
 /** How far a task has come, such as an upload, out of `max`; `null` while
 *  that's not known. Name it with `label` or `aria-label`. */
-function ProgressBar({ value, max = 100, tone = "accent", status, label, "aria-label": ariaLabel, detail, size = "md", className }) {
+function ProgressBar({ value, max = 100, tone = "accent", segments, status, format, showValue = "beside", valueText, getAriaValueText, locale, label, "aria-label": ariaLabel, detail, size = "md", trackClassName, className }) {
+	const end = showValue === "end";
+	const shownValue = status ?? (showValue === "none" ? null : /* @__PURE__ */ jsx(Progress.Value, {
+		className: end ? endValueClassName : "shrink-0 tabular-nums theme-muted-text",
+		children: valueText
+	}));
+	const stacked = value !== null && segments !== void 0 && segments.length > 0;
+	const track = /* @__PURE__ */ jsxs(Progress.Track, {
+		className: cx(trackClasses(size, end, trackClassName), stacked && "flex"),
+		children: [/* @__PURE__ */ jsx(Progress.Indicator, { className: cx("h-full transition-[width] duration-300 motion-reduce:transition-none", "data-indeterminate:w-1/3 data-indeterminate:animate-pulse", stacked ? "shrink-0" : "rounded-full", fillClassName[tone]) }), stacked && /* @__PURE__ */ jsx(Segments, {
+			segments,
+			from: value,
+			max
+		})]
+	});
 	return /* @__PURE__ */ jsxs(Progress.Root, {
 		value,
 		max,
+		format,
+		locale,
+		getAriaValueText,
 		"aria-label": ariaLabel,
 		className: cx("min-w-0", className),
 		children: [
-			(label !== void 0 || status !== void 0) && /* @__PURE__ */ jsxs("div", {
+			(label !== void 0 || !end && status !== void 0) && /* @__PURE__ */ jsxs("div", {
 				className: labelRowClassName,
 				children: [/* @__PURE__ */ jsx(Progress.Label, {
 					className: "min-w-0 truncate theme-muted-text",
 					children: label
-				}), status ?? /* @__PURE__ */ jsx(Progress.Value, { className: "shrink-0 tabular-nums theme-muted-text" })]
-			}),
-			/* @__PURE__ */ jsx(Progress.Track, {
-				className: cx("w-full overflow-hidden rounded-full bg-(--theme-border)", trackClassName[size]),
-				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", "data-indeterminate:w-1/3 data-indeterminate:animate-pulse", fillClassName[tone]) })
+				}), !end && shownValue]
 			}),
+			end ? /* @__PURE__ */ jsxs("div", {
+				className: endRowClassName,
+				children: [track, shownValue]
+			}) : track,
 			detail !== void 0 && /* @__PURE__ */ jsx("div", {
 				className: detailClassName,
 				children: detail
@@ -91,5 +128,18 @@ function ProgressBar({ value, max = 100, tone = "accent", status, label, "aria-l
 		]
 	});
 }
+function Segments({ segments, from, max }) {
+	let used = Math.min(Math.max(from, 0), max);
+	return segments.map((segment, index) => {
+		const width = Math.min(Math.max(segment.value, 0), max - used);
+		used += width;
+		return /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			"data-segment": "",
+			className: cx("h-full shrink-0 transition-[width] duration-300 motion-reduce:transition-none", fillClassName[segment.tone ?? "accent"], segment.subtle && "opacity-60"),
+			style: { width: `${width / (max || 1) * 100}%` }
+		}, index);
+	});
+}
 //#endregion
 export { Meter$1 as Meter, ProgressBar, levelTone };

package/dist/components/Modal.d.ts

@@ -1,5 +1,5 @@
 import { Dialog } from '@base-ui/react/dialog';
-import type { ReactNode } from 'react';
+import { type FormEvent, type ReactNode } from 'react';
 /** The panel a modal draws by default; pass `panel={false}` to paint your own. */
 export declare const modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
 /** Names the modal for assistive technology; renders an `<h2>`. */
@@ -13,7 +13,7 @@ declare const sizeClasses: {
     readonly xl: 'w-[672px]';
 };
 export type ModalSize = keyof typeof sizeClasses;
-export interface ModalProps extends Omit<Dialog.Popup.Props, 'className' | 'children' | 'render' | 'title'> {
+export interface ModalProps extends Omit<Dialog.Popup.Props, 'className' | 'children' | 'render' | 'title' | 'onSubmit'> {
     open: boolean;
     onClose: () => void;
     /** The header's heading, which names the modal. Without one, name it with
@@ -39,6 +39,12 @@ export interface ModalProps extends Omit<Dialog.Popup.Props, 'className' | 'chil
     panel?: boolean;
     /** The backdrop's dimming, for a modal that needs a darker or blurred stage. */
     backdropClassName?: string;
+    /** Adds a close button at the header's end, for a modal whose footer doesn't close it,
+     *  such as one that only shows something. It needs no title. */
+    closeButton?: boolean | undefined;
+    /** Makes the header, body and footer one form, so a `type="submit"` button in the footer
+     *  submits it, as Enter in a field does. The page never reloads: its default is prevented. */
+    onSubmit?: ((event: FormEvent<HTMLFormElement>) => void) | undefined;
     /** On the panel. */
     className?: string;
     /** The body. With a title or a footer it sits padded between them and scrolls
@@ -49,5 +55,5 @@ export interface ModalProps extends Omit<Dialog.Popup.Props, 'className' | 'chil
  *  and focus returns to where it was on close. Give it a `title`, a `description`
  *  and a `footer` for the standard layout, as a Drawer has, or lay out the whole
  *  panel with the children. */
-export declare function Modal({ open, onClose, title, description, footer, size, alert, dismissible, align, panel, backdropClassName, className, children, ...popupProps }: ModalProps): import("react").JSX.Element;
+export declare function Modal({ open, onClose, title, description, footer, size, alert, dismissible, align, panel, backdropClassName, closeButton, onSubmit, className, children, initialFocus, ...popupProps }: ModalProps): import("react").JSX.Element;
 export {};