diff --git a/.vscode/settings.json b/.vscode/settings.json
index fbaef8e1..a8ef4c90 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -12,7 +12,7 @@
     "editor.wordWrap": "on"
   },
   "[svelte]": {
-     "editor.defaultFormatter": "svelte.svelte-vscode"
-   },
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
   "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/src/app.html b/src/app.html
index 7bf73d49..61516813 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  %sveltekit.head%
-</head>
-<body>
-  %sveltekit.body%
-</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    %sveltekit.head%
+  </head>
+  <body>
+    %sveltekit.body%
+  </body>
+</html>
diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte
index 4fed36b9..c80e6925 100644
--- a/src/components/AdSlot/AdSlot.svelte
+++ b/src/components/AdSlot/AdSlot.svelte
@@ -55,7 +55,7 @@
   });
 </script>
 
-<div data-freestar-ad={dataFreestarAd || null} id={adId}></div>
+<div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
 
 <style>
   :global(div.freestar-adslot:has(.unfulfilled-ad)) {
diff --git a/src/components/AdSlot/InlineAd.mdx b/src/components/AdSlot/InlineAd.mdx
index 5be76a80..97e851cc 100644
--- a/src/components/AdSlot/InlineAd.mdx
+++ b/src/components/AdSlot/InlineAd.mdx
@@ -46,11 +46,11 @@ You may add **up to three** inline ads per page, but must set the `n` prop on mu
 
 ```svelte
 <!-- First inline ad on the page -->
-<InlineAd n={1} />
+<InlineAd n="{1}" />
 <!-- ... second ... -->
-<InlineAd n={2} />
+<InlineAd n="{2}" />
 <!-- ... third and final. -->
-<InlineAd n={3} />
+<InlineAd n="{3}" />
 ```
 
 <Canvas of={InlineAdStories.Demo} />
diff --git a/src/components/AdSlot/LeaderboardAd.svelte b/src/components/AdSlot/LeaderboardAd.svelte
index fdc4435b..0dface07 100644
--- a/src/components/AdSlot/LeaderboardAd.svelte
+++ b/src/components/AdSlot/LeaderboardAd.svelte
@@ -46,7 +46,7 @@
   });
 </script>
 
-<svelte:window bind:innerWidth={windowWidth} />
+<svelte:window bind:innerWidth="{windowWidth}" />
 
 <div
   class="freestar-adslot leaderboard__sticky {cls}"
diff --git a/src/components/AdSlot/ResponsiveAd.svelte b/src/components/AdSlot/ResponsiveAd.svelte
index 55a9edd5..01a95685 100644
--- a/src/components/AdSlot/ResponsiveAd.svelte
+++ b/src/components/AdSlot/ResponsiveAd.svelte
@@ -69,7 +69,7 @@
   let adType = $derived(getAdType(placementName));
 </script>
 
-<svelte:window bind:innerWidth={windowWidth} />
+<svelte:window bind:innerWidth="{windowWidth}" />
 
 {#if windowWidth}
   {#key placementName}
diff --git a/src/components/Article/Article.mdx b/src/components/Article/Article.mdx
index 9a3970e5..ad6935ce 100644
--- a/src/components/Article/Article.mdx
+++ b/src/components/Article/Article.mdx
@@ -40,13 +40,13 @@ When combined with the `Block` component, you can set custom column widths by pa
 
 ```svelte
 <Article
-  columnWidths={{
+  columnWidths="{{
     narrower: 310,
     narrow: 450,
     normal: 550,
     wide: 675,
     wider: 1400,
-  }}
+  }}"
 >
   <Block width="narrower" />
   <Block width="narrow" />
diff --git a/src/components/Byline/stories/docs/component.md b/src/components/Byline/Byline.mdx
similarity index 59%
rename from src/components/Byline/stories/docs/component.md
rename to src/components/Byline/Byline.mdx
index fd9eedc0..779d9aae 100644
--- a/src/components/Byline/stories/docs/component.md
+++ b/src/components/Byline/Byline.mdx
@@ -1,4 +1,12 @@
-Byline and dateline.
+import { Meta } from '@storybook/blocks';
+
+import * as BylineStories from './Byline.stories.svelte';
+
+<Meta of={BylineStories} />
+
+# Byline
+
+Easily add a byline and dateline.
 
 ```svelte
 <script>
@@ -6,13 +14,12 @@ Byline and dateline.
 </script>
 
 <Byline
-  authors="{[
+  authors={[
     'Dea Bankova',
-    'Aditi Bhandari',
     'Prasanta Kumar Dutta',
     'Anurag Rao',
     'Mariano Zafra',
-  ]}"
+  ]}
   publishTime="2021-09-12T00:00:00.000Z"
   updateTime="2021-09-12T12:57:00.000Z"
 />
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
index 412d1adc..b1dcee23 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -17,18 +17,18 @@
 
 <Story
   name="Demo"
