@seekalfred/primitives 0.7.3 → 0.8.0

package/dist/multi-select/multi-select.d.ts

@@ -12,6 +12,11 @@ import { Key, SelectProps } from "react-aria-components";
  * in beside the chevron when anything is picked. Options are `SelectItem`s, whose
  * tick pops in as an option is picked; `MultiSelectGroup` gathers them under a
  * heading.
+ *
+ * Opt in to `searchable` for a search field at the top of the list that filters
+ * the options as you type (React Aria's Autocomplete, so the arrow keys and Enter
+ * work from the field). Pass `onCreate` to also offer a "Create “…”" row when the
+ * typed text matches no option.
  */
 export interface MultiSelectProps extends Omit<SelectProps<object, "multiple">, "className" | "style" | "children" | "items" | "selectionMode"> {
   /** `SelectItem` children. */
@@ -43,6 +48,32 @@ export interface MultiSelectProps extends Omit<SelectProps<object, "multiple">,
   size?: "sm" | "md" | "lg";
   /** Extra classes for the wrapper. Merged last. */
   className?: string;
+  /**
+   * Puts a search field at the top of the list. Typing filters the options (and
+   * groups) by their text, ignoring case and accents; the arrow keys and Enter
+   * work from the field. Cleared each time the list closes. Off by default.
+   * Turned on by `onCreate` too.
+   *
+   * @default false
+   */
+  searchable?: boolean;
+  /** Accessible name of the search field. @default "Search options" */
+  searchLabel?: string;
+  /** Placeholder of the search field. @default "Search" */
+  searchPlaceholder?: string;
+  /** Shown in the list while the search matches nothing. @default "No options found" */
+  emptyLabel?: string;
+  /**
+   * Makes the list creatable, and searchable. While the typed text (trimmed)
+   * matches no option's text or id nor a picked value, ignoring case, the list ends
+   * with a "Create “text”" row. Picking it calls `onCreate` with the text, adds
+   * the text itself as a picked key (through `onChange`, as any pick) and clears
+   * the search. Render a `SelectItem` whose `id` is that text so it lists like
+   * the others; until then its chip shows the text.
+   */
+  onCreate?: (value: string) => void;
+  /** The create row's text for the typed value. @default (value) => `Create “${value}”` */
+  createLabel?: (value: string) => string;
 }
 export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const multiSelectGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/multi-select/multi-select.js

@@ -2,14 +2,97 @@
 import { cn, cnAll } from "../lib/cn.js";
 import { SwapText } from "../lib/swap-text.js";
 import { useFlip } from "../lib/flip.js";
-import { Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from "../tooltip/tooltip.js";
 import { labelVariants } from "../label/label.js";
-import { selectPopoverVariants, selectTriggerVariants, selectVariants } from "../select/select.js";
+import { Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from "../tooltip/tooltip.js";
+import { selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "../select/select.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useContext, useRef, useState } from "react";
-import { Button, ButtonContext, FieldError, Header, Label, ListBox, ListBoxSection, Popover, Select, SelectStateContext, SelectValue } from "react-aria-components";
+import { Autocomplete, Button, ButtonContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Popover, SearchField, Select, SelectStateContext, SelectValue, useFilter } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/multi-select/multi-select.tsx
+/** The key of the create row. Never reaches `onChange`. */
+const CREATE_KEY = "__multi-select-create__";
+const defaultCreateLabel = (value) => `Create \u201c${value}\u201d`;
+/** Whether `text` already names an option (by its text or its key) or a pick, ignoring case. */
+function isTaken(state, text) {
+	const want = text.toLocaleLowerCase();
+	if ((state?.value ?? []).some((key) => String(key).toLocaleLowerCase() === want)) return true;
+	if (!state) return false;
+	for (const key of state.collection.getKeys()) {
+		const node = state.collection.getItem(key);
+		if (node?.type === "item" && node.key !== CREATE_KEY && (node.textValue.toLocaleLowerCase() === want || String(node.key).toLocaleLowerCase() === want)) return true;
+	}
+	return false;
+}
+/**
+* The list with a search field over it (React Aria's Autocomplete): the field
+* keeps focus and drives the options with the arrow keys, Enter picks.
+*/
+function SearchList({ query, onQueryChange, creatable, searchLabel, searchPlaceholder, emptyLabel, children }) {
+	const state = useContext(SelectStateContext);
+	const { contains } = useFilter({ sensitivity: "base" });
+	const text = query.trim();
+	const offerCreate = creatable && text !== "" && !isTaken(state, text);
+	return /* @__PURE__ */ jsxs(Autocomplete, {
+		inputValue: query,
+		onInputChange: onQueryChange,
+		filter: (textValue, input, node) => node.key === CREATE_KEY ? offerCreate : contains(textValue, input),
+		children: [/* @__PURE__ */ jsxs(SearchField, {
+			"aria-label": searchLabel,
+			autoFocus: true,
+			"data-slot": "multi-select-search",
+			className: multiSelectSearchClass,
+			children: [/* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.75",
+				strokeLinecap: "round",
+				className: "size-4 flex-none text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "7",
+					cy: "7",
+					r: "4.5"
+				}), /* @__PURE__ */ jsx("path", { d: "m10.5 10.5 3 3" })]
+			}), /* @__PURE__ */ jsx(Input, {
+				placeholder: searchPlaceholder,
+				"data-slot": "multi-select-search-input",
+				className: "min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 font-sans text-sm text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden"
+			})]
+		}), /* @__PURE__ */ jsx(ListBox, {
+			"data-slot": "multi-select-list",
+			renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+				"data-slot": "multi-select-empty",
+				className: "m-0 px-2 py-1.5 text-sm text-muted-foreground",
+				children: emptyLabel
+			}),
+			className: "min-h-0 flex-1 overflow-y-auto outline-none",
+			children
+		})]
+	});
+}
+/** The search row: a quiet field over the list, underlined while focused. */
+const multiSelectSearchClass = "relative mb-1 flex h-(--density-control-h-sm) flex-none items-center gap-2 border-b-(length:--border-width) border-border px-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-(--focus-ring-width) after:bg-transparent has-[input:focus]:after:bg-(--color-control-edge)";
+/** The row that creates the typed value. Kept in the collection; the filter shows it. */
+function CreateItem({ label }) {
+	return /* @__PURE__ */ jsxs(ListBoxItem, {
+		id: CREATE_KEY,
+		textValue: label,
+		"data-slot": "multi-select-create",
+		className: cnAll(selectItemVariants(), "text-text-secondary data-[focused]:text-foreground"),
+		children: [/* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			className: "size-3.5 flex-none",
+			children: /* @__PURE__ */ jsx("path", { d: "M8 3.5v9M3.5 8h9" })
+		}), label]
+	});
+}
 /** The picked options as chips, then "+N", reading Select's own state. */
 function Chips({ placeholder, maxVisible, moreLabel, moreRef }) {
 	const state = useContext(SelectStateContext);
@@ -117,8 +200,29 @@ function Clear({ label, disabled }) {
 		})
 	});
 }
