@eifi1/ui-kit 0.31.0 → 0.32.0

package/src/billing/plan-price.ts

@@ -0,0 +1,101 @@
+import { currencyMinorDigits, formatMoney } from "../lib/format";
+
+/**
+ * Money and periods of the plan catalogue (docs/billing-harmonization.md §3.1, §4, §12.17).
+ *
+ * Money crosses the wire as INTEGER MINOR UNITS plus an ISO currency, never as a float
+ * (§4): 4900 CHF is CHF 49.00. The kit turns it into the reader's notation with
+ * `formatMoney`, so no app divides by 100 by hand.
+ */
+
+/** A billing period: the provider charges per month or per year. */
+export type BillingInterval = "month" | "year";
+
+/** The two currencies every app sells in (§2.6). */
+export type BillingCurrency = "CHF" | "EUR";
+
+/**
+ * The periods in the order the picker offers them — YEARLY FIRST (§12.17): a Merchant of
+ * Record takes about 5 % + 0.50 per transaction, so a small monthly price loses a fifth
+ * of itself (CHF 3 a month loses about 22 %). The page leads with the yearly price.
+ */
+export const BILLING_INTERVALS: readonly BillingInterval[] = Object.freeze(["year", "month"]);
+
+/** One currency's prices, in minor units, per period. A period left out is not offered. */
+export type PlanIntervalPrices = Partial<Record<BillingInterval, number>>;
+
+/** A plan's prices as server-kit's `PlanSpec.prices` sends them: currency → period →
+ *  minor units, GROSS (§12.17). */
+export type PlanPrices = Partial<Record<BillingCurrency, PlanIntervalPrices>>;
+
+/**
+ * What one plan costs in one currency and period:
+ * - `price` — a gross amount in minor units;
+ * - `free` — a plan with no prices at all (keksdose's free plan), or a price of 0;
+ * - `not-offered` — a plan with prices, but none for this currency and period.
+ */
+export type PlanPriceAnswer =
+  | { kind: "price"; minor: number }
+  | { kind: "free" }
+  | { kind: "not-offered" };
+
+/** Whether a price table holds any figure at all. */
+function hasAnyPrice(prices: PlanPrices | null | undefined): boolean {
+  if (!prices) return false;
+  return Object.values(prices).some(
+    (byInterval) => byInterval && Object.values(byInterval).some((v) => typeof v === "number"),
+  );
+}
+
+/** What `prices` says for `currency` and `interval` — see {@link PlanPriceAnswer}. */
+export function planPrice(
+  prices: PlanPrices | null | undefined,
+  currency: BillingCurrency,
+  interval: BillingInterval,
+): PlanPriceAnswer {
+  const minor = prices?.[currency]?.[interval];
+  if (typeof minor === "number" && Number.isFinite(minor)) {
+    return minor === 0 ? { kind: "free" } : { kind: "price", minor };
+  }
+  return hasAnyPrice(prices) ? { kind: "not-offered" } : { kind: "free" };
+}
+
+/** Minor units as the amount: 4900 CHF → 49, 1250 EUR → 12.5. The currency's minor unit
+ *  comes from `Intl` (CHF and EUR have 2); a code `Intl` cannot read counts as 2. */
+export function minorToMajor(minor: number, currency: string): number {
+  const digits = currencyMinorDigits(currency) ?? 2;
+  return minor / 10 ** digits;
+}
+
+/**
+ * A price in minor units, in the reader's notation: "CHF 49", "CHF 4.90", "49 €",
+ * "4,90 €". A whole amount drops its decimals — a price list reads "CHF 49" — and any
+ * other keeps all of them ("CHF 4.90", never "CHF 4.9").
+ */
+export function formatPlanPrice(minor: number, currency: string, options: { locale?: string } = {}): string {
+  const digits = currencyMinorDigits(currency) ?? 2;
+  const whole = Number.isInteger(minor) && minor % 10 ** digits === 0;
+  return formatMoney(minorToMajor(minor, currency), currency, {
+    locale: options.locale,
+    digits: whole ? 0 : digits,
+  });
+}
+
+/**
+ * The currency a payer starts with when the app stores none (§12.18): francs where the
+ * locale's region is Switzerland or Liechtenstein, euros everywhere else — "de-CH" and
+ * "fr-CH" CHF, "de" (Germany, once `Intl` fills the region in) and "it" EUR.
+ *
+ * Only the fallback: an account's stored currency comes first (keksdose's
+ * `reporting_currency` — a de-CH speaker living in Germany pays in euros), and the payer
+ * may switch in the picker either way; checkout takes the one they leave it on (§4).
+ */
+export function billingCurrencyFor(locale?: string): BillingCurrency {
+  if (!locale) return "EUR";
+  try {
+    const region = new Intl.Locale(locale).maximize().region;
+    return region === "CH" || region === "LI" ? "CHF" : "EUR";
+  } catch {
+    return "EUR";
+  }
+}

