@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/phone-input.tsx

@@ -1,282 +0,0 @@
-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 type { ParsedPhone, PhoneCountry, PhoneCountryCode } from "../lib/phone";
-import { useFieldMessages } from "./field-parts";
-import { Input, type InputProps } from "./input";
-import { Select } from "./select";
-import { DEFAULT_PHONE_INPUT_LABELS } from "./phone-input-labels";
-
-// ── Labels ────────────────────────────────────────────────────────────────────
-
-/** The words {@link PhoneInput} renders on its own behalf. */
-export interface PhoneInputLabels {
-  /** The country-code select's accessible name. */
-  countryCode: string;
-  /** The select's last option: a number from a country not listed, typed with its
-   *  own "+". */
-  other: string;
-}
-
-// Defined in ./phone-input-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_PHONE_INPUT_LABELS };
-
-/**
- * The `phoneInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).
- */
-function usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): PhoneInputLabels {
-  const labels: PhoneInputLabels = useKitLabels("phoneInput", DEFAULT_PHONE_INPUT_LABELS, prop);
-  return labels;
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-/** A stored value read back: an E.164 number these rules can read, else `null`. */
-function storedNumber(value: string): ParsedPhone | null {
-  return isE164(value) ? parsePhone(value, "other") : null;
-}
-
-/** The select's country for a stored E.164 value, or `null` for free text. */
-function countryOf(value: string): PhoneCountry | null {
-  const parsed = storedNumber(value);
-  return parsed ? (parsed.country ?? "other") : null;
-}
-
-/** What the field emits for typed text: E.164 when it reads, the text unchanged when
- *  it does not. */
-function emitFor(raw: string, country: PhoneCountry): string {
-  return parsePhone(raw, country)?.e164 ?? raw;
-}
-
-/**
- * The text a stored value shows, outside of typing. Under its own country: the national
- * number grouped ("21 000 00 01" beside "CH +41"). Under another (a "+33" number while
- * the select says "Other"): the whole international number. Free text: as it is.
- */
-function displayOf(value: string, country: PhoneCountry): string {
-  const parsed = storedNumber(value);
-  if (!parsed) return value;
-  if (parsed.country !== null && parsed.country === country) {
-    return formatNationalPhone(parsed.national, parsed.country);
-  }
-  return formatPhone(parsed.e164);
-}
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-export interface PhoneInputProps extends Omit<InputProps, "type" | "value" | "defaultValue"> {
-  /** The number: E.164 ("+41210000001") for one the field could read, or free text —
-   *  a value saved before the field existed is shown exactly as it is. `""` is no
-   *  number. */
-  value: string;
-  /** On every change: E.164 when the typed text reads as a number of the selected
-   *  country (or carries its own "+"), otherwise the typed text UNCHANGED. Nothing is
-   *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;
-   *  bind this one to a form. */
-  onValueChange?: (value: string) => void;
-  /** The country a number typed without "+" belongs to, until the value says
-   *  otherwise. Default `"CH"`. */
-  defaultCountry?: PhoneCountry;
-  /** The countries the select offers, in order; "Other" always follows. Default
-   *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country
-   *  left out still shows under its own code. */
-  countries?: readonly PhoneCountryCode[];
-  /** See {@link PhoneInputLabels}. */
-  labels?: LabelOverride<PhoneInputLabels>;
-  /** Classes for the whole field — the select, the input and the lines under them.
-   *  `inputClassName` reaches the `<input>`. */
-  className?: string;
-}
-
-/**
- * A phone number field (kastlan): a country-code select and the number, stored as
- * E.164 and shown grouped.
- *
- * kastlan's contacts kept whatever was typed — "079 …", "+41 (0)79 …", "0041 79 …" —
- * which nobody could dial from the app or match against the next import. This field
- * turns all of those into one stored form, "+41210000001", without taking anything
- * away from the person typing:
- *
- *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT
- *    and "Other") says which country a number without "+" belongs to; the national
- *    trunk 0 may be typed or left out. Typing a "+" or "00" overrides it, and the
- *    select follows the number ("+49 …" switches it to DE). Changing the select moves
- *    the national number to the new country code.
- *  - **E.164 when it reads, the text when it does not.** A number the rules read is
- *    emitted as E.164; anything else ("ask reception", an extension) is emitted exactly
- *    as typed. Never refused, never an error of its own: a contact's number is often
- *    known only roughly, and a field that will not save "079 … (mornings)" makes
- *    people type it into the notes instead. An app that needs a dialable number
- *    checks {@link isE164} on submit.
- *  - **Existing values untouched.** A free-text value from before is shown exactly as
- *    it is, and normalised only when someone edits it — the field never rewrites a
- *    record just by being opened.
- *  - **Grouped when settled.** While typing the field shows what was typed; on blur a
- *    number it read is regrouped by its country ("21 000 00 01").
- *
- * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in
- * every bundle): the six countries have light rules (the trunk 0, a plausible length)
- * and every other country is any "+" with 8–15 digits. A well-formed number that does
- * not exist passes, and German and Austrian landlines, whose area codes vary in length,
- * are grouped only where the split is known (mobile prefixes, the largest cities) and
- * otherwise shown as one block. See `lib/phone.ts`.
- *
- * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in
- * the number's box, and a text hint and the error go under the whole row, attached to
- * the number with `aria-describedby`. The select is named by `labels.countryCode`, and
- * the pair is a group named by a string `label`.
- */
-export function PhoneInput({
-  ref,
-  value,
-  onValueChange,
-  onChange,
-  onBlur,
-  defaultCountry = "CH",
-  countries = PHONE_COUNTRIES,
-  labels,
-  className,
-  inputClassName,
-  label,
-  hint,
-  help,
-  error,
-  invalid,
-  disabled,
-  "aria-describedby": ariaDescribedBy,
-  ...rest
-}: PhoneInputProps) {
-  const text = usePhoneInputLabels(labels);
-  const [country, setCountry] = useState<PhoneCountry>(() => countryOf(value) ?? defaultCountry);
-  // What was typed, shown for as long as it still reads as the value (AmountInput's
-  // draft): the person's own spacing stays under their fingers, and is regrouped on
-  // blur.
-  const [draft, setDraft] = useState<string | null>(null);
-  // The last value this field emitted, to tell its own echo from a value set outside.
-  const [emitted, setEmitted] = useState<string | null>(null);
-  const [seen, setSeen] = useState(value);
-  if (seen !== value) {
-    setSeen(value);
-    if (value !== emitted) {
-      // Set from outside (a reset, another record): its own country, none of our text.
-      const own = countryOf(value);
-      if (own) setCountry(own);
-      setDraft(null);
-    }
-  }
-
-  const emit = (next: string) => {
-    setEmitted(next);
-    onValueChange?.(next);
-  };
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    onChange?.(e);
-    const raw = e.target.value;
-    setDraft(raw);
-    const parsed = parsePhone(raw, country);
-    // A number typed with its own "+" takes the select with it.
-    if (parsed && parsed.country !== country) setCountry(parsed.country ?? "other");
-    emit(parsed?.e164 ?? raw);
-  };
-
-  const handleCountry = (next: PhoneCountry) => {
-    setCountry(next);
-    const stored = storedNumber(value);
-    if (stored) {
-      // "Other", the same country, or a generic number with its own "+": the number
-      // stays, only the way it is shown changes.
-      if (next === "other" || stored.country === null || stored.country === next) {
-        setDraft(null);
-        return;
-      }
-      // A different listed country: the national number moves to its code. If it does
-      // not read there, the digits are kept as text for the person to finish.
-      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);
-      setDraft(null);
-      return;
-    }
-    // Free text (or a draft): read it again under the new country.
-    const source = draft ?? value;
-    const parsed = source.trim() === "" ? null : parsePhone(source, next);
-    if (parsed && parsed.e164 !== value) {
-      setDraft(source);
-      emit(parsed.e164);
-    }
-  };
-
-  const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);
-
-  // The select offers the configured countries, plus the stored number's own if it
-  // is not among them — a select cannot show a value it has no option for.
-  const options: PhoneCountryCode[] = [...countries];
-  if (country !== "other" && !options.includes(country)) options.push(country);
-
-  // A FieldHint "?" rides the number's label line; text — and a FieldHint at Large and
-  // on touch (§4) — goes under the whole row with the error. Through useFieldMessages
-  // since 0.34, not a copy of its rule (DUP-2, DUP-8).
-  const messages = useFieldMessages({
-    hint,
-    // The number's label line takes the help's "?" (0.36); the hint is then the caption.
-    help,
-    name: label ?? rest["aria-label"],
-    error,
-    invalid,
-    describedBy: ariaDescribedBy,
-    ariaInvalid: rest["aria-invalid"],
-  });
-  const named = typeof label === "string" && label !== "";
-
-  return (
-    <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
-          the number 82 px — "Ph…" over "021 (". `large:max-sm:`, the scaled phone width,
-          so a wider screen at Large and Normal keep the one row. */}
-      <div className="flex items-stretch gap-2 large:max-sm:flex-wrap">
-        <Select
-          aria-label={text.countryCode}
-          value={country}
-          disabled={disabled}
-          onChange={(e) => handleCountry(e.target.value as PhoneCountry)}
-          className="w-28 shrink-0"
-          // Stretched to the number's height: a labelled field is taller than an
-          // unlabelled select, and the pair should read as one row.
-          selectClassName="h-full tabular-nums"
-        >
-          {options.map((code) => (
-            <option key={code} value={code}>
-              {`${code} +${PHONE_DIAL_CODES[code]}`}
-            </option>
-          ))}
-          <option value="other">{text.other}</option>
-        </Select>
-        {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}
-        <div className="min-w-0 flex-1 large:max-sm:basis-full">
-          <Input
-            ref={ref}
-            {...rest}
-            type="tel"
-            autoComplete={rest.autoComplete ?? "tel"}
-            label={label}
-            hint={messages.labelHint}
-            invalid={messages.isInvalid}
-            aria-describedby={messages.describedBy}
-            disabled={disabled}
-            value={display}
-            onChange={handleChange}
-            onBlur={(e: FocusEvent<HTMLInputElement>) => {
-              setDraft(null);
-              onBlur?.(e);
-            }}
-            inputClassName={cn("tabular-nums", inputClassName)}
-          />
-        </div>
-      </div>
-      {messages.below}
-    </div>
-  );
-}

