@onsvisual/svelte-components 1.0.20 → 1.0.21

package/dist/layout/Image/Image.svelte

@@ -1,24 +1,24 @@
 <script>
 	/**
 	 * The URL of the image
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let src = "";
+	export let src = null;
 	/**
 	 * An alternative text for the image
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let alt = "";
+	export let alt = null;
 	/**
 	 * A visible caption for the image
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let caption = "";
+	export let caption = null;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <figure class="ons-image {cls}">

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

@@ -2,10 +2,10 @@
 /** @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;
+    cls?: string | null | undefined;
+    caption?: string | null | undefined;
+    src?: string | null | undefined;
+    alt?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,10 +16,10 @@ 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;
+        cls?: string | null | undefined;
+        caption?: string | null | undefined;
+        src?: string | null | undefined;
+        alt?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/List/List.svelte

@@ -13,9 +13,9 @@
 	export let items = null;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 {#if mode === "number"}

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

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

package/dist/layout/NavSections/NavSection.svelte

@@ -15,9 +15,9 @@
 	export let id = slugify(title);
 	/**
 	 * Optional: Set an additional CSS class for the section
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 	/**
 	 * Allows the h2 title tag for the section to be visually hidden
 	 * @type {boolean}

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

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

package/dist/layout/NavSections/NavSections.svelte

@@ -10,9 +10,9 @@
 	export let id = "toc";
 	/**
 	 * Optional: Set an additional CSS class for the section
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 	/**
 	 * Sets the width of the container
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}

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

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

package/dist/layout/Notice/Notice.svelte

@@ -6,9 +6,9 @@
 	export let mode = "info";
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <div

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

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

package/dist/layout/PhaseBanner/PhaseBanner.svelte

@@ -11,9 +11,9 @@
 	export let href = "https://www.ons.gov.uk/feedback";
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <div class="ons-phase-banner {cls}">

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

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

package/dist/layout/RelatedContent/RelatedContent.svelte

@@ -16,9 +16,9 @@
 	export let related = [{ title, links }];
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <aside class="ons-related-content {cls}" aria-label="Related content">

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

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

package/dist/layout/Scroller/Scroller.svelte

@@ -138,9 +138,9 @@
 	export let visible = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	const sections = writable([]);
 	setContext("sections", sections);

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

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

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -4,14 +4,14 @@
 
 	/**
 	 * Sets the unique ID of the section (identifiable in associated scroll events)
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let id = "";
+	export let id = null;
 	/**
 	 * Optional: Sets the title of the section
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Allows the h2 title tag for the section to be visually hidden
 	 * @type {boolean}
@@ -19,9 +19,9 @@
 	export let hideTitle = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	let section;
 

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  ScrollerSectionEvents */
 /** @typedef {typeof __propDef.slots}  ScrollerSectionSlots */
 export default class ScrollerSection extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    id?: string | undefined;
-    title?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
+    title?: string | null | undefined;
     hideTitle?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -18,9 +18,9 @@ export type ScrollerSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        id?: string | undefined;