package/src/billing/subscription-actions.tsx

@@ -0,0 +1,76 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import type { LabelOverride } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { Button } from "../components/ui";
+import { useBillingLabels } from "./billing-labels";
+import type { BillingLabels } from "./billing-labels";
+
+export interface SubscriptionActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** "Payment and invoices", as a link — or {@link onManage}. Without either, none. */
+  manageHref?: string;
+  /** "Payment and invoices", as the app's call: `POST /billing/portal`, then off to its
+   *  `url` (§4). The kit sends no request. */
+  onManage?: () => void;
+  /** "Cancel subscription", as a link — or {@link onCancel}. Without either, none. */
+  cancelHref?: string;
+  /** "Cancel subscription", as the app's call — usually the portal again, where the
+   *  provider's cancel and withdrawal functions are (§12.26). */
+  onCancel?: () => void;
+  /** Which of the two is under way: its spinner, no second press. */
+  pending?: "manage" | "cancel" | null;
+  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
+  labels?: LabelOverride<BillingLabels>;
+}
+
+/**
+ * The two ways to the provider's hosted portal on the subscription page
+ * (docs/billing-harmonization.md §2.8, §7, §12.26): "Payment and invoices" — the payment
+ * method and the invoices live there, never in the app — and a VISIBLE "Cancel
+ * subscription". Consumer law wants the second in plain sight: Germany's cancellation
+ * button (§312k BGB) and the EU withdrawal function (Directive (EU) 2023/2673, from
+ * 19 June 2026) are in the portal, and the app's page must not hide the way there behind
+ * "manage".
+ *
+ * Neither takes the write lock: a read-only payer must be able to pay, leave or cancel
+ * (§3.3).
+ */
+export function SubscriptionActions({
+  manageHref,
+  onManage,
+  cancelHref,
+  onCancel,
+  pending,
+  labels: labelsProp,
+  className,
+  ...rest
+}: SubscriptionActionsProps) {
+  const labels = useBillingLabels(labelsProp);
+  const manage =
+    manageHref !== undefined ? (
+      <Button href={manageHref} variant="secondary">
+        {labels.manage}
+      </Button>
+    ) : onManage !== undefined ? (
+      <Button type="button" variant="secondary" onClick={onManage} pending={pending === "manage"}>
+        {labels.manage}
+      </Button>
+    ) : null;
+  const cancel =
+    cancelHref !== undefined ? (
+      <Button href={cancelHref} variant="link" tone="danger">
+        {labels.cancel}
+      </Button>
+    ) : onCancel !== undefined ? (
+      <Button type="button" variant="link" tone="danger" onClick={onCancel} pending={pending === "cancel"}>
+        {labels.cancel}
+      </Button>
+    ) : null;
+  if (!manage && !cancel) return null;
+  return (
+    <div {...rest} className={cn("flex flex-wrap items-center gap-x-4 gap-y-2", className)}>
+      {manage}
+      {cancel}
+    </div>
+  );
+}

