@eifi1/ui-kit 0.35.0 → 0.37.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/eslint/role-utilities.ts

@@ -5,7 +5,9 @@
 // The table itself is role-utilities.generated.ts, re-rendered from tokens.css's
 // `@theme inline` block by scripts/gen-role-utilities.mjs with the parser below; the
 // check fails while it is stale. So tokens.css stays the source: a role that gains a
-// utility there is flagged in the kit and in the apps from the next release on.
+// utility there is flagged in the kit and in the apps from the next release on. The
+// README's role-utility table (scripts/gen-styling-inventory.mjs) reads the block with
+// the same parser since 0.37, so the README, the check and the plugin cannot disagree.
 //
 // This module imports NOTHING, and its TypeScript is erasable only (no enum, no
 // namespace, no parameter property): the check imports it from source under Node's type
@@ -43,20 +45,74 @@ export type RoleUtilityTable = {
   readonly [P in RoleProperty]: Readonly<Record<string, readonly string[]>>;
 };
 
+/** One `--<namespace>-<name>: <value>;` of the `@theme inline` block. */
+export interface ThemeInlineDeclaration {
+  /** The theme variable without its dashes: `text-color-muted`, `ring-width-focus`. */
+  variable: string;
+  /** The property whose namespace it is in; `null` for a namespace ROLE_NAMESPACES lacks. */
+  property: RoleProperty | null;
+  /** The name after the namespace, `muted`; `null` with `property`. */
+  name: string | null;
+  /** The utility it makes: `text-muted`, `ring-focus` (a width is `ring-*` like a colour). */
+  utility: string | null;
+  /** The token the value reads, `--text-muted`; `null` unless the value is a bare `var()`. */
+  token: string | null;
+  /** The value as written, trimmed. */
+  value: string;
+}
+
+/** The `@theme inline` block: where it stands, and every declaration in it in block order. */
+export interface ThemeInlineBlock {
+  /** Its first and one-past-last offset in `stripCssComments(css)`, not in `css`. */
+  start: number;
+  end: number;
+  declarations: ThemeInlineDeclaration[];
+}
+
+/** `css` without its comments: a declaration commented out is not one. */
+export function stripCssComments(css: string): string {
+  return css.replace(/\/\*[\s\S]*?\*\//g, "");
+}
+
+const PROPERTIES = Object.keys(ROLE_NAMESPACES) as RoleProperty[];
+
+/**
+ * tokens.css's `@theme inline` block, read once for every reader: the table below, and
+ * the README's (scripts/gen-styling-inventory.mjs), which fails on a `property: null`
+ * where the table leaves it out. `null` when there is no such block — the role utilities
+ * are gone, or this parser is. Theme blocks hold only declarations, so the first `}`
+ * closes it; no namespace is another's prefix, so the first that fits is the one.
+ */
+export function parseThemeInline(css: string): ThemeInlineBlock | null {
+  const block = /@theme\s+inline\s*\{([^}]*)\}/.exec(stripCssComments(css));
+  if (!block) return null;
+  const declarations = [...block[1].matchAll(/--([a-z0-9-]+)\s*:\s*([^;]+);/g)].map(([, variable, raw]) => {
+    const value = raw.trim();
+    const property = PROPERTIES.find((p) => variable.startsWith(`${ROLE_NAMESPACES[p]}-`)) ?? null;
+    const name = property && variable.slice(ROLE_NAMESPACES[property].length + 1);
+    return {
+      variable,
+      property,
+      name,
+      utility: property && `${property.replace(/-width$/, "")}-${name}`,
+      token: /^var\((--[a-z0-9-]+)\)$/.exec(value)?.[1] ?? null,
+      value,
+    };
+  });
+  return { start: block.index, end: block.index + block[0].length, declarations };
+}
+
 /**
  * The table `tokens.css` declares: every `--<namespace>-<name>: var(--<token>)` in its
- * `@theme inline` block, in block order. `null` when there is no such block — the role
- * utilities are gone, or this parser is.
+ * `@theme inline` block, in block order, each property present (in ROLE_NAMESPACES' order)
+ * even when it has none. `null` when there is no such block.
  */
 export function roleUtilitiesFromCss(css: string): RoleUtilityTable | null {
-  const theme = /@theme inline\s*\{([^}]*)\}/.exec(css.replace(/\/\*[\s\S]*?\*\//g, ""))?.[1];
-  if (theme === undefined) return null;
-  const table = {} as Record<RoleProperty, Record<string, string[]>>;
-  for (const prop of Object.keys(ROLE_NAMESPACES) as RoleProperty[]) {
-    const names: Record<string, string[]> = {};
-    const declared = new RegExp(`--${ROLE_NAMESPACES[prop]}-([a-z0-9-]+)\\s*:\\s*var\\((--[a-z0-9-]+)\\)`, "g");
-    for (const [, name, token] of theme.matchAll(declared)) (names[token] ??= []).push(name);
-    table[prop] = names;
+  const block = parseThemeInline(css);
+  if (!block) return null;
+  const table = Object.fromEntries(PROPERTIES.map((p) => [p, {}])) as Record<RoleProperty, Record<string, string[]>>;
+  for (const { property, name, token } of block.declarations) {
+    if (property && name && token) (table[property][token] ??= []).push(name);
   }
   return table;
 }

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}`,