@eifi1/ui-kit 0.36.0 → 0.37.0

package/dist/settings/device-reset-setting.d.ts

@@ -50,9 +50,9 @@ export interface DeviceResetSettingProps extends Omit<SettingsSectionProps, "anc
  * - **Live, no reload** (decision 10): each registered store resets through its own
  *   setter; the card stays where it is.
  *
- * The app adds the catalogue entry, `{ id: "device_reset", group: "appearance", anchor:
- * DEVICE_RESET_ANCHOR, title, keywords }` (`title` and `keywords` from these labels), last
- * in its appearance group: inside a `SettingsLayout`, `SettingsSection` throws in
- * development without it.
+ * The app adds the catalogue entry, `{ id, group: "appearance", anchor: DEVICE_RESET_ANCHOR,
+ * title, keywords }` (the id in its catalogue's own style, e.g. `device_reset` or
+ * `deviceReset`; `title` and `keywords` from these labels), last in its appearance group:
+ * inside a `SettingsLayout`, `SettingsSection` throws in development without it.
  */
 export declare function DeviceResetSetting({ description, labels: labelsProp, onReset, ...rest }: DeviceResetSettingProps): import("react").JSX.Element;

package/dist/settings/device-reset-setting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/device-reset-setting.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { resetDeviceSettings } from \"../lib/device-settings\";\nimport { Button } from \"../components/button\";\nimport { useConfirm } from \"../components/confirm-dialog\";\nimport { toast } from \"../components/toast\";\nimport { SettingsSection, type SettingsSectionProps } from \"./settings-section\";\nimport { DEFAULT_DEVICE_RESET_LABELS } from \"./device-reset-setting-labels\";\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string {@link DeviceResetSetting} renders — the `deviceReset` namespace of\n *  `<UiKitProvider labels>`, overridable per instance through `labels`\n *  (docs/settings-harmonization.md §11.3). The confirm's Cancel is `confirmDialog.cancel`. */\nexport interface DeviceResetLabels {\n  /** The card's title, and the app's catalogue entry's. */\n  title: string;\n  /** The line under it: what goes back, and that the account is not touched. */\n  description: string;\n  /** The button that asks first. */\n  action: string;\n  /** The question it asks. */\n  confirmTitle: string;\n  /** What goes, what follows the account again, and what stays. */\n  confirmBody: string;\n  /** The button that answers it. */\n  confirmAction: string;\n  /** The toast once it is done. */\n  done: string;\n  /** For the app's catalogue entry (`keywords`); the card never reads it. */\n  keywords: string;\n}\n\n// Defined in ./device-reset-setting-labels, which holds no component code.\nexport { DEFAULT_DEVICE_RESET_LABELS };\n\n/* ── The card ────────────────────────────────────────────────────────────── */\n\n/** The card's DOM id: its catalogue entry's `anchor`, the `?focus=` target. */\nexport const DEVICE_RESET_ANCHOR = \"settings-device-reset\";\n\n// `onReset` is the card's own: the DOM's form-reset handler never fires on a div.\nexport interface DeviceResetSettingProps\n  extends Omit<SettingsSectionProps, \"anchor\" | \"title\" | \"description\" | \"children\" | \"onReset\"> {\n  /** The app's sentence after the kit's description: what of its own goes back, and what\n   *  stays (keksdose: the date format, the feature set and the gestures go; presentation\n   *  mode and the home position stay). */\n  description?: ReactNode;\n  labels?: LabelOverride<DeviceResetLabels>;\n  /** Runs after the reset and before the toast, with the keys reset or removed. */\n  onReset?: (keys: string[]) => void;\n}\n\n/**\n * \"Reset this device's settings\" (docs/settings-harmonization.md §11): the LAST card of\n * the appearance group. It puts this device's appearance — theme, palette, language, text\n * size, contrast and the app's own appearance choices — and its views — table views, the\n * sidebar, folded groups, saved filters — back to what a new device gets, through\n * {@link resetDeviceSettings}. The account, the sign-in, the session and anything waiting\n * to be sent are never touched: they never join the registry.\n *\n * - **A confirm, not an undo** (§11.2 decision 9): `useConfirm` in the neutral tone,\n *   then a toast. An app mounts a `ConfirmProvider` and a `Toaster` already.\n * - **Not a commit**: nothing is written to the account, so a demo or a lapsed plan's\n *   write lock does not disable it (decision 3).\n * - **Live, no reload** (decision 10): each registered store resets through its own\n *   setter; the card stays where it is.\n *\n * The app adds the catalogue entry, `{ id: \"device_reset\", group: \"appearance\", anchor:\n * DEVICE_RESET_ANCHOR, title, keywords }` (`title` and `keywords` from these labels), last\n * in its appearance group: inside a `SettingsLayout`, `SettingsSection` throws in\n * development without it.\n */\nexport function DeviceResetSetting({\n  description,\n  labels: labelsProp,\n  onReset,\n  ...rest\n}: DeviceResetSettingProps) {\n  const labels = useKitLabels(\"deviceReset\", DEFAULT_DEVICE_RESET_LABELS, labelsProp);\n  const confirm = useConfirm();\n\n  const reset = async () => {\n    const ok = await confirm({\n      title: labels.confirmTitle,\n      body: labels.confirmBody,\n      confirmLabel: labels.confirmAction,\n      tone: \"neutral\",\n    });\n    if (!ok) return;\n    const keys = resetDeviceSettings();\n    onReset?.(keys);\n    toast.success(labels.done);\n  };\n\n  return (\n    <SettingsSection\n      {...rest}\n      anchor={DEVICE_RESET_ANCHOR}\n      title={labels.title}\n      description={\n        description != null ? (\n          <>\n            {labels.description} {description}\n          </>\n        ) : (\n          labels.description\n        )\n      }\n    >\n      <div>\n        <Button variant=\"secondary\" onClick={() => void reset()}>\n          {labels.action}\n        </Button>\n      </div>\n    </SettingsSection>\n  );\n}\n"],"mappings":";AAuGU,mBASF,KATE;AArGV,SAAS,oBAAwC;AACjD,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,uBAAkD;AAC3D,SAAS,mCAAmC;AAgCrC,MAAM,sBAAsB;AAkC5B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,SAAS,aAAa,eAAe,6BAA6B,UAAU;AAClF,QAAM,UAAU,WAAW;AAE3B,QAAM,QAAQ,YAAY;AACxB,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO,OAAO;AAAA,MACd,MAAM,OAAO;AAAA,MACb,cAAc,OAAO;AAAA,MACrB,MAAM;AAAA,IACR,CAAC;AACD,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,oBAAoB;AACjC,cAAU,IAAI;AACd,UAAM,QAAQ,OAAO,IAAI;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR,OAAO,OAAO;AAAA,MACd,aACE,eAAe,OACb,iCACG;AAAA,eAAO;AAAA,QAAY;AAAA,QAAE;AAAA,SACxB,IAEA,OAAO;AAAA,MAIX,8BAAC,SACC,8BAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,KAAK,MAAM,GACnD,iBAAO,QACV,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/settings/device-reset-setting.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { resetDeviceSettings } from \"../lib/device-settings\";\nimport { Button } from \"../components/button\";\nimport { useConfirm } from \"../components/confirm-dialog\";\nimport { toast } from \"../components/toast\";\nimport { SettingsSection, type SettingsSectionProps } from \"./settings-section\";\nimport { DEFAULT_DEVICE_RESET_LABELS } from \"./device-reset-setting-labels\";\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string {@link DeviceResetSetting} renders — the `deviceReset` namespace of\n *  `<UiKitProvider labels>`, overridable per instance through `labels`\n *  (docs/settings-harmonization.md §11.3). The confirm's Cancel is `confirmDialog.cancel`. */\nexport interface DeviceResetLabels {\n  /** The card's title, and the app's catalogue entry's. */\n  title: string;\n  /** The line under it: what goes back, and that the account is not touched. */\n  description: string;\n  /** The button that asks first. */\n  action: string;\n  /** The question it asks. */\n  confirmTitle: string;\n  /** What goes, what follows the account again, and what stays. */\n  confirmBody: string;\n  /** The button that answers it. */\n  confirmAction: string;\n  /** The toast once it is done. */\n  done: string;\n  /** For the app's catalogue entry (`keywords`); the card never reads it. */\n  keywords: string;\n}\n\n// Defined in ./device-reset-setting-labels, which holds no component code.\nexport { DEFAULT_DEVICE_RESET_LABELS };\n\n/* ── The card ────────────────────────────────────────────────────────────── */\n\n/** The card's DOM id: its catalogue entry's `anchor`, the `?focus=` target. */\nexport const DEVICE_RESET_ANCHOR = \"settings-device-reset\";\n\n// `onReset` is the card's own: the DOM's form-reset handler never fires on a div.\nexport interface DeviceResetSettingProps\n  extends Omit<SettingsSectionProps, \"anchor\" | \"title\" | \"description\" | \"children\" | \"onReset\"> {\n  /** The app's sentence after the kit's description: what of its own goes back, and what\n   *  stays (keksdose: the date format, the feature set and the gestures go; presentation\n   *  mode and the home position stay). */\n  description?: ReactNode;\n  labels?: LabelOverride<DeviceResetLabels>;\n  /** Runs after the reset and before the toast, with the keys reset or removed. */\n  onReset?: (keys: string[]) => void;\n}\n\n/**\n * \"Reset this device's settings\" (docs/settings-harmonization.md §11): the LAST card of\n * the appearance group. It puts this device's appearance — theme, palette, language, text\n * size, contrast and the app's own appearance choices — and its views — table views, the\n * sidebar, folded groups, saved filters — back to what a new device gets, through\n * {@link resetDeviceSettings}. The account, the sign-in, the session and anything waiting\n * to be sent are never touched: they never join the registry.\n *\n * - **A confirm, not an undo** (§11.2 decision 9): `useConfirm` in the neutral tone,\n *   then a toast. An app mounts a `ConfirmProvider` and a `Toaster` already.\n * - **Not a commit**: nothing is written to the account, so a demo or a lapsed plan's\n *   write lock does not disable it (decision 3).\n * - **Live, no reload** (decision 10): each registered store resets through its own\n *   setter; the card stays where it is.\n *\n * The app adds the catalogue entry, `{ id, group: \"appearance\", anchor: DEVICE_RESET_ANCHOR,\n * title, keywords }` (the id in its catalogue's own style, e.g. `device_reset` or\n * `deviceReset`; `title` and `keywords` from these labels), last in its appearance group:\n * inside a `SettingsLayout`, `SettingsSection` throws in development without it.\n */\nexport function DeviceResetSetting({\n  description,\n  labels: labelsProp,\n  onReset,\n  ...rest\n}: DeviceResetSettingProps) {\n  const labels = useKitLabels(\"deviceReset\", DEFAULT_DEVICE_RESET_LABELS, labelsProp);\n  const confirm = useConfirm();\n\n  const reset = async () => {\n    const ok = await confirm({\n      title: labels.confirmTitle,\n      body: labels.confirmBody,\n      confirmLabel: labels.confirmAction,\n      tone: \"neutral\",\n    });\n    if (!ok) return;\n    const keys = resetDeviceSettings();\n    onReset?.(keys);\n    toast.success(labels.done);\n  };\n\n  return (\n    <SettingsSection\n      {...rest}\n      anchor={DEVICE_RESET_ANCHOR}\n      title={labels.title}\n      description={\n        description != null ? (\n          <>\n            {labels.description} {description}\n          </>\n        ) : (\n          labels.description\n        )\n      }\n    >\n      <div>\n        <Button variant=\"secondary\" onClick={() => void reset()}>\n          {labels.action}\n        </Button>\n      </div>\n    </SettingsSection>\n  );\n}\n"],"mappings":";AAuGU,mBASF,KATE;AArGV,SAAS,oBAAwC;AACjD,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,uBAAkD;AAC3D,SAAS,mCAAmC;AAgCrC,MAAM,sBAAsB;AAkC5B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,SAAS,aAAa,eAAe,6BAA6B,UAAU;AAClF,QAAM,UAAU,WAAW;AAE3B,QAAM,QAAQ,YAAY;AACxB,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO,OAAO;AAAA,MACd,MAAM,OAAO;AAAA,MACb,cAAc,OAAO;AAAA,MACrB,MAAM;AAAA,IACR,CAAC;AACD,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,oBAAoB;AACjC,cAAU,IAAI;AACd,UAAM,QAAQ,OAAO,IAAI;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR,OAAO,OAAO;AAAA,MACd,aACE,eAAe,OACb,iCACG;AAAA,eAAO;AAAA,QAAY;AAAA,QAAE;AAAA,SACxB,IAEA,OAAO;AAAA,MAIX,8BAAC,SACC,8BAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,KAAK,MAAM,GACnD,iBAAO,QACV,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/components/field-parts.tsx

