@parallelworks/ui 0.77.0 → 0.78.0

package/dist/components/ToggleGroup.d.ts

@@ -27,6 +27,9 @@ export interface ToggleGroupProps<T extends string> {
     } | undefined;
     size?: 'sm' | 'md' | undefined;
     disabled?: boolean | undefined;
+    /** Names an element that says more about the group, such as a live summary
+     *  of what the filter lets through. */
+    'aria-describedby'?: string | undefined;
     testId?: string;
 }
 /** Options that narrow a list, such as run statuses or job states, as a row of
@@ -39,4 +42,4 @@ export interface ToggleGroupProps<T extends string> {
  *  value, such as a time range, what to group by, or which view of the same
  *  data to show. A filter that may be off, or takes several values, is a
  *  `ToggleGroup`. */
-export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, size, disabled, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;
+export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/ToggleGroup.js

@@ -1,6 +1,7 @@
 import { cx } from "../cx.js";
 import { buttonClasses } from "./buttonClasses.js";
-import { useStrings } from "./Provider.js";
+import { CheckIcon } from "../icons.js";
+import { useLocale, useStrings } from "./Provider.js";
 import { formatCount } from "../format.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
@@ -17,12 +18,13 @@ var ALL = "\0all";
 *  value, such as a time range, what to group by, or which view of the same
 *  data to show. A filter that may be off, or takes several values, is a
 *  `ToggleGroup`. */
-function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, size = "sm", disabled = false, testId }) {
+function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
 	const strings = useStrings();
 	const allCount = typeof all === "object" ? all.count : void 0;
 	const pressed = all && value.length === 0 ? [ALL] : value;
 	return /* @__PURE__ */ jsxs(ToggleGroup, {
 		"aria-label": label,
+		"aria-describedby": describedBy,
 		"data-testid": testId,
 		className: "flex flex-wrap items-center gap-1",
 		multiple,
@@ -35,18 +37,26 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 			}
 			onValueChange(options.filter((option) => next.includes(option.value)).map((option) => option.value));
 		},
-		children: [all && /* @__PURE__ */ jsx(Chip, {
-			value: ALL,
-			label: strings.common.all,
-			count: allCount,
-			size
-		}), options.map((option) => /* @__PURE__ */ jsx(Chip, {
-			...option,
-			size
-		}, option.value))]
+		children: [
+			all && /* @__PURE__ */ jsx(Chip, {
+				value: ALL,
+				label: strings.common.all,
+				count: allCount,
+				size
+			}),
+			all && options.length > 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "mx-0.5 h-5 w-px shrink-0 bg-(--theme-border)"
+			}),
+			options.map((option) => /* @__PURE__ */ jsx(Chip, {
+				...option,
+				size
+			}, option.value))
+		]
 	});
 }
 function Chip({ value, label, icon, count, disabled, testId, size }) {
+	const locale = useLocale();
 	return /* @__PURE__ */ jsxs(Toggle, {
 		value,
 		disabled,
@@ -56,11 +66,18 @@ function Chip({ value, label, icon, count, disabled, testId, size }) {
 			size
 		})),
 		children: [
-			icon,
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "inline-flex shrink-0 transition-opacity group-not-aria-pressed:opacity-55",
+				children: icon
+			}),
 			label,
 			count !== void 0 && /* @__PURE__ */ jsx("span", {
 				className: "tabular-nums text-(--theme-muted-text-color) group-aria-pressed:text-(--theme-app)",
-				children: formatCount(count)
+				children: formatCount(count, locale)
+			}),
+			/* @__PURE__ */ jsx(CheckIcon, {
+				"aria-hidden": "true",
+				className: "hidden shrink-0 group-aria-pressed:block"
 			})
 		]
 	});

package/dist/components/Tooltip.d.ts

@@ -14,12 +14,18 @@ export interface TooltipProps extends Omit<BaseTooltip.Trigger.Props, 'content'
     /** The anchor. It receives the trigger's props and ref, so it must pass them to its element. */
     children: ReactElement;
     side?: TooltipSide;
