@eifi1/ui-kit 0.51.4 → 0.51.6

package/src/components/sign-chip.tsx

@@ -86,23 +86,23 @@ export function SignChip({ negative, onNegativeChange, disabled, labels: labelsP
   // and the bubble that said only that goes.
   const large = useLargeText();
   const chip = (
-      <Chip
-        size="lg"
-        tone={negative ? "expense" : "income"}
-        icon={negative ? Minus : Plus}
-        onClick={() => onNegativeChange(!negative)}
-        disabled={disabled}
-        aria-label={name}
-        // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every
-        // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the
-        // hairline border is the 42px a labelled field measures (#431).
-        className={cn("shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5", !large && className)}
-      >
-        {current}
-        {/* The swap arrows after the word, in the label's own row: decoration (the
+    <Chip
+      size="lg"
+      tone={negative ? "expense" : "income"}
+      icon={negative ? Minus : Plus}
+      onClick={() => onNegativeChange(!negative)}
+      disabled={disabled}
+      aria-label={name}
+      // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every
+      // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the
+      // hairline border is the 42px a labelled field measures (#431).
+      className={cn("shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5", !large && className)}
+    >
+      {current}
+      {/* The swap arrows after the word, in the label's own row: decoration (the
             name already says what a press does), set a little apart from the word. */}
-        <ArrowUpDown className="ms-1.5 inline size-3.5 align-[-0.2em] opacity-60" aria-hidden />
-      </Chip>
+      <ArrowUpDown className="ms-1.5 inline size-3.5 align-[-0.2em] opacity-60" aria-hidden />
+    </Chip>
   );
   if (!large) {
     return (

package/src/components/signature-pad.tsx

@@ -1,5 +1,11 @@
 import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, PointerEvent as ReactPointerEvent, ReactNode, Ref } from "react";
+import type {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+  Ref,
+} from "react";
 import { Eraser, Keyboard, PenLine, Undo2 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { hasContent } from "../lib/presence";
@@ -430,7 +436,10 @@ export function SignaturePad({
 
   /* ── Pointer ── */
 
-  const toPoint = (e: { clientX: number; clientY: number; pressure: number; pointerType: string }, rect: DOMRect): Point => {
+  const toPoint = (
+    e: { clientX: number; clientY: number; pressure: number; pointerType: string },
+    rect: DOMRect,
+  ): Point => {
     const scale = refWidth.current > 0 && rect.width > 0 ? rect.width / refWidth.current : 1;
     return {
       x: (e.clientX - rect.left) / scale,
@@ -605,13 +614,12 @@ export function SignaturePad({
           {labels.clear}
         </Button>
         {allowTypedName && (
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={switchMode}
-            disabled={disabled}
-          >
-            {typed ? <PenLine aria-hidden="true" className="size-4" /> : <Keyboard aria-hidden="true" className="size-4" />}
+          <Button type="button" variant="secondary" onClick={switchMode} disabled={disabled}>
+            {typed ? (
+              <PenLine aria-hidden="true" className="size-4" />
+            ) : (
+              <Keyboard aria-hidden="true" className="size-4" />
+            )}
             {typed ? labels.useDrawn : labels.useTyped}
           </Button>
         )}
@@ -696,7 +704,9 @@ export function SignatureView({
       data-empty={kind === "empty" || undefined}
     >
       {captioned && (
-        <figcaption id={captionId} className="block text-sm font-medium text-primary">{caption}</figcaption>
+        <figcaption id={captionId} className="block text-sm font-medium text-primary">
+          {caption}
+        </figcaption>
       )}
       <div
         className={cn(
@@ -725,9 +735,7 @@ export function SignatureView({
             {name}
           </span>
         )}
-        {kind === "empty" && (
-          <span className="relative text-xs text-muted">{labels.viewEmpty}</span>
-        )}
+        {kind === "empty" && <span className="relative text-xs text-muted">{labels.viewEmpty}</span>}
         {/* The signing line, as on the pad. Decoration only. */}
         <div
           aria-hidden="true"

package/src/components/signed-amount.tsx

@@ -20,16 +20,7 @@ import { DEFAULT_SIGNED_AMOUNT_LABELS } from "./signed-amount-labels";
  * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.
  */
 export type TextTone =
-  | "default"
-  | "muted"
-  | "brand"
-  | "income"
-  | "expense"
-  | "net"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info";
+  "default" | "muted" | "brand" | "income" | "expense" | "net" | "success" | "warning" | "danger" | "info";
 
 const TEXT_TONE: Record<TextTone, string> = {
   default: "text-primary",
@@ -166,9 +157,7 @@ function signedToneClass(
 
 const ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;
 
-export interface SignedAmountProps
-  extends SignedFormatProps,
-    Omit<ComponentPropsWithRef<"span">, "children"> {
+export interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithRef<"span">, "children"> {
   value: number;
   /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */
   tone?: SignedAmountTone;
@@ -324,7 +313,10 @@ export function Delta({
       data-direction={dir}
       className={cn("relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums", className)}
     >
-      <span data-private={sensitive ? "" : undefined} className={cn("inline-flex items-center gap-0.5 font-medium", tone)}>
+      <span
+        data-private={sensitive ? "" : undefined}
+        className={cn("inline-flex items-center gap-0.5 font-medium", tone)}
+      >
         {arrow && <Icon className="size-[1em] shrink-0" aria-hidden />}
         {/* The figure at zero too, beside the flat dash (kastlan feedback #48). Before
             this a flat delta with an arrow drew the dash ALONE, as a StatTile does — so

package/src/components/skeleton.tsx

@@ -71,21 +71,10 @@ function SkeletonFill({ shape = "line", lines, className, ...rest }: Omit<Skelet
     return (
       <div {...rest} aria-hidden className={cn("flex flex-col gap-2", className)} data-skeleton="lines">
         {Array.from({ length: lines }, (_, i) => (
-          <div
-            key={i}
-            className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && "w-2/3")}
-            data-skeleton="line"
-          />
+          <div key={i} className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && "w-2/3")} data-skeleton="line" />
         ))}
       </div>
     );
   }
-  return (
-    <div
-      {...rest}
-      aria-hidden
-      data-skeleton={shape}
-      className={cn(SKELETON_CLASS, SHAPE[shape], className)}
-    />
-  );
+  return <div {...rest} aria-hidden data-skeleton={shape} className={cn(SKELETON_CLASS, SHAPE[shape], className)} />;
 }

package/src/components/slider.tsx

@@ -120,10 +120,11 @@ export interface SliderMark {
 }
 
 export interface SliderProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"
-  >,
+  extends
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"
+    >,
     FieldHelpProps {
   /** The value. On a log scale this is the real value, not the track position. */
   value: number;
@@ -235,8 +236,7 @@ export function Slider({
   // digits; it is not formatting, and `formatValue` is how to get a locale.
   const valueText = formatValue
     ? formatValue(value)
-    : (rest["aria-valuetext"] ??
-      (log || outOfRange ? String(Number(value.toPrecision(4))) : undefined));
+    : (rest["aria-valuetext"] ?? (log || outOfRange ? String(Number(value.toPrecision(4))) : undefined));
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const raw = Number(e.target.value);
@@ -280,21 +280,13 @@ export function Slider({
         // drops to a line of its own, still at the end, only when the two don't fit.
         <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
           {label !== undefined && (
-            <label
-              htmlFor={inputId}
-              className="min-w-0 select-none text-xs font-medium text-secondary"
-            >
+            <label htmlFor={inputId} className="min-w-0 select-none text-xs font-medium text-secondary">
               {label}
             </label>
           )}
           {labelHint !== undefined && <span className="flex shrink-0 items-center">{labelHint}</span>}
           {readout !== undefined && (
-            <span
-              className={cn(
-                "ms-auto max-w-full text-xs tabular-nums text-primary",
-                plainReadout && "select-none",
-              )}
-            >
+            <span className={cn("ms-auto max-w-full text-xs tabular-nums text-primary", plainReadout && "select-none")}>
               {readout}
             </span>
           )}
@@ -323,10 +315,7 @@ export function Slider({
         // `min`, not under the track's rounded end. Each tick is a zero-width column
         // centred on its point, which centres its label on it in either direction
         // without a `translate` that would need flipping for right-to-left.
-        <div
-          aria-hidden
-          className={cn("relative mx-2 -mt-1.5", MARKS_LARGE, hasMarkLabels ? "h-5" : "h-1.5")}
-        >
+        <div aria-hidden className={cn("relative mx-2 -mt-1.5", MARKS_LARGE, hasMarkLabels ? "h-5" : "h-1.5")}>
           {normalizedMarks.map((m) => (
             <span
               key={m.value}

package/src/components/sparkline.tsx

@@ -39,17 +39,7 @@ export { DEFAULT_SPARKLINE_LABELS };
  *    own value, a line or area takes the colour of its LAST value (where it ended up).
  */
 export type SparklineTone =
-  | "chart"
-  | "brand"
-  | "muted"
-  | "income"
-  | "expense"
-  | "net"
-  | "signed"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info";
+  "chart" | "brand" | "muted" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
 
 // `color`, not `stroke`/`fill`: every mark paints with `currentColor`, so one class
 // per element is enough and a signed bar chart needs no second lookup table.
@@ -70,8 +60,7 @@ const signedClass = (v: number) => (v < 0 ? TONE_CLASS.expense : TONE_CLASS.inco
 
 /** `children` is the marks and `width`/`height` are numbers here (or `fluid`), so
  *  those three are the sparkline's own; everything else lands on the `<svg>`. */
-export interface SparklineProps
-  extends Omit<ComponentPropsWithRef<"svg">, "children" | "width" | "height"> {
+export interface SparklineProps extends Omit<ComponentPropsWithRef<"svg">, "children" | "width" | "height"> {
   /** The series, oldest first. `null`/`undefined`/`NaN` is a GAP — the line breaks
    *  there rather than drawing a zero or bridging across the missing point. */
   data: ReadonlyArray<number | null | undefined>;

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";