@@ -232,7 +232,7 @@ export function useInlineHint(hint: ReactNode, withHelp = false): ReactNode {
  *
  * - `hint` is the fact, the caption under the field, on its `aria-describedby`;
  * - `help` is the help, a {@link HelpPopover} "?" on the label line (an unlabelled
- *   field's at its end edge, as a hint's), named "About <label>" (`common.aboutField`,
+ *   field's at its end edge, as a hint's), named "About “<label>”" (`common.aboutField`,
  *   from the label's text, else the `aria-label`, else `common.help`). Pass a
  *   `HelpPopover` as `help` to name it yourself ("What do the statuses mean?").
  *
@@ -245,7 +245,7 @@ export interface FieldHelpProps {
   /**
    * Help the field is usable without — why it exists, how to choose, what the options
    * mean — behind the field's one "?" on its label line: a {@link HelpPopover} named
-   * "About <label>" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).
+   * "About “<label>”" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).
    * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`
    * set it is the caption under the field at every size, a `FieldHint` included.
    */
@@ -253,7 +253,7 @@ export interface FieldHelpProps {
 }
 
 /**
- * The "?" for a field's `help` — the field's own name, "About <label>", in the reader's
+ * The "?" for a field's `help` — the field's own name, "About “<label>”", in the reader's
  * language. A component so that a field without `help` asks the labels nothing.
  */
 function FieldHelp({ name, children }: { name: ReactNode; children: ReactNode }) {
@@ -265,7 +265,7 @@ function FieldHelp({ name, children }: { name: ReactNode; children: ReactNode })
 /**
  * A field's `help` as the "?" for its label line, or `undefined` when there is none. A
  * {@link HelpPopover} is used as it is (it carries its own name); anything else is put
- * in one named "About <name>" — `name` is the field's label, else its `aria-label`.
+ * in one named "About “<name>”" — `name` is the field's label, else its `aria-label`.
  */
 export function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined {
   if (!hasContent(help)) return undefined;

package/src/components/help-popover.tsx

@@ -45,7 +45,7 @@ const HELP_WIDTH: RemLength = "20rem";
  * **On a field: its `help`** (0.36, round 0.36 decision 1). Every kit field that takes a
  * `hint` takes a `help` beside it, and the `@eifi1/ui-kit/rhf` bindings too: pass the
  * help's words and the field draws this "?" on its label line (an unlabelled one at its
- * end edge, outside the box), named "About <label>" — or pass a HelpPopover to name it
+ * end edge, outside the box), named "About “<label>”" — or pass a HelpPopover to name it
  * yourself. `hint` stays the FACT, printed under the field; while `help` is set a
  * FieldHint there draws no "?" of its own, so the field has one. Passed as `hint`, as in
  * 0.34, it still rides the label line. It also stands on its own, beside a heading or a

package/src/components/numeric-field.ts

@@ -30,7 +30,7 @@ import type { CommitScope } from "./write-lock";
 
 /** The props both fields take and this engine reads. */
 export interface NumericFieldProps extends FieldHelpProps {
-  /** What names the `help` "?" — "About <label>" — with the `aria-label`. */
+  /** What names the `help` "?" — "About “<label>”" — with the `aria-label`. */
   label?: ReactNode;
   hint?: ReactNode;
   error?: ReactNode;

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/kit-labels.tsx

@@ -170,9 +170,10 @@ 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. */
+  /** The name of a field's `help` "?" and its panel (round 0.36): "About “<field>”", the
+   *  field's label as the argument, quoted so a capitalised label reads as a name — "About
+   *  “Jerk shape”" (round 0.37; the other locales quoted it already). 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;

package/src/i18n/shared-labels.ts

@@ -37,7 +37,7 @@ export const DEFAULT_COMMON_LABELS: CommonLabels = {
   fieldValue: (field, value) => `${field}: ${value}`,
   dismiss: "Dismiss",
   opensInNewTab: "opens in a new tab",
-  aboutField: (field) => `About ${field}`,
+  aboutField: (field) => `About “${field}”`,
   help: "Help",
 };
 

package/src/lib/plain-text.ts

@@ -8,7 +8,7 @@ import type { ReactNode } from "react";
  * to find (an icon), so the caller falls back to a name of its own.
  *
  * Package-private — not re-exported from the barrel. StatTile names its sparkline by it;
- * a field names its `help` "?" by it ("About <label>", round 0.36).
+ * a field names its `help` "?" by it ("About “<label>”", round 0.36).
  */
 export function plainText(node: ReactNode): string | undefined {
   const walk = (n: ReactNode): string => {

package/src/rhf/fields.tsx

@@ -119,7 +119,7 @@ export interface RhfFieldBaseProps<
    *  `help` it is that caption at every size. */
   hint?: ReactNode;
   /** Help the field is usable without — why, how to choose — behind the field's one
-   *  "?" after the label: a `HelpPopover` named "About <label>" (round 0.36,
+   *  "?" after the label: a `HelpPopover` named "About “<label>”" (round 0.36,
    *  docs/text-size-harmonization.md §4); pass a `HelpPopover` to name it yourself.
    *  `hint` stays the visible fact under the field. */
   help?: ReactNode;

package/src/settings/device-reset-setting.tsx

@@ -67,10 +67,10 @@ export interface DeviceResetSettingProps
  * - **Live, no reload** (decision 10): each registered store resets through its own
  *   setter; the card stays where it is.
  *
- * The app adds the catalogue entry, `{ id: "device_reset", group: "appearance", anchor:
- * DEVICE_RESET_ANCHOR, title, keywords }` (`title` and `keywords` from these labels), last
- * in its appearance group: inside a `SettingsLayout`, `SettingsSection` throws in
- * development without it.
+ * The app adds the catalogue entry, `{ id, group: "appearance", anchor: DEVICE_RESET_ANCHOR,
+ * title, keywords }` (the id in its catalogue's own style, e.g. `device_reset` or
+ * `deviceReset`; `title` and `keywords` from these labels), last in its appearance group:
+ * inside a `SettingsLayout`, `SettingsSection` throws in development without it.
  */
 export function DeviceResetSetting({
   description,