-    /** Keys shown beside the content, joined with +, such as ⌘+F. */
+    /** Keys shown beside the content as keycaps, written as `Kbd` takes them, such as
+     *  `Mod+F`: Command on an Apple keyboard, Control elsewhere. */
     shortcut?: string | undefined;
     disabled?: boolean | undefined;
     /** Opens only while the anchor's text is clipped, such as a truncated label. */
     overflowOnly?: boolean;
+    /** Also the anchor's accessible description, for a hint that adds to its name
+     *  rather than repeating it, such as what Make default changes. Assistive
+     *  technology reads it with the anchor whether or not the tooltip is open. */
+    describesAnchor?: boolean | undefined;
 }
 /** A visual hint for sighted pointer and keyboard users. The anchor still needs
- *  its own accessible name; use InfoTip for content everyone must reach. */
-export declare function Tooltip({ content, children, side, shortcut, disabled, overflowOnly, ...anchorProps }: TooltipProps): import("react").JSX.Element;
+ *  its own accessible name; `describesAnchor` also gives assistive technology the
+ *  hint. Use InfoTip for content everyone must reach, such as on a touch screen. */
+export declare function Tooltip({ content, children, side, shortcut, disabled, overflowOnly, describesAnchor, ...anchorProps }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -1,54 +1,51 @@
-import { positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
-import { useFullscreenContainer } from "./fullscreen.js";
-import { keyedByContent } from "./keys.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, use, useState } from "react";
+import { positionerClassName, tipClassName } from "./floating.js";
+import { usePopupContainer } from "./popupContainer.js";
+import { Kbd } from "./Kbd.js";
+import { cloneElement, createContext, use, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/components/Tooltip.tsx
 var TooltipHandleContext = createContext(null);
-function KbdShortcut({ keys }) {
-	const parts = keys.split("+").map((part) => part.trim()).filter(Boolean);
-	return /* @__PURE__ */ jsx("span", {
-		className: "inline-flex items-center gap-1 align-middle",
-		children: keyedByContent(parts, (p) => p).map(({ key, item: part }, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
-			className: "opacity-60 text-[11px]",
-			children: "+"
-		}), /* @__PURE__ */ jsx("kbd", {
-			className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded border border-current/30 bg-current/10 font-sans text-[11px] font-semibold leading-none",
-			children: part
-		})] }, key))
-	});
-}
 function TooltipPopup({ content, shortcut, side }) {
-	const fullscreen = useFullscreenContainer();
+	const portal = usePopupContainer();
 	return /* @__PURE__ */ jsx(Tooltip.Portal, {
-		container: fullscreen,
+		...portal,
 		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
 			side,
-			sideOffset: 8,
+			sideOffset: 6,
 			className: positionerClassName,
-			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
-				className: `max-w-xs ${tipClassName}`,
-				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
+			children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+				className: tipClassName,
+				children: shortcut ? /* @__PURE__ */ jsxs("span", {
 					className: "inline-flex items-center gap-2",
-					children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
-				}) : content]
+					children: [content, /* @__PURE__ */ jsx(Kbd, {
+						keys: shortcut,
+						size: "xs"
+					})]
+				}) : content
 			})
 		})
 	});
 }