-        title?: string | undefined;
+        cls?: string | null | undefined;
+        id?: string | null | undefined;
+        title?: string | null | undefined;
         hideTitle?: boolean | undefined;
     };
     events: {

package/dist/layout/Section/Section.svelte

@@ -4,14 +4,14 @@
 
 	/**
 	 * Sets the unique ID of the section
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let id = "";
+	export let id = null;
 	/**
 	 * Optional: Set an additional CSS class for the section
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 	/**
 	 * Sets the width of the container
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
@@ -24,9 +24,9 @@
 	export let height = null;
 	/**
 	 * Sets the title of the section
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Allows the h2 title tag for the section to be visually hidden
 	 * @type {boolean}

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

@@ -2,13 +2,13 @@
 /** @typedef {typeof __propDef.events}  SectionEvents */
 /** @typedef {typeof __propDef.slots}  SectionSlots */
 export default class Section extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    id?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
-    title?: string | undefined;
+    title?: string | null | undefined;
     hideTitle?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -22,13 +22,13 @@ export type SectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        id?: string | undefined;
+        cls?: string | null | undefined;
+        id?: string | null | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         height?: string | number | null | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;
-        title?: string | undefined;
+        title?: string | null | undefined;
         hideTitle?: boolean | undefined;
     };
     events: {

package/dist/layout/ShareButtons/ShareButtons.svelte

@@ -19,9 +19,9 @@
 	export let marginBottom = true;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	let href = "";
 	let pageTitle = "";

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  ShareButtonsEvents */
 /** @typedef {typeof __propDef.slots}  ShareButtonsSlots */
 export default class ShareButtons extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
     title?: string | undefined;
@@ -16,7 +16,7 @@ export type ShareButtonsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;
         title?: string | undefined;

package/dist/layout/Summary/Summary.svelte

@@ -5,14 +5,14 @@
 
 	/**
 	 * A unique ID for the summary table
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let id = "";
+	export let id = null;
 	/**
 	 * Title for summary table
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Array of items in format {key, value, href?}
 	 * @type {object[]}
@@ -20,9 +20,9 @@
 	export let items = [];
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	function handleChange(item) {
 		dispatch("change", { item });

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  SummaryEvents */
 /** @typedef {typeof __propDef.slots}  SummarySlots */
 export default class Summary extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    id?: string | undefined;
-    title?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
+    title?: string | null | undefined;
     items?: object[] | undefined;
 }, {
     change: CustomEvent<any>;
@@ -18,9 +18,9 @@ export type SummarySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        id?: string | undefined;
-        title?: string | undefined;
+        cls?: string | null | undefined;
+        id?: string | null | undefined;
+        title?: string | null | undefined;
         items?: object[] | undefined;
     };
     events: {

package/dist/layout/Tabs/Tabs.svelte

@@ -23,9 +23,9 @@
 	export let selected = null;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	let el;
 

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  TabsEvents */
 /** @typedef {typeof __propDef.slots}  TabsSlots */
 export default class Tabs extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     compact?: boolean | undefined;
     border?: boolean | undefined;
     selected?: string | null | undefined;
@@ -20,7 +20,7 @@ export type TabsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         compact?: boolean | undefined;
         border?: boolean | undefined;
         selected?: string | null | undefined;

package/dist/layout/Timeline/TimelineItem.svelte

@@ -1,9 +1,9 @@
 <script>
 	/**
 	 * Title of timeline item
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 </script>
 
 <div class="ons-timeline__item">

package/dist/layout/Timeline/TimelineItem.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  TimelineItemEvents */
 /** @typedef {typeof __propDef.slots}  TimelineItemSlots */
 export default class TimelineItem extends SvelteComponentTyped<{
-    title?: string | undefined;
+    title?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +15,7 @@ export type TimelineItemSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title?: string | undefined;
+        title?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/wrappers/Container/Container.svelte

@@ -3,14 +3,14 @@
 
 	/**
 	 * Optional: Set the unique ID of the container
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let id = "";
+	export let id = null;
 	/**
 	 * Optional: Set an additional CSS class for the container
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 	/**
 	 * Sets the width of the container
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}

package/dist/wrappers/Container/Container.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Container extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
     background?: string | null | undefined;
-    cls?: string | undefined;
-    id?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
     marginTop?: boolean | undefined;
@@ -25,8 +25,8 @@ declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
         background?: string | null | undefined;
-        cls?: string | undefined;
-        id?: string | undefined;
+        cls?: string | null | undefined;
+        id?: string | null | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         height?: string | number | null | undefined;
         marginTop?: boolean | undefined;

package/dist/wrappers/Theme/Theme.svelte

@@ -28,9 +28,9 @@
 	export let allowClientOverrides = false;
 	/**
 	 * Optional: Set an additional CSS class for the theme container
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	function makeStyle(theme, overrides) {
 		if (theme) {

package/dist/wrappers/Theme/Theme.svelte.d.ts

@@ -7,7 +7,7 @@ export default class Theme extends SvelteComponentTyped<{
     background?: string | null | undefined;
     global?: boolean | undefined;
     allowClientOverrides?: boolean | undefined;
-    cls?: string | undefined;
+    cls?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -25,7 +25,7 @@ declare const __propDef: {
         background?: string | null | undefined;
         global?: boolean | undefined;
         allowClientOverrides?: boolean | undefined;
-        cls?: string | undefined;
+        cls?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.20",
+	"version": "1.0.21",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",
@@ -80,6 +80,9 @@
 		"vite": "^6.2.6",
 		"vitest": "^3.2.3"
 	},
+	"optionalDependencies": {
+		"@rollup/rollup-linux-x64-gnu": "^4.52.4"
+	},
 	"keywords": [
 		"svelte"
 	]