react-cheminfo 0.25.0 → 0.26.0

package/src/capsule/ui/CapsuleFilter.tsx

@@ -1,9 +1,11 @@
 import type { Intent } from '@blueprintjs/core';
-import { Tag } from '@blueprintjs/core';
-import type { CSSProperties, ReactElement } from 'react';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
-import { formatInteger } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+
+import { capsuleFilterCapsules } from './capsuleFilterCapsules.tsx';
 
 /** One capsule of a {@link CapsuleFilter} row. */
 export interface CapsuleOption<TValue extends string = string> {
@@ -43,6 +45,13 @@ export interface CapsuleAllOption {
    * @default undefined
    */
   title?: string;
+  /**
+   * Whether the capsule is filled, for a row that reads its selection back
+   * from a richer state: a pick no capsule can spell leaves `values` empty
+   * without meaning every row is kept.
+   * @default undefined — filled while no capsule is selected
+   */
+  selected?: boolean;
 }
 
 /** What every row of filter capsules needs, whatever it selects. */
@@ -51,7 +60,7 @@ export interface CapsuleFilterBaseProps<TValue extends string = string> {
   options: ReadonlyArray<CapsuleOption<TValue>>;
   /**
    * What the group is called, for a screen reader reaching the row.
-   * @default 'Filter'
+   * @default the chrome's own word for it, in the language of the page
    */
   label?: string;
   /**
@@ -64,6 +73,14 @@ export interface CapsuleFilterBaseProps<TValue extends string = string> {
    * @default undefined
    */
   className?: string;
+  /**
+   * What the row reads back, drawn muted after the last capsule: the selection
+   * the capsules cannot spell on their own, or how else it is made. It wraps
+   * with them rather than sitting on a line of its own, so the one place a
+   * selection is made is the one place it is read.
+   * @default undefined — the row is capsules alone
+   */
+  note?: ReactNode;
 }
 
 /** A row where exactly one capsule is selected. */
@@ -109,136 +126,43 @@ export type CapsuleFilterProps<TValue extends string = string> =
  * Every capsule keeps its semantic colour whether or not it is selected, so
  * what a status means stays learnable — the filled shape is what encodes the
  * selection. Each is a real interactive tag, so the row is reachable by tab and
- * a capsule answers to Enter and Space.
+ * a capsule answers to Enter and Space. A `note` rides at the end of the row,
+ * which is where a selection finer than the capsules can spell is read back.
  * @param props - See {@link CapsuleFilterProps}.
  * @returns The capsule row.
  */
 export function CapsuleFilter<TValue extends string = string>(
   props: CapsuleFilterProps<TValue>,
 ): ReactElement {
-  const capsules =
-    props.multiple === true ? multipleCapsules(props) : singleCapsules(props);
-  const { label = 'Filter', className } = props;
+  const { label, className, note } = props;
+  const t = useChromeT();
 
   return (
     <div
       role="group"
-      aria-label={label}
+      aria-label={label ?? t('capsule.filter')}
       className={joinClassNames('capsule-filter', className)}
       style={ROW_STYLE}
     >
-      {capsules}
+      {capsuleFilterCapsules(props)}
+      {note === undefined ? null : (
+        <span className="capsule-filter__note" style={NOTE_STYLE}>
+          {note}
+        </span>
+      )}
     </div>
   );
 }
 
-function singleCapsules<TValue extends string>(
-  props: SingleCapsuleFilterProps<TValue>,
-): ReactElement[] {
-  const { options, value, onChange, formatCount = formatInteger } = props;
-  const capsules: ReactElement[] = [];
-  for (const option of options) {
-    capsules.push(
-      <Capsule
-        key={`option:${option.value}`}
-        text={capsuleText(option, formatCount)}
-        selected={option.value === value}
-        intent={option.intent}
-        title={option.title}
-        onClick={() => onChange(option.value)}
-      />,
-    );
-  }
-  return capsules;
-}
-
-function multipleCapsules<TValue extends string>(
-  props: MultipleCapsuleFilterProps<TValue>,
-): ReactElement[] {
-  const {
-    options,
-    values,
-    onChange,
-    allOption,
-    formatCount = formatInteger,
-  } = props;
-  const capsules: ReactElement[] = [];
-  if (allOption !== undefined) {
-    capsules.push(
-      <Capsule
-        key="all"
-        text={capsuleText(allOption, formatCount)}
-        selected={values.length === 0}
-        title={allOption.title}
-        onClick={() => onChange([])}
-      />,
-    );
-  }
-  for (const option of options) {
-    capsules.push(
-      <Capsule
-        key={`option:${option.value}`}
-        text={capsuleText(option, formatCount)}
-        selected={values.includes(option.value)}
-        intent={option.intent}
-        title={option.title}
-        onClick={() => onChange(toggled(options, values, option.value))}
-      />,
-    );
-  }
-  return capsules;
-}
-
-interface CapsuleProps {
-  text: string;
-  selected: boolean;
-  intent?: Intent;
-  title: string | undefined;
-  onClick: () => void;
-}
-
-function Capsule(props: CapsuleProps): ReactElement {
-  const { text, selected, intent, title, onClick } = props;
-  return (
-    <Tag
-      interactive
-      round
-      minimal={!selected}
-      intent={intent}
-      aria-pressed={selected}
-      htmlTitle={title}
-      onClick={onClick}
-    >
-      {text}
-    </Tag>
-  );
-}
-
-function capsuleText(
-  capsule: { label: string; count?: number },
-  formatCount: (count: number) => string,
-): string {
-  return capsule.count === undefined
-    ? capsule.label
-    : `${capsule.label} (${formatCount(capsule.count)})`;
-}
-
-function toggled<TValue extends string>(
-  options: ReadonlyArray<CapsuleOption<TValue>>,
-  values: readonly TValue[],
-  flipped: TValue,
-): TValue[] {
-  const next: TValue[] = [];
-  for (const option of options) {
-    const kept = values.includes(option.value);
-    if (option.value === flipped ? !kept : kept) next.push(option.value);
-  }
-  return next;
-}
-
 const ROW_STYLE = {
   display: 'flex',
   flexWrap: 'wrap',
   alignItems: 'center',
   gap: 6,
 } as const satisfies CSSProperties;
+
+const NOTE_STYLE = {
+  marginLeft: 2,
+  color: TOKEN.textMuted,
+  fontSize: '0.75rem',
+} as const satisfies CSSProperties;

package/src/capsule/ui/capsuleFilterCapsules.tsx

@@ -0,0 +1,110 @@
+/**
+ * The capsules of a filter row, and nothing around them.
+ *
+ * They are a plain function of the row's props; the row itself reads the
+ * language of the page, which only a render can do, so the two are separate.
+ */
+
+import type { ReactElement } from 'react';
+
+import { formatInteger } from '../../format/core/numbers.ts';
+
+import { Capsule } from './Capsule.tsx';
+import type {
+  CapsuleFilterProps,
+  CapsuleOption,
+  MultipleCapsuleFilterProps,
+  SingleCapsuleFilterProps,
+} from './CapsuleFilter.tsx';
+
+/**
+ * The capsules a row draws, in order.
+ * @param props - See `CapsuleFilterProps`.
+ * @returns The capsules.
+ */
+export function capsuleFilterCapsules<TValue extends string = string>(
+  props: CapsuleFilterProps<TValue>,
+): ReactElement[] {
+  return props.multiple === true
+    ? multipleCapsules(props)
+    : singleCapsules(props);
+}
+
+function singleCapsules<TValue extends string>(
+  props: SingleCapsuleFilterProps<TValue>,
+): ReactElement[] {
+  const { options, value, onChange, formatCount = formatInteger } = props;
+  const capsules: ReactElement[] = [];
+  for (const option of options) {
+    capsules.push(
+      <Capsule
+        key={`option:${option.value}`}
+        text={capsuleText(option, formatCount)}
+        selected={option.value === value}
+        intent={option.intent}
+        title={option.title}
+        onClick={() => onChange(option.value)}
+      />,
+    );
+  }
+  return capsules;
+}
+
+function multipleCapsules<TValue extends string>(
+  props: MultipleCapsuleFilterProps<TValue>,
+): ReactElement[] {
+  const {
+    options,
+    values,
+    onChange,
+    allOption,
+    formatCount = formatInteger,
+  } = props;
+  const capsules: ReactElement[] = [];
+  if (allOption !== undefined) {
+    capsules.push(
+      <Capsule
+        key="all"
+        text={capsuleText(allOption, formatCount)}
+        selected={allOption.selected ?? values.length === 0}
+        title={allOption.title}
+        onClick={() => onChange([])}
+      />,
+    );
+  }
+  for (const option of options) {
+    capsules.push(
+      <Capsule
+        key={`option:${option.value}`}
+        text={capsuleText(option, formatCount)}
+        selected={values.includes(option.value)}
+        intent={option.intent}
+        title={option.title}
+        onClick={() => onChange(toggled(options, values, option.value))}
+      />,
+    );
+  }
+  return capsules;
+}
+
+function capsuleText(
+  capsule: { label: string; count?: number },
+  formatCount: (count: number) => string,
+): string {
+  return capsule.count === undefined
+    ? capsule.label
+    : `${capsule.label} (${formatCount(capsule.count)})`;
+}
+
+function toggled<TValue extends string>(
+  options: ReadonlyArray<CapsuleOption<TValue>>,
+  values: readonly TValue[],
+  flipped: TValue,
+): TValue[] {
+  const next: TValue[] = [];
+  for (const option of options) {
+    const kept = values.includes(option.value);
+    if (option.value === flipped ? !kept : kept) next.push(option.value);
+  }
+  return next;
+}

package/src/chart/ui/ChartTrackingLayer.tsx

@@ -8,6 +8,7 @@
 import type { CSSProperties, MouseEvent, ReactElement } from 'react';
 import { useRef } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { ChartAxisScale } from '../core/chartAxisScale.ts';
 import type { ChartBand } from '../core/chartBand.ts';
 import { chartBandCenter, chartBandIndexAt } from '../core/chartBand.ts';
@@ -64,6 +65,7 @@ export function ChartTrackingLayer(
 ): ReactElement {
   const { plot, band, y, categories, series, index, onTrack, onSelect } = props;
   const { slotAxis, title } = props;
+  const t = useChromeT();
   const entered = useRef<number | null>(null);
   const slot = index ?? -1;
   const tracked = slot >= 0 && slot < band.count;
@@ -137,8 +139,8 @@ export function ChartTrackingLayer(
         role="button"
         aria-label={
           tracked
-            ? `Measurement ${categories[slot]}`
-            : (title ?? 'Measurements')
+            ? t('chart.measurement', { name: categories[slot] ?? '' })
+            : (title ?? t('chart.measurements'))
         }
         onPointerDown={move}
         onPointerMove={move}

package/src/chrome/ui/SiteHeader.tsx

@@ -5,6 +5,7 @@ import { siteById } from '../../ecosystem/core/lookup.ts';
 import type { SiteId, SiteRecord } from '../../ecosystem/core/sites.ts';
 import { Wordmark } from '../../ecosystem/ui/Wordmark.tsx';
 import { SiteMark } from '../../ecosystem/ui/marks.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 
 import { NavLink } from './NavLink.tsx';
 import { NavMenuButton } from './NavMenuButton.tsx';
@@ -86,7 +87,7 @@ export interface SiteHeaderProps {
   /**
    * What the menu the pages fold into on a phone is called, for the pointer
    * and a screen reader.
-   * @default 'Pages'
+   * @default the chrome's own word for it, in the language of the page
    */
   pagesLabel?: string;
 }
@@ -118,8 +119,9 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
     onHome,
     markSize = 28,
     width = 'page',
-    pagesLabel = 'Pages',
+    pagesLabel,
   } = props;
+  const t = useChromeT();
 
   if (embedded) return null;
 
@@ -158,7 +160,7 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
         {nav.length > 1 ? (
           <div className="app-header-nav-menu">
             <NavMenuButton
-              label={pagesLabel}
+              label={pagesLabel ?? t('chrome.pages')}
               icon="menu"
               compact
               items={nav}

package/src/citation/ui/CitationMenu.tsx

@@ -2,6 +2,7 @@ import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 import { SvgLogoDoi } from 'cheminfo-font';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { CITATION_DOWNLOADS } from '../core/formats.ts';
 import type { Reference } from '../core/reference.ts';
 import { doiUrl } from '../core/reference.ts';
@@ -31,7 +32,7 @@ export interface CitedWorksProps {
   /**
    * The line heading the menu, saying which of the works a reader is expected
    * to cite.
-   * @default 'Please cite both works', or 'Please cite every work' past two
+   * @default the chrome's own line, in the language of the page
    */
   guidance?: string;
 }
@@ -69,6 +70,7 @@ export function CitationMenu(props: CitationMenuProps): ReactElement {
  */
 function OneWorkMenu(props: CitedReferenceProps): ReactElement {
   const { reference } = props;
+  const t = useChromeT();
   const feedback = useCopyFeedback();
   const references = [reference];
 
@@ -82,7 +84,7 @@ function OneWorkMenu(props: CitedReferenceProps): ReactElement {
         target="_blank"
         rel="noreferrer"
       />
-      <MenuDivider title="Copy the reference as" />
+      <MenuDivider title={t('cite.copyReferenceAs')} />
       <CopyFormatEntries references={references} feedback={feedback} />
       <ImportSection references={references} />
     </Menu>
@@ -97,6 +99,7 @@ function OneWorkMenu(props: CitedReferenceProps): ReactElement {
  */
 function WorkSetMenu(props: CitedWorksProps): ReactElement {
   const { works, guidance } = props;
+  const t = useChromeT();
   const feedback = useCopyFeedback();
   const references = citedReferences(works);
   const both = works.length === 2;
@@ -106,14 +109,14 @@ function WorkSetMenu(props: CitedWorksProps): ReactElement {
       <MenuDivider
         title={
           guidance ??
-          (both ? 'Please cite both works' : 'Please cite every work')
+          (both ? t('cite.pleaseCiteBoth') : t('cite.pleaseCiteEvery'))
         }
       />
       {works.map((work) => (
         <WorkEntry key={work.reference.doi} work={work} feedback={feedback} />
       ))}
       <MenuDivider
-        title={both ? 'Copy both references as' : 'Copy every reference as'}
+        title={both ? t('cite.copyBothAs') : t('cite.copyEveryAs')}
       />
       <CopyFormatEntries references={references} feedback={feedback} />
       <ImportSection references={references} />
@@ -132,9 +135,10 @@ function ImportSection(props: {
   references: readonly Reference[];
 }): ReactElement {
   const { references } = props;
+  const t = useChromeT();
   return (
     <>
-      <MenuDivider title="Import into a reference manager" />
+      <MenuDivider title={t('cite.importIntoManager')} />
       {CITATION_DOWNLOADS.map((download) => (
         <DownloadEntry
           key={download.format}

package/src/citation/ui/CiteButton.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { HeaderButtonProps } from '../../shared/ui/MenuButton.tsx';
 import { MenuButton } from '../../shared/ui/MenuButton.tsx';
 
@@ -10,7 +11,7 @@ interface CiteButtonBaseProps extends HeaderButtonProps {
   /**
    * Text of the button. In a compact bar it is not written, but it stays what
    * the pointer and a screen reader are told.
-   * @default 'Cite'
+   * @default the chrome's own word for it, in the language of the page
    */
   label?: string;
 }
@@ -33,7 +34,8 @@ export type CiteButtonProps = CiteOneWorkProps | CiteWorksProps;
  * @returns The button and its menu.
  */
 export function CiteButton(props: CiteButtonProps): ReactElement {
-  const label = props.label ?? 'Cite';
+  const t = useChromeT();
+  const label = props.label ?? t('cite.button');
 
   return (
     <MenuButton

package/src/citation/ui/CopyFormatEntries.tsx

@@ -1,6 +1,7 @@
 import { MenuItem } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { CITATION_FORMATS } from '../core/formats.ts';
 import type { Reference } from '../core/reference.ts';
 import { CITATION_STYLES } from '../core/segments.ts';
@@ -39,6 +40,7 @@ export function CopyFormatEntries(
   props: CopyFormatEntriesProps,
 ): ReactElement[] {
   const { references, feedback, keyPrefix = '', styled = true } = props;
+  const t = useChromeT();
 
   return CITATION_FORMATS.map((format) => {
     if (!styled || !format.styled) {
@@ -60,7 +62,7 @@ export function CopyFormatEntries(
       <MenuItem
         key={format.id}
         icon="clipboard"
-        text={format.label}
+        text={t.or(`cite.format.${format.id}`, format.label)}
         label={format.hint}
       >
         {CITATION_STYLES.map((style) => {

package/src/citation/ui/WorkEntry.tsx

@@ -2,6 +2,7 @@ import { MenuDivider, MenuItem } from '@blueprintjs/core';
 import { SvgLogoDoi } from 'cheminfo-font';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { CITATION_DOWNLOADS } from '../core/formats.ts';
 import { doiUrl } from '../core/reference.ts';
 import type { CitedWork } from '../core/works.ts';
@@ -38,6 +39,7 @@ export interface WorkEntryProps {
  */
 export function WorkEntry(props: WorkEntryProps): ReactElement {
   const { work, feedback } = props;
+  const t = useChromeT();
   const { reference, what, note } = work;
   const references = [reference];
 
@@ -54,20 +56,20 @@ export function WorkEntry(props: WorkEntryProps): ReactElement {
     >
       <MenuItem
         icon={<SvgLogoDoi style={DOI_ICON_STYLE} />}
-        text="Open the article"
+        text={t('cite.openArticle')}
         label={reference.doi}
         href={doiUrl(reference)}
         target="_blank"
         rel="noreferrer"
       />
-      <MenuDivider title="Copy this reference as" />
+      <MenuDivider title={t('cite.copyThisAs')} />
       <CopyFormatEntries
         references={references}
         feedback={feedback}
         keyPrefix={`${reference.doi}:`}
         styled={false}
       />
-      <MenuDivider title="Import this reference" />
+      <MenuDivider title={t('cite.importThis')} />
       {CITATION_DOWNLOADS.map((download) => (
         <DownloadEntry
           key={download.format}

package/src/citation/ui/entries.tsx

@@ -2,6 +2,7 @@ import type { IconName, Intent } from '@blueprintjs/core';
 import { MenuItem, Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { downloadCitations } from '../core/download.ts';
 import type { CitationDownload, CitationFormat } from '../core/formats.ts';
 import type { Reference } from '../core/reference.ts';
@@ -49,7 +50,12 @@ export interface CopyEntryProps {
  */
 export function CopyEntry(props: CopyEntryProps): ReactElement {
   const { references, format, style, state, onCopy } = props;
+  const t = useChromeT();
   const entry = style ?? format;
+  const label =
+    style === undefined
+      ? t.or(`cite.format.${format.id}`, format.label)
+      : style.label;
 
   return (
     <PreviewTooltip references={references} format={format.id} style={style}>
@@ -59,7 +65,7 @@ export function CopyEntry(props: CopyEntryProps): ReactElement {
           style={ENTRY_STYLE}
           icon={state?.icon ?? 'clipboard'}
           intent={state?.intent}
-          text={entry.label}
+          text={label}
           labelElement={
             // The hint of a style entry is a list of journals, in italic.
             style !== undefined && state === null ? (
@@ -90,6 +96,7 @@ export interface DownloadEntryProps {
  */
 export function DownloadEntry(props: DownloadEntryProps): ReactElement {
   const { references, download } = props;
+  const t = useChromeT();
   return (
     <PreviewTooltip references={references} format={download.format}>
       {(targetProps) => (
@@ -97,7 +104,7 @@ export function DownloadEntry(props: DownloadEntryProps): ReactElement {
           {...targetProps}
           style={ENTRY_STYLE}
           icon="download"
-          text={download.label}
+          text={t.or(`cite.download.${download.format}`, download.label)}
           labelElement={download.hint}
           onClick={() => {
             downloadCitations(references, download);

package/src/citation/ui/useCopyFeedback.ts

@@ -1,5 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import type { Translate } from '../../i18n/ui/useT.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { copyCitations } from '../core/clipboard.ts';
 import type { CitationFormatId } from '../core/formats.ts';
 import type { Reference } from '../core/reference.ts';
@@ -31,6 +34,7 @@ export interface CopyFeedback {
  * @returns The copy action, and the feedback of the entry that used it.
  */
 export function useCopyFeedback(): CopyFeedback {
+  const t = useChromeT();
   const [copied, setCopied] = useState<string | null>(null);
   const [hasFailed, setHasFailed] = useState(false);
   const timeout = useRef<number | null>(null);
@@ -52,7 +56,7 @@ export function useCopyFeedback(): CopyFeedback {
   }
 
   return {
-    stateOf: (key) => (copied === key ? feedback(hasFailed) : null),
+    stateOf: (key) => (copied === key ? feedback(hasFailed, t) : null),
     copy: (key, references, format, style) => {
       copyCitations(references, format, style).then(
         () => {
@@ -68,9 +72,12 @@ export function useCopyFeedback(): CopyFeedback {
   };
 }
 
-function feedback(failed: boolean): CopyState {
+// The label rides at the right of a menu row, where the format's own hint
+// otherwise sits — `LaTeX`, `Word, Docs, email` — so it is written in that
+// register rather than as the word a copy button shows on its own.
+function feedback(failed: boolean, t: Translate<ChromeKey>): CopyState {
   if (failed) {
-    return { icon: 'cross', intent: 'danger', label: 'copy failed' };
+    return { icon: 'cross', intent: 'danger', label: t('cite.copyFailed') };
   }
-  return { icon: 'tick', intent: 'success', label: 'copied' };
+  return { icon: 'tick', intent: 'success', label: t('cite.copied') };
 }

package/src/clipboard/ui/ClickToCopy.tsx

@@ -8,6 +8,9 @@ import type {
 } from 'react';
 
 import { onActivateKey } from '../../hooks/ui/activationKey.ts';
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import type { Translate } from '../../i18n/ui/useT.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { ClipboardContent } from '../core/writeToClipboard.ts';
 import { writeToClipboard } from '../core/writeToClipboard.ts';
@@ -104,6 +107,7 @@ export function ClickToCopy(props: ClickToCopyProps): ReactElement {
     className,
     style,
   } = props;
+  const t = useChromeT();
   const { copied, failed, copy } = useCopyToClipboard();
 
   if (disabled) {
@@ -136,7 +140,7 @@ export function ClickToCopy(props: ClickToCopyProps): ReactElement {
       style={style}
       role={focusable && !CELLS.has(Element) ? 'button' : undefined}
       tabIndex={focusable ? 0 : undefined}
-      title={title ?? copyTitle(value, label)}
+      title={title ?? copyTitle(value, label, t)}
       data-copy={outcome}
       onClick={activate}
       onKeyDown={onActivateKey<KeyboardEvent<HTMLElement>>(activate)}
@@ -157,9 +161,9 @@ export function ClickToCopy(props: ClickToCopyProps): ReactElement {
       ) : null}
       <span className="click-to-copy__status" role="status">
         {outcome === 'copied'
-          ? 'Copied'
+          ? t('clipboard.copied')
           : outcome === 'failed'
-            ? 'Copy failed'
+            ? t('clipboard.failed')
             : null}
       </span>
     </Element>
@@ -182,10 +186,16 @@ function isOnNestedControl(
 function copyTitle(
   value: ClickToCopyProps['value'],
   label: string | undefined,
+  t: Translate<ChromeKey>,
 ): string {
-  const what = label === undefined ? 'Copy' : `Copy the ${label}`;
+  const what =
+    label === undefined
+      ? t('clipboard.copy')
+      : t('clipboard.copyThe', { what: label });
   if (typeof value === 'function') return what;
   const text = typeof value === 'string' ? value : value.text;
   if (text === '' || text.length > TITLE_VALUE_MAX) return what;
-  return label === undefined ? `Copy ${text}` : `${what} (${text})`;
+  return label === undefined
+    ? t('clipboard.copyValue', { value: text })
+    : `${what} (${text})`;
 }