@eifi1/ui-kit 0.34.0 → 0.35.0

package/src/components/settings-fields.tsx

@@ -52,7 +52,8 @@ export interface ThemeSettingSelectProps
  * choice visible without opening anything, in every app (keksdose offered light and dark
  * only; its store already knew "system"). A {@link ToggleGroup}'s props pass through —
  * `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the options
- * and the value, which this owns.
+ * and the value, which this owns. `ref` too: the group, whose `focus()` lands on the
+ * checked option (pinned in round 0.35 R4; the select variant's `ref` is the `<select>`).
  *
  * The options wrap rather than truncate (`overflow="wrap"`), as in its two siblings
  * {@link TextSizeSetting} and {@link ContrastSetting} (0.32.1, Kurvenschmiede's 0.32
@@ -161,7 +162,8 @@ export function LanguageSetting({ options, ...rest }: LanguageSettingProps) {
 /**
  * What {@link TextSizeSetting} and {@link ContrastSetting} take: a {@link ToggleGroup}'s
  * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the
- * options and the value, which they own, as {@link ThemeSettingToggleProps} does.
+ * options and the value, which they own, as {@link ThemeSettingToggleProps} does. `ref`
+ * is the group's, as there (round 0.35 R4).
  */
 type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "options" | "label"> & {
   value: T;

package/src/components/stat-tile.tsx

@@ -1,5 +1,5 @@
 import { createContext, isValidElement, useContext, useId, useLayoutEffect, useState } from "react";
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from "react";
+import type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from "react";
 import { ArrowDown, ArrowUp, Minus } from "lucide-react";
 import { cn } from "../lib/cn";
 import { useKitLabels, useKitLink, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
@@ -115,8 +115,14 @@ export interface StatTileLinkProps {
   children: ReactNode;
 }
 
+/**
+ * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they
+ * ride on to the {@link Card} that is the tile, so the ref is the tile's own `<div>` — the
+ * one to scroll into view or measure. `ComponentPropsWithoutRef` only kept it out of the
+ * type; at runtime `{...rest}` already carried it there.
+ */
 export interface StatTileProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+  extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
   /** What is measured. Also the tile's accessible name when it is a link/button. */
   label: ReactNode;
   /**

package/src/components/swipeable-row.tsx

@@ -51,9 +51,8 @@ interface SwipeActionBase {
  * dark-mode pastel.
  *
  * **`paint`** follows the same rule for an app's documented exception (see
- * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so
- * existing call sites compile; there the label is white unless the classes set a
- * colour, and the idle panel is still dimmed.
+ * {@link SwipePaint}). The old path, a `className` / `armedClassName` pair under a white
+ * label and dimmed idle, was deprecated in 0.33 and removed in 0.35 (round 0.35 R1).
  */
 export type SwipeAction = SwipeActionBase &
   (
@@ -61,27 +60,12 @@ export type SwipeAction = SwipeActionBase &
         /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */
         tone: SwipeTone;
         paint?: never;
-        className?: never;
-        armedClassName?: never;
       }
     | {
         /** A documented app exception: idle a 14 % wash of `fill` under the body ink,
          *  armed `fill` under `foreground`. */
         paint: SwipePaint;
         tone?: never;
-        className?: never;
-        armedClassName?: never;
-      }
-    | {
-        tone?: never;
-        paint?: never;
-        /** @deprecated 0.33 — pass `tone`, or `paint` for an exception; removed in 0.35.
-         *  Background utility class while the action is previewed but not yet armed; the
-         *  panel is dimmed then, and its text is white unless this sets a text colour. */
-        className: string;
-        /** @deprecated 0.33 — pass `tone`, or `paint`; removed in 0.35. Background
-         *  utility class once the drag has passed this action's threshold. */
-        armedClassName: string;
       }
   );
 
@@ -114,21 +98,16 @@ export const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {
 const PAINT_IDLE = "bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary";
 const PAINT_ARMED = "bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]";
 
-/** The panel's colour classes, inline style and dimming for one action and state. */
-function panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties; dim: boolean } {
-  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"], dim: false };
-  if (action.paint) {
-    return {
-      className: armed ? PAINT_ARMED : PAINT_IDLE,
-      style: {
-        "--swipe-paint-fill": action.paint.fill,
-        "--swipe-paint-fg": action.paint.foreground,
-      } as CSSProperties,
-      dim: false,
-    };
-  }
-  // The deprecated path, as it was: white text under the caller's fill, dimmed idle.
-  return { className: cn("text-white", armed ? action.armedClassName : action.className), dim: !armed };
+/** The panel's colour classes and inline style for one action and state. */
+function panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties } {
+  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"] };
+  return {
+    className: armed ? PAINT_ARMED : PAINT_IDLE,
+    style: {
+      "--swipe-paint-fill": action.paint.fill,
+      "--swipe-paint-fg": action.paint.foreground,
+    } as CSSProperties,
+  };
 }
 
 /**
@@ -296,11 +275,10 @@ export function SwipeableRow({
           className={cn(
             "pointer-events-none absolute inset-0 flex items-center gap-2 px-4",
             "text-xs font-medium transition-all",
+            // No dimming: a tone or a paint says "not yet armed" with the soft→solid
+            // step, which keeps its label readable at both ends (the 0.33 rule; the
+            // dimmed path went with `className` / `armedClassName` in 0.35).
             look.className,
-            // The old path only: dimmed until the drag has passed a threshold. A tone
-            // or a paint says it with the soft→solid step instead, which keeps its
-            // label readable at both ends.
-            look.dim && "opacity-60",
             // The panel is anchored to the edge the row is uncovering, so the label
             // sits where the eye already is rather than across the screen. That edge is
             // physical, while a flex row starts at the INLINE start — so in RTL the two

package/src/components/tooltip.tsx

@@ -1,6 +1,7 @@
 import {
   cloneElement,
   isValidElement,
+  useCallback,
   useEffect,
   useId,
   useLayoutEffect,
@@ -12,6 +13,7 @@ import {
   type PointerEvent,
   type ReactElement,
   type ReactNode,
+  type Ref,
   type RefObject,
 } from "react";
 import { createPortal } from "react-dom";
@@ -21,6 +23,7 @@ import { useAnchoredRect, type AnchorRect } from "../hooks/use-anchored-rect";
 import { viewportSize } from "../hooks/use-anchored-panel";
 import { dirOf, type Direction } from "../lib/direction";
 import { hasClippingAncestor } from "../lib/clipping";
+import { assignRef } from "../lib/refs";
 
 /** The attribute that marks an element as a clipping container for {@link Tooltip}'s
  *  auto-portal, whatever its computed `overflow` — `<div data-clips>` or
@@ -129,6 +132,14 @@ export interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
    */
   tap?: TooltipTap;
   children: ReactNode;
+  /**
+   * The trigger WRAPPER — the `<span>` the rest of the props go to, around the caller's
+   * child (round 0.35 R4, as Card and EmptyState took one in 0.34) — merged with its own
+   * ref, which the bubble is anchored to and dismissed by. Not the bubble: a portalled
+   * one exists only while it is up. On the empty-label branch there is no wrapper, so
+   * the ref stays `null` (see the ⚠️ above).
+   */
+  ref?: Ref<HTMLSpanElement>;
 }
 
 /** What each variant below takes: the resolved `side` and `tap`, and every span attribute
@@ -630,6 +641,22 @@ function useTooltipTrigger(
   return { open, dismissed, handlers };
 }
 
+/**
+ * The trigger wrapper's own ref, and one callback ref that hands the wrapper to the
+ * caller's `ref` as well (round 0.35 R4).
+ */
+function useTriggerRef(ref: Ref<HTMLSpanElement> | undefined) {
+  const triggerRef = useRef<HTMLSpanElement | null>(null);
+  const setTrigger = useCallback(
+    (el: HTMLSpanElement | null) => {
+      triggerRef.current = el;
+      assignRef(ref, el);
+    },
+    [ref],
+  );
+  return { triggerRef, setTrigger };
+}
+
 /** The variant that lives next to its trigger, and — when `detect` is on, which is the
  *  default — moves its bubble to `<body>` when that turns out to be inside a clipping
  *  container (see "Inside a scroll container" on {@link Tooltip}).
@@ -656,10 +683,11 @@ function InPlaceTooltip({
   lazy,
   tap,
   children,
+  ref,
   ...rest
 }: TooltipVariantProps & { detect: boolean; lazy: boolean }) {
   const id = useId();
-  const triggerRef = useRef<HTMLSpanElement | null>(null);
+  const { triggerRef, setTrigger } = useTriggerRef(ref);
   const [clipped, setClipped] = useState(false);
   const [dir, setDir] = useState<Direction>("ltr");
   // The reading direction on every request (the clamp keeps the start edge of a bubble
@@ -677,7 +705,8 @@ function InPlaceTooltip({
   // phantom-scroll bug whether or not anyone opens it.
   useLayoutEffect(() => {
     if (detect) setClipped(hasClippingAncestor(triggerRef.current));
-  }, [detect]);
+    // `triggerRef` is the same object for the component's life (useTriggerRef's useRef).
+  }, [detect, triggerRef]);
   return (
     // No role for this span: its handlers track whether the bubble is up and activate
     // nothing; the caller's child is the interactive element, keeps its own handlers,
@@ -687,7 +716,7 @@ function InPlaceTooltip({
       // a caller passing an `onFocus` of its own must not replace them (its pointer
       // handlers are called from them).
       {...rest}
-      ref={triggerRef}
+      ref={setTrigger}
       // Clipped for the one render in which the bubble is measured (see useViewportClamp):
       // that layout must not reach the page's width.
       style={measuring ? { ...rest.style, overflow: "clip" } : rest.style}
@@ -1041,9 +1070,10 @@ function PortalTooltip({
   redact,
   tap,
   children,
+  ref,
   ...rest
 }: TooltipVariantProps) {
-  const triggerRef = useRef<HTMLSpanElement | null>(null);
+  const { triggerRef, setTrigger } = useTriggerRef(ref);
   // The trigger's reading direction, read when the bubble is asked for (an event, not a
   // render): it resolves `start` / `end`, and the portalled bubble — which has left the
   // subtree it would have inherited `dir` from — carries it too.
@@ -1062,9 +1092,10 @@ function PortalTooltip({
         // As in `InPlaceTooltip`: the caller's attributes first, the handlers that run
         // this component after them. The BUBBLE is deliberately not given them — it
         // is portalled to `<body>`, and an id or a tour anchor duplicated onto a node
-        // that only exists while hovered would match twice or match nothing.
+        // that only exists while hovered would match twice or match nothing. So, too,
+        // the caller's `ref` (round 0.35 R4).
         {...rest}
-        ref={triggerRef}
+        ref={setTrigger}
         className={cn("relative inline-flex", className)}
         {...handlers}
       >

package/src/components/translation-review.tsx

@@ -33,12 +33,13 @@ import { BulkActionBar } from "./bulk-action-bar";
 import { Checkbox } from "./checkbox";
 import { Chip } from "./chip";
 import { DataTable } from "./data-table";
-import type { DataTableColumn, DataTableProps, MobileSwipeActions, SortState } from "./data-table";
+import type { DataTableColumn, DataTableProps, MobileSwipeActions } from "./data-table";
 import { Disclosure } from "./disclosure";
 import { SearchField } from "./search-field";
 import { toast } from "./toast";
 import type { SwipeAction } from "./swipeable-row";
 import { ToggleGroup } from "./toggle-group";
+import { useSharedTableView } from "./use-table-state";
 import { TranslationReviewEditor } from "./translation-review-editor";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels";
 import type { TranslationReviewLabels } from "./translation-review-labels";
@@ -168,7 +169,8 @@ export interface TranslationReviewPanelProps {
   /** Rows per page. Default 50. */
   pageSize?: number;
   /** Persists the table's sort and page size (DataTable's `storageKey`), under the
-   *  prefix below. */
+   *  prefix below — under {@link groupBy}, the one sort and page size every group
+   *  shares, in the same place (0.35). */
   storageKey?: string;
   /**
    * The `localStorage` prefix in front of `storageKey` (DataTable's `storageKeyPrefix`).
@@ -257,7 +259,14 @@ export interface TranslationReviewPanelProps {
    * reference; a column sort orders the rows INSIDE every group alike. Each group pages
    * on its own, `pageSize` rows at a time — a header then always stands over its own
    * rows, and paging one area does not move another — rather than one pager cutting
-   * through the headers. `storageKey` keeps persisting the ungrouped table only.
+   * through the headers. The page SIZE is one for all of them, as the sort is: a
+   * group's pager changes it everywhere.
+   *
+   * `storageKey` persists that one view — the sort and the page size — in the place the
+   * ungrouped table keeps its own (same key, same prefix, same blob), read on mount and
+   * written on a change, so a reviewer switching the grouping on or off keeps both
+   * (0.35, Kurvenschmiede; before, it persisted the ungrouped table only). What only
+   * the ungrouped table has — column widths, hidden columns — stays in the blob for it.
    *
    * Groups fold (each on its own, remembered while the panel lives), and a folded group's
    * rows are not rendered at all — only its header. Which groups start open is
@@ -558,8 +567,15 @@ export function TranslationReviewPanel({
   // has mounted and taken focus, the group that asked.
   const [confirming, setConfirming] = useState<string | null>(null);
   const confirmFocus = useRef<string | null>(null);
-  // One sort for every group's table, so a header click orders all of them alike.
-  const [groupSorts, setGroupSorts] = useState<SortState[]>([]);
+  // One view for every group's table — one sort, so a header click orders all of them
+  // alike, and one page size — kept under `storageKey` in the single table's own blob, so
+  // switching the grouping keeps both (0.35, Kurvenschmiede).
+  const groupView = useSharedTableView({
+    active: groupBy !== undefined,
+    storageKey,
+    storageKeyPrefix,
+    defaultPageSize: pageSize,
+  });
 
   const setFilter = (patch: Partial<TranslationReviewFilter>) => {
     const next = { ...filter, ...patch };
@@ -870,8 +886,10 @@ export function TranslationReviewPanel({
             frame: false,
             chrome: "minimal" as const,
             maxBodyHeight: "none",
-            sorts: groupSorts,
-            onSortsChange: setGroupSorts,
+            sorts: groupView.sorts,
+            onSortsChange: groupView.setSorts,
+            pageSize: groupView.pageSize,
+            onPageSizeChange: groupView.setPageSize,
             labels: { table: group.name },
           }
         : { storageKey, storageKeyPrefix })}

package/src/components/use-table-state.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useSearchParams } from "react-router";
+import { useKitTableStorageKeyPrefix } from "../i18n/kit-labels";
 import { readStored, writeStored } from "../lib/safe-storage";
 import {
   decodeFilterValue,
@@ -45,6 +46,13 @@ function serializePersisted(state: PersistedState): string {
   return JSON.stringify(state);
 }
 
+/** A stored page size as a table holds it — `"all"` is `Infinity` — or `fallback`. */
+function storedPageSize(stored: Partial<PersistedState>, fallback: number): number {
+  if (stored.pageSize === "all") return Infinity;
+  if (typeof stored.pageSize === "number" && stored.pageSize > 0) return stored.pageSize;
+  return fallback;
+}
+
 // ---------- URL sync helpers ----------
 
 const URL_FILTER_PREFIX = "f.";
@@ -251,8 +259,8 @@ function writeUrlState<T>(
  * * **Persistence writes on every change, the URL only when asked.** `storageKey` is the
  *   per-table identity; `urlSync` is opt-in because only some tables want their view in
  *   a shareable address.
- * * **A controlled filter or sort that changes sends the table back to page 1.** See
- *   the note at the reset below.
+ * * **A controlled filter, sort or page size that changes sends the table back to page
+ *   1.** See the note at the reset below.
  */
 export function useTableState<T>({
   columns,
@@ -262,6 +270,7 @@ export function useTableState<T>({
   defaultPageSize,
   sortsProp,
   filtersProp,
+  pageSizeProp,
 }: {
   columns: DataTableColumn<T>[];
   storageKey?: string;
@@ -270,6 +279,7 @@ export function useTableState<T>({
   defaultPageSize: number;
   sortsProp?: SortState[];
   filtersProp?: FilterState;
+  pageSizeProp?: number;
 }) {
   const { enabled: urlSync, prefix: urlPrefix } = resolveTableUrlSync(urlSyncOption);
   const keys = useMemo(() => urlKeys(urlPrefix), [urlPrefix]);
@@ -312,21 +322,21 @@ export function useTableState<T>({
   // is never painted and never written to the URL. Not on mount: a deep link's `p=3`
   // must survive the owner's first render. (In `serverPagination` mode this state is
   // unused — the owner's `page` is the page, and resetting it stays the owner's job.)
+  // A controlled page size counts too: the groups of `TranslationReviewPanel` share one,
+  // and a group paged deep into its rows starts over when another group's pager changes it.
   const controlledSig =
-    sortsProp !== undefined || filtersProp !== undefined
-      ? JSON.stringify([sortsProp ?? null, filtersProp ?? null])
+    sortsProp !== undefined || filtersProp !== undefined || pageSizeProp !== undefined
+      ? JSON.stringify([sortsProp ?? null, filtersProp ?? null, String(pageSizeProp)])
       : null;
   const [seenControlledSig, setSeenControlledSig] = useState(controlledSig);
   if (seenControlledSig !== controlledSig) {
     setSeenControlledSig(controlledSig);
     setPage(0);
   }
-  const [pageSize, setPageSize] = useState<number>(() => {
-    if (urlInitial.pageSize !== undefined) return urlInitial.pageSize;
-    if (initial.pageSize === "all") return Infinity;
-    if (typeof initial.pageSize === "number" && initial.pageSize > 0) return initial.pageSize;
-    return defaultPageSize;
-  });
+  const [internalPageSize, setPageSize] = useState<number>(() =>
+    urlInitial.pageSize !== undefined ? urlInitial.pageSize : storedPageSize(initial, defaultPageSize),
+  );
+  const pageSize = pageSizeProp ?? internalPageSize;
   const [widths, setWidths] = useState<Record<string, number>>(() => initial.widths ?? {});
   const [hiddenCols, setHiddenCols] = useState<Set<string>>(() => new Set(initial.hidden ?? []));
   const [showSettings, setShowSettings] = useState(false);
@@ -398,6 +408,77 @@ export function useTableState<T>({
   };
 }
 
+// ---------- One view over several tables ----------
+
+/** What {@link useSharedTableView} keeps. */
+export interface SharedTableView {
+  sorts: SortState[];
+  setSorts: (next: SortState[]) => void;
+  /** `Infinity` for "all", as a table holds it. */
+  pageSize: number;
+  setPageSize: (next: number) => void;
+}
+
+/**
+ * One table view — the sort and the page size — for an owner that draws it as SEVERAL
+ * tables over one `storageKey`: `TranslationReviewPanel`'s groups, which sort and page
+ * alike (0.35, Kurvenschmiede: its grouped review stored no view at all). Pass them to
+ * each table as `sorts`/`onSortsChange` and `pageSize`/`onPageSizeChange`.
+ *
+ * Kept in the very blob a `DataTable` with that `storageKey` keeps, not in a format of
+ * its own, so the single table and the groups read each other's view. What the blob
+ * holds besides (filters, column widths, hidden columns) is carried over as stored, for
+ * the single table to find as it left it. Read when `active` turns on — on mount, or
+ * when the owner switches to this view — and written on a change, never on a read. The
+ * prefix resolves as DataTable's does: prop > provider > the kit's.
+ */
+export function useSharedTableView({
+  active,
+  storageKey,
+  storageKeyPrefix,
+  defaultPageSize,
+}: {
+  active: boolean;
+  storageKey?: string;
+  storageKeyPrefix?: string;
+  defaultPageSize: number;
+}): SharedTableView {
+  const providerPrefix = useKitTableStorageKeyPrefix();
+  const prefix = storageKeyPrefix ?? providerPrefix ?? DEFAULT_PERSIST_PREFIX;
+  const read = () => {
+    const stored = active ? loadPersisted(storageKey, prefix) : {};
+    return { sorts: normalizeSorts(stored.sort), pageSize: storedPageSize(stored, defaultPageSize) };
+  };
+  const [view, setView] = useState(read);
+  // Adjusted during render when `active` turns on, so the first render of the groups
+  // already has the view the single table left, not a frame of the default.
+  const [wasActive, setWasActive] = useState(active);
+  if (active !== wasActive) {
+    setWasActive(active);
+    if (active) setView(read());
+  }
+  const change = (patch: Partial<typeof view>) => {
+    const next = { ...view, ...patch };
+    setView(next);
+    if (!active || !storageKey) return;
+    const stored = loadPersisted(storageKey, prefix);
+    const blob: PersistedState = {
+      sort: next.sorts,
+      filters: stored.filters ?? {},
+      pageSize: next.pageSize === Infinity ? "all" : next.pageSize,
+      widths: stored.widths,
+      hidden: stored.hidden,
+    };
+    writeStored(prefix + storageKey, serializePersisted(blob));
+  };
+  return {
+    sorts: view.sorts,
+    setSorts: (sorts) => change({ sorts }),
+    pageSize: view.pageSize,
+    setPageSize: (pageSize) => change({ pageSize }),
+  };
+}
+
 // ---------- Owner-held table state, mirrored to the URL ----------
 
 export interface UseTableUrlStateOptions<T> {

package/src/components/user-avatar.tsx

@@ -69,9 +69,9 @@ export interface UserAvatarProps extends Omit<ComponentPropsWithRef<"span">, "ch
    * in the surface colour so it reads as its own mark (keksdose account-menu ~385,
    * top-bar :152). Its `label` is read as text where the dot sits — inside a button
    * named by its content it joins that name. In `TopBarActionMenu`'s `trigger` the
-   * button is named by the menu's `ariaLabel` followed by this label: "Account menu
+   * button is named by the menu's `aria-label` followed by this label: "Account menu
    * 3 unread". The initials stay hidden either way, so the person's name is NOT part
-   * of it — put it in `ariaLabel` ("Marcel Eifert, account menu") if it should be.
+   * of it — put it in `aria-label` ("Marcel Eifert, account menu") if it should be.
    */
   badge?: UserAvatarBadge | null;
 }

package/src/components/wizard-stepper.tsx

@@ -5,16 +5,12 @@ import { cn } from "../lib/cn";
 export function WizardStepper({
   steps,
   current,
-  "aria-label": ariaLabelAttr,
-  ariaLabel,
+  "aria-label": ariaLabel,
 }: {
   steps: { key: string; label: string }[];
   current: string;
   /** Names the list of steps ("Import steps"). */
   "aria-label"?: string;
-  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
-   *  Names the steps only when `aria-label` is absent. */
-  ariaLabel?: string;
 }) {
   const currentIndex = steps.findIndex((s) => s.key === current);
   return (
@@ -22,7 +18,7 @@ export function WizardStepper({
     // (0.32.1, the 360 px Extra-large sweep; docs/text-size-harmonization.md §4).
     // "Upload — Map columns — Confirm" ran 22 px past a 360 px phone at Extra large.
     // Where the steps fit, they stay one row.
-    <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabelAttr ?? ariaLabel}>
+    <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabel}>
       {steps.map((step, i) => (
         <li key={step.key} className="flex items-center gap-1">
           {i > 0 && <span className="w-4 border-t border-subtle" />}

package/src/currencies.ts

@@ -0,0 +1,70 @@
+// `@eifi1/ui-kit/currencies` — the currencies the kit's pickers offer, as plain data
+// (0.35, keksdose's 0.34 report).
+//
+// This module imports NOTHING: no React, no stylesheet, no other kit module. That is the
+// entry's whole promise, because an app's BUILD reads it in Node — keksdose's Vite plugin
+// builds its flag-icons subset from these country codes while Vite loads its config. Until
+// 0.35 that plugin parsed the `country` literals out of dist/components/currency-select.js;
+// 0.34 moved the list into the picker's option list and 91 of its test files failed at
+// load. A file inside dist/ is not something the kit promises; an entry is.
+// packaging-contract.test.ts pins the purity, scripts/verify-package.mjs the load in Node.
+//
+// CurrencySelect, AmountInput's currency chip and NumberInput's code detection read this
+// same array (components/currency-option-list re-exports it, and currency-select as it
+// always has), so the list the pickers show and the flags an app ships cannot drift.
+
+export interface CurrencyOption {
+  code: string;
+  name: string;
+  symbol: string;
+  /** ISO 3166-1 alpha-2 country code (lowercase) used by flag-icons. */
+  country: string;
+}
+
+export const CURRENCIES: CurrencyOption[] = [
+  { code: "EUR", name: "Euro", symbol: "€", country: "eu" },
+  { code: "USD", name: "US Dollar", symbol: "$", country: "us" },
+  { code: "GBP", name: "British Pound", symbol: "£", country: "gb" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF", country: "ch" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥", country: "jp" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "CA$", country: "ca" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$", country: "au" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$", country: "nz" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr", country: "se" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr", country: "no" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr", country: "dk" },
+  { code: "PLN", name: "Polish Zloty", symbol: "zł", country: "pl" },
+  { code: "CZK", name: "Czech Koruna", symbol: "Kč", country: "cz" },
+  { code: "HUF", name: "Hungarian Forint", symbol: "Ft", country: "hu" },
+  { code: "RON", name: "Romanian Leu", symbol: "lei", country: "ro" },
+  { code: "BGN", name: "Bulgarian Lev", symbol: "лв", country: "bg" },
+  { code: "TRY", name: "Turkish Lira", symbol: "₺", country: "tr" },
+  { code: "RUB", name: "Russian Ruble", symbol: "₽", country: "ru" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "¥", country: "cn" },
+  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$", country: "hk" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$", country: "sg" },
+  { code: "INR", name: "Indian Rupee", symbol: "₹", country: "in" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$", country: "br" },
+  { code: "MXN", name: "Mexican Peso", symbol: "MX$", country: "mx" },
+  { code: "ZAR", name: "South African Rand", symbol: "R", country: "za" },
+  { code: "ILS", name: "Israeli Shekel", symbol: "₪", country: "il" },
+  { code: "AED", name: "UAE Dirham", symbol: "د.إ", country: "ae" },
+];
+
+/**
+ * Each currency code → the flag the kit paints for it: the lowercase ISO 3166-1 alpha-2
+ * code flag-icons names it by (`fi-ch`, `flags/4x3/ch.svg`). `CHF` → `"ch"`, `EUR` →
+ * `"eu"` (flag-icons has the EU's flag under that code).
+ *
+ * Derived from {@link CURRENCIES}, so a currency the pickers gain is a flag here too. An
+ * app that ships only the flags it renders builds its subset from these values:
+ *
+ * ```ts
+ * // vite.config.ts — plain Node, no DOM
+ * import { CURRENCY_COUNTRIES } from "@eifi1/ui-kit/currencies";
+ * const flags = new Set(Object.values(CURRENCY_COUNTRIES));
+ * ```
+ */
+export const CURRENCY_COUNTRIES: Record<string, string> = Object.fromEntries(
+  CURRENCIES.map((c) => [c.code, c.country]),
+);

package/src/demo/demo-banner.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 import { ChevronDown, ChevronUp, Timer } from "lucide-react";
 
 import { cn } from "../lib/cn";
@@ -30,7 +30,12 @@ function timeText(countdown: DemoCountdown, labels: DemoLabels): string {
     : labels.hoursLeft(countdown.hours, countdown.minutes);
 }
 
-export interface DemoBannerProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+/**
+ * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2). They
+ * go on to the {@link AlertBanner} strip, so the ref is the strip's own `<div>` — never a
+ * link or a button: the banner takes no `href` or `onClick` of its own.
+ */
+export interface DemoBannerProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
   /** The demo's end: `expires_at` from the `TokenResponse`, or `demo_expires_at` from
    *  `/auth/me` (§5.3). */
   expiresAt: DemoExpiry | null | undefined;