@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/components/stat-tile.tsx

@@ -52,16 +52,7 @@ export { DEFAULT_STAT_TILE_LABELS };
  *    below 30°"). Say it in the hint or description as well; colour alone is not one.
  */
 export type StatTileTone =
-  | "neutral"
-  | "brand"
-  | "income"
-  | "expense"
-  | "net"
-  | "signed"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info";
+  "neutral" | "brand" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
 
 const TONE_CLASS: Record<Exclude<StatTileTone, "signed">, string> = {
   neutral: "text-primary",
@@ -124,8 +115,7 @@ export interface StatTileLinkProps {
  * one to scroll into view or measure. `ComponentPropsWithoutRef` only kept it out of the
  * type; at runtime `{...rest}` already carried it there.
  */
-export interface StatTileProps
-  extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
+export interface StatTileProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
   /** What is measured. Also the tile's accessible name when it is a link/button. */
   label: ReactNode;
   /**
@@ -435,7 +425,11 @@ export function StatTile({
       // `relative`: the containing block for the sr-only sentence (see the
       // sr-only-containment test for what an escaped one does to the page).
       <div className="relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums">
-        <span id={deltaId} data-private={priv} className={cn("inline-flex items-center gap-0.5 font-medium", deltaTone)}>
+        <span
+          id={deltaId}
+          data-private={priv}
+          className={cn("inline-flex items-center gap-0.5 font-medium", deltaTone)}
+        >
           <Icon className="size-3 shrink-0" aria-hidden />
           {/* The figure at zero too, like Delta (kastlan 48): "0 %" says the change was
               measured; a bare dash reads like a missing value. */}
@@ -448,11 +442,7 @@ export function StatTile({
   }
 
   // ── Headline ──
-  const valueClass = cn(
-    "whitespace-nowrap font-semibold tabular-nums",
-    VALUE_TEXT[size],
-    toneClass(tone, value),
-  );
+  const valueClass = cn("whitespace-nowrap font-semibold tabular-nums", VALUE_TEXT[size], toneClass(tone, value));
   const headline = loading ? (
     <span id={valueId} className="relative block py-0.5">
       <span aria-hidden className={cn(SKELETON_CLASS, "block h-6 w-24 max-w-full")} />
@@ -461,9 +451,7 @@ export function StatTile({
   ) : hasValue ? (
     <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && !large && "ms-auto")}>
       {show(value)}
-      {unit != null && (
-        <span className="ms-1 text-[0.7em] font-medium text-muted">{unit}</span>
-      )}
+      {unit != null && <span className="ms-1 text-[0.7em] font-medium text-muted">{unit}</span>}
     </span>
   ) : (
     <span id={valueId} className={cn("relative", valueClass, "text-muted")}>
@@ -472,8 +460,9 @@ export function StatTile({
     </span>
   );
 
-  const graphic =
-    loading ? null : sparkline ??
+  const graphic = loading
+    ? null
+    : (sparkline ??
       (trend && (
         <Sparkline
           data={trend}
@@ -485,7 +474,7 @@ export function StatTile({
           tone={tone === "signed" ? "signed" : tone === "neutral" ? "chart" : tone}
           data-private={priv}
         />
-      ));
+      )));
 
   return (
     <Card

package/src/components/swatch-picker.tsx

@@ -62,8 +62,7 @@ export interface SwatchOption<T extends string> {
  * is omitted rather than shadowed, as on {@link ToggleGroup}.
  */
 export interface SwatchPickerProps<T extends string>
-  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue">, FieldHelpProps {
   options: SwatchOption<T>[];
   /** The chosen colour, or `null` for none. */
   value: T | null;
@@ -270,7 +269,13 @@ export function SwatchPicker<T extends string>({
   );
   if (!labelled) return group;
   return (
-    <LabelStrip labelId={labelId} label={label} hint={messages.labelHint} disabled={disabled || locked} className={className}>
+    <LabelStrip
+      labelId={labelId}
+      label={label}
+      hint={messages.labelHint}
+      disabled={disabled || locked}
+      className={className}
+    >
       {group}
       {messages.below}
     </LabelStrip>

package/src/components/swipeable-row.tsx

@@ -192,14 +192,7 @@ const PEEK_PX = 40;
  * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be
  * done to it rather than keeping it behind a gesture nobody can hear.
  */
-export function SwipeableRow({
-  right,
-  left,
-  enabled = true,
-  actionsLabel,
-  className,
-  children,
-}: SwipeableRowProps) {
+export function SwipeableRow({ right, left, enabled = true, actionsLabel, className, children }: SwipeableRowProps) {
   const labels = useKitLabels("swipeableRow", DEFAULT_SWIPEABLE_ROW_LABELS, {
     actions: actionsLabel,
   });
@@ -309,9 +302,7 @@ export function SwipeableRow({
               {shown.icon}
             </span>
           )}
-          <span className={cn("truncate transition-all", armed && "text-sm font-semibold")}>
-            {shown.label}
-          </span>
+          <span className={cn("truncate transition-all", armed && "text-sm font-semibold")}>{shown.label}</span>
         </div>
       )}
       <div

package/src/components/table-skeleton.tsx

@@ -70,7 +70,10 @@ export function TableSkeleton({
     ) : (
       <div
         key={key}
-        className={cn("flex items-center gap-4 px-4 py-3", stack && "max-sm:flex-col max-sm:items-stretch max-sm:gap-2")}
+        className={cn(
+          "flex items-center gap-4 px-4 py-3",
+          stack && "max-sm:flex-col max-sm:items-stretch max-sm:gap-2",
+        )}
         data-skeleton-row=""
       >
         <Skeleton className={cn("h-4", NAME_WIDTHS[key % NAME_WIDTHS.length])} />

package/src/components/table.tsx

@@ -1,4 +1,14 @@
-import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  Children,
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import type { ComponentPropsWithRef, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
 import { useEdgeFade } from "../lib/strip-fade";
@@ -633,11 +643,5 @@ export type TableCaptionProps = ComponentPropsWithRef<"caption">;
 export function TableCaption({ className, id, ...rest }: TableCaptionProps) {
   const { captionId, registerCaption } = useContext(TableContext);
   useLayoutEffect(() => (id ? undefined : registerCaption()), [id, registerCaption]);
-  return (
-    <caption
-      {...rest}
-      id={id ?? captionId}
-      className={cn("mt-2 text-start text-sm text-muted", className)}
-    />
-  );
+  return <caption {...rest} id={id ?? captionId} className={cn("mt-2 text-start text-sm text-muted", className)} />;
 }

package/src/components/tabs.tsx

@@ -66,8 +66,7 @@ export { DEFAULT_TABS_LABELS };
  * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up
  * through `panelId`, which is the whole point of that prop.
  */
-export interface TabsProps<T extends string>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
+export interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
   /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an
    *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:
    *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose
@@ -200,8 +199,7 @@ export interface TabsProps<T extends string>
   ref?: Ref<HTMLDivElement>;
 }
 
-const TABLIST_CLASSES =
-  "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-subtle";
+const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-subtle";
 // The side nav. A column of full-width rows with the open one FILLED rather than
 // underlined: an underline under one row of a list reads as a separator, not as a
 // selection. `--bg-active` is the kit's own selected-row fill (the sidebar's), so the
@@ -211,8 +209,7 @@ const TAB_VERTICAL_CLASSES =
   FOCUS_RING_WIDTH +
   " flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus-visible:ring-strong";
 const TAB_VERTICAL_ACTIVE_CLASSES = "bg-active text-primary";
-const TAB_VERTICAL_INACTIVE_CLASSES =
-  "text-muted hover:bg-hover hover:text-primary";
+const TAB_VERTICAL_INACTIVE_CLASSES = "text-muted hover:bg-hover hover:text-primary";
 
 // `max-w-full`: no tab outgrows its strip. A sheet's `detail` line ("Spurstangenkraft
 // links · … · 31 Punkte") made one tab 448px wide in a 390px strip, and a tab wider
@@ -222,8 +219,7 @@ const TAB_CLASSES =
   FOCUS_RING_WIDTH +
   " max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus-visible:ring-strong";
 const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-primary";
-const TAB_INACTIVE_CLASSES =
-  "border-transparent text-muted hover:text-secondary hover:border-strong";
+const TAB_INACTIVE_CLASSES = "border-transparent text-muted hover:text-secondary hover:border-strong";
 
 // The add/remove chrome. The × reserves its gutter on every removable tab (see
 // `onRemove`).
@@ -321,7 +317,11 @@ export function Tabs<T extends string>({
             labelVisible={false}
             onClick={() => onCue(side)}
           >
-            {side === "start" ? <ChevronLeft className="rtl:-scale-x-100" /> : <ChevronRight className="rtl:-scale-x-100" />}
+            {side === "start" ? (
+              <ChevronLeft className="rtl:-scale-x-100" />
+            ) : (
+              <ChevronRight className="rtl:-scale-x-100" />
+            )}
           </IconButton>
         </div>
       )}
@@ -340,10 +340,8 @@ export function Tabs<T extends string>({
   }, [active]);
   const isRemovable = (tab: TabItem<T>) => onRemove !== undefined && tab.removable !== false;
   // Whether Delete reaches this tab: every removable tab, or only the open one.
-  const deletesOnKey = (tab: TabItem<T>) =>
-    isRemovable(tab) && (removeOn === "every" || tab.id === active);
-  const nameOf = (tab: TabItem<T>) =>
-    tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
+  const deletesOnKey = (tab: TabItem<T>) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
+  const nameOf = (tab: TabItem<T>) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
 
   // Where focus goes once a removal the strip asked for has happened. The caller
   // owns `tabs` and may take its time (a confirmation, a request), so this waits
@@ -372,10 +370,7 @@ export function Tabs<T extends string>({
     if (focused && focused !== document.body && !strip.contains(focused) && focused !== removeRef.current) return;
     // The removed tab was open: focus follows the caller's new selection, which is
     // also the strip's tab stop. It was not: its neighbour, as the ARIA pattern has it.
-    const target =
-      !pending.wasActive && tabs.some((t) => t.id === pending.neighbour)
-        ? pending.neighbour
-        : active;
+    const target = !pending.wasActive && tabs.some((t) => t.id === pending.neighbour) ? pending.neighbour : active;
     const index = tabs.findIndex((t) => t.id === target);
     strip.querySelectorAll<HTMLElement>('[role="tab"]')[index]?.focus();
   }, [tabs, active]);
@@ -419,12 +414,7 @@ export function Tabs<T extends string>({
     const from = items.indexOf(e.currentTarget);
     if (from === -1) return;
     e.preventDefault();
-    const to =
-      e.key === "Home"
-        ? 0
-        : e.key === "End"
-          ? items.length - 1
-          : (from + step + items.length) % items.length;
+    const to = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (from + step + items.length) % items.length;
     items[to]?.focus();
   };
   const tablist = (
@@ -485,18 +475,16 @@ export function Tabs<T extends string>({
                 isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,
                 removable && "pe-8",
               )
-            : cn(
-                TAB_CLASSES,
-                isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES,
-                removable && TAB_REMOVABLE_CLASSES,
-              ),
+            : cn(TAB_CLASSES, isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES, removable && TAB_REMOVABLE_CLASSES),
         };
         const inner = (
           <span
             className={cn(
               // In a side nav the row is the full width, so the label takes it and a
               // badge lands at the row's end, where a column of counts lines up.
-              vertical ? "flex min-w-0 flex-1 items-center gap-1.5" : "inline-flex max-w-full min-w-0 items-center gap-1.5",
+              vertical
+                ? "flex min-w-0 flex-1 items-center gap-1.5"
+                : "inline-flex max-w-full min-w-0 items-center gap-1.5",
               tab.empty && TAB_EMPTY_CLASSES,
             )}
           >
@@ -523,7 +511,11 @@ export function Tabs<T extends string>({
               tab.label
             )}
             {tab.badge != null ? (
-              vertical ? <span className="ms-auto flex shrink-0 items-center">{tab.badge}</span> : tab.badge
+              vertical ? (
+                <span className="ms-auto flex shrink-0 items-center">{tab.badge}</span>
+              ) : (
+                tab.badge
+              )
             ) : null}
           </span>
         );
@@ -671,15 +663,8 @@ export function Tabs<T extends string>({
       {removeButton}
       {/* Outside the tablist: an action, not a tab — and a tablist may own only
           tabs. The rule under the strip carries on beneath it. */}
-      <div
-        className="flex flex-1 items-center self-stretch border-b border-subtle"
-      >
-        <button
-          type="button"
-          onClick={onAdd}
-          disabled={busy}
-          className={cn(TAB_ADD_CLASSES, TAB_ADD_PHONE_CLASSES)}
-        >
+      <div className="flex flex-1 items-center self-stretch border-b border-subtle">
+        <button type="button" onClick={onAdd} disabled={busy} className={cn(TAB_ADD_CLASSES, TAB_ADD_PHONE_CLASSES)}>
           <Plus aria-hidden />
           {/* Below md a scrolling strip keeps the room for tabs: the label is visually
               hidden and the "+" carries it as its name. Beside "+ Add loop" a 390px strip

package/src/components/text-link.tsx

@@ -177,8 +177,10 @@ export interface TextLinkRenderProps {
   [key: `data-${string}`]: unknown;
 }
 
-export interface TextLinkProps
-  extends Omit<ComponentPropsWithoutRef<"a">, "href" | "children" | "aria-current" | "onClick" | "onKeyDown"> {
+export interface TextLinkProps extends Omit<
+  ComponentPropsWithoutRef<"a">,
+  "href" | "children" | "aria-current" | "onClick" | "onKeyDown"
+> {
   href: string;
   children: ReactNode;
   /** Default `brand`. */
@@ -285,8 +287,7 @@ export function TextLink({
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const kitLink = useKitLink();
   const underline = underlineProp ?? (UNDERLINED_BY_DEFAULT.has(tone) ? "always" : "hover");
-  const ariaCurrent: TextLinkCurrent | undefined =
-    current === true ? "page" : current === false ? undefined : current;
+  const ariaCurrent: TextLinkCurrent | undefined = current === true ? "page" : current === false ? undefined : current;
 
   const look = cn(
     "rounded-sm underline-offset-2 transition-colors",
@@ -303,8 +304,7 @@ export function TextLink({
       {children}
       {external && (
         <>
-          <ExternalLink aria-hidden className="ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100" />
-          {" "}
+          <ExternalLink aria-hidden className="ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100" />{" "}
           <span className="sr-only">({common.opensInNewTab})</span>
         </>
       )}

package/src/components/text.tsx

@@ -69,8 +69,7 @@ const SECTION_LABEL_BAND_CLASS: Record<SectionLabelSize, string> = {
   md: "text-caption",
   sm: "text-xs",
 };
-const BAND =
-  "block border-b border-subtle bg-surface-2 px-4 py-2 font-medium uppercase tracking-wide text-secondary";
+const BAND = "block border-b border-subtle bg-surface-2 px-4 py-2 font-medium uppercase tracking-wide text-secondary";
 
 type SectionLabelElement = "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "legend";
 

package/src/components/tile-radio.tsx

@@ -138,10 +138,8 @@ const TILE_BASE =
   FOCUS_RING +
   " focus-visible:ring-offset-2 focus-visible:ring-offset-surface " +
   "disabled:cursor-not-allowed disabled:opacity-50";
-const TILE_IDLE =
-  "border-subtle bg-surface hover:border-strong hover:bg-hover";
-const TILE_SELECTED =
-  "border-[var(--text-primary)] bg-surface ring-1 ring-[var(--text-primary)]";
+const TILE_IDLE = "border-subtle bg-surface hover:border-strong hover:bg-hover";
+const TILE_SELECTED = "border-[var(--text-primary)] bg-surface ring-1 ring-[var(--text-primary)]";
 /** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */
 const TILE_LOCKED = "cursor-not-allowed opacity-50";
 /** …and no hover offer on an idle one, which cannot be chosen. Not on the selected
@@ -180,15 +178,11 @@ export function TileRadioGroup<T extends string>({
   const noteId = useId();
   const reasonId = useId();
   const s = TILE_SIZE[size];
-  const checkedIndex =
-    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);
+  const checkedIndex = checked === undefined ? -1 : items.findIndex((it) => it.key === checked);
   // The ONE tab stop: the checked tile, else the first that can be reached — the APG
   // rule, so Tab into a group with nothing checked still lands somewhere. A locked
   // tile is reachable: landing on it is how its reason is read.
-  const tabStop =
-    checkedIndex >= 0 && !isOff(items[checkedIndex])
-      ? checkedIndex
-      : items.findIndex((it) => !isOff(it));
+  const tabStop = checkedIndex >= 0 && !isOff(items[checkedIndex]) ? checkedIndex : items.findIndex((it) => !isOff(it));
 
   const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
     // Left and right are VISUAL directions: in a right-to-left page the row runs the
@@ -269,19 +263,12 @@ export function TileRadioGroup<T extends string>({
               tileClassName?.(item, selected),
             )}
           >
-            {item.key === null ? (
-              <Ban aria-hidden className={cn(s.glyph, "text-muted")} />
-            ) : (
-              renderTile(item, selected)
-            )}
+            {item.key === null ? <Ban aria-hidden className={cn(s.glyph, "text-muted")} /> : renderTile(item, selected)}
             {item.note && (
               <>
                 {/* A dot rather than a dimmed tile: dimming reads as "disabled", and a
                     tile with a note is entirely available. */}
-                <span
-                  aria-hidden
-                  className="absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]"
-                />
+                <span aria-hidden className="absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]" />
                 {/* `hidden` still serves as a description: aria-describedby reads
                     hidden text, which is what keeps it out of the layout. */}
                 <span id={`${noteId}-${i}`} hidden>

package/src/components/time-input.tsx

@@ -35,11 +35,10 @@ import { cn } from "../lib/cn";
  * at the site"), a {@link FieldHint} rides the label line. `showCount` is typed out — a
  * time has no length worth counting.
  */
-export interface TimeInputProps
-  extends Omit<
-    InputProps,
-    "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant" | "showCount" | "countLabels"
-  > {
+export interface TimeInputProps extends Omit<
+  InputProps,
+  "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant" | "showCount" | "countLabels"
+> {
   /** `"HH:mm"` (or `"HH:mm:ss"` with a sub-minute `step`); `""` is "no time". */
   value: string;
   /** The normalised value on every change the browser reports — which for a time

package/src/components/toast.tsx

@@ -140,8 +140,7 @@ const privately = (node: ReactNode) => <span data-private="">{node}</span>;
  * whitespace-free class token.
  */
 const ID_CLASS = "kit-toast-id-";
-const idClass = (id: ToastId) =>
-  `${ID_CLASS}${typeof id === "number" ? "n" : "s"}-${encodeURIComponent(String(id))}`;
+const idClass = (id: ToastId) => `${ID_CLASS}${typeof id === "number" ? "n" : "s"}-${encodeURIComponent(String(id))}`;
 
 /** The id {@link idClass} stamped on a toast element, or null for a toast the kit did
  *  not make (an app still calling sonner directly). */
@@ -284,13 +283,7 @@ export const toast = Object.assign(
 
 /* ── The Toaster ─────────────────────────────────────────────────────────── */
 
-export type ToastPosition =
-  | "top-left"
-  | "top-center"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-center"
-  | "bottom-right";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 
 export type ToastSwipeDirection = "top" | "right" | "bottom" | "left";
 
@@ -381,9 +374,7 @@ const ALL_DIRECTIONS: ToastSwipeDirection[] = ["top", "right", "bottom", "left"]
 
 /** Light or dark, as the `.dark` class on `<html>` says right now. */
 function readDocumentTheme(): "light" | "dark" {
-  return typeof document !== "undefined" && document.documentElement.classList.contains("dark")
-    ? "dark"
-    : "light";
+  return typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
 
 function subscribeDocumentTheme(onChange: () => void): () => void {

package/src/components/toggle-group.tsx

@@ -37,8 +37,7 @@ export interface ToggleOption<T extends string> {
  * worse than one that does not compile.
  */
 export interface ToggleGroupBaseProps<T extends string>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children">, FieldHelpProps {
   options: ToggleOption<T>[];
   className?: string;
   /** Applied to every option button (e.g. to tune height/rounding to match
@@ -354,9 +353,7 @@ export interface ToggleGroupClearableProps<T extends string> extends ToggleGroup
 
 /** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group
  *  can actually emit `null` — no existing caller has a `null` to handle. */
-export type ToggleGroupProps<T extends string> =
-  | ToggleGroupRequiredProps<T>
-  | ToggleGroupClearableProps<T>;
+export type ToggleGroupProps<T extends string> = ToggleGroupRequiredProps<T> | ToggleGroupClearableProps<T>;
 
 /**
  * Overloaded rather than typed by the union alone (keksdose, "Gaps found adopting
@@ -542,9 +539,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
           field && CHROME_SEGMENT[size],
           // In the strip placement: a 22px group under a 20px strip — STRIP_SEGMENT.
           strip && STRIP_SEGMENT[size],
-          active
-            ? "bg-inverse text-inverse"
-            : "text-secondary hover:bg-hover",
+          active ? "bg-inverse text-inverse" : "text-secondary hover:bg-hover",
           // No hover fill on a group that cannot be changed — a segment that
           // lights up under the pointer is an offer, and there is none here. Not on
           // the chosen segment: its fill IS its state, and its inverse text would
@@ -578,7 +573,12 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
       aria-labelledby={labelled && ariaLabelAttr === undefined ? labelId : rest["aria-labelledby"]}
       aria-invalid={hasError || rest["aria-invalid"] || undefined}
       aria-describedby={
-        [rest["aria-describedby"], hintAsCaption !== undefined && hintCaptionId, hasCaption && captionId, hasError && errorId]
+        [
+          rest["aria-describedby"],
+          hintAsCaption !== undefined && hintCaptionId,
+          hasCaption && captionId,
+          hasError && errorId,
+        ]
           .filter(Boolean)
           .join(" ") || undefined
       }

package/src/components/toggle-legend.tsx

@@ -26,13 +26,7 @@ import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-ch
  * Kept here, beside the legend's own mark, and read by `SeriesChart` from here — so
  * the key under a chart and the lines on it cannot disagree.
  */
-export const STROKE_PATTERNS: readonly (string | undefined)[] = [
-  undefined,
-  "5 4",
-  "1 3",
-  "9 3 2 3",
-  "9 3 2 3 2 3",
-];
+export const STROKE_PATTERNS: readonly (string | undefined)[] = [undefined, "5 4", "1 3", "9 3 2 3", "9 3 2 3 2 3"];
 
 /** The dash array for the nth pattern, wrapping past the fifth. */
 export function strokeDash(order: number): string | undefined {
@@ -79,8 +73,7 @@ export function toggleHidden(hidden: ReadonlySet<string>, key: string): Readonly
  * A caller that places its legend itself and wants it kept beside the chart at every
  * size overrides with `large:col-auto large:basis-auto`.
  */
-const UNDER_THE_CHART_AT_LARGE =
-  "large:order-last large:col-span-full large:basis-full large:[*:has(>&)]:flex-wrap";
+const UNDER_THE_CHART_AT_LARGE = "large:order-last large:col-span-full large:basis-full large:[*:has(>&)]:flex-wrap";
 
 /** A vertical legend's entries from Large up: across, wrapping — it is under the chart
  *  now (see {@link UNDER_THE_CHART_AT_LARGE}), where a column of entries would be a
@@ -284,10 +277,7 @@ export function StaticLegend({
       {entries.map((entry) => (
         <Item
           key={entry.key}
-          className={cn(
-            "flex items-center gap-1.5 text-caption text-secondary",
-            entry.align === "end" && "ms-auto",
-          )}
+          className={cn("flex items-center gap-1.5 text-caption text-secondary", entry.align === "end" && "ms-auto")}
         >
           <LegendMark entry={entry} off={false} />
           {entry.label}
@@ -335,9 +325,7 @@ export function LegendColumn({ children, className }: { children: ReactNode; cla
 export function LegendGroup({ title, children }: { title: ReactNode; children: ReactNode }) {
   return (
     <div className="flex min-w-0 flex-col items-start gap-1">
-      <span className="text-micro font-semibold uppercase tracking-wide text-muted">
-        {title}
-      </span>
+      <span className="text-micro font-semibold uppercase tracking-wide text-muted">{title}</span>
       <div className="flex flex-col items-start gap-y-0.5">{children}</div>
     </div>
   );