fix merge conflicts

.storybook/preview.ts

@@ -1,7 +1,7 @@
 import '../src/scss/main.scss';
 import './preview.scss';
 
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { SyntaxHighlighter } from '@storybook/components';
 import Wrapper from './Wrapper.svelte';
 import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';

package.json

@@ -34,21 +34,21 @@
     "@babel/preset-env": "^7.21.4",
     "@evilmartians/lefthook": "^1.3.10",
     "@reuters-graphics/eslint-config": "^0.0.2",
-    "@storybook/addon-actions": "^7.0.20",
-    "@storybook/addon-docs": "^7.0.20",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/addon-mdx-gfm": "^7.0.20",
-    "@storybook/addon-svelte-csf": "^3.0.3",
-    "@storybook/blocks": "^7.0.20",
-    "@storybook/builder-vite": "^7.0.20",
-    "@storybook/manager-api": "^7.0.20",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-docs": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/addon-mdx-gfm": "^7.1.0",
+    "@storybook/addon-svelte-csf": "3.0.5--canary.113.02ce02a.0",
+    "@storybook/blocks": "^7.1.0",
+    "@storybook/builder-vite": "^7.1.0",
+    "@storybook/manager-api": "^7.1.0",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/svelte": "^7.0.20",
-    "@storybook/svelte-vite": "^7.0.20",
+    "@storybook/svelte": "^7.1.0",
+    "@storybook/svelte-vite": "^7.1.0",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.20",
+    "@storybook/theming": "^7.1.0",
     "@sveltejs/vite-plugin-svelte": "^2.4.1",
     "@tsconfig/svelte": "^4.0.1",
     "@types/gtag.js": "^0.0.12",
@@ -91,7 +91,7 @@
     "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.0",
     "sass": "^1.63.0",
-    "storybook": "^7.0.20",
+    "storybook": "^7.1.0",
     "svelte": "^3.59.1",
     "svelte-loader": "^3.1.8",
     "svelte-preprocess": "^5.0.4",

src/actions/cssVariables/cssVariables.stories.mdx

