@vitavision/ui 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitavision/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "The vitavision instrument design system: Tailwind v4 tokens, theme, and React primitives.",
   "license": "MIT OR Apache-2.0",
   "repository": {

package/src/components/Tabs.tsx

@@ -86,10 +86,7 @@ export function Tabs<Id extends string>({
       aria-label={label}
       aria-orientation="horizontal"
       onKeyDown={onKeyDown}
-      className={cn(
-        "inline-flex max-w-full flex-wrap items-center gap-0.5 rounded-control border border-line bg-raised p-0.5",
-        className,
-      )}
+      className={cn("inline-flex max-w-full flex-wrap items-center gap-0.5 rounded-control border border-line bg-raised p-0.5", className)}
     >
       {items.map((item) => {
         const selected = item.id === active;
@@ -100,9 +97,7 @@ export function Tabs<Id extends string>({
             role="tab"
             id={idPrefix === undefined ? undefined : `${idPrefix}-tab-${item.id}`}
             aria-selected={selected}
-            aria-controls={
-              idPrefix !== undefined && selected ? `${idPrefix}-panel-${item.id}` : undefined
-            }
+            aria-controls={idPrefix !== undefined && selected ? `${idPrefix}-panel-${item.id}` : undefined}
             tabIndex={item.id === focusable ? 0 : -1}
             data-tab-id={item.id}
             data-state={selected ? "active" : "inactive"}
@@ -112,9 +107,7 @@ export function Tabs<Id extends string>({
             className={cn(
               "inline-flex items-center gap-1.5 rounded-[0.3rem] px-2.5 py-1 text-xs font-medium transition-colors",
               "disabled:cursor-not-allowed disabled:opacity-40",
-              selected
-                ? "bg-surface text-fg shadow-sm"
-                : "text-fg-muted hover:text-fg",
+              selected ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg",
               focusRing,
             )}
           >

package/src/components/ThemeToggle.tsx

@@ -81,11 +81,7 @@ export function ThemeToggle({
         onClick={advance}
         aria-label={LABEL[choice]}
         data-theme-choice={choice}
-        className={cn(
-          "rounded-control p-1.5 text-fg-muted transition-colors hover:bg-raised hover:text-fg",
-          focusRing,
-          className,
-        )}
+        className={cn("rounded-control p-1.5 text-fg-muted transition-colors hover:bg-raised hover:text-fg", focusRing, className)}
       >
         <Icon className="size-4" />
       </button>

package/src/components/ui/Badge.tsx

@@ -89,10 +89,7 @@ export function StatusDot({
   children?: ReactNode;
 }) {
   return (
-    <span
-      data-tone={tone}
-      className={cn("inline-flex items-center gap-1.5 text-xs text-fg-muted", className)}
-    >
+    <span data-tone={tone} className={cn("inline-flex items-center gap-1.5 text-xs text-fg-muted", className)}>
       <span className={cn("size-1.5 shrink-0 rounded-full", DOT_CLASSES[tone])} aria-hidden />
       {children}
     </span>

package/src/components/ui/Button.tsx

@@ -111,11 +111,7 @@ export function Button({
 
   if (asChild) {
     return (
-      <Slot
-        {...rest}
-        data-variant={variant}
-        className={buttonClasses({ variant, size: resolved, className })}
-      >
+      <Slot {...rest} data-variant={variant} className={buttonClasses({ variant, size: resolved, className })}>
         {icon && <ButtonIcon icon={icon} />}
         <Slottable>{children}</Slottable>
       </Slot>
@@ -132,11 +128,7 @@ export function Button({
       {...rest}
       className={buttonClasses({ variant, size: resolved, className })}
     >
-      {loading ? (
-        <Loader2 className="size-3.5 shrink-0 animate-spin" aria-hidden />
-      ) : (
-        icon && <ButtonIcon icon={icon} />
-      )}
+      {loading ? <Loader2 className="size-3.5 shrink-0 animate-spin" aria-hidden /> : icon && <ButtonIcon icon={icon} />}
       {children}
     </button>
   );
@@ -179,11 +171,7 @@ export function ButtonLink({
   const Comp = asChild ? Slot : "a";
 
   return (
-    <Comp
-      {...rest}
-      data-variant={variant}
-      className={buttonClasses({ variant, size: resolved, className })}
-    >
+    <Comp {...rest} data-variant={variant} className={buttonClasses({ variant, size: resolved, className })}>
       {icon && <ButtonIcon icon={icon} />}
       <Slottable>{children}</Slottable>
     </Comp>

package/src/components/ui/Dialog.tsx

@@ -20,10 +20,7 @@ import { cn, focusRingInset } from "./cn";
  * resizes. A scrolling body has to be reachable by keyboard (so it can be scrolled without
  * a pointer); a body that fits must not add a tab stop.
  */
-function useOverflowing(): [
-  (node: HTMLDivElement | null) => (() => void) | undefined,
-  boolean,
-] {
+function useOverflowing(): [(node: HTMLDivElement | null) => (() => void) | undefined, boolean] {
   const [overflowing, setOverflowing] = useState(false);
   const ref = useCallback((node: HTMLDivElement | null) => {
     if (node === null) return undefined;
@@ -89,17 +86,10 @@ export function Dialog({
             className,
           )}
         >
-          <RadixDialog.Title className="text-sm font-semibold tracking-tight text-fg">
-            {title}
-          </RadixDialog.Title>
+          <RadixDialog.Title className="text-sm font-semibold tracking-tight text-fg">{title}</RadixDialog.Title>
           {/* Radix warns when a dialog has no description; render an empty one rather than
               inventing prose for a form whose fields already carry their own labels. */}
-          <RadixDialog.Description
-            className={cn(
-              "mt-2 text-sm leading-relaxed text-fg-muted",
-              description === undefined && "sr-only",
-            )}
-          >
+          <RadixDialog.Description className={cn("mt-2 text-sm leading-relaxed text-fg-muted", description === undefined && "sr-only")}>
             {description ?? title}
           </RadixDialog.Description>
           <div
@@ -166,12 +156,7 @@ export function ConfirmDialog({
           <RadixDialog.Close asChild>
             <Button variant="ghost">Cancel</Button>
           </RadixDialog.Close>
-          <Button
-            variant={destructive ? "danger" : "primary"}
-            loading={loading}
-            disabled={disabled}
-            onClick={onConfirm}
-          >
+          <Button variant={destructive ? "danger" : "primary"} loading={loading} disabled={disabled} onClick={onConfirm}>
             {confirmLabel}
           </Button>
         </>

package/src/components/ui/Disclosure.tsx

@@ -47,14 +47,9 @@ export function Disclosure({
           "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-signal",
         )}
       >
-        <ChevronRight
-          className="size-3.5 shrink-0 transition-transform group-open:rotate-90"
-          aria-hidden
-        />
+        <ChevronRight className="size-3.5 shrink-0 transition-transform group-open:rotate-90" aria-hidden />
         {summary}
-        {count !== undefined && (
-          <span className="font-mono text-fg-subtle tabular-nums">{count}</span>
-        )}
+        {count !== undefined && <span className="font-mono text-fg-subtle tabular-nums">{count}</span>}
       </summary>
       <div className="pt-3">{children}</div>
     </details>

package/src/components/ui/DropdownMenu.tsx

@@ -36,15 +36,7 @@ export interface DropdownMenuProps {
  * page behind stays readable and operable. Toggling a `MenuCheckboxItem` keeps the menu open,
  * so several layers can be switched in one visit.
  */
-export function DropdownMenu({
-  trigger,
-  children,
-  open,
-  onOpenChange,
-  align = "start",
-  side = "bottom",
-  className,
-}: DropdownMenuProps) {
+export function DropdownMenu({ trigger, children, open, onOpenChange, align = "start", side = "bottom", className }: DropdownMenuProps) {
   return (
     <RadixMenu.Root
       // Non-modal: a modal menu hides the rest of the page from assistive technology while
@@ -134,13 +126,7 @@ export interface MenuCheckboxItemProps {
  * A toggle (`role="menuitemcheckbox"`): a layer on or off. A check marks it on. Choosing it
  * leaves the menu open.
  */
-export function MenuCheckboxItem({
-  children,
-  checked,
-  onCheckedChange,
-  shortcut,
-  disabled,
-}: MenuCheckboxItemProps) {
+export function MenuCheckboxItem({ children, checked, onCheckedChange, shortcut, disabled }: MenuCheckboxItemProps) {
   return (
     <RadixMenu.CheckboxItem
       checked={checked}

package/src/components/ui/Feedback.tsx

@@ -58,11 +58,7 @@ export function Callout({
     <div
       role={tone === "error" ? "alert" : "status"}
       data-tone={tone}
-      className={cn(
-        "flex items-start gap-2.5 rounded-control border px-3 py-2.5 text-sm leading-snug",
-        classes,
-        className,
-      )}
+      className={cn("flex items-start gap-2.5 rounded-control border px-3 py-2.5 text-sm leading-snug", classes, className)}
     >
       <Icon className={cn("mt-0.5 size-4 shrink-0", ICON_TONE[tone])} aria-hidden />
       <div className="flex min-w-0 flex-1 flex-col gap-1">
@@ -147,6 +143,9 @@ export function SkeletonRows({
  * A `role="progressbar"` with `aria-valuenow` in percent. Its accessible name is
  * `aria-label` if given, else `label`, else "Progress" — pass one that names the job when
  * a screen shows more than one bar.
+ *
+ * @deprecated Use `Progress`: a value out of a `max` with a "412 of 2,556" value text, an
+ * indeterminate state, and a track that follows the density.
  */
 export function ProgressBar({
   fraction,
@@ -175,10 +174,7 @@ export function ProgressBar({
         data-complete={percent === 100 ? "" : undefined}
         className="h-1.5 overflow-hidden rounded-full bg-line"
       >
-        <div
-          className="h-full rounded-full bg-signal transition-[width] duration-300"
-          style={{ width: `${percent}%` }}
-        />
+        <div className="h-full rounded-full bg-signal transition-[width] duration-300" style={{ width: `${percent}%` }} />
       </div>
       {label && (
         <span className="font-mono text-xs text-fg-muted tabular-nums">

package/src/components/ui/Field.tsx

@@ -85,10 +85,7 @@ export function Field({
   const density = useDensity();
 
   const hasError = error !== undefined && error !== null && error !== false;
-  const describedBy =
-    [description ? descriptionId : undefined, hasError ? errorId : undefined]
-      .filter(Boolean)
-      .join(" ") || undefined;
+  const describedBy = [description ? descriptionId : undefined, hasError ? errorId : undefined].filter(Boolean).join(" ") || undefined;
 
   // A group carries the description itself; its controls would only repeat it.
   const control = useMemo(
@@ -109,9 +106,7 @@ export function Field({
             </span>
           )}
         </span>
-        {annotation && (
-          <span className="ml-auto font-mono text-[11px] text-fg-subtle">{annotation}</span>
-        )}
+        {annotation && <span className="ml-auto font-mono text-[11px] text-fg-subtle">{annotation}</span>}
       </span>
       <FieldContext value={control}>{children}</FieldContext>
     </>
@@ -122,17 +117,11 @@ export function Field({
       className={cn("flex min-w-0 flex-col", gap, className)}
       data-invalid={hasError ? "" : undefined}
       data-required={required ? "" : undefined}
-      {...(as === "group"
-        ? { role: "group", "aria-label": label, "aria-describedby": describedBy }
-        : {})}
+      {...(as === "group" ? { role: "group", "aria-label": label, "aria-describedby": describedBy } : {})}
     >
       {/* The description and the error sit outside the <label>: inside it they would be read
           as part of the control's name as well as its description. */}
-      {as === "label" ? (
-        <label className={cn("flex min-w-0 flex-col", gap)}>{labelled}</label>
-      ) : (
-        labelled
-      )}
+      {as === "label" ? <label className={cn("flex min-w-0 flex-col", gap)}>{labelled}</label> : labelled}
 
       {description && (
         <span id={descriptionId} className="text-xs leading-snug text-fg-muted">

package/src/components/ui/HighlightedText.tsx

@@ -0,0 +1,84 @@
+/*
+ * A string with marked spans: the placeholders, tags and protected terms of a UI string, and
+ * where a translation does not match its source.
+ *
+ * The string is only ever text. It is cut into runs and each run is a React text child, so
+ * `<b>` in a string is shown as the four characters `<b>`, never parsed. There is no
+ * `dangerouslySetInnerHTML` here, nor anywhere in the package.
+ *
+ * Each kind differs in shape, not only in colour (a box, a mono face, an underline style),
+ * and a screen reader hears the kind after the span. That label is selection-proof: a reader
+ * copying the string gets the string.
+ */
+
+import type { ComponentProps } from "react";
+
+import { cn } from "./cn";
+import { HIGHLIGHT_KINDS, segmentText, type HighlightKind, type HighlightSpan } from "./highlightSpans";
+
+/** What a screen reader hears after a span of each kind, by default. */
+const LABELS: Record<HighlightKind, string> = {
+  placeholder: "placeholder",
+  tag: "markup",
+  "protected-term": "protected term",
+  mismatch: "mismatch",
+};
+
+/** The look of each kind; listed in `HIGHLIGHT_KINDS` order, so a later kind wins a clash. */
+const STYLES: Record<HighlightKind, string> = {
+  // Code-like, in a quiet box.
+  tag: "rounded-sm bg-raised px-px font-mono text-fg-muted",
+  // Read as a name: a dotted underline, the face unchanged.
+  "protected-term": "underline decoration-fg-subtle decoration-dotted decoration-1 underline-offset-[3px]",
+  // A slot the code fills: mono, outlined.
+  placeholder: "rounded-sm bg-raised px-px font-mono text-fg ring-1 ring-line-strong ring-inset",
+  // A verdict the app made: a wavy underline and a tint, in the defect colour.
+  mismatch: "bg-defect/12 text-fg underline decoration-defect decoration-wavy decoration-1 underline-offset-[3px]",
+};
+
+/** Props of `HighlightedText`: the text, its spans, and every `<span>` prop but `children`. */
+export type HighlightedTextProps = Omit<ComponentProps<"span">, "children"> & {
+  /** The string. Shown as text, whitespace and line breaks kept; markup in it is not interpreted. */
+  text: string;
+  /** The ranges to mark, in UTF-16 offsets, in any order; overlaps are allowed. `findSpans` builds them from patterns. */
+  spans?: readonly HighlightSpan[] | undefined;
+  /**
+   * What a screen reader hears after a span of each kind: "placeholder", "markup",
+   * "protected term" and "mismatch" by default. `null` silences a kind. A span's own `label` wins.
+   */
+  labels?: Partial<Record<HighlightKind, string | null>> | undefined;
+};
+
+/**
+ * A string with highlighted spans: placeholders (`%1`, `{count}`), markup tags (`<b>`),
+ * protected terms (`ParamsManager`) and mismatches, each drawn in its own shape. The caller
+ * supplies the spans, or finds them with `findSpans`.
+ *
+ * The text is rendered as text, never as HTML. Each span is a `<mark>` with `data-kind` (the
+ * kinds covering it, space-separated), followed by its label for screen readers ("%1,
+ * placeholder"), which a copy of the text leaves out.
+ */
+export function HighlightedText({ text, spans = [], labels, className, ...rest }: HighlightedTextProps) {
+  const segments = segmentText(text, spans);
+  return (
+    <span {...rest} className={cn("break-words whitespace-pre-wrap", className)}>
+      {segments.map((segment) => {
+        if (segment.spans.length === 0) return segment.text;
+        const kinds = HIGHLIGHT_KINDS.filter((kind) => segment.spans.some((span) => span.kind === kind));
+        const said = segment.spans
+          .map((span) => span.label ?? (labels?.[span.kind] === undefined ? LABELS[span.kind] : labels[span.kind]))
+          .filter((label): label is string => typeof label === "string" && label !== "");
+        return (
+          <mark
+            key={segment.start}
+            data-kind={kinds.join(" ")}
+            className={cn("bg-transparent text-inherit", ...kinds.map((kind) => STYLES[kind]))}
+          >
+            {segment.text}
+            {said.length > 0 && <span className="sr-only select-none">{`, ${[...new Set(said)].join(", ")}`}</span>}
+          </mark>
+        );
+      })}
+    </span>
+  );
+}

package/src/components/ui/Input.tsx

@@ -46,13 +46,7 @@ export function useControlHeight(): string {
  * is described by the field's description and error.
  */
 export function Input({ className, "aria-describedby": describedBy, ...rest }: ComponentProps<"input">) {
-  return (
-    <input
-      {...useFieldDescription(describedBy)}
-      {...rest}
-      className={cn(controlClasses, useControlHeight(), className)}
-    />
-  );
+  return <input {...useFieldDescription(describedBy)} {...rest} className={cn(controlClasses, useControlHeight(), className)} />;
 }
 
 /**
@@ -126,11 +120,7 @@ export function NumberInput({ onValueChange, onClear, precision, ...props }: Num
   const { unit, ...rest } = props;
   // A `null` text value is an empty field, not a switch to uncontrolled.
   const text = (rest.value === null ? { ...rest, value: "" } : rest) as TextNumberInputProps;
-  return unit === undefined || unit === "" ? (
-    <PlainNumberInput {...text} />
-  ) : (
-    <UnitNumberInput unit={unit} {...text} />
-  );
+  return unit === undefined || unit === "" ? <PlainNumberInput {...text} /> : <UnitNumberInput unit={unit} {...text} />;
 }
 
 type TextNumberInputProps = Omit<NumberInputProps, "unit" | "value" | "onValueChange" | "onClear" | "precision"> & {
@@ -153,8 +143,7 @@ function ValueNumberInput({
   ...rest
 }: Omit<NumberInputProps, "onValueChange"> & { onValueChange: (value: number) => void }) {
   const numeric = typeof value === "number" ? value : null;
-  const show = (v: number | null) =>
-    v === null ? "" : precision === undefined ? String(v) : formatNumber(v, precision);
+  const show = (v: number | null) => (v === null ? "" : precision === undefined ? String(v) : formatNumber(v, precision));
   // Non-null while the field is being edited: the text as typed, and the value on focus.
   const [draft, setDraft] = useState<{ text: string; initial: number | null } | null>(null);
 
@@ -214,11 +203,7 @@ function ValueNumberInput({
   );
 }
 
-function PlainNumberInput({
-  className,
-  "aria-describedby": describedBy,
-  ...rest
-}: TextNumberInputProps) {
+function PlainNumberInput({ className, "aria-describedby": describedBy, ...rest }: TextNumberInputProps) {
   return (
     <input
       {...useFieldDescription(describedBy)}
@@ -235,12 +220,7 @@ function PlainNumberInput({
  * `NumberInput` stays byte-identical to the one before `unit` existed, down to the ids React
  * hands the elements rendered after it.
  */
-function UnitNumberInput({
-  unit,
-  style,
-  "aria-describedby": describedBy,
-  ...rest
-}: TextNumberInputProps & { unit: string }) {
+function UnitNumberInput({ unit, style, "aria-describedby": describedBy, ...rest }: TextNumberInputProps & { unit: string }) {
   const unitId = useId();
   return (
     <span data-unit={unit} className="relative flex w-full min-w-0 items-center">
@@ -262,21 +242,3 @@ function UnitNumberInput({
     </span>
   );
 }
-
-/**
- * Multi-line text — set in mono, for JSON and lists. Takes every `<textarea>` prop, `ref`
- * included.
- */
-export function Textarea({
-  className,
-  "aria-describedby": describedBy,
-  ...rest
-}: ComponentProps<"textarea">) {
-  return (
-    <textarea
-      {...useFieldDescription(describedBy)}
-      {...rest}
-      className={cn(controlClasses, "py-1.5 font-mono", className)}
-    />
-  );
-}

package/src/components/ui/Panel.tsx

@@ -47,11 +47,7 @@ export function Panel({
           <h2
             className={cn(
               "truncate font-semibold text-fg",
-              byDensity(
-                density,
-                "text-sm tracking-tight",
-                "text-[11px] tracking-wider uppercase text-fg-muted",
-              ),
+              byDensity(density, "text-sm tracking-tight", "text-[11px] tracking-wider uppercase text-fg-muted"),
             )}
           >
             {title}
@@ -97,10 +93,7 @@ export function Section({
     <section className={cn("flex flex-col", byDensity(density, "gap-3", "gap-1.5"), className)}>
       <div className={cn("flex items-baseline", byDensity(density, "gap-2.5", "gap-2"))}>
         {step !== undefined && (
-          <span
-            className="font-mono text-xs text-fg-subtle tabular-nums"
-            aria-hidden
-          >
+          <span className="font-mono text-xs text-fg-subtle tabular-nums" aria-hidden>
             {String(step).padStart(2, "0")}
           </span>
         )}
@@ -212,16 +205,11 @@ export function ReadoutStrip({
   if (shown.length === 0) return null;
 
   return (
-    <ol
-      className={cn(
-        "flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-xs text-fg-muted",
-        className,
-      )}
-    >
+    <ol className={cn("flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-xs text-fg-muted", className)}>
       {shown.map((item, index) => (
         // The items are positional facts with no identity of their own (a label is optional
         // and values repeat), so their place in the strip is the key.
-        // eslint-disable-next-line @eslint-react/no-array-index-key -- positional list, see above
+        // oxlint-disable-next-line react/no-array-index-key -- positional list, see above
         <li key={index} className="flex items-center gap-2">
           {index > 0 && (
             <span className="text-fg-subtle" aria-hidden>

package/src/components/ui/PoseInput.tsx

@@ -110,14 +110,12 @@ export function PoseInput({
   const scale = translationUnit === "mm" ? 1000 : 1;
   const tPrecision = translationPrecision ?? (translationUnit === "mm" ? 1 : 4);
   const translation = value.translation.map((component) => component * scale);
-  const radians =
-    typed !== null && sameQuaternion(typed.rotation, value.rotation) ? typed.angles : rotationView.toEuler(value.rotation);
+  const radians = typed !== null && sameQuaternion(typed.rotation, value.rotation) ? typed.angles : rotationView.toEuler(value.rotation);
   const degrees = radians.map((angle) => angle * DEGREES);
   const angleLabels = rotationView.labels ?? DEFAULT_ANGLE_LABELS;
 
   if (readOnly) {
-    const join = (values: readonly number[], precision: number) =>
-      values.map((component) => formatNumber(component, precision)).join(" ");
+    const join = (values: readonly number[], precision: number) => values.map((component) => formatNumber(component, precision)).join(" ");
     return (
       <div role="group" aria-label={ariaLabel} data-readonly="" className={cn("min-w-0", className)}>
         <ReadoutStrip
@@ -149,7 +147,11 @@ export function PoseInput({
     <div
       role="group"
       aria-label={ariaLabel}
-      className={cn("grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2", byDensity(density, "gap-y-2", "gap-y-1"), className)}
+      className={cn(
+        "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2",
+        byDensity(density, "gap-y-2", "gap-y-1"),
+        className,
+      )}
     >
       <span aria-hidden className={rowLabel}>
         Translation

package/src/components/ui/Progress.tsx

@@ -0,0 +1,80 @@
+/*
+ * How far a long operation has got.
+ *
+ * The bar is in `signal`, not a verdict colour: progress is not a pass or a fail, and a bar
+ * that turned green at 100 % would claim a verdict nobody made. The value text is "412 of
+ * 2,556" rather than a bare percentage, because the count is what a reader checks against
+ * the work ("2,556 strings"), and a screen reader says it as written.
+ */
+
+import type { ComponentProps } from "react";
+
+import { byDensity, useDensity } from "./Density";
+import { cn } from "./cn";
+
+/** Counts written the same on the server and in every browser: `2,556`, `0.5`. */
+const count = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+
+/**
+ * The accessible value text of a progress: `"412 of 2,556"`, or `null` while indeterminate.
+ *
+ * @param value - Done so far; `null` or `undefined` for an unknown amount.
+ * @param max - The whole. Defaults to 100.
+ * @returns The text, with the value clamped to `[0, max]`.
+ */
+export function progressText(value: number | null | undefined, max = 100): string | null {
+  if (value === null || value === undefined || !Number.isFinite(value)) return null;
+  const whole = max > 0 ? max : 100;
+  return `${count.format(Math.min(Math.max(value, 0), whole))} of ${count.format(whole)}`;
+}
+
+/** Props of `Progress`: a value out of a `max`, or none for an unknown amount, plus the `<div>` props. */
+export type ProgressProps = Omit<ComponentProps<"div">, "children" | "role"> & {
+  /** Done so far, from 0 to `max`; clamped. `null` or left out: indeterminate, the amount unknown. */
+  value?: number | null | undefined;
+  /** The whole. Defaults to 100; a value ≤ 0 counts as 100. */
+  max?: number | undefined;
+  /**
+   * What a screen reader says for the value. Defaults to `"412 of 2,556"`; give your own when
+   * the unit matters ("412 of 2,556 strings").
+   */
+  valueText?: string | undefined;
+};
+
+/**
+ * A progress bar: determinate when it has a `value` (a `max`, 100 by default), indeterminate
+ * without one. Name it with `aria-label` or `aria-labelledby`.
+ *
+ * A `progressbar` with `aria-valuenow`, `aria-valuemax` and `aria-valuetext` ("412 of 2,556",
+ * or your `valueText`); indeterminate, it has none of them, as the ARIA pattern asks.
+ * The track follows the density in force. State is exposed as `data-state`
+ * (`"indeterminate"`, `"loading"` or `"complete"`). With reduced motion the indeterminate bar
+ * holds still.
+ */
+export function Progress({ value, max = 100, valueText, className, ...rest }: ProgressProps) {
+  const density = useDensity();
+  const whole = max > 0 ? max : 100;
+  const text = progressText(value, whole);
+  const done = text === null ? null : Math.min(Math.max(value as number, 0), whole);
+  const state = done === null ? "indeterminate" : done >= whole ? "complete" : "loading";
+  return (
+    <div
+      role="progressbar"
+      aria-valuemin={done === null ? undefined : 0}
+      aria-valuemax={done === null ? undefined : whole}
+      aria-valuenow={done ?? undefined}
+      aria-valuetext={done === null ? undefined : (valueText ?? text ?? undefined)}
+      data-state={state}
+      {...rest}
+      className={cn("relative w-full overflow-hidden rounded-full bg-line", byDensity(density, "h-1.5", "h-1"), className)}
+    >
+      {done === null ? (
+        // A third of the track sweeping across it. Its resting place (reduced motion, a
+        // screenshot) is the left third, still visibly "in progress".
+        <div className="absolute inset-y-0 left-0 w-1/3 animate-progress-sweep rounded-full bg-signal" />
+      ) : (
+        <div className="h-full rounded-full bg-signal transition-[width] duration-300" style={{ width: `${(done / whole) * 100}%` }} />
+      )}
+    </div>
+  );
+}

package/src/components/ui/SegmentedControl.tsx

@@ -110,9 +110,7 @@ export function SegmentedControl({
               SEGMENT_SIZE_CLASSES[size],
               "font-medium transition-colors",
               "has-focus-visible:outline-2 has-focus-visible:outline-offset-1 has-focus-visible:outline-signal",
-              checked
-                ? "bg-surface text-fg shadow-sm"
-                : "text-fg-muted hover:text-fg",
+              checked ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg",
               disabled && "cursor-not-allowed",
             )}
           >

package/src/components/ui/Select.tsx

@@ -119,17 +119,9 @@ export function Select({
           )}
         >
           <RadixSelect.Viewport className="p-1">
-            {unsetLabel !== undefined && (
-              <SelectItem value={UNSET_SENTINEL} label={unsetLabel} muted />
-            )}
+            {unsetLabel !== undefined && <SelectItem value={UNSET_SENTINEL} label={unsetLabel} muted />}
             {options.map((option) => (
-              <SelectItem
-                key={option.value}
-                value={option.value}
-                label={option.label}
-                note={option.note}
-                disabled={option.disabled}
-              />
+              <SelectItem key={option.value} value={option.value} label={option.label} note={option.note} disabled={option.disabled} />
             ))}
           </RadixSelect.Viewport>
         </RadixSelect.Content>