@eifi1/ui-kit 0.35.0 → 0.36.0

package/src/components/phone-input.tsx

@@ -148,6 +148,7 @@ export function PhoneInput({
   inputClassName,
   label,
   hint,
+  help,
   error,
   invalid,
   disabled,
@@ -225,6 +226,9 @@ export function PhoneInput({
   // since 0.34, not a copy of its rule (DUP-2, DUP-8).
   const messages = useFieldMessages({
     hint,
+    // The number's label line takes the help's "?" (0.36); the hint is then the caption.
+    help,
+    name: label ?? rest["aria-label"],
     error,
     invalid,
     describedBy: ariaDescribedBy,

package/src/components/popover.tsx

@@ -10,7 +10,9 @@ import { dirOf } from "../lib/direction";
 import type { Direction } from "../lib/direction";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { DEFAULT_POPOVER_LABELS } from "./popover-labels";
-import { mergeRefs } from "./field-parts";
+// From ../lib/refs, not field-parts (round 0.36): field-parts renders a HelpPopover for a
+// field's `help`, so importing from there would close a cycle, as it did for Tooltip.
+import { mergeRefs } from "../lib/refs";
 
 /** The panel's accessible name. A `role="dialog"` with no name announces as "dialog"
  *  and nothing else, which is worse than the unlabelled div it replaced — so it is a

package/src/components/select.tsx

@@ -6,6 +6,7 @@ import {
   LockedReason,
   mergeDescribedBy,
   type DisabledReasonDisplay,
+  type FieldHelpProps,
   useFieldError,
   useFieldHint,
   useLockReason,
@@ -20,7 +21,7 @@ import {
   fieldBelow,
 } from "./field-base";
 
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">, FieldHelpProps {
   label?: ReactNode;
   /** See {@link Input}'s `invalid`. */
   invalid?: boolean;
@@ -33,7 +34,8 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
    *  set in the value's type on top of both the label and the value. On an
    *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,
    *  outside the box. Since 0.34 a FieldHint is the caption at Large and on a touch
-   *  screen, as on Input (`useInlineHint`); a `HelpPopover` stays a "?". */
+   *  screen, as on Input (`useInlineHint`); a `HelpPopover` stays a "?". Beside a
+   *  `help` (0.36) the hint is the caption at every size: the help's "?" is the only one. */
   hint?: ReactNode;
   /**
    * `"sm"`: a 28px, 12px-type select for a toolbar or a table header, where the
@@ -109,6 +111,7 @@ export function Select(props: SelectProps) {
     invalid,
     error,
     hint: hintProp,
+    help,
     size,
     selectClassName,
     disabledReason,
@@ -138,7 +141,7 @@ export function Select(props: SelectProps) {
   // and on a touch screen is its words, a caption like any text (§4; a HelpPopover stays
   // on the label line, §10.23). See `hint` above. Through useFieldHint since 0.34, not a
   // copy of its rule (DUP-2, refactor audit 2026-10).
-  const hintParts = useFieldHint(hintProp, rest["aria-describedby"]);
+  const hintParts = useFieldHint(hintProp, rest["aria-describedby"], { help, name: label ?? rest["aria-label"] });
   const hint = hintParts.labelHint;
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,

package/src/components/slider.tsx

@@ -1,7 +1,7 @@
 import { useId } from "react";
 import type { CSSProperties, ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
-import { useFieldMessages } from "./field-parts";
+import { useFieldMessages, type FieldHelpProps } from "./field-parts";
 
 /**
  * A range control on a native `<input type="range">`.
@@ -123,7 +123,8 @@ export interface SliderProps
   extends Omit<
     InputHTMLAttributes<HTMLInputElement>,
     "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"
-  > {
+  >,
+    FieldHelpProps {
   /** The value. On a log scale this is the real value, not the track position. */
   value: number;
   /** The new value — a number, not the DOM event, like `ToggleGroup`. Fired on every
@@ -201,6 +202,7 @@ export function Slider({
   formatValue,
   label,
   hint,
+  help,
   readout,
   marks,
   className,
@@ -254,7 +256,12 @@ export function Slider({
   const hasMarkLabels = normalizedMarks.some((m) => m.label !== undefined);
 
   // The label line's "?", or the caption under the track (DUP-2).
-  const messages = useFieldMessages({ hint, describedBy: rest["aria-describedby"] });
+  const messages = useFieldMessages({
+    hint,
+    help,
+    name: label ?? rest["aria-label"],
+    describedBy: rest["aria-describedby"],
+  });
   const labelHint = messages.labelHint;
   const hasHeader = label !== undefined || labelHint !== undefined || readout !== undefined;
   const plainReadout = typeof readout === "string" || typeof readout === "number";

package/src/components/stat-tile.tsx

@@ -1,7 +1,9 @@
-import { createContext, isValidElement, useContext, useId, useLayoutEffect, useState } from "react";
+import { createContext, useContext, useId, useLayoutEffect, useState } from "react";
 import type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from "react";
 import { ArrowDown, ArrowUp, Minus } from "lucide-react";
 import { cn } from "../lib/cn";
+// The sparkline's name: the label's text (lib since 0.36, which a field's `help` "?" shares).
+import { plainText } from "../lib/plain-text";
 import { useKitLabels, useKitLink, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link";
 import { Card } from "./card";
@@ -612,23 +614,6 @@ function FigureRow({
   );
 }
 
-/**
- * The text of a label node, for the sparkline's name: a string or number as is, an
- * element by its children, recursively. A `<Tooltip label="…">Spend</Tooltip>` label
- * yields "Spend" — the text the reader sees, not the bubble's. `undefined` when there
- * is no text to find (an icon), so the sparkline falls back to its unnamed summary.
- */
-function plainText(node: ReactNode): string | undefined {
-  const walk = (n: ReactNode): string => {
-    if (typeof n === "string" || typeof n === "number") return String(n);
-    if (Array.isArray(n)) return n.map(walk).join("");
-    if (isValidElement<{ children?: ReactNode }>(n)) return walk(n.props.children);
-    return "";
-  };
-  const text = walk(node).replace(/\s+/g, " ").trim();
-  return text === "" ? undefined : text;
-}
-
 /**
  * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.
  * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not

package/src/components/swatch-picker.tsx

@@ -7,7 +7,7 @@ import type { TileItem, TileSize } from "./tile-radio";
 import { Tooltip } from "./tooltip";
 import { useCommitReason, type CommitScope } from "./write-lock";
 import { hasContent } from "../lib/presence";
-import { LabelStrip, mergeDescribedBy, useFieldMessages } from "./field-parts";
+import { LabelStrip, mergeDescribedBy, useFieldMessages, type FieldHelpProps } from "./field-parts";
 import { DEFAULT_SWATCH_PICKER_LABELS } from "./swatch-picker-labels";
 
 export interface SwatchPickerLabels {
@@ -62,7 +62,8 @@ export interface SwatchOption<T extends string> {
  * is omitted rather than shadowed, as on {@link ToggleGroup}.
  */
 export interface SwatchPickerProps<T extends string>
-  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue"> {
+  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue">,
+    FieldHelpProps {
   options: SwatchOption<T>[];
   /** The chosen colour, or `null` for none. */
   value: T | null;
@@ -145,6 +146,7 @@ export function SwatchPicker<T extends string>({
   labels,
   label,
   hint,
+  help,
   disabledReason: ownDisabledReason,
   commit,
   className,
@@ -157,10 +159,13 @@ export function SwatchPicker<T extends string>({
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   const labelled = hasContent(label);
-  // The label line's "?", or the caption under the swatches (DUP-2). Only with a label.
-  // The caller's ids, the caption, then the group's state: mixed, locked.
+  // The label line's "?", or the caption under the swatches (DUP-2). Only with a label,
+  // the help's "?" too (0.36). The caller's ids, the caption, then the group's state:
+  // mixed, locked.
   const messages = useFieldMessages({
     hint: labelled ? hint : undefined,
+    help: labelled ? help : undefined,
+    name: label,
     describedBy: rest["aria-describedby"],
     reasonId: mergeDescribedBy(mixed && mixedId, locked && reasonId),
   });

package/src/components/text-link.tsx

@@ -228,7 +228,9 @@ export interface TextLinkProps
 }
 
 const TONE: Record<TextLinkTone, string> = {
-  brand: "text-brand hover:text-[var(--brand-hover)]",
+  // Under More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36,
+  // colour-roles §13.3 decision 8): `--brand` is a mark's colour, solved to 3:1.
+  brand: "text-brand hover:text-[var(--brand-hover)] contrast:text-brand-muted contrast:hover:text-brand-muted",
   muted: "text-muted hover:text-primary",
   danger: "text-danger hover:text-[var(--danger-hover)]",
   inherit: "",

package/src/components/textarea.tsx

@@ -1,7 +1,14 @@
 import { useId, useLayoutEffect, useRef } from "react";
 import type { ChangeEvent, ReactNode, Ref, TextareaHTMLAttributes } from "react";
 import { cn } from "../lib/cn";
-import { EndHintRow, FieldCaption, mergeDescribedBy, useFieldError, useFieldHint } from "./field-parts";
+import {
+  EndHintRow,
+  FieldCaption,
+  mergeDescribedBy,
+  useFieldError,
+  useFieldHint,
+  type FieldHelpProps,
+} from "./field-parts";
 import {
   CharacterCount,
   FIELD_BASE,
@@ -221,7 +228,7 @@ function TextareaLabelStrip() {
   return <span ref={ref} aria-hidden data-slot="label-strip" className={TEXTAREA_LABEL_STRIP} />;
 }
 
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldHelpProps {
   label?: ReactNode;
   /** See {@link Input}'s `invalid`. */
   invalid?: boolean;
@@ -240,13 +247,13 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
 }
 
 export function Textarea(props: TextareaProps) {
-  const { ref, className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;
+  const { ref, className, label, id, placeholder, invalid, error, hint, help, showCount, countLabels, ...rest } = props;
   // See Input's `reserve`.
   const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
   const fieldId = id ?? generated;
   const countId = useId();
-  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
+  const hintParts = useFieldHint(hint, rest["aria-describedby"], { help, name: label ?? rest["aria-label"] });
   const maxLength = rest.maxLength;
   const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
   const length = useTypedLength(rest.value, rest.defaultValue);

package/src/components/toggle-group.tsx

@@ -11,11 +11,13 @@ import {
   DISABLED_REASON_LINE_CLASS,
   FIELD_CAPTION_CLASS,
   FIELD_ERROR_CLASS,
+  fieldHelpMark,
   isTextHint,
   LabelStrip,
   useDisabledReasonLine,
   useInlineHint,
   type DisabledReasonDisplay,
+  type FieldHelpProps,
 } from "./field-parts";
 import { FOCUS_RING_WIDTH } from "./focus-ring";
 
@@ -35,7 +37,8 @@ export interface ToggleOption<T extends string> {
  * worse than one that does not compile.
  */
 export interface ToggleGroupBaseProps<T extends string>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
+  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children">,
+    FieldHelpProps {
   options: ToggleOption<T>[];
   className?: string;
   /** Applied to every option button (e.g. to tune height/rounding to match
@@ -380,6 +383,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
     labelPlacement = "field",
     chromeClassName,
     hint,
+    help,
     error,
     disabledReason: ownDisabledReason,
     disabledReasonDisplay,
@@ -407,10 +411,22 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   // §4: at Large and on touch the reason is a line under the group, not a bubble.
   const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
   // §4: likewise a FieldHint "?" on the label line becomes a caption under the group at
-  // Large and on touch; text is a caption at every size, as Select's (see `hint`).
-  const inlineHint = useInlineHint(hint);
-  const hintAsCaption = isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : undefined;
-  const labelHint = hintAsCaption === undefined ? hint : undefined;
+  // Large and on touch; text is a caption at every size, as Select's (see `hint`). With
+  // a `help` (0.36, only with `label`, as `hint`), its "?" is the label line's only one,
+  // and the hint — a FieldHint's words included — is the caption at every size.
+  const helpMark = fieldHelpMark(hasContent(label) ? help : undefined, label);
+  const withHelp = helpMark !== undefined;
+  const inlineHint = useInlineHint(hint, withHelp);
+  const hintAsCaption = withHelp
+    ? hasContent(inlineHint)
+      ? inlineHint
+      : undefined
+    : isTextHint(hint)
+      ? hint
+      : inlineHint !== hint
+        ? inlineHint
+        : undefined;
+  const labelHint = helpMark ?? (hintAsCaption === undefined ? hint : undefined);
   // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —
   // but stays focusable; `disabled` alone also takes the segments out of the tab order.
   const dimmed = disabled || locked;

package/src/i18n/defaults.ts

@@ -87,6 +87,7 @@ import { DEFAULT_DEMO_LABELS } from "../demo/demo-labels";
 import { DEFAULT_BILLING_LABELS } from "../billing/billing-labels";
 import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change-labels";
 import { DEFAULT_APPEARANCE_LABELS } from "../components/appearance-labels";
+import { DEFAULT_DEVICE_RESET_LABELS } from "../settings/device-reset-setting-labels";
 import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions-labels";
 import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell-labels";
 import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips-labels";
@@ -100,6 +101,7 @@ import { DEFAULT_IBAN_INPUT_LABELS } from "../components/iban-input-labels";
 import { DEFAULT_PHONE_INPUT_LABELS } from "../components/phone-input-labels";
 import { DEFAULT_SIGN_CHIP_LABELS } from "../components/sign-chip-labels";
 import { DEFAULT_COLUMN_MAPPER_LABELS } from "../components/column-mapper-labels";
+import { DEFAULT_NOTIFICATIONS_LABELS } from "../notifications/notifications-labels";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -231,6 +233,7 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   billing: DEFAULT_BILLING_LABELS,
   planChange: DEFAULT_PLAN_CHANGE_LABELS,
   appearance: DEFAULT_APPEARANCE_LABELS,
+  deviceReset: DEFAULT_DEVICE_RESET_LABELS,
   rowActions: DEFAULT_ROW_ACTIONS_LABELS,
   appShellMore: DEFAULT_APP_SHELL_MORE_LABELS,
   characterCount: DEFAULT_CHARACTER_COUNT_LABELS,
@@ -240,4 +243,5 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   phoneInput: DEFAULT_PHONE_INPUT_LABELS,
   signChip: DEFAULT_SIGN_CHIP_LABELS,
   columnMapper: DEFAULT_COLUMN_MAPPER_LABELS,
+  notifications: DEFAULT_NOTIFICATIONS_LABELS,
 };

package/src/i18n/german.ts

@@ -268,6 +268,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       noResults: "Keine Ergebnisse",
       fieldValue: (field, value) => `${field}: ${value}`,
       opensInNewTab: "öffnet in einem neuen Tab",
+      aboutField: (field) => `Hilfe zu „${field}“`,
+      help: "Hilfe",
     },
     dataTable: {
       columns: "Spalten",
@@ -1072,6 +1074,102 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       rateLimited,
       failed: "Das hat nicht geklappt. Bitte erneut versuchen.",
     },
+    // 0.36.0 — docs/notifications-harmonization.md §4.2: the notification cards. The push
+    // and device words follow keksdose's reviewed German, formal.
+    notifications: {
+      typesTitle: "Benachrichtigungen zu",
+      typesDescription: "Wählen Sie, worüber Sie benachrichtigt werden, und wie.",
+      byEmail: "Per E-Mail",
+      emailUnverified: "Bestätigen Sie Ihre Adresse, um diese zu erhalten.",
+      digestCadence: "Häufigkeit",
+      digestWeekly: "Wöchentlich",
+      digestMonthly: "Monatlich",
+      typesLoading: "Benachrichtigungseinstellungen werden geladen…",
+      typesEmpty: "Für dieses Konto gibt es keine Benachrichtigungen.",
+      quietTitle: "Ruhezeiten",
+      quietDescription: (inbox) =>
+        inbox
+          ? "In diesem Zeitfenster kommen keine Push-Benachrichtigungen. Im Posteingang kommen sie trotzdem an."
+          : "In diesem Zeitfenster kommen keine Push-Benachrichtigungen.",
+      quietFrom: "Von",
+      quietUntil: "Bis",
+      quietIncomplete: "Legen Sie eine Start- und eine Endzeit fest. Ruhezeiten gelten erst, wenn beide gesetzt sind.",
+      timeZone: "Zeitzone",
+      deviceZone: (zone) => `Dieses Gerät ist in der Zeitzone ${zone}.`,
+      useDeviceZone: "Übernehmen",
+      regions: {
+        Africa: "Afrika",
+        America: "Amerika",
+        Antarctica: "Antarktis",
+        Arctic: "Arktis",
+        Asia: "Asien",
+        Atlantic: "Atlantik",
+        Australia: "Australien",
+        Europe: "Europa",
+        Indian: "Indischer Ozean",
+        Pacific: "Pazifik",
+      },
+      pushTitle: "Push-Benachrichtigungen",
+      pushDescription: "Benachrichtigungen auf diesem Gerät, auch wenn die App geschlossen ist.",
+      unsupported: "Dieser Browser unterstützt keine Push-Benachrichtigungen.",
+      iosInstall: (app) =>
+        `Fügen Sie ${app} auf dem iPhone oder iPad zuerst zum Home-Bildschirm hinzu: iOS stellt Benachrichtigungen nur der installierten App zu.`,
+      notConfigured: "Push-Benachrichtigungen sind auf diesem Server nicht eingerichtet.",
+      blocked: "Benachrichtigungen sind in den Einstellungen dieses Browsers blockiert.",
+      on: "Benachrichtigungen sind für dieses Gerät eingeschaltet.",
+      off: "Benachrichtigungen sind für dieses Gerät ausgeschaltet.",
+      otherAccount:
+        "Dieser Browser erhält Benachrichtigungen für ein anderes Konto. Schalten Sie sie hier ein, um sie für das angemeldete Konto zu erhalten.",
+      enable: "Benachrichtigungen einschalten",
+      disable: "Ausschalten",
+      sendTest: "Test senden",
+      enableFailed: "Benachrichtigungen konnten nicht eingeschaltet werden.",
+      noServiceWorker:
+        "Der Service Worker der App ist nicht erreichbar. Laden Sie die Seite neu und versuchen Sie es erneut.",
+      pushTimeout:
+        "Der Push-Dienst des Browsers antwortet nicht. Prüfen Sie Ihre Verbindung und versuchen Sie es erneut.",
+      testSent: (count) =>
+        count === 1 ? `Test an ${n(count)} Gerät gesendet` : `Test an ${n(count)} Geräte gesendet`,
+      testNone:
+        "Kein Gerät hat den Test angenommen. Schalten Sie zuerst die Benachrichtigungen für dieses Gerät ein.",
+      testFailed: "Die Test-Benachrichtigung konnte nicht gesendet werden.",
+      explainerTitle: "Benachrichtigungen einschalten?",
+      explainerBody: (app) =>
+        `${app} sendet nur Benachrichtigungen zu dem, was Sie auswählen, und Sie können sie jederzeit ausschalten.`,
+      explainerHint: "Als Nächstes fragt Ihr Browser nach der Berechtigung.",
+      explainerContinue: "Weiter",
+      devicesTitle: "Benachrichtigungsgeräte",
+      devicesDescription:
+        "Alle Geräte, die Push-Benachrichtigungen für Ihr Konto erhalten. Entfernen Sie die, die Sie nicht mehr nutzen.",
+      devicesLoading: "Geräte werden geladen…",
+      devicesEmpty: "Noch kein Gerät erhält Benachrichtigungen.",
+      unknownDevice: "Unbekanntes Gerät",
+      thisDevice: "Dieses Gerät",
+      added: (date) => `Hinzugefügt am ${date}`,
+      lastDelivery: (date) => `Letzte Zustellung am ${date}`,
+      noDelivery: "Noch keine Zustellung",
+      failures: (count) =>
+        count === 1
+          ? `${n(count)} fehlgeschlagene Zustellung in Folge`
+          : `${n(count)} fehlgeschlagene Zustellungen in Folge`,
+      remove: "Entfernen",
+      // Starts with `remove`, the button's visible text, for voice control.
+      removeItem: (device) => `Entfernen: ${device}`,
+      removePrompt: "Keine Benachrichtigungen mehr an dieses Gerät senden?",
+      unsubscribeTitle: "E-Mail-Benachrichtigungen",
+      unsubscribeAbout: (type) => `Sie erhalten E-Mails zu: ${type}.`,
+      unsubscribeGeneric: "Sie erhalten Benachrichtigungs-E-Mails.",
+      stopThese: "Diese E-Mails abbestellen",
+      stopAll: (app) => `Alle Benachrichtigungs-E-Mails von ${app} abbestellen`,
+      stoppedThese: "Erledigt. Sie erhalten diese E-Mails nicht mehr.",
+      stoppedAll: (app) => `Erledigt. Sie erhalten keine Benachrichtigungs-E-Mails von ${app} mehr.`,
+      accountMail: "E-Mails zu Ihrem Konto erhalten Sie weiterhin.",
+      turnBackOn: "Sie können sie jederzeit in den Einstellungen wieder einschalten.",
+      openSettings: "Einstellungen öffnen",
+      invalidLink:
+        "Dieser Link funktioniert nicht mehr. Sie können E-Mails stattdessen in den Einstellungen abbestellen.",
+      failed: "Das hat nicht geklappt. Bitte erneut versuchen.",
+    },
     sessions: {
       title: "Sitzungen",
       description:
@@ -1634,6 +1732,21 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       contrastModes: { system: "System", standard: "Standard", more: "Mehr" },
       saveFailed: "Konnte nicht in Ihrem Konto gespeichert werden. Auf diesem Gerät gilt es trotzdem.",
     },
+    // 0.36.0 — docs/settings-harmonization.md §11.3: resetting this device's settings, the
+    // last card of "Darstellung". "Theme", as `topBar.theme`; "Bereiche" for the panels
+    // (the sidebar, folded groups).
+    deviceReset: {
+      title: "Dieses Gerät zurücksetzen",
+      description:
+        "Setzt die Darstellung auf diesem Gerät und die Ansicht seiner Tabellen und Bereiche auf die Standardwerte zurück. Ihr Konto, Ihre Daten und Ihre Anmeldung bleiben unberührt.",
+      action: "Einstellungen dieses Geräts zurücksetzen",
+      confirmTitle: "Einstellungen dieses Geräts zurücksetzen?",
+      confirmBody:
+        "Theme, Farben, Textgröße, Kontrast und Sprache kehren hier zu ihren Standardwerten zurück, und Tabellen und Bereiche öffnen sich wie beim ersten Mal. Wo Ihr Konto eine Sprache, eine Textgröße oder einen Kontrast festlegt, folgt dieses Gerät wieder dem Konto. Ihr Konto und Ihre anderen Geräte bleiben, wie sie sind.",
+      confirmAction: "Zurücksetzen",
+      done: "Die Einstellungen dieses Geräts sind auf die Standardwerte zurückgesetzt.",
+      keywords: "zurücksetzen standard standardwerte gerät wiederherstellen darstellung tabellen layout",
+    },
     rowActions: {
       actions: "Aktionen",
       actionsFor: (name) => `Aktionen für ${name}`,

package/src/i18n/kit-labels.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useEffect, useMemo } from "react";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -98,6 +98,7 @@ import type { DemoLabels } from "../demo/demo-labels";
 import type { BillingLabels } from "../billing/billing-labels";
 import type { PlanChangeLabels } from "../admin/plan-change";
 import type { AppearanceLabels } from "../components/appearance-labels";
+import type { DeviceResetLabels } from "../settings/device-reset-setting";
 import type { RowActionsLabels } from "../components/row-actions";
 import type { AppShellMoreLabels } from "../shell/app-shell";
 import type { AccountStateLabels } from "../components/account-chips";
@@ -111,6 +112,7 @@ 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";
+import type { NotificationsLabels } from "../notifications/notifications-labels";
 
 /**
  * EVERY string the kit renders, as one typed tree — and an optional provider that
@@ -168,6 +170,12 @@ export interface CommonLabels {
   /** Read after a link that opens a new tab (`<Button href external>`, TextLink):
    *  nothing else tells a screen reader the page is about to change tabs. */
   opensInNewTab: string;
+  /** The name of a field's `help` "?" and its panel (round 0.36): "About <field>", the
+   *  field's label as the argument — "About Jerk shape". A `HelpPopover` passed as
+   *  `help` keeps its own name. */
+  aboutField: (field: string) => string;
+  /** …and of a `help` "?" on a field with no label and no `aria-label` to name it by. */
+  help: string;
 }
 
 /** `DatePicker` / `DateRangePicker` chrome. The calendar inside has its own
@@ -421,6 +429,9 @@ export interface UiKitLabels {
   planChange: PlanChangeLabels;
   /** 0.32.0: the text-size and contrast settings (docs/text-size-harmonization.md §6). */
   appearance: AppearanceLabels;
+  /** 0.36.0: resetting this device's settings, the appearance group's last card
+   *  (docs/settings-harmonization.md §11.3). */
+  deviceReset: DeviceResetLabels;
   /** 0.32.0: a row's actions folded into a "⋯" menu at Large (text size §10.8). */
   rowActions: RowActionsLabels;
   /** 0.32.0: the phone bar's "More" cell and sheet (text size §10.7). */
@@ -440,6 +451,10 @@ export interface UiKitLabels {
   /** 0.23.0: `ColumnMapper` / `ColumnRoleTable` — a pasted or dropped table, a role per
    *  column. */
   columnMapper: ColumnMapperLabels;
+  /** 0.36.0: the notification cards — the types, quiet hours and the zone picker, this
+   *  device's push, the device list, and the unsubscribe page
+   *  (docs/notifications-harmonization.md §4.2). */
+  notifications: NotificationsLabels;
 }
 
 /**
@@ -660,9 +675,44 @@ export function UiKitProvider({
     }),
     [outer, labels, locale, weekStartsOn, linkComponent, chartTooltipPlacement, formatDate, tableStorageKeyPrefix],
   );
+  useTableViewsJoin(value.tableStorageKeyPrefix ?? DEFAULT_TABLE_STORAGE_KEY_PREFIX);
   return <KitI18nContext.Provider value={value}>{children}</KitI18nContext.Provider>;
 }
 
+/** The kit's own table prefix: `DEFAULT_PERSIST_PREFIX` of components/use-table-state,
+ *  restated because that module imports the router (a test pins the two equal). */
+const DEFAULT_TABLE_STORAGE_KEY_PREFIX = "hbui-table:";
+
+/**
+ * Reset this device's settings (docs/settings-harmonization.md §11.4): the tables below a
+ * provider keep their views under its prefix, so the provider joins the registry with
+ * that prefix — a view, no `reset`, since a table reads its view when it next mounts —
+ * while it is mounted. Nested providers with one prefix hold one entry.
+ *
+ * Through a literal `import()`, not a static import: every catalogue reaches this module,
+ * and a catalogue may reach nothing outside i18n/ (scripts/check-module-graph.mjs,
+ * english-catalogue-graph.test.ts). The theme stores and the shell import the registry
+ * statically, so it is loaded already and the join lands a microtask after the mount.
+ */
+function useTableViewsJoin(prefix: string): void {
+  useEffect(() => {
+    let leave: (() => void) | undefined;
+    let gone = false;
+    import("../lib/device-settings").then(
+      ({ registerDeviceSetting }) => {
+        if (!gone) leave = registerDeviceSetting({ key: prefix, prefix: true, kind: "view" });
+      },
+      // A module of the kit's own that fails to load has nothing to join; the provider
+      // and its tables work as before.
+      () => undefined,
+    );
+    return () => {
+      gone = true;
+      leave?.();
+    };
+  }, [prefix]);
+}
+
 function isRecord(v: unknown): v is Record<string, unknown> {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }

package/src/i18n/locales/en.ts

@@ -198,6 +198,12 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
           ? "1 item others can see will pass to an administrator."
           : `${n(count)} items others can see will pass to an administrator.`,
     },
+    notifications: {
+      ...d.notifications,
+      testSent: (count) => (count === 1 ? "Test sent to 1 device" : `Test sent to ${n(count)} devices`),
+      failures: (count) =>
+        count === 1 ? "1 failed delivery in a row" : `${n(count)} failed deliveries in a row`,
+    },
     settings: {
       ...d.settings,
       matchCount: (count) => (count === 1 ? "1 match" : `${n(count)} matches`),