@eifi1/ui-kit 0.29.0 → 0.31.0

package/src/components/account-chips.tsx

@@ -118,25 +118,55 @@ export function RoleChip<R extends string = string>({
  * - `registered` — an allowlist row whose address has an account now (Kurvenschmiede).
  * - `unverified` — the email address is not confirmed (keksdose).
  * - `passwordChange` — must set a new password at the next sign-in (keksdose).
+ * - `deletion` — 0.30.0: the user asked for the account to be deleted
+ *   (docs/user-admin-harmonization.md §2.1, §6.4). It is deactivated at once and erased
+ *   on a date (`after_days`: keksdose, Kurvenschmiede) or by an operator (kastlan). The
+ *   chip says the date when there is one ({@link AccountStateChipProps.date}), and
+ *   "Deletion requested" when there is none. It stands IN PLACE of `inactive`: an
+ *   account marked for deletion is always deactivated, and two chips would say it twice.
  *
  * An account can be several at once (inactive AND unverified): render one chip per
  * state, as keksdose's state column does.
  */
-export type AccountState = "active" | "inactive" | "invited" | "registered" | "unverified" | "passwordChange";
+export type AccountState =
+  | "active"
+  | "inactive"
+  | "invited"
+  | "registered"
+  | "unverified"
+  | "passwordChange"
+  | "deletion";
 
-export type AccountStateLabels = Record<AccountState, string>;
+/**
+ * The `accountState` namespace. One word per state, plus the two forms of `deletion`.
+ *
+ * The 0.30 keys are OPTIONAL, like every key added to a namespace an app annotates
+ * (`const L: AccountStateLabels = {…}`): a new required key would be a compile error in
+ * each app on its next update. Left out, they fall back to the provider's, then English.
+ */
+export interface AccountStateLabels extends Record<Exclude<AccountState, "deletion">, string> {
+  /** 0.30.0: an account marked for deletion with no date — kastlan's `operator` mode,
+   *  where an operator erases it (§6.4). "Deletion requested". */
+  deletion?: string;
+  /** 0.30.0: an account that will be erased on `date`, already formatted in the
+   *  reader's locale — the `after_days` mode. "Deletion on 6 Nov 2026". */
+  deletionOn?: (date: string) => string;
+}
 
-export const DEFAULT_ACCOUNT_STATE_LABELS: AccountStateLabels = {
+export const DEFAULT_ACCOUNT_STATE_LABELS = {
   active: "Active",
   inactive: "Inactive",
   invited: "Invited",
   registered: "Registered",
   unverified: "Unverified",
   passwordChange: "Must change password",
-};
+  deletion: "Deletion requested",
+  deletionOn: (date: string) => `Deletion on ${date}`,
+} satisfies Required<AccountStateLabels>;
 
-/** The default tone of each state: green for the normal case, red for switched off,
- *  amber for something the user still has to do, blue for an open invitation. */
+/** The default tone of each state: green for the normal case, red for switched off
+ *  (and for going, `deletion`), amber for something the user still has to do, blue for
+ *  an open invitation. */
 export const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>> = {
   active: "success",
   inactive: "danger",
@@ -144,10 +174,22 @@ export const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>> = {
   registered: "neutral",
   unverified: "warning",
   passwordChange: "warning",
+  // Red like `inactive`, which it replaces: the account cannot sign in, and it is going.
+  deletion: "danger",
 };
 
 export interface AccountStateChipProps extends AccountChipLook {
   state: AccountState;
+  /**
+   * 0.30.0, `state="deletion"` only: the day the account will be erased — the row's
+   * `deletion_scheduled_at` (§3.2, §6.4). Formatted as a date in the reader's locale
+   * ("Deletion on 6 Nov 2026"), through the provider's `formatDate` when the app set
+   * one, as {@link DateMark} does. Missing or `null` — an operator erases it, so there
+   * is no date — the chip says "Deletion requested". Ignored for every other state.
+   */
+  date?: DateInput;
+  /** Over the provider's locale, for the `deletion` date. */
+  locale?: string;
   /** Over {@link ACCOUNT_STATE_TONES} — Kurvenschmiede draws `inactive` neutral. */
   tone?: ChipTone;
   /** Over the label, for an app whose word for the state is its own ("Deactivated"). */
@@ -162,6 +204,8 @@ export interface AccountStateChipProps extends AccountChipLook {
  */
 export function AccountStateChip({
   state,
+  date,
+  locale: localeProp,
   tone,
   children,
   labels: labelsProp,
@@ -175,10 +219,23 @@ export function AccountStateChip({
   // An `undefined` in the prop is skipped (the provider's merge does that), so an
   // optional value cannot blank a default.
   const labels = useKitLabels("accountState", DEFAULT_ACCOUNT_STATE_LABELS, labelsProp);
+  const locale = useKitLocale(localeProp);
+  const fromProvider = useKitDateFormatter();
+  const when = state === "deletion" ? toDate(date ?? null) : null;
+  let text: ReactNode;
+  if (state !== "deletion") text = labels[state];
+  else if (when) {
+    // A date in a SENTENCE, so no weekday (keksdose's rule, KitDateFormatContext).
+    const day =
+      (fromProvider && fromProvider(toLocalIso(when), { unit: "day", source: "dateMark", locale, weekday: false })) ||
+      formatDate(when, "medium", { locale });
+    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day);
+  } else text = labels.deletion ?? DEFAULT_ACCOUNT_STATE_LABELS.deletion;
   return (
     <Chip
       {...rest}
       data-state={state}
+      data-date={when ? toLocalIso(when) : undefined}
       tone={tone ?? ACCOUNT_STATE_TONES[state]}
       size={size}
       variant={variant}
@@ -186,7 +243,7 @@ export function AccountStateChip({
       caps={caps}
       className={className}
     >
-      {children ?? labels[state]}
+      {children ?? text}
     </Chip>
   );
 }

package/src/components/account-settings-labels.ts

@@ -20,8 +20,19 @@ export interface ProfileSettingLabels {
   email: string;
   role: string;
   memberSince: string;
+  /** The single name field — the card without `firstName` / `lastName`. */
   displayName: string;
   save: string;
+  /**
+   * 0.30.0 (docs/user-admin-harmonization.md §6.1): the two fields that replace
+   * `displayName` once the card is given `firstName` / `lastName`. OPTIONAL, like
+   * `TwoFactorSettingLabels.qrAlt` and for its reason — this interface is annotated at
+   * call sites — and filled from the provider's `accountSettings.profile`, then English.
+   */
+  firstName?: string;
+  lastName?: string;
+  /** Why Save is held while a name is blank: both are required (§3.1). */
+  nameRequired?: string;
 }
 
 export interface PasswordSettingLabels {
@@ -35,6 +46,12 @@ export interface PasswordSettingLabels {
 }
 
 export interface TwoFactorSettingLabels {
+  /**
+   * Before 0.31 the card's one line, "<status>: On". Since 0.31 the setting's name is the
+   * card's {@link title} and the state stands beside it, so this is read only where no
+   * `title` is given at the same level — an app that translated `status` keeps its word
+   * as the title.
+   */
   status: string;
   enabledText: string;
   disabledText: string;
@@ -59,6 +76,12 @@ export interface TwoFactorSettingLabels {
   secretHint?: string;
   /** The copy button beside that key. */
   copySecret?: string;
+  /**
+   * 0.31.0 (docs/settings-harmonization.md §3.7): the card's title, a heading inside a
+   * `SettingsLayout`. OPTIONAL for the reason `qrAlt` is. Unset, the same source's
+   * `status` stands in for it, then English.
+   */
+  title?: string;
 }
 
 export interface PasskeysSettingLabels {
@@ -104,7 +127,7 @@ export interface PasskeysSettingLabels {
 }
 
 export interface AccountSettingsLabels {
-  profile: ProfileSettingLabels;
+  profile: Required<ProfileSettingLabels>;
   password: PasswordSettingLabels;
   // `Required` here, optional on the section interfaces: the namespace is what a full
   // catalogue (`@eifi1/ui-kit/i18n/<code>`, `missingKitLabels`) is written against, so
@@ -121,6 +144,9 @@ export const DEFAULT_ACCOUNT_SETTINGS_LABELS: AccountSettingsLabels = {
     memberSince: "Member since",
     displayName: "Display name",
     save: "Save",
+    firstName: "First name",
+    lastName: "Last name",
+    nameRequired: "Enter both a first and a last name.",
   },
   password: {
     title: "Change password",
@@ -146,6 +172,7 @@ export const DEFAULT_ACCOUNT_SETTINGS_LABELS: AccountSettingsLabels = {
     qrAlt: "QR code",
     secretHint: "Can’t scan it? Enter this key in the app instead:",
     copySecret: "Copy key",
+    title: "Two-factor authentication",
   },
   passkeys: {
     title: "Passkeys",

package/src/components/account-settings.tsx

@@ -1,18 +1,22 @@
 import { useId, useState } from "react";
-import type { KeyboardEvent, ReactNode } from "react";
+import type { FormEvent, KeyboardEvent, ReactNode } from "react";
 import { Button, Card, Input } from "./ui";
 import { UserAvatar } from "./user-avatar";
 import { CopyButton } from "./copy-button";
 import { QrCode } from "./qr-code";
 import { OneTimeCodeInput } from "./one-time-code-input";
+import { usePromisePending } from "./danger-confirm";
+import { personNameOk, PERSON_NAME_MAX_LENGTH } from "../auth/form-rules";
 import {
   DEFAULT_PASSWORD_STRENGTH_LABELS,
   passwordByteLength,
   PasswordStrengthMeter,
 } from "./password-strength";
 import type { PasswordStrengthMeterProps } from "./password-strength";
-import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
+import { useKitLabelOverrides, useKitLabels } from "../i18n/kit-labels";
+import { Chip } from "./chip";
 import { useAccountSettingsLabels } from "./account-settings-labels";
+import { SettingsCardTitle } from "../settings/settings-heading";
 import type {
   PasswordSettingLabels,
   ProfileSettingLabels,
@@ -40,40 +44,96 @@ export { DEFAULT_ACCOUNT_SETTINGS_LABELS } from "./account-settings-labels";
  * `accountSettings` namespace, then English (see account-settings-labels.ts).
  */
 
-export function ProfileSetting({
-  name,
-  email,
-  role,
-  memberSince,
-  value,
-  onChange,
-  onSave,
-  saving,
-  labels: labelsProp,
-}: {
+/** What {@link ProfileSetting} hands `onSave` in its two-field form (0.30.0): both
+ *  trimmed, 1–120 characters each — the `PATCH /auth/me` body's `first_name` /
+ *  `last_name` (docs/user-admin-harmonization.md §6.1). */
+export interface ProfileNameValues {
+  firstName: string;
+  lastName: string;
+}
+
+/** What both forms of {@link ProfileSetting} take. */
+interface ProfileSettingCommonProps {
   name?: string | null;
   email?: string | null;
   role?: ReactNode;
   memberSince?: ReactNode;
-  value: string;
-  onChange: (value: string) => void;
-  onSave: () => void;
   saving?: boolean;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { profile } }}>` > English. */
   labels?: Partial<ProfileSettingLabels>;
-}) {
+  /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */
+  id?: string;
+}
+
+/**
+ * The single display name, as before 0.30.0 — controlled through `value` / `onChange`,
+ * saved by `onSave()`. Kept unchanged for an app that has not moved to first and last
+ * name yet.
+ */
+export interface ProfileSettingDisplayNameProps extends ProfileSettingCommonProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+  firstName?: undefined;
+  lastName?: undefined;
+}
+
+/**
+ * First and last name (0.30.0, docs/user-admin-harmonization.md §6.1): the saved
+ * values in, the edited ones out through `onSave`. The card keeps the drafts itself.
+ */
+export interface ProfileSettingNamesProps extends ProfileSettingCommonProps {
+  /** The saved given name — `first_name`. `null` reads as empty. */
+  firstName: string | null;
+  /** The saved family name — `last_name`. `null` (a migrated account, §3.3) reads as
+   *  empty, and Save then waits for one. */
+  lastName: string | null;
+  /**
+   * Save the two names (`PATCH /auth/me`, which also clears `name_incomplete`). Return
+   * a promise and Save is busy until it settles. Refresh `firstName` / `lastName` from
+   * the answer: the card compares its drafts with them, so Save turns off once the new
+   * names come back. A rejection keeps what was typed — the app says why (a toast), as
+   * for `PasswordSetting`.
+   */
+  onSave: (values: ProfileNameValues) => void | Promise<unknown>;
+  value?: undefined;
+  onChange?: undefined;
+}
+
+export type ProfileSettingProps = ProfileSettingDisplayNameProps | ProfileSettingNamesProps;
+
+/**
+ * The profile section: avatar, address, role, member since, and the name.
+ *
+ * **Two forms.** Given `firstName` / `lastName` (0.30.0, §6.1) it edits first and last
+ * name in two fields, side by side where the card is wide enough — the order and the
+ * 1–120-character rule of `RegisterForm` (auth §3.1), so the name a person signed up
+ * with is edited the way it was typed. Without them it is the single `displayName`
+ * field it always was, `value` / `onChange` / `onSave()` unchanged, for an app that has
+ * not moved yet (kastlan split the one name at its first space on save; Kurvenschmiede
+ * built its own card instead).
+ *
+ * The two-field form owns its drafts, starting from the saved names and following them
+ * when they change; Save waits for a change, holds — saying why — while a name is
+ * blank, and is a `commit` (a {@link WriteLockProvider} locks it, keksdose's demo).
+ */
+export function ProfileSetting(props: ProfileSettingProps) {
+  const { name, email, role, memberSince, labels: labelsProp, id } = props;
   const labels = useAccountSettingsLabels("profile", labelsProp);
-  const dirty = value.trim().length > 0 && value.trim() !== (name ?? "");
-  // Generated, not the literal "display-name" it was: two of these on one page (an
-  // admin editing someone else's profile beside their own) shared an id, and the
-  // second label pointed at the first field.
-  const inputId = useId();
+  const names = props.firstName !== undefined || props.lastName !== undefined;
   return (
-    <Card className="p-4 space-y-3">
+    <Card id={id} className="p-4 space-y-3">
       <div className="flex items-center gap-3">
-        <UserAvatar name={name} email={email} size="lg" />
+        <UserAvatar
+          name={name}
+          email={email}
+          person={names ? { first: props.firstName, last: props.lastName } : undefined}
+          size="lg"
+        />
         <div className="min-w-0">
-          <div className="text-sm font-medium">{labels.title}</div>
+          {/* A heading inside a SettingsLayout (0.31, docs/settings-harmonization.md
+              §3.7), the plain div it always was outside one. */}
+          <SettingsCardTitle>{labels.title}</SettingsCardTitle>
           <div className="truncate font-mono text-xs text-[var(--text-muted)]">
             {/* `email` was a required key that nothing rendered; it names the address
                 for a screen reader, which otherwise hears a bare string under a title. */}
@@ -88,6 +148,51 @@ export function ProfileSetting({
         <span className="text-[var(--text-muted)]">{labels.memberSince}</span>
         <span>{memberSince ?? "—"}</span>
       </div>
+      {names ? (
+        <PersonNameFields
+          firstName={props.firstName ?? ""}
+          lastName={props.lastName ?? ""}
+          onSave={(props as ProfileSettingNamesProps).onSave}
+          saving={props.saving}
+          labels={labels}
+        />
+      ) : (
+        <DisplayNameField
+          name={name}
+          value={(props as ProfileSettingDisplayNameProps).value}
+          onChange={(props as ProfileSettingDisplayNameProps).onChange}
+          onSave={(props as ProfileSettingDisplayNameProps).onSave}
+          saving={props.saving}
+          labels={labels}
+        />
+      )}
+    </Card>
+  );
+}
+
+/** The single-name form — exactly the 0.29 card's field and button. */
+function DisplayNameField({
+  name,
+  value,
+  onChange,
+  onSave,
+  saving,
+  labels,
+}: {
+  name?: string | null;
+  value: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+  saving?: boolean;
+  labels: Required<ProfileSettingLabels>;
+}) {
+  const dirty = value.trim().length > 0 && value.trim() !== (name ?? "");
+  // Generated, not the literal "display-name" it was: two of these on one page (an
+  // admin editing someone else's profile beside their own) shared an id, and the
+  // second label pointed at the first field.
+  const inputId = useId();
+  return (
+    <>
       <Input
         id={inputId}
         label={labels.displayName}
@@ -98,7 +203,84 @@ export function ProfileSetting({
       <Button onClick={onSave} disabled={!dirty || saving}>
         {labels.save}
       </Button>
-    </Card>
+    </>
+  );
+}
+
+/** The first-and-last form (0.30.0, §6.1). */
+function PersonNameFields({
+  firstName,
+  lastName,
+  onSave,
+  saving,
+  labels,
+}: {
+  firstName: string;
+  lastName: string;
+  onSave: (values: ProfileNameValues) => void | Promise<unknown>;
+  saving?: boolean;
+  labels: Required<ProfileSettingLabels>;
+}) {
+  const [first, setFirst] = useState(firstName);
+  const [last, setLast] = useState(lastName);
+  // The saved names moved (the save came back, another tab renamed): the drafts follow
+  // them. During render, as DangerConfirm resets its fields, so no frame shows the old
+  // draft beside the new name.
+  const [saved, setSaved] = useState({ firstName, lastName });
+  if (saved.firstName !== firstName || saved.lastName !== lastName) {
+    setSaved({ firstName, lastName });
+    setFirst(firstName);
+    setLast(lastName);
+  }
+  const { pending, run } = usePromisePending();
+  const busy = Boolean(saving) || pending;
+  const valid = personNameOk(first) && personNameOk(last);
+  const dirty = first.trim() !== firstName.trim() || last.trim() !== lastName.trim();
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!valid || !dirty || busy) return;
+    // A rejection keeps the drafts; the app reports it, as PasswordSetting's does.
+    run(onSave({ firstName: first.trim(), lastName: last.trim() }), () => {});
+  };
+
+  return (
+    <form className="@container space-y-3" onSubmit={submit} noValidate>
+      {/* The order and the rule of RegisterForm's two fields (auth §3.1). */}
+      <div className="grid gap-3 @xs:grid-cols-2">
+        <Input
+          name="given-name"
+          autoComplete="given-name"
+          label={labels.firstName}
+          value={first}
+          onChange={(e) => setFirst(e.target.value)}
+          maxLength={PERSON_NAME_MAX_LENGTH}
+          readOnly={busy}
+          required
+        />
+        <Input
+          name="family-name"
+          autoComplete="family-name"
+          label={labels.lastName}
+          value={last}
+          onChange={(e) => setLast(e.target.value)}
+          maxLength={PERSON_NAME_MAX_LENGTH}
+          readOnly={busy}
+          required
+        />
+      </div>
+      <Button
+        type="submit"
+        commit
+        pending={busy}
+        // A blank name is a reason the person can act on; an unchanged one is not —
+        // there is nothing to save, and the button is simply off.
+        disabled={valid && !dirty}
+        disabledReason={valid ? undefined : labels.nameRequired}
+      >
+        {labels.save}
+      </Button>
+    </form>
   );
 }
 
@@ -117,6 +299,7 @@ export function PasswordSetting({
   strength,
   maxBytes,
   labels: labelsProp,
+  id,
 }: {
   /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */
   onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;
@@ -147,6 +330,8 @@ export function PasswordSetting({
   maxBytes?: number;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { password } }}>` > English. */
   labels?: Partial<PasswordSettingLabels>;
+  /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */
+  id?: string;
 }) {
   const labels = useAccountSettingsLabels("password", labelsProp);
   const strengthOptions = typeof strength === "object" ? strength : undefined;
@@ -189,8 +374,8 @@ export function PasswordSetting({
   );
 
   return (
-    <Card className="p-4 space-y-3">
-      <div className="text-sm font-medium">{labels.title}</div>
+    <Card id={id} className="p-4 space-y-3">
+      <SettingsCardTitle>{labels.title}</SettingsCardTitle>
       <Input type="password" autoComplete="current-password" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />
       {strength ? (
         // One box for the field and its meter, so the card's `space-y-3` spaces the pair
@@ -257,6 +442,7 @@ export function TwoFactorSetting({
   busy,
   renderQr,
   labels: labelsProp,
+  id,
 }: {
   enabled: boolean;
   /** What the app's setup call returned; null before setup starts. */
@@ -270,8 +456,16 @@ export function TwoFactorSetting({
   renderQr?: (otpauthUri: string) => ReactNode;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { twoFactor } }}>` > English. */
   labels?: Partial<TwoFactorSettingLabels>;
+  /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */
+  id?: string;
 }) {
   const labels = useAccountSettingsLabels("twoFactor", labelsProp);
+  // The title (0.31, docs/settings-harmonization.md §3.7) is new, and an app that
+  // translated this card before it named the setting in `status` — "2FA",
+  // "Zwei-Faktor-Authentifizierung". Each source's `title` first, then its `status`, so
+  // that app keeps its own word instead of meeting the English title.
+  const overrides = useKitLabelOverrides("accountSettings")?.twoFactor;
+  const title = labelsProp?.title ?? overrides?.title ?? labelsProp?.status ?? overrides?.status ?? labels.title;
   const [code, setCode] = useState("");
   const [password, setPassword] = useState("");
   // Both code fields are a OneTimeCodeInput (0.22.0) — the field this card wrote by hand
@@ -285,17 +479,20 @@ export function TwoFactorSetting({
   //    pasted from an authenticator that groups its digits used to reach `onEnable`
   //    with the space in it.
   //  - one `code` state for both, as before.
-  // Only for the "Status: Enabled" composition — the punctuation between a field's
-  // name and its value is the language's (see `CommonLabels.fieldValue`).
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const secret = setup
     ? (setup.secret ?? ("otpauthUri" in setup ? otpauthSecret(setup.otpauthUri) : null))
     : null;
 
   return (
-    <Card className="p-4 space-y-3">
-      <div className="text-sm">
-        {common.fieldValue(labels.status, enabled ? labels.enabledText : labels.disabledText)}
+    <Card id={id} className="p-4 space-y-3">
+      {/* The card had only "Two-factor authentication: Off". A settings page outlines its
+          cards by their titles (§3.7), so the setting's name is the title now, and the
+          state stands beside it as a chip instead of repeating the name. */}
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <SettingsCardTitle>{title}</SettingsCardTitle>
+        <Chip size="sm" tone={enabled ? "success" : "neutral"}>
+          {enabled ? labels.enabledText : labels.disabledText}
+        </Chip>
       </div>
 
       {!enabled && !setup && (

package/src/components/data-table.tsx

@@ -1725,6 +1725,14 @@ export function DataTable<T>({
       // flip stays instant.
       interactive &&
         "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-[var(--bg-active)] motion-reduce:transition-none motion-reduce:active:scale-100",
+      // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live
+      // #394): the browser's own ring and tap highlight sit on the card's outer edge, and
+      // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and
+      // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
+      // keeps the fill and the squeeze above; an outline on every tap of a long list would
+      // be louder than the acknowledgement it replaces.
+      interactive &&
+        "[-webkit-tap-highlight-color:transparent] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
     );
     // The card's content is written once and worn by either tag below. Note that
     // the primary cell is rendered RAW here, never through `linkColumn` — the card

package/src/components/date-picker.tsx

@@ -588,9 +588,6 @@ function StepButton({
           // px-3 would make it wider than it needs to be. twMerge lets these win.
           "relative flex h-full w-10 shrink-0 items-center justify-center px-0 text-[var(--text-muted)]",
           "hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-          // Raised while hovered or focused, so the shared border and the focus ring are
-          // drawn on top of the neighbour they overlap by a pixel.
-          "hover:z-10 focus-visible:z-10",
           // Dimmed ICON, not a dimmed box: at 40% opacity the whole button — border
           // included — faded out of the group and read as a broken, detached control.
           "disabled:cursor-not-allowed disabled:text-[var(--text-placeholder)] disabled:opacity-60 disabled:hover:bg-[var(--bg-surface)]",
@@ -1164,7 +1161,15 @@ export function DatePicker(props: DatePickerProps) {
         "flex items-stretch [&>*:not(:first-child)]:-ms-px",
         step && "[&_[role=combobox]]:rounded-s-none",
         (step || today) && "[&_[role=combobox]]:rounded-e-none",
-        "[&_[role=combobox]:focus-visible]:relative [&_[role=combobox]:focus-visible]:z-10",
+        // The PART that is focused, pressed or invalid is raised over the neighbour it
+        // overlaps by a pixel, so its blue (or red) border shows on all four sides
+        // (keksdose live #394). `:focus-within`, not `:focus-visible`: a tap focuses
+        // without it, as does the sheet handing focus back, and the next part — later in
+        // the DOM — painted its grey left edge over the tapped one's right. Raising the
+        // whole part (each is `relative`) keeps the floating label and the icon above
+        // the trigger, which raising the trigger alone covered. Hover raises nothing: it
+        // changes no border, and would let a hovered › cover a focused field's edge.
+        "[&>*:focus-within]:z-20 [&>*:active]:z-20 [&>*:has([aria-invalid=true])]:z-10",
         className,
       )}
     >

package/src/components/passkeys-setting.tsx

@@ -6,6 +6,7 @@ import { useKitLocale } from "../i18n/kit-labels";
 import { Button, Card, EmptyState, Input } from "./ui";
 import { Skeleton } from "./skeleton";
 import { useAccountSettingsLabels } from "./account-settings-labels";
+import { SettingsCardTitle } from "../settings/settings-heading";
 import type { PasskeysSettingLabels } from "./account-settings-labels";
 
 /** What a passkey's `id` may be: the app's own key type, string or numeric. */
@@ -243,7 +244,7 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
     // `rest` is only `id` and `data-*`: everything else the props name is destructured.
     <Card {...rest} className={cn("p-4 space-y-3", className)}>
       <div>
-        <div className="text-sm font-medium">{labels.title}</div>
+        <SettingsCardTitle>{labels.title}</SettingsCardTitle>
         <div className="text-xs text-[var(--text-muted)]">
           {mode === "alongside"
             ? labels.descriptionAlongside