-  args={{
+  args="{{
     src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
     id: 'abortion-rights-map',
     ariaLabel: 'map',
     frameTitle: 'Global abortion access',
-  }}
+  }}"
 />
 
 <Story
   name="With chatter"
-  tags={['!autodocs']}
-  args={{
+  tags="{['!autodocs']}"
+  args="{{
     frameTitle: 'Global abortion access',
     ariaLabel: 'map',
     id: 'abortion-rights-map',
@@ -37,5 +37,5 @@
     description: 'A map of worldwide access to abortion.',
     notes:
       'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights',
-  }}
+  }}"
 />
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
index 7420449e..b3ef8240 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
   import Fa from 'svelte-fa/src/fa.svelte';
   import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
   interface Props {
diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte
index 5917b29f..1037709f 100644
--- a/src/components/EndNotes/EndNotes.svelte
+++ b/src/components/EndNotes/EndNotes.svelte
@@ -12,15 +12,13 @@
     text: string;
   }
 
-  
-
   import Block from '../Block/Block.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
   interface Props {
     /**
-   * An array of endnote items.
-   * @required
-   */
+     * An array of endnote items.
+     * @required
+     */
     notes?: EndNote[];
   }
 
diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte
index 3c5294ad..f93febe5 100644
--- a/src/components/Framer/Resizer/index.svelte
+++ b/src/components/Framer/Resizer/index.svelte
@@ -11,7 +11,11 @@
     minFrameWidth?: number;
   }
 
-  let { breakpoints = [330, 510, 660, 930, 1200], maxFrameWidth = 1200, minFrameWidth = 320 }: Props = $props();
+  let {
+    breakpoints = [330, 510, 660, 930, 1200],
+    maxFrameWidth = 1200,
+    minFrameWidth = 320,
+  }: Props = $props();
 
   let container = $state();
 
@@ -91,9 +95,9 @@
 </script>
 
 <svelte:window
-  onmousemove={move}
-  onmouseup={end}
-  onkeydown={handleKeyDown}
+  onmousemove="{move}"
+  onmouseup="{end}"
+  onkeydown="{handleKeyDown}"
   bind:innerWidth="{windowInnerWidth}"
 />
 
@@ -105,10 +109,10 @@
     <button
       class="icon left"
       disabled="{$width === minWidth}"
-      onclick={decrement}
-      onfocus={onFocus}
-      onmouseover={onFocus}
-      onmouseleave={onBlur}
+      onclick="{decrement}"
+      onfocus="{onFocus}"
+      onmouseover="{onFocus}"
+      onmouseleave="{onBlur}"
     >
       <Fa icon="{faMobileAlt}" fw />
     </button>
@@ -119,18 +123,18 @@
         tabindex="0"
         role="button"
         style="left: calc({offset * 100}% - 5px);"
-        onmousedown={start}
-        onfocus={onFocus}
-        onblur={onBlur}
+        onmousedown="{start}"
+        onfocus="{onFocus}"
+        onblur="{onBlur}"
       ></div>
     </div>
     <button
       class="icon right"
       disabled="{$width === maxWidth}"
