@reuters-graphics/graphics-components 0.0.1-beta.8 → 0.0.2

package/dist/@types/components/Article/Article.svelte.d.ts

@@ -27,6 +27,7 @@ declare const __propDef: {
 export declare type ArticleProps = typeof __propDef.props;
 export declare type ArticleEvents = typeof __propDef.events;
 export declare type ArticleSlots = typeof __propDef.slots;
+/** `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) */
 export default class Article extends SvelteComponentTyped<ArticleProps, ArticleEvents, ArticleSlots> {
 }
 export {};

package/dist/@types/components/BeforeAfter/BeforeAfter.svelte.d.ts

@@ -52,6 +52,7 @@ declare const __propDef: {
 export declare type BeforeAfterProps = typeof __propDef.props;
 export declare type BeforeAfterEvents = typeof __propDef.events;
 export declare type BeforeAfterSlots = typeof __propDef.slots;
+/** `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-beforeafter--default) */
 export default class BeforeAfter extends SvelteComponentTyped<BeforeAfterProps, BeforeAfterEvents, BeforeAfterSlots> {
 }
 export {};

package/dist/@types/components/Block/Block.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
 export declare type BlockProps = typeof __propDef.props;
 export declare type BlockEvents = typeof __propDef.events;
 export declare type BlockSlots = typeof __propDef.slots;
+/** `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) */
 export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
 }
 export {};

package/dist/@types/components/BodyText/BodyText.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
 export declare type BodyTextProps = typeof __propDef.props;
 export declare type BodyTextEvents = typeof __propDef.events;
 export declare type BodyTextSlots = typeof __propDef.slots;
+/** `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) */
 export default class BodyText extends SvelteComponentTyped<BodyTextProps, BodyTextEvents, BodyTextSlots> {
 }
 export {};

package/dist/@types/components/DatawrapperChart/DatawrapperChart.svelte.d.ts

@@ -47,6 +47,7 @@ declare const __propDef: {
 export declare type DatawrapperChartProps = typeof __propDef.props;
 export declare type DatawrapperChartEvents = typeof __propDef.events;
 export declare type DatawrapperChartSlots = typeof __propDef.slots;
+/** `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DatawrapperChart--default) */
 export default class DatawrapperChart extends SvelteComponentTyped<DatawrapperChartProps, DatawrapperChartEvents, DatawrapperChartSlots> {
 }
 export {};

package/dist/@types/components/FeaturePhoto/FeaturePhoto.svelte.d.ts

@@ -38,6 +38,7 @@ declare const __propDef: {
 export declare type FeaturePhotoProps = typeof __propDef.props;
 export declare type FeaturePhotoEvents = typeof __propDef.events;
 export declare type FeaturePhotoSlots = typeof __propDef.slots;
+/** `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-FeaturePhoto--default) */
 export default class FeaturePhoto extends SvelteComponentTyped<FeaturePhotoProps, FeaturePhotoEvents, FeaturePhotoSlots> {
 }
 export {};

package/dist/@types/components/GraphicBlock/GraphicBlock.svelte.d.ts

@@ -59,6 +59,7 @@ declare const __propDef: {
 export declare type GraphicBlockProps = typeof __propDef.props;
 export declare type GraphicBlockEvents = typeof __propDef.events;
 export declare type GraphicBlockSlots = typeof __propDef.slots;
+/** `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-GraphicBlock--default) */
 export default class GraphicBlock extends SvelteComponentTyped<GraphicBlockProps, GraphicBlockEvents, GraphicBlockSlots> {
 }
 export {};

package/dist/@types/components/Headline/Headline.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
 export declare type HeadlineProps = typeof __propDef.props;
 export declare type HeadlineEvents = typeof __propDef.events;
 export declare type HeadlineSlots = typeof __propDef.slots;
+/** `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) */
 export default class Headline extends SvelteComponentTyped<HeadlineProps, HeadlineEvents, HeadlineSlots> {
 }
 export {};

package/dist/@types/components/NoteText/NoteText.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
 export declare type NoteTextProps = typeof __propDef.props;
 export declare type NoteTextEvents = typeof __propDef.events;
 export declare type NoteTextSlots = typeof __propDef.slots;
+/** `NoteText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-NoteText--default) */
 export default class NoteText extends SvelteComponentTyped<NoteTextProps, NoteTextEvents, NoteTextSlots> {
 }
 export {};

package/dist/@types/components/PhotoPack/PhotoPack.svelte.d.ts

@@ -45,6 +45,7 @@ declare const __propDef: {
 export declare type PhotoPackProps = typeof __propDef.props;
 export declare type PhotoPackEvents = typeof __propDef.events;
 export declare type PhotoPackSlots = typeof __propDef.slots;
+/** `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoPack--default) */
 export default class PhotoPack extends SvelteComponentTyped<PhotoPackProps, PhotoPackEvents, PhotoPackSlots> {
 }
 export {};

package/dist/@types/components/PymChild/PymChild.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
 export declare type PymChildProps = typeof __propDef.props;
 export declare type PymChildEvents = typeof __propDef.events;
 export declare type PymChildSlots = typeof __propDef.slots;
+/** `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/utilities-PymChild--default) */
 export default class PymChild extends SvelteComponentTyped<PymChildProps, PymChildEvents, PymChildSlots> {
 }
 export {};

package/dist/@types/components/ReutersLogo/ReutersLogo.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
 export declare type ReutersLogoProps = typeof __propDef.props;
 export declare type ReutersLogoEvents = typeof __propDef.events;
 export declare type ReutersLogoSlots = typeof __propDef.slots;
+/** `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersLogo--default) */
 export default class ReutersLogo extends SvelteComponentTyped<ReutersLogoProps, ReutersLogoEvents, ReutersLogoSlots> {
 }
 export {};

package/dist/@types/components/SEO/SEO.svelte.d.ts

@@ -1,11 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     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`.
+           * @required
+           * @type {string}
+           */ baseUrl?: string;
         /**
            * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
            * @required
            * @type {URL}
-           */ url?: URL | null;
+           */ pageUrl?: URL | null;
         /**
            * SEO title
            * @required
@@ -61,6 +67,7 @@ declare const __propDef: {
 export declare type SeoProps = typeof __propDef.props;
 export declare type SeoEvents = typeof __propDef.events;
 export declare type SeoSlots = typeof __propDef.slots;
+/** `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SEO--default) */
 export default class Seo extends SvelteComponentTyped<SeoProps, SeoEvents, SeoSlots> {
 }
 export {};

package/dist/@types/components/Scroller/Scroller.svelte.d.ts

@@ -71,6 +71,7 @@ declare const __propDef: {
 export declare type ScrollerProps = typeof __propDef.props;
 export declare type ScrollerEvents = typeof __propDef.events;
 export declare type ScrollerSlots = typeof __propDef.slots;
+/** `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Scroller--default) */
 export default class Scroller extends SvelteComponentTyped<ScrollerProps, ScrollerEvents, ScrollerSlots> {
 }
 export {};

package/dist/@types/components/Scroller/docProps.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentType } from 'svelte';
+interface BlockStep {
+    Background: string;
+    Text: string;
+}
+interface Block {
+    Type: string;
+    Width: string;
+    ForegroundPosition: string;
+    StackBackground?: string;
+    EmbeddedLayout?: string;
+    ID?: string;
+    Steps: BlockStep[];
+}
+interface AiCharts {
+    [key: string]: ComponentType;
+}
+export declare const getScrollerPropsFromDoc: (docBlock: Block, aiCharts: AiCharts, assetsPath?: string) => {
+    id: string;
+    backgroundWidth: string;
+    foregroundPosition: string;
+    stackBackground: boolean;
+    embeddedLayout: string;
+    steps: {
+        background: ComponentType<import("svelte").SvelteComponentTyped<any, any, any>>;
+        backgroundProps: {
+            assetsPath: string;
+        };
+        foreground: string;
+    }[];
+};
+export {};

package/dist/@types/components/SiteFooter/SiteFooter.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
 export declare type SiteFooterProps = typeof __propDef.props;
 export declare type SiteFooterEvents = typeof __propDef.events;
 export declare type SiteFooterSlots = typeof __propDef.slots;
+/** `SiteFooter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteFooter--default) */
 export default class SiteFooter extends SvelteComponentTyped<SiteFooterProps, SiteFooterEvents, SiteFooterSlots> {
 }
 export {};

package/dist/@types/components/SiteHeader/SiteHeader.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
 export declare type SiteHeaderProps = typeof __propDef.props;
 export declare type SiteHeaderEvents = typeof __propDef.events;
 export declare type SiteHeaderSlots = typeof __propDef.slots;
+/** `SiteHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteHeader--default) */
 export default class SiteHeader extends SvelteComponentTyped<SiteHeaderProps, SiteHeaderEvents, SiteHeaderSlots> {
 }
 export {};

package/dist/@types/components/Spinner/Spinner.svelte.d.ts

@@ -23,6 +23,7 @@ declare const __propDef: {
 export declare type SpinnerProps = typeof __propDef.props;
 export declare type SpinnerEvents = typeof __propDef.events;
 export declare type SpinnerSlots = typeof __propDef.slots;
+/** `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Spinner--default) */
 export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
 }
 export {};

package/dist/@types/components/Theme/Theme.svelte.d.ts

@@ -49,6 +49,7 @@ declare const __propDef: {
 export declare type ThemeProps = typeof __propDef.props;
 export declare type ThemeEvents = typeof __propDef.events;
 export declare type ThemeSlots = typeof __propDef.slots;
+/** `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/theming-Theme--default) */
 export default class Theme extends SvelteComponentTyped<ThemeProps, ThemeEvents, ThemeSlots> {
 }
 export {};

package/dist/@types/components/Video/Video.svelte.d.ts

@@ -41,6 +41,7 @@ declare const __propDef: {
 export declare type VideoProps = typeof __propDef.props;
 export declare type VideoEvents = typeof __propDef.events;
 export declare type VideoSlots = typeof __propDef.slots;
+/** `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Video--default) */
 export default class Video extends SvelteComponentTyped<VideoProps, VideoEvents, VideoSlots> {
 }
 export {};

package/dist/@types/components/Visible/Visible.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
 export declare type VisibleProps = typeof __propDef.props;
 export declare type VisibleEvents = typeof __propDef.events;
 export declare type VisibleSlots = typeof __propDef.slots;
+/** `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Visible--default) */
 export default class Visible extends SvelteComponentTyped<VisibleProps, VisibleEvents, VisibleSlots> {
 }
 export {};

package/dist/@types/index.d.ts

@@ -23,4 +23,5 @@ export { default as Spinner } from "./components/Spinner/Spinner.svelte";
 export { default as Video } from "./components/Video/Video.svelte";
 export { default as Visible } from "./components/Visible/Visible.svelte";
 export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps.js";
+export { getScrollerPropsFromDoc } from "./components/Scroller/docProps.js";
 export { default as Theme, themes } from "./components/Theme/Theme.svelte";

package/dist/components/Article/Article.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) -->
 <script>/** Set to true for embeddables. */
 export let embedded = false;
 /** Add an id to the article tag to target it with custom CSS. */

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -1,3 +1,4 @@
+<!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-beforeafter--default) -->
 <script>import { throttle } from 'lodash-es';
 import { onMount } from 'svelte';
 import Block from '../Block/Block.svelte';

package/dist/components/Block/Block.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) -->
 <script>/** Width of the block within the article well. */
 export let width = 'normal';
 /** Add an id to the block tag to target it with custom CSS. */

package/dist/components/BodyText/BodyText.svelte

@@ -1,3 +1,4 @@
+<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) -->
 <script>/**
  * A markdown text string.
  * @type {string}
@@ -190,4 +191,4 @@ import Block from '../Block/Block.svelte';
 }
 :global(div.article-block.body-text.font-sans) {
   font-family: var(--theme-font-family-sans-serif, var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif)) !important;
-}</style>
+}</style>

package/dist/components/DatawrapperChart/DatawrapperChart.svelte

@@ -1,3 +1,4 @@
+<!-- @component `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DatawrapperChart--default) -->
 <script>import { onMount, onDestroy } from 'svelte';
 import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
 /**

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -1,3 +1,4 @@
+<!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-FeaturePhoto--default) -->
 <script>import { onMount } from 'svelte';
 import Block from '../Block/Block.svelte';
 import PaddingReset from '../PaddingReset/PaddingReset.svelte';

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -1,3 +1,4 @@
+<!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-GraphicBlock--default) -->
 <script>/**
  * Width of the component within the text well.
  * @type {string}

package/dist/components/Headline/Headline.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
 <script>/**
  * Headline
  */

package/dist/components/NoteText/NoteText.svelte

@@ -1,3 +1,4 @@
+<!-- @component `NoteText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-NoteText--default) -->
 <script>/**
  * A markdown text string.
  * @type {string}
@@ -8,7 +9,7 @@ import { marked } from 'marked';
 import Block from '../Block/Block.svelte';
 </script>
 
-<Block cls="notes">
+<Block cls="notes mb-6">
   {#if text}
     {@html marked.parse(text)}
   {/if}

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -1,3 +1,4 @@
+<!-- @component `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoPack--default) -->
 <script>/**
  * Array of image objects
  * @required

package/dist/components/PymChild/PymChild.svelte

@@ -1,3 +1,4 @@
+<!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/utilities-PymChild--default) -->
 <script>/** Pym.js polling interval */
 export let polling = 500;
 import { onMount } from 'svelte';
@@ -7,4 +8,4 @@ let pymChild;
 onMount(() => {
     pymChild = new pym.Child({ polling });
 });
-</script>
+</script>

package/dist/components/ReutersLogo/ReutersLogo.svelte

@@ -1,3 +1,4 @@
+<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersLogo--default) -->
 <script>/** "Kinesis" colour */
 export let logoColour = '#FA6400';
 /** Text colour */

