@eifi1/ui-kit 0.51.4 → 0.51.5

package/src/components/floating-panel.tsx

@@ -237,49 +237,45 @@ export function FloatingActionButton({
   // tooltip replaces it outright.
   const nativeTip = !wrapped && nativeTitle && title !== "" ? (title ?? label) : undefined;
   const button = (
-          <button
-            {...rest}
-            hidden={wrapped ? undefined : hidden}
-            ref={buttonRef}
-            type={type}
-            dir={dir}
-            aria-label={label}
-            aria-pressed={pressed ?? rest["aria-pressed"]}
-            title={nativeTip}
-            style={wrapped ? style : { ...cornerStyle(corner, offset), ...style }}
-            className={cn(
-              // Wrapped, the wrapper is the fixed thing and the button sits in it.
-              !wrapped && "fixed z-40",
-              "inline-flex items-center justify-center rounded-full",
-              extended ? "h-12 gap-2 px-4 text-sm font-medium [&_svg]:size-5" : "size-12 [&_svg]:size-6",
-              "shadow-lg transition-colors disabled:cursor-default",
-              !toggle &&
-                variant === "accent" &&
-                "bg-brand text-brand-contrast hover:bg-brand-hover",
-              !toggle &&
-                variant === "surface" &&
-                "border border-subtle bg-surface text-primary hover:bg-hover disabled:hover:bg-surface",
-              // A toggle sits on the page's surface — a solid brand disc would read as
-              // "on" in both states — and says "on" in the brand family.
-              toggle && "border border-subtle",
-              pressed === false &&
-                "bg-surface text-secondary hover:bg-hover hover:text-primary",
-              pressed === true &&
-                "border-brand bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted",
-              "outline-none focus-visible:ring-offset-2",
-              FOCUS_RING,
-              className,
-            )}
-          >
-            {icon}
-            {/* Visible words, not the name: `aria-label` already is the name, and the
+    <button
+      {...rest}
+      hidden={wrapped ? undefined : hidden}
+      ref={buttonRef}
+      type={type}
+      dir={dir}
+      aria-label={label}
+      aria-pressed={pressed ?? rest["aria-pressed"]}
+      title={nativeTip}
+      style={wrapped ? style : { ...cornerStyle(corner, offset), ...style }}
+      className={cn(
+        // Wrapped, the wrapper is the fixed thing and the button sits in it.
+        !wrapped && "fixed z-40",
+        "inline-flex items-center justify-center rounded-full",
+        extended ? "h-12 gap-2 px-4 text-sm font-medium [&_svg]:size-5" : "size-12 [&_svg]:size-6",
+        "shadow-lg transition-colors disabled:cursor-default",
+        !toggle && variant === "accent" && "bg-brand text-brand-contrast hover:bg-brand-hover",
+        !toggle &&
+          variant === "surface" &&
+          "border border-subtle bg-surface text-primary hover:bg-hover disabled:hover:bg-surface",
+        // A toggle sits on the page's surface — a solid brand disc would read as
+        // "on" in both states — and says "on" in the brand family.
+        toggle && "border border-subtle",
+        pressed === false && "bg-surface text-secondary hover:bg-hover hover:text-primary",
+        pressed === true && "border-brand bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted",
+        "outline-none focus-visible:ring-offset-2",
+        FOCUS_RING,
+        className,
+      )}
+    >
+      {icon}
+      {/* Visible words, not the name: `aria-label` already is the name, and the
                 span would only repeat it. */}
-            {extended && (
-              <span aria-hidden className="whitespace-nowrap">
-                {label}
-              </span>
-            )}
-          </button>
+      {extended && (
+        <span aria-hidden className="whitespace-nowrap">
+          {label}
+        </span>
+      )}
+    </button>
   );
   return (
     <>
@@ -561,14 +557,15 @@ export function FloatingPanel({
                   setOpen(false);
                 }}
                 aria-label={labels.close}
-                className={cn("-me-1.5 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary", FOCUS_RING)}
+                className={cn(
+                  "-me-1.5 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary",
+                  FOCUS_RING,
+                )}
               >
                 <X aria-hidden className="size-5" />
               </button>
             </div>
-            <div className={cn("min-h-0 flex-1 overflow-y-auto overscroll-contain p-4", bodyClassName)}>
-              {children}
-            </div>
+            <div className={cn("min-h-0 flex-1 overflow-y-auto overscroll-contain p-4", bodyClassName)}>{children}</div>
           </div>,
           document.body,
         )}
@@ -796,11 +793,7 @@ export function FloatingAction({
     };
     const { children: content, ...anchor } = linkProps;
     const render = pickLinkRenderer(renderLink, kitLink, href);
-    member = render ? (
-      <RenderedFloatingLink render={render} {...linkProps} />
-    ) : (
-      <a {...anchor}>{content}</a>
-    );
+    member = render ? <RenderedFloatingLink render={render} {...linkProps} /> : <a {...anchor}>{content}</a>;
   } else {
     member = (
       <button

package/src/components/focus-ring.ts

@@ -9,8 +9,7 @@
  * card — write `focus-visible:after:ring-focus` or `has-[:focus-visible]:outline-focus`
  * rather than spelling the width out.
  */
-export const FOCUS_RING =
-  "focus-visible:outline-none focus-visible:ring-focus focus-visible:ring-brand";
+export const FOCUS_RING = "focus-visible:outline-none focus-visible:ring-focus focus-visible:ring-brand";
 
 /** Just the width of {@link FOCUS_RING}, for a ring in another colour (a danger control's,
  *  `--brand-contrast` on a filled button): `cn(FOCUS_RING_WIDTH, "focus-visible:ring-brand-contrast")`. */

package/src/components/form-actions.tsx

@@ -90,9 +90,7 @@ const BREAKPOINTS = ["xl", "lg", "md", "sm"] as const;
  *  `base`. The queries are subscribed unconditionally (hooks cannot be skipped); a
  *  plain string ignores them. Without `matchMedia` (SSR, tests) none match, so the row
  *  renders its `base`, the phone's. The same resolution as BulkActionBar's variant. */
-function useResolvedPlacement(
-  placement: FormActionsPlacement | ResponsiveFormActionsPlacement,
-): FormActionsPlacement {
+function useResolvedPlacement(placement: FormActionsPlacement | ResponsiveFormActionsPlacement): FormActionsPlacement {
   const matches = {
     xl: useBreakpoint("xl"),
     lg: useBreakpoint("lg"),
@@ -328,7 +326,6 @@ export interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">,
   ref?: Ref<HTMLDivElement>;
 }
 
-
 /**
  * Where {@link FormActionsProps.submitShortcut} listens: the form Save submits (named
  * by `formId`, else the enclosing one), else the nearest dialog, else the row's parent.

package/src/components/grouped-picker.tsx

@@ -105,14 +105,12 @@ export function GroupedPicker({
             .filter((g) => g.items.length > 0)
         : groups;
     return kept.flatMap((g) =>
-      g.items.map(
-        (item): ComboOption<string> => ({
-          value: itemValue(g.key, item.key),
-          label: item.label,
-          icon: item.icon,
-          group: g.label,
-        }),
-      ),
+      g.items.map((item): ComboOption<string> => ({
+        value: itemValue(g.key, item.key),
+        label: item.label,
+        icon: item.icon,
+        group: g.label,
+      })),
     );
   }, [groups, query, locale]);
   // Back to keys for `onSelect`, by the value the row carries.

package/src/components/hover-menu.tsx

@@ -310,10 +310,7 @@ export function HoverMenu({
       {open && (
         <div
           ref={panelRef}
-          className={cn(
-            "absolute top-full z-40 pt-2",
-            ALIGN_CLASS[align],
-          )}
+          className={cn("absolute top-full z-40 pt-2", ALIGN_CLASS[align])}
           style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}
         >
           <div

package/src/components/iban-input-labels.ts

@@ -7,8 +7,7 @@ import type { IbanInputLabels } from "./iban-input";
 export const DEFAULT_IBAN_INPUT_LABELS: IbanInputLabels = {
   format: "An IBAN starts with a two-letter country code and two check digits.",
   country: (code) => `“${code}” is not the country code of an IBAN.`,
-  length: (actual, expected) =>
-    `An IBAN from this country has ${expected} characters — this one has ${actual}.`,
+  length: (actual, expected) => `An IBAN from this country has ${expected} characters — this one has ${actual}.`,
   checksum: "The check digits don’t match — a character is probably mistyped.",
   qrRequired: "This is a regular IBAN. A QR-bill needs the account’s QR-IBAN.",
   qrNotAllowed: "This is a QR-IBAN, which only receives QR-bill payments. Enter the account’s regular IBAN.",

package/src/components/icon-button.tsx

@@ -139,25 +139,21 @@ type ColouredTone = "danger" | "warning" | "info" | "success" | "custom";
 
 const ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }> = {
   danger: {
-    quiet:
-      "text-placeholder hover:bg-danger-soft hover:text-danger focus-visible:ring-danger-strong",
+    quiet: "text-placeholder hover:bg-danger-soft hover:text-danger focus-visible:ring-danger-strong",
     toned: "text-danger hover:bg-danger-soft focus-visible:ring-danger-strong",
   },
   warning: {
-    quiet:
-      "text-placeholder hover:bg-warning-soft hover:text-warning focus-visible:ring-warning-strong",
+    quiet: "text-placeholder hover:bg-warning-soft hover:text-warning focus-visible:ring-warning-strong",
     // The ring is warning's loud line (0.33, k27): `--warning-border`, amber-300, was a
     // focus ring at 1.1:1 on the light surfaces.
     toned: "text-warning hover:bg-warning-soft focus-visible:ring-warning-strong",
   },
   info: {
-    quiet:
-      "text-placeholder hover:bg-info-soft hover:text-info focus-visible:ring-[var(--info-border)]",
+    quiet: "text-placeholder hover:bg-info-soft hover:text-info focus-visible:ring-[var(--info-border)]",
     toned: "text-info hover:bg-info-soft focus-visible:ring-[var(--info-border)]",
   },
   success: {
-    quiet:
-      "text-placeholder hover:bg-success-soft hover:text-success focus-visible:ring-[var(--success-border)]",
+    quiet: "text-placeholder hover:bg-success-soft hover:text-success focus-visible:ring-[var(--success-border)]",
     toned: "text-success hover:bg-success-soft focus-visible:ring-[var(--success-border)]",
   },
   // The hover fill and the ring are MIXED from the one colour, since a custom tone
@@ -520,7 +516,8 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
  * that explains why it cannot be followed is a job for a disabled BUTTON.
  */
 export interface IconButtonLinkProps
-  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "href">,
+  extends
+    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "href">,
     Pick<
       IconButtonProps,
       | "variant"
@@ -636,7 +633,10 @@ function iconButtonLook({
   return cn(
     ICON_BUTTON_BASE,
     withText
-      ? cn("font-medium whitespace-nowrap", stretch ? ICON_BUTTON_TEXT_STRETCH_SIZES[size] : ICON_BUTTON_TEXT_SIZES[size])
+      ? cn(
+          "font-medium whitespace-nowrap",
+          stretch ? ICON_BUTTON_TEXT_STRETCH_SIZES[size] : ICON_BUTTON_TEXT_SIZES[size],
+        )
       : stretch
         ? ICON_BUTTON_STRETCH_SIZES[size]
         : ICON_BUTTON_SIZES[size],
@@ -822,44 +822,42 @@ function IconButtonLink({
   );
 }
 
-function IconButtonElement(
-  {
-    variant = "ghost",
-    size = "md",
-    tone: toneProp,
-    quiet,
-    pressed,
-    stopPropagation,
-    stretch,
-    shape = "square",
-    toneColor,
-    label,
-    labelVisible,
-    tooltip = true,
-    tooltipSide,
-    tooltipPortal,
-    tooltipLazy = true,
-    disabledReason: ownDisabledReason,
-    disabledReasonDisplay,
-    commit,
-    pending,
-    glyphSize,
-    badge,
-    disabledStyle = "dim",
-    className,
-    style,
-    onClick,
-    onKeyDown,
-    children,
-    href: _href,
-    renderLink: _renderLink,
-    external: _external,
-    replace: _replace,
-    reloadDocument: _reloadDocument,
-    ref,
-    ...rest
-  }: IconButtonProps,
-) {
+function IconButtonElement({
+  variant = "ghost",
+  size = "md",
+  tone: toneProp,
+  quiet,
+  pressed,
+  stopPropagation,
+  stretch,
+  shape = "square",
+  toneColor,
+  label,
+  labelVisible,
+  tooltip = true,
+  tooltipSide,
+  tooltipPortal,
+  tooltipLazy = true,
+  disabledReason: ownDisabledReason,
+  disabledReasonDisplay,
+  commit,
+  pending,
+  glyphSize,
+  badge,
+  disabledStyle = "dim",
+  className,
+  style,
+  onClick,
+  onKeyDown,
+  children,
+  href: _href,
+  renderLink: _renderLink,
+  external: _external,
+  replace: _replace,
+  reloadDocument: _reloadDocument,
+  ref,
+  ...rest
+}: IconButtonProps) {
   const tone = toneProp ?? (toneColor !== undefined ? "custom" : "default");
   const keep = disabledStyle === "keep";
   const withText = useIconButtonText(label, labelVisible, variant, tooltip);

package/src/components/icon-picker.tsx

@@ -52,8 +52,7 @@ export interface IconOption<T extends string> {
 }
 
 export interface IconPickerProps<T extends string>
-  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue">, FieldHelpProps {
   options: IconOption<T>[];
   /** The chosen icon, or `null` for none. */
   value: T | null;
@@ -152,12 +151,7 @@ export function IconPicker<T extends string>({
   const needle = words.length > 0;
 
   const visible = useMemo(
-    () =>
-      needle
-        ? options.filter((o) =>
-            matchesSearch(words, [o.label, ...(o.keywords ?? [])], locale),
-          )
-        : options,
+    () => (needle ? options.filter((o) => matchesSearch(words, [o.label, ...(o.keywords ?? [])], locale)) : options),
     [options, needle, words, locale],
   );
   const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
@@ -209,17 +203,10 @@ export function IconPicker<T extends string>({
             const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;
             return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;
           }}
-          tileClassName={(_item, selected) =>
-            cn(
-              selected ? "text-primary" : "text-secondary",
-              tileClassName,
-            )
-          }
+          tileClassName={(_item, selected) => cn(selected ? "text-primary" : "text-secondary", tileClassName)}
         />
       </div>
-      {needle && visible.length === 0 && (
-        <p className="text-xs text-muted">{text.noResults}</p>
-      )}
+      {needle && visible.length === 0 && <p className="text-xs text-muted">{text.noResults}</p>}
       {mixed && (
         <span id={mixedId} hidden>
           {text.mixed}

package/src/components/image-grid.tsx

@@ -119,12 +119,7 @@ export function ImageGrid({
 
   return (
     <>
-      <ul
-        aria-label={labels.list}
-        {...rest}
-        className={cn("grid gap-2", className)}
-        style={gridStyle}
-      >
+      <ul aria-label={labels.list} {...rest} className={cn("grid gap-2", className)} style={gridStyle}>
         {items.map((item, i) => {
           const name = item.alt || labels.item(i + 1, count);
           const kind = imageItemKind(item);

package/src/components/inline-edit-field.tsx

@@ -423,11 +423,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
 
   const private_ = redact ? { "data-private": true } : undefined;
   const shown = display ? display(value) : value === null || value === undefined ? "" : String(value);
-  const content = hasContent(shown) ? (
-    shown
-  ) : (
-    <span className="text-muted">{placeholder ?? labels.empty}</span>
-  );
+  const content = hasContent(shown) ? shown : <span className="text-muted">{placeholder ?? labels.empty}</span>;
   const alignClass = align === "end" ? "text-end" : "text-start";
 
   let body: ReactNode;

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

@@ -50,8 +50,7 @@ const CREATE_ROW_CLASS = "flex items-center gap-2 font-medium text-brand";
 /** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}
  *  for why the div's spellings of them are omitted. */
 export interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null>
-  extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange">, FieldHelpProps {
   /** Selected option id; `null` or `clearValue` when nothing is selected. */
   value: V | C | null;
   /** Required and unanswered — see {@link Combobox}'s `invalid`. */
@@ -358,9 +357,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
   const createText = createQuery ? labels.create(createQuery) : createEmptyLabel;
   // Every row the keyboard can land on: the options, then the create row — passed over
   // like a disabled option while a write lock holds it.
-  const rows: readonly { disabled?: boolean }[] = showCreate
-    ? [...matches, { disabled: createLocked }]
-    : matches;
+  const rows: readonly { disabled?: boolean }[] = showCreate ? [...matches, { disabled: createLocked }] : matches;
   const createIndex = matches.length;
 
   // Pointer-device only: the phone's rows live in a {@link PickerSheet} whose own
@@ -414,9 +411,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
       } else {
         // A disabled option's label typed out in full is not a way round `disabled`:
         // it is not a hit, so the text reverts like any other non-answer.
-        const hits = options.filter(
-          (o) => !o.disabled && o.label.toLowerCase() === q.toLowerCase(),
-        );
+        const hits = options.filter((o) => !o.disabled && o.label.toLowerCase() === q.toLowerCase());
         const ids = new Set(hits.map((h) => h.value));
         if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);
       }
@@ -435,9 +430,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
       <span className="min-w-0 flex-1">
         <span className="block truncate-until-large">{createText}</span>
         {createLocked && (
-          <span className="block truncate-until-large text-xs font-normal text-placeholder">
-            {createReason}
-          </span>
+          <span className="block truncate-until-large text-xs font-normal text-placeholder">{createReason}</span>
         )}
       </span>
     </>
@@ -702,11 +695,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
                   aria-selected={false}
                   aria-disabled={createLocked || undefined}
                   onClick={create}
-                  className={cn(
-                    SHEET_ROW_CLASS,
-                    CREATE_ROW_CLASS,
-                    createLocked && DISABLED_ROW_CLASS,
-                  )}
+                  className={cn(SHEET_ROW_CLASS, CREATE_ROW_CLASS, createLocked && DISABLED_ROW_CLASS)}
                 >
                   {createRowContent}
                 </button>
@@ -772,11 +761,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
                   )}
                 >
                   {o.label}
-                  {o.sublabel && (
-                    <span className="ms-2 text-xs text-placeholder">
-                      {o.sublabel}
-                    </span>
-                  )}
+                  {o.sublabel && <span className="ms-2 text-xs text-placeholder">{o.sublabel}</span>}
                 </button>
               </li>
             </Fragment>

package/src/components/input.tsx

@@ -299,7 +299,13 @@ export function Input(props: InputProps) {
                 aria-describedby={describedBy}
                 onClick={handleClick}
                 onChange={onChange}
-                className={cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID, locked && "cursor-not-allowed")}
+                className={cn(
+                  FIELD_BASE,
+                  ownClass,
+                  inputClassName,
+                  isInvalid && FIELD_INVALID,
+                  locked && "cursor-not-allowed",
+                )}
               />
             </EndHintRow>,
           )}
@@ -321,7 +327,13 @@ export function Input(props: InputProps) {
                 aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
                 aria-describedby={describedBy}
                 onChange={onChange}
-                className={cn(FIELD_BASE, "pe-9", inputClassName, isInvalid && FIELD_INVALID, locked && "cursor-not-allowed")}
+                className={cn(
+                  FIELD_BASE,
+                  "pe-9",
+                  inputClassName,
+                  isInvalid && FIELD_INVALID,
+                  locked && "cursor-not-allowed",
+                )}
               />
               {revealToggle}
             </div>

package/src/components/jump-calendar.tsx

@@ -19,8 +19,7 @@ import { claimEscape } from "../hooks/use-dismiss";
 /** A "YYYY-MM" key as a count of months, and back: month arithmetic with no `Date`
  *  rollover to step around. */
 const monthIndex = (key: string) => Number(key.slice(0, 4)) * 12 + Number(key.slice(5, 7)) - 1;
-const keyOfIndex = (index: number) =>
-  `${String(Math.floor(index / 12)).padStart(4, "0")}-${pad((index % 12) + 1)}`;
+const keyOfIndex = (index: number) => `${String(Math.floor(index / 12)).padStart(4, "0")}-${pad((index % 12) + 1)}`;
 const shiftKey = (key: string, delta: number) => keyOfIndex(monthIndex(key) + delta);
 /** The 1st of a "YYYY-MM" month, for `Intl` to name. */
 const firstOfKey = (key: string) => new Date(Number(key.slice(0, 4)), Number(key.slice(5, 7)) - 1, 1);
@@ -287,10 +286,7 @@ function JumpCalendar({
           <span id={captionId} aria-live="polite" className="truncate">
             {caption}
           </span>
-          <ChevronDown
-            aria-hidden
-            className={cn("size-3.5 shrink-0 text-muted", !inDays && "rotate-180")}
-          />
+          <ChevronDown aria-hidden className={cn("size-3.5 shrink-0 text-muted", !inDays && "rotate-180")} />
         </button>
         <button
           type="button"

package/src/components/legal-labels.ts

@@ -26,8 +26,7 @@ export const DEFAULT_LEGAL_LABELS: LegalLabels = {
       "Closed beta. The legal wording below has not been reviewed by a lawyer yet and will be before a public launch. The technical descriptions — what is stored, where, and who can read it — describe what the software actually does today, and are meant to be checked against it.",
   },
   translation: {
-    note: (o) =>
-      `This is a translation for your convenience. The ${o.bindingLanguage} version is binding.`,
+    note: (o) => `This is a translation for your convenience. The ${o.bindingLanguage} version is binding.`,
     show: (o) => `Show the ${o.bindingLanguage} version`,
   },
   updated: (date) => `Last updated: ${date}`,

package/src/components/legal-page.tsx

@@ -463,7 +463,9 @@ function slotSections(
     const number = numbered ? count : undefined;
     if (section.key !== undefined) {
       if (targets.has(section.key)) {
-        warnLegalOnce(`two sections of the ${page} page share the key "${section.key}"; {ref:${section.key}} names the first.`);
+        warnLegalOnce(
+          `two sections of the ${page} page share the key "${section.key}"; {ref:${section.key}} names the first.`,
+        );
       } else {
         targets.set(section.key, { number, heading: section.heading });
       }
@@ -538,8 +540,7 @@ export function LegalPage({
     targets,
   };
   const Main = landmark ? "main" : "div";
-  const shownNotice =
-    notice !== undefined ? notice : page === "privacy" ? labels.notice.privacy : labels.notice.beta;
+  const shownNotice = notice !== undefined ? notice : page === "privacy" ? labels.notice.privacy : labels.notice.beta;
   // 0.28.1 (Marcel): one language is binding and the lawyer reviews that one; a page read
   // in any other says so, with a way to the binding version.
   const translated =
@@ -550,7 +551,13 @@ export function LegalPage({
       {onShowBindingLanguage && (
         <>
           {" "}
-          <Button type="button" variant="link" size="sm" className="h-auto p-0 align-baseline" onClick={onShowBindingLanguage}>
+          <Button
+            type="button"
+            variant="link"
+            size="sm"
+            className="h-auto p-0 align-baseline"
+            onClick={onShowBindingLanguage}
+          >
             {labels.translation.show(operatorText)}
           </Button>
         </>
@@ -574,7 +581,9 @@ export function LegalPage({
   const summaryBox =
     summary !== undefined && summary.length > 0 ? (
       <section id="summary" className="rounded-lg border border-subtle bg-surface p-4 sm:p-5">
-        <SummaryHeading className="text-lg font-semibold break-words text-primary">{summaryLabels.title}</SummaryHeading>
+        <SummaryHeading className="text-lg font-semibold break-words text-primary">
+          {summaryLabels.title}
+        </SummaryHeading>
         <ul className="mt-3 space-y-2">
           {summary.map((point, i) => (
             <li key={i} className="flex gap-2.5 text-sm leading-relaxed text-secondary">
@@ -620,8 +629,10 @@ export function LegalPage({
 
 // ── Terms acceptance (§3.4) ───────────────────────────────────────────────────
 
-export interface LegalAcceptCheckboxProps
-  extends Omit<CheckboxProps, "label" | "checked" | "onCheckedChange" | "required"> {
+export interface LegalAcceptCheckboxProps extends Omit<
+  CheckboxProps,
+  "label" | "checked" | "onCheckedChange" | "required"
+> {
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
   /** Default `/terms`. */

package/src/components/legal.tsx

@@ -446,7 +446,13 @@ export function LegalLinks({
     ...infoLinks(labels, { security: securityHref, accessibility: accessibilityHref }),
   ];
   const items = shown.flatMap((link, i) => [
-    ...(i > 0 ? [<span key={`sep-${link.href}`} aria-hidden="true">·</span>] : []),
+    ...(i > 0
+      ? [
+          <span key={`sep-${link.href}`} aria-hidden="true">
+            ·
+          </span>,
+        ]
+      : []),
     <TextLink key={link.href} href={link.href} tone="muted" current={link.href === currentHref} onClick={onLinkClick}>
       {link.label}
     </TextLink>,
@@ -573,9 +579,7 @@ export function LegalSection({ heading, body, children, id: idProp, headingAs }:
         {heading}
       </Heading>
       <LegalSlotContext.Provider value={null}>
-        {body !== undefined && (
-          <LegalText text={body} className="mt-2 text-sm leading-relaxed text-secondary" />
-        )}
+        {body !== undefined && <LegalText text={body} className="mt-2 text-sm leading-relaxed text-secondary" />}
         {children !== undefined && (
           <div className="mt-2 text-sm leading-relaxed break-words text-secondary">
             {typeof children === "string" ? resolveLegalRefs(children, page) : children}
@@ -650,7 +654,12 @@ export function LegalLayout({
         {children}
       </div>
       {links !== undefined && links.length > 0 && (
-        <LegalLinks links={links} currentHref={currentHref} labels={labels} className="mt-12 border-t border-subtle pt-4" />
+        <LegalLinks
+          links={links}
+          currentHref={currentHref}
+          labels={labels}
+          className="mt-12 border-t border-subtle pt-4"
+        />
       )}
     </article>
   );

package/src/components/lightbox.tsx

@@ -310,9 +310,7 @@ export function Lightbox({
       fetched={fetched}
       alt={item.alt}
       labels={imageLabels}
-      wrapperClassName={
-        zoomed ? "max-w-none shrink-0" : "flex h-full w-full items-center justify-center"
-      }
+      wrapperClassName={zoomed ? "max-w-none shrink-0" : "flex h-full w-full items-center justify-center"}
       className={cn(
         zoomed ? "max-w-none cursor-zoom-out" : "max-h-full max-w-full object-contain",
         !zoomed && zoomEnabled && "cursor-zoom-in",