-      onclick={increment}
-      onfocus={onFocus}
-      onmouseover={onFocus}
-      onmouseleave={onBlur}
+      onclick="{increment}"
+      onfocus="{onFocus}"
+      onmouseover="{onFocus}"
+      onmouseleave="{onBlur}"
     >
       <Fa icon="{faDesktop}" fw />
     </button>
diff --git a/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte b/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
index f837d3a2..43904f42 100644
--- a/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
+++ b/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  
   // For demo purposes only, hard-wiring img paths from Vite
   // @ts-ignore img
   import chartXs from '../imgs/ai-chart-xs.png';
diff --git a/src/components/Markdown/Markdown.svelte b/src/components/Markdown/Markdown.svelte
index 5f503e4f..3033e3c1 100644
--- a/src/components/Markdown/Markdown.svelte
+++ b/src/components/Markdown/Markdown.svelte
@@ -4,9 +4,6 @@
   import { marked } from 'marked';
   import { staticMarkdown } from './stores';
 
-  
-
-  
   interface Props {
     /** A Markdown formatted string */
     source?: string;
@@ -16,7 +13,9 @@
 
   let { source = '', parseInline = false }: Props = $props();
 
-  let markdown = $derived(parseInline ? marked.parseInline(source) : marked.parse(source));
+  let markdown = $derived(
+    parseInline ? marked.parseInline(source) : marked.parse(source)
+  );
 
   const setInnerHTML: Action<HTMLElement, string> = (node, html) => {
     node.innerHTML = html;
diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index 38425ea9..c60f870c 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/src/components/PymChild/PymChild.svelte
@@ -1,7 +1,5 @@
 <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
 <script lang="ts">
-  
-
   import { onMount } from 'svelte';
   import pym from 'pym.js';
   import { pymChildStore } from './stores.js';
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
index 6fe397dc..cb6e31bc 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
@@ -1,8 +1,5 @@
 <!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
 <script lang="ts">
-  
-  
-  
   interface Props {
     /** "Kinesis" colour */
     logoColour?: string;
@@ -12,7 +9,11 @@
     width?: string;
   }
 
-  let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props();
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
 </script>
 
 <svg
diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte
index 49a4a00f..10d4efeb 100644
--- a/src/components/ReutersLogo/ReutersLogo.svelte
+++ b/src/components/ReutersLogo/ReutersLogo.svelte
@@ -1,8 +1,5 @@
 <!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
 <script lang="ts">
-  
-  
-  
   interface Props {
     /** "Kinesis" colour */
     logoColour?: string;
@@ -12,7 +9,11 @@
     width?: string;
   }
 
-  let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props();
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
 </script>
 
 <svg
diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index c18ae2b8..96a91a91 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -1,85 +1,72 @@
 <!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) -->
 <script lang="ts">
-  
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-
   interface GraphicAuthor {
     name: string;
     url: string;
   }
 
-  
   interface Props {
     /**
-   * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
-   * is globally available as `import.meta.env.BASE_URL`.
-   * @requiredx
-   * @type {string}
-   */
+     * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
+     * is globally available as `import.meta.env.BASE_URL`.
+     * @requiredx
+     * @type {string}
+     */
     baseUrl?: string;
     /**
-   * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
-   * @required
-   * @type {URL}
-   */
+     * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
+     * @required
+     * @type {URL}
+     */
     pageUrl?: URL | null;
     /**
-   * SEO title
-   * @required
-   * @type {string}
-   */
+     * SEO title
+     * @required
+     * @type {string}
+     */
     seoTitle: string;
     /**
-   * SEO description
-   * @required
-   * @type {string}
-   */
+     * SEO description
+     * @required
+     * @type {string}
+     */
     seoDescription: string;
     /**
-   * Share title
-   * @required
-   * @type {string}
-   */
+     * Share title
+     * @required
+     * @type {string}
+     */
     shareTitle: string;
     /**
-   * Share description
-   * @required
-   * @type {string}
-   */
+     * Share description
+     * @required
+     * @type {string}
+     */
     shareDescription: string;
     /**
-   * Share image path. **Must be an absolute path.**
-   * @required
-   * @type {string}
-   */
+     * Share image path. **Must be an absolute path.**
+     * @required
+     * @type {string}
+     */
     shareImgPath: string;
     /**
-   * Share image alt text, up to 420 characters.
-   * @type {string}
-   */
+     * Share image alt text, up to 420 characters.
+     * @type {string}
+     */
     shareImgAlt?: string;
     /**
-   * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
-   * @type {string}
-   */
+     * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     * @type {string}
+     */
     publishTime?: string;
     /**
-   * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
-   * @type {string}
-   */
+     * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     * @type {string}
+     */
     updateTime?: string;
     /**
-   * Array of authors for the piece. Each author object must have `name` and `url` attributes.
-   */
+     * Array of authors for the piece. Each author object must have `name` and `url` attributes.
+     */
     authors?: GraphicAuthor[];
   }
 
@@ -94,7 +81,7 @@
     shareImgAlt = '',
     publishTime = '',
     updateTime = '',
-    authors = []
+    authors = [],
   }: Props = $props();
 
   const getOrigin = (baseUrl: string) => {
@@ -109,7 +96,9 @@
   };
 
   let origin = $derived(getOrigin(baseUrl));
