@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/components/legal-page.tsx

@@ -21,6 +21,7 @@ import {
   LegalSlotContext,
   LegalText,
   legalOperatorText,
+  resolveLegalRefs,
   useLegalLabels,
   warnLegalOnce,
 } from "./legal";
@@ -351,8 +352,24 @@ export interface LegalPageProps {
    *
    * An app that records which terms someone accepted (keksdose) stores the terms page's
    * date: it is the version the reader saw.
+   *
+   * The kit's sections are part of the page, so the date moves with their words too: a
+   * kit release that changes them says so in its adoption note ("Legal wording"), and
+   * the app sets the page's date to the day it ships that bump (§2, decision 10).
    */
   updated?: string;
+  /**
+   * 0.51.4: a plain-language summary before the first section (legal benchmark, Marcel
+   * 2026-10-29) — the app's three to six points, each a sentence. The kit draws them as a
+   * list under `legal.summary.title` ("In short", "Das Wichtigste in Kürze") and adds
+   * `legal.summary.note`: the summary orients, only the full text binds. Worded without
+   * "below", because on a translated page the text below is a translation too.
+   *
+   * A string point is running text with its `{ref:key}` resolved, as in a section:
+   * "You can delete your account at any time (section {ref:ending})." Unnumbered, with
+   * the id `summary`; the sections' numbers do not count it. Left out or empty, nothing.
+   */
+  summary?: readonly ReactNode[];
   /**
    * 0.28.1: switches the app to the operator's `bindingLanguage` — the button after the
    * translation note on a page read in another language. Without it the note stands
@@ -446,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 });
       }
@@ -471,6 +490,7 @@ function slotSections(
  * What it adds to the column:
  * - the title, from `legal.titles`, and "← Back to home" pointing at `homeHref`;
  * - the as-of line under the title, from `updated` (0.51.3);
+ * - the plain-language summary before the sections, from `summary` (0.51.4);
  * - the default notice per page — the beta notice, or the privacy notice on the privacy
  *   policy, whose technical sections describe running code (§3.2, §7.3);
  * - numbers: the privacy and terms sections are "N. Title" in render order, the
@@ -492,6 +512,7 @@ export function LegalPage({
   homeHref = "/",
   notice,
   updated,
+  summary,
   onShowBindingLanguage,
   locale: localeProp,
   headingAs = "h1",
@@ -519,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 =
@@ -531,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>
         </>
@@ -550,6 +576,27 @@ export function LegalPage({
       {(labels.updated ?? DEFAULT_LEGAL_LABELS.updated!)(formatDate(updated, "long", { locale }))}
     </time>
   ) : undefined;
+  const summaryLabels = labels.summary ?? DEFAULT_LEGAL_LABELS.summary!;
+  const SummaryHeading = context.sectionHeading;
+  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>
+        <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">
+              <span aria-hidden className="mt-2 size-1.5 shrink-0 rounded-full bg-brand" />
+              <span className="min-w-0 break-words">
+                {typeof point === "string" ? resolveLegalRefs(point, context) : point}
+              </span>
+            </li>
+          ))}
+        </ul>
+        <p className="mt-3 text-xs text-muted">{summaryLabels.note}</p>
+      </section>
+    ) : undefined;
 
   return (
     <UiKitProvider labels={overrides}>
@@ -567,6 +614,7 @@ export function LegalPage({
               notice={shownNotice}
               updated={updatedLine}
               translationNote={translationNote}
+              summary={summaryBox}
               headingAs={headingAs}
             >
               {nodes}
@@ -581,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

@@ -44,6 +44,11 @@ export const LEGAL_HREFS: Readonly<Record<LegalPageKey, string>> = Object.freeze
   terms: "/terms",
 });
 
+/** 0.51.4: the two public pages an app MAY have beside the legal ones, linked after
+ *  them in the footer (§3.3) — keksdose's /security and /accessibility. Not legal pages:
+ *  an app draws them with `PublicPage`, in its own words, at routes of its choosing. */
+export type LegalInfoPageKey = "security" | "accessibility";
+
 /**
  * Who runs the app — the values the kit's legal sections are filled in with (§5).
  *
@@ -179,8 +184,11 @@ export interface LegalFramedSectionLabels {
 export interface LegalLabels {
   /** The accessible name of {@link LegalLinks}' and {@link LegalFooter}'s `<nav>`. */
   navLabel: string;
-  /** The short labels of the three links, everywhere the links appear (§3.3). */
-  links: Record<LegalPageKey, string>;
+  /** The short labels of the three links, everywhere the links appear (§3.3), and since
+   *  0.51.4 of the two optional public pages after them (`securityHref`,
+   *  `accessibilityHref` on {@link LegalLinks}) — optional keys, as every key added to a
+   *  namespace an app may annotate: left out, the provider's, then English. */
+  links: Record<LegalPageKey, string> & Partial<Record<LegalInfoPageKey, string>>;
   /** The pages' titles — the `<h1>`, and the links of the terms checkbox. */
   titles: Record<LegalPageKey, string>;
   /** The back link above the title: "← Back to home". */
@@ -215,6 +223,15 @@ export interface LegalLabels {
    * the provider's, then English.
    */
   updated?: (date: string) => string;
+  /**
+   * 0.51.4: the plain-language summary at the top of a page ({@link LegalPage}'s
+   * `summary`, §3.2) — its heading, and the line under the points saying that only the
+   * full text binds. Optional, as `updated`.
+   */
+  summary?: {
+    title: string;
+    note: string;
+  };
   /** The kit's sections (§4.3), by page and section key. */
   sections: {
     impressum: {
@@ -363,6 +380,15 @@ export interface LegalLinksProps {
   /** Default (0.28): the three routes, `/impressum`, `/privacy` and `/terms`, with the
    *  kit's short link labels (`legal.links`), in the contract's order. */
   links?: readonly LegalLink[];
+  /**
+   * 0.51.4: the app's security page — a "Security" link after the others, with the kit's
+   * label (`legal.links.security`). Left out, no link: only an app that has the page
+   * names its route.
+   */
+  securityHref?: string;
+  /** 0.51.4: the app's accessibility statement — "Accessibility", last. As
+   *  `securityHref`. */
+  accessibilityHref?: string;
   /** The page being shown; its link is marked `aria-current="page"`. Usually the
    *  router's pathname. */
   currentHref?: string;
@@ -387,6 +413,14 @@ function defaultLinks(labels: LegalLabels): LegalLink[] {
   }));
 }
 
+/** The optional pages after them, each only where the app named its route. */
+function infoLinks(labels: LegalLabels, hrefs: Partial<Record<LegalInfoPageKey, string>>): LegalLink[] {
+  return (["security", "accessibility"] as const).flatMap((page) => {
+    const href = hrefs[page];
+    return href ? [{ href, label: labels.links[page] ?? DEFAULT_LEGAL_LABELS.links[page] }] : [];
+  });
+}
+
 /**
  * The legal pages as a row of quiet links, the one you are on marked (kastlan's
  * `LegalLinks`). Wraps on a phone.
@@ -398,6 +432,8 @@ function defaultLinks(labels: LegalLabels): LegalLink[] {
  */
 export function LegalLinks({
   links,
+  securityHref,
+  accessibilityHref,
   currentHref,
   nav = true,
   onLinkClick,
@@ -405,9 +441,18 @@ export function LegalLinks({
   className,
 }: LegalLinksProps) {
   const labels = useLegalLabels(labelsProp);
-  const shown = links ?? defaultLinks(labels);
+  const shown = [
+    ...(links ?? defaultLinks(labels)),
+    ...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>,
@@ -429,6 +474,10 @@ export interface LegalFooterProps {
   children?: ReactNode;
   /** Default: the three routes with the kit's link labels — see {@link LegalLinks}. */
   links?: readonly LegalLink[];
+  /** 0.51.4: "Security" after the others — see {@link LegalLinksProps.securityHref}. */
+  securityHref?: string;
+  /** 0.51.4: "Accessibility", last — see {@link LegalLinksProps.accessibilityHref}. */
+  accessibilityHref?: string;
   /** Marks that link `aria-current="page"`. {@link LegalPage}'s default footer passes
    *  its own page. */
   currentHref?: string;
@@ -454,14 +503,29 @@ export interface LegalFooterProps {
  * landing, auth, legal and 404 pages; kastlan and Kurvenschmiede had them on some pages
  * only. Its palette classes (`border-slate-200 bg-white dark:…`) became the surface and
  * border tokens, so it follows the theme like the rest of the kit.
+ *
+ * 0.51.4: an app with a security page or an accessibility statement passes their routes
+ * (`securityHref`, `accessibilityHref`) and the row goes on with "Security · Accessibility"
+ * in the kit's words, so the footer reads the same in every app that has them.
  */
-export function LegalFooter({ children, links, currentHref, landmark = true, className, labels }: LegalFooterProps) {
+export function LegalFooter({
+  children,
+  links,
+  securityHref,
+  accessibilityHref,
+  currentHref,
+  landmark = true,
+  className,
+  labels,
+}: LegalFooterProps) {
   const Root = landmark ? "footer" : "div";
   return (
     <Root className={cn("border-t border-subtle bg-surface", className)}>
       <div className="mx-auto max-w-5xl px-4 py-8 text-sm text-muted">
         <LegalLinks
           links={links}
+          securityHref={securityHref}
+          accessibilityHref={accessibilityHref}
           currentHref={currentHref}
           labels={labels}
           className="justify-center gap-y-2 text-sm"
@@ -515,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}
@@ -547,6 +609,8 @@ export interface LegalLayoutProps {
   /** 0.28.1: under the title, before the notice — {@link LegalPage}'s note that this
    *  page is a translation and which language is binding. */
   translationNote?: ReactNode;
+  /** 0.51.4: before the sections — {@link LegalPage}'s plain-language summary. */
+  summary?: ReactNode;
   /** The sections — {@link LegalSection}s. */
   children: ReactNode;
   /** The three pages, linked at the end of the column with the current one marked.
@@ -566,6 +630,7 @@ export function LegalLayout({
   notice,
   updated,
   translationNote,
+  summary,
   children,
   links,
   currentHref,
@@ -584,9 +649,17 @@ export function LegalLayout({
           {notice}
         </AlertBanner>
       )}
-      <div className="mt-8 space-y-8">{children}</div>
+      <div className="mt-8 space-y-8">
+        {summary}
+        {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",

package/src/components/line-items.tsx

@@ -114,7 +114,10 @@ export interface LineItemsColumn<T> {
  * class, handlers. A `data-*` attribute is typed so `{ "data-tour": "rule-condition" }`
  * needs no cast.
  */
-export type LineItemsRowProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+export type LineItemsRowProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children" | "dangerouslySetInnerHTML" | "role"
+> & {
   [key: `data-${string}`]: string | number | boolean | undefined;
 };
 
@@ -289,7 +292,6 @@ export function LineItems<T>({
   const canRemove = Boolean(onRemove) && !disabled && items.length > minItems;
   const hasError = hasContent(error);
 
-
   // Focus after the list has re-rendered with the new rows — a layout effect, so the
   // caret is where it belongs before paint.
   useLayoutEffect(() => {
@@ -351,10 +353,7 @@ export function LineItems<T>({
   const headerCell = (column: LineItemsColumn<T>) => (
     <span
       key={column.key}
-      className={cn(
-        "min-w-0 truncate text-xs font-medium text-muted",
-        column.align === "end" && "text-end",
-      )}
+      className={cn("min-w-0 truncate text-xs font-medium text-muted", column.align === "end" && "text-end")}
     >
       {floats(column) ? null : column.header}
     </span>
@@ -548,10 +547,7 @@ export function LineItems<T>({
       )}
 
       {summary && (
-        <div
-          data-line-items-summary=""
-          className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-primary"
-        >
+        <div data-line-items-summary="" className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-primary">
           {/* With no value the line is a state of its own, and the label takes the
               tone — the only place left to carry it. */}
           <span
@@ -586,11 +582,7 @@ export function LineItems<T>({
         </div>
       )}
 
-      {hasError && (
-        <p className="text-caption leading-tight text-danger">
-          {error}
-        </p>
-      )}
+      {hasError && <p className="text-caption leading-tight text-danger">{error}</p>}
 
       {onAdd && (
         <Button

package/src/components/list-labels.ts

@@ -7,4 +7,6 @@ import type { ListLabels } from "./list";
 export const DEFAULT_LIST_LABELS: ListLabels = {
   unread: "Unread",
   opensInNewTab: "opens in a new tab",
+  showAll: (count) => `Show all (${count})`,
+  showFewer: "Show fewer",
 };

package/src/components/list.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useId, useState } from "react";
+import { Children, createContext, useContext, useId, useState } from "react";
 import type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { ChevronDown, ExternalLink } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
@@ -14,6 +14,7 @@ import { pickLinkRenderer } from "./text-link";
 import { LockedReason, mergeDescribedBy, useLockReason, type DisabledReasonDisplay } from "./field-parts";
 import type { CommitScope } from "./write-lock";
 import { DEFAULT_LIST_LABELS } from "./list-labels";
+import { Button } from "./button";
 
 /* ── Labels ───────────────────────────────────────────────────────────────── */
 
@@ -22,6 +23,12 @@ export interface ListLabels {
   unread: string;
   /** Read after an external row's title: the row leaves the app in a new tab. */
   opensInNewTab: string;
+  /** 0.51.4: the row under a {@link ListProps.limit}ed list that opens the rest, with
+   *  the WHOLE list's count — "Show all (12)". Optional, as every key added to a
+   *  namespace an app may annotate: left out, the provider's, then English. */
+  showAll?: (count: number) => string;
+  /** 0.51.4: the same row once the list is open, folding it back. */
+  showFewer?: string;
 }
 
 // Defined in ./list-labels, which holds no component code (0.34, KS U8).
@@ -53,8 +60,26 @@ export interface ListProps extends Omit<ComponentPropsWithoutRef<"ul">, "role">
   /** The `<ul>` (or `<ol>`). A React 19 ref prop since 0.34 (MOD-4, refactor audit
    *  2026-10); it was `forwardRef`. */
   ref?: Ref<HTMLUListElement>;
+  /**
+   * Show the first `limit` rows, then a "Show all (n)" row that opens the rest and turns
+   * into "Show fewer" (0.51.4, keksdose run 89: a long "Placed only roughly" list on its
+   * Matching report could only fold as a whole, so it opened as nothing or everything).
+   * A list of `limit` rows or fewer draws them all, with no such row. Rows are counted as
+   * `Children` counts them: one per `ListItem`, a fragment as one.
+   *
+   * The row is a button with `aria-expanded`, controlling the list; it sits in the list
+   * as `role="none"`, so a reader still hears "list, 5 items" for five rows.
+   */
+  limit?: number;
 }
 
+/** The show-all row's inset, in step with each density's row padding (`PAD`). */
+const MORE_PAD: Record<ListDensity, string> = {
+  compact: "px-2 py-1",
+  default: "px-3 py-1.5",
+  comfortable: "px-4 py-2",
+};
+
 /**
  * The list of {@link ListItem}s.
  *
@@ -67,15 +92,23 @@ export function List({
   as = "ul",
   density = "default",
   separator = "gap",
+  limit,
   className,
   children,
   ...rest
 }: ListProps) {
   const Tag = as;
+  const labels = useKitLabels("list", DEFAULT_LIST_LABELS);
+  const [open, setOpen] = useState(false);
+  const generatedId = useId();
+  const id = rest.id ?? generatedId;
+  const rows = limit === undefined ? null : Children.toArray(children);
+  const folds = rows !== null && rows.length > Math.max(0, limit!);
   return (
     <ListContext.Provider value={{ density, separator }}>
       <Tag
         {...rest}
+        id={folds ? id : rest.id}
         ref={ref as Ref<HTMLUListElement & HTMLOListElement>}
         role="list"
         className={cn(
@@ -84,7 +117,24 @@ export function List({
           className,
         )}
       >
-        {children}
+        {folds && !open ? rows.slice(0, Math.max(0, limit!)) : children}
+        {folds && (
+          <li role="none" className={MORE_PAD[density]}>
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              className="h-auto p-0"
+              aria-expanded={open}
+              aria-controls={id}
+              onClick={() => setOpen((was) => !was)}
+            >
+              {open
+                ? (labels.showFewer ?? DEFAULT_LIST_LABELS.showFewer)
+                : (labels.showAll ?? DEFAULT_LIST_LABELS.showAll!)(rows.length)}
+            </Button>
+          </li>
+        )}
       </Tag>
     </ListContext.Provider>
   );
@@ -109,14 +159,30 @@ export interface ListItemLinkProps {
   [key: `data-${string}`]: unknown;
 }
 
-const PAD: Record<
-  ListDensity,
-  { target: string; actions: string; leadingActions: string; gap: string; body: string }
-> = {
-  compact: { target: "gap-2 px-2 py-1.5", actions: "pe-1.5", leadingActions: "ps-1.5", gap: "gap-0.5", body: "px-2 pb-1.5" },
-  default: { target: "gap-3 px-3 py-2.5", actions: "pe-2", leadingActions: "ps-2", gap: "gap-1", body: "px-3 pb-2.5" },
-  comfortable: { target: "gap-3 px-4 py-3", actions: "pe-3", leadingActions: "ps-3", gap: "gap-1", body: "px-4 pb-3" },
-};
+const PAD: Record<ListDensity, { target: string; actions: string; leadingActions: string; gap: string; body: string }> =
+  {
+    compact: {
+      target: "gap-2 px-2 py-1.5",
+      actions: "pe-1.5",
+      leadingActions: "ps-1.5",
+      gap: "gap-0.5",
+      body: "px-2 pb-1.5",
+    },
+    default: {
+      target: "gap-3 px-3 py-2.5",
+      actions: "pe-2",
+      leadingActions: "ps-2",
+      gap: "gap-1",
+      body: "px-3 pb-2.5",
+    },
+    comfortable: {
+      target: "gap-3 px-4 py-3",
+      actions: "pe-3",
+      leadingActions: "ps-3",
+      gap: "gap-1",
+      body: "px-4 pb-3",
+    },
+  };
 
 /** {@link ListItemBaseProps.trailingTone}: a {@link TextTone}, or `inherit` — no
  *  colour of the slot's own, so an element's colour (or the row's) stands. */
@@ -534,12 +600,7 @@ export function ListItem({
 
   const body = (
     <>
-      {Icon && (
-        <Icon
-          className={cn("size-4 shrink-0 text-muted", align === "start" && "mt-0.5")}
-          aria-hidden
-        />
-      )}
+      {Icon && <Icon className={cn("size-4 shrink-0 text-muted", align === "start" && "mt-0.5")} aria-hidden />}
       {leading}
       {/* With a trailing slot, a basis at Large: below it the trailing chip or figure
           wraps under the text (the target wraps, see `target`) rather than squeezing the
@@ -602,9 +663,8 @@ export function ListItem({
       {loading ? (
         <Spinner label={null} className="size-3.5 shrink-0" />
       ) : (
-        external && href !== undefined && (
-          <ExternalLink className="size-3.5 shrink-0 text-muted rtl:-scale-x-100" aria-hidden />
-        )
+        external &&
+        href !== undefined && <ExternalLink className="size-3.5 shrink-0 text-muted rtl:-scale-x-100" aria-hidden />
       )}
       {mark}
       {expandable && (
@@ -653,9 +713,7 @@ export function ListItem({
       className: target,
       "aria-current": selected ? "true" : undefined,
       "aria-busy": loading || undefined,
-      onClick: loading
-        ? (e) => e.preventDefault()
-        : (onClick as ListItemLinkProps["onClick"]),
+      onClick: loading ? (e) => e.preventDefault() : (onClick as ListItemLinkProps["onClick"]),
       onAuxClick,
       children: body,
     };
@@ -745,11 +803,7 @@ export function ListItem({
         stacked ? "flex-col" : "items-center",
         // See `renderRow`: the wrapper may be inline, the row is not.
         renderRow && "w-full",
-        selected
-          ? "border-brand bg-surface-2"
-          : bordered
-            ? "border-subtle"
-            : "border-transparent",
+        selected ? "border-brand bg-surface-2" : bordered ? "border-subtle" : "border-transparent",
         !stacked && interactive && !inert && !selected && "hover:bg-hover",
         (disabled || locked) && "opacity-50",
         className,

package/src/components/measured-grid.tsx

@@ -181,8 +181,7 @@ export function useMeasuredRows(
   return { cells, setCells, rows, setRows, ready, problems, props };
 }
 
-export interface MeasuredGridProps
-  extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+export interface MeasuredGridProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
   /** What the table is — shown above it, and the grid's accessible name. */
   label: string;
   /** A note under the table (which columns a layout expects, say). Also the grid's
@@ -393,9 +392,7 @@ function CellGrid({
   useEffect(() => {
     const target = pending.current;
     if (!target) return;
-    const element = scrollRef.current?.querySelector<HTMLElement>(
-      `[data-cell="${target.row}:${target.column}"]`,
-    );
+    const element = scrollRef.current?.querySelector<HTMLElement>(`[data-cell="${target.row}:${target.column}"]`);
     if (!element) return;
     pending.current = null;
     // `preventScroll`: `reveal` already scrolled the row clear of the sticky header,
@@ -595,26 +592,12 @@ function CellGrid({
                 #
               </div>
               {columns.map((column, index) => (
-                <div
-                  key={index}
-                  role="columnheader"
-                  className="min-w-0 border-s border-subtle px-2 py-1 text-end"
-                >
-                  <span className="block truncate font-medium text-primary">
-                    {column.label}
-                  </span>
-                  {column.unit && (
-                    <span className="block truncate text-micro text-muted">
-                      {column.unit}
-                    </span>
-                  )}
+                <div key={index} role="columnheader" className="min-w-0 border-s border-subtle px-2 py-1 text-end">
+                  <span className="block truncate font-medium text-primary">{column.label}</span>
+                  {column.unit && <span className="block truncate text-micro text-muted">{column.unit}</span>}
                 </div>
               ))}
-              <div
-                role="columnheader"
-                aria-label={labels.rowActions}
-                className="border-s border-subtle"
-              />
+              <div role="columnheader" aria-label={labels.rowActions} className="border-s border-subtle" />
             </div>
           </div>
           {/* Only the rows in the window are mounted — a swept linkage is thousands of
@@ -711,10 +694,7 @@ function CellGrid({
                       </div>
                     );
                   })}
-                  <div
-                    role="gridcell"
-                    className="flex items-center justify-center border-s border-subtle"
-                  >
+                  <div role="gridcell" className="flex items-center justify-center border-s border-subtle">
                     <button
                       type="button"
                       data-cell={`${index}:${width}`}
@@ -776,9 +756,7 @@ function CellGrid({
           {/* bdi: an LTR label ("3 points") in an RTL grid would reorder to "points 3". */}
           <bdi>{labels.points(filled.length)}</bdi>
         </span>
-        {problems > 0 && (
-          <span className="text-caption text-danger">{labels.problems(problems)}</span>
-        )}
+        {problems > 0 && <span className="text-caption text-danger">{labels.problems(problems)}</span>}
         <span className="ms-auto flex items-center gap-1 text-caption text-muted">
           <ClipboardPaste aria-hidden className="size-3.5" /> {labels.pasteHint}
         </span>

package/src/components/menu-item.tsx

@@ -224,9 +224,7 @@ export function MenuItem({
       // dimmed") rather than greyed to the point some browsers stop exposing it.
       aria-disabled={disabled || undefined}
       onClick={
-        disabled
-          ? (e) => e.preventDefault()
-          : (onClick as ((event: MouseEvent<HTMLButtonElement>) => void) | undefined)
+        disabled ? (e) => e.preventDefault() : (onClick as ((event: MouseEvent<HTMLButtonElement>) => void) | undefined)
       }
       className={look}
     >