-const MultiSelect = forwardRef(function MultiSelect({ children, label, labelHidden, placeholder = "Select options", errorMessage, maxVisible = 2, moreLabel, overflowTooltip = false, clearLabel = "Clear selections", size = "md", className, ...props }, ref) {
+const MultiSelect = forwardRef(function MultiSelect({ children, label, labelHidden, placeholder = "Select options", errorMessage, maxVisible = 2, moreLabel, overflowTooltip = false, clearLabel = "Clear selections", size = "md", className, searchable = false, searchLabel = "Search options", searchPlaceholder = "Search", emptyLabel = "No options found", onCreate, createLabel = defaultCreateLabel, ...props }, ref) {
 	const moreRef = useRef(null);
+	const creatable = onCreate != null;
+	const withSearch = searchable || creatable;
+	const [query, setQuery] = useState("");
+	const [ownValue, setOwnValue] = useState(() => props.defaultValue ?? []);
+	const value = props.value ?? ownValue;
+	const creatableProps = creatable ? {
+		value,
+		defaultValue: void 0,
+		onChange: (keys) => {
+			let next = keys;
+			if (keys.includes(CREATE_KEY)) {
+				const text = query.trim();
+				next = keys.filter((key) => key !== CREATE_KEY);
+				if (text !== "" && !next.includes(text)) next.push(text);
+				setQuery("");
+				onCreate(text);
+			}
+			setOwnValue(next);
+			props.onChange?.(next);
+		}
+	} : {};
 	const trigger = /* @__PURE__ */ jsxs(Button, {
 		ref,
 		"data-slot": "multi-select-trigger",
@@ -150,6 +254,11 @@ const MultiSelect = forwardRef(function MultiSelect({ children, label, labelHidd
 	});
 	return /* @__PURE__ */ jsxs(Select, {
 		...props,
+		...creatableProps,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) setQuery("");
+			props.onOpenChange?.(isOpen);
+		},
 		selectionMode: "multiple",
 		"data-slot": "multi-select",
 		className: cn(selectVariants(), className),
@@ -178,8 +287,16 @@ const MultiSelect = forwardRef(function MultiSelect({ children, label, labelHidd
 			}),
 			/* @__PURE__ */ jsx(Popover, {
 				"data-slot": "multi-select-popover",
-				className: selectPopoverVariants(),
-				children: /* @__PURE__ */ jsx(ListBox, {
+				className: withSearch ? cnAll(selectPopoverVariants({ reveal: "fade" }), "flex flex-col overflow-y-hidden") : selectPopoverVariants(),
+				children: withSearch ? /* @__PURE__ */ jsxs(SearchList, {
+					query,
+					onQueryChange: setQuery,
+					creatable,
+					searchLabel,
+					searchPlaceholder,
+					emptyLabel,
+					children: [children, creatable ? /* @__PURE__ */ jsx(CreateItem, { label: createLabel(query.trim()) }) : null]
+				}) : /* @__PURE__ */ jsx(ListBox, {
 					"data-slot": "multi-select-list",
 					className: "outline-none",
 					children

package/dist/multi-select/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":["TooltipTrigger","Tooltip","AriaButton","AriaSelectValue","AriaSelect","AriaLabel","AriaFieldError","AriaPopover","AriaListBox","AriaListBoxSection","AriaHeader"],"sources":["../../src/multi-select/multi-select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, useRef, useState, type ReactNode, type RefObject } from \"react\";\nimport {\n  Button as AriaButton,\n  ButtonContext,\n  FieldError as AriaFieldError,\n  Header as AriaHeader,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxSection as AriaListBoxSection,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectStateContext,\n  SelectValue as AriaSelectValue,\n  type Key,\n  type SelectProps as AriaSelectProps,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { selectPopoverVariants, selectTriggerVariants, selectVariants } from \"../select/select.js\";\nimport { Tooltip, TooltipTrigger } from \"../tooltip/tooltip.js\";\n\n/**\n * MultiSelect: pick several options from a list. A Select in multiple mode\n * (React Aria), so the keyboard, typeahead, focus and screen-reader behaviour\n * are Select's own; the list stays open while picking.\n *\n * The trigger shows the first picks as chips and the rest as \"+N\". A new chip\n * fades up from a blur and grows in on the snappy spring while the chips beside\n * it glide over; the count rolls up or down as it changes. A clear button scales\n * in beside the chevron when anything is picked. Options are `SelectItem`s, whose\n * tick pops in as an option is picked; `MultiSelectGroup` gathers them under a\n * heading.\n */\nexport interface MultiSelectProps extends Omit<\n  AriaSelectProps<object, \"multiple\">,\n  \"className\" | \"style\" | \"children\" | \"items\" | \"selectionMode\"\n> {\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /** What is being chosen, and the control's accessible name. */\n  label: ReactNode;\n  labelHidden?: boolean;\n  /** Shown while nothing is picked. @default \"Select options\" */\n  placeholder?: string;\n  /** Why the selection is wrong. Rendered under the control. */\n  errorMessage?: ReactNode;\n  /** Chips shown in the trigger before the rest become \"+N\". @default 2 */\n  maxVisible?: number;\n  /**\n   * Words after the overflow count, so `\"more\"` reads \"+2 more\". Off by default:\n   * the count alone, \"+2\".\n   */\n  moreLabel?: string;\n  /**\n   * While some picks are folded into \"+N\", hovering or focusing the trigger shows\n   * a tooltip listing them. Off by default.\n   *\n   * @default false\n   */\n  overflowTooltip?: boolean;\n  /** Accessible name of the clear button. @default \"Clear selections\" */\n  clearLabel?: string;\n  /** @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/** The picked options as chips, then \"+N\", reading Select's own state. */\nfunction Chips({\n  placeholder,\n  maxVisible,\n  moreLabel,\n  moreRef,\n}: {\n  placeholder: string;\n  maxVisible: number;\n  moreLabel: string | undefined;\n  moreRef: RefObject<HTMLSpanElement | null>;\n}) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  const labelOf = (key: Key) => state?.collection.getItem(key)?.textValue ?? String(key);\n  const shown = keys.slice(0, maxVisible);\n  const rest = keys.length - shown.length;\n  const row = useRef<HTMLSpanElement>(null);\n  // The chips beside a new or removed one glide to their new place.\n  useFlip(row, keys.join(\"|\"), \"var(--duration-smooth)\", \"var(--ease-smooth)\");\n  // Chips there at first paint never animate; later ones grow in.\n  const [initial] = useState(() => new Set(keys));\n  const [count, setCount] = useState({ rest, dir: 1 });\n  if (count.rest !== rest) setCount({ rest, dir: rest > count.rest ? 1 : -1 });\n  return (\n    <span\n      ref={row}\n      aria-hidden=\"true\"\n      className=\"relative flex min-h-6.5 min-w-0 flex-1 items-center gap-1.5 overflow-hidden\"\n    >\n      {keys.length === 0 ? (\n        <span\n          data-slot=\"multi-select-placeholder\"\n          className=\"truncate text-muted-foreground motion-safe:animate-fade-in\"\n        >\n          {placeholder}\n        </span>\n      ) : null}\n      {shown.map((key) => (\n        <span\n          key={String(key)}\n          data-flip=\"\"\n          data-slot=\"multi-select-chip\"\n          className={cnAll(\n            \"multi-select-chip\",\n            !initial.has(key) && \"motion-safe:animate-chip-reveal\",\n          )}\n        >\n          {labelOf(key)}\n        </span>\n      ))}\n      {rest > 0 ? (\n        <span\n          ref={moreRef}\n          data-flip=\"\"\n          data-slot=\"multi-select-more\"\n          className=\"multi-select-chip text-text-secondary tabular-nums\"\n        >\n          +\n          <SwapText swapKey={String(rest)} dir={count.dir} motion=\"rise\">\n            {rest}\n          </SwapText>\n          {/* The chip is a flex box, which drops a leading space in a bare text\n              node; whitespace-pre keeps \"+2 more\" from reading \"+2more\". */}\n          {moreLabel ? (\n            <span data-slot=\"multi-select-more-label\" className=\"whitespace-pre\">\n              {` ${moreLabel}`}\n            </span>\n          ) : null}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\n/** The labels of the picks folded into \"+N\", in the order they were picked. */\nfunction useHiddenLabels(maxVisible: number) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  return keys\n    .slice(maxVisible)\n    .map((key) => state?.collection.getItem(key)?.textValue ?? String(key));\n}\n\n/**\n * Wraps the trigger in a tooltip naming the picks hidden behind \"+N\", placed\n * against the +N chip rather than the whole field. Always rendered, so turning\n * `overflowTooltip` on or off never swaps the trigger element (and drops its\n * focus); disabled while off or while nothing is hidden, so it never opens empty.\n */\nfunction OverflowTooltip({\n  enabled,\n  maxVisible,\n  anchorRef,\n  children,\n}: {\n  enabled: boolean;\n  maxVisible: number;\n  anchorRef: RefObject<HTMLSpanElement | null>;\n  children: ReactNode;\n}) {\n  const hidden = useHiddenLabels(maxVisible);\n  return (\n    <TooltipTrigger isDisabled={!enabled || hidden.length === 0}>\n      {children}\n      <Tooltip triggerRef={anchorRef} data-slot=\"multi-select-overflow-tooltip\">\n        {hidden.join(\", \")}\n      </Tooltip>\n    </TooltipTrigger>\n  );\n}\n\n/** Clears every pick. It sits outside the trigger, so it is its own tab stop. */\nfunction Clear({ label, disabled }: { label: string; disabled: boolean }) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  if (!state || keys.length === 0 || disabled) return null;\n  // Select hands its trigger props to every Button inside it; clear that, or this\n  // button would become a second trigger named by the label.\n  return (\n    <ButtonContext.Provider value={null}>\n      <AriaButton\n        aria-label={label}\n        data-slot=\"multi-select-clear\"\n        onPress={() => {\n          state.setValue([]);\n          state.close();\n        }}\n        className=\"multi-select-clear motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\"\n      >\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          className=\"size-3.5\"\n        >\n          <path d=\"m4 4 8 8M12 4l-8 8\" />\n        </svg>\n      </AriaButton>\n    </ButtonContext.Provider>\n  );\n}\n\nexport const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(function MultiSelect(\n  {\n    children,\n    label,\n    labelHidden,\n    placeholder = \"Select options\",\n    errorMessage,\n    maxVisible = 2,\n    moreLabel,\n    overflowTooltip = false,\n    clearLabel = \"Clear selections\",\n    size = \"md\",\n    className,\n    ...props\n  },\n  ref,\n) {\n  const moreRef = useRef<HTMLSpanElement>(null);\n  const trigger = (\n    <AriaButton\n      ref={ref}\n      data-slot=\"multi-select-trigger\"\n      className={cnAll(selectTriggerVariants({ size }), \"pe-16 multi-select-trigger\")}\n    >\n      <AriaSelectValue data-slot=\"multi-select-value\" className=\"sr-only\">\n        {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n      </AriaSelectValue>\n      <Chips\n        placeholder={placeholder}\n        maxVisible={maxVisible}\n        moreLabel={moreLabel}\n        moreRef={moreRef}\n      />\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.75\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"absolute end-(--density-control-pad-md) text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n      >\n        <path d=\"m4 6 4 4 4-4\" />\n      </svg>\n    </AriaButton>\n  );\n  return (\n    <AriaSelect<object, \"multiple\">\n      {...props}\n      selectionMode=\"multiple\"\n      data-slot=\"multi-select\"\n      className={cn(selectVariants(), className)}\n    >\n      <AriaLabel\n        data-slot=\"multi-select-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n      <div className=\"relative\">\n        <OverflowTooltip enabled={overflowTooltip} maxVisible={maxVisible} anchorRef={moreRef}>\n          {trigger}\n        </OverflowTooltip>\n        <Clear label={clearLabel} disabled={props.isDisabled ?? false} />\n      </div>\n      {errorMessage == null ? null : (\n        <AriaFieldError\n          data-slot=\"multi-select-error\"\n          className=\"text-sm leading-(--leading-normal) text-destructive-strong\"\n        >\n          {errorMessage}\n        </AriaFieldError>\n      )}\n      <AriaPopover data-slot=\"multi-select-popover\" className={selectPopoverVariants()}>\n        <AriaListBox data-slot=\"multi-select-list\" className=\"outline-none\">\n          {children}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n\nexport const multiSelectGroupVariants = cva([\"flex flex-col not-first:mt-1\"]);\n\nexport const multiSelectGroupHeaderVariants = cva([\n  \"px-2 pt-1.5 pb-1 text-xs leading-(--leading-normal) font-semibold text-muted-foreground\",\n]);\n\n/**\n * A run of options under a heading, such as \"Countries\" and \"Regions\". React\n * Aria's ListBoxSection, so the heading names the group for assistive tech and\n * the arrow keys move straight through from one group to the next.\n *\n * @example\n * <MultiSelect label=\"Markets\">\n *   <MultiSelectGroup title=\"Countries\">\n *     <SelectItem id=\"IN\">India</SelectItem>\n *   </MultiSelectGroup>\n *   <MultiSelectGroup title=\"Regions\">\n *     <SelectItem id=\"europe\">Europe</SelectItem>\n *   </MultiSelectGroup>\n * </MultiSelect>\n */\nexport interface MultiSelectGroupProps {\n  /** The heading drawn above the group, and the group's accessible name. */\n  title: ReactNode;\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /** Identifies the group in the collection. Defaults to a generated id. */\n  id?: Key;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\nexport const MultiSelectGroup = forwardRef<HTMLElement, MultiSelectGroupProps>(\n  function MultiSelectGroup({ title, children, id, className }, ref) {\n    return (\n      <AriaListBoxSection\n        ref={ref}\n        id={id}\n        data-slot=\"multi-select-group\"\n        className={cn(multiSelectGroupVariants(), className)}\n      >\n        <AriaHeader\n          data-slot=\"multi-select-group-header\"\n          className={multiSelectGroupHeaderVariants()}\n        >\n          {title}\n        </AriaHeader>\n        {children}\n      </AriaListBoxSection>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"multi-select.js","names":["AriaAutocomplete","AriaSearchField","AriaInput","AriaListBox","AriaListBoxItem","TooltipTrigger","Tooltip","AriaButton","AriaSelectValue","AriaSelect","AriaLabel","AriaFieldError","AriaPopover","AriaListBoxSection","AriaHeader"],"sources":["../../src/multi-select/multi-select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useContext,\n  useRef,\n  useState,\n  type ContextType,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport {\n  Autocomplete as AriaAutocomplete,\n  Button as AriaButton,\n  ButtonContext,\n  FieldError as AriaFieldError,\n  Header as AriaHeader,\n  Input as AriaInput,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  ListBoxSection as AriaListBoxSection,\n  Popover as AriaPopover,\n  SearchField as AriaSearchField,\n  Select as AriaSelect,\n  SelectStateContext,\n  SelectValue as AriaSelectValue,\n  type Key,\n  type SelectProps as AriaSelectProps,\n  useFilter,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport {\n  selectItemVariants,\n  selectPopoverVariants,\n  selectTriggerVariants,\n  selectVariants,\n} from \"../select/select.js\";\nimport { Tooltip, TooltipTrigger } from \"../tooltip/tooltip.js\";\n\n/**\n * MultiSelect: pick several options from a list. A Select in multiple mode\n * (React Aria), so the keyboard, typeahead, focus and screen-reader behaviour\n * are Select's own; the list stays open while picking.\n *\n * The trigger shows the first picks as chips and the rest as \"+N\". A new chip\n * fades up from a blur and grows in on the snappy spring while the chips beside\n * it glide over; the count rolls up or down as it changes. A clear button scales\n * in beside the chevron when anything is picked. Options are `SelectItem`s, whose\n * tick pops in as an option is picked; `MultiSelectGroup` gathers them under a\n * heading.\n *\n * Opt in to `searchable` for a search field at the top of the list that filters\n * the options as you type (React Aria's Autocomplete, so the arrow keys and Enter\n * work from the field). Pass `onCreate` to also offer a \"Create “…”\" row when the\n * typed text matches no option.\n */\nexport interface MultiSelectProps extends Omit<\n  AriaSelectProps<object, \"multiple\">,\n  \"className\" | \"style\" | \"children\" | \"items\" | \"selectionMode\"\n> {\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /** What is being chosen, and the control's accessible name. */\n  label: ReactNode;\n  labelHidden?: boolean;\n  /** Shown while nothing is picked. @default \"Select options\" */\n  placeholder?: string;\n  /** Why the selection is wrong. Rendered under the control. */\n  errorMessage?: ReactNode;\n  /** Chips shown in the trigger before the rest become \"+N\". @default 2 */\n  maxVisible?: number;\n  /**\n   * Words after the overflow count, so `\"more\"` reads \"+2 more\". Off by default:\n   * the count alone, \"+2\".\n   */\n  moreLabel?: string;\n  /**\n   * While some picks are folded into \"+N\", hovering or focusing the trigger shows\n   * a tooltip listing them. Off by default.\n   *\n   * @default false\n   */\n  overflowTooltip?: boolean;\n  /** Accessible name of the clear button. @default \"Clear selections\" */\n  clearLabel?: string;\n  /** @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n  /**\n   * Puts a search field at the top of the list. Typing filters the options (and\n   * groups) by their text, ignoring case and accents; the arrow keys and Enter\n   * work from the field. Cleared each time the list closes. Off by default.\n   * Turned on by `onCreate` too.\n   *\n   * @default false\n   */\n  searchable?: boolean;\n  /** Accessible name of the search field. @default \"Search options\" */\n  searchLabel?: string;\n  /** Placeholder of the search field. @default \"Search\" */\n  searchPlaceholder?: string;\n  /** Shown in the list while the search matches nothing. @default \"No options found\" */\n  emptyLabel?: string;\n  /**\n   * Makes the list creatable, and searchable. While the typed text (trimmed)\n   * matches no option's text or id nor a picked value, ignoring case, the list ends\n   * with a \"Create “text”\" row. Picking it calls `onCreate` with the text, adds\n   * the text itself as a picked key (through `onChange`, as any pick) and clears\n   * the search. Render a `SelectItem` whose `id` is that text so it lists like\n   * the others; until then its chip shows the text.\n   */\n  onCreate?: (value: string) => void;\n  /** The create row's text for the typed value. @default (value) => `Create “${value}”` */\n  createLabel?: (value: string) => string;\n}\n\n/** The key of the create row. Never reaches `onChange`. */\nconst CREATE_KEY = \"__multi-select-create__\";\n\nconst defaultCreateLabel = (value: string) => `Create \\u201c${value}\\u201d`;\n\ntype SelectState = NonNullable<ContextType<typeof SelectStateContext>>;\n\n/** Whether `text` already names an option (by its text or its key) or a pick, ignoring case. */\nfunction isTaken(state: SelectState | null, text: string) {\n  const want = text.toLocaleLowerCase();\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  if (keys.some((key) => String(key).toLocaleLowerCase() === want)) return true;\n  if (!state) return false;\n  for (const key of state.collection.getKeys()) {\n    const node = state.collection.getItem(key);\n    if (\n      node?.type === \"item\" &&\n      node.key !== CREATE_KEY &&\n      // The key too: creating text equal to an unpicked option's id would pick\n      // that option AND tell the owner to create a duplicate.\n      (node.textValue.toLocaleLowerCase() === want || String(node.key).toLocaleLowerCase() === want)\n    ) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * The list with a search field over it (React Aria's Autocomplete): the field\n * keeps focus and drives the options with the arrow keys, Enter picks.\n */\nfunction SearchList({\n  query,\n  onQueryChange,\n  creatable,\n  searchLabel,\n  searchPlaceholder,\n  emptyLabel,\n  children,\n}: {\n  query: string;\n  onQueryChange: (query: string) => void;\n  creatable: boolean;\n  searchLabel: string;\n  searchPlaceholder: string;\n  emptyLabel: string;\n  children: ReactNode;\n}) {\n  const state = useContext(SelectStateContext);\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const text = query.trim();\n  const offerCreate = creatable && text !== \"\" && !isTaken(state, text);\n  return (\n    <AriaAutocomplete\n      inputValue={query}\n      onInputChange={onQueryChange}\n      filter={(textValue, input, node) =>\n        node.key === CREATE_KEY ? offerCreate : contains(textValue, input)\n      }\n    >\n      <AriaSearchField\n        aria-label={searchLabel}\n        autoFocus\n        data-slot=\"multi-select-search\"\n        className={multiSelectSearchClass}\n      >\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          className=\"size-4 flex-none text-muted-foreground\"\n        >\n          <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n          <path d=\"m10.5 10.5 3 3\" />\n        </svg>\n        <AriaInput\n          placeholder={searchPlaceholder}\n          data-slot=\"multi-select-search-input\"\n          className=\"min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 font-sans text-sm text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden\"\n        />\n      </AriaSearchField>\n      <AriaListBox\n        data-slot=\"multi-select-list\"\n        renderEmptyState={() => (\n          <p\n            data-slot=\"multi-select-empty\"\n            className=\"m-0 px-2 py-1.5 text-sm text-muted-foreground\"\n          >\n            {emptyLabel}\n          </p>\n        )}\n        className=\"min-h-0 flex-1 overflow-y-auto outline-none\"\n      >\n        {children}\n      </AriaListBox>\n    </AriaAutocomplete>\n  );\n}\n\n/** The search row: a quiet field over the list, underlined while focused. */\nconst multiSelectSearchClass =\n  \"relative mb-1 flex h-(--density-control-h-sm) flex-none items-center gap-2 border-b-(length:--border-width) border-border px-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-(--focus-ring-width) after:bg-transparent has-[input:focus]:after:bg-(--color-control-edge)\";\n\n/** The row that creates the typed value. Kept in the collection; the filter shows it. */\nfunction CreateItem({ label }: { label: string }) {\n  return (\n    <AriaListBoxItem\n      id={CREATE_KEY}\n      textValue={label}\n      data-slot=\"multi-select-create\"\n      className={cnAll(selectItemVariants(), \"text-text-secondary data-[focused]:text-foreground\")}\n    >\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.75\"\n        strokeLinecap=\"round\"\n        className=\"size-3.5 flex-none\"\n      >\n        <path d=\"M8 3.5v9M3.5 8h9\" />\n      </svg>\n      {label}\n    </AriaListBoxItem>\n  );\n}\n\n/** The picked options as chips, then \"+N\", reading Select's own state. */\nfunction Chips({\n  placeholder,\n  maxVisible,\n  moreLabel,\n  moreRef,\n}: {\n  placeholder: string;\n  maxVisible: number;\n  moreLabel: string | undefined;\n  moreRef: RefObject<HTMLSpanElement | null>;\n}) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  const labelOf = (key: Key) => state?.collection.getItem(key)?.textValue ?? String(key);\n  const shown = keys.slice(0, maxVisible);\n  const rest = keys.length - shown.length;\n  const row = useRef<HTMLSpanElement>(null);\n  // The chips beside a new or removed one glide to their new place.\n  useFlip(row, keys.join(\"|\"), \"var(--duration-smooth)\", \"var(--ease-smooth)\");\n  // Chips there at first paint never animate; later ones grow in.\n  const [initial] = useState(() => new Set(keys));\n  const [count, setCount] = useState({ rest, dir: 1 });\n  if (count.rest !== rest) setCount({ rest, dir: rest > count.rest ? 1 : -1 });\n  return (\n    <span\n      ref={row}\n      aria-hidden=\"true\"\n      className=\"relative flex min-h-6.5 min-w-0 flex-1 items-center gap-1.5 overflow-hidden\"\n    >\n      {keys.length === 0 ? (\n        <span\n          data-slot=\"multi-select-placeholder\"\n          className=\"truncate text-muted-foreground motion-safe:animate-fade-in\"\n        >\n          {placeholder}\n        </span>\n      ) : null}\n      {shown.map((key) => (\n        <span\n          key={String(key)}\n          data-flip=\"\"\n          data-slot=\"multi-select-chip\"\n          className={cnAll(\n            \"multi-select-chip\",\n            !initial.has(key) && \"motion-safe:animate-chip-reveal\",\n          )}\n        >\n          {labelOf(key)}\n        </span>\n      ))}\n      {rest > 0 ? (\n        <span\n          ref={moreRef}\n          data-flip=\"\"\n          data-slot=\"multi-select-more\"\n          className=\"multi-select-chip text-text-secondary tabular-nums\"\n        >\n          +\n          <SwapText swapKey={String(rest)} dir={count.dir} motion=\"rise\">\n            {rest}\n          </SwapText>\n          {/* The chip is a flex box, which drops a leading space in a bare text\n              node; whitespace-pre keeps \"+2 more\" from reading \"+2more\". */}\n          {moreLabel ? (\n            <span data-slot=\"multi-select-more-label\" className=\"whitespace-pre\">\n              {` ${moreLabel}`}\n            </span>\n          ) : null}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\n/** The labels of the picks folded into \"+N\", in the order they were picked. */\nfunction useHiddenLabels(maxVisible: number) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  return keys\n    .slice(maxVisible)\n    .map((key) => state?.collection.getItem(key)?.textValue ?? String(key));\n}\n\n/**\n * Wraps the trigger in a tooltip naming the picks hidden behind \"+N\", placed\n * against the +N chip rather than the whole field. Always rendered, so turning\n * `overflowTooltip` on or off never swaps the trigger element (and drops its\n * focus); disabled while off or while nothing is hidden, so it never opens empty.\n */\nfunction OverflowTooltip({\n  enabled,\n  maxVisible,\n  anchorRef,\n  children,\n}: {\n  enabled: boolean;\n  maxVisible: number;\n  anchorRef: RefObject<HTMLSpanElement | null>;\n  children: ReactNode;\n}) {\n  const hidden = useHiddenLabels(maxVisible);\n  return (\n    <TooltipTrigger isDisabled={!enabled || hidden.length === 0}>\n      {children}\n      <Tooltip triggerRef={anchorRef} data-slot=\"multi-select-overflow-tooltip\">\n        {hidden.join(\", \")}\n      </Tooltip>\n    </TooltipTrigger>\n  );\n}\n\n/** Clears every pick. It sits outside the trigger, so it is its own tab stop. */\nfunction Clear({ label, disabled }: { label: string; disabled: boolean }) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  if (!state || keys.length === 0 || disabled) return null;\n  // Select hands its trigger props to every Button inside it; clear that, or this\n  // button would become a second trigger named by the label.\n  return (\n    <ButtonContext.Provider value={null}>\n      <AriaButton\n        aria-label={label}\n        data-slot=\"multi-select-clear\"\n        onPress={() => {\n          state.setValue([]);\n          state.close();\n        }}\n        className=\"multi-select-clear motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\"\n      >\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          className=\"size-3.5\"\n        >\n          <path d=\"m4 4 8 8M12 4l-8 8\" />\n        </svg>\n      </AriaButton>\n    </ButtonContext.Provider>\n  );\n}\n\nexport const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(function MultiSelect(\n  {\n    children,\n    label,\n    labelHidden,\n    placeholder = \"Select options\",\n    errorMessage,\n    maxVisible = 2,\n    moreLabel,\n    overflowTooltip = false,\n    clearLabel = \"Clear selections\",\n    size = \"md\",\n    className,\n    searchable = false,\n    searchLabel = \"Search options\",\n    searchPlaceholder = \"Search\",\n    emptyLabel = \"No options found\",\n    onCreate,\n    createLabel = defaultCreateLabel,\n    ...props\n  },\n  ref,\n) {\n  const moreRef = useRef<HTMLSpanElement>(null);\n  const creatable = onCreate != null;\n  const withSearch = searchable || creatable;\n  const [query, setQuery] = useState(\"\");\n  // Creating adds a key no option has yet, so the value is held here: the create\n  // row's own key is swapped for the typed text before anyone sees it.\n  const [ownValue, setOwnValue] = useState<readonly Key[]>(() => props.defaultValue ?? []);\n  const value = props.value ?? ownValue;\n  const creatableProps: Partial<AriaSelectProps<object, \"multiple\">> = creatable\n    ? {\n        value,\n        defaultValue: undefined,\n        onChange: (keys) => {\n          let next = keys;\n          if (keys.includes(CREATE_KEY)) {\n            const text = query.trim();\n            next = keys.filter((key) => key !== CREATE_KEY);\n            if (text !== \"\" && !next.includes(text)) next.push(text);\n            setQuery(\"\");\n            onCreate(text);\n          }\n          setOwnValue(next);\n          props.onChange?.(next);\n        },\n      }\n    : {};\n  const trigger = (\n    <AriaButton\n      ref={ref}\n      data-slot=\"multi-select-trigger\"\n      className={cnAll(selectTriggerVariants({ size }), \"pe-16 multi-select-trigger\")}\n    >\n      <AriaSelectValue data-slot=\"multi-select-value\" className=\"sr-only\">\n        {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n      </AriaSelectValue>\n      <Chips\n        placeholder={placeholder}\n        maxVisible={maxVisible}\n        moreLabel={moreLabel}\n        moreRef={moreRef}\n      />\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.75\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"absolute end-(--density-control-pad-md) text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n      >\n        <path d=\"m4 6 4 4 4-4\" />\n      </svg>\n    </AriaButton>\n  );\n  return (\n    <AriaSelect<object, \"multiple\">\n      {...props}\n      {...creatableProps}\n      onOpenChange={(isOpen) => {\n        // Each opening starts from the whole list.\n        if (!isOpen) setQuery(\"\");\n        props.onOpenChange?.(isOpen);\n      }}\n      selectionMode=\"multiple\"\n      data-slot=\"multi-select\"\n      className={cn(selectVariants(), className)}\n    >\n      <AriaLabel\n        data-slot=\"multi-select-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n      <div className=\"relative\">\n        <OverflowTooltip enabled={overflowTooltip} maxVisible={maxVisible} anchorRef={moreRef}>\n          {trigger}\n        </OverflowTooltip>\n        <Clear label={clearLabel} disabled={props.isDisabled ?? false} />\n      </div>\n      {errorMessage == null ? null : (\n        <AriaFieldError\n          data-slot=\"multi-select-error\"\n          className=\"text-sm leading-(--leading-normal) text-destructive-strong\"\n        >\n          {errorMessage}\n        </AriaFieldError>\n      )}\n      <AriaPopover\n        data-slot=\"multi-select-popover\"\n        className={\n          withSearch\n            ? cnAll(selectPopoverVariants({ reveal: \"fade\" }), \"flex flex-col overflow-y-hidden\")\n            : selectPopoverVariants()\n        }\n      >\n        {withSearch ? (\n          <SearchList\n            query={query}\n            onQueryChange={setQuery}\n            creatable={creatable}\n            searchLabel={searchLabel}\n            searchPlaceholder={searchPlaceholder}\n            emptyLabel={emptyLabel}\n          >\n            {children}\n            {creatable ? <CreateItem label={createLabel(query.trim())} /> : null}\n          </SearchList>\n        ) : (\n          <AriaListBox data-slot=\"multi-select-list\" className=\"outline-none\">\n            {children}\n          </AriaListBox>\n        )}\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n\nexport const multiSelectGroupVariants = cva([\"flex flex-col not-first:mt-1\"]);\n\nexport const multiSelectGroupHeaderVariants = cva([\n  \"px-2 pt-1.5 pb-1 text-xs leading-(--leading-normal) font-semibold text-muted-foreground\",\n]);\n\n/**\n * A run of options under a heading, such as \"Countries\" and \"Regions\". React\n * Aria's ListBoxSection, so the heading names the group for assistive tech and\n * the arrow keys move straight through from one group to the next.\n *\n * @example\n * <MultiSelect label=\"Markets\">\n *   <MultiSelectGroup title=\"Countries\">\n *     <SelectItem id=\"IN\">India</SelectItem>\n *   </MultiSelectGroup>\n *   <MultiSelectGroup title=\"Regions\">\n *     <SelectItem id=\"europe\">Europe</SelectItem>\n *   </MultiSelectGroup>\n * </MultiSelect>\n */\nexport interface MultiSelectGroupProps {\n  /** The heading drawn above the group, and the group's accessible name. */\n  title: ReactNode;\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /** Identifies the group in the collection. Defaults to a generated id. */\n  id?: Key;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\nexport const MultiSelectGroup = forwardRef<HTMLElement, MultiSelectGroupProps>(\n  function MultiSelectGroup({ title, children, id, className }, ref) {\n    return (\n      <AriaListBoxSection\n        ref={ref}\n        id={id}\n        data-slot=\"multi-select-group\"\n        className={cn(multiSelectGroupVariants(), className)}\n      >\n        <AriaHeader\n          data-slot=\"multi-select-group-header\"\n          className={multiSelectGroupHeaderVariants()}\n        >\n          {title}\n        </AriaHeader>\n        {children}\n      </AriaListBoxSection>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/number-field/number-field.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
-import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { Label as Label$1 } from "../label/label.js";
 import { FieldMessage, RollingNumber } from "../lib/field-message.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useContext, useId, useRef, useState } from "react";
 import { Button, Group, Input, NumberField, NumberFieldStateContext } from "react-aria-components";

package/dist/password-field/password-field.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { FieldMessage } from "../lib/field-message.js";
 import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { EyeMorph } from "../lib/eye-morph.js";
 import { forwardRef, useId, useState } from "react";
 import { Button, Group, Input, InputContext, useSlottedContext } from "react-aria-components";

package/dist/password-strength/password-strength.js

@@ -2,10 +2,10 @@
 import { cn } from "../lib/cn.js";
 import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "../lib/motion.js";
 import { SwapText } from "../lib/swap-text.js";
-import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { Label as Label$1 } from "../label/label.js";
 import { FieldMessage } from "../lib/field-message.js";
 import { useFieldWiring } from "../lib/field-shell.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { EyeMorph } from "../lib/eye-morph.js";
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { Button, Group, Input } from "react-aria-components";

package/dist/phone-input/phone-input.js

@@ -2,8 +2,8 @@
 import { cn, cnAll } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../lib/motion.js";
 import { SwapText } from "../lib/swap-text.js";
-import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { SelectItem, selectPopoverVariants } from "../select/select.js";
 import { useFlagEmoji } from "../lib/flag-emoji.js";
 import { ScrollArea } from "../scroll-area/scroll-area.js";

package/dist/popover/popover.js

@@ -44,7 +44,7 @@ const Popover$1 = forwardRef(function Popover$2({ children, className, placement
 		children: [
 			title == null ? null : /* @__PURE__ */ jsx("h3", {
 				"data-slot": "popover-title",
-				className: "m-0 text-sm leading-(--leading-tight) font-semibold text-foreground",
+				className: "m-0 font-display text-sm leading-(--leading-tight) font-semibold text-foreground",
 				children: title
 			}),
 			description == null ? null : /* @__PURE__ */ jsx("p", {

package/dist/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["Popover","AriaPopover","Button"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, type JSX, type ReactNode } from \"react\";\nimport {\n  OverlayTriggerStateContext,\n  Popover as AriaPopover,\n  PreviewTrigger,\n  type PopoverProps as AriaPopoverProps,\n  type PreviewTriggerProps,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n  // w-72 (288px) is the legacy default width, as a spacing-scale step.\n  \"w-72 rounded-panel border-(length:--border-width) border-border p-4\",\n  \"bg-card text-card-foreground shadow-floating\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n  // none: an unstyled document renders text in a serif, and content-box\n  // would add the 16px padding on top of the width.\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n  // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n  // can take a focus ring it does not want.\n  \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n *   <Button>Pick a date</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens, as React Aria's single `placement` string. The legacy\n   * split this across `side` and `align`; its one non-default call site is\n   * `align=\"start\"`, which is `\"bottom start\"` here.\n   *\n   * @default \"bottom\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /**\n   * How it comes in: `rise` grows out of the trigger (offset toward it, a little\n   * small, then settles on a spring) and leaves quicker; `none` leaves the entrance\n   * to the caller, as a picker that animates its own popover does.\n   *\n   * @default \"rise\"\n   */\n  entrance?: \"rise\" | \"none\";\n  /**\n   * A heading at the top of the panel. Together with `description` and\n   * `actionLabel` it makes the message popover: a dark title, grey body text\n   * and a full-width button, with `children` rendered below them.\n   */\n  title?: ReactNode;\n  /** Grey body text under the title. */\n  description?: ReactNode;\n  /** The label of the full-width button at the bottom. Pressing it runs `onAction` and closes the popover. */\n  actionLabel?: ReactNode;\n  /** Runs when the action button is pressed, before the popover closes. */\n  onAction?: () => void;\n}\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(function Popover(\n  {\n    children,\n    className,\n    placement = \"bottom\",\n    offset = 4,\n    entrance = \"rise\",\n    title,\n    description,\n    actionLabel,\n    onAction,\n    ...props\n  },\n  ref,\n) {\n  // The open state the enclosing PopoverTrigger owns, so the action button can close it.\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <AriaPopover\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={offset}\n      data-slot=\"popover\"\n      className={cnAll(popoverVariants(), entrance === \"rise\" && \"popover-motion\", className)}\n    >\n      {/*\n        No inner Dialog. Wrapping the content in one is the common React\n        Aria idiom and it was in the first draft here -- but deleting it\n        broke no assertion, so it was doing nothing: a Popover under a\n        DialogTrigger already gets role=\"dialog\", a focus scope, and\n        aria-labelledby pointing at the trigger. The wrapper was one more\n        element and one more className to explain.\n      */}\n      {title == null ? null : (\n        <h3\n          data-slot=\"popover-title\"\n          className=\"m-0 text-sm leading-(--leading-tight) font-semibold text-foreground\"\n        >\n          {title}\n        </h3>\n      )}\n      {description == null ? null : (\n        <p\n          data-slot=\"popover-description\"\n          className=\"m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary\"\n        >\n          {description}\n        </p>\n      )}\n      {actionLabel == null ? null : (\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          className=\"mt-4 w-full\"\n          onPress={() => {\n            onAction?.();\n            state?.close();\n          }}\n        >\n          {actionLabel}\n        </Button>\n      )}\n      {children}\n    </AriaPopover>\n  );\n});\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n\nexport interface PopoverHoverTriggerProps extends Omit<PreviewTriggerProps, \"delay\" | \"closeDelay\"> {\n  /** The trigger, then the `Popover`. The trigger must be focusable (a `Button` or `Link`). */\n  children: ReactNode;\n  /**\n   * Milliseconds the pointer rests on the trigger, or keyboard focus sits on\n   * it, before the card opens.\n   * @default 600\n   */\n  delay?: number;\n  /**\n   * Milliseconds after the pointer leaves the trigger and the card, or focus\n   * leaves both, before it closes. Moving onto the card keeps it open.\n   * @default 200\n   */\n  closeDelay?: number;\n}\n\n/**\n * Opens a popover on hover instead of press: a hover card.\n *\n * React Aria's `PreviewTrigger`. The card opens after `delay` when the pointer\n * rests on the trigger or keyboard focus reaches it, and on a long press on\n * touch. It stays open while the pointer travels onto it (a safe area covers\n * the gap) and closes `closeDelay` after the pointer or focus leaves both.\n * Escape closes it; Tab from the trigger moves into it. It is non-modal: no\n * focus trap and no underlay, and the page behind stays usable.\n *\n * The trigger keeps its own press action, so a Link still navigates and a\n * Button still runs `onPress`. Content anyone needs must not live only in the\n * card: touch without a long press never sees it.\n *\n * @example\n * <PopoverHoverTrigger delay={300}>\n *   <Button variant=\"ghost\" aria-label=\"3 more sources\">+3</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverHoverTrigger>\n */\nexport function PopoverHoverTrigger({\n  delay = 600,\n  closeDelay = 200,\n  ...props\n}: PopoverHoverTriggerProps): JSX.Element {\n  return <PreviewTrigger {...props} delay={delay} closeDelay={closeDelay} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AA8CD,MAAaA,YAAU,WAAsC,SAASA,UACpE,EACE,UACA,WACA,YAAY,UACZ,SAAS,GACT,WAAW,QACX,OACA,aACA,aACA,UACA,GAAG,SAEL,KACA;CAEA,MAAM,QAAQ,WAAW,0BAA0B;CACnD,OACE,qBAACC,SAAD;EACO;EACL,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,MAAM,gBAAgB,GAAG,aAAa,UAAU,kBAAkB,SAAS;EANxF,UAAA;GAgBG,SAAS,OAAO,OACf,oBAAC,MAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACC,CAAA;GAEL,eAAe,OAAO,OACrB,oBAAC,KAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACA,CAAA;GAEJ,eAAe,OAAO,OACrB,oBAACC,UAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,eAAe;KACb,WAAW;KACX,OAAO,MAAM;IACf;IAEC,UAAA;GACK,CAAA;GAET;EACU;;AAEjB,CAAC;;;;;;;;;;;;;;;;;;;;;AAgDD,SAAgB,oBAAoB,EAClC,QAAQ,KACR,aAAa,KACb,GAAG,SACqC;CACxC,OAAO,oBAAC,gBAAD;EAAgB,GAAI;EAAc;EAAmB;CAAa,CAAA;AAC3E"}
+{"version":3,"file":"popover.js","names":["Popover","AriaPopover","Button"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, type JSX, type ReactNode } from \"react\";\nimport {\n  OverlayTriggerStateContext,\n  Popover as AriaPopover,\n  PreviewTrigger,\n  type PopoverProps as AriaPopoverProps,\n  type PreviewTriggerProps,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n  // w-72 (288px) is the legacy default width, as a spacing-scale step.\n  \"w-72 rounded-panel border-(length:--border-width) border-border p-4\",\n  \"bg-card text-card-foreground shadow-floating\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n  // none: an unstyled document renders text in a serif, and content-box\n  // would add the 16px padding on top of the width.\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n  // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n  // can take a focus ring it does not want.\n  \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n *   <Button>Pick a date</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens, as React Aria's single `placement` string. The legacy\n   * split this across `side` and `align`; its one non-default call site is\n   * `align=\"start\"`, which is `\"bottom start\"` here.\n   *\n   * @default \"bottom\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /**\n   * How it comes in: `rise` grows out of the trigger (offset toward it, a little\n   * small, then settles on a spring) and leaves quicker; `none` leaves the entrance\n   * to the caller, as a picker that animates its own popover does.\n   *\n   * @default \"rise\"\n   */\n  entrance?: \"rise\" | \"none\";\n  /**\n   * A heading at the top of the panel. Together with `description` and\n   * `actionLabel` it makes the message popover: a dark title, grey body text\n   * and a full-width button, with `children` rendered below them.\n   */\n  title?: ReactNode;\n  /** Grey body text under the title. */\n  description?: ReactNode;\n  /** The label of the full-width button at the bottom. Pressing it runs `onAction` and closes the popover. */\n  actionLabel?: ReactNode;\n  /** Runs when the action button is pressed, before the popover closes. */\n  onAction?: () => void;\n}\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(function Popover(\n  {\n    children,\n    className,\n    placement = \"bottom\",\n    offset = 4,\n    entrance = \"rise\",\n    title,\n    description,\n    actionLabel,\n    onAction,\n    ...props\n  },\n  ref,\n) {\n  // The open state the enclosing PopoverTrigger owns, so the action button can close it.\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <AriaPopover\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={offset}\n      data-slot=\"popover\"\n      className={cnAll(popoverVariants(), entrance === \"rise\" && \"popover-motion\", className)}\n    >\n      {/*\n        No inner Dialog. Wrapping the content in one is the common React\n        Aria idiom and it was in the first draft here -- but deleting it\n        broke no assertion, so it was doing nothing: a Popover under a\n        DialogTrigger already gets role=\"dialog\", a focus scope, and\n        aria-labelledby pointing at the trigger. The wrapper was one more\n        element and one more className to explain.\n      */}\n      {title == null ? null : (\n        <h3\n          data-slot=\"popover-title\"\n          className=\"m-0 font-display text-sm leading-(--leading-tight) font-semibold text-foreground\"\n        >\n          {title}\n        </h3>\n      )}\n      {description == null ? null : (\n        <p\n          data-slot=\"popover-description\"\n          className=\"m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary\"\n        >\n          {description}\n        </p>\n      )}\n      {actionLabel == null ? null : (\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          className=\"mt-4 w-full\"\n          onPress={() => {\n            onAction?.();\n            state?.close();\n          }}\n        >\n          {actionLabel}\n        </Button>\n      )}\n      {children}\n    </AriaPopover>\n  );\n});\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n\nexport interface PopoverHoverTriggerProps extends Omit<PreviewTriggerProps, \"delay\" | \"closeDelay\"> {\n  /** The trigger, then the `Popover`. The trigger must be focusable (a `Button` or `Link`). */\n  children: ReactNode;\n  /**\n   * Milliseconds the pointer rests on the trigger, or keyboard focus sits on\n   * it, before the card opens.\n   * @default 600\n   */\n  delay?: number;\n  /**\n   * Milliseconds after the pointer leaves the trigger and the card, or focus\n   * leaves both, before it closes. Moving onto the card keeps it open.\n   * @default 200\n   */\n  closeDelay?: number;\n}\n\n/**\n * Opens a popover on hover instead of press: a hover card.\n *\n * React Aria's `PreviewTrigger`. The card opens after `delay` when the pointer\n * rests on the trigger or keyboard focus reaches it, and on a long press on\n * touch. It stays open while the pointer travels onto it (a safe area covers\n * the gap) and closes `closeDelay` after the pointer or focus leaves both.\n * Escape closes it; Tab from the trigger moves into it. It is non-modal: no\n * focus trap and no underlay, and the page behind stays usable.\n *\n * The trigger keeps its own press action, so a Link still navigates and a\n * Button still runs `onPress`. Content anyone needs must not live only in the\n * card: touch without a long press never sees it.\n *\n * @example\n * <PopoverHoverTrigger delay={300}>\n *   <Button variant=\"ghost\" aria-label=\"3 more sources\">+3</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverHoverTrigger>\n */\nexport function PopoverHoverTrigger({\n  delay = 600,\n  closeDelay = 200,\n  ...props\n}: PopoverHoverTriggerProps): JSX.Element {\n  return <PreviewTrigger {...props} delay={delay} closeDelay={closeDelay} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AA8CD,MAAaA,YAAU,WAAsC,SAASA,UACpE,EACE,UACA,WACA,YAAY,UACZ,SAAS,GACT,WAAW,QACX,OACA,aACA,aACA,UACA,GAAG,SAEL,KACA;CAEA,MAAM,QAAQ,WAAW,0BAA0B;CACnD,OACE,qBAACC,SAAD;EACO;EACL,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,MAAM,gBAAgB,GAAG,aAAa,UAAU,kBAAkB,SAAS;EANxF,UAAA;GAgBG,SAAS,OAAO,OACf,oBAAC,MAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACC,CAAA;GAEL,eAAe,OAAO,OACrB,oBAAC,KAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACA,CAAA;GAEJ,eAAe,OAAO,OACrB,oBAACC,UAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,eAAe;KACb,WAAW;KACX,OAAO,MAAM;IACf;IAEC,UAAA;GACK,CAAA;GAET;EACU;;AAEjB,CAAC;;;;;;;;;;;;;;;;;;;;;AAgDD,SAAgB,oBAAoB,EAClC,QAAQ,KACR,aAAa,KACb,GAAG,SACqC;CACxC,OAAO,oBAAC,gBAAD;EAAgB,GAAI;EAAc;EAAmB;CAAa,CAAA;AAC3E"}

package/dist/progress/index.d.ts

@@ -1,2 +1,2 @@
-import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress.js";
-export { Progress, type ProgressProps, progressFillVariants, progressTrackVariants, progressVariants };
+import { Progress, ProgressProps, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants } from "./progress.js";
+export { Progress, type ProgressProps, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };

package/dist/progress/index.js

@@ -1,2 +1,2 @@
-import { Progress, progressFillVariants, progressTrackVariants, progressVariants } from "./progress.js";
-export { Progress, progressFillVariants, progressTrackVariants, progressVariants };
+import { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants } from "./progress.js";
+export { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };

package/dist/progress/progress.d.ts

@@ -31,13 +31,35 @@ import { ProgressBarProps } from "react-aria-components";
  * the track against the page at 5.25:1.
  *
  * Both are in the build-failing contrast contract.
+ *
+ * A TARGET MARKER is opt-in (`target`): a short upright tick that stands
+ * proud of the track at the value the bar should have reached -- "where the
+ * goal should be by now". The tick is decorative; its meaning is read to
+ * assistive technology as the bar's description (`targetLabel` plus the
+ * formatted value), and `showTargetLabel` also prints it under the tick.
+ *
+ * `surface="inverse"` is for a bar on the inverted (foreground-coloured)
+ * surface, such as a dark summary strip: the track is the inverse text colour
+ * mixed into the surface, the default fill and the copy take the inverse text
+ * colour, so the bar keeps its contrast where the default greys would vanish.
  */
 export declare const progressVariants: (props?: ({
   headerEmpty?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const progressTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const progressTrackVariants: (props?: ({
+  surface?: "default" | "inverse" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The target tick: 2px wide, standing 4px proud of the track on both sides,
+ * with a 1px halo of the surface colour so it reads over the fill as well as
+ * over the track. Placed by an inline `inset-inline-start`, so it mirrors in
+ * right-to-left text.
+ */
+export declare const progressTargetVariants: (props?: ({
+  surface?: "default" | "inverse" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const progressFillVariants: (props?: ({
-  tone?: "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
+  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A determinate or indeterminate progress bar.
@@ -84,6 +106,35 @@ export interface ProgressProps extends Omit<ProgressBarProps, "className" | "sty
    * @default true
    */
   showCompletion?: boolean;
+  /**
+   * Where the bar should be by now, on the same scale as `value`
+   * (`minValue`..`maxValue`, clamped). Draws an upright tick across the track
+   * at that point. The tick is decorative; `targetLabel` and the formatted
+   * target are read as the bar's description. Leave it out (the default) for
+   * no marker and the bar exactly as before. Ignored while indeterminate.
+   */
+  target?: number;
+  /**
+   * What the target means, such as "Expected by now". Read with the formatted
+   * target ("Expected by now: 40%") as the bar's description, and printed
+   * under the tick with `showTargetLabel`.
+   * @default "Target"
+   */
+  targetLabel?: string;
+  /**
+   * Print `targetLabel` and the target under the tick. It follows the tick and
+   * stays inside the bar near either end.
+   * @default false
+   */
+  showTargetLabel?: boolean;
+  /**
+   * The surface the bar sits on. `inverse` is the inverted, foreground-coloured
+   * surface (a dark strip in the light theme, a light one in the dark theme):
+   * the track, the default-toned fill, the target tick and the copy take
+   * colours that hold their contrast there. Explicit tones keep their colours.
+   * @default "default"
+   */
+  surface?: "default" | "inverse";
   /** Extra classes for the track. */
   trackClassName?: string;
   /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */