@eifi1/ui-kit 0.51.3 → 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

@@ -2,7 +2,7 @@ import { useCallback, useId, useMemo } from "react";
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { ComboboxPanel, useComboboxCore, type ComboOption } from "./combobox-core";
 import { assignRef } from "./field-parts";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
@@ -90,22 +90,27 @@ export function GroupedPicker({
   // plain `toLowerCase` gets wrong), and now the accents too — "zurich" finds Zürich.
   const locale = useKitLocale();
   const results = useMemo(() => {
-    const q = foldForSearch(query.trim(), locale);
-    const has = (s: string) => foldForSearch(s, locale).includes(q);
-    const kept = q
-      ? groups
-          .map((g) => (has(g.label) ? g : { ...g, items: g.items.filter((i) => has(i.label)) }))
-          .filter((g) => g.items.length > 0)
-      : groups;
+    // Every word of the query (0.51.4): all in the group's name keeps the whole group;
+    // otherwise an item stays when each word is in its label or its group's name, so
+    // "migros 8004" finds Migros' 8004 shop.
+    const words = searchWords(query, locale);
+    const kept =
+      words.length > 0
+        ? groups
+            .map((g) =>
+              matchesSearch(words, [g.label], locale)
+                ? g
+                : { ...g, items: g.items.filter((i) => matchesSearch(words, [g.label, i.label], locale)) },
+            )
+            .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

@@ -6,7 +6,7 @@ import { SearchField } from "./search-field";
 import { TILE_SIZE, TileRadioGroup } from "./tile-radio";
 import type { TileItem, TileSize } from "./tile-radio";
 import { hasContent } from "../lib/presence";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { LabelStrip, useFieldMessages, type FieldHelpProps } from "./field-parts";
 import { DEFAULT_ICON_PICKER_LABELS } from "./icon-picker-labels";
 
@@ -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;
@@ -147,16 +146,13 @@ export function IconPicker<T extends string>({
   });
   const [query, setQuery] = useState("");
   // Case- and accent-insensitive, so "cafe" finds "Café" — every kit list's fold (DUP-5).
-  const needle = foldForSearch(query.trim(), locale);
+  // Every word of the query, in the label or a keyword (0.51.4).
+  const words = useMemo(() => searchWords(query, locale), [query, locale]);
+  const needle = words.length > 0;
 
   const visible = useMemo(
-    () =>
-      needle
-        ? options.filter((o) =>
-            [o.label, ...(o.keywords ?? [])].some((w) => foldForSearch(w, locale).includes(needle)),
-          )
-        : options,
-    [options, needle, locale],
+    () => (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]);
   const items: TileItem<T>[] = [
@@ -207,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

@@ -24,7 +24,7 @@ import {
   type ComboOption,
 } from "./combobox-core";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
-import { foldForSearch, rankMatch } from "../lib/text-match";
+import { matchesSearch, rankMatch, searchWords } from "../lib/text-match";
 import {
   EndHintRow,
   FieldCaption,
@@ -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`. */
@@ -311,8 +310,9 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
   const matches = useMemo(() => {
     let ranked = options;
     if (query) {
-      const q = foldForSearch(query, locale);
-      const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);
+      // Every word of the query, in the label or the sublabel (0.51.4).
+      const words = searchWords(query, locale);
+      const hit = (o: ComboOption<V>) => matchesSearch(words, [o.label, o.sublabel], locale);
       // The label's whole name or its start first (`rankMatch` 0 and 1), then a match
       // anywhere in the label or the sublabel. Not the group (0.40, kk run 79): with
       // first-letter groups one typed letter matched its whole group.
@@ -321,7 +321,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
         return rank === 0 || rank === 1;
       };
       const starts = options.filter(leads);
-      const rest = options.filter((o) => !leads(o) && (hit(o.label) || hit(o.sublabel)));
+      const rest = options.filter((o) => !leads(o) && hit(o));
       ranked = [...starts, ...rest];
     }
     if (!ranked.some((o) => o.group)) return ranked;
@@ -357,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
@@ -413,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);
       }
@@ -434,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>
     </>
@@ -701,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>
@@ -771,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

@@ -10,6 +10,8 @@ export const DEFAULT_LEGAL_LABELS: LegalLabels = {
     impressum: "Imprint",
     privacy: "Privacy Policy",
     terms: "Terms",
+    security: "Security",
+    accessibility: "Accessibility",
   },
   titles: {
     impressum: "Imprint",
@@ -24,11 +26,14 @@ 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}`,
+  summary: {
+    title: "In short",
+    note: "This summary is for orientation; only the full text is binding.",
+  },
   sections: {
     impressum: {
       operator: {
@@ -83,7 +88,7 @@ export const DEFAULT_LEGAL_LABELS: LegalLabels = {
       },
       changes: {
         title: "Changes to these terms",
-        body: "We may update these terms as the service evolves. We announce a material change at least 30 days before it takes effect, by email and in the app, together with the new text. If you do not agree, you can object or delete your account before that date, and you can export your data until then. If you keep using the service after that date, the changed terms apply.",
+        body: "We may update these terms as the service evolves. We announce a material change at least 30 days before it takes effect, by email and in the app, together with the new text. If you do not agree, you can object or delete your account before that date, and you can export your data until then. If you keep using the service after that date, the changed terms apply. Changes that only benefit you, or that the law requires, apply without this notice and cannot be objected to. If you object to a change, we may end your account on the date it takes effect. If you have paid for a period that runs beyond that date, we refund the unused part.",
       },
       language: {
         title: "Language",