@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/components/mini-calendar.tsx

@@ -6,14 +6,7 @@ import { hasContent } from "../lib/presence";
 import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring";
 import { horizontalStep } from "../lib/direction";
 import { useAnnounce } from "../hooks/use-announce";
-import {
-  addMonthsClamped,
-  localeWeekStart,
-  monthKey,
-  parseIsoDate,
-  sameYmd,
-  toLocalIso,
-} from "../lib/dates";
+import { addMonthsClamped, localeWeekStart, monthKey, parseIsoDate, sameYmd, toLocalIso } from "../lib/dates";
 import { useKitLabels, useKitLocale, useKitWeekStart, type LabelOverride } from "../i18n/kit-labels";
 import { DEFAULT_MINI_CALENDAR_LABELS } from "./mini-calendar-labels";
 
@@ -514,41 +507,39 @@ export function MiniCalendar({
           {monthLabel}
         </div>
       ) : (
-      <div className={cn("flex items-center justify-between", lg ? "pb-2" : "pb-1")}>
-        <button
-          type="button"
-          onClick={() => moveMonth(-1)}
-          aria-label={labels.previousMonth}
-          className="rounded p-1 text-muted hover:bg-hover"
-        >
-          {/* Mirrored in RTL: "previous" points to the reading START, which is right. */}
-          <ChevronLeft className="size-4 rtl:-scale-x-100" aria-hidden />
-        </button>
-        {/* Named by this element rather than by a string of its own, and `aria-live`
+        <div className={cn("flex items-center justify-between", lg ? "pb-2" : "pb-1")}>
+          <button
+            type="button"
+            onClick={() => moveMonth(-1)}
+            aria-label={labels.previousMonth}
+            className="rounded p-1 text-muted hover:bg-hover"
+          >
+            {/* Mirrored in RTL: "previous" points to the reading START, which is right. */}
+            <ChevronLeft className="size-4 rtl:-scale-x-100" aria-hidden />
+          </button>
+          {/* Named by this element rather than by a string of its own, and `aria-live`
             so paging months says which month you have landed on — the caption is the
             only thing on screen that changes when the grid moves, and the user
             pressing the arrow is not inside the grid to hear the cells change. */}
-        <div
-          id={monthId}
-          aria-live="polite"
-          className={cn(
-            "capitalize",
-            lg
-              ? "text-base font-semibold text-primary"
-              : "text-xs font-medium text-secondary",
-          )}
-        >
-          {monthLabel}
+          <div
+            id={monthId}
+            aria-live="polite"
+            className={cn(
+              "capitalize",
+              lg ? "text-base font-semibold text-primary" : "text-xs font-medium text-secondary",
+            )}
+          >
+            {monthLabel}
+          </div>
+          <button
+            type="button"
+            onClick={() => moveMonth(1)}
+            aria-label={labels.nextMonth}
+            className="rounded p-1 text-muted hover:bg-hover"
+          >
+            <ChevronRight className="size-4 rtl:-scale-x-100" aria-hidden />
+          </button>
         </div>
-        <button
-          type="button"
-          onClick={() => moveMonth(1)}
-          aria-label={labels.nextMonth}
-          className="rounded p-1 text-muted hover:bg-hover"
-        >
-          <ChevronRight className="size-4 rtl:-scale-x-100" aria-hidden />
-        </button>
-      </div>
       )}
       <div
         ref={gridRef}
@@ -559,27 +550,18 @@ export function MiniCalendar({
           "grid",
           // The month view is RULED: a 1px gap over a border-coloured ground draws the
           // lines between the cells, the way a wall calendar does.
-          lg
-            ? "gap-px overflow-hidden rounded-lg border border-subtle bg-[var(--border)]"
-            : "gap-y-0.5",
+          lg ? "gap-px overflow-hidden rounded-lg border border-subtle bg-[var(--border)]" : "gap-y-0.5",
         )}
       >
         <div
           role="row"
           className={cn(
             "grid grid-cols-7 text-center font-medium",
-            lg
-              ? "gap-px text-xs text-muted"
-              : "text-micro uppercase text-placeholder",
+            lg ? "gap-px text-xs text-muted" : "text-micro uppercase text-placeholder",
           )}
         >
           {weekdayLabels.map((w, i) => (
-            <div
-              key={i}
-              role="columnheader"
-              aria-label={w.long}
-              className={lg ? "bg-surface py-2" : "py-0.5"}
-            >
+            <div key={i} role="columnheader" aria-label={w.long} className={lg ? "bg-surface py-2" : "py-0.5"}>
               {lg ? w.short : w.narrow}
             </div>
           ))}
