@onsvisual/svelte-components 1.0.0-next.4 → 1.0.0-next.6

package/dist/layout/DocumentList/DocumentList.svelte

@@ -5,9 +5,14 @@
 	 * @type {object[]|null}
 	 */
 	export let items = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<ul class="ons-document-list">
+<ul class="ons-document-list {cls}">
 	<slot />
 	{#if Array.isArray(items)}
 		{#each items as item}

package/dist/layout/DocumentList/DocumentList.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DocumentListEvents */
 /** @typedef {typeof __propDef.slots}  DocumentListSlots */
 export default class DocumentList extends SvelteComponentTyped<{
+    cls?: string | undefined;
     items?: object[] | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -15,6 +16,7 @@ export type DocumentListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         items?: object[] | null | undefined;
     };
     events: {

package/dist/layout/Footer/Footer.svelte

@@ -11,7 +11,7 @@
 	export let compact = false;
 	/**
 	 * Sets a predefined theme
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|null}
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
 	 */
 	export let theme = null;
 	/**

package/dist/layout/Footer/Footer.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  FooterEvents */
 /** @typedef {typeof __propDef.slots}  FooterSlots */
 export default class Footer extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
-    compact?: boolean | undefined;
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
     themeOverrides?: object | undefined;
+    compact?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,9 +15,9 @@ export type FooterSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
-        compact?: boolean | undefined;
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
         themeOverrides?: object | undefined;
+        compact?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/Grid/Grid.svelte

@@ -8,7 +8,7 @@
 	 */
 	export let id = "";
 	/**
-	 * Optional: Set a CSS class for the component
+	 * Optional: Set an additional CSS class for the component
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -33,12 +33,12 @@
 	 */
 	export let caption = "";
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;

package/dist/layout/Grid/Grid.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
@@ -26,8 +26,8 @@ export type GridSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;

package/dist/layout/Header/Header.svelte

@@ -22,7 +22,7 @@
 	export let titleHref = "";
 	/**
 	 * Sets a predefined theme
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|null}
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
 	 */
 	export let theme = null;
 	/**

package/dist/layout/Header/Header.svelte.d.ts

@@ -2,11 +2,11 @@
 /** @typedef {typeof __propDef.events}  HeaderEvents */
 /** @typedef {typeof __propDef.slots}  HeaderSlots */
 export default class Header extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    themeOverrides?: object | undefined;
     title?: string | undefined;
-    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
     compact?: boolean | undefined;
     skipHref?: string | undefined;
-    themeOverrides?: object | undefined;
     titleHref?: string | undefined;
     bilingual?: boolean | undefined;
 }, {
@@ -21,11 +21,11 @@ export type HeaderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        themeOverrides?: object | undefined;
         title?: string | undefined;
-        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
         compact?: boolean | undefined;
         skipHref?: string | undefined;
-        themeOverrides?: object | undefined;
         titleHref?: string | undefined;
         bilingual?: boolean | undefined;
     };

package/dist/layout/Hero/Hero.stories.svelte

@@ -30,7 +30,8 @@
 		width: "narrow",
 		title: "Page title",
 		lede: lipsum(1),
-		actionButton: { label: "Get started", href: "#0" }
+		actionButton: { label: "Get started", href: "#0" },
+		theme: "paleblue"
 	}}
 	{template}
 />

package/dist/layout/Hero/Hero.svelte

@@ -55,11 +55,16 @@
 	 * @type {number|string|null}
 	 */
 	export let height = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 	/**
 	 * Sets a predefined theme
-	 * @type {"default"|"light"|"dark"|"blue"|"paleblue"|"navyblue"|"grey"|null}
+	 * @type {"light"|"dark"|"blue"|"paleblue"|"navyblue"|"grey"|null}
 	 */
-	export let theme = "default";
+	export let theme = null;
 	/**
 	 * Define additional props to override the base theme
 	 * @type {object}
@@ -72,13 +77,9 @@
 	export let background = null;
 </script>
 
-<Theme
-	theme={theme === "light" ? "light" : theme === "dark" ? "dark" : null}
-	overrides={themeOverrides}
-	{background}
->
+<Theme theme={theme === "blue" ? null : theme} overrides={themeOverrides} {background}>
 	<section
-		class="ons-hero"
+		class="ons-hero {cls}"
 		class:ons-hero--pale-blue={theme === "paleblue"}
 		class:ons-hero--navy-blue={theme === "navyblue"}
 		class:ons-hero--dark={theme === "blue"}

package/dist/layout/Hero/Hero.svelte.d.ts

@@ -2,13 +2,14 @@
 /** @typedef {typeof __propDef.events}  HeroEvents */
 /** @typedef {typeof __propDef.slots}  HeroSlots */
 export default class Hero extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    background?: string | null | undefined;
