@eifi1/ui-kit 0.21.0 → 0.23.0

package/src/feedback/feedback-dialog.tsx

@@ -10,6 +10,7 @@ import {
   DEFAULT_MAX_ATTACHMENT_BYTES,
   FeedbackAttachmentField,
   type FeedbackAttachmentError,
+  type FeedbackAttachmentErrorInfo,
 } from "./feedback-attachment";
 
 export interface FeedbackCategoryOption {
@@ -40,6 +41,8 @@ export interface FeedbackAttachmentLabels {
   attachmentRemoveFile?: (name: string) => string;
   /** `multiple` mode: the line shown once `max` files are attached. */
   attachmentLimit?: (max: number) => string;
+  /** `refs` mode (0.22.0): the second line of a chip whose upload is still running. */
+  attachmentUploading?: string;
 }
 
 export interface FeedbackDialogLabels extends FeedbackAttachmentLabels {
@@ -155,7 +158,9 @@ interface FeedbackDialogBaseProps {
 export interface FeedbackDialogSingleProps extends FeedbackDialogBaseProps {
   attachments?: "single";
   onSubmit: (data: FeedbackSubmission) => void | Promise<void>;
-  onAttachmentError?: (kind: "type" | "size") => void;
+  /** `info` (0.23.0) names the refused file and the limit — see
+   *  {@link FeedbackAttachmentErrorInfo}. */
+  onAttachmentError?: (kind: "type" | "size", info: FeedbackAttachmentErrorInfo) => void;
   /** Multiple mode only — refused here rather than silently ignored. */
   maxAttachments?: never;
 }
@@ -170,8 +175,9 @@ export interface FeedbackDialogMultipleProps extends FeedbackDialogBaseProps {
   /** Default `DEFAULT_MAX_ATTACHMENTS` (5). The screenshot does not count. */
   maxAttachments?: number;
   onSubmit: (data: FeedbackMultipleSubmission) => void | Promise<void>;
-  /** `"count"`: more files arrived at once than there was room for; the surplus was dropped. */
-  onAttachmentError?: (kind: FeedbackAttachmentError) => void;
+  /** `"count"`: more files arrived at once than there was room for; the surplus was
+   *  dropped. `info` (0.23.0) names the refused file(s) and the limit. */
+  onAttachmentError?: (kind: FeedbackAttachmentError, info: FeedbackAttachmentErrorInfo) => void;
 }
 
 export type FeedbackDialogProps = FeedbackDialogSingleProps | FeedbackDialogMultipleProps;

package/src/feedback/feedback-inbox.tsx

@@ -18,7 +18,7 @@ import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { Button, Textarea } from "../components/ui";
 import { Tooltip } from "../components/tooltip";
-import { FeedbackAttachmentField } from "./feedback-attachment";
+import { FeedbackAttachmentField, type FeedbackAttachmentErrorInfo } from "./feedback-attachment";
 import type { FeedbackAttachmentLabels } from "./feedback-dialog";
 
 /**
@@ -566,7 +566,8 @@ export interface FeedbackNoteAttachment {
   labels: FeedbackAttachmentLabels;
   accept?: string[];
   maxBytes?: number;
-  onError?: (kind: "type" | "size") => void;
+  /** `info` (0.23.0) names the refused file and the limit. */
+  onError?: (kind: "type" | "size", info: FeedbackAttachmentErrorInfo) => void;
   onCaptureScreenshot?: () => Promise<File | null>;
 }
 

package/src/feedback/feedback-thread.tsx

@@ -1,13 +1,15 @@
-import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import type { ReactNode, Ref } from "react";
 import { ImageIcon, ImageOff, Paperclip, Send } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatDate, formatRelativeTime } from "../lib/format";
 import { Button, EmptyState, Spinner, Textarea } from "../components/ui";
+import type { CharacterCountLabels } from "../components/ui";
 import { Skeleton } from "../components/skeleton";
 import { Tooltip } from "../components/tooltip";
 import { useKitFileLabels, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { FeedbackAttachmentField } from "./feedback-attachment";
+import type { FeedbackAttachmentFieldSingleProps } from "./feedback-attachment";
 import type { FeedbackNoteAttachment } from "./feedback-inbox";
 import type { FeedbackAttachmentLabels } from "./feedback-dialog";
 
@@ -463,9 +465,12 @@ function toDate(value: Date | string | number): Date | null {
 /* ── Composer ─────────────────────────────────────────────────────────────── */
 
 /** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the
- *  labels optional, since the field reads `feedbackAttachment` from the provider. */
-export type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, "labels"> & {
+ *  labels optional, since the field reads `feedbackAttachment` from the provider, and
+ *  `onError` the field's own (0.23.0): it is handed the refused file and the limit too
+ *  (`FeedbackAttachmentErrorInfo`), and a `(kind) => …` handler still fits. */
+export type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, "labels" | "onError"> & {
   labels?: Partial<FeedbackAttachmentLabels>;
+  onError?: FeedbackAttachmentFieldSingleProps["onError"];
 };
 
 export interface FeedbackComposerProps {
@@ -498,7 +503,7 @@ export interface FeedbackComposerProps {
    * for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`
    * with files ready makes an empty draft sendable (`onSend("", null)`), `false` while
    * an upload is still running holds even a written reply back. Left out, the text
-   * decides. `pending` blocks a send either way.
+   * decides. `pending` blocks a send either way, as does a draft past `maxLength`.
    */
   canSend?: boolean;
   /**
@@ -513,6 +518,31 @@ export interface FeedbackComposerProps {
    *  reader. */
   disabledReason?: ReactNode;
   rows?: number;
+  /**
+   * The longest draft the box takes, in UTF-16 code units as the browser counts — the
+   * server's limit, so a reply too long for it is cut off while it is typed rather than
+   * refused by a 422 after the press (keksdose G6: its support replies are capped at
+   * 4,000 on the server, and its other text fields already count against that with
+   * Textarea's `maxLength` + `showCount` since 0.22; the reply box, a composer, could
+   * not). The box's own `maxLength`, so typing and pasting stop at it.
+   *
+   * {@link FeedbackComposerHandle.insertText} is not stopped by it — the browser limits
+   * typing, not a script — and a canned reply is not cut mid-sentence to fit. A draft
+   * past the limit therefore holds Send back (whatever `canSend` says, as `pending`
+   * does) until it is trimmed; with `showCount` the counter, red at the limit, says by
+   * how much.
+   */
+  maxLength?: number;
+  /**
+   * A live "12/4000" under the box, with `maxLength` — Textarea's `showCount`, the same
+   * counter (keksdose G6): the count is part of the box's description, read with it on
+   * focus, and a polite live region speaks only on entering the last stretch and at the
+   * limit, never per keystroke. Under `size="sm"` the hidden send hint stays the box's
+   * description too, before the count. Ignored without `maxLength`.
+   */
+  showCount?: boolean;
+  /** The counter's words — the `characterCount` namespace, as on Textarea. */
+  countLabels?: Partial<CharacterCountLabels>;
   /**
    * The box's hint, over the `placeholder` label — keksdose F9: an admin answering a
    * support ticket is asked something else ("Reply to Anna…") than a member adding to
@@ -535,6 +565,23 @@ export interface FeedbackComposerProps {
   ref?: Ref<FeedbackComposerHandle>;
   labels?: Partial<FeedbackComposerLabels>;
   className?: string;
+  /**
+   * `"sm"` for a narrow host — keksdose's assistant launcher, a small floating panel
+   * (0.22): a small Send button, and the send hint ("Enter to send, Shift + Enter for a
+   * new line") hidden from view but kept as the box's description, so a keyboard or
+   * screen-reader user still learns the shortcut. Default `"md"`.
+   */
+  size?: "md" | "sm";
+  /**
+   * On the composer's root — the box, or the `disabledReason` line in its place —
+   * with any `data-*` attribute beside it (keksdose K17). keksdose's assistant tour
+   * points at the chat box with `[data-tour="assistant-ask"]`, and a composer that
+   * dropped every attribute it was not told about left the anchor nowhere: the
+   * assistant kept its hand-built box rather than lose the tour step.
+   */
+  id?: string;
+  /** `data-*` attributes for the root, as `id` — a tour anchor, a test id. */
+  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
 }
 
 /**
@@ -577,14 +624,22 @@ export function FeedbackComposer({
   sendOn = "mod-enter",
   disabledReason,
   rows = 3,
+  maxLength,
+  showCount,
+  countLabels,
   placeholder,
   value,
   onValueChange,
   ref,
   labels: labelsProp,
   className,
+  id,
+  size = "md",
+  ...rest
 }: FeedbackComposerProps) {
   const labels = useKitLabels("feedbackComposer", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);
+  const rootAttributes = { id, ...dataAttributes(rest) };
+  const hintId = useId();
   const [ownDraft, setOwnDraft] = useState("");
   const controlled = value !== undefined;
   const draft = controlled ? value : ownDraft;
@@ -639,10 +694,17 @@ export function FeedbackComposer({
   );
 
   if (disabledReason != null && disabledReason !== false) {
-    return <p className={cn("text-xs text-[var(--text-muted)]", className)}>{disabledReason}</p>;
+    return (
+      <p {...rootAttributes} className={cn("text-xs text-[var(--text-muted)]", className)}>
+        {disabledReason}
+      </p>
+    );
   }
 
-  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending;
+  // Longer than `maxLength` only through `insertText` or a controlled value (typing
+  // stops at it): the server would refuse it, so it does not go.
+  const tooLong = maxLength !== undefined && draft.length > maxLength;
+  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending && !tooLong;
   const send = () => {
     if (!canSend) return;
     const sentDraft = draft;
@@ -658,11 +720,19 @@ export function FeedbackComposer({
   const config = attachment === true ? {} : attachment || null;
 
   return (
-    <div ref={root} className={cn("space-y-2", className)}>
+    <div {...rootAttributes} ref={root} className={cn("space-y-2", className)}>
       <Textarea
         rows={rows}
         dir="auto"
         aria-label={labels.field}
+        // Textarea puts the counter's description after this one, so under "sm" the box
+        // reads "Enter to send… 12 of 4000 characters".
+        aria-describedby={size === "sm" ? hintId : undefined}
+        maxLength={maxLength}
+        // Passed only when given: Textarea keeps a wrapper for a `showCount` it was
+        // handed at all, and a composer without one keeps the DOM it had.
+        {...(showCount !== undefined ? { showCount } : null)}
+        countLabels={countLabels}
         ref={box}
         placeholder={placeholder ?? labels.placeholder}
         value={draft}
@@ -707,10 +777,18 @@ export function FeedbackComposer({
           <span />
         )}
         <div className="ms-auto flex items-center gap-2">
-          <span className="text-xs text-[var(--text-placeholder)]">
+          <span
+            id={hintId}
+            className={size === "sm" ? "sr-only" : "text-xs text-[var(--text-placeholder)]"}
+          >
             {sendOn === "enter" ? labels.sendHintEnter : labels.sendHint(modifier)}
           </span>
-          <Button onClick={send} disabled={!canSend} aria-busy={pending || undefined}>
+          <Button
+            onClick={send}
+            disabled={!canSend}
+            aria-busy={pending || undefined}
+            size={size === "sm" ? "sm" : undefined}
+          >
             {pending ? (
               <Spinner label={null} className="size-4" />
             ) : (
@@ -723,3 +801,29 @@ export function FeedbackComposer({
     </div>
   );
 }
+
+/** The `data-*` entries of a rest-props object, and nothing else: whatever a caller
+ *  spread in that the composer does not know is not the root's to receive. */
+function dataAttributes(props: object): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) if (key.startsWith("data-")) out[key] = value;
+  return out;
+}
+
+/**
+ * {@link FeedbackComposer} under a name that is not about feedback (keksdose K17).
+ *
+ * The component was never feedback-specific: a textarea, an optional picture or a
+ * host's upload slot, Send, `sendOn="enter"` for the chat way. keksdose's assistant
+ * and support chat are chats, not reports, and an import of `FeedbackComposer` there
+ * reads as a mistake to the next person. The same function, not a wrapper, so the
+ * two names cannot drift.
+ */
+export const ChatComposer = FeedbackComposer;
+/** {@link FeedbackComposerProps}, for {@link ChatComposer}. */
+export type ChatComposerProps = FeedbackComposerProps;
+/** {@link FeedbackComposerHandle}, for {@link ChatComposer}. */
+export type ChatComposerHandle = FeedbackComposerHandle;
+/** {@link FeedbackComposerLabels}, for {@link ChatComposer} — still the `feedbackComposer`
+ *  namespace of the provider. */
+export type ChatComposerLabels = FeedbackComposerLabels;

package/src/i18n/defaults.ts

@@ -6,7 +6,11 @@ import { DEFAULT_PAGE_CONTENTS_LABELS } from "../components/page-contents";
 import { DEFAULT_POPOVER_LABELS } from "../components/popover";
 import { DEFAULT_CHIP_INPUT_LABELS } from "../components/chip";
 import { DEFAULT_FIELD_SYNC_LABELS } from "../components/field-sync";
-import { DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS } from "../components/ui";
+import {
+  DEFAULT_CHARACTER_COUNT_LABELS,
+  DEFAULT_PASSWORD_REVEAL_LABELS,
+  DEFAULT_TABS_LABELS,
+} from "../components/ui";
 import { DEFAULT_WIZARD_LABELS } from "../wizard/types";
 import { DEFAULT_TOUR_LABELS } from "../tour/tour";
 import { DEFAULT_COMMAND_PALETTE_LABELS } from "../search/command-palette";
@@ -53,6 +57,12 @@ import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card";
 import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog";
 import { DEFAULT_SERVER_WAKE_LABELS } from "../components/server-wake";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "../components/translation-review-labels";
+import { DEFAULT_COUNTRY_SELECT_LABELS } from "../components/country-select";
+import { DEFAULT_INLINE_EDIT_LABELS } from "../components/inline-edit-field";
+import { DEFAULT_IBAN_INPUT_LABELS } from "../components/iban-input";
+import { DEFAULT_PHONE_INPUT_LABELS } from "../components/phone-input";
+import { DEFAULT_SIGN_CHIP_LABELS } from "../components/sign-chip";
+import { DEFAULT_COLUMN_MAPPER_LABELS } from "../components/column-mapper";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -142,4 +152,11 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   serverWake: DEFAULT_SERVER_WAKE_LABELS,
   translationReview: DEFAULT_TRANSLATION_REVIEW_LABELS,
   legal: DEFAULT_LEGAL_LABELS,
+  characterCount: DEFAULT_CHARACTER_COUNT_LABELS,
+  countrySelect: DEFAULT_COUNTRY_SELECT_LABELS,
+  inlineEdit: DEFAULT_INLINE_EDIT_LABELS,
+  ibanInput: DEFAULT_IBAN_INPUT_LABELS,
+  phoneInput: DEFAULT_PHONE_INPUT_LABELS,
+  signChip: DEFAULT_SIGN_CHIP_LABELS,
+  columnMapper: DEFAULT_COLUMN_MAPPER_LABELS,
 };

package/src/i18n/german.ts

@@ -28,6 +28,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       attachmentScreenshot: "Screenshot",
       attachmentRemoveFile: (name) => `${name} entfernen`,
       attachmentLimit: (max) => `Maximal ${n(max)} ${max === 1 ? "Anhang" : "Anhänge"} – zum Hinzufügen erst einen entfernen.`,
+      attachmentUploading: "Wird hochgeladen…",
+      attachmentUploadFailed: (name) => `„${name}“ konnte nicht hochgeladen werden`,
     },
     feedbackDialog: {
       title: "Feedback senden",
@@ -210,6 +212,10 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       booleanTrue: "Ja",
       booleanFalse: "Nein",
       booleanUnset: "Nicht festgelegt",
+      sortBy: "Sortieren nach",
+      sortDefault: "Standardreihenfolge",
+      sortAscending: "Aufsteigend",
+      sortDescending: "Absteigend",
     },
     miniCalendar: {
       previousMonth: "Vorheriger Monat",
@@ -249,6 +255,10 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       previousMonth: "Vorheriger Monat",
       nextMonth: "Nächster Monat",
       today: "Heute",
+      yearPanel: "Jahr wählen",
+      earlierYears: "Frühere Jahre",
+      laterYears: "Spätere Jahre",
+      thisYear: "Dieses Jahr",
     },
     popover: {
       panel: "Aufklappfenster",
@@ -330,6 +340,10 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       prompt: "Dies kann nicht rückgängig gemacht werden.",
       password: "Passwort",
       phrase: (phrase) => `Geben Sie zur Bestätigung „${phrase}“ ein`,
+      acknowledge: "Ich habe gelesen, was dies bewirkt, und möchte fortfahren.",
+      needsPhrase: (phrase) => `Geben Sie zur Bestätigung „${phrase}“ ein`,
+      needsAcknowledge: "Setzen Sie zur Bestätigung das Häkchen",
+      needsPassword: "Geben Sie zur Bestätigung Ihr Passwort ein",
     },
     tabs: {
       // "Tab" is what German UIs say; "Registerkarte" reads like a 1990s manual.
@@ -541,6 +555,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
     form: {
       save: "Speichern",
       cancel: "Abbrechen",
+      // German keyboards label the key "Strg"; Apple's ⌘ is the same everywhere.
+      submitShortcut: (apple) => (apple ? "⌘ Enter" : "Strg+Enter"),
     },
     descriptionList: {
       empty: "—",
@@ -651,6 +667,79 @@ export function germanLabels(numberLocale: string): UiKitLabels {
     legal: {
       navLabel: "Rechtliches",
     },
+    characterCount: {
+      // "Zeichen" is the same in singular and plural.
+      count: (used, max) => `${n(used)} von ${n(max)} Zeichen`,
+      remaining: (left) => `Noch ${n(left)} Zeichen`,
+      limitReached: "Zeichenlimit erreicht",
+    },
+    countrySelect: {
+      country: "Land",
+      search: "Land suchen",
+      others: "Weitere Länder",
+    },
+    inlineEdit: {
+      edit: (label) => `${label} bearbeiten`,
+      failed: "Die Änderung konnte nicht gespeichert werden.",
+      empty: "Leer",
+    },
+    ibanInput: {
+      format: "Eine IBAN beginnt mit einem Ländercode aus zwei Buchstaben und zwei Prüfziffern.",
+      country: (code) => `„${code}“ ist kein Ländercode einer IBAN.`,
+      length: (actual, expected) =>
+        `Eine IBAN aus diesem Land hat ${n(expected)} Zeichen – diese hat ${n(actual)}.`,
+      checksum: "Die Prüfziffern stimmen nicht – vermutlich ist ein Zeichen falsch eingegeben.",
+      qrRequired: "Dies ist eine reguläre IBAN. Eine QR-Rechnung braucht die QR-IBAN des Kontos.",
+      qrNotAllowed:
+        "Dies ist eine QR-IBAN, die nur Zahlungen mit QR-Rechnung empfängt. Geben Sie die reguläre IBAN des Kontos ein.",
+    },
+    phoneInput: {
+      countryCode: "Ländervorwahl",
+      other: "Andere",
+    },
+    signChip: {
+      outflow: "Ausgabe",
+      inflow: "Einnahme",
+      direction: (current, next) => `Richtung: ${current} – zu ${next} wechseln`,
+    },
+    columnMapper: {
+      paste: "Tabelle einfügen",
+      pasteHint:
+        "Die Zeilen aus einer Tabellenkalkulation kopieren und hier einfügen – oder eine CSV- oder Textdatei hier ablegen.",
+      chooseFile: "Datei auswählen",
+      readError: (name) => `„${name}“ konnte nicht gelesen werden`,
+      headerRow: "Die erste Zeile enthält die Spaltennamen",
+      summary: (columns, rows) =>
+        `${n(columns)} ${columns === 1 ? "Spalte" : "Spalten"}, ${n(rows)} ${rows === 1 ? "Zeile" : "Zeilen"}`,
+      // Fragments of the summary line ("3 Spalten, 120 Zeilen · durch Semikolons getrennt").
+      separatorSemicolon: "durch Semikolons getrennt",
+      separatorComma: "durch Kommas getrennt",
+      separatorTab: "durch Tabulatoren getrennt",
+      separatorSpace: "durch Leerzeichen getrennt",
+      // The examples stay as written: they show the convention, not the reader's locale.
+      decimalComma: "Dezimalkomma (1,5)",
+      decimalPoint: "Dezimalpunkt (1.5)",
+      unreadCount: (count) =>
+        count === 1
+          ? "1 Zeile konnte nicht gelesen werden"
+          : `${n(count)} Zeilen konnten nicht gelesen werden`,
+      // A line number is a position, not a count: unformatted, as `measuredGrid.lineError`.
+      unreadLine: (line) => `Zeile ${line} konnte nicht gelesen werden`,
+      unreadMore: (count) => `…und ${n(count)} weitere`,
+      noRows: "Keine Zeile dieses Textes lässt sich als Tabellenzeile lesen.",
+      table: "Spaltenzuordnung",
+      columnN: (column) => `Spalte ${column}`,
+      roleOf: (column) => `Was enthält die Spalte „${column}“?`,
+      ignore: "Ignorieren",
+      requiredRole: (role) => `${role} (erforderlich)`,
+      previewOf: (shown, total) =>
+        shown === 1
+          ? `Die erste von ${n(total)} Zeilen`
+          : `Die ersten ${n(shown)} von ${n(total)} Zeilen`,
+      // `roles` arrives joined with "oder" ("Soll oder Haben").
+      oneOf: (roles) => `entweder ${roles}`,
+      missing: (roles) => `Noch erforderlich: ${roles}.`,
+    },
     translationReview: {
       statusMissing: "Fehlt",
       statusUnreviewed: "Ungeprüft",

package/src/i18n/kit-labels.tsx

@@ -7,7 +7,7 @@ import type { CalendarHeatmapLabels } from "../components/calendar-heatmap";
 import type { PopoverLabels } from "../components/popover";
 import type { ChipInputLabels } from "../components/chip";
 import type { FieldSyncLabels } from "../components/field-sync";
-import type { PasswordRevealLabels, TabsLabels } from "../components/ui";
+import type { CharacterCountLabels, PasswordRevealLabels, TabsLabels } from "../components/ui";
 import type { WizardLabels } from "../wizard/types";
 import type { TourLabels } from "../tour/tour";
 import type { CommandPaletteLabels } from "../search/command-palette";
@@ -53,6 +53,12 @@ import type { ShareCardLabels } from "../components/share-card";
 import type { ReauthDialogLabels } from "../components/reauth-dialog";
 import type { ServerWakeLabels } from "../components/server-wake";
 import type { TranslationReviewLabels } from "../components/translation-review-labels";
+import type { CountrySelectLabels } from "../components/country-select";
+import type { InlineEditLabels } from "../components/inline-edit-field";
+import type { IbanInputLabels } from "../components/iban-input";
+import type { PhoneInputLabels } from "../components/phone-input";
+import type { SignChipLabels } from "../components/sign-chip";
+import type { ColumnMapperLabels } from "../components/column-mapper";
 
 /**
  * EVERY string the kit renders, as one typed tree — and an optional provider that
@@ -294,6 +300,21 @@ export interface UiKitLabels {
   translationReview: TranslationReviewLabels;
   /** 0.19.0: `LegalLinks`' navigation name — the legal pages' shell, for every app. */
   legal: LegalLabels;
+  /** 0.22.0: the screen-reader words of `Input` / `Textarea`'s `showCount` counter. */
+  characterCount: CharacterCountLabels;
+  /** 0.22.0: `CountrySelect`. Its list's "no results" and counts are `combobox`'s. */
+  countrySelect: CountrySelectLabels;
+  /** 0.22.0: `InlineEditField` — keksdose K9. */
+  inlineEdit: InlineEditLabels;
+  /** 0.22.0: `IbanInput`'s messages, one per problem. */
+  ibanInput: IbanInputLabels;
+  /** 0.22.0: `PhoneInput`'s country-code select. */
+  phoneInput: PhoneInputLabels;
+  /** 0.22.0: `SignChip` — the outflow / inflow toggle beside an amount. */
+  signChip: SignChipLabels;
+  /** 0.23.0: `ColumnMapper` / `ColumnRoleTable` — a pasted or dropped table, a role per
+   *  column. */
+  columnMapper: ColumnMapperLabels;
 }
 
 /**
@@ -438,8 +459,40 @@ interface KitI18n {
   weekStartsOn?: WeekDay;
   linkComponent?: KitLinkComponent;
   chartTooltipPlacement?: ChartTooltipPlacement;
+  formatDate?: KitDateFormatter;
 }
 
+/** What a {@link KitDateFormatter} is told about the date it is formatting. */
+export interface KitDateFormatContext {
+  /**
+   * How much of a date the string is: `"day"` — the `iso` is `"YYYY-MM-DD"`; `"month"` —
+   * `"YYYY-MM"` (a `MonthPicker`); `"year"` — `"YYYY"` (`MonthPicker mode="year"`).
+   */
+  unit: "day" | "month" | "year";
+  /** Which kit surface asks: the trigger of a `DatePicker`, of a `DateRangePicker`
+   *  (called once per end), of a `MonthPicker`, or a `DateMark`. */
+  source: "datePicker" | "dateRangePicker" | "monthPicker" | "dateMark";
+  /** The locale the kit would have formatted in — the component's `locale` prop, else
+   *  the provider's — or `undefined` for the runtime's. */
+  locale: string | undefined;
+  /**
+   * The kit's suggestion: whether this date stands alone where the day of the week
+   * helps — `true` for a `DatePicker`'s trigger and a `DateMark`, `false` for the two
+   * ends of a range (twice the width, in a sentence-like "from – to") and for a month
+   * or a year. keksdose's rule, which this follows: *"A date in a COLUMN carries the
+   * weekday. A date in a SENTENCE does not."* (date-cell.tsx, dev#546). A formatter
+   * is free to ignore it.
+   */
+  weekday: boolean;
+}
+
+/**
+ * The app's ONE answer to "what does a date look like here" — keksdose K12. Returns the
+ * text for an ISO date (see {@link KitDateFormatContext.unit} for the three shapes).
+ * Return `""` to fall back to the kit's own formatting for that date.
+ */
+export type KitDateFormatter = (iso: string, context: KitDateFormatContext) => string;
+
 /** Where a chart shows the values under the pointer — see `SeriesChartTooltip.placement`. */
 export type ChartTooltipPlacement = "cursor" | "above" | "below" | "auto";
 
@@ -506,6 +559,25 @@ export interface UiKitProviderProps {
    * pointer, as before.
    */
   chartTooltipPlacement?: ChartTooltipPlacement;
+  /**
+   * How every kit date below is written, when the component is not told otherwise —
+   * keksdose K12. keksdose has a date-format preference (Settings ▸ date format, feedback
+   * #180) that is not the UI language, and a weekday in the UI language beside digits
+   * in the preference's order (live #246, dev#546): two locales in one string, which
+   * no `locale` + `Intl` options can say. Its `DateField` wraps every `DatePicker` to
+   * pass `formatValue`, and its report range field formats both ends by hand; with this
+   * set once on the provider, those wrappers thin to nothing.
+   *
+   * Used for the trigger text of `DatePicker`, `DateRangePicker` and `MonthPicker`
+   * (month and year mode), and for `DateMark display="date"`. A component's own
+   * `formatValue` or `formatOptions` (`dateStyle` on a DateMark) wins: prop >
+   * provider > the kit's `Intl` default, the order every kit setting resolves in. Left
+   * out (or returning `""`), everything formats exactly as before.
+   *
+   * Keep it stable (`useCallback`, or a module function): it is in the provider's
+   * context value, so a new function every render re-renders every consumer.
+   */
+  formatDate?: KitDateFormatter;
   children: ReactNode;
 }
 
@@ -523,6 +595,7 @@ export function UiKitProvider({
   weekStartsOn,
   linkComponent,
   chartTooltipPlacement,
+  formatDate,
   children,
 }: UiKitProviderProps) {
   const outer = useContext(KitI18nContext);
@@ -533,8 +606,9 @@ export function UiKitProvider({
       labels: mergeOverrides(outer.labels, labels),
       linkComponent: linkComponent ?? outer.linkComponent,
       chartTooltipPlacement: chartTooltipPlacement ?? outer.chartTooltipPlacement,
+      formatDate: formatDate ?? outer.formatDate,
     }),
-    [outer, labels, locale, weekStartsOn, linkComponent, chartTooltipPlacement],
+    [outer, labels, locale, weekStartsOn, linkComponent, chartTooltipPlacement, formatDate],
   );
   return <KitI18nContext.Provider value={value}>{children}</KitI18nContext.Provider>;
 }
@@ -627,6 +701,12 @@ export function useKitChartTooltipPlacement(): ChartTooltipPlacement | undefined
   return useContext(KitI18nContext).chartTooltipPlacement;
 }
 
+/** The nearest provider's `formatDate`, or `undefined` — a component's own
+ *  `formatValue` / `formatOptions` wins over it. See {@link KitDateFormatter}. */
+export function useKitDateFormatter(): KitDateFormatter | undefined {
+  return useContext(KitI18nContext).formatDate;
+}
+
 /** {@link DEFAULT_FILE_LABELS}, but formatting in the provider's locale. */
 export function useKitFileLabels(prop?: Partial<FileLabels>): FileLabels {
   const locale = useKitLocale();

package/src/i18n/locales/en.ts

@@ -33,7 +33,9 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
       ...d.measuredGrid,
       points: (count) => (count === 1 ? "1 point" : `${n(count)} points`),
       problems: (count) =>
-        count === 1 ? "1 cell is not a number" : `${n(count)} cells are not numbers`,
+        count === 1
+          ? "1 cell is not a number"
+          : `${n(count)} cells are not numbers`,
     },
     dataTable: {
       ...d.dataTable,
@@ -51,9 +53,12 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
     combobox: {
       ...d.combobox,
       selectedCount: (count) => `${n(count)} selected`,
-      resultCount: (count) => (count === 1 ? "1 result" : `${n(count)} results`),
+      resultCount: (count) =>
+        count === 1 ? "1 result" : `${n(count)} results`,
       minChars: (count) =>
-        count === 1 ? "Type at least 1 character" : `Type at least ${n(count)} characters`,
+        count === 1
+          ? "Type at least 1 character"
+          : `Type at least ${n(count)} characters`,
     },
     multiSelect: {
       ...d.multiSelect,
@@ -81,7 +86,9 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
         `“${name}” was not added: at most ${n(maxFiles)} ${maxFiles === 1 ? "file" : "files"}`,
       rejectedMany: (count) => `${n(count)} files were not added`,
       rejectedPick: (count) =>
-        count === 1 ? "The file was not added" : `None of the ${n(count)} files were added`,
+        count === 1
+          ? "The file was not added"
+          : `None of the ${n(count)} files were added`,
       selected: (count, firstName) =>
         count === 1 ? `“${firstName}” selected` : `${n(count)} files selected`,
     },
@@ -120,5 +127,30 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
       localeProgress: (approved, total) => `${n(approved)}/${n(total)}`,
       exportCorrections: (count) => `Export corrections (${n(count)})`,
     },
+    characterCount: {
+      ...d.characterCount,
+      count: (used, max) => `${n(used)} of ${n(max)} characters`,
+      remaining: (left) =>
+        left === 1 ? "1 character left" : `${n(left)} characters left`,
+    },
+    ibanInput: {
+      ...d.ibanInput,
+      length: (actual, expected) =>
+        `An IBAN from this country has ${n(expected)} characters — this one has ${n(actual)}.`,
+    },
+    columnMapper: {
+      ...d.columnMapper,
+      summary: (columns, rows) =>
+        `${n(columns)} ${columns === 1 ? "column" : "columns"}, ${n(rows)} ${rows === 1 ? "row" : "rows"}`,
+      unreadCount: (count) =>
+        count === 1
+          ? "1 line could not be read"
+          : `${n(count)} lines could not be read`,
+      unreadMore: (count) => `…and ${n(count)} more`,
+      previewOf: (shown, total) =>
+        shown === 1
+          ? `The first of ${n(total)} rows`
+          : `The first ${n(shown)} of ${n(total)} rows`,
+    },
   };
 }