"}function selectOrGenerateDivByClass(className,selectParentOrOnlyChildren){var onlyChildren=type(selectParentOrOnlyChildren)==TYPES.b,selectParent=onlyChildren?_hostElement:selectParentOrOnlyChildren||_hostElement;return _domExists&&!selectParent[LEXICON.l]?null:_domExists?selectParent[onlyChildren?"children":"find"](_strDot+className.replace(/\s/g,_strDot)).eq(0):FRAMEWORK(generateDiv(className))}function getObjectPropVal(obj,path){for(var val,splits=path.split(_strDot),i=0;i0&&(optsIsPlainObj?FRAMEWORK.each(pluginTargetElements,(function(i,v){(inst=v)!==undefined$1&&arr.push(OverlayScrollbarsInstance(inst,options,extensions,_pluginsGlobals,_pluginsAutoUpdateLoop))})):FRAMEWORK.each(pluginTargetElements,(function(i,v){inst=INSTANCES(v),("!"===options&&_plugin.valid(inst)||COMPATIBILITY.type(options)==TYPES.f&&options(v,inst)||options===undefined$1)&&arr.push(inst)})),result=1===arr[LEXICON.l]?arr[0]:arr),result):optsIsPlainObj||!options?result:arr},_plugin.globals=function(){initOverlayScrollbarsStatics();var globals=FRAMEWORK.extend(!0,{},_pluginsGlobals);return delete globals.msie,globals},_plugin.defaultOptions=function(newDefaultOptions){initOverlayScrollbarsStatics();var currDefaultOptions=_pluginsGlobals.defaultOptions;if(newDefaultOptions===undefined$1)return FRAMEWORK.extend(!0,{},currDefaultOptions);_pluginsGlobals.defaultOptions=FRAMEWORK.extend(!0,{},currDefaultOptions,_pluginsOptions._validate(newDefaultOptions,_pluginsOptions._template,!0,currDefaultOptions)._default)},_plugin.valid=function(osInstance){return osInstance instanceof _plugin&&!osInstance.getState().destroyed},_plugin.extension=function(extensionName,extension,defaultOptions){var extNameTypeString=COMPATIBILITY.type(extensionName)==TYPES.s,argLen=arguments[LEXICON.l],i=0;if(argLen<1||!extNameTypeString)return FRAMEWORK.extend(!0,{length:_pluginsExtensions[LEXICON.l]},_pluginsExtensions);if(extNameTypeString)if(COMPATIBILITY.type(extension)==TYPES.f)_pluginsExtensions.push({name:extensionName,extensionFactory:extension,defaultOptions:defaultOptions});else for(;i<_pluginsExtensions[LEXICON.l];i++)if(_pluginsExtensions[i].name===extensionName){if(!(argLen>1))return FRAMEWORK.extend(!0,{},_pluginsExtensions[i]);_pluginsExtensions.splice(i,1)}},_plugin}();return JQUERY&&JQUERY.fn&&(JQUERY.fn.overlayScrollbars=function(options,extensions){var _elements=this;return JQUERY.isPlainObject(options)?(JQUERY.each(_elements,(function(){PLUGIN(this,options,extensions)})),_elements):PLUGIN(_elements,options)}),PLUGIN}(global,global.document,void 0)}(OverlayScrollbars$1);var OverlayScrollbars=OverlayScrollbars$1.exports,OverlayScrollbarsComponent=function OverlayScrollbarsComponent(_a){var _a$options=_a.options,options=void 0===_a$options?{}:_a$options,extensions=_a.extensions,className=_a.className,children=_a.children,rest=Object(_index_b45716e8_js__WEBPACK_IMPORTED_MODULE_22__.i)(_a,["options","extensions","className","children"]),osTargetRef=Object(react__WEBPACK_IMPORTED_MODULE_23__.useRef)(),osInstance=Object(react__WEBPACK_IMPORTED_MODULE_23__.useRef)();return Object(react__WEBPACK_IMPORTED_MODULE_23__.useEffect)((function(){return osInstance.current=OverlayScrollbars(osTargetRef.current,options,extensions),mergeHostClassNames(osInstance.current,className),function(){OverlayScrollbars.valid(osInstance.current)&&(osInstance.current.destroy(),osInstance.current=null)}}),[]),Object(react__WEBPACK_IMPORTED_MODULE_23__.useEffect)((function(){OverlayScrollbars.valid(osInstance.current)&&osInstance.current.options(options)}),[options]),Object(react__WEBPACK_IMPORTED_MODULE_23__.useEffect)((function(){OverlayScrollbars.valid(osInstance.current)&&mergeHostClassNames(osInstance.current,className)}),[className]),react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",Object.assign({className:"os-host"},rest,{ref:osTargetRef}),react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-resize-observer-host"}),react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-padding"},react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-viewport"},react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-content"},children))),react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-scrollbar os-scrollbar-horizontal "},react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-scrollbar-track"},react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-scrollbar-handle"}))),react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-scrollbar os-scrollbar-vertical"},react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-scrollbar-track"},react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-scrollbar-handle"}))),react__WEBPACK_IMPORTED_MODULE_23___default.a.createElement("div",{className:"os-scrollbar-corner"}))};function mergeHostClassNames(osInstance,className){if(OverlayScrollbars.valid(osInstance)){var host=osInstance.getElements().host,regex=new RegExp("(^os-host([-_].+|)$)|".concat(osInstance.options().className.replace(/\s/g,"$|"),"$"),"g"),osClassNames=host.className.split(" ").filter((function(name){return name.match(regex)})).join(" ");host.className="".concat(osClassNames," ").concat(className||"")}}}}]);
\ No newline at end of file
diff --git a/docs/8.45653ed03d608fc0ec24.manager.bundle.js.LICENSE.txt b/docs/8.45653ed03d608fc0ec24.manager.bundle.js.LICENSE.txt
deleted file mode 100644
index cfda1d61..00000000
--- a/docs/8.45653ed03d608fc0ec24.manager.bundle.js.LICENSE.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-/*!
- * OverlayScrollbars
- * https://github.com/KingSora/OverlayScrollbars
- *
- * Version: 1.13.0
- *
- * Copyright KingSora | Rene Haas.
- * https://github.com/KingSora
- *
- * Released under the MIT license.
- * Date: 02.08.2020
- */
diff --git a/docs/9.42821f19fb40e6ca259a.manager.bundle.js b/docs/9.42821f19fb40e6ca259a.manager.bundle.js
deleted file mode 100644
index 0da08adf..00000000
--- a/docs/9.42821f19fb40e6ca259a.manager.bundle.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{942:function(module,exports){module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]);
\ No newline at end of file
diff --git a/docs/assets/Analytics.stories-b8768512.js b/docs/assets/Analytics.stories-b8768512.js
new file mode 100644
index 00000000..e5d4168a
--- /dev/null
+++ b/docs/assets/Analytics.stories-b8768512.js
@@ -0,0 +1,65 @@
+import{S as F,i as K,s as W,o as H,p as N,j as g,D as v,m as d,a as p,k as b,l as C,b as $,t as y,n as w,d as m,w as G,E as Q}from"./index-25af778d.js";import{p as V,M as Y,T as Z,S as I}from"./collect-stories-cce06d4a.js";import{w as J,a as E}from"./withParams-90715500.js";const P=`Add Google and Chartbeat analytics to your page.
+
+\`\`\`html
+\\n\\n\\n```\\n\"","export default \"Generally, you only want to send page analytics in production environments.\\n\\nIn a SvelteKit context, you can use `$app` stores to restrict when you send analytics.\\n\\nFor example, the following excludes analytics from pages in development or hosted on our preview server:\\n\\n```html\\n\\n\\n{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}\\n\\n{/if}\\n```\\n\"","export default \"If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.\\n\\nThis component also exports a function you can call to register pageviews.\\n\\nFor example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:\\n\\n```html\\n\\n\\n\\n```\\n\"","// Reuters Google Tag ID\nconst GOOGLE_TAG_ID = 'G-W3Q2X6NTNM';\n\nconst URL = `https://www.googletagmanager.com/gtag/js?id=${GOOGLE_TAG_ID}`;\n\nconst attachScript = () => {\n // If script is already attached, skip\n if (document.querySelector(`script[src=\"${URL}\"]`)) return;\n // ... else attach it.\n const e = document.createElement('script');\n const n = document.getElementsByTagName('script')[0];\n e.type = 'text/javascript';\n e.async = true;\n e.src = URL;\n n.parentNode.insertBefore(e, n);\n};\n\nexport default () => {\n try {\n window.dataLayer = window.dataLayer || [];\n if (!window.gtag) {\n attachScript();\n /** @type {Gtag.Gtag} */\n window.gtag = function() {\n window.dataLayer.push(arguments);\n };\n window.gtag('js', new Date());\n // config event registers a pageview by default\n window.gtag('config', GOOGLE_TAG_ID, {\n send_page_view: false,\n });\n registerPageview();\n }\n } catch (e) { console.warn(`Error initialising Google Analytics: ${e}`); }\n};\n\nexport const registerPageview = () => {\n if (typeof window === 'undefined' || !window.gtag) return;\n window.gtag('event', 'page_view', {\n page_location: window.location.origin + window.location.pathname,\n page_title: document?.title,\n });\n};\n","// Reuters Chartbeat UID\nconst UID = 52639;\n\nconst URL = '//static.chartbeat.com/js/chartbeat.js';\n\nconst attachScript = () => {\n // If script is already attached, skip\n if (document.querySelector(`script[src=\"${URL}\"]`)) return;\n // ... else attach it.\n const e = document.createElement('script');\n const n = document.getElementsByTagName('script')[0];\n e.type = 'text/javascript';\n e.async = true;\n e.src = URL;\n n.parentNode.insertBefore(e, n);\n};\n\nexport default (authors: { name: string }[]) => {\n window._sf_async_config = {\n uid: UID,\n domain: 'reuters.com',\n flickerControl: false,\n useCanonical: true,\n useCanonicalDomain: true,\n sections: 'Graphics',\n authors: authors.map((a) => a?.name || '').join(','),\n ...(window._sf_async_config || {}),\n };\n\n try {\n attachScript();\n } catch (e) { console.warn(`Error initialising Chartbeat Analytics: ${e}`); }\n};\n\nexport const registerPageview = () => {\n if (typeof window === 'undefined' || !window.pSUPERFLY) return;\n window.pSUPERFLY({\n path: window.location.pathname,\n title: document?.title,\n });\n};\n","\n\n\n\n","\n\n\n\n\n \n
Nothing to see here
\n\n\n\n\n\n \n
Nothing to see here
\n\n\n\n \n
Nothing to see here
\n\n"],"names":["componentDocs","environmentsDocs","multipageDocs","GOOGLE_TAG_ID","URL","attachScript","e","n","ga","registerPageview","UID","chartbeat","authors","a","$$props","onMount","ctx","insert","target","div","anchor","Analytics","withComponentDocs","story1_spread_levels","withStoryDocs","story2_spread_levels","dirty","get_spread_object","get_spread_update"],"mappings":"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"}
\ No newline at end of file
diff --git a/docs/assets/Article-06c782e7.js b/docs/assets/Article-06c782e7.js
new file mode 100644
index 00000000..2c965a51
--- /dev/null
+++ b/docs/assets/Article-06c782e7.js
@@ -0,0 +1,2 @@
+import{S as b,i as y,s as _,q as w,w as f,x as u,y as m,a as h,z as p,A as k,u as j,r as g,v,B as A,b as S,t as V,d as W}from"./index-25af778d.js";const E=(s,i)=>(Object.entries(i).forEach(([t,n])=>{s.style.setProperty(`--${t}`,n)}),{update(t){Object.entries(t).forEach(([n,o])=>{s.style.setProperty(`--${n}`,o),delete i[n]}),Object.keys(i).forEach(n=>{s.style.removeProperty(`--${n}`)}),i=t}});function O(s){let i,t,n,o,d,c;const r=s[6].default,a=w(r,s,s[5],null);return{c(){i=f("main"),t=f("article"),a&&a.c(),u(t,"id",s[1]),u(t,"role",s[2]),u(t,"class","svelte-jd0c2r"),m(t,"embedded",s[0])},m(e,l){h(e,i,l),p(i,t),a&&a.m(t,null),o=!0,d||(c=k(n=E.call(null,t,s[3])),d=!0)},p(e,[l]){a&&a.p&&(!o||l&32)&&j(a,r,e,e[5],o?v(r,e[5],l,null):g(e[5]),null),(!o||l&2)&&u(t,"id",e[1]),(!o||l&4)&&u(t,"role",e[2]),n&&A(n.update)&&l&8&&n.update.call(null,e[3]),(!o||l&1)&&m(t,"embedded",e[0])},i(e){o||(S(a,e),o=!0)},o(e){V(a,e),o=!1},d(e){e&&W(i),a&&a.d(e),d=!1,c()}}}function q(s,i,t){let n,{$$slots:o={},$$scope:d}=i,{embedded:c=!1}=i,{id:r=null}=i,{role:a=null}=i,{columnWidths:e={narrower:330,narrow:510,normal:660,wide:930,wider:1200}}=i;return s.$$set=l=>{"embedded"in l&&t(0,c=l.embedded),"id"in l&&t(1,r=l.id),"role"in l&&t(2,a=l.role),"columnWidths"in l&&t(4,e=l.columnWidths),"$$scope"in l&&t(5,d=l.$$scope)},s.$$.update=()=>{s.$$.dirty&16&&t(3,n={"narrower-column-width":e.narrower+"px","narrow-column-width":e.narrow+"px","normal-column-width":e.normal+"px","wide-column-width":e.wide+"px","wider-column-width":e.wider+"px"})},[c,r,a,n,e,d,o]}class C extends b{constructor(i){super(),y(this,i,q,O,_,{embedded:0,id:1,role:2,columnWidths:4})}}C.__docgen={version:3,name:"Article.svelte",data:[{keywords:[],visibility:"public",description:"Set to true for embeddables.",name:"embedded",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"Add an id to the article tag to target it with custom CSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"ARIA role of the article",name:"role",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"Set custom widths for the normal, wide and wider column dimensions",name:"columnWidths",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Article content",name:"default"}],refs:[]};export{C as A};
+//# sourceMappingURL=Article-06c782e7.js.map
diff --git a/docs/assets/Article-06c782e7.js.map b/docs/assets/Article-06c782e7.js.map
new file mode 100644
index 00000000..956500e2
--- /dev/null
+++ b/docs/assets/Article-06c782e7.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"Article-06c782e7.js","sources":["../../src/actions/cssVariables/index.js","../../src/components/Article/Article.svelte"],"sourcesContent":["// Shamelessly stolen from: https://github.com/kaisermann/svelte-css-vars\nexport default (node, props) => {\n Object.entries(props).forEach(([key, value]) => {\n node.style.setProperty(`--${key}`, value);\n });\n\n return {\n update(newProps) {\n Object.entries(newProps).forEach(([key, value]) => {\n node.style.setProperty(`--${key}`, value);\n delete props[key];\n });\n\n Object.keys(props).forEach((name) => {\n node.style.removeProperty(`--${name}`);\n });\n props = newProps;\n },\n };\n};\n","\n\n\n\n \n \n \n \n\n\n\n"],"names":["cssVariables","node","props","key","value","newProps","name","ctx","insert","target","main","anchor","append","article","embedded","$$props","id","role","columnWidths","columnWidthVars"],"mappings":"mJACA,MAAAA,EAAe,CAACC,EAAMC,KACpB,OAAO,QAAQA,CAAK,EAAE,QAAQ,CAAC,CAACC,EAAKC,CAAK,IAAM,CAC9CH,EAAK,MAAM,YAAY,KAAKE,IAAOC,CAAK,CAC5C,CAAG,EAEM,CACL,OAAOC,EAAU,CACf,OAAO,QAAQA,CAAQ,EAAE,QAAQ,CAAC,CAACF,EAAKC,CAAK,IAAM,CACjDH,EAAK,MAAM,YAAY,KAAKE,IAAOC,CAAK,EACxC,OAAOF,EAAMC,CAAG,CACxB,CAAO,EAED,OAAO,KAAKD,CAAK,EAAE,QAASI,GAAS,CACnCL,EAAK,MAAM,eAAe,KAAKK,GAAM,CAC7C,CAAO,EACDJ,EAAQG,CACT,CACL,iIC4BSE,EAAE,CAAA,CAAA,aAEAA,EAAI,CAAA,CAAA,4DAJfC,EAUMC,EAAAC,EAAAC,CAAA,EATJC,EAQSF,EAAAG,CAAA,8CAJYN,EAAe,CAAA,CAAA,CAAA,wGAH7BA,EAAE,CAAA,CAAA,wBAEAA,EAAI,CAAA,CAAA,0CACQA,EAAe,CAAA,CAAA,iKA9CzB,CAAA,SAAAO,EAAoB,EAAK,EAAAC,EAGzB,CAAA,GAAAC,EAAoB,IAAI,EAAAD,EAGxB,CAAA,KAAAE,EAAsB,IAAI,EAAAF,GAgB1B,aAAAG,EAAY,CACrB,SAAU,IACV,OAAQ,IACR,OAAQ,IACR,KAAM,IACN,MAAO,6NAKNC,EAAe,CAChB,wBAAyBD,EAAa,SAAW,KACjD,sBAAuBA,EAAa,OAAS,KAC7C,sBAAuBA,EAAa,OAAS,KAC7C,oBAAqBA,EAAa,KAAO,KACzC,qBAAsBA,EAAa,MAAQ"}
\ No newline at end of file
diff --git a/docs/assets/Article-1368930d.css b/docs/assets/Article-1368930d.css
new file mode 100644
index 00000000..f04906d3
--- /dev/null
+++ b/docs/assets/Article-1368930d.css
@@ -0,0 +1 @@
+article.svelte-jd0c2r{width:100%;display:block;margin:0;padding:0 15px;background-color:var(--theme-colour-background, transparent)}article.embedded.svelte-jd0c2r{overflow:auto}
diff --git a/docs/assets/Article.stories-59a2baab.css b/docs/assets/Article.stories-59a2baab.css
new file mode 100644
index 00000000..baa8e7cf
--- /dev/null
+++ b/docs/assets/Article.stories-59a2baab.css
@@ -0,0 +1 @@
+#article-story-basic,#article-column-widths-demo{width:calc(100% + 30px);margin-left:-15px}#article-column-widths-demo{background-color:#ddd;position:relative;margin-bottom:10px}#article-column-widths-demo .article-boundaries{padding:0;width:100%;height:100%;background-color:#bbb}#article-column-widths-demo .article-boundaries.custom div.article-block{background:rgb(211,132,123)}#article-column-widths-demo div.article-block{height:300px;background:#81a1c1;margin-bottom:2px;height:50px;padding-left:3px;color:#fff;font-size:12px}div.demo-container.svelte-1z127ee.svelte-1z127ee{height:300px;background:#ccc;position:relative;font-size:12px}div.demo-container.svelte-1z127ee .background-label.svelte-1z127ee{position:absolute;bottom:0;left:5px;color:#666}div.demo-container.svelte-1z127ee .padding-label.svelte-1z127ee{position:absolute;top:0;left:-17px}div.demo-container.svelte-1z127ee .padding-label span.svelte-1z127ee{font-size:18px}
diff --git a/docs/assets/Article.stories-b32e1f37.js b/docs/assets/Article.stories-b32e1f37.js
new file mode 100644
index 00000000..30434c87
--- /dev/null
+++ b/docs/assets/Article.stories-b32e1f37.js
@@ -0,0 +1,134 @@
+import{S as V,i as X,s as Y,p as L,j as $,D as v,m as u,a as h,k as q,l as F,b as f,t as w,n as p,d as _,w as H,x as U,E as Z,z as C,M as A}from"./index-25af778d.js";import{p as O,M as ee,T as te,S as R}from"./collect-stories-cce06d4a.js";import{A as x}from"./Article-06c782e7.js";import{B}from"./Block-9c89ee1a.js";const G=`The \`Article\` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
+
+> 📌 In most cases, **you won't need to mess with the \`Article\` component** because it's already included in our rigs for you!
+
+\`\`\`html
+\\n\\n\\n \\n\\n```\\n\"","export default \"The `Article` component also creates several column dimensions inside our article well. The standard widths of columns follow a basic class scheme:\\n\\n- `narrower` A bit narrower than narrow...\\n- `narrow` A bit narrower than the text column\\n- `normal` **The main width of the body text column**\\n- `wide` A bit wider than the text column\\n- `wider` A bit wider than wide...\\n- `widest` Edge-to-edge, but _excluding_ the left and right padding on `Article`\\n- `fluid` Fully edge-to-edge\\n\\n(Check out the below demo in the \\\"Canvas\\\" tab to better see the wider differences.)\\n\\nWhen combined with the `Block` component, you can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` column widths.\\n\\n> **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.\\n\\n```html\\n\\n \\n \\n \\n \\n \\n \\n \\n\\n```\\n\\nIf 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:\\n\\n```html\\n
\\n \\n
\\n\\n\\n```\\n\\n... or you can make your component entirely configurable within the article well doing something like this:\\n\\n```html\\n\\n\\n
\\n \\n
\\n\\n\\n```\\n\\nHere's an example of how custom\\\\* `columnWidths` can be used to change the article well columns:\\n\"","/**\n * Use custom source code in the \"Show code\" pull down.\n * @param {object} source Source code object, where key is the language of the source code and value is the code string.\n * @param {object} otherOptions Other props object options, allowing chaining with other methods like withStoryDocs\n * @returns props object including parameters\n */\nexport const withSource = (source, otherOptions = {}) => {\n const language = Object.keys(source)[0];\n const code = source[language];\n const docs = {\n ...otherOptions?.parameters?.docs,\n source: { code, language },\n };\n const parameters = { docs };\n return { parameters };\n};\n\n/**\n * Add custom documentation to a story.\n * @param {string} storyDocs Markdown string of docs\n * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource\n * @returns props object including parameters\n */\nexport const withStoryDocs = (storyDocs, otherOptions = {}) => {\n const docs = {\n ...otherOptions?.parameters?.docs,\n description: { story: storyDocs },\n };\n const parameters = { docs };\n return { parameters };\n};\n\n/**\n * Add custom documentation to the top of the component docs page.\n * @param {string} componentDocs Markdown string of docs\n * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource\n * @returns props object including parameters\n */\nexport const withComponentDocs = (componentDocs, otherOptions = {}) => {\n const docs = {\n ...otherOptions?.parameters?.docs,\n description: { component: componentDocs },\n };\n const parameters = { docs };\n return { parameters };\n};\n","\n\n\n\n\n \n\n\n\n \n
\n \n\n\n\n"],"names":["componentDocs","customWellWidthsDocs","withStoryDocs","storyDocs","otherOptions","_a","withComponentDocs","ctx","insert","target","div2","anchor","div","Article","story1_spread_levels","dirty","get_spread_object"],"mappings":"4TAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECAAC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECuBFC,EAAgB,CAACC,EAAWC,EAAe,KAAO,OAM7D,MAAO,CAAE,WADU,CAAE,KAJR,CACX,IAAGC,EAAAD,GAAA,YAAAA,EAAc,aAAd,YAAAC,EAA0B,KAC7B,YAAa,CAAE,MAAOF,CAAW,CACrC,EAEqB,CACrB,EAQaG,EAAoB,CAACN,EAAeI,EAAe,KAAO,OAMrE,MAAO,CAAE,WADU,CAAE,KAJR,CACX,IAAGC,EAAAD,GAAA,YAAAA,EAAc,aAAd,YAAAC,EAA0B,KAC7B,YAAa,CAAE,UAAWL,CAAe,CAC7C,EAEqB,CACrB,kCCpBeO,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA;8JAWfC,EAGKC,EAAAC,EAAAC,CAAA,qWAOuC,UAAQ,uEACV,QAAM,uEACrB,QAAM,uEACO,MAAI,uEACH,OAAK,uEACJ,QAAM,uEACP,OAAK,45BAP9CH,EAQKC,EAAAG,EAAAD,CAAA,m4BAauC,WAAS,uEACX,SAAO,uEACtB,SAAO,uEACM,OAAK,uEACJ,QAAM,uEACL,QAAM,uEACP,OAAK,m6BAP9CH,EAQKC,EAAAG,EAAAD,CAAA,yhCAfH,SAAU,IACV,OAAQ,IACR,OAAQ,IACR,KAAM,IACN,MAAO,8cA1CCE,CAAO,EACfP,EAAkBN,CAAa,wMAUjC,KAAA,CAAA,SAAU,GACV,GAAI,EAAE,4CAWuB,MAAAc,EAAA,CAAA,CAAA,KAAA,gBAAA,EAAAZ,EAAcD,CAAoB,CAAA,0UAvBrDY,CAAO,EACfE,EAAA,GAAAC,EAAAV,EAAkBN,CAAa,CAAA,mJAsBJgB,EAAAd,EAAcD,CAAoB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/docs/assets/BeforeAfter.stories-8d451e62.css b/docs/assets/BeforeAfter.stories-8d451e62.css
new file mode 100644
index 00000000..1f456486
--- /dev/null
+++ b/docs/assets/BeforeAfter.stories-8d451e62.css
@@ -0,0 +1 @@
+figure.before-after-container.svelte-35dp01.svelte-35dp01{overflow:hidden;position:relative;box-sizing:content-box;margin:0 auto}figure.before-after-container.svelte-35dp01 img.svelte-35dp01{top:0;left:0;z-index:20;margin:0;display:block;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:cover;object-fit:cover;position:absolute}figure.before-after-container.svelte-35dp01 img.after.svelte-35dp01{z-index:21}figure.before-after-container.svelte-35dp01 img.before.svelte-35dp01{z-index:22}figure.before-after-container.svelte-35dp01 .overlay-container.svelte-35dp01{position:absolute}figure.before-after-container.svelte-35dp01 .overlay-container.svelte-35dp01 p{font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);font-size:1rem;line-height:1.2rem}figure.before-after-container.svelte-35dp01 .overlay-container.svelte-35dp01 p:last-child{margin-bottom:0}figure.before-after-container.svelte-35dp01 .overlay-container.before.svelte-35dp01{left:0;z-index:23}figure.before-after-container.svelte-35dp01 .overlay-container.after.svelte-35dp01{right:0;z-index:21}.handle.svelte-35dp01.svelte-35dp01{z-index:30;width:40px;height:40px;cursor:move;background:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;border-radius:50px;top:calc(50% - 20px);border:4px solid var(--before-after-handle-colour);opacity:var(--before-after-handle-inactive-opacity, .6)}.handle.svelte-35dp01.svelte-35dp01:hover,.handle.svelte-35dp01.svelte-35dp01:active,.handle.svelte-35dp01.svelte-35dp01:focus{opacity:1}.handle.svelte-35dp01.svelte-35dp01:before,.handle.svelte-35dp01.svelte-35dp01:after{content:"";height:9999px;position:absolute;left:calc(50% - 2px);border:2px solid var(--before-after-handle-colour)}.handle.svelte-35dp01.svelte-35dp01:before{top:40px}.handle.svelte-35dp01.svelte-35dp01:after{bottom:40px}.handle.svelte-35dp01 .arrow-right.svelte-35dp01,.handle.svelte-35dp01 .arrow-left.svelte-35dp01{width:0;height:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border-top:10px solid transparent;border-bottom:10px solid transparent}.handle.svelte-35dp01 .arrow-right.svelte-35dp01{left:19px;bottom:14px;border-left:10px solid var(--before-after-handle-colour)}.handle.svelte-35dp01 .arrow-left.svelte-35dp01{left:3px;top:6px;border-right:10px solid var(--before-after-handle-colour)}aside.before-after-caption.svelte-35dp01.svelte-35dp01{margin:0 auto;font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-secondary, #666666)}aside.before-after-caption.svelte-35dp01 p{font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-secondary, #666666);font-size:.9rem;line-height:1.2rem}aside.before-after-caption.svelte-35dp01 p:last-of-type{margin-bottom:0}@media (max-width: 540px){aside.before-after-caption.svelte-35dp01 p{font-size:.8rem;line-height:1.1rem}}aside.before-after-caption.svelte-35dp01 p a{color:currentColor;text-decoration:underline}aside.before-after-caption.svelte-35dp01 p a:hover{text-decoration:underline}
diff --git a/docs/assets/BeforeAfter.stories-d078773c.js b/docs/assets/BeforeAfter.stories-d078773c.js
new file mode 100644
index 00000000..a69b7e30
--- /dev/null
+++ b/docs/assets/BeforeAfter.stories-d078773c.js
@@ -0,0 +1,163 @@
+import{S as Re,i as Be,s as De,e as Ce,a as k,N as R,b as g,g as x,t as w,c as ee,d as A,O as je,K as Ee,o as Ge,P as Qe,j as W,m as z,n as q,w as v,D as B,Q as Y,x as c,C as T,R as Je,z as O,T as Pe,U as be,V as ge,f as he,q as le,u as oe,r as fe,v as ce,p as te,k as ne,l as re,E as de,M as Ye}from"./index-25af778d.js";import{p as Ze,M as xe,T as et,S as se}from"./collect-stories-cce06d4a.js";import{B as tt}from"./Block-9c89ee1a.js";import{P as nt}from"./PaddingReset-d848e1b7.js";import{t as rt}from"./throttle-1cd3618f.js";import{a as Z,w as at}from"./withParams-90715500.js";const it=`A before and after image comparison component.
+
+\`\`\`html
+\\n\\n\\n```\\n\"","export default \"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.\\n\\n```html\\n\\n
\\n
July 7, 2020
\\n
Initially, this site was far smaller.
\\n
\\n
\\n
Oct. 20, 2020
\\n
But then forces built up.
\\n
\\n\\n\\n\\n```\\n\"","export default \"Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overly with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).\\n\\n> **💡 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.\\n\\n```html\\n\\n \\n
\\n
\\n On July 7, 2020, the base contained only a few transport vehicles.\\n
\\n
\\n
\\n \\n
\\n
But by October, tanks and artillery could be seen.
\\n
\\n In total, over 50 pieces of heavy machinery and 200 personnel are now\\n based here.\\n