-  let canonicalUrl = $derived((origin + pageUrl?.pathname).replace(/index\.html\/$/, ''));
+  let canonicalUrl = $derived(
+    (origin + pageUrl?.pathname).replace(/index\.html\/$/, '')
+  );
 
   const orgLdJson = {
     '@context': 'http://schema.org',
diff --git a/src/components/Scroller/Embedded/index.svelte b/src/components/Scroller/Embedded/index.svelte
index 1d95b023..6c1d0380 100644
--- a/src/components/Scroller/Embedded/index.svelte
+++ b/src/components/Scroller/Embedded/index.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
   import type { ContainerWidth, ScrollerStep } from '../../@types/global';
 
-
   type EmbeddedLayout = 'fb' | 'bf';
 
-
   import Background from './Background.svelte';
   import Foreground from './Foreground.svelte';
   interface Props {
@@ -13,7 +11,11 @@
     backgroundWidth?: ContainerWidth;
   }
 
-  let { steps = [], embeddedLayout = 'fb', backgroundWidth = 'fluid' }: Props = $props();
+  let {
+    steps = [],
+    embeddedLayout = 'fb',
+    backgroundWidth = 'fluid',
+  }: Props = $props();
 </script>
 
 {#each steps as step, index}
diff --git a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
index dbb0565d..63c91bee 100644
--- a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
+++ b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
@@ -11,7 +11,7 @@
 <p>The count is {count}</p>
 
 <button
-  onclick={() => {
+  onclick="{() => {
     count += 1;
-  }}>Click Me</button
+  }}">Click Me</button
 >
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index ad908bb3..b0761c69 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -4,12 +4,11 @@
   import MagnifyingGlass from './MagnifyingGlass.svelte';
   import X from './X.svelte';
 
-  
   interface Props {
     /**
-   * The placeholder text that appears in the search box.
-   * @type {string}
-   */
+     * The placeholder text that appears in the search box.
+     * @type {string}
+     */
     searchPlaceholder?: string;
   }
 
@@ -40,7 +39,7 @@
     class="search--input body-caption pl-8"
     type="text"
     placeholder="{searchPlaceholder}"
-    oninput={input}
+    oninput="{input}"
     bind:value
   />
   <div
@@ -48,8 +47,8 @@
     role="button"
     tabindex="0"
     class:invisible="{!active}"
-    onclick={clear}
-    onkeyup={clear}
+    onclick="{clear}"
+    onkeyup="{clear}"
   >
     <X />
   </div>
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index 941411df..61ccce6c 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -9,11 +9,10 @@
   import starterData from './data.json';
   import { onMount } from 'svelte';
 
-  
   interface Props {
     /**
-   * Set to `false` to remove graphics referrals
-   */
+     * Set to `false` to remove graphics referrals
+     */
     includeReferrals?: boolean;
   }
 
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
index 10441272..77a7703f 100644
--- a/src/components/SiteHeader/MobileMenu/index.svelte
+++ b/src/components/SiteHeader/MobileMenu/index.svelte
@@ -9,7 +9,11 @@
     releaseMobileMenu?: any;
   }
 