package/src/billing/subscription-status-chip.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from "react";
+
+import type { LabelOverride } from "../i18n/kit-labels";
+import { Chip } from "../components/chip";
+import type { ChipShape, ChipSize, ChipTone, ChipVariant } from "../components/chip";
+import { useBillingLabels } from "./billing-labels";
+import type { BillingLabels, SubscriptionStatus } from "./billing-labels";
+
+/**
+ * The tone of each status (docs/billing-harmonization.md §3.2, §3.3). The tone follows
+ * the STANDING, so a roster reads at a glance who can write:
+ *
+ * - `active` green: paid, in good standing;
+ * - `trialing` blue (info): in good standing until `trial_ends_at`, nothing wrong;
+ * - `past_due` amber: a payment failed, still in good standing while the provider retries;
+ * - `expired` red: out of good standing — read-only until a plan is chosen;
+ * - `canceled` grey: the payer's own choice, nothing to warn about;
+ * - `comped` purple, a hue rather than a tone: free by grant — neither paid nor in trouble,
+ *   only different from both.
+ */
+export const SUBSCRIPTION_STATUS_TONES: Readonly<Record<SubscriptionStatus, ChipTone>> = Object.freeze({
+  trialing: "info",
+  active: "success",
+  past_due: "warning",
+  canceled: "neutral",
+  expired: "danger",
+  comped: "purple",
+});
+
+export interface SubscriptionStatusChipProps {
+  /**
+   * The row's `status` as the API sends it (§3.2). A value the kit does not know yet is
+   * shown as itself, in `neutral` — an unknown status is still a fact an operator should
+   * see. `null` / `undefined` renders nothing.
+   */
+  status: SubscriptionStatus | (string & {}) | null | undefined;
+  /** Over {@link SUBSCRIPTION_STATUS_TONES}. */
+  tone?: ChipTone;
+  /** Over the status's word, for an app whose word is its own. */
+  children?: ReactNode;
+  /** Default `sm` (a roster's `extra` column, §6). */
+  size?: ChipSize;
+  /** Default `soft`. */
+  variant?: ChipVariant;
+  /** Default `square`, the status tag of `AccountStateChip`. */
+  shape?: ChipShape;
+  /** Default true, as `AccountStateChip`. */
+  caps?: boolean;
+  className?: string;
+  /** Prop > `<UiKitProvider labels={{ billing: { status } }}>` > English. */
+  labels?: LabelOverride<BillingLabels>;
+  [key: `data-${string}`]: string | number | boolean | undefined;
+}
+
+// Own keys only: `"toString" in {}` is true.
+const isKnown = (value: string): value is SubscriptionStatus =>
+  Object.prototype.hasOwnProperty.call(SUBSCRIPTION_STATUS_TONES, value);
+
+/**
+ * A subscription's status as a chip, in the kit's words and tones (§6: the operator's
+ * roster shows the plan and the standing; §7: the subscription page). ALWAYS A WORD, never
+ * colour alone: "Trial", "Active", "Payment overdue", "Cancelled", "Expired",
+ * "Complimentary" — the tone repeats what the word says. Carries `data-status` with the
+ * key, for a test or a style hook.
+ */
+export function SubscriptionStatusChip({
+  status,
+  tone,
+  children,
+  size = "sm",
+  variant,
+  shape = "square",
+  caps = true,
+  className,
+  labels: labelsProp,
+  ...rest
+}: SubscriptionStatusChipProps) {
+  const labels = useBillingLabels(labelsProp);
+  if (status === null || status === undefined || status === "") return null;
+  const known = isKnown(status);
+  return (
+    <Chip
+      {...rest}
+      data-status={status}
+      tone={tone ?? (known ? SUBSCRIPTION_STATUS_TONES[status] : "neutral")}
+      size={size}
+      variant={variant}
+      shape={shape}
+      caps={caps}
+      className={className}
+    >
+      {children ?? (known ? labels.status[status] : status)}
+    </Chip>
+  );
+}

package/src/components/account-chips.tsx

