Fix minor typos

Update to US spelling

client/src/api/client.js

@@ -41,7 +41,7 @@ const timeout = (ms, promise) => {
 };
 
 /**
- * Wrapper around fetch with sane defaults for behaviour in the face of
+ * Wrapper around fetch with sane defaults for behavior in the face of
  * errors.
  */
 const request = (method, url) => {

client/src/components/Link/Link.test.js

@@ -57,7 +57,7 @@ describe('Link', () => {
     expect(preventDefault).toHaveBeenCalledTimes(0);
   });
 
-  it('calls navigate instead of default behaviour if provided', () => {
+  it('calls navigate instead of default behavior if provided', () => {
     // If "href" and a navigate handler is provided, it should call that navigate handler and prevent default
     const preventDefault = jest.fn();
     const navigate = jest.fn();

client/src/components/Minimap/index.tsx

@@ -101,7 +101,7 @@ const renderMinimap = (container: HTMLElement) => {
 };
 
 /**
- * Initialise the minimap within the target element,
+ * Initialize the minimap within the target element,
  * making sure it re-renders when the visible content changes.
  */
 export const initMinimap = (

client/src/controllers/AutosizeController.test.js

@@ -19,7 +19,7 @@ describe('AutosizeController', () => {
 
   global.ResizeObserver = ResizeObserverMock;
 
-  describe('basic behaviour', () => {
+  describe('basic behavior', () => {
     beforeAll(() => {
       document.body.innerHTML = `
       <textarea

client/src/controllers/BulkController.ts

@@ -6,7 +6,7 @@ type ToggleOptions = {
 };
 
 type ToggleAllOptions = ToggleOptions & {
-  /** Override check all behaviour to either force check or uncheck all */
+  /** Override check all behavior to either force check or uncheck all */
   force?: boolean;
 };
 
@@ -92,7 +92,7 @@ export class BulkController extends Controller<HTMLElement> {
   /** Classes to remove on the actions target if any actions are checked */
   declare readonly actionInactiveClasses: string[];
 
-  /** Internal tracking of last clicked for shift+click behaviour */
+  /** Internal tracking of last clicked for shift+click behavior */
   lastChanged?: HTMLElement | null;
 
   /** Internal tracking of whether the shift key is active for multiple selection */
@@ -100,7 +100,7 @@ export class BulkController extends Controller<HTMLElement> {
 
   /**
    * On creation, ensure that the select all checkboxes are in sync.
-   * Set up the event listeners for shift+click behaviour.
+   * Set up the event listeners for shift+click behavior.
    */
   connect() {
     this.toggle();

client/src/controllers/CloneController.test.js

@@ -11,7 +11,7 @@ describe('CloneController', () => {
     jest.clearAllTimers();
   });
 
-  describe('default behaviour', () => {
+  describe('default behavior', () => {
     const addedListener = jest.fn();
 
     document.addEventListener('w-clone:added', addedListener);
@@ -90,7 +90,7 @@ describe('CloneController', () => {
     });
   });
 
-  describe('additional behaviour', () => {
+  describe('additional behavior', () => {
     beforeAll(() => {
       application?.stop();
       document.body.innerHTML = `

client/src/controllers/CountController.test.js

@@ -4,7 +4,7 @@ import { CountController } from './CountController';
 describe('CountController', () => {
   let application;
 
-  describe('basic behaviour', () => {
+  describe('basic behavior', () => {
     beforeAll(() => {
       application?.stop();
 

client/src/controllers/DialogController.test.js

@@ -6,7 +6,7 @@ import { DialogController } from './DialogController';
 describe('DialogController', () => {
   let application;
 
-  describe('basic behaviour', () => {
+  describe('basic behavior', () => {
     beforeEach(() => {
       application?.stop();
 

client/src/controllers/InitController.test.js

@@ -10,7 +10,7 @@ describe('InitController', () => {
     jest.clearAllTimers();
   });
 
-  describe('default behaviour', () => {
+  describe('default behavior', () => {
     const handleEvent = jest.fn();
     document.addEventListener('w-init:ready', handleEvent);
 

client/src/controllers/LinkController.test.js

@@ -21,7 +21,7 @@ describe('LinkController', () => {
     window.location = oldWindowLocation;
   });
 
-  describe('basic behaviour on connect', () => {
+  describe('basic behavior on connect', () => {
     it('should reflect all params by default', async () => {
       setWindowLocation(
         'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
@@ -108,7 +108,7 @@ describe('LinkController', () => {
       // Trigger next browser render cycle
       await Promise.resolve();
 
-      // Behaviour:
+      // behavior:
       // - `export` param preserved (multi-value, not in new URL)
       // - `foo` param preserved (single value, available in new URL)
       // - `number` param not preserved (single value, not in new URL)
@@ -147,7 +147,7 @@ describe('LinkController', () => {
       // Trigger next browser render cycle
       await Promise.resolve();
 
-      // Behaviour:
+      // behavior:
       // - `export` param preserved (multi-value, not in new URL)
       // - `foo` param preserved (single value, available in new URL)
       // - `number` param not preserved (single value, not in new URL)
@@ -258,7 +258,7 @@ describe('LinkController', () => {
         }),
       );
 
-      // Behaviour:
+      // behavior:
       // - `export` param preserved (multi-value, not in new URL)
       // - `foo` param preserved (single value, available in new URL)
       // - `number` param not preserved (single value, not in new URL)
@@ -298,7 +298,7 @@ describe('LinkController', () => {
         }),
       );
 
-      // Behaviour:
+      // behavior:
       // - `export` param preserved (multi-value, not in new URL)
       // - `foo` param preserved (single value, available in new URL)
       // - `number` param not preserved (single value, not in new URL)
@@ -369,7 +369,7 @@ describe('LinkController', () => {
       // Trigger next browser render cycle
       await Promise.resolve();
 
-      // Behaviour:
+      // behavior:
       // - `export` param preserved (multi-value, not in new URL)
       // - `foo` param preserved (single value, available in new URL)
       // - `number` param not preserved (single value, not in new URL)
@@ -414,7 +414,7 @@ describe('LinkController', () => {
         }),
       );
 
-      // Behaviour:
+      // behavior:
       // - `export` param preserved (multi-value, not in new URL)
       // - `foo` param preserved (single value, available in new URL)
       // - `number` param not preserved (single value, not in new URL)

client/src/controllers/PreviewController.test.js

@@ -375,7 +375,7 @@ describe('PreviewController', () => {
     });
   });
 
-  describe('basic behaviour', () => {
+  describe('basic behavior', () => {
     it('should initialize the preview when the side panel is opened', async () => {
       expect(global.fetch).not.toHaveBeenCalled();
       expect(events.ready).toHaveLength(0);
@@ -1000,7 +1000,7 @@ describe('PreviewController', () => {
       application.register(identifier, PreviewController);
       await Promise.resolve();
 
-      // Simulate Firefox's behaviour where the initial iframe without the src
+      // Simulate Firefox's behavior where the initial iframe without the src
       // attribute immediately dispatches the load event
       let iframes = document.querySelectorAll('iframe');
       expect(iframes.length).toEqual(1);

client/src/controllers/SessionController.ts

@@ -149,7 +149,7 @@ export class SessionController extends Controller<HTMLElement> {
    *
    * The interception can be controlled dynamically via the `interceptValue`
    * so that we can temporarily disable it when the user confirms the overwrite
-   * and immediately reenable it without having to remove and re-add the event
+   * and immediately re-enable it without having to remove and re-add the event
    * listener. This is useful for events that are triggered by a multi-step
    * process, such as a workflow action, which may have its own dialogs and may
    * be cancelled in the middle of the process.
@@ -161,7 +161,7 @@ export class SessionController extends Controller<HTMLElement> {
     // trigger it again after the user confirms the dialog.
     this.lastActionButton = event.target as HTMLButtonElement;
 
-    // Allow us to proceed with the original behaviour (i.e. form submission or
+    // Allow us to proceed with the original behavior (i.e. form submission or
     // workflow action modal) after the user confirms the dialog.
     if (!this.interceptValue || !this.hasWDialogOutlet) return;
 

client/src/controllers/SlugController.test.js

@@ -61,7 +61,7 @@ describe('SlugController', () => {
   });
 });
 
-describe('compare behaviour', () => {
+describe('compare behavior', () => {
   let application;
 
   beforeEach(() => {
@@ -113,7 +113,7 @@ describe('compare behaviour', () => {
     expect(event.preventDefault).not.toHaveBeenCalled();
   });
 
-  it('should prevent default using the slugify (default) behaviour as the compare function when urlify values is not equal', () => {
+  it('should prevent default using the slugify (default) behavior as the compare function when urlify values is not equal', () => {
     const slug = document.querySelector('#id_slug');
 
     const title = 'Тестовий заголовок';
@@ -135,7 +135,7 @@ describe('compare behaviour', () => {
     expect(event.preventDefault).toHaveBeenCalled();
   });
 
-  it('should not prevent default using the slugify (default) behaviour as the compare function when urlify value is equal', () => {
+  it('should not prevent default using the slugify (default) behavior as the compare function when urlify value is equal', () => {
     const slug = document.querySelector('#id_slug');
 
     const title = 'the-french-dispatch-a-love-letter-to-journalists';
@@ -159,7 +159,7 @@ describe('compare behaviour', () => {
     expect(event.preventDefault).not.toHaveBeenCalled();
   });
 
-  it('should not prevent default using the urlify behaviour as the compare function when urlify value matches', () => {
+  it('should not prevent default using the urlify behavior as the compare function when urlify value matches', () => {
     const title = 'Тестовий заголовок';
 
     const slug = document.querySelector('#id_slug');
@@ -228,7 +228,7 @@ describe('compare behaviour', () => {
   });
 });
 
-describe('urlify behaviour', () => {
+describe('urlify behavior', () => {
   let application;
 
   beforeEach(() => {

client/src/controllers/SyncController.test.js

@@ -325,7 +325,7 @@ describe('SyncController', () => {
     });
   });
 
-  describe('ability to use sync for other field behaviour', () => {
+  describe('ability to use sync for other field behavior', () => {
     beforeAll(() => {
       application?.stop();
     });

client/src/controllers/SyncController.ts

@@ -115,7 +115,7 @@ export class SyncController extends Controller<HTMLInputElement> {
   /**
    * Returns the non-default prevented elements that are targets of this sync
    * controller. Additionally allows this processing to enable or disable
-   * this controller instance's sync behaviour.
+   * this controller instance's sync behavior.
    */
   processTargetElements(
     eventName: string,

client/src/controllers/TeleportController.test.js

@@ -5,7 +5,7 @@ import { TeleportController } from './TeleportController';
 describe('TeleportController', () => {
   let application;
 
-  describe('basic behaviour', () => {
+  describe('basic behavior', () => {
     beforeEach(() => {
       application?.stop();
 

client/src/entrypoints/admin/core.js

@@ -10,7 +10,7 @@ import { initStimulus } from '../../includes/initStimulus';
 import { urlify } from '../../utils/urlify';
 import { escapeHtml } from '../../utils/text';
 
-/** Expose a global to allow for customisations and packages to build with Stimulus. */
+/** Expose a global to allow for customizations and packages to build with Stimulus. */
 window.StimulusModule = StimulusModule;
 
 /**

client/src/includes/chooserModal.js

@@ -88,7 +88,7 @@ const initPrefillTitleFromFilename = (
         parseInt(titleWidget.attr('maxLength') || '0', 10) || null;
       const data = { title: filename.replace(/\.[^.]+$/, '') };
 
-      // allow an event handler to customise data or call event.preventDefault to stop any title pre-filling
+      // allow an event handler to customize data or call event.preventDefault to stop any title pre-filling
       const form = fileWidget.closest('form').get(0);
 
       if (eventName) {

client/src/tokens/colorVariables.js

@@ -22,7 +22,7 @@ const calcHSLDifference = (refVariable, refValue, value, unit = '') => {
 };
 
 /**
- * Generate customisable CSS variables for a color palette, with override-able HSL components.
+ * Generate customizable CSS variables for a color palette, with override-able HSL components.
  *
  * For each shade of a color, we want to generate four variables:
  * - One for each HSL component of the color (Hue, Saturation, Lightness).

client/src/tokens/colorVariables.test.js

@@ -17,13 +17,13 @@ describe('generateColorVariables', () => {
   });
 
   /**
-   * If this test breaks, it means we’ve either changed our color palette, or changed how we make each of the colors customisable.
-   * If the change is intentional, we will then need to update our `custom_user_interface_colours` documentation.
-   * - Open Storybook’s color customisation story in a browser
+   * If this test breaks, it means we’ve either changed our color palette, or changed how we make each of the colors customizable.
+   * If the change is intentional, we will then need to update our `custom_user_interface_colors` documentation.
+   * - Open Storybook’s color customization story in a browser
    * - Use your browser’s DevTools to copy the relevant story markup to our Markdown documentation.
    * - Leave the copied content exactly as-is when pasting, to avoid any Markdown formatting issues.
    */
-  it('is stable (update custom_user_interface_colours documentation when this changes)', () => {
+  it('is stable (update custom_user_interface_colors documentation when this changes)', () => {
     const colorVariables = generateColorVariables(staticColors);
     expect(colorVariables).toMatchInlineSnapshot(`
       {
@@ -157,7 +157,7 @@ describe('generateColorVariables', () => {
 });
 
 describe('transparencies', () => {
-  it('is stable (update custom_user_interface_colours documentation when this changes)', () => {
+  it('is stable (update custom_user_interface_colors documentation when this changes)', () => {
     expect(transparencies).toMatchInlineSnapshot(`
       {
         "--w-color-black-10": "rgba(0, 0, 0, 0.10)",
@@ -193,7 +193,7 @@ describe('generateThemeColorVariables', () => {
     ]);
   });
 
-  it('light theme is stable (update custom_user_interface_colours documentation when this changes)', () => {
+  it('light theme is stable (update custom_user_interface_colors documentation when this changes)', () => {
     expect(generateThemeColorVariables(colorThemes.light))
       .toMatchInlineSnapshot(`
       {
@@ -250,7 +250,7 @@ describe('generateThemeColorVariables', () => {
     `);
   });
 
-  it('dark theme is stable (update custom_user_interface_colours documentation when this changes)', () => {
+  it('dark theme is stable (update custom_user_interface_colors documentation when this changes)', () => {
     expect(generateThemeColorVariables(colorThemes.dark))
       .toMatchInlineSnapshot(`
       {

client/src/tokens/colors.stories.tsx

@@ -176,7 +176,7 @@ const demoStyles = `
 `;
 
 const warningComment =
-  '<!-- Auto-generated with Storybook. See https://github.com/wagtail/wagtail/blob/main/client/src/tokens/colors.stories.tsx. Copy this comment’s parent section to update the `custom_user_interface_colours` documentation. -->';
+  '<!-- Auto-generated with Storybook. See https://github.com/wagtail/wagtail/blob/main/client/src/tokens/colors.stories.tsx. Copy this comment’s parent section to update the `custom_user_interface_colors` documentation. -->';
 
 const colorCustomisationsDemo = (
   <section>

docs/advanced_topics/customization/admin_templates.md

@@ -98,7 +98,7 @@ To customize the font families used in the admin user interface, inject a CSS fi
 }
 ```
 
-(custom_user_interface_colours)=
+(custom_user_interface_colors)=
 
 ## Custom user interface colors
 

docs/releases/2.12.rst

@@ -26,7 +26,7 @@ StreamField values now formally support being updated in-place from Python code,
 Admin colour themes
 ~~~~~~~~~~~~~~~~~~~
 
-Wagtail’s admin now uses CSS custom properties for its primary teal colour. Applying brand colours for the whole user interface only takes a few lines of CSS, and third-party extensions can reuse Wagtail’s CSS variables to support the same degree of customization. Read on :ref:`custom_user_interface_colours`. This feature was developed by Joshua Marantz.
+Wagtail’s admin now uses CSS custom properties for its primary teal colour. Applying brand colours for the whole user interface only takes a few lines of CSS, and third-party extensions can reuse Wagtail’s CSS variables to support the same degree of customization. Read on :ref:`custom_user_interface_colors`. This feature was developed by Joshua Marantz.
 
 Other features
 ~~~~~~~~~~~~~~

docs/releases/4.0.md

@@ -59,7 +59,7 @@ Wagtail’s page preview is now available in a side panel within the page editor
 
 ### Admin color themes
 
-In Wagtail 2.12, we introduced theming support for Wagtail’s primary brand color. This has now been extended to almost all of Wagtail’s color palette. View our [](custom_user_interface_colours) documentation for more information, an overview of Wagtail’s customizable color palette, and a live demo of the supported customizations. This was implemented by Thibaud Colas, under the page editor redesign project sponsored by Google.
+In Wagtail 2.12, we introduced theming support for Wagtail’s primary brand color. This has now been extended to almost all of Wagtail’s color palette. View our [](custom_user_interface_colors) documentation for more information, an overview of Wagtail’s customizable color palette, and a live demo of the supported customizations. This was implemented by Thibaud Colas, under the page editor redesign project sponsored by Google.
 
 ### Windows High Contrast mode support improvements
 
@@ -389,7 +389,7 @@ Customizing which actions are available and adding extra actions is still possib
 
 ### Changed CSS variables for admin color themes
 
-As part of our support for theming across all colors, we’ve had to rename or remove some of the pre-existing CSS variables. Wagtail’s indigo is now customizable with `--w-color-primary`, and the teal is customizable as `--w-color-secondary`. See [](custom_user_interface_colours) for an overview of all customizable colors. Here are replaced variables:
+As part of our support for theming across all colors, we’ve had to rename or remove some of the pre-existing CSS variables. Wagtail’s indigo is now customizable with `--w-color-primary`, and the teal is customizable as `--w-color-secondary`. See [](custom_user_interface_colors) for an overview of all customizable colors. Here are replaced variables:
 
 -   `--color-primary` is now `--w-color-secondary`
 -   `--color-primary-hue` is now `--w-color-secondary-hue`

wagtail/admin/templates/wagtailadmin/shared/formatted_field.html

@@ -23,8 +23,8 @@
         </label>
     {% endif %}
 
-    {# It’s possible to customise the fields’ layout based on widget type. #}
-    {# Customising fields based on the field type is only supported for backwards compatibility. #}
+    {# It’s possible to customize the fields’ layout based on widget type. #}
+    {# Customizing fields based on the field type is only supported for backwards compatibility. #}
     <div class="w-field {{ field_classname }}{% if has_errors %} w-field--error{% endif %}{% if show_add_comment_button %} w-field--commentable{% endif %}" data-field{% if contentpath %} data-contentpath="{{ contentpath }}"{% endif %}>
 
         {# Always associate a wrapping div with the field, so JS error rendering knows where to put error messages. #}

wagtail/images/static_src/wagtailimages/js/add-multiple.js

@@ -94,7 +94,7 @@ $(function () {
 
     /**
      * Allow a custom title to be defined by an event handler for this form.
-     * If event.preventDefault is called, the original behaviour of using the raw
+     * If event.preventDefault is called, the original behavior of using the raw
      * filename (with extension) as the title is preserved.
      *
      * @example