-  let { data = [], isMobileMenuOpen = false, releaseMobileMenu = () => {} }: Props = $props();
+  let {
+    data = [],
+    isMobileMenuOpen = false,
+    releaseMobileMenu = () => {},
+  }: Props = $props();
 </script>
 
 {#if isMobileMenuOpen}
@@ -31,7 +35,7 @@
           textColour="var(--nav-primary)"
         />
       </div>
-      <button class="button close-button" onclick={releaseMobileMenu}>
+      <button class="button close-button" onclick="{releaseMobileMenu}">
         <div class="button-container">
           <CloseIcon />
         </div>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
index 803ddb46..86994a4d 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -5,10 +5,11 @@
 
   let { section = {}, headingText } = $props();
 
-  let splitCount =
-    $derived(section.children && section.children.length > 7 ?
+  let splitCount = $derived(
+    section.children && section.children.length > 7 ?
       Math.ceil(section.children.length / 2)
-    : 0);
+    : 0
+  );
 </script>
 
 <NavDropdown {headingText}>
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
index a5df1353..d0147a57 100644
--- a/src/components/SiteHeader/NavBar/index.svelte
+++ b/src/components/SiteHeader/NavBar/index.svelte
@@ -35,27 +35,27 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             class="nav-item category link"
-            onmouseenter={() => {
+            onmouseenter="{() => {
               navTimeout = setTimeout(
                 () => activeSection.set(section.id),
                 timeout
               );
-            }}
-            onfocus={() => activeSection.set(section.id)}
-            onmouseleave={() => {
+            }}"
+            onfocus="{() => activeSection.set(section.id)}"
+            onmouseleave="{() => {
               clearTimeout(navTimeout);
               activeSection.set(null);
-            }}
-            onblur={() => {
+            }}"
+            onblur="{() => {
               clearTimeout(navTimeout);
               activeSection.set(null);
-            }}
-            onclick={() => {
+            }}"
+            onclick="{() => {
               if ($activeSection === section.id) {
                 clearTimeout(navTimeout);
                 activeSection.set(null);
               }
-            }}
+            }}"
           >
             <div
               class="nav-button link"
@@ -88,24 +88,24 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <li
         class="nav-item"
-        onmouseenter={() => {
+        onmouseenter="{() => {
           navTimeout = setTimeout(() => activeSection.set('more'), timeout);
-        }}
-        onfocus={() => activeSection.set('more')}
-        onmouseleave={() => {
+        }}"
+        onfocus="{() => activeSection.set('more')}"
+        onmouseleave="{() => {
           clearTimeout(navTimeout);
           activeSection.set(null);
-        }}
-        onblur={() => {
+        }}"
+        onblur="{() => {
           clearTimeout(navTimeout);
           activeSection.set(null);
-        }}
-        onclick={() => {
+        }}"
+        onclick="{() => {
           if ($activeSection === 'more') {
             clearTimeout(navTimeout);
             activeSection.set(null);
           }
-        }}
+        }}"
       >
         <div
           class="nav-button more link"
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
index e00e973f..0620975f 100644
--- a/src/components/SiteHeader/SiteHeader.svelte
+++ b/src/components/SiteHeader/SiteHeader.svelte
@@ -77,9 +77,9 @@
                 aria-label="Menu"
                 aria-haspopup="true"
                 aria-expanded="{isMobileMenuOpen}"
-                onclick={() => {
+                onclick="{() => {
                   isMobileMenuOpen = !isMobileMenuOpen;
-                }}
+                }}"
               >
                 <div class="button-container">
                   <MenuIcon />
diff --git a/src/components/Table/Pagination.svelte b/src/components/Table/Pagination.svelte
index 115e8467..1d39f33b 100644
--- a/src/components/Table/Pagination.svelte
+++ b/src/components/Table/Pagination.svelte
@@ -3,33 +3,26 @@
   import LeftArrow from './LeftArrow.svelte';
   import RightArrow from './RightArrow.svelte';
 