@@ -7,7 +7,6 @@ import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-lab
 import { toLocalIso } from "../lib/dates";
 import { Chip } from "./chip";
 import type { ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip";
-import { Tooltip } from "./tooltip";
 import type { DataTableColumn } from "./data-table";
 
 /**
@@ -255,10 +254,18 @@ export interface DateMarkProps {
   /**
    * `"date"` (default): the date in `dateStyle` — "Created". `"relative"`: how long
    * ago — "Last login", where the question is "recently?" — with the full date and
-   * time in a tooltip (keksdose's last-seen column).
+   * time beside it (keksdose's last-seen column; see `absolute`).
    */
   display?: "date" | "relative";
-  /** Default `medium`. Under `"relative"`, the style of the tooltip's date (default
+  /**
+   * Where a `"relative"` mark puts the exact date and time (0.32,
+   * docs/text-size-harmonization.md §4: "relative dates show the absolute one beside
+   * them", at every size — a touch screen never opens the tooltip it used to live in):
+   * `"below"` (default), a muted second line under the words, so a table column keeps
+   * its width; `"inline"`, after them on the same line, for a sentence or a wide cell.
+   */
+  absolute?: "below" | "inline";
+  /** Default `medium`. Under `"relative"`, the style of the exact date beside it (default
    *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. Given, it wins
    *  over the provider's `formatDate`. */
   dateStyle?: FormatDateStyle | Intl.DateTimeFormatOptions;
@@ -288,6 +295,7 @@ export function DateMark({
   display = "date",
   dateStyle,
   relative,
+  absolute = "below",
   empty = EMPTY_FORMATTED_VALUE,
   locale: localeProp,
   className,
@@ -309,14 +317,32 @@ export function DateMark({
     );
   }
   const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? "medium" });
-  return (
-    <Tooltip label={formatDate(date, dateStyle ?? "dateTime", { locale })} lazy>
-      {/* Not a tab stop: a roster of fifty rows would be fifty more of them, and the
-          relative words already answer the column's question; the exact time is extra. */}
-      <time dateTime={date.toISOString()} className={cls}>
-        {text}
+  const exact = formatDate(date, dateStyle ?? "dateTime", { locale });
+  // Past `absoluteAfterDays` the relative words already ARE the date; then the exact
+  // line alone, rather than the same day twice.
+  const sameDay = text === formatDate(date, dateStyle ?? "medium", { locale });
+  const iso = date.toISOString();
+  if (sameDay) {
+    return (
+      <time dateTime={iso} className={cls}>
+        {exact}
       </time>
-    </Tooltip>
+    );
+  }
+  // The exact date and time in the layout, never only in a tooltip (§4). Still no tab
+  // stop: a roster of fifty rows would be fifty more of them.
+  return (
+    <time
+      dateTime={iso}
+      data-slot="date-mark"
+      className={cn(absolute === "below" ? "inline-flex flex-col leading-tight" : "inline", className)}
+    >
+      <span className="whitespace-nowrap tabular-nums">{text}</span>
+      {absolute === "inline" && " · "}
+      <span className={cn("whitespace-nowrap tabular-nums text-[var(--text-muted)]", absolute === "below" && "text-xs")}>
+        {exact}
+      </span>
+    </time>
   );
 }
 

package/src/components/alert-banner.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
 import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 
 /** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's
@@ -60,16 +61,21 @@ export function toneFrameClass(tone: AlertTone): string {
 
 /** Single source for the warning-callout frame (feedback #277): the tone's border
  * and surface plus this component's own radius and padding, the latter
- * compensating the 2px colored border so toggling tones never shifts layout. */
+ * compensating the 2px colored border so toggling tones never shifts layout.
+ *
+ * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure
+ * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,
+ * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`
+ * at 125 %, and toggling the tone shifted the layout again. */
 export function alertFrameClass(tone: AlertTone, size: AlertSize = "md"): string {
   const box =
     size === "sm"
       ? tone === "neutral"
         ? "rounded-md px-2.5 py-1.5"
-        : "rounded-md px-[9px] py-[5px]"
+        : "rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]"
       : tone === "neutral"
         ? "rounded-md p-3"
-        : "rounded-md p-[11px]";
+        : "rounded-md p-[calc(0.75rem-1px)]";
   return `${box} ${TONE_FRAME[tone]}`;
 }
 
@@ -293,8 +299,7 @@ export function AlertBanner({
         strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),
         elevated && cn(ELEVATED, TONE_ELEVATED[tone]),
       );
-  const focusRing =
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]";
+  const focusRing = cn(FOCUS_RING, "focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]");
 
   const content = (
     <>
@@ -376,7 +381,7 @@ export function AlertBanner({
         inlineRow || strip ? "items-center" : "items-start",
         "outline-none after:absolute after:inset-0 after:content-['']",
         strip ? "after:rounded-none" : "after:rounded-md",
-        "focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]",
+        "focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-[var(--brand)]",
       )
     : cn(row, !inlineRow && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
   // The div's attributes are the row element's: an `id`, a test id or an

package/src/components/amount-input.tsx

@@ -2,10 +2,10 @@ import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react
 import { ChevronDown } from "lucide-react";
 import type { ReactNode } from "react";
 import { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from "./currency-select";
-import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from "./ui";
+import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from "./ui";
 import { cn } from "../lib/cn";
 import { currencyMinorDigits } from "../lib/format";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { CalculatorButton, type CalculatorButtonLabels } from "./calculator";
 import { NumberPadSheet, type NumberPadSheetLabels } from "./numpad-sheet";
 import { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from "./dropdown";
@@ -274,7 +274,7 @@ function settleAmount(text: string, digits: number | undefined, min?: number, ma
 
 // The error line under a field — the type of `ui.tsx`'s (module-private) one, so an
 // AmountInput's message is indistinguishable from an Input's.
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 
 // The consuming app's ONE money palette (`--money-expense` / `--money-income`),
 // not a bespoke rose/emerald pairing: a figure being typed has to wear the same
@@ -332,7 +332,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // On phones we suppress the OS keyboard (inputMode="none" below) and show our
     // own calculator numpad, so the desktop popover trigger is hidden. The
     // end padding keys off showCalc, so it tightens up automatically.
-    const isMobile = useMediaQuery(PHONE_QUERY, false);
+    const isMobile = usePhoneLayout();
     const showCalc = calculator && !disabled && !isMobile;
     const [focused, setFocused] = useState(false);
     // On mobile, focusing the field opens the numpad bottom sheet in place of the
@@ -678,7 +678,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
         {/* Outside the relative box, as NumberInput's caption is: the trailing
             controls are `inset-y-1` in it and would stretch down over a second line. */}
         {textHint && (
-          <p id={hintId} className="mt-1 text-[11px] leading-tight text-[var(--text-muted)]">
+          <p id={hintId} className="mt-1 text-caption leading-tight text-[var(--text-muted)]">
             {hint}
           </p>
         )}

package/src/components/appearance-labels.ts

@@ -0,0 +1,40 @@
+import { useKitLabels } from "../i18n/kit-labels";
+import type { ContrastMode } from "../theme/contrast";
+import type { TextSize } from "../theme/text-size";
+
+/**
+ * The `appearance` namespace (0.32, docs/text-size-harmonization.md §6): the words of the
+ * two new settings in the core `appearance` group — `TextSizeSetting` and
+ * `ContrastSetting` — and of any quick switch an app builds from the same vocabulary (the
+ * showcase's top bar). Like every kit label: prop > `<UiKitProvider labels={{ appearance
+ * }}>` > English.
+ */
+export interface AppearanceLabels {
+  /** The text-size setting's name. */
+  textSize: string;
+  /** One line under it: what changes, so "Large" is not mistaken for zoom. */
+  textSizeHelp: string;
+  /** The three steps, in {@link TEXT_SIZES} order. */
+  textSizes: Record<TextSize, string>;
+  /** The contrast setting's name. */
+  contrast: string;
+  /** One line under it. */
+  contrastHelp: string;
+  /** The three choices, in {@link CONTRAST_MODES} order. */
+  contrastModes: Record<ContrastMode, string>;
+}
+
+export const DEFAULT_APPEARANCE_LABELS: AppearanceLabels = {
+  textSize: "Text size",
+  textSizeHelp: "Larger letters, and a layout that makes room for them.",
+  textSizes: { normal: "Normal", large: "Large", xlarge: "Extra large" },
+  contrast: "Contrast",
+  contrastHelp: "More contrast darkens quiet text and lines, and thickens focus frames. System follows this device.",
+  contrastModes: { system: "System", standard: "Standard", more: "More" },
+};
+
+/** The `appearance` namespace, resolved — English, then the provider, then `labels`. For
+ *  an app's catalogue entries and quick switches, without restating the defaults. */
+export function useAppearanceLabels(labels?: Partial<AppearanceLabels>): AppearanceLabels {
+  return useKitLabels("appearance", DEFAULT_APPEARANCE_LABELS, labels);
+}

package/src/components/autocomplete.tsx

@@ -500,7 +500,7 @@ function AutocompleteInner<V extends string | number = string>(
                       {startsGroup && (
                         <li
                           role="presentation"
-                          className="px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1"
+                          className="px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1"
                         >
                           {o.group}
                         </li>
@@ -546,7 +546,7 @@ function AutocompleteInner<V extends string | number = string>(
                               <span
                                 className={cn(
                                   "block truncate text-[var(--text-placeholder)]",
-                                  small ? "text-[11px]" : "text-xs",
+                                  small ? "text-caption" : "text-xs",
                                 )}
                               >
                                 {o.sublabel}

package/src/components/breadcrumbs.tsx

@@ -2,6 +2,7 @@ import { Fragment, useEffect, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { useKitLabels, useKitLink } from "../i18n/kit-labels";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link";
 
@@ -106,8 +107,7 @@ export function Breadcrumbs({
       {separator ?? <ChevronRight className="size-3.5 rtl:-scale-x-100" />}
     </span>
   );
-  const linkClass =
-    "block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]";
+  const linkClass = cn("block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)]", FOCUS_RING);
 
   return (
     <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn("min-w-0 text-sm", className)}>
@@ -150,7 +150,7 @@ export function Breadcrumbs({
                     }}
                     aria-label={labels.showAll}
                     aria-expanded={false}
-                    className="flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+                    className={cn("flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)]", FOCUS_RING)}
                   >
                     <MoreHorizontal className="size-4" aria-hidden />
                   </button>

package/src/components/bulk-action-bar.tsx

@@ -6,7 +6,7 @@ import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
 import { useKitLabels } from "../i18n/kit-labels";
 import { useAnnounce } from "../hooks/use-announce";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { useBreakpoint } from "../hooks/use-breakpoint";
 import { OVERLAY_EXIT_MS, prefersReducedMotion } from "../hooks/use-close-transition";
 import { Button, IconButton } from "./ui";
 
@@ -38,8 +38,8 @@ export type BulkActionBarVariant = "floating" | "sticky" | "inline";
 /**
  * A variant per breakpoint, mobile first — `{ base: "floating", md: "sticky" }` is the
  * phone's floating card below 768px and the desktop's sticky bar from there up. The
- * breakpoints are Tailwind's (sm 640, md 768, lg 1024, xl 1280px), the ones the kit's
- * classes already use. keksdose's payees selection bar (payees-selection-bar.tsx)
+ * breakpoints are the ones the kit's classes use (sm 640, md 768, lg 1024, xl 1280px
+ * at Normal text size; since 0.32 they move with the text size, as `md:` does). keksdose's payees selection bar (payees-selection-bar.tsx)
  * computes exactly this with its own `useMediaQuery("(min-width: 768px)")`; every bar
  * that is a card on a phone and a strip on a desktop would repeat it.
  *
@@ -55,12 +55,9 @@ export interface ResponsiveBulkActionBarVariant {
   xl?: BulkActionBarVariant;
 }
 
-const BREAKPOINTS = [
-  ["xl", "(min-width: 1280px)"],
-  ["lg", "(min-width: 1024px)"],
-  ["md", "(min-width: 768px)"],
-  ["sm", "(min-width: 640px)"],
-] as const;
+/** Widest first: the first that matches and names a value wins. Each is the class's own
+ *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */
+const BREAKPOINTS = ["xl", "lg", "md", "sm"] as const;
 
 /** The variant in force: the widest breakpoint that matches AND names one, else
  *  `base`. The four queries are subscribed unconditionally — hooks cannot be skipped —
@@ -68,13 +65,13 @@ const BREAKPOINTS = [
  *  every query is false, so the bar renders its `base`, the phone's, first. */
 function useResolvedVariant(variant: BulkActionBarVariant | ResponsiveBulkActionBarVariant): BulkActionBarVariant {
   const matches = {
-    xl: useMediaQuery(BREAKPOINTS[0][1], false),
-    lg: useMediaQuery(BREAKPOINTS[1][1], false),
-    md: useMediaQuery(BREAKPOINTS[2][1], false),
-    sm: useMediaQuery(BREAKPOINTS[3][1], false),
+    xl: useBreakpoint("xl"),
+    lg: useBreakpoint("lg"),
+    md: useBreakpoint("md"),
+    sm: useBreakpoint("sm"),
   };
   if (typeof variant === "string") return variant;
-  for (const [key] of BREAKPOINTS) {
+  for (const key of BREAKPOINTS) {
     const v = variant[key];
     if (matches[key] && v !== undefined) return v;
   }

package/src/components/calculator.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Calculator as CalculatorIcon, Delete } from "lucide-react";
 import { Popover } from "./popover";
 import { cn } from "../lib/cn";
+import { FIELD_TOUCH_TEXT } from "./ui";
 import { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from "../lib/calc";
 import {
   DEFAULT_CALCULATOR_LABELS,
@@ -70,7 +71,7 @@ const KEYS: Key[] = [
 ];
 
 const KEY_BASE =
-  "flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
+  "flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--border-strong)]";
 // Two key families, two fills: digits sit on the inset surface and darken on
 // hover, operators sit a step down on `--border` and lift toward that surface —
 // the same split `NumberPadSheet` uses for this keypad on a phone. The tokens
@@ -151,7 +152,7 @@ function CalculatorPanel({
         // is right-aligned in every script too — so both stay physical, pinned
         // with `dir="ltr"` rather than mirrored in a right-to-left form.
         dir="ltr"
-        className="block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]"
+        className={cn("block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]", FIELD_TOUCH_TEXT)}
       />
       <div dir="ltr" className="h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]">
         {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : ""}
@@ -231,7 +232,7 @@ export function CalculatorButton({
   const labels = useKitLabels("calculator", DEFAULT_CALCULATOR_LABELS, fromProps);
   return (
     <Popover
-      width={224}
+      width="14rem"
       labels={{ panel: labels.panel }}
       trigger={({ open, toggle, ref }) => (
         <button