+    cls?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
-    background?: string | null | undefined;
+    themeOverrides?: object | undefined;
     meta?: object[] | null | undefined;
     title?: string | undefined;
-    theme?: "default" | "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
-    themeOverrides?: object | undefined;
     pageType?: string | undefined;
     lede?: string | undefined;
     titleBadge?: object | null | undefined;
@@ -29,13 +30,14 @@ export type HeroSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        background?: string | null | undefined;
+        cls?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         height?: string | number | null | undefined;
-        background?: string | null | undefined;
+        themeOverrides?: object | undefined;
         meta?: object[] | null | undefined;
         title?: string | undefined;
-        theme?: "default" | "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
-        themeOverrides?: object | undefined;
         pageType?: string | undefined;
         lede?: string | undefined;
         titleBadge?: object | null | undefined;

package/dist/layout/Highlight/Highlight.svelte

@@ -1,5 +1,4 @@
 <script>
-	import Theme from "../../wrappers/Theme/Theme.svelte";
 	import Container from "../../wrappers/Container/Container.svelte";
 
 	/**
@@ -8,7 +7,7 @@
 	 */
 	export let id = "";
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -29,7 +28,7 @@
 	export let height = null;
 	/**
 	 * Sets a predefined theme
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|null}
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
 	 */
 	export let theme = "paleblue";
 	/**
@@ -43,34 +42,28 @@
 	 */
 	export let background = null;
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;
 </script>
 