@@ -9,7 +9,7 @@ import { parameters } from '$docs/utils/docsPage.js';
 
 An action you can use to easily set [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on HTML elements. Useful for passing JavaScript values to your component SCSS like this:
 
-```html
+```svelte
 <script>
   import { cssVariables } from '@reuters-graphics/graphics-components';
 

src/components/Analytics/stories/docs/component.md

@@ -1,6 +1,6 @@
 Add Google and Chartbeat analytics to your page.
 
-```html
+```svelte
 <script>
   import { Analytics } from '@reuters-graphics/graphics-components';
 

src/components/Analytics/stories/docs/environments.md

@@ -4,7 +4,7 @@ In a SvelteKit context, you can use `$app` stores to restrict when you send anal
 
 For example, the following excludes analytics from pages in development or hosted on our preview server:
 
-```html
+```svelte
 <script>
   import { Analytics } from '@reuters-graphics/graphics-components';
   import { dev } from '$app/environment';
@@ -12,6 +12,6 @@ For example, the following excludes analytics from pages in development or hoste
 </script>
 
 {#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
-<Analytics />
+  <Analytics />
 {/if}
 ```

src/components/Analytics/stories/docs/multipage.md

@@ -4,7 +4,7 @@ This component also exports a function you can call to register pageviews.
 
 For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
 
-```html
+```svelte
 <script>
   import {
     Analytics,

src/components/Article/stories/docs/component.md

@@ -2,7 +2,7 @@ The `Article` component contains all the content of our story and also establish
 
 > 📌 In most cases, **you won't need to mess with the `Article` component** because it's already included in our rigs for you!
 
-```html
+```svelte
 <script>
   import { Article } from '@reuters-graphics/graphics-components';
 </script>

src/components/Article/stories/docs/customWellWidths.md

@@ -14,23 +14,29 @@ When combined with the `Block` component, you can set custom column widths by pa
 
 > **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories.
 
-```html
+```svelte
 <Article
-  columnWidths={{ narrower: 310, narrow: 450, normal: 550, wide: 675, wider: 1400 }}
+  columnWidths="{{
+    narrower: 310,
+    narrow: 450,
+    normal: 550,
+    wide: 675,
+    wider: 1400,
+  }}"
 >
-  <Block width='narrower' />
-  <Block width='narrow' />
-  <Block width='normal' />
-  <Block width='wide' />
-  <Block width='wider' />
-  <Block width='widest' />
-  <Block width='fluid' />
+  <Block width="narrower" />
+  <Block width="narrow" />
+  <Block width="normal" />
+  <Block width="wide" />
+  <Block width="wider" />
+  <Block width="widest" />
+  <Block width="fluid" />
 </Article>
 ```
 
 If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
 
-```html
+```svelte
 <div class="my-special-container">
   <!-- Stuffs... -->
 </div>
@@ -44,7 +50,7 @@ If you're not using our `Block` component, you can still inherit the column widt
 
 ... or you can make your component entirely configurable within the article well doing something like this:
 
-```html
+```svelte
 <script>
   export let width = 'normal';
 </script>

src/components/BeforeAfter/stories/docs/ariaDescriptions.md

@@ -2,7 +2,7 @@ Use text elements in your overlays as [ARIA descriptions](https://developer.mozi
 
 > **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need.
 
-```html
+```svelte
 <BeforeAfter
   beforeSrc="{`${assets}/images/before-after/myrne-before.jpg`}"
   beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."

src/components/BeforeAfter/stories/docs/component.md

@@ -1,6 +1,6 @@
 A before and after image comparison component.
 
-```html
+```svelte
 <script>
   import { BeforeAfter } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths'; // If using in the Graphics Kit

src/components/BeforeAfter/stories/docs/withOverlays.md

@@ -1,6 +1,6 @@
 Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below.
 
-```html
+```svelte
 <BeforeAfter
   beforeSrc="{`${assets}/images/before-after/myrne-before.jpg`}"
   beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."

src/components/Block/stories/docs/component.md

@@ -4,7 +4,7 @@ Blocks are stacked vertically within the well created by the [`Article`](./?path
 
 > 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
 
-```html
+```svelte
 <script>
   import { Block } from '@reuters-graphics/graphics-components';
 </script>

src/components/Block/stories/docs/customLayouts.md

@@ -2,7 +2,7 @@ Our article well is designed to provide a basic responsive layout for you, but i
 
 If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
 
-```html
+```svelte
 <Block width="fluid">
   <div class="my-radical-container">
     <!-- Now, you have full control! -->

src/components/Block/stories/docs/snapWidths.md

@@ -2,7 +2,7 @@ Normally, `Block` containers resize fluidly below the original `width`. Sometime
 
 You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down.
 
-```html
+```svelte
 <Block width="wider" snap="{true}">
   <!-- Your stuff for this block -->
 </Block>
@@ -10,7 +10,7 @@ You can use the `snap` prop to force the container to snap to each block width s
 
 If you want to skip certain block widths entirely, you can add one or more class of `skip-{block width class}` to the `Block`.
 
-```html
+```svelte
 <!-- Will skip wide and go straight to normal column width on resize. -->
 <Block width="wider" snap="{true}" class="skip-wide">
   <!-- Your stuff for this block -->
@@ -27,7 +27,7 @@ Snap width breakpoints are hard-coded to the default article well column widths,
 
 Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
 
-```html
+```svelte
 <Block width="wider" snap="{true}" class="custom-blocks">
   <!-- Your stuff for this block -->
 </Block>

src/components/BodyText/stories/docs/component.md

@@ -2,7 +2,7 @@ The `BodyText` creates the main text of your page. You can pass the `text` prop
 
 Use it like this:
 
-```html
+```svelte
 <script>
   import { BodyText } from '@reuters-graphics/graphics-components';
 
@@ -18,14 +18,16 @@ Use it like this:
 
 ... or more commonly, you'll use it with a Google doc in the Graphics Kit like this:
 
-```html
+```svelte
 <script>
   import { BodyText } from '@reuters-graphics/graphics-components';
 
   import content from '$locales/en/content.json';
 </script>
 
-{#each content.blocks as block} {#if block.Type === 'text'}
-<BodyText text="{block.Text}" />
-{/if} {/each}
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <BodyText text="{block.Text}" />
+  {/if}
+{/each}
 ```

src/components/DatawrapperChart/stories/docs/component.md

@@ -1,6 +1,6 @@
 Easily add a responsive Datawrapper embed on your page.
 
-```html
+```svelte
 <script>
   import { DatawrapperChart } from '@reuters-graphics/graphics-components';
 </script>

src/components/DocumentCloud/stories/docs/component.md

@@ -4,7 +4,7 @@ Embed a document hosted by [DocumentCloud](https://documentcloud.org)
 
 The document must have its access level set to public before it can be embedded. The `slug` argument can be found after the final slash in the document's URL. For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The slug is "3259984-Trump-Intelligence-Allegations".
 
-```html
+```svelte
 <script>
   import { DocumentCloud } from '@reuters-graphics/graphics-components';
 </script>

src/components/EmbedPreviewerLink/stories/docs/component.md

@@ -1,6 +1,6 @@
 An embed tool for development in graphics kit.
 
-```html
+```svelte
 <script>
   import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
 

src/components/FeaturePhoto/stories/docs/component.md

@@ -1,6 +1,6 @@
 A full-width photo inside the text well.
 
-```html
+```svelte
 <script>
   import { FeaturePhoto } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...

src/components/FeaturePhoto/stories/docs/quickit.md

@@ -9,7 +9,7 @@ AltText: The king of the sea
 Caption: Carcharodon carcharias - REUTERS
 ```
 
-```html
+```svelte
 <!-- App.svelte -->
 <script>
   // Add FeaturePhoto to imports from graphics-components
@@ -20,17 +20,19 @@ Caption: Carcharodon carcharias - REUTERS
   import { assets } from '$app/paths';
 </script>
 
-{#each content.blocks as block} {#if block.Type === 'text'}
-<!-- ... other blocks -->
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... other blocks -->
 
-<!-- Copy/paste into your blocks loop! -->
-{:else if block.Type === 'photo'}
-<FeaturePhoto
-  width="{block.Width}"
-  src="{`${assets}/${block.Src}`}"
-  altText="{block.AltText}"
-  caption="{block.Caption}"
-/>
-<!-- END copy/paste -->
-{/if} {/each}
+    <!-- Copy/paste into your blocks loop! -->
+  {:else if block.Type === 'photo'}
+    <FeaturePhoto
+      width="{block.Width}"
+      src="{`${assets}/${block.Src}`}"
+      altText="{block.AltText}"
+      caption="{block.Caption}"
+    />
+    <!-- END copy/paste -->
+  {/if}
+{/each}
 ```

src/components/Framer/stories/docs/component.md

@@ -1,6 +1,6 @@
 An embed tool for development in the Graphics Kit.
 
-```html
+```svelte
 <script>
   import { Framer } from '@reuters-graphics/graphics-components';
 

src/components/GraphicBlock/stories/docs/ai2svelte.md

@@ -1,6 +1,6 @@
 A more detailed example of using `GraphicBlock` with components created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
 
-```html
+```svelte
 <script>
   import { GraphicBlock } from '@reuters-graphics/graphics-components';
   import MyAiMap from './ai2svelte/my-map.svelte';

src/components/GraphicBlock/stories/docs/aria.md

@@ -4,7 +4,7 @@ The `ariaDescription` string will be processed as markdown, so you can add multi
 
 > **Note:** When you set an `ariaDescription`, your graphic will be automatically wrapped in a div that tells screen readers not to read the text in the graphic, but instead read the hidden ARIA description.
 
-```html
+```svelte
 <GraphicBlock
   width="normal"
   title="Earthquake in Haiti"
@@ -22,7 +22,7 @@ You can add custom markup for screen readers only by using the `aria` named slot
 
 > **Note:** The `aria` slot will override the `ariaDescription` and will also hide the text in your graphic from screen readers.
 
-```html
+```svelte
 <GraphicBlock
   width="normal"
   title="Earthquake in Haiti"

src/components/GraphicBlock/stories/docs/component.md

@@ -4,7 +4,7 @@ Many other components use this one to wrap graphics with styled text. When you u
 
 ---
 
-```html
+```svelte
 <script>
   import { GraphicBlock } from '@reuters-graphics/graphics-components';
 </script>

src/components/GraphicBlock/stories/docs/customText.md

@@ -1,12 +1,12 @@
 You can override the markup used to generate the chart text elements by using the `title` and/or `notes` named slots like this:
 
-```html
+```svelte
 <GraphicBlock
   width="normal"
-  notes={"Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"}
+  notes="{'Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)'}"
 >
   <h5 slot="title">My smaller title</h5>
-  <div id="my-chart" />
+  <div id="my-chart"></div>
   <aside slot="notes">
     <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
   </aside>

src/components/GraphicBlock/stories/docs/quickit.md

@@ -2,7 +2,7 @@ For Graphics Kit users, the `GraphicBlock` component is built-in to handle [ai2s
 
 First, import your ai2svelte graphic in `App.svelte` and add it to the `aiCharts` object;
 
-```html
+```svelte
 <!-- App.svelte -->
 <script>
   // Other stuff...

src/components/Headline/stories/docs/component.md

@@ -1,6 +1,6 @@
 Reuters Graphics headline
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
 </script>

src/components/Headline/stories/docs/customHed.md

@@ -1,6 +1,6 @@
 Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
 </script>

src/components/Headline/stories/docs/withByline.md

@@ -1,6 +1,6 @@
 Add a byline and dateline with `byline` and `dateline` named slots.
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
 </script>

src/components/Headline/stories/docs/withCrown.md

@@ -1,6 +1,6 @@
 Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths';

src/components/Hero/docs.svx

@@ -17,7 +17,7 @@ slug: hero
 
 </section>
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-svelte-components';
   import { assets } from '$app/paths';
@@ -34,7 +34,7 @@ slug: hero
   </Hero>
 </DemoContainer>
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-svelte-components';
   import { assets } from '$app/paths';
@@ -66,7 +66,7 @@ slug: hero
   </Hero>
 </DemoContainer>
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-svelte-components';
   import { assets } from '$app/paths';

src/components/Hero/stories/docs/component.md

@@ -2,7 +2,7 @@
 
 Reuters Graphics headline
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
 </script>

src/components/Hero/stories/docs/withByline.md

@@ -1,6 +1,6 @@
 Add a byline and dateline with `byline` and `dateline` named slots.
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
 </script>

src/components/Hero/stories/docs/withCrown.md

@@ -1,6 +1,6 @@
 Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
 
-```html
+```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths';

src/components/NoteText/stories/docs/component.md

@@ -2,7 +2,7 @@ Note text includes notes to the main article — usually things like sources, cl
 
 Note text can be fed a markdown string, but text styling is intentionally restricted in this component. For example, all heading tags are forced to a single font size and weight.
 
-```html
+```svelte
 <script>
   import { NoteText } from '@reuters-graphics/graphics-components';
 

src/components/PaddingReset/stories/docs/component.md

@@ -2,7 +2,7 @@ Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep pa
 
 The `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
 
-```html
+```svelte
 <script>
   import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
 </script>
@@ -18,7 +18,7 @@ The `PaddingReset` component resets padding on the `Article` well that's been ca
 
 You can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.
 
-```html
+```svelte
 <script>
   import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
 

src/components/PhotoCarousel/stories/docs/component.md

@@ -1,6 +1,6 @@
 A simple, accessible photo carousel with lazy-loading and mobile swipe built in.
 
-```html
+```svelte
 <script>
   import { PhotoCarousel } from '@reuters-graphics/graphics-components';
 

src/components/PhotoCarousel/stories/docs/withCustom.md

@@ -1,6 +1,6 @@
 Use named slots to style your own custom credits and/or captions.
 
-```html
+```svelte
 <PhotoCarousel photos="{photos}">
   <p slot="credit" class="custom-credit" let:credit>{credit}</p>
   <p slot="caption" class="custom-caption" let:caption>{caption}</p>

src/components/PhotoPack/stories/docs/component.md

@@ -1,6 +1,6 @@
 The `PhotoPack` component makes simple photo grids with custom layouts at whatever breakpoint you need.
 
-```html
+```svelte
 <script>
   import { PhotoPack } from '@reuters-graphics/graphics-components';
 

src/components/PhotoPack/stories/docs/quickit.md

@@ -41,7 +41,7 @@ Gap: 10
 
 In your project, you can use the `getPhotoPackPropsFromDoc` utilty to easily convert the GoogleDoc format above into the props the `PhotoPack` component expects.
 
-```html
+```svelte
 <!-- App.svelte -->
 <script>
   import {
@@ -54,12 +54,14 @@ In your project, you can use the `getPhotoPackPropsFromDoc` utilty to easily con
   import { assets } from '$app/paths';
 </script>
 
-{#each content.blocks as block} {#if block.Type === 'text'}
-<!-- ... other blocks -->
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... other blocks -->
 
-<!-- Copy/paste into your blocks loop! -->
-{:else if block.Type === 'photo-pack'}
-<PhotoPack {...getPhotoPackPropsFromDoc(block, assets)} />
-<!-- END copy/paste -->
-{/if} {/each}
+    <!-- Copy/paste into your blocks loop! -->
+  {:else if block.Type === 'photo-pack'}
+    <PhotoPack {...getPhotoPackPropsFromDoc(block, assets)} />
+    <!-- END copy/paste -->
+  {/if}
+{/each}
 ```

src/components/PymChild/stories/docs/component.md

@@ -1,6 +1,6 @@
 A Pym.js child instance for embeddables.
 
-```html
+```svelte
 <script>
   import { PymChild } from '@reuters-graphics/graphics-components';
 </script>
@@ -10,7 +10,7 @@ A Pym.js child instance for embeddables.
 
 You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
 
-```html
+```svelte
 <script>
   import {
     PymChild,

src/components/ReferralBlock/stories/docs/component.md

@@ -4,7 +4,7 @@ The `ReferralBlock` component creates a set of referral links from recent dotcom
 >
 > You can get the section ID from the section page on dotcom. For example, the section ID for World - Europe stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
 
-```html
+```svelte
 <script>
   import { ReferralBlock } from '@reuters-graphics/graphics-components';
 </script>

src/components/ReutersGraphicsLogo/stories/docs/component.md

@@ -2,7 +2,7 @@ Reuters Graphics' official logo.
 
 > Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-reuterslogo--default) component.
 
-```html
+```svelte
 <script>
   import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
 </script>

src/components/ReutersLogo/stories/docs/component.md

@@ -1,6 +1,6 @@
 The official home of the Reuters logo.
 
-```html
+```svelte
 <script>
   import { ReutersLogo } from '@reuters-graphics/graphics-components';
 </script>

src/components/SEO/stories/docs/component.md

@@ -1,6 +1,6 @@
 The `SEO` component adds essential metadata to published pages.
 
-```html
+```svelte
 <script>
   import { SEO } from '@reuters-graphics/graphics-components';
 </script>

src/components/SEO/stories/docs/quickit.md

@@ -4,7 +4,7 @@ Most of the fields are filled in by other sources, like your Google Doc and pack
 
 > **IMPORTANT:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs.
 
-```html
+```svelte
 <script>
   import { SEO } from '@reuters-graphics/graphics-components';
   import pkg from '$pkg';

src/components/Scroller/stories/docs/ai2svelte.md

@@ -1,6 +1,6 @@
 A more detailed example of using `Scroller` with graphics created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
 
-```html
+```svelte
 <script>
   import { Scroller } from '@reuters-graphics/graphics-components';
 
@@ -69,7 +69,7 @@ AltText3: The same map now highlights three locations near 98th Street where som
 :end
 ```
 
-```html
+```svelte
 <!-- App.svelte -->
 <script>
   // Previos imports and stuff...
@@ -105,18 +105,20 @@ AltText3: The same map now highlights three locations near 98th Street where som
   ];
 </script>
 
-{#each content.blocks as block} {#if block.Type === 'text'}
-<!-- ... other blocks -->
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... other blocks -->
 
-<!-- Copy/paste into your blocks loop! -->
-{:else if block.Type === 'scroller' && block.ID === 'map-scrolly'}
-<Scroller
-  steps="{steps}"
-  backgroundWidth="fluid"
-  foregroundPosition="middle"
-  stackBackground="{true}"
-  embedded="{false}"
-/>
-<!-- END copy/paste -->
-{/if} {/each}
+    <!-- Copy/paste into your blocks loop! -->
+  {:else if block.Type === 'scroller' && block.ID === 'map-scrolly'}
+    <Scroller
+      steps="{steps}"
+      backgroundWidth="fluid"
+      foregroundPosition="middle"
+      stackBackground="{true}"
+      embedded="{false}"
+    />
+    <!-- END copy/paste -->
+  {/if}
+{/each}
 ```

src/components/Scroller/stories/docs/component.md

@@ -4,7 +4,7 @@ Check out the "Canvas" tab to play with the layout options available on this com
 
 > This component is designed to handle most common layouts for scrollytelling. If you need something more complex, though, you should probably use [svelte-scroller](https://github.com/sveltejs/svelte-scroller), which is a lower level component you can more easily customize.
 
-```html
+```svelte
 <script>
   import { Scroller } from '@reuters-graphics/graphics-components';
 

src/components/Scroller/stories/docs/interactive.md

@@ -2,7 +2,7 @@ Instead of just text, you can use any component in the foreground, too, and pass
 
 If you're making your own custom foreground component, remember to add alt text describing the background graphic.
 
-```html
+```svelte
 <script>
   // ...
   import MyCounter from './MyCounter.svelte';

src/components/Scroller/stories/docs/quickit.md

@@ -2,7 +2,7 @@ For Graphics Kit users, the `Scroller` component is built-in for scrollytelling
 
 First, import your ai2svelte graphics in `App.svelte` and add them to the `aiCharts` object;
 
-```html
+```svelte
 <!-- App.svelte -->
 <script>
   // Other stuff...

src/components/SearchInput/stories/docs/component.md

@@ -1,6 +1,6 @@
 Invite users to search for something.
 
-```html
+```svelte
 <script>
   import { SearchInput } from '@reuters-graphics/graphics-components';
 

src/components/Sharer/stories/docs/component.md

@@ -1,6 +1,6 @@
 Add share tools to a page.
 
-```html
+```svelte
 <script>
   import { Sharer } from '@reuters-graphics/graphics-components';
 </script>

src/components/SimpleTimeline/stories/docs/component.md

@@ -1,6 +1,6 @@
 A simple, clean text timeline.
 
-```html
+```svelte
 <script>
   import { SimpleTimeline } from '@reuters-graphics/graphics-components';
 

src/components/SiteFooter/stories/docs/component.md

@@ -2,7 +2,7 @@ Reuters dotcom site footer with graphics referrals, ported from [Raptor UI compo
 
 > **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
 
-```html
+```svelte
 <script>
   import { SiteFooter } from '@reuters-graphics/graphics-components';
 </script>

src/components/SiteFooter/stories/docs/customReferrals.md

@@ -1,6 +1,6 @@
 Pass up to four custom referrals to the `referrals` prop.
 
-```html
+```svelte
 <script>
   import { SiteFooter } from '@reuters-graphics/graphics-components';
 

src/components/SiteFooter/stories/docs/darkTheme.md

@@ -1,6 +1,6 @@
 Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
 
-```html
+```svelte
 <script>
   import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
 </script>

src/components/SiteHeader/stories/docs/component.md

@@ -4,7 +4,7 @@ Reuters dotcom site header, ported from [Raptor UI components](https://github.co
 
 > **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
 
-```html
+```svelte
 <script>
   import { SiteHeader } from '@reuters-graphics/graphics-components';
 </script>

src/components/SiteHeader/stories/docs/darkTheme.md

@@ -1,6 +1,6 @@
 Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
 
-```html
+```svelte
 <script>
   import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
 </script>

src/components/SiteHeadline/stories/docs/component.md

@@ -2,7 +2,7 @@ A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
 
 Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages.
 
-```html
+```svelte
 <script>
   import { SiteHeadline } from '@reuters-graphics/graphics-components';
 </script>

src/components/SiteHeadline/stories/docs/quickit.md

@@ -10,7 +10,7 @@ Published: 2022-09-12T08:30:00.000Z
 Updated:
 ```
 
-```html
+```svelte
 <!-- App.svelte -->
 <script>
   import { SiteHeadline } from '@reuters-graphics/graphics-components';

src/components/Spinner/stories/docs/component.md

@@ -1,6 +1,6 @@
 Simple loading spinner. Use it to help hide long loading times for components that may be loading expensive media files or crunching through lots of data.
 
-```html
+```svelte
 <script>
   import { Spinner } from '@reuters-graphics/graphics-components';
 
@@ -8,8 +8,8 @@ Simple loading spinner. Use it to help hide long loading times for components th
 </script>
 
 {#if somethingsLoading}
-<Spinner />
+  <Spinner />
 {:else}
-<p>The real deal is here.</p>
+  <p>The real deal is here.</p>
 {/if}
 ```

src/components/Table/stories/docs/both.md

@@ -1,6 +1,6 @@
 Feel free to both search and filter.
 
-```html
+```svelte
 <table
   data="{yourData}"
   searchable="{true}"
@@ -9,5 +9,5 @@ Feel free to both search and filter.
   title="{'Press Freedom Index'}"
   dek="{'Reporters Without Borders ranks countries based on their level of press freedom using criteria such as the degree of media pluralism and violence against journalists.'}"
   source="{'Source: Reporters Without Borders'}"
-/>
+></table>
 ```

src/components/Table/stories/docs/component.md

@@ -2,7 +2,7 @@ Present structured data in a table. Consider making it interactive.
 
 ---
 
-```html
+```svelte
 <script>
   import { Table } from '@reuters-graphics/graphics-components';
 
@@ -10,5 +10,5 @@ Present structured data in a table. Consider making it interactive.
   import yourData from './stories/homeRuns.json';
 </script>
 
-<table data="{yourData}" />
+<table data="{yourData}"></table>
 ```

src/components/Table/stories/docs/filter.md

@@ -1,11 +1,11 @@
 Allow users to filter the table by providing one of the attributes as the `filterField`. This works best with categorical columns.
 
-```html
+```svelte
 <table
   data="{yourData}"
   filterField="{'Region'}"
   paginated="{true}"
   title="{'Press Freedom Index'}"
   notes="{'Source: Reporters Without Borders'}"
-/>
+></table>
 ```

src/components/Table/stories/docs/format.md

@@ -2,7 +2,7 @@ Format column values by supplying functions keyed to field names with the `field
 
 Among other things, this feature can be used to provide a unit of measurement with numeric fields.
 
-```html
+```svelte
 <script lang="ts">
   const fieldFormatters = {
     'Net worth (in billions)': (v) => '$' + v.toFixed(1),
@@ -17,5 +17,5 @@ Among other things, this feature can be used to provide a unit of measurement wi
   sortDirection="{'descending'}"
   title="{'The Richest Women in the World'}"
   source="{'Source: Forbes'}"
-/>
+></table>
 ```

src/components/Table/stories/docs/metadata.md

@@ -1,6 +1,6 @@
 Set the `title`, `dek`, `notes` and `source` options to add supporting metadata above and below the table.
 
-```html
+```svelte
 <Table data="{yourData}" title="{'Career home run leaders'}" dek="{'In baseball,
 a home run (also known as a "dinger" or "tater") occurs when a batter hits the
 ball over the outfield fence. When a home run is hit, the batter and any runners

src/components/Table/stories/docs/paginate.md

@@ -4,11 +4,11 @@ When it is enabled, readers can leaf through the data using a set of buttons bel
 
 This is a good option when publishing large tables for readers to explore. It works well with interactive features like searching and filters.
 
-```html
+```svelte
 <table
   data="{yourData}"
   paginated="{true}"
   title="{'Press Freedom Index'}"
   source="{'Reporters Without Borders'}"
-/>
+></table>
 ```

src/components/Table/stories/docs/search.md

@@ -1,11 +1,11 @@
 Allow users to search the table by setting the optional `searchable` variable. Modify the default text that appears in the box by supplying the `searchPlaceholder` option.
 
-```html
+```svelte
 <table
   data="{yourData}"
   searchable="{true}"
   paginated="{true}"
   title="{'Press Freedom Index'}"
   notes="{'Source: Reporters Without Borders'}"
-/>
+></table>
 ```

src/components/Table/stories/docs/sort.md

@@ -2,7 +2,7 @@ Allow users to sort the table by setting the `sortable` input. Specify the start
 
 By default, all fields are sortable. If you'd like to limit the columns where sorting is allowed, provide a list to the `sortableFields` option.
 
-```html
+```svelte
 <table
   data="{yourData}"
   sortable="{true}"
@@ -10,5 +10,5 @@ By default, all fields are sortable. If you'd like to limit the columns where so
   sortDirection="{'descending'}"
   title="{'Press Freedom Index'}"
   source="{'Source: Reporters Without Borders'}"
-/>
+></table>
 ```

src/components/Table/stories/docs/style.md

@@ -4,13 +4,13 @@ Like other components, you can apply labels by providing the `id` of `cls` optio
 
 Each column has a `data-field` attribute that contains the field's name. Use it to apply different styles to different fields. One common use is setting different text alignments on different columns.
 
-```html
+```svelte
 <table
   id="{'custom-table'}"
   data="{yourData}"
   title="{'The Richest Women in the World'}"
   source="{'Source: Forbes'}"
-/>
+></table>
 
 <style lang="scss">
   /* Here we right align the table's numeric column. */

src/components/Table/stories/docs/truncate.md

@@ -2,10 +2,10 @@ When your table has 10 or more rows, consider clipping it by setting the `trunca
 
 This is a good option for simple tables with row counts between 10 and 30. It works best when the table doesn't require interactivity.
 
-```html
+```svelte
 <table
   data="{yourData}"
   truncated="{true}"
   source="{'Source: Baseball Reference'}"
-/>
+></table>
 ```

src/components/Theme/stories/docs/component.md

@@ -1,6 +1,6 @@
 The `Theme` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All of the components in this library will use those CSS variables for styling by default.
 
-```html
+```svelte
 <script>
   import { Theme } from '@reuters-graphics/graphics-components';
 </script>

src/components/Theme/stories/docs/customise.md

@@ -8,14 +8,14 @@ Check out the "Control" column for `theme` in the properties table above to see
 
 > **Pro tip:** The `Theme` component only styles child components or elements, so if you're changing the background colour of your page, it's still a good idea to set a `background-color` on your `body` element in global SCSS.
 >
-> ```css
+> ```scss
 > // global.scss
 > body {
 >   background-color: #333;
 > }
 > ```
 
-```html
+```svelte
 <Theme
   base="dark"
   theme="{{

src/components/Theme/stories/docs/inheritance.md

@@ -2,7 +2,7 @@ Styles that use `Theme`'s CSS variables will always use those set by the nearest
 
 The demo below shows a more complex example of nesting themes, but more likely you'll so something like this:
 
-```html
+```svelte
 <script>
   import { Theme } from '@reuters-graphics/graphics-components';
 </script>

src/components/Theme/stories/docs/pattern.md

@@ -1,6 +1,6 @@
 To use a background pattern or image, set the background colour property in your custom theme to `transparent`...
 
-```html
+```svelte
 <Theme
   base="dark"
   theme="{{
@@ -13,7 +13,7 @@ To use a background pattern or image, set the background colour property in your
 
 ... then set your background image in global SCSS:
 
-```css
+```scss
 /* global.scss */
 body {
   background-color: darkblue;
@@ -23,7 +23,7 @@ body {
 
 You may also want to override the background on the header nav if it conflicts with your background, especially the dropdown menu:
 
-```css
+```scss
 /* global.scss
 Main nav container */
 .nav-container .inner {

src/components/ToolsHeader/stories/docs/component.md

@@ -2,7 +2,7 @@ A header for internal tooling sites.
 
 > **Note:** Don't use this component for public pages.
 
-```html
+```svelte
 <script>
   import { ToolsHeader } from '@reuters-graphics/graphics-components';
 </script>

src/components/Video/docs.svx

@@ -17,7 +17,7 @@ slug: video
 
 </section>
 
-```html
+```svelte
 <script>
   import { assets } from '$app/paths'; // helper if importing video from 'statics'
   import { Video } from '@reuters-graphics/graphics-svelte-components';
@@ -59,7 +59,7 @@ Here is an example of what the same video would look like with a visibility thre
 
 </section>
 
-```html
+```svelte
 <script>
   import { Video } from '@reuters-graphics/graphics-svelte-components';
 </script>
@@ -69,8 +69,7 @@ Here is an example of what the same video would look like with a visibility thre
   src="{'path-to-video-or-external-url'}"
   width="{'normal'}"
   loopVideo="{false}"
-  playVideoThreshold="{0.9}"
-/>
+  playVideoThreshold="{0.9}"></video>
 ```
 
 <DemoContainer>
@@ -109,7 +108,7 @@ Here is an example with bottom right corner white opaque controls, with a replay
 
 </section>
 
-```html
+```svelte
 <script>
   import { Video } from '@reuters-graphics/graphics-svelte-components';
 </script>
@@ -165,7 +164,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video
 
 </section>
 
-```html
+```svelte
 <script>
   import { Video } from '@reuters-graphics/graphics-svelte-components';
 </script>
@@ -177,8 +176,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video
   controlsOpacity="{1}"
   loopVideo="{false}"
   muteVideo="{false}"
-  allowSoundToAutoplay="{true}"
-/>
+  allowSoundToAutoplay="{true}"></video>
 ```
 
 <DemoContainer>

src/components/Video/stories/docs/component.md

@@ -1,6 +1,6 @@
 General-purpose video component. Can play on load or when the video comes into view and has play/pause controls. Supports videos with or without audio.
 
-```html
+```svelte
 <script>
   import { Video } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths'; // If using local video in the Graphics Kit
@@ -10,6 +10,5 @@ General-purpose video component. Can play on load or when the video comes into v
   ariaDescription="{'Compulsory description of your video for screen readers.'}"
   src="{`${assets}/videos/myVideo.mp4`}"
   width="{'wide'}"
-  caption="{'Optional caption for your video.'}"
-/>
+  caption="{'Optional caption for your video.'}"></video>
 ```

src/components/Video/stories/docs/controls.md

@@ -17,7 +17,7 @@ If you do want to leave the controls, you have a couple of options to style them
 
 Here is an example with bottom right corner white opaque controls, with a replay button, where you have to hover on the video to see the controls.
 
-```html
+```svelte
 <script>
   import { Video } from '@reuters-graphics/graphics-components';
 </script>
@@ -33,6 +33,5 @@ Here is an example with bottom right corner white opaque controls, with a replay
   controlsPosition="{'bottom right'}"
   separateReplayIcon="{true}"
   loopVideo="{false}"
-  hoverToSeeControls="{true}"
-/>
+  hoverToSeeControls="{true}"></video>
 ```

src/components/Video/stories/docs/playAndLoop.md

@@ -13,7 +13,7 @@
 
 Here is an example of what the same video would look like with a visibility threshold of 0.9 and not looping. Scroll down slowly to observe the behaviour.
 
-```html
+```svelte
 <script>
   import { Video } from '@reuters-graphics/graphics-components';
 </script>
@@ -23,6 +23,5 @@ Here is an example of what the same video would look like with a visibility thre
   src="{'path-to-video-or-external-url'}"
   width="{'normal'}"
   loopVideo="{false}"
-  playVideoThreshold="{0.9}"
-/>
+  playVideoThreshold="{0.9}"></video>
 ```

src/components/Video/stories/docs/withSound.md

@@ -19,7 +19,7 @@ This is probably not a behaviour you'd want anyway.
 The example below allows for autoplay if the user has interacted with the page before the video comes into view. To see this, reload the page
 and go to the top. Click anywhere on the page before scrolling down to the video and you should see it autoplay when it comes into view.
 
-```html
+```svelte
 <script>
   import { Video } from '@reuters-graphics/graphics-components';
 </script>
@@ -31,6 +31,5 @@ and go to the top. Click anywhere on the page before scrolling down to the video
   controlsOpacity="{1}"
   loopVideo="{false}"
   muteVideo="{false}"
-  allowSoundToAutoplay="{true}"
-/>
+  allowSoundToAutoplay="{true}"></video>
 ```

src/components/Visible/stories/docs/component.md

@@ -4,16 +4,16 @@ This is really useful for lazy loading elements, especially expensive media file
 
 > **Pro tip:** Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.
 
-```html
+```svelte
 <script>
   import { Visible } from '@reuters-graphics/graphics-components';
 </script>
 
 <Visible let:visible>
   {#if visible}
-  <p>Visible!</p>
+    <p>Visible!</p>
   {:else}
-  <p>Not yet visible.</p>
+    <p>Not yet visible.</p>
   {/if}
 </Visible>
 ```

src/docs/contributing/component-guidelines.stories.mdx

@@ -28,7 +28,7 @@ Here are a few examples:
 
 #### Typing simple props
 
-```html
+```svelte
 <script lang="ts">
   /** Height of the component */
   export let height: number = 250;
@@ -39,7 +39,7 @@ Here are a few examples:
 
 #### Documenting required props
 
-```html
+```svelte
 <script lang="ts">
   /**
    * Image source
@@ -56,7 +56,7 @@ Here are a few examples:
 
 #### Custom types for props
 
-```html
+```svelte
 <script lang="ts">
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
@@ -106,7 +106,7 @@ Always set [fallback values](https://developer.mozilla.org/en-US/docs/Web/CSS/Us
 
 Use SCSS with the `lang` attribute to write your styles.
 
-```html
+```svelte
 <button>My component</button>
 
 <style lang="scss">
@@ -120,7 +120,7 @@ Use SCSS with the `lang` attribute to write your styles.
 
 Styles should **always** be scoped to your components.
 
-```html
+```svelte
 <button>My component</button>
 
 <style lang="scss">
@@ -132,7 +132,7 @@ Styles should **always** be scoped to your components.
 
 In rare cases, you can use the SCSS `:global` operator to style child elements in your component, but those rules should still be scoped below a parent element.
 
-```html
+```svelte
 <svg></svg>
 
 <style lang="scss">
@@ -150,7 +150,7 @@ In rare cases, you can use the SCSS `:global` operator to style child elements i
 
 Use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and props to allow better theming of your components.
 
-```html
+```svelte
 <script>
   export let textColour = '#333';
 </script>

src/docs/contributing/story-recipes/basic-story.stories.mdx

@@ -14,7 +14,7 @@ To make a basic story, you'll need to setup a few things from storybook's Svelte
 
 Once you've setup the `Meta` and `Template` components as below, you can write a `Story` component with an `args` prop. In that `args` prop you can pass values that will be used to fill in your component's props.
 
-```html
+```svelte
 <!-- YourComponent.stories.svelte -->
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
@@ -22,7 +22,7 @@ Once you've setup the `Meta` and `Template` components as below, you can write a
   import YourComponent from './YourComponent.svelte';
 </script>
 
-<Meta title="Components/YourComponent" component="{YourComponent}"></Meta>
+<Meta title="Components/YourComponent" component="{YourComponent}" />
 
 <Template let:args>
   <YourComponent {...args} />
@@ -38,13 +38,13 @@ Once you've setup the `Meta` and `Template` components as below, you can write a
 
 For example, the `width` property in the `Story` args above would be passed to your component as though you'd written it like this:
 
-```html
+```svelte
 <YourComponent width="normal" />
 ```
 
 You can define additional stories with _different_ args to show how your component will render with different props like:
 
-```html
+```svelte
 <!-- ... -->
 
 <Story
@@ -64,7 +64,7 @@ You can define additional stories with _different_ args to show how your compone
 
 If you want even more control, you can skip the `args` and pass your component directly into the `Story` with whatever props you need:
 
-```html
+```svelte
 <Story name="Super custom">
   <YourComponent
     width="fluid"

src/docs/contributing/story-recipes/story-with-custom-controls.stories.mdx

@@ -12,7 +12,7 @@ import { parameters } from '$docs/utils/docsPage.js';
 
 You can customise the controls in Storybook's built-in [controls panel](https://storybook.js.org/docs/svelte/essentials/controls) by passing [argTypes](https://storybook.js.org/docs/svelte/api/argtypes) to `Meta` like this:
 
-```html
+```svelte
 <!-- YourComponent.stories.svelte -->
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
@@ -36,7 +36,7 @@ You can customise the controls in Storybook's built-in [controls panel](https://
   };
 </script>
 
-<Meta title="Components/YourComponent" component="{YourComponent}" {...meta}></Meta>
+<Meta title="Components/YourComponent" component="{YourComponent}" {...meta} />
 
 <template let:args>
   <YourComponent {...args} />

src/docs/contributing/story-recipes/story-with-custom-docs.stories.mdx

@@ -30,7 +30,7 @@ YourComponent/
 
 Now, import your markdown file in your story page component and attach it to either the `Meta` (for the top docs that introduce your component) or any individual `Story` using one of our handy docs utils.
 
-```html
+```svelte
 <!-- YourComponent.stories.svelte -->
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
@@ -49,7 +49,7 @@ Now, import your markdown file in your story page component and attach it to eit
   };
 </script>
 
-<Meta title="Components/YourComponent" component="{YourComponent}" {...meta}></Meta>
+<Meta title="Components/YourComponent" component="{YourComponent}" {...meta} />
 
 <template let:args>
   <YourComponent {...args} />
@@ -85,7 +85,7 @@ YourComponent/
 
 Now, import your snippet file in your story page component and attach it to any individual `Story` using our docs utils.
 
-```html
+```svelte
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
@@ -110,17 +110,23 @@ Now, import your snippet file in your story page component and attach it to any
 </template>
 
 <!-- Pass source in inside an object keyed by your snippet's language, e.g., svelte, scss, etc. -->
-<Story name="Basic" args="{{ width: 'normal' }}" {...withSource({ svelte:
-defaultSnippet })} />
+<Story
+  name="Basic"
+  args="{{ width: 'normal' }}"
+  {...withSource({ svelte: defaultSnippet })}
+/>
 ```
 
 > **Pro tip:** If you pass your source code in directly, the code won't change prop values when users play with Storybook's built-in [controls panel](https://storybook.js.org/docs/svelte/essentials/controls), so it's best to start with a default example using the generated source code.
 
 If you're adding source code AND custom docs to a story, you can chain `withSource` and `withComponentDocs` like this:
 
-```html
+```svelte
 <!-- ... -->
 
-<Story name="Extra wide" args="{{ width: 'wider' }}"
-{...withComponentDocs(componentDocs, withSource({ svelte: defaultSnippet }))} />
+<Story
+  name="Extra wide"
+  args="{{ width: 'wider' }}"
+  {...withComponentDocs(componentDocs, withSource({ svelte: defaultSnippet }))}
+/>
 ```

src/docs/contributing/story-recipes/story-with-media.stories.mdx

@@ -25,7 +25,7 @@ YourComponent/
 
 Now, import your media file directly in your code, which will resolve to the URL of the file.
 
-```html
+```svelte
 <!-- YourComponent.stories.svelte -->
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
@@ -36,7 +36,7 @@ Now, import your media file directly in your code, which will resolve to the URL
   import myImageSrc from './stories/imgs/myImage.jpg';
 </script>
 
-<Meta title="Components/YourComponent" component="{YourComponent}"></Meta>
+<Meta title="Components/YourComponent" component="{YourComponent}" />
 
 <template let:args>
   <YourComponent {...args} />

src/docs/guides/customising-with-scss.stories.mdx

@@ -57,7 +57,7 @@ But we need our style rule to _beat_ the original style in the CSS cascade, and
 
 The easiest way to make sure your style rule wins out is to <span class="highlight">add an ID either directly to the element or to a parent</span>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
 
-```css
+```scss
 figure#my-before-after .overlay-container {
   bottom: 0;
 }
@@ -67,7 +67,7 @@ Now our selector is more specific. We win!
 
 If you don't see a way to add an ID through a component's props, then just wrap the component in a `div` in your code:
 
-```html
+```svelte
 <div id="my-before-after">
   <BeforeAfter />
 </div>
@@ -75,7 +75,7 @@ If you don't see a way to add an ID through a component's props, then just wrap
 
 ... and use that, instead!
 
-```css
+```scss
 div#my-before-after figure .overlay-container {
   bottom: 0;
 }

src/docs/guides/google-docs.stories.mdx

@@ -13,7 +13,7 @@ It's usually easy to use a Google Doc to fill in the props for our components, b
 
 Let's look at a basic component, `ProfileCard`, with a demo that looks like this in the docs:
 
-```html
+```svelte
 <script>
   import { ProfileCard } from '@reuters-graphics/graphics-components';
 </script>
@@ -45,7 +45,7 @@ Staff: true
 
 Now we can tie that data into your blocks loop like this:
 
-```html
+```svelte
 <script>
   // These are usually already imported for you
   import { assets } from '$app/paths';

src/docs/guides/graphics-kit.stories.mdx

@@ -42,7 +42,7 @@ Remember, all references to images, videos and other media must be _absolute pat
 
 In most cases, that means you'll need to prefix relative paths with the special `assets` Svelte module. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
 
-```html
+```svelte
 <script>
   import content from '$locales/en/content.json';
   import { FeaturePhoto } from '@reuters-graphics/graphics-components';

src/docs/intro.stories.mdx

@@ -36,7 +36,7 @@ yarn add @reuters-graphics/graphics-components
 
 2. Checkout the [guides](?path=/docs/guides-using-these-docs--page), if you haven't, or dive straight into the docs to start using components.
 
-```html
+```svelte
 <script>
   import { BodyText } from '@reuters-graphics/graphics-components';
 </script>

src/docs/scss/css-variables.stories.mdx

@@ -13,7 +13,7 @@ Several [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_C
 >
 > **Note:** CSS variables do not currently affect [ai2svelte](https://github.com/reuters-graphics/ai2svelte/) graphics, so you should continue to make sure your colours match the theme of your page directly in Adobe Illustrator for those graphics.
 
-```html
+```svelte
 <p>My custom text</p>
 
 <style lang="scss">

src/docs/styles/intro.stories.mdx

@@ -13,7 +13,7 @@ This library also includes our main SCSS stylesheets with pre-defined classes yo
 
 Import the SCSS directly in your top-level component. (This is done for you in the Graphics Kit.)
 
-```html
+```svelte
 <!-- pages/index.svelte -->
 <script>
   // other imports and stuffs ...