package/dist/components/SEO/SEO.svelte

@@ -1,11 +1,19 @@
+<!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SEO--default) -->
 <script>import analytics from './analytics';
 import publisherTags from './publisherTags';
+/**
+ * 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`.
+ * @required
+ * @type {string}
+ */
+export let baseUrl = '';
 /**
  * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
  * @required
  * @type {URL}
  */
-export let url = null;
+export let pageUrl = null;
 /**
  * SEO title
  * @required
@@ -59,9 +67,23 @@ export let authors = [];
  * Whether to inject Google Analytics code for this page.
  */
 export let includeAnalytics = false;
+const getOrigin = (baseUrl) => {
+    try {
+        return new URL(baseUrl).origin;
+    }
+    catch {
+        // This handles a weird case where Vite's base path is
+        // reset to './' after the app hydrates...
+        if (typeof window !== 'undefined')
+            return getOrigin(window.location.href);
+        return '';
+    }
+};
+$: origin = getOrigin(baseUrl);
+$: canonicalUrl = origin + pageUrl.pathname;
 // Only fire analytics on prod sites
 if (typeof window !== 'undefined' && includeAnalytics) {
-    analytics(url, seoTitle);
+    analytics(canonicalUrl, seoTitle);
     publisherTags();
 }
 const orgLdJson = {
@@ -81,10 +103,10 @@ const articleLdJson = {
     '@context': 'http://schema.org',
     '@type': 'NewsArticle',
     headline: seoTitle,
-    url: url.href,
+    url: canonicalUrl,
     mainEntityOfPage: {
         '@type': 'WebPage',
-        '@id': url.href,
+        '@id': canonicalUrl,
     },
     thumbnailUrl: shareImgPath,
     image: [
@@ -117,7 +139,7 @@ const articleLdJson = {
   <html lang="{lang}"></html>
   <title>{seoTitle}</title>
   <meta name="description" content="{seoDescription}" />
-  <link rel="canonical" href="{url.href}" />
+  <link rel="canonical" href="{canonicalUrl}" />
   <link
     rel="shortcut icon"
     type="image/x-icon"
@@ -142,7 +164,7 @@ const articleLdJson = {
     sizes="96x96"
   />
 
-  <meta property="og:url" content="{url.href}" />
+  <meta property="og:url" content="{canonicalUrl}" />
   <meta property="og:type" content="article" />
   <meta property="og:title" content="{shareTitle}" itemprop="name" />
   <meta
@@ -150,17 +172,13 @@ const articleLdJson = {
     content="{shareDescription}"
     itemprop="description"
   />
-  <meta
-    property="og:image"
-    content="{shareImgPath}"
-    itemprop="image"
-  />
+  <meta property="og:image" content="{shareImgPath}" itemprop="image" />
   <meta property="og:site_name" content="Reuters" />
 
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@ReutersGraphics" />
   <meta name="twitter:creator" content="@ReutersGraphics" />
-  <meta name="twitter:domain" content="{url.origin}" />
+  <meta name="twitter:domain" content="{origin}" />
   <meta name="twitter:title" content="{shareTitle}" />
   <meta name="twitter:description" content="{shareDescription}" />
   <meta name="twitter:image:src" content="{shareImgPath}" />

package/dist/components/Scroller/Scroller.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Scroller--default) -->
 <script>/**
  * ID of the scroller container
  * @type {string}
@@ -101,7 +102,7 @@ let progress;
       >
         <div class="scroller-graphic-well">
           <Block
-            width={backgroundWidth}
+            width="{backgroundWidth}"
             cls="background-container step-{index + 1}"
           >
             <Background
@@ -110,7 +111,7 @@ let progress;
               preload="{preload}"
               stackBackground="{stackBackground}"
             />
-        </Block>
+          </Block>
         </div>
       </div>
 

package/dist/components/Scroller/docProps.js

@@ -0,0 +1,14 @@
+export const getScrollerPropsFromDoc = (docBlock, aiCharts, assetsPath = '') => {
+    return {
+        id: docBlock.ID,
+        backgroundWidth: docBlock.Width,
+        foregroundPosition: docBlock.ForegroundPosition,
+        stackBackground: docBlock.StackBackground === 'true' || !docBlock.StackBackground,
+        embeddedLayout: docBlock.EmbeddedLayout,
+        steps: docBlock.Steps.map((step) => ({
+            background: aiCharts[step.Background],
+            backgroundProps: { assetsPath },
+            foreground: step.Text,
+        })),
+    };
+};

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -1,3 +1,4 @@
+<!-- @component `SiteFooter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteFooter--default) -->
 <script>import QuickLinks from './QuickLinks.svelte';
 import CompanyLinks from './CompanyLinks.svelte';
 import LegalLinks from './LegalLinks.svelte';
@@ -10,6 +11,7 @@ export let referrals = [];
 </script>
 
 <footer
+  class="my-0"
   style="{`
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
@@ -26,7 +28,7 @@ export let referrals = [];
 
 <!-- svelte-ignore css-unused-selector -->
 <style>footer {
-  margin-top: 4rem;
+  margin-top: 0;
   background-color: var(--nav-background, #fff);
 }
 footer div {

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { ReutersLogo } from '../../../index.js';
+  import ReutersLogo from '../../ReutersLogo/ReutersLogo.svelte';
   import CloseIcon from '../svgs/Close.svelte';
   import { normalizeUrl } from '../NavBar/utils/index.js';
 

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -1,4 +1,5 @@
-<script>import { ReutersLogo } from '../../index.js';
+<!-- @component `SiteHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteHeader--default) -->
+<script>import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
 import NavBar from './NavBar/index.svelte';
 import data from './data.json';
 import { setContext } from 'svelte';

package/dist/components/Spinner/Spinner.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Spinner--default) -->
 <script>/** Primary colour of the spinner. */
 export let colour = '#666';
 /**
@@ -20,7 +21,7 @@ export let containerPadding = 10;
 
 <div
   style:width="100%"
-  style:height={`${(width + (containerPadding * 2))}px`}
+  style:height="{`${width + containerPadding * 2}px`}"
   class="component-container"
 >
   <div

package/dist/components/Theme/Theme.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/theming-Theme--default) -->
 <script context="module">import light from './themes/light.js';
 import dark from './themes/dark.js';
 /**
@@ -17,18 +18,16 @@ export let theme = {};
  * explicitly set.
  */
 export let base = 'light';
-import cssVariables from '../../actions/cssVariables';
 import flatten from './utils/flatten';
 import mergeThemes from './utils/merge';
 /** @type {Theme} */
 $: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
+$: cssVariables = Object.entries(flatten({ theme: mergedTheme }))
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join(' ');
 </script>
 
-<div
-  class="theme"
-  style="display: contents;"
-  use:cssVariables="{flatten({ theme: mergedTheme })}"
->
+<div class="theme" style="{cssVariables}" style:display="contents">
   <!-- Clients can override the theme above by attaching custom properties to this element. -->
   <div class="theme-client-override" style="display: contents;">
     <!-- Themed content -->

package/dist/components/Theme/themes/dark.js

@@ -5,8 +5,8 @@ export default {
     'text-primary': '#ffffff',
     'text-secondary': 'rgb(255 255 255 / 60%)',
     accent: ' #ef3c2a',
-    'brand-logo': '#fa6400',
-    'brand-rules': '#999999',
+    'brand-logo': '#ffffff',
+    'brand-rules': 'rgb(255 255 255 / 25%)',
     'brand-shadow': 'rgb(255 255 255 / 10%)',
   },
   font: {

package/dist/components/Video/Video.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Video--default) -->
 <script>import IntersectionObserver from 'svelte-intersection-observer';
 import Controls from './Controls.svelte';
 import Block from '../Block/Block.svelte';
@@ -238,7 +239,7 @@ if (ariaHidden && !ariaDescription) {
         </div>
       {/if}
       {#if caption}
-        <figcaption>{caption}</figcaption>
+        <div class="caption">{caption}</div>
       {/if}
     {/if}
   </div>
@@ -265,7 +266,7 @@ if (ariaHidden && !ariaDescription) {
   border: 0 !important;
 }
 
-figcaption {
+div.caption {
   font-size: 0.8rem;
   color: var(--theme-colour-text-secondary, #666666);
 }

package/dist/components/Visible/Visible.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Visible--default) -->
 <script>import { onMount } from 'svelte';
 /**
  * Whether to change visibility just once.

package/dist/index.js

@@ -31,3 +31,4 @@ export { default as Visible } from './components/Visible/Visible.svelte';
 
 // Utilities
 export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps.js';
+export { getScrollerPropsFromDoc } from './components/Scroller/docProps.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.2",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -15,7 +15,7 @@
     "postversion": "git push origin && git push origin --tags"
   },
   "license": "MIT",
-  "types": "dist/@types/index.d.ts",
+  "types": "./dist/@types/index.d.ts",
   "files": [
     "dist"
   ],
@@ -127,6 +127,7 @@
     "./components/Scroller/Embedded/index.svelte": "./dist/components/Scroller/Embedded/index.svelte",
     "./components/Scroller/Foreground.svelte": "./dist/components/Scroller/Foreground.svelte",
     "./components/Scroller/Scroller.svelte": "./dist/components/Scroller/Scroller.svelte",
+    "./components/Scroller/docProps.ts": "./dist/components/Scroller/docProps.ts",
     "./components/Sharer/Sharer.svelte": "./dist/components/Sharer/Sharer.svelte",
     "./components/Sharer/utils/copyToClipboard": "./dist/components/Sharer/utils/copyToClipboard.js",
     "./components/Sharer/utils/facebook": "./dist/components/Sharer/utils/facebook.js",