-  
-
-  
-
-  
-
-  
   interface Props {
     /**
-   * The current page number.
-   * @type {number}
-   */
+     * The current page number.
+     * @type {number}
+     */
     pageNumber?: number;
     /**
-   * The default page size.
-   * @type {number}
-   */
+     * The default page size.
+     * @type {number}
+     */
     pageSize?: number;
     /**
-   * The number of records in the current page.
-   * @type {number}
-   */
+     * The number of records in the current page.
+     * @type {number}
+     */
     pageLength?: number;
     /**
-   * The total number of records in the data set.
-   * @type {number}
-   */
+     * The total number of records in the data set.
+     * @type {number}
+     */
     n?: number;
   }
 
@@ -37,7 +30,7 @@
     pageNumber = $bindable(1),
     pageSize = 25,
     pageLength = null,
-    n = null
+    n = null,
   }: Props = $props();
 
   let minRow = $derived(pageNumber * pageSize - pageSize + 1);
@@ -58,7 +51,7 @@
 </script>
 
 <nav aria-label="pagination" class="pagination fmt-4">
-  <button onclick={goToPreviousPage} disabled="{pageNumber === 1}"
+  <button onclick="{goToPreviousPage}" disabled="{pageNumber === 1}"
     ><div class="icon-wrapper">
       <LeftArrow />
       <span class="visually-hidden">Previous page</span>
@@ -70,7 +63,7 @@
     </div>
   </div>
   <button
-    onclick={goToNextPage}
+    onclick="{goToNextPage}"
     disabled="{pageNumber === Math.ceil(n / pageSize)}"
     ><div class="icon-wrapper">
       <RightArrow />
diff --git a/src/components/Table/Select.svelte b/src/components/Table/Select.svelte
index 9415be48..c0c7d5e1 100644
--- a/src/components/Table/Select.svelte
+++ b/src/components/Table/Select.svelte
@@ -2,19 +2,16 @@
   import { createEventDispatcher } from 'svelte';
   import type { Option } from '../@types/global';
 
-  
-
-  
   interface Props {
     /**
-   * The label that appears above the select input.
-   * @type {string}
-   */
+     * The label that appears above the select input.
+     * @type {string}
+     */
     label?: string;
     /**
-   * The label that appears above the select input.
-   * @type {Array}
-   */
+     * The label that appears above the select input.
+     * @type {Array}
+     */
     options?: Option[];
   }
 
@@ -36,7 +33,7 @@
     class="select--input body-caption fpx-2"
     name="select--input"
     id="select--input"
-    oninput={input}
+    oninput="{input}"
   >
     {#each options as obj}
       <option value="{obj.value}">{obj.text}</option>
diff --git a/src/components/Table/SortArrow.svelte b/src/components/Table/SortArrow.svelte
index cd34c411..4fb751bf 100644
--- a/src/components/Table/SortArrow.svelte
+++ b/src/components/Table/SortArrow.svelte
@@ -5,13 +5,12 @@
    */
   type SortDirection = 'ascending' | 'descending';
 
-  
   interface Props {
     sortDirection?: SortDirection;
     /**
-   * Whether or not this arrow is currently sorting. It is false by default.
-   * @type {boolean}
-   */
+     * Whether or not this arrow is currently sorting. It is false by default.
+     * @type {boolean}
+     */
     active?: boolean;
   }
 
diff --git a/src/components/Video/Controls.svelte b/src/components/Video/Controls.svelte
index 6229f6ca..ce59b2a6 100644
--- a/src/components/Video/Controls.svelte
+++ b/src/components/Video/Controls.svelte
@@ -15,7 +15,7 @@
     controlsBorderOffset,
     resetCondition,
     separateReplayIcon,
-    controlsColour
+    controlsColour,
   } = $props();
 
   function forwardBtnClick() {
@@ -29,7 +29,7 @@
 </script>
 
 <button
-  onclick={forwardBtnClick}
+  onclick="{forwardBtnClick}"
   style="
     opacity: {controlsOpacity};
     top: {controlsPosition === 'top left' || controlsPosition === 'top right' ?