package/src/components/picker-sheet.tsx

@@ -1,330 +0,0 @@
-import { useMemo, useRef } from "react";
-import { createPortal } from "react-dom";
-import { X } from "lucide-react";
-import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from "react";
-import { cn } from "../lib/cn";
-import { hasContent } from "../lib/presence";
-import { mergeRefs } from "./field-parts";
-import { CLIPS_ATTRIBUTE } from "../lib/clipping";
-import { DropdownSearchHeader } from "./dropdown";
-import { Button } from "./button";
-import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
-import { useOverlayHistory } from "../hooks/use-overlay-history";
-import { useFocusTrap } from "../hooks/use-focus-trap";
-import { takeEscape, useDismissLayer } from "../hooks/use-dismiss";
-import { useVisualViewport } from "../hooks/use-anchored-panel";
-import { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from "../i18n/kit-labels";
-
-/**
- * Two of the div's own attributes are omitted because this component already owns
- * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's
- * 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"> {
-  open: boolean;
-  onClose: () => void;
-  /** The field's own label — a sheet that fills the screen has to say what it is
-   *  asking for, which the anchored panel got for free by sitting under it. */
-  title?: ReactNode;
-  query: string;
-  onQueryChange: (value: string) => void;
-  searchPlaceholder?: string;
-  /** The search box's accessible name. Default: `searchPlaceholder` — a placeholder is
-   *  gone the moment a character is typed, and is no name to many readers at all. */
-  searchLabel?: string;
-  inputRef?: RefObject<HTMLInputElement | null>;
-  /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else "Close". */
-  closeLabel?: string;
-  /**
-   * The list's keyboard, on the search box — where focus is while the sheet is up:
-   * Up/Down/Home/End/Enter (round 0.34 Wave 2, BUG-5). `ComboboxPanel` passes its own;
-   * without it arrows and Enter in the sheet did nothing at all.
-   */
-  onSearchKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
-  /** The `role="listbox"` the search box filters, for its `aria-controls`. */
-  listboxId?: string;
-  /** The option the arrow keys are on, for the search box's `aria-activedescendant`. */
-  activeId?: string;
-  children: ReactNode;
-  /**
-   * A row pinned under the scrolling list — {@link FullBleedDialog}'s `footer`, on the
-   * picker's sheet (kk run 79 gap 2). Outside the scroller, so it stays put however long
-   * the list; padded for the home indicator, since it is the sheet's bottom edge.
-   */
-  footer?: ReactNode;
-  /**
-   * The kit's one sticky "Done" at the foot of the sheet (Marcel, keksdose #412): the
-   * button a multi-select sheet is left by once its rows are ticked. Ticks apply as
-   * they are made, so it closes (`onClose`) rather than saves. After any `footer`.
-   * {@link ComboboxPanel} turns it on for every `multi` list — `MultiSelect` and
-   * `MultiEntityCombobox` — and a single-select sheet, which closes on the tap that
-   * picks, has no use for it. Label: `pickerSheet.done`, else "Done" (`doneLabel`).
-   */
-  done?: boolean;
-  /** Default: `pickerSheet.done` from the {@link UiKitProvider}, else "Done". */
-  doneLabel?: string;
-  /** The sheet, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —
-   *  merged with the sheet's own ref, which its focus trap holds. */
-  ref?: Ref<HTMLDivElement>;
-}
-
-/**
- * The PHONE presentation of a picker: a full-screen dialog with a search box at
- * the top and the list filling everything below it (Keksdose live #200).
- *
- * *"Paid as full screen dialog with input. Similar to the account select that
- * already appears as full screen."* The account field is a native `<select>`, and
- * a phone browser renders that as a full-screen list — so the app's own pickers,
- * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel
- * squeezed between the field and the keyboard, showing three or four rows of a
- * list that might have two hundred entries.
- *
- * What this fixes beyond size: the panel had to be *placed* (above/below, tracking
- * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every
- * one of those decisions is a chance to be wrong on a screen this small. A sheet
- * has no placement. It also gives the search input somewhere unambiguous to live,
- * which is the other half of the request: *"add filler possibility to the account
- * select or even better right to the hoc the account select is derived from"* —
- * so this lives in the shared picker, not in one form's copy of it.
- *
- * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list
- * scrolls, the header does not, and the body behind it is scroll-locked so a drag
- * that overshoots the list does not move the page underneath.
- */
-export function PickerSheet({
-  open,
-  onClose,
-  title,
-  query,
-  onQueryChange,
-  searchPlaceholder,
-  searchLabel,
-  inputRef,
-  closeLabel,
-  onSearchKeyDown,
-  listboxId,
-  activeId,
-  children,
-  footer,
-  done,
-  doneLabel,
-  "aria-label": ariaLabel,
-  className,
-  style,
-  ref,
-  ...rest
-}: PickerSheetProps) {
-  // Every picker in the kit opens one of these on a phone, and most of them pass
-  // their own `closeLabel` through as `undefined` — so this lookup is what makes the
-  // one way out of a full-screen sheet speak the app's language without each of
-  // them having to (see the prop's note in `EntityCombobox`).
-  const labels = useKitLabels("pickerSheet", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel, done: doneLabel });
-  // `hasContent`, so a `footer` of "" draws no empty bar (refactor audit 2026-10-30, DUP-14).
-  const hasFooter = hasContent(footer) || Boolean(done);
-  useBodyScrollLock(open);
-  /**
-   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:
-   * *"Mouse Back does not only close the select but also the whole edit or create
-   * dialog which is cumbersome."*).
-   *
-   * The sheet is a full-screen overlay over whatever opened it, and on a phone that
-   * is almost always the row editor — which DOES push a history entry
-   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the
-   * editor's entry and took the whole dialog with it, discarding an edit in progress
-   * in order to dismiss a list.
-   *
-   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds
-   * last-in-first-out, and the U-12 regression test in its own suite is written
-   * around "a Modal and a PickerSheet inside it". The sheet simply never called it.
-   *
-   * Nothing else has to change: the hook is a no-op while `open` is false, and it
-   * pops its own entry when the sheet closes some other way (the X, a row, the
-   * backdrop) so history does not accumulate husks.
-   */
-  useOverlayHistory(open, onClose);
-  // The visible region, while the sheet is up — see the `style` below for why a
-  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).
-  const vv = useVisualViewport(open);
-  // A fallback ref so a caller that does not need the handle still gets the opening
-  // focus, rather than the behaviour depending on whether a prop was passed. What that
-  // focus is FOR is on the trap below.
-  const ownRef = useRef<HTMLInputElement | null>(null);
-  const searchRef = inputRef ?? ownRef;
-
-  const sheetRef = useRef<HTMLDivElement>(null);
-  const setSheet = useMemo(() => mergeRefs(sheetRef, ref), [ref]);
-  /**
-   * The sheet said `aria-modal="true"` and then left focus on the field behind it, so
-   * a screen reader was told to hide the page the user's cursor was still standing in
-   * (the audit's *"Only Modal manages focus"*). Through the shared hook rather than
-   * the bare `.focus()` that used to live here: the hook re-reads the tabbable list on
-   * every Tab, which this panel needs more than most — its list is filtered as you
-   * type, so the rows a trap captured at open time are gone by the second keystroke.
-   *
-   * **`initialFocus` is the search box**, not the container, and this is the one place
-   * in the package that overrides `Modal`'s rule. The sheet exists in order to be typed
-   * into (live #212: *"make the text input filter active on select click"*), and the
-   * callers cannot do it themselves — `Combobox`'s field runs
-   * `setOpen(true); sheetInputRef.current?.focus()` in a single `onFocus`, so the focus
-   * call happens while this sheet is still unmounted and the ref is null. Only the
-   * sheet knows when its own input exists. Popping the keyboard is the POINT here,
-   * where in a form dialog it is the cost.
-   *
-   * **`restoreFocus` is off**, which is the uncomfortable half. `Combobox` and
-   * `InlineEntityCombobox` open the sheet from the field's own `onFocus` handler, so
-   * handing focus back to that field on close re-opens the sheet the user has just
-   * dismissed — a row tap would select a value and immediately put the list back over
-   * it. The field that opened it is the only thing that knows whether re-focusing it
-   * means "open"; a sheet that cannot tell must not guess. So the caller does it in
-   * `onClose` where it can: `ComboboxPanel`'s triggers open on a click, and its
-   * `onClose` hands focus back to the trigger (0.52, refactor audit 2026-10-30, INP-7) —
-   * a screen-reader user is in exactly this layout, and <body> was where they landed.
-   */
-  useFocusTrap(sheetRef, {
-    active: open,
-    restoreFocus: false,
-    initialFocus: () => searchRef.current,
-  });
-
-  // The sheet is almost always the INNERMOST overlay — it opens from a field inside a
-  // `Modal` or a `FullBleedDialog`. It is a layer on the Escape stack (Wave 2, DUP-1),
-  // above the dialog, and takes the key on its own element: one press dismissing this
-  // list and the dialog underneath with it was Keksdose live #309 (*"Mouse Back does
-  // not only close the select but also the whole edit or create dialog which is
-  // cumbersome"*), which the Back gesture already learned, on the key a desktop user
-  // reaches for instead.
-  useDismissLayer(open, onClose);
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    takeEscape(e);
-  };
-
-  if (!open || typeof document === "undefined") return null;
-  return 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 whatever
-       inside it holds focus, and `onMouseDown` only stops propagation (live #328). */
-    <div
-      // Spread FIRST, and every attribute below it deliberately wins: `style`,
-      // `onMouseDown` and `onKeyDown` here are not styling choices, they are live
-      // #328, dev#477 and live #309 respectively, and a caller who passed one by
-      // accident would re-open a bug three apps have already paid for. `style` is
-      // MERGED rather than won outright (see below), which is the one case where a
-      // caller has something to add.
-      {...rest}
-      ref={setSheet}
-      // A kit layer and a bottom layer a docked tour card stays clear of (0.50,
-      // docs/tours-harmonization.md §11.6).
-      data-kit-layer=""
-      data-tour-obstruction=""
-      role="dialog"
-      aria-modal="true"
-      // Without it the container cannot take focus, and `useFocusTrap` has nothing to
-      // fall back to when the list is empty and the search box is the only thing in
-      // here — see the hook's "nothing tabbable" branch.
-      tabIndex={-1}
-      onKeyDown={handleKeyDown}
-      // The caller's own name wins over the heading: a sheet titled "Account" in a
-      // form with two of them needs to say WHICH, and `title` is what the user reads
-      // rather than what a reader announces.
-      aria-label={ariaLabel ?? (typeof title === "string" ? title : undefined)}
-      // The sheet is PORTALLED to <body>, so it is not inside the field's own
-      // wrapper — and `useDropdown` closes on any document mousedown landing
-      // outside that wrapper. Tapping a row therefore unmounted the row (open →
-      // false) before its CLICK could fire, so the tap selected nothing at all and
-      // the sheet just vanished (Keksdose dev#477).
-      //
-      // It bit whichever sheet commits on `onClick` — the payee field's, since live
-      // #200, where it hid behind the free-text value the search box was already
-      // setting; and the account field's the moment dev#477 moved it onto the inline
-      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they
-      // beat the document listener and were never affected — which is luck, not a
-      // design, and exactly why the fix belongs to the sheet.
-      //
-      // Stopping the mousedown here rather than teaching every caller about the
-      // portal: the sheet is modal and full-screen, so "a click in here is not an
-      // outside click" is a property of the sheet, not of whoever opened it.
-      onMouseDown={(e) => e.stopPropagation()}
-      // ⚠️ `inset-0` was the whole of Keksdose live #328: *"When the keyboard overlays
-      // the entries I cannot scroll past them … to see also the last entries. Happens
-      // when browsing the account select."*
-      //
-      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is
-      // up every single time it is used on a phone. On Android that shrinks the visual
-      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout
-      // viewport — so the sheet kept its full height with its bottom third behind the
-      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to
-      // that hidden height too: it scrolled to ITS end while the last rows were still
-      // under the keys, and no gesture could bring them out. Nothing was clipped and
-      // nothing looked broken, which is why it reads as "I cannot scroll past them".
-      //
-      // `visualViewport` is the API that answers rather than hints (the live #292
-      // lesson): it reports the region actually on screen, keyboard and pinch-pan
-      // included, and it fires on the keyboard opening and closing. Pinned to that box,
-      // the sheet ends where the keys begin and the list's own scroll covers the rest.
-      // `useVisualViewport` returns null when there is nothing to correct, and then
-      // this is character-for-character the sheet that was here before.
-      // A caller's `style` is kept and the correction laid OVER it: the three values
-      // below are the whole of live #328, so they are not negotiable, but a z-index
-      // or a transition from outside has nothing to do with them. Without a visual
-      // viewport to correct for this is character-for-character what the caller passed.
-      style={vv ? { ...style, top: vv.top, height: vv.height, bottom: "auto" } : style}
-      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>
-        <button
-          type="button"
-          aria-label={labels.close}
-          onClick={onClose}
-          className="rounded p-1.5 text-muted hover:bg-hover"
-        >
-          <X className="size-5" />
-        </button>
-      </div>
-      <DropdownSearchHeader
-        query={query}
-        onQueryChange={onQueryChange}
-        inputRef={searchRef}
-        placeholder={searchPlaceholder}
-        aria-label={searchLabel ?? searchPlaceholder}
-        // Focus is in this box while the sheet is up, so this is where the list's keys
-        // land and what has to name the list and the row the arrows are on (BUG-5).
-        onKeyDown={onSearchKeyDown}
-        listboxId={listboxId}
-        activeId={activeId}
-      />
-      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the
-          viewport — a flex child defaults to min-height:auto. */}
-      {/* Marked as the scroller it is (`CLIPS_ATTRIBUTE`), so a Tooltip in a row —
-          `Combobox`'s `optionAdornment` — portals out under jsdom as it does in the
-          browser rather than joining the option's name (keksdose E8). */}
-      <div {...{ [CLIPS_ATTRIBUTE]: "" }} className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-        {children}
-      </div>
-      {hasFooter && (
-        <div
-          data-picker-sheet-footer=""
-          className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle bg-surface px-3 pt-3"
-          style={{ paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))" }}
-        >
-          {footer}
-          {done && (
-            // Full width: the one thing left to do on the sheet, under the thumb.
-            <Button type="button" className="flex-1" onClick={onClose}>
-              {labels.done}
-            </Button>
-          )}
-        </div>
-      )}
-    </div>,
-    document.body,
-  );
-}
-
-/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,
- *  so a list is comfortable to hit with a thumb rather than merely legible. */
-export const SHEET_ROW_CLASS = cn(
-  "flex min-h-11 w-full items-center gap-2 px-4 py-2 text-start text-base",
-  "text-primary hover:bg-hover",
-);