+/** How long the pointer rests on an anchor before its tooltip opens, in milliseconds.
+*  Once one is open, the next opens at once. An anchor's own `delay` overrides it,
+*  such as 0 on a collapsed rail where the tooltip is the only label. */
+var OPEN_DELAY = 400;
 /** One popup serves every Tooltip below it, so each anchor costs only a trigger.
 *  UIProvider mounts it; nothing else needs to. */
 function TooltipProvider({ children }) {
 	const [handle] = useState(() => Tooltip.createHandle());
-	return /* @__PURE__ */ jsxs(Tooltip.Provider, { children: [/* @__PURE__ */ jsx(TooltipHandleContext, {
-		value: handle,
-		children
-	}), /* @__PURE__ */ jsx(Tooltip.Root, {
-		handle,
-		onOpenChange: skipUnclipped,
-		children: ({ payload }) => payload && /* @__PURE__ */ jsx(TooltipPopup, { ...payload })
-	})] });
+	return /* @__PURE__ */ jsxs(Tooltip.Provider, {
+		delay: OPEN_DELAY,
+		children: [/* @__PURE__ */ jsx(TooltipHandleContext, {
+			value: handle,
+			children
+		}), /* @__PURE__ */ jsx(Tooltip.Root, {
+			handle,
+			onOpenChange: skipUnclipped,
+			children: ({ payload }) => payload && /* @__PURE__ */ jsx(TooltipPopup, { ...payload })
+		})]
+	});
 }
 /** An overflowOnly anchor opens only while its text is cut off. */
 function skipUnclipped(open, details) {
@@ -56,26 +53,45 @@ function skipUnclipped(open, details) {
 	if (open && anchor instanceof HTMLElement && anchor.hasAttribute("data-overflow-only") && anchor.scrollWidth <= anchor.clientWidth) details.cancel();
 }
 /** A visual hint for sighted pointer and keyboard users. The anchor still needs
-*  its own accessible name; use InfoTip for content everyone must reach. */
-function Tooltip$1({ content, children, side = "top", shortcut, disabled = false, overflowOnly = false, ...anchorProps }) {
+*  its own accessible name; `describesAnchor` also gives assistive technology the
+*  hint. Use InfoTip for content everyone must reach, such as on a touch screen. */
+function Tooltip$1({ content, children, side = "top", shortcut, disabled = false, overflowOnly = false, describesAnchor = false, ...anchorProps }) {
 	const handle = use(TooltipHandleContext);
+	const descriptionId = useId();
 	const payload = {
 		content,
 		shortcut,
 		side
 	};
+	const described = describesAnchor && !disabled && !!content;
+	const anchor = children;
+	const describedBy = [
+		anchor.props["aria-describedby"],
+		anchorProps["aria-describedby"],
+		descriptionId
+	].filter(Boolean).join(" ");
 	const trigger = /* @__PURE__ */ jsx(Tooltip.Trigger, {
 		...anchorProps,
+		...!handle && anchorProps.delay === void 0 && { delay: OPEN_DELAY },
 		handle: handle ?? void 0,
 		payload,
 		disabled: disabled || !content,
 		"data-overflow-only": overflowOnly || void 0,
-		render: children
+		render: described ? cloneElement(anchor, { "aria-describedby": describedBy }) : children
+	});
+	const description = described && /* @__PURE__ */ jsx("span", {
+		id: descriptionId,
+		hidden: true,
+		children: content
 	});
-	if (handle) return trigger;
+	if (handle) return description ? /* @__PURE__ */ jsxs(Fragment$1, { children: [trigger, description] }) : trigger;
 	return /* @__PURE__ */ jsxs(Tooltip.Root, {
 		onOpenChange: skipUnclipped,
-		children: [trigger, /* @__PURE__ */ jsx(TooltipPopup, { ...payload })]
+		children: [
+			trigger,
+			description,
+			/* @__PURE__ */ jsx(TooltipPopup, { ...payload })
+		]
 	});
 }
 //#endregion

package/dist/components/buttonClasses.d.ts

@@ -1,7 +1,10 @@
 /** `primary` is the one action a view leads to; `secondary` sits beside it;
  *  `outline` and `ghost` are toolbar and inline actions, bordered or not;
- *  `danger` confirms what can't be undone. */
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+ *  `danger` confirms what can't be undone; `danger-outline` is a destructive
+ *  action that isn't the view's confirmation, such as Revoke or Disable on a row. */
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'danger-outline';
+/** `md` (32px) lines up with inputs and is the default; `lg` (40px) is for a
+ *  standalone page's one action, such as signing in or approving a device. */
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface ButtonStyle {
     variant?: ButtonVariant | undefined;

package/dist/components/buttonClasses.js

@@ -1,24 +1,25 @@
 import { cx } from "../cx.js";
 //#region src/components/buttonClasses.ts
-var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-[color,background-color,border-color,box-shadow,translate] duration-150 hover:not-disabled:not-aria-disabled:-translate-y-px hover:not-disabled:not-aria-disabled:shadow-(--theme-shadow-sm) active:not-disabled:not-aria-disabled:translate-y-0 active:not-disabled:not-aria-disabled:shadow-none motion-reduce:hover:not-disabled:not-aria-disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
 var variants = {
 	primary: "bg-(--theme-accent) text-(--theme-accent-text) hover:not-disabled:not-aria-disabled:bg-(--theme-accent-hover)",
 	secondary: "border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) hover:not-disabled:not-aria-disabled:bg-(--theme-hover)",
 	outline: "border border-(--theme-border) text-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-muted-panel-bg) hover:not-disabled:not-aria-disabled:text-(--theme-app) aria-pressed:border-(--theme-link) aria-pressed:text-(--theme-app) data-selected:border-(--theme-link) data-selected:text-(--theme-app) data-popup-open:bg-(--theme-muted-panel-bg) data-popup-open:text-(--theme-app)",
 	ghost: "text-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-muted-panel-bg) hover:not-disabled:not-aria-disabled:text-(--theme-app) aria-pressed:bg-(--theme-muted-panel-bg) aria-pressed:text-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-link) data-popup-open:bg-(--theme-muted-panel-bg) data-popup-open:text-(--theme-app)",
-	danger: "bg-(--theme-error-solid) text-white hover:not-disabled:not-aria-disabled:bg-(--theme-error-solid)/90"
+	danger: "bg-(--theme-error-solid) text-white hover:not-disabled:not-aria-disabled:bg-(--theme-error-solid)/90",
+	"danger-outline": "border border-(--theme-error)/40 text-(--theme-error-text) hover:not-disabled:not-aria-disabled:border-(--theme-error)/60 hover:not-disabled:not-aria-disabled:bg-(--theme-error-muted) data-popup-open:bg-(--theme-error-muted)"
 };
 var sizes = {
-	xs: "h-6 px-2 text-xs [&_svg]:size-3",
-	sm: "h-7 px-2.5 text-xs [&_svg]:size-3.5",
-	md: "h-8 px-3 text-sm [&_svg]:size-4",
-	lg: "h-10 px-4 text-base [&_svg]:size-5"
+	xs: "h-6 px-2 text-xs [:where(&)_svg]:size-3",
+	sm: "h-7 px-2.5 text-xs [:where(&)_svg]:size-3.5",
+	md: "h-8 px-3 text-sm [:where(&)_svg]:size-4",
+	lg: "h-10 px-4 text-base [:where(&)_svg]:size-5"
 };
 var squares = {
-	xs: "size-6 text-xs [&_svg]:size-3",
-	sm: "size-7 text-xs [&_svg]:size-3.5",
-	md: "size-8 text-sm [&_svg]:size-4",
-	lg: "size-10 text-base [&_svg]:size-5"
+	xs: "size-6 text-xs [:where(&)_svg]:size-3",
+	sm: "size-7 text-xs [:where(&)_svg]:size-3.5",
+	md: "size-8 text-sm [:where(&)_svg]:size-4",
+	lg: "size-10 text-base [:where(&)_svg]:size-5"
 };
 /** The one look for anything pressed: a button, or a link or popup trigger
 *  that acts as one. `Button` and `IconButton` apply it; use it directly on a

package/dist/components/chart.d.ts

@@ -0,0 +1,69 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/** A series' mark color for palette slot 1–8: the theme's category hue, between the slot's
+ *  soft fill and its text and twice as saturated, so a bar or a line stands out from the page
+ *  in light and dark alike and keeps the hue the slot has everywhere else. */
+export declare function seriesSlotColor(slot: number): string;
+/** A series' color by its key, any CSS color for a fill, a stroke or a style: the same key
+ *  gets the same color on every chart, as `categoryOf` gives a name its avatar color. */
+export declare function seriesColor(key: string): string;
+/** Colors for a chart's series, each key its `seriesColor` unless another key took that slot
+ *  first, when it moves to the next free one: up to eight series never share a color. */
+export declare function seriesColors(keys: readonly string[]): Record<string, string>;
+export type SeriesSwatchShape = 'square' | 'dot' | 'line';
+/** A series' color as a mark, for a legend or a tooltip's row. Only seen: the series' name
+ *  beside it says which it is. */
+export declare function SeriesSwatch({ color, shape, className, }: {
+    color: string;
+    shape?: SeriesSwatchShape | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+/** Which series is in focus, from hovering a mark or the legend, and how strongly every other
+ *  series draws while it is: their marks fade so the one in focus reads alone. */
+export declare function useSeriesHighlight(): {
+    highlighted: string | null;
+    highlight: (key: string | null) => void;
+    /** 1 for the series in focus or when none is, 0.3 for the rest. */
+    opacity: (key: string) => number;
+};
+/** A series' opacity while `highlighted` is in focus: full for it, or for all when none is. */
+export declare function seriesOpacity(key: string, highlighted: string | null | undefined): number;
+export interface ChartLegendItem {
+    key: string;
+    label: ReactNode;
+    color: string;
+}
+/** A chart's legend: each series' swatch and name. With `onHighlight` hovering or focusing a
+ *  name puts its series in focus, and pressing one keeps it there until pressed again. */
+export declare function ChartLegendList({ items, highlighted, onHighlight, shape, className, }: {
+    items: readonly ChartLegendItem[];
+    highlighted?: string | null | undefined;
+    onHighlight?: ((key: string | null) => void) | undefined;
+    shape?: SeriesSwatchShape | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+export interface ChartTooltipItem {
+    key: string;
+    name: ReactNode;
+    value: number;
+    color: string;
+}
+/** What a chart's tooltip shows for a point: its label, then each series' swatch, name and
+ *  value, largest first, the series in focus in bold, and a total when there is more than one.
+ *  A charting library's tooltip renders it as its content. */
+export declare function ChartTooltipContent({ label, items, formatValue, total, highlighted, hideZero, sort, className, style, }: {
+    label?: ReactNode;
+    items: readonly ChartTooltipItem[];
+    /** Formats each value and the total, such as a currency; numbers in the host's locale
+     *  (`UIProvider locale`) by default. */
+    formatValue?: ((n: number) => string) | undefined;
+    /** Adds a total row; on by default when more than one series shows. */
+    total?: boolean | undefined;
+    highlighted?: string | null | undefined;
+    /** Leaves out series whose value is zero; on by default. */
+    hideZero?: boolean | undefined;
+    /** Lists the largest value first; on by default. */
+    sort?: boolean | undefined;
+    className?: string | undefined;
+    /** Places it, such as beside the point it describes. */
+    style?: CSSProperties | undefined;
+}): import("react").JSX.Element;

package/dist/components/chart.js

@@ -0,0 +1,145 @@
+import { cx } from "../cx.js";
+import { useLocale, useStrings } from "./Provider.js";
+import { CATEGORY_CLASSES, categoryOf } from "./category.js";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart.tsx
+var SLOTS = CATEGORY_CLASSES.length;
+/** A series' mark color for palette slot 1–8: the theme's category hue, between the slot's
+*  soft fill and its text and twice as saturated, so a bar or a line stands out from the page
+*  in light and dark alike and keeps the hue the slot has everywhere else. */
+function seriesSlotColor(slot) {
+	const n = ((slot - 1) % SLOTS + SLOTS) % SLOTS + 1;
+	return `oklch(from color-mix(in oklch, var(--theme-category-${n}), var(--theme-category-${n}-text)) l calc(c * 2) h)`;
+}
+/** A series' color by its key, any CSS color for a fill, a stroke or a style: the same key
+*  gets the same color on every chart, as `categoryOf` gives a name its avatar color. */
+function seriesColor(key) {
+	return seriesSlotColor(categoryOf(key));
+}
+/** Colors for a chart's series, each key its `seriesColor` unless another key took that slot
+*  first, when it moves to the next free one: up to eight series never share a color. */
+function seriesColors(keys) {
+	const taken = /* @__PURE__ */ new Set();
+	const colors = {};
+	for (const key of keys) {
+		if (key in colors) continue;
+		let slot = categoryOf(key);
+		if (taken.size < SLOTS) while (taken.has(slot)) slot = slot % SLOTS + 1;
+		taken.add(slot);
+		colors[key] = seriesSlotColor(slot);
+	}
+	return colors;
+}
+/** A series' color as a mark, for a legend or a tooltip's row. Only seen: the series' name
+*  beside it says which it is. */
+function SeriesSwatch({ color, shape = "square", className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("inline-block shrink-0", shape === "line" ? "h-0.5 w-3 rounded-full" : "size-2.5", shape === "dot" && "rounded-full", shape === "square" && "rounded-[3px]", className),
+		style: { background: color }
+	});
+}
+/** Which series is in focus, from hovering a mark or the legend, and how strongly every other
+*  series draws while it is: their marks fade so the one in focus reads alone. */
+function useSeriesHighlight() {
+	const [highlighted, highlight] = useState(null);
+	return {
+		highlighted,
+		highlight,
+		opacity: useCallback((key) => seriesOpacity(key, highlighted), [highlighted])
+	};
+}
+/** A series' opacity while `highlighted` is in focus: full for it, or for all when none is. */
+function seriesOpacity(key, highlighted) {
+	return highlighted == null || highlighted === key ? 1 : .3;
+}
+/** A chart's legend: each series' swatch and name. With `onHighlight` hovering or focusing a
+*  name puts its series in focus, and pressing one keeps it there until pressed again. */
+function ChartLegendList({ items, highlighted, onHighlight, shape, className }) {
+	const [pinned, setPinned] = useState(null);
+	const leave = () => onHighlight?.(pinned);
+	return /* @__PURE__ */ jsx("ul", {
+		className: cx("m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0 text-xs text-(--theme-app)", className),
+		children: items.map((item) => {
+			const faded = highlighted != null && highlighted !== item.key;
+			const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SeriesSwatch, {
+				color: item.color,
+				shape
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: item.label
+			})] });
+			return /* @__PURE__ */ jsx("li", {
+				className: cx("flex min-w-0 items-center transition-opacity motion-reduce:transition-none", faded && "opacity-50"),
+				children: onHighlight ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-pressed": pinned === item.key,
+					onPointerEnter: () => onHighlight(item.key),
+					onPointerLeave: leave,
+					onFocus: () => onHighlight(item.key),
+					onBlur: leave,
+					onClick: () => {
+						const next = pinned === item.key ? null : item.key;
+						setPinned(next);
+						onHighlight(next ?? item.key);
+					},
+					className: "-mx-1 flex min-w-0 cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 hover:bg-(--theme-muted-panel-bg) focus-visible:outline-2 focus-visible:outline-(--theme-focus) aria-pressed:font-medium",
+					children: body
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: body
+				})
+			}, item.key);
+		})
+	});
+}
+/** What a chart's tooltip shows for a point: its label, then each series' swatch, name and
+*  value, largest first, the series in focus in bold, and a total when there is more than one.
+*  A charting library's tooltip renders it as its content. */
+function ChartTooltipContent({ label, items, formatValue, total, highlighted, hideZero = true, sort = true, className, style }) {
+	const { chart: t } = useStrings();
+	const locale = useLocale();
+	const number = useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
+	const format = formatValue ?? ((n) => number.format(n));
+	let rows = hideZero ? items.filter((item) => item.value !== 0) : [...items];
+	if (sort) rows = [...rows].sort((a, b) => b.value - a.value);
+	const sum = rows.reduce((acc, item) => acc + item.value, 0);
+	const showTotal = total ?? rows.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("min-w-40 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) p-3 text-xs text-(--theme-app) shadow-(--theme-shadow-lg)", className),
+		style,
+		children: [
+			label != null && label !== "" && /* @__PURE__ */ jsx("div", {
+				className: "mb-1.5 font-semibold",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "m-0 list-none space-y-1 p-0",
+				children: rows.map((item) => /* @__PURE__ */ jsxs("li", {
+					className: cx("flex items-center gap-2", highlighted === item.key ? "font-semibold" : highlighted != null && "text-(--theme-muted-text-color)"),
+					children: [
+						/* @__PURE__ */ jsx(SeriesSwatch, { color: item.color }),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: item.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "ml-2 tabular-nums",
+							children: format(item.value)
+						})
+					]
+				}, item.key))
+			}),
+			showTotal && /* @__PURE__ */ jsxs("div", {
+				className: "mt-1.5 flex justify-between gap-4 border-t border-(--theme-border) pt-1.5 font-medium",
+				children: [/* @__PURE__ */ jsx("span", { children: t.total }), /* @__PURE__ */ jsx("span", {
+					className: "tabular-nums",
+					children: format(sum)
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { ChartLegendList, ChartTooltipContent, SeriesSwatch, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight };

package/dist/components/comboboxItems.d.ts

@@ -1,4 +1,8 @@
 import type { ReactNode } from 'react';
+/** The end of an option's row: its hint, then the check while it is chosen, on the label's
+ *  line rather than the middle of a row with a description under it. */
+export declare const pickerEndClassName = "ml-auto flex h-[1lh] shrink-0 items-center gap-2 self-start pl-2";
+export declare const pickerHintClassName = "text-xs tabular-nums text-(--theme-muted-text-color)";
 /** An option's row in a Select's or a Combobox's list, so both lists look alike: the icon, the
  *  label over its description, and the check at the end. */
 export declare const pickerItemClassName: string;
@@ -13,6 +17,8 @@ export interface ComboboxItem<Value = string> {
     icon?: ReactNode;
     /** Beside the label, such as a tag that marks the option out. */
     badge?: ReactNode;
+    /** Short muted text at the row's end, such as a key or a count; read after the label. */
+    hint?: string | undefined;
     disabled?: boolean | undefined;
 }
 export interface ComboboxGroup<Value = string> {
@@ -29,7 +35,7 @@ export type ComboboxLeaf<Value = string> = ComboboxItem<Value> | (Value & string
 /** Items, groups under headings, or both: items between groups list where they sit, without a heading. */
 export type ComboboxItems<Value = string> = readonly (ComboboxLeaf<Value> | ComboboxGroup<Value>)[];
 /** How an option is named and described: by its label, with its description read after it. */
-export declare function optionNaming(id: string, item: Pick<ComboboxItem<unknown>, 'description' | 'accessibleDescription'>): {
+export declare function optionNaming(id: string, item: Pick<ComboboxItem<unknown>, 'description' | 'accessibleDescription' | 'hint'>): {
     'aria-labelledby': string;
     'aria-describedby': string | undefined;
 };

package/dist/components/comboboxItems.js

@@ -1,13 +1,17 @@
 import { cx } from "../cx.js";
 import { panelItemClassName } from "./floating.js";
 //#region src/components/comboboxItems.ts
+/** The end of an option's row: its hint, then the check while it is chosen, on the label's
+*  line rather than the middle of a row with a description under it. */
+var pickerEndClassName = "ml-auto flex h-[1lh] shrink-0 items-center gap-2 self-start pl-2";
+var pickerHintClassName = "text-xs tabular-nums text-(--theme-muted-text-color)";
 /** An option's row in a Select's or a Combobox's list, so both lists look alike: the icon, the
 *  label over its description, and the check at the end. */
 var pickerItemClassName = cx(panelItemClassName, "data-selected:font-medium");
 /** How an option is named and described: by its label, with its description read after it. */
 function optionNaming(id, item) {
 	return {
-		"aria-labelledby": `${id}label`,
+		"aria-labelledby": item.hint ? `${id}label ${id}hint` : `${id}label`,
 		"aria-describedby": item.accessibleDescription || item.description ? `${id}description` : void 0
 	};
 }
@@ -19,4 +23,4 @@ function comboboxLeaves(items) {
 	return items.flatMap((item) => isComboboxGroup(item) ? item.items : [item]);
 }
 //#endregion
-export { comboboxLeaves, isComboboxGroup, optionNaming, pickerItemClassName };
+export { comboboxLeaves, isComboboxGroup, optionNaming, pickerEndClassName, pickerHintClassName, pickerItemClassName };

package/dist/components/dismiss.d.ts

@@ -5,7 +5,11 @@ interface CloseDetails {
 }
 /** The `onOpenChange` of a modal or drawer that the host opens and closes:
  *  Escape and a press outside close it unless it's not `dismissible`, and a
- *  press on a toast never does, since the toast sits above the backdrop. */
+ *  press on a toast never does, since the toast sits above the backdrop.
+ *
+ *  An Escape whose default a layer inside already prevented is that layer's,
+ *  such as a picker of the host's own or an editor's suggestions: it closes
+ *  them, and the next Escape closes the dialog. */
 export declare function closeHandler(dismissible: boolean, onClose: () => void): (next: boolean, details: CloseDetails) => void;
 /** The row of a dialog's actions along its bottom edge, ruled off from its body. */
 export declare const dialogFooterClassName = "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3";

package/dist/components/dismiss.js

@@ -2,11 +2,15 @@ import { pressedToast } from "./Toast.js";
 //#region src/components/dismiss.ts
 /** The `onOpenChange` of a modal or drawer that the host opens and closes:
 *  Escape and a press outside close it unless it's not `dismissible`, and a
-*  press on a toast never does, since the toast sits above the backdrop. */
+*  press on a toast never does, since the toast sits above the backdrop.
+*
+*  An Escape whose default a layer inside already prevented is that layer's,
+*  such as a picker of the host's own or an editor's suggestions: it closes
+*  them, and the next Escape closes the dialog. */
 function closeHandler(dismissible, onClose) {
 	return (next, details) => {
 		if (next) return;
-		if (!dismissible && details.reason === "escape-key" || details.reason === "outside-press" && pressedToast(details.event)) {
+		if (details.reason === "escape-key" && (!dismissible || details.event?.defaultPrevented) || details.reason === "outside-press" && pressedToast(details.event)) {
 			details.cancel();
 			return;
 		}

package/dist/components/floating.d.ts

@@ -7,11 +7,11 @@ export declare const panelClassName = "rounded-lg border border-(--theme-border)
 export declare const panelListClassName = "p-1";
 /** A row in a panel, inside its `panelListClassName` gutter; its text lines up with a field's. */
 export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
-/** A tooltip's or infotip's small inverted surface. */
-export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
-export declare const tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";
+/** A tooltip's, infotip's or popover tip's surface: a small panel in the page's colors, so a
+ *  hint reads as part of the page rather than a dark patch over it. */
+export declare const tipClassName = "max-w-64 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) px-2.5 py-1.5 text-xs text-(--theme-app) shadow-(--theme-shadow-lg) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** A hover card's surface; the card sets its own width and padding. */
-export declare const cardClassName = "overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
+export declare const cardClassName = "overflow-hidden rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** Where a popup opens: under an element, such as the button that opened it, or
  *  at a pointer event's point, which then moves with the element it landed on. */
 export type FloatingAnchor = Element | {