@12-apps/ui 6.7.0 → 6.8.0

package/src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -21,6 +21,7 @@ import { useCommandPalette } from './CommandPalette.hooks';
 import { PaletteResults } from './CommandPaletteResults';
 import { ShortcutChip } from './ShortcutChip';
 import type { CommandPaletteProps } from './CommandPalette.types';
+import type { CommandPaletteCopy } from '../../../copy';
 
 // Styled components
 const StyledDialog = styled(Dialog)(() => ({
@@ -98,7 +99,10 @@ const PaletteSearch: React.FC<{
   </SearchContainer>
 );
 
-const PaletteFooter: React.FC<{ commandCount: number }> = ({ commandCount }) => {
+const PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }> = ({
+  commandCount,
+  copy,
+}) => {
   const theme = useTheme();
 
   return (
@@ -112,9 +116,13 @@ const PaletteFooter: React.FC<{ commandCount: number }> = ({ commandCount }) =>
         background: alpha(theme.palette.background.default, 0.4) }}
     >
       <Box sx={{ display: 'flex', gap: 1 }}>
-        <ShortcutChip icon={<EnterIcon sx={{ fontSize: 12 }} />} label="Execute" size="small" />
-        <ShortcutChip label="↑↓ Navigate" size="small" />
-        <ShortcutChip label="ESC Close" size="small" />
+        <ShortcutChip
+          icon={<EnterIcon sx={{ fontSize: 12 }} />}
+          label={copy.execute}
+          size="small"
+        />
+        <ShortcutChip label={copy.navigate} size="small" />
+        <ShortcutChip label={copy.close} size="small" />
       </Box>
       <Typography variant="caption" color="text.secondary">
         {commandCount} commands
@@ -124,6 +132,7 @@ const PaletteFooter: React.FC<{ commandCount: number }> = ({ commandCount }) =>
 };
 
 export const CommandPalette: FC<CommandPaletteProps> = ({
+  copy,
   open,
   onClose,
   commands,
@@ -177,6 +186,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
           />
 
           <PaletteResults
+          copy={copy}
             listRef={listRef}
             dataTestId={dataTestId}
             searchQuery={searchQuery}
@@ -190,7 +200,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
             onExecute={executeCommand}
           />
 
-          <PaletteFooter commandCount={filteredCommands.length} />
+          <PaletteFooter copy={copy} commandCount={filteredCommands.length} />
         </PaletteContainer>
       </DialogContent>
     </StyledDialog>

package/src/components/navigation/CommandPalette/CommandPalette.types.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { CommandPaletteCopy } from '../../../copy';
 
 export interface PaletteCommand {
   id: string;
@@ -12,6 +13,8 @@ export interface PaletteCommand {
 }
 
 export interface CommandPaletteProps {
+  /** The footer's keyboard hints and the empty state's nudge. REQUIRED. */
+  copy: CommandPaletteCopy;
   open: boolean;
   onClose: () => void;
   commands: PaletteCommand[];

package/src/components/navigation/CommandPalette/CommandPaletteResults.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import { ShortcutChip } from './ShortcutChip';
 import type { PaletteCommand } from './CommandPalette.types';
+import type { CommandPaletteCopy } from '../../../copy';
 
 const ResultsList = styled(List)(({ theme }) => ({
   maxHeight: 400,
@@ -90,6 +91,7 @@ const slug = (value: string) => value.toLowerCase().replace(/\s+/g, '-');
 // has to stay consistent across both sections, so it is threaded through here
 // rather than mutated from inside the render as it was before.
 export const PaletteResults: React.FC<{
+  copy: CommandPaletteCopy;
   listRef: React.Ref<globalThis.HTMLUListElement>;
   dataTestId?: string;
   searchQuery: string;
@@ -102,6 +104,7 @@ export const PaletteResults: React.FC<{
   onSelect: (index: number) => void;
   onExecute: (command: PaletteCommand) => void;
 }> = ({
+  copy,
   listRef,
   dataTestId,
   searchQuery,
@@ -121,7 +124,7 @@ export const PaletteResults: React.FC<{
           No commands found for "{searchQuery}"
         </Typography>
         <Typography variant="caption" color="text.disabled" sx={{ mt: 1 }}>
-          Try a different search term
+          {copy.tryAnotherTerm}
         </Typography>
       </NoResults>
     );
@@ -160,7 +163,7 @@ export const PaletteResults: React.FC<{
         <>
           <CategoryLabel data-testid={`${dataTestId}-group-recent`}>
             <RecentIcon sx={{ fontSize: 14, mr: 0.5, verticalAlign: 'middle' }} />
-            Recent
+            {copy.recent}
           </CategoryLabel>
           {recent.map(row)}
           {filteredCommands.length > recentCommandIds.length && <Divider sx={{ my: 1 }} />}

package/src/components/navigation/Pagination/Pagination.tsx

@@ -152,6 +152,7 @@ export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
   (componentProps, ref) => {
     const resolved = resolvePaginationProps(componentProps);
     const {
+      pageSizeLabel,
       variant,
       size,
       page,
@@ -194,6 +195,7 @@ export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
       <PaginationContainer className={className} data-testid={dataTestId || 'pagination'}>
         {showItemsPerPage && onItemsPerPageChange && (
           <ItemsPerPageSelect
+            pageSizeLabel={pageSizeLabel}
             value={itemsPerPage}
             options={itemsPerPageOptions}
             size={size}

package/src/components/navigation/Pagination/Pagination.types.ts

@@ -3,6 +3,8 @@ import type { PaginationProps as MuiPaginationProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
 export interface PaginationProps extends Omit<MuiPaginationProps, 'variant' | 'size' | 'color'> {
+  /** The label in front of the page-size select. REQUIRED. */
+  pageSizeLabel: string;
   /**
    * The variant of the pagination
    */

package/src/components/navigation/Pagination/PaginationParts.tsx

@@ -20,6 +20,8 @@ const PageInfoContainer = styled(Box)(({ theme }) => ({
 }));
 
 export interface ItemsPerPageSelectProps {
+  /** The label in front of the select. REQUIRED — it was `"Show:"`. */
+  pageSizeLabel: string;
   value: number;
   options: number[];
   size: string;
@@ -29,6 +31,7 @@ export interface ItemsPerPageSelectProps {
 }
 
 export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
+  pageSizeLabel,
   value,
   options,
   size,
@@ -38,7 +41,7 @@ export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
 }) => (
   <ItemsPerPageContainer>
     <Typography variant="body2" color="text.secondary">
-      Show:
+      {pageSizeLabel}
     </Typography>
     <FormControl size="small" sx={{ minWidth: 80 }}>
       <Select

package/src/components/navigation/Tabs/Tabs.tsx

@@ -105,8 +105,9 @@ const buildTabsSx = ({
 // A tab's label: icon, text, optional close affordance, optionally badged.
 const TabLabel: React.FC<{
   item: TabItem;
+  closeTabLabel: string;
   onClose: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;
-}> = ({ item, onClose }) => {
+}> = ({ item, closeTabLabel, onClose }) => {
   const content = (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
       {item.icon}
@@ -116,7 +117,7 @@ const TabLabel: React.FC<{
           onClick={(e) => onClose(e, item.id)}
           role="button"
           tabIndex={0}
-          aria-label="Close tab"
+          aria-label={closeTabLabel}
           onKeyDown={(e) => {
             if (e.key !== 'Enter' && e.key !== ' ') return;
             onClose(e, item.id);
@@ -176,7 +177,7 @@ const TabsBar: React.FC<
       <MuiTab
         key={item.id}
         value={item.id}
-        label={<TabLabel item={item} onClose={onCloseTab} />}
+        label={<TabLabel closeTabLabel={p.closeTabLabel} item={item} onClose={onCloseTab} />}
         disabled={item.disabled || p.disabled}
         className={item.className}
         id={`tab-${item.id}`}
@@ -224,6 +225,10 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
   (tabsProps, ref) => {
     const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) } as TabsProps;
     const {
+      // Destructured only to keep it OUT of `rest`, which is spread onto the
+      // DOM node — `{...resolved}` below is what actually carries it to
+      // `TabsBar`. Same reason as `value` on the next line.
+      closeTabLabel: _closeTabLabel,
       value: _value,
       onChange,
       onTabClose,

package/src/components/navigation/Tabs/Tabs.types.ts

@@ -50,6 +50,8 @@ export interface TabItem {
 }
 
 export interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'children' | 'indicatorColor' | 'scrollButtons'> {
+  /** A closable tab's dismiss — a glyph with no visible label. REQUIRED. */
+  closeTabLabel: string;
   /**
    * The visual variant of the tabs
    */

package/src/components/utility/InfiniteScroll/InfiniteScroll.parts.tsx

@@ -12,19 +12,19 @@ const CENTERED = {
   p: 2,
 } as const;
 
-export const DefaultLoader: React.FC = () => (
+export const DefaultLoader: React.FC<{ loadingText: string }> = ({ loadingText }) => (
   <Box sx={CENTERED}>
     <CircularProgress size={24} />
     <Typography variant="body2" sx={{ ml: 1 }}>
-      Loading...
+      {loadingText}
     </Typography>
   </Box>
 );
 
-export const DefaultEndMessage: React.FC = () => (
+export const DefaultEndMessage: React.FC<{ endText: string }> = ({ endText }) => (
   <Box sx={CENTERED}>
     <Typography variant="body2" color="text.secondary">
-      No more items to load
+      {endText}
     </Typography>
   </Box>
 );

package/src/components/utility/InfiniteScroll/InfiniteScroll.tsx

@@ -18,6 +18,8 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   threshold = 150,
   loadMore,
   loader,
+  loadingText,
+  endText,
   endMessage,
   error,
   errorComponent,
@@ -45,9 +47,9 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   // The tail of the list is one of four things: the end message, an error, a
   // spinner, or the sentinel that asks for the next page.
   const renderSentinel = () => {
-    if (!hasMore) return endMessage || <DefaultEndMessage />;
+    if (!hasMore) return endMessage || <DefaultEndMessage endText={endText} />;
     if (error) return errorComponent || <DefaultError error={error} />;
-    if (loading) return loader || <DefaultLoader />;
+    if (loading) return loader || <DefaultLoader loadingText={loadingText} />;
 
     return (
       <div

package/src/components/utility/InfiniteScroll/InfiniteScroll.types.ts

@@ -3,6 +3,12 @@ import type { ReactNode } from 'react';
 export type InfiniteScrollVariant = 'default' | 'reverse' | 'horizontal';
 
 export interface InfiniteScrollProps {
+  /**
+   * The two states the scroller renders on its own: fetching the next page,
+   * and having reached the end. REQUIRED — both were English literals.
+   */
+  loadingText: string;
+  endText: string;
   children: ReactNode;
   variant?: InfiniteScrollVariant;
   hasMore: boolean;

package/src/components/utility/InstallPrompt/InstallPrompt.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import { installPromptStyles } from './InstallPrompt.styles';
 import type { InstallPlatform, InstallPromptProps } from './InstallPrompt.types';
 import { usePwaInstall } from './usePwaInstall';
+import type { InstallPromptCopy } from '../../../copy';
 
 const StyledInstallPrompt = styled(Box)(({ theme }) => installPromptStyles(theme));
 
@@ -20,9 +21,10 @@ const testIdFor = (base: string | undefined, suffix: string) =>
  * be a control that does nothing when pressed.
  */
 const IosInstructions: React.FC<{
+  copy: InstallPromptCopy;
   instructions?: React.ReactNode;
   dataTestId?: string;
-}> = ({ instructions, dataTestId }) => (
+}> = ({ copy, instructions, dataTestId }) => (
   <Typography
     className="install-prompt-description"
     variant="body2"
@@ -32,20 +34,22 @@ const IosInstructions: React.FC<{
   >
     {instructions ?? (
       <>
-        Tap <IosShare fontSize="small" aria-label="Share" /> then &quot;Add to Home Screen&quot;
+        {copy.iosTapBefore} <IosShare fontSize="small" aria-label={copy.shareLabel} />{' '}
+        {copy.iosTapAfter}
       </>
     )}
   </Typography>
 );
 
 const InstallPromptBody: React.FC<{
+  copy: InstallPromptCopy;
   icon?: React.ReactNode;
   title: string;
   description?: string;
   iosInstructions?: React.ReactNode;
   platform: InstallPlatform;
   dataTestId?: string;
-}> = ({ icon, title, description, iosInstructions, platform, dataTestId }) => (
+}> = ({ copy, icon, title, description, iosInstructions, platform, dataTestId }) => (
   <>
     <Box className="install-prompt-icon" aria-hidden="true">
       {icon ?? <InstallMobile />}
@@ -73,7 +77,7 @@ const InstallPromptBody: React.FC<{
       )}
 
       {platform === 'ios' && (
-        <IosInstructions instructions={iosInstructions} dataTestId={dataTestId} />
+        <IosInstructions copy={copy} instructions={iosInstructions} dataTestId={dataTestId} />
       )}
     </Box>
   </>
@@ -118,17 +122,17 @@ const InstallPromptActions: React.FC<{
  * browser with no install route at all — so it is safe to mount unconditionally
  * in a layout rather than gating it at the call site.
  *
- * The copy defaults to English and every string is a prop: this package stays
- * locale-neutral and the consuming app supplies its own wording.
+ * Every string is REQUIRED host config (`copy`): this package stays
+ * locale-neutral and the consuming app supplies its own wording. There is no
+ * English default to fall through to, so a missing word is a typecheck failure
+ * rather than an English sentence in a pt-BR store.
  */
 export const InstallPrompt = React.forwardRef<HTMLDivElement, InstallPromptProps>(
   (
     {
-      title = 'Install this app',
+      copy,
       description,
-      installLabel = 'Install',
       iosInstructions,
-      dismissLabel = 'Dismiss install prompt',
       icon,
       onInstall,
       onDismiss,
@@ -163,13 +167,14 @@ export const InstallPrompt = React.forwardRef<HTMLDivElement, InstallPromptProps
         ref={ref}
         className={className}
         role="region"
-        aria-label={title}
+        aria-label={copy.title}
         data-testid={dataTestId}
         {...props}
       >
         <InstallPromptBody
           icon={icon}
-          title={title}
+          copy={copy}
+          title={copy.title}
           description={description}
           iosInstructions={iosInstructions}
           platform={platform}
@@ -178,8 +183,8 @@ export const InstallPrompt = React.forwardRef<HTMLDivElement, InstallPromptProps
 
         <InstallPromptActions
           platform={platform}
-          installLabel={installLabel}
-          dismissLabel={dismissLabel}
+          installLabel={copy.installLabel}
+          dismissLabel={copy.dismissLabel}
           onInstallClick={handleInstall}
           onDismissClick={handleDismiss}
           dataTestId={dataTestId}

package/src/components/utility/InstallPrompt/InstallPrompt.types.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import type { InstallPromptCopy } from '../../../copy';
+
 /**
  * The Chromium-only event that makes a PWA installable from inside the page.
  * It is NOT in TypeScript's DOM lib because it is not a standard: Safari and
@@ -70,16 +72,16 @@ export interface PwaInstallState {
 }
 
 export interface InstallPromptProps {
-  /** Headline text. */
-  title?: string;
+  /**
+   * Every word this prompt renders. REQUIRED: this package ships no default
+   * copy, and the iOS half is a GESTURE instruction — a shopper who cannot
+   * read it cannot install the app at all.
+   */
+  copy: InstallPromptCopy;
   /** Supporting line under the title. */
   description?: string;
-  /** Label for the install button (Chromium only). */
-  installLabel?: string;
-  /** Replaces the built-in iOS Share → Add to Home Screen wording. */
+  /** Replaces the built-in iOS Share → Add to Home Screen wording outright. */
   iosInstructions?: ReactNode;
-  /** Accessible label for the dismiss button. */
-  dismissLabel?: string;
   /** Leading icon. Defaults to an install glyph. */
   icon?: ReactNode;
   /** Called with the outcome after the native prompt resolves. */

package/src/copy/data-display.ts

@@ -0,0 +1,60 @@
+/**
+ * The display family's words — the lightbox and map viewers, the carousel,
+ * the timing diagram, and the shared empty/error states.
+ *
+ * Split out of `copy.ts`, which is a barrel over this folder: one file
+ * listing every family is the file that grows on every port, and it stopped
+ * fitting the 400-line budget the rest of this package holds itself to.
+ */
+
+/**
+ * The lightbox's controls, every one of them a glyph with no text.
+ *
+ * So this object IS what a screen-reader user hears for the whole viewer —
+ * which is why it shipped as English literals for so long without anyone
+ * noticing: the sighted path renders identically either way.
+ */
+export interface LightboxCopy {
+  close: string;
+  previous: string;
+  next: string;
+  zoomIn: string;
+  zoomOut: string;
+  resetZoom: string;
+  /** The slideshow toggle, in its two states. */
+  play: string;
+  pause: string;
+}
+
+/** The map preview's control bar — same shape, same reason, as the lightbox. */
+export interface MapPreviewCopy {
+  zoomIn: string;
+  zoomOut: string;
+  center: string;
+  mapType: string;
+  fullscreen: string;
+  search: string;
+}
+
+/** The carousel's two arrows, which carry a glyph and nothing else. */
+export interface CarouselCopy {
+  previous: string;
+  next: string;
+}
+
+/** The request-timing diagram's own two strings. */
+export interface TimingDiagramCopy {
+  regionLabel: string;
+  heading: string;
+}
+
+export interface DataStateCopy {
+  /** No rows at all — distinct from "no rows for these filters". */
+  empty: string;
+  loading: string;
+  /** The infinite scroller reached the end. */
+  endOfList: string;
+  /** An alert's and a banner's dismiss, neither of which has a visible label. */
+  dismissAlert: string;
+  dismissBanner: string;
+}

package/src/copy/feedback.ts

@@ -0,0 +1,39 @@
+/**
+ * The feedback family's words — the tutorial overlay and the app chrome it
+ * points at.
+ *
+ * Split out of `copy.ts`, which is a barrel over this folder: one file
+ * listing every family is the file that grows on every port, and it stopped
+ * fitting the 400-line budget the rest of this package holds itself to.
+ */
+
+/**
+ * The states a data surface can be in with nothing to draw, and the dismiss
+ * every banner-like surface carries.
+ *
+ * One object rather than six, because these are the same four sentences the
+ * table, the grid, the async container, the hover card and the infinite
+ * scroller each rendered their own copy of.
+ */
+/** The guided tour's four controls, and the toast/modal chrome around it. */
+export interface TutorialCopy {
+  skip: string;
+  previous: string;
+  next: string;
+  restart: string;
+}
+
+/** Chrome that carries a glyph and no text, across several small surfaces. */
+export interface ChromeCopy {
+  /** The toast's dismiss, and the stacked modal's step-back arrow. */
+  dismissToast: string;
+  goBack: string;
+  /** A dashboard panel's close, and a tab's. */
+  closePanel: string;
+  closeTab: string;
+  /** The scroll region itself, and the button that returns to its top. */
+  scrollRegion: string;
+  scrollToTop: string;
+  /** The share affordance in the install prompt. */
+  share: string;
+}

package/src/copy/form.ts

@@ -0,0 +1,154 @@
+/**
+ * The form family's words. The largest group, and the one where the leak was
+ * least visible: half of these are tooltips and announcements that only a
+ * screen reader ever receives, so a language pass over the rendered text
+ * walked straight past them.
+ *
+ * Split out of `copy.ts`, which is a barrel over this folder: one file
+ * listing every family is the file that grows on every port, and it stopped
+ * fitting the 400-line budget the rest of this package holds itself to.
+ */
+
+/**
+ * The address field's three sentences. Two of them are about Google Maps
+ * failing to arrive — read by the shopper while the field is unusable, which
+ * is the worst moment to be spoken to in the wrong language.
+ */
+export interface AddressAutocompleteCopy {
+  /** Placeholder while the Maps script is still loading. */
+  loadingMaps: string;
+  /** The alert shown when the script never arrived. */
+  mapsLoadFailed: string;
+  /** The pin button's tooltip, which is also its accessible name. */
+  useCurrentLocation: string;
+}
+
+/** What an `Autocomplete` renders that is not one of the host's own options. */
+export interface AutocompleteCopy {
+  /** The two rows shown in place of options: fetching, and came back empty. */
+  loading: string;
+  noResults: string;
+  /** The input's own prompt, used when the host does not override it. */
+  placeholder: string;
+}
+
+/**
+ * The code editor's chrome. Every one of the four action buttons is a glyph
+ * whose tooltip IS its accessible name, so this object is the whole of what a
+ * screen reader reads out for the toolbar.
+ */
+export interface CodeEditorCopy {
+  /** Shown while the editor bundle is still arriving. */
+  loading: string;
+  /** The badge beside the language when the buffer cannot be edited. */
+  readOnly: string;
+  /** The format button's tooltip. Carries its own keyboard shortcut. */
+  formatCode: string;
+  /** The wrap toggle, in its two states. */
+  enableWrap: string;
+  disableWrap: string;
+  /** The copy button, before and after it has been pressed. */
+  copyToClipboard: string;
+  copied: string;
+  /** The fullscreen toggle, in its two states. */
+  enterFullscreen: string;
+  exitFullscreen: string;
+}
+
+/** The five strength bands, weakest first. */
+export interface PasswordStrengthBandCopy {
+  veryWeak: string;
+  weak: string;
+  fair: string;
+  good: string;
+  strong: string;
+}
+
+/**
+ * One line per requirement. `minLength` takes the configured count because the
+ * number is part of the sentence, and a language may not put it where English
+ * does.
+ */
+export interface PasswordRequirementCopy {
+  minLength(count: number): string;
+  uppercase: string;
+  lowercase: string;
+  numbers: string;
+  special: string;
+}
+
+/** Everything the password meter renders. */
+export interface PasswordStrengthCopy {
+  /** The three headings: the meter, the checklist, the tips. */
+  strengthHeading: string;
+  requirementsHeading: string;
+  suggestionsHeading: string;
+  bands: PasswordStrengthBandCopy;
+  /** The checklist rows, and the tip shown for each unmet one. */
+  requirements: PasswordRequirementCopy;
+  suggestions: PasswordRequirementCopy;
+}
+
+/**
+ * The rich-text toolbar. Ten glyph buttons, every one of them named ONLY by
+ * its tooltip — so this object is the whole of what a screen reader reads out
+ * for the editor's controls.
+ */
+export interface RichEditorToolbarCopy {
+  bold: string;
+  italic: string;
+  underline: string;
+  bulletList: string;
+  numberedList: string;
+  quote: string;
+  code: string;
+  insertLink: string;
+  textColor: string;
+  backgroundColor: string;
+  /** The browser prompt the link button opens, asking for the URL. */
+  linkPrompt: string;
+}
+
+/**
+ * What the phone field says on its own account. The picker's name is the whole
+ * of what a screen reader gets for a control rendered as a flag and a dial
+ * code, and the invalid sentence is read by the shopper at the checkout.
+ */
+export interface PhoneInputCopy {
+  /** The country picker's accessible name. */
+  selectCountry: string;
+  /**
+   * The number does not validate for the chosen country. Takes the country's
+   * own name, because a language may not place it where English does.
+   */
+  invalidNumber(countryName: string): string;
+  /** Stands in for the country's name before one has been resolved. */
+  unknownCountry: string;
+}
+
+/**
+ * What the upload control says beyond the host's own button label. Three of
+ * the four are announcements a screen reader reads and nothing renders — which
+ * is why they stayed English through every language pass.
+ */
+export interface UploadButtonCopy {
+  /** The control's own label, used when the host does not override it. */
+  buttonLabel: string;
+  /** The dropzone's second line, under the host's own label. */
+  dropzoneHint: string;
+  /**
+   * The dropzone's accessible name, which prefixes the host's label — it says
+   * what KIND of control this is before saying what it uploads.
+   */
+  dropzoneRole(label: string): string;
+  /** The button's label while an upload is in flight. */
+  uploading: string;
+  /** Announced when a dragged file is over the zone and would be accepted. */
+  dropReady: string;
+  /** The caption under the progress bar. */
+  percentUploaded(percent: number): string;
+  /** The same progress, announced rather than shown. */
+  uploadInProgress(percent: number): string;
+  /** The component's own error, announced. Takes the message it wraps. */
+  errorAnnouncement(message: string): string;
+}