package/src/components/pie-chart-labels.ts

@@ -1,40 +0,0 @@
-// All user-facing strings for `PieChart`, as the `pieChart` namespace of
-// `<UiKitProvider labels>`, and per chart the `labels` prop over that.
-//
-// A module of its own, with no recharts in it, for the reason `series-chart-labels`
-// is one: the label registry (src/i18n) imports the defaults, and must not pull the
-// chart library in behind them.
-
-export interface PieChartLabels {
-  /** Accessible name of the group of keyboard stops laid over the slices — one tab
-   *  stop, arrow keys between them. */
-  slices: string;
-  /**
-   * One slice's accessible name. `value` arrives through `formatValue`, `percent` as
-   * the slice's share of what is drawn, already formatted in the locale ("42 %" in
-   * German, "42%" in English) — the function only arranges them.
-   */
-  slice: (label: string, value: string, percent: string) => string;
-  /**
-   * One slice's accessible name under `redact` (0.52): the label and the share, with no
-   * amount. `redact` blurs every figure on screen but not the ring, and the ring's names
-   * are attributes on untagged elements, which a session replay or a redaction keyed on
-   * `[data-private]` reads as they are. `percent` as for {@link PieChartLabels.slice}.
-   */
-  sliceShare: (label: string, percent: string) => string;
-  /** The caption over the donut's centre figure. */
-  total: string;
-  /** What a chart with nothing to draw says, when the caller passes no `empty`. */
-  empty: string;
-  /** Accessible name of the chart's legend (a group of switches, one per slice). */
-  legend: string;
-}
-
-export const DEFAULT_PIE_CHART_LABELS: PieChartLabels = {
-  slices: "Chart slices",
-  slice: (label, value, percent) => `${label}: ${value} (${percent})`,
-  sliceShare: (label, percent) => `${label}: ${percent}`,
-  total: "Total",
-  empty: "No data",
-  legend: "Categories",
-};