@@ -592,13 +574,7 @@ export function MiniCalendar({
               // The padding cells still have to BE cells, or the rows are ragged and
               // a screen reader's "column 3" stops meaning Wednesday.
               if (!d) {
-                return (
-                  <div
-                    key={di}
-                    role="gridcell"
-                    className={lg ? cn(LG_CELL_HEIGHT, "bg-surface-2") : "h-8"}
-                  />
-                );
+                return <div key={di} role="gridcell" className={lg ? cn(LG_CELL_HEIGHT, "bg-surface-2") : "h-8"} />;
               }
               const iso = toLocalIso(d);
               const disabled = isDisabled(d);
@@ -678,8 +654,7 @@ export function MiniCalendar({
               // or the month breaks it. Only when both ends exist and differ — a lone
               // start is a dot, not a band of one. The month view tints whole cells
               // instead, so it has no band.
-              const banded =
-                !lg && hasBand && !disabled && (isStart || isEnd || isInRange);
+              const banded = !lg && hasBand && !disabled && (isStart || isEnd || isInRange);
               const lastOfMonth = d.getDate() === daysInMonth(d);
               const band = banded
                 ? cn(
@@ -695,109 +670,104 @@ export function MiniCalendar({
                 <div
                   key={di}
                   role="none"
-                  className={cn(
-                    "relative flex",
-                    lg ? "min-w-0" : "h-8 items-center justify-center",
-                  )}
-                >
-                {band && <span aria-hidden className={band} />}
-                <button
-                  key={di}
-                  type="button"
-                  role="gridcell"
-                  data-iso={iso}
-                  // The roving tabindex: ONE tab stop for the whole month. Every day
-                  // being tabbable meant 31 stops between a date field and the next
-                  // control, which is the same reason the pattern exists.
-                  tabIndex={isActive ? 0 : -1}
-                  aria-label={labels.day(formatDay(d))}
-                  // The custom content is the day's DESCRIPTION: `aria-label` replaces
-                  // the button's text as its name, so without this link a screen
-                  // reader would hear the date and never the events drawn under it.
-                  aria-describedby={filled ? contentId : undefined}
-                  aria-selected={isSelected}
-                  aria-disabled={disabled || undefined}
-                  aria-current={isToday ? "date" : undefined}
-                  onClick={() => handleClick(d)}
-                  onKeyDown={onDayKeyDown}
-                  className={
-                    lg
-                      ? cn(
-                          "flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors",
-                          LG_CELL_HEIGHT,
-                          FOCUS_RING,
-                        "focus-visible:ring-inset",
-                          disabled
-                            ? "cursor-not-allowed bg-surface text-placeholder"
-                            : isSelected
-                              ? "bg-brand-soft text-primary hover:bg-brand-soft-hover"
-                              : "bg-surface text-primary hover:bg-hover",
-                        )
-                      : cn(
-                    "relative size-8 rounded-full text-xs tabular-nums transition-colors",
-                    // A grid you can walk with the keyboard needs to show where the
-                    // keyboard IS. Inset because the cells sit half a pixel apart and
-                    // an outset ring would be drawn over by its neighbours; the
-                    // colour flips on the selected days for the reason the numpad's
-                    // "Done" key does — a --brand ring on a --brand fill is a ring
-                    // that exists only in the DOM.
-                    FOCUS_RING_WIDTH,
-                    "focus-visible:outline-none focus-visible:ring-inset",
-                    isStart || isEnd
-                      ? "focus-visible:ring-brand-contrast"
-                      : "focus-visible:ring-brand",
-                    disabled
-                      ? "cursor-not-allowed text-placeholder"
-                      // The two selected states are the BRAND, not a fixed sky: the endpoints
-                      // are the solid fill and the days between them its soft tint. Hardcoding
-                      // them left an app that changed `--brand` with a calendar in the old
-                      // colour (docs/module-audit-2026-09-22.md §theming). Both token pairs
-                      // flip light/dark themselves, so there is no `dark:` partner to carry —
-                      // one would override the token and bring the hardcoded hue back.
-                      : isStart || isEnd
-                        ? "bg-brand text-brand-contrast hover:bg-brand-hover"
-                        : isInRange
-                          ? "font-medium text-brand-muted hover:bg-brand-soft-hover"
-                          : "text-primary hover:bg-hover",
-                    isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-strong",
-                  )
-                  }
+                  className={cn("relative flex", lg ? "min-w-0" : "h-8 items-center justify-center")}
                 >
-                  {lg ? (
-                    <>
-                      <span
-                        className={cn(
-                          "inline-flex size-6 shrink-0 items-center justify-center self-start rounded-full tabular-nums",
-                          isStart || isEnd
-                            ? "bg-brand font-semibold text-brand-contrast"
-                            : isToday && !disabled
-                              ? "font-semibold text-brand ring-1 ring-inset ring-brand"
-                              : isInRange && "font-medium text-brand-muted",
-                        )}
-                      >
-                        {label}
-                      </span>
-                      {filled && (
-                        <span id={contentId} className="flex min-w-0 flex-col gap-0.5">
-                          {content}
-                        </span>
-                      )}
-                    </>
-                  ) : (
-                    <>
-                      {label}
-                      {/* Under the number, inside the circle: room for a dot or two. */}
-                      {filled && (
+                  {band && <span aria-hidden className={band} />}
+                  <button
+                    key={di}
+                    type="button"
+                    role="gridcell"
+                    data-iso={iso}
+                    // The roving tabindex: ONE tab stop for the whole month. Every day
+                    // being tabbable meant 31 stops between a date field and the next
+                    // control, which is the same reason the pattern exists.
+                    tabIndex={isActive ? 0 : -1}
+                    aria-label={labels.day(formatDay(d))}
+                    // The custom content is the day's DESCRIPTION: `aria-label` replaces
+                    // the button's text as its name, so without this link a screen
+                    // reader would hear the date and never the events drawn under it.
+                    aria-describedby={filled ? contentId : undefined}
+                    aria-selected={isSelected}
+                    aria-disabled={disabled || undefined}
+                    aria-current={isToday ? "date" : undefined}
+                    onClick={() => handleClick(d)}
+                    onKeyDown={onDayKeyDown}
+                    className={
+                      lg
+                        ? cn(
+                            "flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors",
+                            LG_CELL_HEIGHT,
+                            FOCUS_RING,
+                            "focus-visible:ring-inset",
+                            disabled
+                              ? "cursor-not-allowed bg-surface text-placeholder"
+                              : isSelected
+                                ? "bg-brand-soft text-primary hover:bg-brand-soft-hover"
+                                : "bg-surface text-primary hover:bg-hover",
+                          )
+                        : cn(
+                            "relative size-8 rounded-full text-xs tabular-nums transition-colors",
+                            // A grid you can walk with the keyboard needs to show where the
+                            // keyboard IS. Inset because the cells sit half a pixel apart and
+                            // an outset ring would be drawn over by its neighbours; the
+                            // colour flips on the selected days for the reason the numpad's
+                            // "Done" key does — a --brand ring on a --brand fill is a ring
+                            // that exists only in the DOM.
+                            FOCUS_RING_WIDTH,
+                            "focus-visible:outline-none focus-visible:ring-inset",
+                            isStart || isEnd ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
+                            disabled
+                              ? "cursor-not-allowed text-placeholder"
+                              : // The two selected states are the BRAND, not a fixed sky: the endpoints
+                                // are the solid fill and the days between them its soft tint. Hardcoding
+                                // them left an app that changed `--brand` with a calendar in the old
+                                // colour (docs/module-audit-2026-09-22.md §theming). Both token pairs
+                                // flip light/dark themselves, so there is no `dark:` partner to carry —
+                                // one would override the token and bring the hardcoded hue back.
+                                isStart || isEnd
+                                ? "bg-brand text-brand-contrast hover:bg-brand-hover"
+                                : isInRange
+                                  ? "font-medium text-brand-muted hover:bg-brand-soft-hover"
+                                  : "text-primary hover:bg-hover",
+                            isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-strong",
+                          )
+                    }
+                  >
+                    {lg ? (
+                      <>
                         <span
-                          id={contentId}
-                          className="pointer-events-none absolute inset-x-0 bottom-0.5 flex justify-center gap-px leading-none"
+                          className={cn(
+                            "inline-flex size-6 shrink-0 items-center justify-center self-start rounded-full tabular-nums",
+                            isStart || isEnd
+                              ? "bg-brand font-semibold text-brand-contrast"
+                              : isToday && !disabled
+                                ? "font-semibold text-brand ring-1 ring-inset ring-brand"
+                                : isInRange && "font-medium text-brand-muted",
+                          )}
                         >
-                          {content}
+                          {label}
                         </span>
-                      )}
-                    </>
-                  )}
-                </button>
+                        {filled && (
+                          <span id={contentId} className="flex min-w-0 flex-col gap-0.5">
+                            {content}
+                          </span>
+                        )}
+                      </>
+                    ) : (
+                      <>
+                        {label}
+                        {/* Under the number, inside the circle: room for a dot or two. */}
+                        {filled && (
+                          <span
+                            id={contentId}
+                            className="pointer-events-none absolute inset-x-0 bottom-0.5 flex justify-center gap-px leading-none"
+                          >
+                            {content}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </button>
                 </div>
               );
             })}

package/src/components/money-field.tsx

@@ -4,8 +4,10 @@ import { useMoneyDraft } from "./money-draft";
 
 type AmountInputProps = ComponentProps<typeof AmountInput>;
 
-export interface MoneyFieldProps
-  extends Omit<AmountInputProps, "value" | "onChange" | "onCommit" | "negative" | "onNegativeChange" | "ref"> {
+export interface MoneyFieldProps extends Omit<
+  AmountInputProps,
+  "value" | "onChange" | "onCommit" | "negative" | "onNegativeChange" | "ref"
+> {
   /** The amount, or `null` for an empty field. */
   value: number | null;
   /**

package/src/components/month-picker.tsx

@@ -13,7 +13,14 @@ import { splitTriggerAria } from "./trigger-aria";
 import type { TriggerAria } from "./trigger-aria";
 import { useKitDateFormatter, useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { hasContent } from "../lib/presence";
-import { FieldBox, FieldLabelLine, LABEL_ABOVE_BOX, mergeRefs, useFieldMessages, type FieldHelpProps } from "./field-parts";
+import {
+  FieldBox,
+  FieldLabelLine,
+  LABEL_ABOVE_BOX,
+  mergeRefs,
+  useFieldMessages,
+  type FieldHelpProps,
+} from "./field-parts";
 import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker-labels";
 
 /**
@@ -381,10 +388,7 @@ function MonthFieldTrigger({
           "Septiembre De 2026". It wraps from Large up, as DatePicker's value does
           (`truncate-until-large`, text size §10.17; round 0.34 T1: the sweep read
           "Choose a mo…" at 360 px / Extra large). */}
-      <span
-        id={valueId}
-        className={cn("truncate-until-large", !hasValue && "text-placeholder")}
-      >
+      <span id={valueId} className={cn("truncate-until-large", !hasValue && "text-placeholder")}>
         {triggerText || " "}
       </span>
     </button>
@@ -425,8 +429,7 @@ function MonthGrid({
   currentKey: string;
   labels: MonthPickerLabels;
 }) {
-  const outOfBounds = (key: string) =>
-    Boolean((minKey && key < minKey) || (maxKey && key > maxKey));
+  const outOfBounds = (key: string) => Boolean((minKey && key < minKey) || (maxKey && key > maxKey));
 
   // The month holding the tab order, and with it the year on screen — one piece of
   // state, as in MiniCalendar, so the two cannot disagree. Opens on the value, or on
@@ -448,9 +451,7 @@ function MonthGrid({
     return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2000, i, 1)));
   }, [locale]);
   const longName = useMemo(() => new Intl.DateTimeFormat(locale, MONTH_NAME_FORMAT), [locale]);
-  const yearCaption = new Intl.DateTimeFormat(locale, { year: "numeric" }).format(
-    firstOf({ year, month: 1 }),
-  );
+  const yearCaption = new Intl.DateTimeFormat(locale, { year: "numeric" }).format(firstOf({ year, month: 1 }));
 
   // A month whose cell must take focus after the next commit. Arrowing across a year
   // boundary re-labels the same twelve buttons, so the one to focus is a DIFFERENT
@@ -536,11 +537,7 @@ function MonthGrid({
         </button>
         {/* Names the grid, and `aria-live` so stepping a year says which one you are
             on — the user pressing the arrow is not inside the grid to hear it change. */}
-        <div
-          id={captionId}
-          aria-live="polite"
-          className="text-sm font-semibold tabular-nums text-primary"
-        >
+        <div id={captionId} aria-live="polite" className="text-sm font-semibold tabular-nums text-primary">
           {yearCaption}
         </div>
         <button
@@ -585,9 +582,7 @@ function MonthGrid({
                     FOCUS_RING_WIDTH,
                     "focus-visible:outline-none focus-visible:ring-inset",
                     // A --brand ring on a --brand fill exists only in the DOM.
-                    selected && !disabled
-                      ? "focus-visible:ring-brand-contrast"
-                      : "focus-visible:ring-brand",
+                    selected && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
                     disabled
                       ? "cursor-not-allowed text-placeholder"
                       : selected
@@ -776,9 +771,7 @@ function YearGrid({
                     "rounded px-2 py-1.5 text-sm tabular-nums transition-colors",
                     FOCUS_RING_WIDTH,
                     "focus-visible:outline-none focus-visible:ring-inset",
-                    selected && !disabled
-                      ? "focus-visible:ring-brand-contrast"
-                      : "focus-visible:ring-brand",
+                    selected && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
                     disabled
                       ? "cursor-not-allowed text-placeholder"
                       : selected

package/src/components/multi-entity-combobox.tsx

@@ -3,19 +3,8 @@ import { X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { FieldChevron, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./field-base";
 import { FieldLabel } from "./field-parts";
-import {
-  ComboboxPanel,
-  endHintRowProps,
-  offersCreate,
-  useComboboxCore,
-  type ComboOption,
-} from "./combobox-core";
-import {
-  DEFAULT_COMBOBOX_LABELS,
-  DEFAULT_COMMON_LABELS,
-  useKitLabels,
-  useKitLocale,
-} from "../i18n/kit-labels";
+import { ComboboxPanel, endHintRowProps, offersCreate, useComboboxCore, type ComboOption } from "./combobox-core";
+import { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import {
   assignRef,
   EndHintRow,
@@ -35,8 +24,7 @@ import { useCommitReason, type CommitScope } from "./write-lock";
 /** `onChange` is the kit's — "a selection was made", carrying values — rather
  *  than the div's form event, so the DOM's spelling of it is omitted. */
 export interface MultiEntityComboboxProps<V extends string | number>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
   /** Selected ids. */
   value: V[];
   onChange: (value: V[]) => void;
@@ -210,17 +198,12 @@ export function MultiEntityCombobox<V extends string | number>(props: MultiEntit
   // natural fit for a summary, but in ja/zh it concatenates the names with nothing
   // between them at all.
   const locale = useKitLocale();
-  const listFormat = useMemo(
-    () => new Intl.ListFormat(locale, { type: "conjunction", style: "narrow" }),
-    [locale],
-  );
+  const listFormat = useMemo(() => new Intl.ListFormat(locale, { type: "conjunction", style: "narrow" }), [locale]);
   const summary = (() => {
     if (value.length === 0) return placeholder ?? "";
     if (itemLabel) return itemLabel(value.length);
     const chosen = value.map(resolve);
-    return chosen.every(Boolean)
-      ? listFormat.format(chosen.map((o) => o!.label))
-      : labels.selectedCount(value.length);
+    return chosen.every(Boolean) ? listFormat.format(chosen.map((o) => o!.label)) : labels.selectedCount(value.length);
   })();
 
   // While locked the trigger sits in the reason's Tooltip, as on EntityCombobox.
@@ -282,10 +265,7 @@ export function MultiEntityCombobox<V extends string | number>(props: MultiEntit
             // A caller's own name wins over the composition: two fields labelled
             // "Account" on a transfer form are the from and the to, and only the
             // caller knows which is which.
-            aria-label={
-              ariaLabel ??
-              (typeof label === "string" ? common.fieldValue(label, summary) : undefined)
-            }
+            aria-label={ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, summary) : undefined)}
             // Focusable while locked — see EntityCombobox.
             disabled={lock.locked ? undefined : disabled}
             aria-disabled={lock.locked || undefined}

package/src/components/multi-select.tsx

@@ -47,8 +47,7 @@ export interface MultiSelectOption<V extends string | number = string | number>
  *  inferred from `options` and `value`, so `onChange` hands back `number[]` for number
  *  ids and `string[]` for string ones, and no call site casts. */
 export interface MultiSelectProps<V extends string | number = string | number>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
   options: MultiSelectOption<V>[];
   /** The chosen values — the select family's `value` (API-4). */
   value?: V[];
@@ -162,7 +161,8 @@ export function MultiSelect<V extends string | number = string | number>(props:
   const value = useMemo<V[]>(() => valueProp ?? [], [valueProp]);
   // The rows as the family's options — the hint is the sublabel, searched like the label.
   const comboOptions = useMemo(
-    () => options.map((o): ComboOption<V> => ({ value: o.value, label: o.label, sublabel: o.hint, disabled: o.disabled })),
+    () =>
+      options.map((o): ComboOption<V> => ({ value: o.value, label: o.label, sublabel: o.hint, disabled: o.disabled })),
     [options],
   );
   // Back closes the open list, as it did on `useDropdown` (keksdose live #309).
@@ -213,9 +213,7 @@ export function MultiSelect<V extends string | number = string | number>(props:
   const valueSet = useMemo(() => new Set<V>(value), [value]);
   const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));
   const selectedSummary =
-    value.length === 0 || allChecked
-      ? (labelsProp?.all ?? placeholder ?? text.all)
-      : text.selectedCount(value.length);
+    value.length === 0 || allChecked ? (labelsProp?.all ?? placeholder ?? text.all) : text.selectedCount(value.length);
 
   const toggle = (o: ComboOption<V>) => {
     if (lock.locked) return;
@@ -256,9 +254,7 @@ export function MultiSelect<V extends string | number = string | number>(props:
       // siblings use, so a form row of pickers reads the same way throughout.
       // A caller's own name wins: two filters labelled "Accounts" on one screen have
       // to be told apart, and only the caller knows by what.
-      aria-label={
-        ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, selectedSummary) : undefined)
-      }
+      aria-label={ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, selectedSummary) : undefined)}
       onClick={() => {
         if (!inert) setOpen((v) => !v);
       }}

package/src/components/nav-pills.tsx

@@ -31,7 +31,10 @@ export interface NavPillLinkProps {
 /** The `aria-current` token the current pill carries. */
 export type NavPillsCurrent = "page" | "step" | "location" | "true";
 
-export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"nav">, "children" | "onSelect"> {
+export interface NavPillsProps<T extends string> extends Omit<
+  ComponentPropsWithoutRef<"nav">,
+  "children" | "onSelect"
+> {
   items: NavPillItem<T>[];
   /** The pill that is current. `null` or a value not in `items`: none is. */
   current: T | null;
@@ -161,7 +164,12 @@ export function NavPills<T extends string>({
             ) : kit ? (
               <RenderedKitLink render={kit} props={props} />
             ) : (
-              <a href={props.href} className={props.className} aria-current={props["aria-current"]} onClick={props.onClick}>
+              <a
+                href={props.href}
+                className={props.className}
+                aria-current={props["aria-current"]}
+                onClick={props.onClick}
+              >
                 {props.children}
               </a>
             );

package/src/components/number-field.tsx

@@ -8,8 +8,10 @@ import { useKitLocale } from "../i18n/kit-labels";
 
 type NumberInputProps = ComponentProps<typeof NumberInput>;
 
-export interface NumberFieldProps
-  extends Omit<NumberInputProps, "value" | "onChange" | "onCommit" | "suffix" | "invalid" | "error" | "locale"> {
+export interface NumberFieldProps extends Omit<
+  NumberInputProps,
+  "value" | "onChange" | "onCommit" | "suffix" | "invalid" | "error" | "locale"
+> {
   /** The committed number. `null` is "no value" — shown as an empty field. */
   value: number | null;
   /**
@@ -205,8 +207,7 @@ export function NumberField(props: NumberFieldProps) {
     // Live mode echoing back what it was just told: the draft already says it, in
     // the typist's own spelling ("1," or "12+5"), and reformatting would fight them.
     // Only a changed `value` qualifies — a new mark or `digits` still re-renders.
-    const echo =
-      onValueChange !== undefined && value === reported && seen.mark === mark && seen.digits === digits;
+    const echo = onValueChange !== undefined && value === reported && seen.mark === mark && seen.digits === digits;
     if (!echo) {
       setDraft(format(value));
       setCommitted(value);
@@ -263,17 +264,19 @@ export function NumberField(props: NumberFieldProps) {
   const required = ariaRequired === true || ariaRequired === "true";
 
   const labelWithUnit =
-    unit !== undefined && unitPlacement === "label"
-      ? label === undefined || label === ""
-        ? unit
-        : typeof label === "string" && typeof unit === "string"
-          ? `${label} (${unit})`
-          : (
-            <>
-              {label} ({unit})
-            </>
-          )
-      : label;
+    unit !== undefined && unitPlacement === "label" ? (
+      label === undefined || label === "" ? (
+        unit
+      ) : typeof label === "string" && typeof unit === "string" ? (
+        `${label} (${unit})`
+      ) : (
+        <>
+          {label} ({unit})
+        </>
+      )
+    ) : (
+      label
+    );
 
   return (
     <NumberInput