@eifi1/ui-kit 0.51.4 → 0.51.6

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

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