-<Theme {theme} overrides={themeOverrides} {background}>
-	<Container {id} {cls} {width} {marginTop} {marginBottom}>
-		<section
-			class="ons-section__highlight ons-u-mt-xl ons-u-mb-xl"
-			class:ons-u-fs-l={bigText}
-			style:height={typeof height === "number"
-				? `${height}px`
-				: height === "full"
-					? "100vh"
-					: height}
-		>
-			<div>
-				<slot />
-			</div>
-		</section>
-	</Container>
-</Theme>
+<Container {id} {cls} {width} {marginTop} {marginBottom} {theme} {themeOverrides} {background}>
+	<section
+		class="ons-section__highlight ons-u-mt-xl ons-u-mb-xl"
+		class:ons-u-fs-l={bigText}
+		style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
+	>
+		<div>
+			<slot />
+		</div>
+	</section>
+</Container>
 
 <style>
 	.ons-section__highlight {

package/dist/layout/Highlight/Highlight.svelte.d.ts

@@ -2,14 +2,14 @@
 /** @typedef {typeof __propDef.events}  HighlightEvents */
 /** @typedef {typeof __propDef.slots}  HighlightSlots */
 export default class Highlight extends SvelteComponentTyped<{
-    id?: string | undefined;
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    background?: string | null | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
-    background?: string | null | undefined;
-    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
     themeOverrides?: object | undefined;
     bigText?: boolean | undefined;
 }, {
@@ -24,14 +24,14 @@ export type HighlightSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        background?: string | null | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         height?: string | number | null | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;
-        background?: string | null | undefined;
-        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
         themeOverrides?: object | undefined;
         bigText?: boolean | undefined;
     };

package/dist/layout/Image/Image.svelte

@@ -14,9 +14,14 @@
 	 * @type {string}
 	 */
 	export let caption = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<figure class="ons-image">
+<figure class="ons-image {cls}">
 	<img class="ons-image__img" {src} {alt} />
 	{#if caption}
 		<figcaption class="ons-image__caption">{caption}</figcaption>

package/dist/layout/Image/Image.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ImageEvents */
 /** @typedef {typeof __propDef.slots}  ImageSlots */
 export default class Image extends SvelteComponentTyped<{
+    cls?: string | undefined;
     caption?: string | undefined;
     src?: string | undefined;
     alt?: string | undefined;
@@ -15,6 +16,7 @@ export type ImageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         caption?: string | undefined;
         src?: string | undefined;
         alt?: string | undefined;

package/dist/layout/List/List.svelte

@@ -11,10 +11,15 @@
 	 * @type {string[]|null}
 	 */
 	export let items = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 {#if mode === "number"}
-	<ol class="ons-list">
+	<ol class="ons-list {cls}">
 		<slot>
 			{#if items}
 				{#each items as item}

package/dist/layout/List/List.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ListEvents */
 /** @typedef {typeof __propDef.slots}  ListSlots */
 export default class List extends SvelteComponentTyped<{
+    cls?: string | undefined;
     mode?: "number" | "inline" | "bullet" | "dash" | "bare" | undefined;
     items?: string[] | null | undefined;
 }, {
@@ -16,6 +17,7 @@ export type ListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         mode?: "number" | "inline" | "bullet" | "dash" | "bare" | undefined;
         items?: string[] | null | undefined;
     };

package/dist/layout/NavSections/NavSection.svelte

@@ -14,7 +14,7 @@
 	 */
 	export let id = slugify(title);
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";

package/dist/layout/NavSections/NavSection.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  NavSectionEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionSlots */
 export default class NavSection extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     title?: string | undefined;
     hideTitle?: boolean | undefined;
     subsection?: boolean | undefined;
@@ -19,8 +19,8 @@ export type NavSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         title?: string | undefined;
         hideTitle?: boolean | undefined;
         subsection?: boolean | undefined;

package/dist/layout/NavSections/NavSections.svelte

@@ -9,7 +9,7 @@
 	 */
 	export let id = "toc";
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -29,12 +29,12 @@
 	 */
 	export let noContents = false;
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;

package/dist/layout/NavSections/NavSections.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  NavSectionsEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionsSlots */
 export default class NavSections extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
@@ -26,8 +26,8 @@ export type NavSectionsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;

package/dist/layout/Notice/Notice.svelte

@@ -4,10 +4,15 @@
 	 * @type {"info"|"success"|"error"|"warning"}
 	 */
 	export let mode = "info";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 <div
-	class="ons-panel ons-panel--no-title"
+	class="ons-panel ons-panel--no-title {cls}"
 	class:ons-panel--info={mode === "info"}
 	class:ons-panel--warn={mode === "warning"}
 	class:ons-panel--error={mode === "error"}

package/dist/layout/Notice/Notice.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  NoticeEvents */
 /** @typedef {typeof __propDef.slots}  NoticeSlots */
 export default class Notice extends SvelteComponentTyped<{
+    cls?: string | undefined;
     mode?: "error" | "info" | "success" | "warning" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -15,6 +16,7 @@ export type NoticeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         mode?: "error" | "info" | "success" | "warning" | undefined;
     };
     events: {

package/dist/layout/PhaseBanner/PhaseBanner.svelte

@@ -9,9 +9,14 @@
 	 * @type {string}
 	 */
 	export let href = "https://www.ons.gov.uk/feedback";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-phase-banner">
+<div class="ons-phase-banner {cls}">
 	<div class="ons-container">
 		<div
 			class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap"

package/dist/layout/PhaseBanner/PhaseBanner.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  PhaseBannerEvents */
 /** @typedef {typeof __propDef.slots}  PhaseBannerSlots */
 export default class PhaseBanner extends SvelteComponentTyped<{
+    cls?: string | undefined;
     href?: string | undefined;
     phase?: string | undefined;
 }, {
@@ -14,6 +15,7 @@ export type PhaseBannerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         href?: string | undefined;
         phase?: string | undefined;
     };

package/dist/layout/RelatedContent/RelatedContent.svelte

@@ -14,9 +14,14 @@
 	 * @type {object[]}
 	 */
 	export let related = [{ title, links }];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<aside class="ons-related-content" aria-label="Related content">
+<aside class="ons-related-content {cls}" aria-label="Related content">
 	<slot />
 	{#each related as section}
 		<div class="ons-related-content__section">

package/dist/layout/RelatedContent/RelatedContent.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  RelatedContentEvents */
 /** @typedef {typeof __propDef.slots}  RelatedContentSlots */
 export default class RelatedContent extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     links?: object | object[] | undefined;
     related?: object[] | undefined;
@@ -17,6 +18,7 @@ export type RelatedContentSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         links?: object | object[] | undefined;
         related?: object[] | undefined;

package/dist/layout/Scroller/Scroller.svelte

@@ -136,6 +136,11 @@
 	 * @type {boolean}
 	 */
 	export let visible = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	const sections = writable([]);
 	setContext("sections", sections);
@@ -251,7 +256,7 @@
 	<div class="ons-u-mt-xl"></div>
 {/if}
 
-<svelte-scroller-outer {id} bind:this={outer} class:splitscreen>
+<svelte-scroller-outer {id} bind:this={outer} class={cls} class:splitscreen>
 	<svelte-scroller-background-container class="background-container" style="{style}{widthStyle}">
 		<svelte-scroller-background bind:this={background}>
 			<slot name="background" />

package/dist/layout/Scroller/Scroller.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ScrollerEvents */
 /** @typedef {typeof __propDef.slots}  ScrollerSlots */
 export default class Scroller extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
@@ -30,6 +31,7 @@ export type ScrollerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -17,6 +17,11 @@
 	 * @type {boolean}
 	 */
 	export let hideTitle = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	let section;
 
@@ -35,7 +40,7 @@
 	});
 </script>
 
-<section data-id={id} bind:this={section}>
+<section data-id={id} bind:this={section} class={cls}>
 	<Container width="narrow">
 		<div class="ons-scroller-section">
 			{#if title}