@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/components/number-input.tsx

@@ -2,13 +2,7 @@ import { useEffect, useId, useMemo, useRef } from "react";
 import type { KeyboardEvent, ReactNode, Ref } from "react";
 import { CalculatorButton, type CalculatorButtonLabels } from "./calculator";
 import { NumberPadSheet, type NumberPadSheetLabels } from "./numpad-sheet";
-import {
-  FIELD_BASE,
-  FIELD_DISPLAY,
-  FIELD_INVALID,
-  FLOATING_INPUT_CLASS,
-  FloatingField,
-} from "./field-base";
+import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from "./field-base";
 // The data alone (0.35): not the picker, which this field does not render.
 import { CURRENCIES } from "../currencies";
 import { FieldCaption, LockedReason, mergeRefs, type DisabledReasonDisplay, type FieldHelpProps } from "./field-parts";
@@ -205,13 +199,7 @@ function decimalsOf(n: number): number {
  * binary noise goes: `0.1 × 3` is 0.30000000000000004, and `toFixed(1)` of it is
  * "0.3". Summing steps would accumulate that noise press by press instead.
  */
-export function stepNumber(
-  current: number | null,
-  count: number,
-  step: number,
-  min?: number,
-  max?: number,
-): number {
+export function stepNumber(current: number | null, count: number, step: number, min?: number, max?: number): number {
   const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));
   // Nothing to step from: land on the value nearest zero the bounds allow, rather
   // than on ±step — a room count with `min={1}` goes to 1, a rate to 0.
@@ -221,11 +209,7 @@ export function stepNumber(
   const nearest = Math.round(raw);
   // "On the grid" within float tolerance: (0.3 - 0) / 0.1 is 2.9999999999999996.
   const onGrid = Math.abs(raw - nearest) < 1e-9;
-  const k = onGrid
-    ? nearest + count
-    : count > 0
-      ? Math.ceil(raw) + count - 1
-      : Math.floor(raw) + count + 1;
+  const k = onGrid ? nearest + count : count > 0 ? Math.ceil(raw) + count - 1 : Math.floor(raw) + count + 1;
   const places = Math.min(Math.max(decimalsOf(step), decimalsOf(origin)), 20);
   return clamp(Number((origin + k * step).toFixed(places)));
 }

package/src/components/numpad-sheet.tsx

@@ -6,11 +6,7 @@ import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
 import { useDismissLayer } from "../hooks/use-dismiss";
 import { evaluateExpression, formatResult, sanitizeLive } from "../lib/calc";
-import {
-  DEFAULT_CALCULATOR_LABELS,
-  useKitLabels,
-  type CalculatorLabels,
-} from "../i18n/kit-labels";
+import { DEFAULT_CALCULATOR_LABELS, useKitLabels, type CalculatorLabels } from "../i18n/kit-labels";
 
 /**
  * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to
@@ -45,9 +41,7 @@ export interface NumberPadSheetLabels extends Partial<CalculatorLabels> {
   done?: string;
 }
 
-type PadKey =
-  | { kind: "ins"; label: string; ins: string; accent?: boolean; name?: PadKeyName }
-  | { kind: "back" };
+type PadKey = { kind: "ins"; label: string; ins: string; accent?: boolean; name?: PadKeyName } | { kind: "back" };
 
 /** The {@link CalculatorLabels} key naming a non-digit key; digits are their glyph. */
 type PadKeyName = "plus" | "minus" | "times" | "divide" | "decimal";
@@ -222,14 +216,16 @@ export function NumberPadSheet({
       {/* Header display: which field + the running expression and live result, so
           the value stays visible even when the sheet covers the field. */}
       <div className="flex items-end justify-between gap-3 px-2 pb-2">
-        {label != null && (
-          <span className="truncate pb-1 text-xs font-medium text-money-neutral">{label}</span>
-        )}
+        {label != null && <span className="truncate pb-1 text-xs font-medium text-money-neutral">{label}</span>}
         {/* At the logical end, opposite the label; the figures themselves stay
             left-to-right and right-aligned, like the desktop calculator's. */}
         <div className="ms-auto min-w-0">
-          <div dir="ltr" className="truncate text-right font-mono text-lg leading-tight text-primary">{value || "0"}</div>
-          <div dir="ltr" className="h-4 text-right font-mono text-xs text-money-neutral">{preview}</div>
+          <div dir="ltr" className="truncate text-right font-mono text-lg leading-tight text-primary">
+            {value || "0"}
+          </div>
+          <div dir="ltr" className="h-4 text-right font-mono text-xs text-money-neutral">
+            {preview}
+          </div>
         </div>
       </div>
 

package/src/components/one-time-code-input.tsx

@@ -2,13 +2,7 @@ import { useId, useState } from "react";
 import type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
 import { EndHintRow, FieldCaption, useFieldError, useFieldHint, type FieldHelpProps } from "./field-parts";
-import {
-  FIELD_BASE,
-  FIELD_INVALID,
-  FIELD_WRITABLE_LOOK,
-  FLOATING_INPUT_CLASS,
-  FloatingField,
-} from "./field-base";
+import { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from "./field-base";
 
 /**
  * The field for a verification code — the six digits an authenticator app shows, or the
@@ -57,10 +51,11 @@ import {
  * the error under that, both attached through `aria-describedby` after the caller's own.
  */
 export interface OneTimeCodeInputProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "autoComplete" | "maxLength" | "pattern"
-  >,
+  extends
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "autoComplete" | "maxLength" | "pattern"
+    >,
     FieldHelpProps {
   /** The digits so far — a string, so leading zeros survive. */
   value: string;

package/src/components/page-contents.tsx

@@ -200,12 +200,7 @@ export function PageContents({
 
   if (variant === "disclosure") {
     return (
-      <details
-        className={cn(
-          "group rounded-md border border-subtle bg-surface",
-          className,
-        )}
-      >
+      <details className={cn("group rounded-md border border-subtle bg-surface", className)}>
         <summary className="flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-secondary [&::-webkit-details-marker]:hidden">
           {l.title}
           <ChevronDown
@@ -222,9 +217,7 @@ export function PageContents({
 
   return (
     <nav {...rest} aria-label={l.title} className={className}>
-      <p className="mb-2 text-caption font-semibold uppercase tracking-wide text-muted">
-        {l.title}
-      </p>
+      <p className="mb-2 text-caption font-semibold uppercase tracking-wide text-muted">{l.title}</p>
       {list}
     </nav>
   );

package/src/components/page-header.tsx

@@ -39,8 +39,7 @@ export type PageHeaderMobileLayout = "stacked" | "inline";
  * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and
  * every wider screen keep their row; `inline` is for actions known to fit, and stays.
  */
-const STACK_ACTIONS_AT_LARGE =
-  "large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full";
+const STACK_ACTIONS_AT_LARGE = "large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full";
 
 const ROW: Record<PageHeaderMobileLayout, string> = {
   stacked: "flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
@@ -247,7 +246,9 @@ export function PageHeader({
   return (
     <div {...rest} className={cn("flex min-w-0 flex-col gap-2", className)}>
       {breadcrumbs != null && (
-        <PageHeaderTrailContext.Provider value={titled ? TITLED : UNTITLED}>{breadcrumbs}</PageHeaderTrailContext.Provider>
+        <PageHeaderTrailContext.Provider value={titled ? TITLED : UNTITLED}>
+          {breadcrumbs}
+        </PageHeaderTrailContext.Provider>
       )}
       {/* With a second group, `inline` wraps so that group's full-width basis puts it
           on a row of its own on a phone (`stacked` is a column there already, and a
@@ -264,13 +265,7 @@ export function PageHeader({
       >
         <div ref={titleRef} className={cn("flex-1", keepsWords ? "min-w-min" : "min-w-0")}>
           {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, "mb-1")}>{eyebrow}</p>}
-          <Heading
-            className={cn(
-              truncateTitle ? "truncate-until-large" : "break-words",
-              "text-primary",
-              TITLE[size],
-            )}
-          >
+          <Heading className={cn(truncateTitle ? "truncate-until-large" : "break-words", "text-primary", TITLE[size])}>
             {title}
           </Heading>
           {description != null && <p className="mt-1 text-sm text-muted">{description}</p>}

package/src/components/password-strength-labels.ts

@@ -18,6 +18,5 @@ export const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels = {
   optional: (rule) => `${rule} (optional)`,
   met: "Met:",
   notMet: "Not met:",
-  tooLong: (maxBytes) =>
-    `At most ${maxBytes} characters (accents and emoji count for more than one).`,
+  tooLong: (maxBytes) => `At most ${maxBytes} characters (accents and emoji count for more than one).`,
 };

package/src/components/password-strength.tsx

@@ -55,7 +55,10 @@ export interface PasswordScoreOptions {
 const DEFAULT_MIN_LENGTH = 8;
 
 /** The checklist's rules, evaluated. Pure; the order is the order they are shown in. */
-export function passwordRules(value: string, { minLength = DEFAULT_MIN_LENGTH }: PasswordScoreOptions = {}): PasswordRule[] {
+export function passwordRules(
+  value: string,
+  { minLength = DEFAULT_MIN_LENGTH }: PasswordScoreOptions = {},
+): PasswordRule[] {
   return [
     // Code points, not UTF-16 units: an emoji is one character to the person typing it.
     { id: "length", met: [...value].length >= minLength, required: true },
@@ -208,10 +211,7 @@ export function PasswordStrengthMeter({
               {[1, 2, 3, 4].map((step) => (
                 <div
                   key={step}
-                  className={cn(
-                    "h-1 flex-1 rounded-full",
-                    step <= score ? FILL[score] : "bg-[var(--border)]",
-                  )}
+                  className={cn("h-1 flex-1 rounded-full", step <= score ? FILL[score] : "bg-[var(--border)]")}
                 />
               ))}
             </div>
@@ -223,10 +223,7 @@ export function PasswordStrengthMeter({
                 <li
                   key={r.id}
                   // `relative`: the sr-only state needs a local containing block.
-                  className={cn(
-                    "relative",
-                    r.met ? "text-success" : "text-muted",
-                  )}
+                  className={cn("relative", r.met ? "text-success" : "text-muted")}
                   data-met={r.met}
                 >
                   <span className="sr-only">{r.met ? labels.met : labels.notMet} </span>

package/src/components/phone-input.tsx

@@ -2,14 +2,7 @@ import { useState } from "react";
 import type { ChangeEvent, FocusEvent } from "react";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import {
-  PHONE_COUNTRIES,
-  PHONE_DIAL_CODES,
-  formatNationalPhone,
-  formatPhone,
-  isE164,
-  parsePhone,
-} from "../lib/phone";
+import { PHONE_COUNTRIES, PHONE_DIAL_CODES, formatNationalPhone, formatPhone, isE164, parsePhone } from "../lib/phone";
 import type { ParsedPhone, PhoneCountry, PhoneCountryCode } from "../lib/phone";
 import { useFieldMessages } from "./field-parts";
 import { Input, type InputProps } from "./input";
@@ -237,11 +230,7 @@ export function PhoneInput({
   const named = typeof label === "string" && label !== "";
 
   return (
-    <div
-      className={className}
-      role={named ? "group" : undefined}
-      aria-label={named ? label : undefined}
-    >
+    <div className={className} role={named ? "group" : undefined} aria-label={named ? label : undefined}>
       {/* On a phone at Large the number takes a line of its own under the country (0.32.1,
           the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 "nothing
           truncates"): the 7rem select is 168 px at 150 %, and on a 360 px phone it left

package/src/components/picker-sheet.tsx

@@ -20,8 +20,7 @@ import { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from "../i18n/kit-labels";
  * tooltip string, and `onClose` is "the sheet was dismissed", not the DOM's
  * `<dialog>` close event. Everything else a caller can pass reaches the sheet.
  */
-export interface PickerSheetProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "title" | "onClose"> {
+export interface PickerSheetProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "onClose"> {
   open: boolean;
   onClose: () => void;
   /** The field's own label — a sheet that fills the screen has to say what it is
@@ -270,9 +269,7 @@ export function PickerSheet({
       className={cn("fixed inset-0 z-50 flex flex-col bg-surface outline-none", className)}
     >
       <div className="flex items-center gap-2 border-b border-subtle px-3 py-2">
-        <span className="min-w-0 flex-1 truncate text-sm font-semibold text-primary">
-          {title}
-        </span>
+        <span className="min-w-0 flex-1 truncate text-sm font-semibold text-primary">{title}</span>
         <button
           type="button"
           aria-label={labels.close}

package/src/components/pie-chart.tsx

@@ -210,8 +210,9 @@ export function PieChart({
   const { drawable, drawn, total, pieData } = useMemo(() => {
     const drawable = data
       .map((slice, i) => ({ slice, value: slice.value, color: slice.color ?? paletteFor(i) }))
-      .filter((d): d is { slice: PieChartSlice; value: number; color: string } =>
-        typeof d.value === "number" && Number.isFinite(d.value) && d.value > 0,
+      .filter(
+        (d): d is { slice: PieChartSlice; value: number; color: string } =>
+          typeof d.value === "number" && Number.isFinite(d.value) && d.value > 0,
       );
     const shown = drawable.filter((d) => !hidden.has(d.slice.key));
     const total = shown.reduce((acc, d) => acc + d.value, 0);
@@ -404,10 +405,7 @@ export function PieChart({
   }));
 
   const emptyBox = (
-    <div
-      className={cn("flex items-center justify-center text-sm text-muted", box.className)}
-      style={box.style}
-    >
+    <div className={cn("flex items-center justify-center text-sm text-muted", box.className)} style={box.style}>
       {empty ?? labels.empty}
     </div>
   );
@@ -439,9 +437,7 @@ export function PieChart({
                 content={
                   <Content
                     hideLabel
-                    valueFormatter={(v) =>
-                      `${formatValue(v)} (${formatShare(total > 0 ? v / total : 0)})`
-                    }
+                    valueFormatter={(v) => `${formatValue(v)} (${formatShare(total > 0 ? v / total : 0)})`}
                   />
                 }
               />
@@ -466,9 +462,7 @@ export function PieChart({
                 {focusedSlice ? formatValue(focusedSlice.value) : (centerValue ?? formatValue(total))}
               </span>
               {focusedSlice && (
-                <span className="text-xs tabular-nums text-muted">
-                  {formatShare(focusedSlice.share)}
-                </span>
+                <span className="text-xs tabular-nums text-muted">{formatShare(focusedSlice.share)}</span>
               )}
             </div>
           )}

package/src/components/popover.tsx

@@ -194,7 +194,8 @@ export function Popover({
   return (
     <>
       {trigger({ open, toggle, ref: triggerRef })}
-      {open && pos &&
+      {open &&
+        pos &&
         createPortal(
           /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the
              dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for

package/src/components/progress-bar.tsx

@@ -25,15 +25,7 @@ export { DEFAULT_PROGRESS_BAR_LABELS };
  * "careful" about a figure that is neither. keksdose's report meters (food-group-card,
  * drilldown-modal) sit beside amounts that are already in the money colours.
  */
-export type ProgressBarTone =
-  | "brand"
-  | "neutral"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info"
-  | "income"
-  | "expense";
+export type ProgressBarTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info" | "income" | "expense";
 /**
  * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a
  * letter because the letters are taken in order — an `xs` at 6px would be THICKER than
@@ -340,8 +332,7 @@ export function ProgressBar({
           : text;
       })
     : [];
-  const current =
-    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);
+  const current = partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);
   const indeterminate = current === undefined;
   const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));
   const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;
@@ -352,14 +343,11 @@ export function ProgressBar({
       ? new Intl.ListFormat(kitLocale, { style: "short", type: "unit" }).format(partTexts)
       : valueText;
 
-  const over =
-    overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;
+  const over = overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;
   const overageNode =
     over > 0 ? (
       <p id={`${hintId}-over`} data-part="overage" data-private={priv} className="mt-1 text-xs text-danger">
-        {typeof overage === "function"
-          ? overage(over)
-          : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}
+        {typeof overage === "function" ? overage(over) : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}
       </p>
     ) : null;
   const describedBy =
@@ -380,7 +368,12 @@ export function ProgressBar({
           {showValue && valueText !== undefined && (
             // Hidden: the same words are the bar's aria-valuetext, and reading them
             // twice in a row is noise.
-            <span aria-hidden data-part="value" data-private={priv} className="ms-auto shrink-0 tabular-nums text-muted">
+            <span
+              aria-hidden
+              data-part="value"
+              data-private={priv}
+              className="ms-auto shrink-0 tabular-nums text-muted"
+            >
               {valueText}
             </span>
           )}
@@ -443,7 +436,10 @@ export function ProgressBar({
             data-part="fill"
             // Block flow starts at the inline start, so a plain width fills from the
             // right under `dir="rtl"` with nothing extra.
-            className={cn("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", FILL[tone])}
+            className={cn(
+              "h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none",
+              FILL[tone],
+            )}
             style={{ width: `${fraction * 100}%` }}
           />
         )}
@@ -454,10 +450,7 @@ export function ProgressBar({
             <li key={seg.key ?? i} className="flex items-center gap-2">
               <span
                 aria-hidden
-                className={cn(
-                  "size-2.5 shrink-0 rounded-sm",
-                  fills[i],
-                )}
+                className={cn("size-2.5 shrink-0 rounded-sm", fills[i])}
                 style={{ backgroundColor: seg.className ? undefined : seg.color }}
               />
               {seg.label != null && (
@@ -470,9 +463,7 @@ export function ProgressBar({
                 data-private={priv}
                 className={cn(
                   "ms-auto shrink-0 text-xs tabular-nums",
-                  toneTextClass(
-                    (typeof legendTone === "function" ? legendTone(seg, i) : legendTone) ?? "muted",
-                  ),
+                  toneTextClass((typeof legendTone === "function" ? legendTone(seg, i) : legendTone) ?? "muted"),
                 )}
               >
                 {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}

package/src/components/qr-code.tsx

@@ -32,14 +32,7 @@ export interface QrCodeProps extends Omit<ComponentPropsWithRef<"svg">, "childre
  * A value too long for any QR version (≈2.9 kB) renders nothing rather than throwing
  * in render.
  */
-export function QrCode({
-  value,
-  label,
-  errorCorrection = "M",
-  margin = 4,
-  className,
-  ...rest
-}: QrCodeProps) {
+export function QrCode({ value, label, errorCorrection = "M", margin = 4, className, ...rest }: QrCodeProps) {
   const path = useMemo(() => {
     try {
       const { modules, size } = encodeQr(value, { errorCorrection });
@@ -47,7 +40,7 @@ export function QrCode({
       // commands rather than one <rect> per module.
       let d = "";
       for (let y = 0; y < size; y++) {
-        for (let x = 0; x < size; ) {
+        for (let x = 0; x < size;) {
           if (!modules[y][x]) {
             x++;
             continue;

package/src/components/row-actions.tsx

@@ -471,7 +471,15 @@ function useActionHref(action: RowAction): string | undefined {
 }
 
 /** One entry of the "⋯" menu: the words, as a link for an `href`, else a button. */
-function MenuAction({ action, close, run }: { action: RowAction; close: () => void; run: (action: RowAction) => void }) {
+function MenuAction({
+  action,
+  close,
+  run,
+}: {
+  action: RowAction;
+  close: () => void;
+  run: (action: RowAction) => void;
+}) {
   const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
   const glyphTone = action.tone === undefined ? undefined : MENU_GLYPH_TONE[action.tone];

package/src/components/search-field.tsx

@@ -6,11 +6,10 @@ import { FIELD_BASE, FIELD_TOUCH_TEXT } from "./field-base";
 import { mergeRefs } from "./field-parts";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 
-interface SearchFieldOwnProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    "value" | "onChange" | "type" | "aria-label"
-  > {
+interface SearchFieldOwnProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type" | "aria-label"
+> {
   value: string;
   /** The typed text. Emitted as a plain string, not an event: every caller of the
    *  four this replaced wanted the string, and one of them held it in a URL param

package/src/components/select.tsx

@@ -157,9 +157,7 @@ export function Select(props: SelectProps) {
   // account type became read-only and still looked exactly like a picker). A locked
   // one has no menu either.
   const chevron =
-    rest.disabled || listBox || locked ? null : (
-      <FieldChevron className={small ? "end-1.5 size-3.5" : undefined} />
-    );
+    rest.disabled || listBox || locked ? null : <FieldChevron className={small ? "end-1.5 size-3.5" : undefined} />;
   // `pe-9` is the room the chevron takes; a list box has none to make room for.
   //
   // A list box's height is `size` rows plus its padding, but its rows are clipped at
@@ -263,13 +261,7 @@ export function Select(props: SelectProps) {
   return (
     <FieldGroup errorEl={below} reserve={reserve}>
       {withReason(
-        <FloatingField
-          className={boxClass}
-          htmlFor={fieldId}
-          label={label}
-          staticLabel
-          hint={hint}
-        >
+        <FloatingField className={boxClass} htmlFor={fieldId} label={label} staticLabel hint={hint}>
           <select
             ref={ref}
             id={fieldId}

package/src/components/separator.tsx

@@ -27,11 +27,7 @@ export function Separator({ orientation = "horizontal", decorative = false, clas
       role={decorative ? "none" : "separator"}
       aria-orientation={!decorative && vertical ? "vertical" : undefined}
       data-orientation={orientation}
-      className={cn(
-        "shrink-0 bg-[var(--border)]",
-        vertical ? "w-px self-stretch" : "h-px w-full",
-        className,
-      )}
+      className={cn("shrink-0 bg-[var(--border)]", vertical ? "w-px self-stretch" : "h-px w-full", className)}
     />
   );
 }

package/src/components/series-chart-axes.ts

@@ -59,7 +59,10 @@ export function tiltedTickBand(labels: readonly string[], angle: number, scale =
   const rad = (Math.abs(angle) * Math.PI) / 180;
   const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;
   const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;
-  return Math.min(Math.round(MAX_TILTED_TICK_BAND * scale), Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)));
+  return Math.min(
+    Math.round(MAX_TILTED_TICK_BAND * scale),
+    Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)),
+  );
 }
 
 /** The width the ticks of a y axis get when a caller does not say, in px at Normal. */
@@ -201,10 +204,7 @@ export function anchoredBand(extent: readonly [number, number] | undefined): [nu
  * it in its neighbour's colour on each click. Resolving the colours on the full list
  * and filtering after keeps each series in the colour its legend entry shows.
  */
-export function visibleSeries(
-  series: readonly SeriesChartSeries[],
-  hidden: ReadonlySet<string>,
-): SeriesChartSeries[] {
+export function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[] {
   return series
     .map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) }))
     .filter((entry) => !hidden.has(entry.key));

package/src/components/series-chart-budget.ts

@@ -59,10 +59,7 @@ const sideOf = (axis: BudgetAxis) => axis.orientation ?? "left";
  * stays), then the rest in declaration order, until the cap. Per side, that is simply the
  * first `left` left-hand axes and the first `right` right-hand ones.
  */
-export function budgetedAxes(
-  axes: readonly BudgetAxis[],
-  budget: SeriesChartAxisBudget | undefined,
-): string[] {
+export function budgetedAxes(axes: readonly BudgetAxis[], budget: SeriesChartAxisBudget | undefined): string[] {
   if (budget === undefined) return [];
   const visible = axes.filter((axis) => !axis.hide);
   if (typeof budget === "number") {

package/src/components/series-chart-ticks.ts

@@ -90,10 +90,7 @@ export function integerTicks(
  * third to ninth month. A tick belongs on every whole slot inside it, and on nothing in
  * between: there is no month 2.5. Recharts' `minTickGap` thins them where they crowd.
  */
-export function categoryTicks(
-  domain: readonly [number, number] | undefined,
-  count: number,
-): number[] | undefined {
+export function categoryTicks(domain: readonly [number, number] | undefined, count: number): number[] | undefined {
   if (!domain || !(count > 0)) return undefined;
   const first = Math.max(0, Math.ceil(domain[0] - 1e-6));
   const last = Math.min(count - 1, Math.floor(domain[1] + 1e-6));