@onsvisual/svelte-components 1.0.20 → 1.0.22

package/dist/layout/Accordion/AccordionItem.svelte

@@ -4,9 +4,9 @@
 
 	/**
 	 * Sets the title of the accordion item
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Sets the unique ID of the accordion item
 	 * @type {string}

package/dist/layout/Accordion/AccordionItem.svelte.d.ts

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  AccordionItemSlots */
 export default class AccordionItem extends SvelteComponentTyped<{
     id?: string | undefined;
-    title?: string | undefined;
+    title?: string | null | undefined;
     headingTag?: "h2" | "h3" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -18,7 +18,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         id?: string | undefined;
-        title?: string | undefined;
+        title?: string | null | undefined;
         headingTag?: "h2" | "h3" | undefined;
     };
     events: {

package/dist/layout/BackLink/BackLink.svelte

@@ -6,9 +6,9 @@
 	export let href = "#top";
 	/**
 	 * Optional: Add a CSS class to the link
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <div class="ons-back-to-top ons-js-back-to-top ons-back-to-top__enabled ons-u-mb-l {cls || ''}">

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

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

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -8,9 +8,9 @@
 	export let links = [];
 	/**
 	 * Optional: Link href if component is used for a single back-link
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let backHref = "";
+	export let backHref = null;
 	/**
 	 * Sets the width of the container
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
@@ -18,9 +18,9 @@
 	export let width = "wide";
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 	/**
 	 * Optional: Sets a base theme ("light", "dark", null etc)
 	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}

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

@@ -4,11 +4,11 @@
 export default class Breadcrumb extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
     background?: string | null | undefined;
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     themeOverrides?: object | undefined;
     links?: object[] | undefined;
-    backHref?: string | undefined;
+    backHref?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -21,11 +21,11 @@ declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
         background?: string | null | undefined;
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         themeOverrides?: object | undefined;
         links?: object[] | undefined;
-        backHref?: string | undefined;
+        backHref?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/Card/Card.svelte

@@ -3,19 +3,19 @@
 
 	/**
 	 * 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 title of the card
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Allows the h2 title tag for the card to be visually hidden
 	 * @type {boolean}
@@ -38,19 +38,19 @@
 	export let baseline = false;
 	/**
 	 * Optional: URL for title/image link
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let href = "";
+	export let href = null;
 	/**
 	 * Optional: URL for image
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let image = "";
+	export let image = null;
 	/**
 	 * Optional: Alt text for image
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let imageAlt = "";
+	export let imageAlt = null;
 	/**
 	 * (If used in grid) How many columns the card should span across
 	 * @type {number}

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

@@ -2,17 +2,17 @@
 /** @typedef {typeof __propDef.events}  CardEvents */
 /** @typedef {typeof __propDef.slots}  CardSlots */
 export default class Card extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    id?: string | undefined;
-    title?: string | undefined;
-    image?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
+    title?: string | null | undefined;
+    image?: string | null | undefined;
     headingTag?: "h2" | "h3" | undefined;
-    href?: string | undefined;
+    href?: string | null | undefined;
     colspan?: number | undefined;
     hideTitle?: boolean | undefined;
     mode?: "default" | "featured" | undefined;
     baseline?: boolean | undefined;
-    imageAlt?: string | undefined;
+    imageAlt?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,17 +27,17 @@ export type CardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        id?: string | undefined;
-        title?: string | undefined;
-        image?: string | undefined;
+        cls?: string | null | undefined;
+        id?: string | null | undefined;
+        title?: string | null | undefined;
+        image?: string | null | undefined;
         headingTag?: "h2" | "h3" | undefined;
-        href?: string | undefined;
+        href?: string | null | undefined;
         colspan?: number | undefined;
         hideTitle?: boolean | undefined;
         mode?: "default" | "featured" | undefined;
         baseline?: boolean | undefined;
-        imageAlt?: string | undefined;
+        imageAlt?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/Contents/Contents.svelte

@@ -16,14 +16,14 @@
 	export let links = [];
 	/**
 	 * An anchor link URL to the main content of the page (to skip contents)
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let skipHref = "";
+	export let skipHref = null;
 	/**
 	 * 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-table-of-contents-container {cls}" role="complementary">

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

@@ -2,11 +2,11 @@
 /** @typedef {typeof __propDef.events}  ContentsEvents */
 /** @typedef {typeof __propDef.slots}  ContentsSlots */
 export default class Contents extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     title?: string | undefined;
     links?: object[] | undefined;
     hideTitle?: boolean | undefined;
-    skipHref?: string | undefined;
+    skipHref?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -17,11 +17,11 @@ export type ContentsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         title?: string | undefined;
         links?: object[] | undefined;
         hideTitle?: boolean | undefined;
-        skipHref?: string | undefined;
+        skipHref?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/DescriptionList/DescriptionList.svelte

@@ -1,9 +1,9 @@
 <script>
 	/**
 	 * Sets the title of the list (for screen readers)
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Array of items in format {key, value} where "value" may be an array of multiple values
 	 * @type {object[]}
@@ -16,9 +16,9 @@
 	export let mode = "default";
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <dl

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  DescriptionListEvents */
 /** @typedef {typeof __propDef.slots}  DescriptionListSlots */
 export default class DescriptionList extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    title?: string | undefined;
+    cls?: string | null | undefined;
+    title?: string | null | undefined;
     mode?: "default" | "inline" | undefined;
     items?: object[] | undefined;
 }, {
@@ -16,8 +16,8 @@ export type DescriptionListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        title?: string | undefined;
+        cls?: string | null | undefined;
+        title?: string | null | undefined;
         mode?: "default" | "inline" | undefined;
         items?: object[] | undefined;
     };

package/dist/layout/Details/Details.svelte

@@ -20,9 +20,9 @@
 	export let open = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	function doToggle(e) {
 		dispatch("toggle", { open: e.newState === "open", e });

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  DetailsEvents */
 /** @typedef {typeof __propDef.slots}  DetailsSlots */
 export default class Details extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     title?: string | undefined;
     open?: boolean | undefined;
     headingTag?: "h2" | "h3" | undefined;
@@ -20,7 +20,7 @@ export type DetailsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         title?: string | undefined;
         open?: boolean | undefined;
         headingTag?: "h2" | "h3" | undefined;

package/dist/layout/DocumentList/Document.svelte

@@ -1,9 +1,9 @@
 <script>
 	/**
 	 * The title of the document
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Set the heading level for the title
 	 * @type {"h2"|"h3"}
@@ -11,14 +11,14 @@
 	export let headingTag = "h2";
 	/**
 	 * The URL of the document
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let href = "";
+	export let href = null;
 	/**
 	 * A description of the document
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let description = "";
+	export let description = null;
 	/**
 	 * Optional: URL of image to represent the document (use "true" for a placeholder)
 	 * @type {string|boolean}
@@ -31,9 +31,9 @@
 	export let featured = false;
 	/**
 	 * Metadata about the type of document linked to (can include HTML)
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let meta = "";
+	export let meta = null;
 </script>
 
 <li class="ons-document-list__item" class:ons-document-list__item--featured={featured}>

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

@@ -2,13 +2,13 @@
 /** @typedef {typeof __propDef.events}  DocumentEvents */
 /** @typedef {typeof __propDef.slots}  DocumentSlots */
 export default class Document extends SvelteComponentTyped<{
-    meta?: string | undefined;
-    title?: string | undefined;
+    meta?: string | null | undefined;
+    title?: string | null | undefined;
     image?: string | boolean | undefined;
     headingTag?: "h2" | "h3" | undefined;
-    href?: string | undefined;
+    href?: string | null | undefined;
     featured?: boolean | undefined;
-    description?: string | undefined;
+    description?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,13 +21,13 @@ export type DocumentSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        meta?: string | undefined;
-        title?: string | undefined;
+        meta?: string | null | undefined;
+        title?: string | null | undefined;
         image?: string | boolean | undefined;
         headingTag?: "h2" | "h3" | undefined;
-        href?: string | undefined;
+        href?: string | null | undefined;
         featured?: boolean | undefined;
-        description?: string | undefined;
+        description?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/DocumentList/DocumentList.svelte

@@ -7,9 +7,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>
 
 <ul class="ons-document-list {cls}">

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

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

package/dist/layout/Grid/Grid.svelte

@@ -4,14 +4,14 @@
 
 	/**
 	 * Optional: 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 component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 	/**
 	 * Sets the width of the section
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
@@ -19,9 +19,9 @@
 	export let width = "wide";
 	/**
 	 * 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}
@@ -29,9 +29,9 @@
 	export let hideTitle = false;
 	/**
 	 * Optional: Caption for the grid (if used as a media container, eg. for an image)
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let caption = "";
+	export let caption = null;
 	/**
 	 * Adds margin above section
 	 * @type {boolean}

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

@@ -2,13 +2,13 @@
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    id?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
-    caption?: string | undefined;
-    title?: string | undefined;
+    caption?: string | null | undefined;
+    title?: string | null | undefined;
     colWidth?: "narrow" | "medium" | "wide" | "full" | undefined;
     rowHeight?: string | number | null | undefined;
     hideTitle?: boolean | undefined;
@@ -26,13 +26,13 @@ export type GridSlots = 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;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;
-        caption?: string | undefined;
-        title?: string | undefined;
+        caption?: string | null | undefined;
+        title?: string | null | undefined;
         colWidth?: "narrow" | "medium" | "wide" | "full" | undefined;
         rowHeight?: string | number | null | undefined;
         hideTitle?: boolean | undefined;

package/dist/layout/Header/Header.svelte

@@ -12,14 +12,14 @@
 	export let compact = false;
 	/**
 	 * Optional product title
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Optional link for product title
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let titleHref = "";
+	export let titleHref = null;
 	/**
 	 * Sets a predefined theme
 	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}

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

@@ -4,10 +4,10 @@
 export default class Header extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
     themeOverrides?: object | undefined;
-    title?: string | undefined;
+    title?: string | null | undefined;
     compact?: boolean | undefined;
     skipHref?: string | undefined;
-    titleHref?: string | undefined;
+    titleHref?: string | null | undefined;
     bilingual?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -23,10 +23,10 @@ declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
         themeOverrides?: object | undefined;
-        title?: string | undefined;
+        title?: string | null | undefined;
         compact?: boolean | undefined;
         skipHref?: string | undefined;
-        titleHref?: string | undefined;
+        titleHref?: string | null | undefined;
         bilingual?: boolean | undefined;
     };
     events: {

package/dist/layout/Hero/Hero.svelte

@@ -12,14 +12,14 @@
 	export let title = "Page title";
 	/**
 	 * Optional: Page type to sit above title
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let pageType = "";
+	export let pageType = null;
 	/**
 	 * Descriptive text for page to sit below title
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let lede = "";
+	export let lede = null;
 	/**
 	 * Optional: Badge to appear next to the page title in format {label, color}
 	 * @type {object|null}
@@ -57,9 +57,9 @@
 	export let height = null;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 	/**
 	 * Sets a predefined theme
 	 * @type {"light"|"dark"|"blue"|"paleblue"|"navyblue"|"grey"|null}
@@ -103,8 +103,11 @@
 							<h1 class="ons-hero__title ons-u-fs-3xl">
 								{title}
 								{#if titleBadge}
-									<Em mode="badge" color={titleBadge.color} ariaLabel={titleBadge.ariaLabel} fontSize="1.125rem"
-										>{titleBadge.label}</Em
+									<Em
+										mode="badge"
+										color={titleBadge.color}
+										ariaLabel={titleBadge.ariaLabel}
+										fontSize="1.125rem">{titleBadge.label}</Em
 									>
 								{/if}
 							</h1>

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

@@ -4,14 +4,14 @@
 export default class Hero extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
     background?: string | null | undefined;
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
     themeOverrides?: object | undefined;
     meta?: object[] | null | undefined;
     title?: string | undefined;
-    pageType?: string | undefined;
-    lede?: string | undefined;
+    pageType?: string | null | undefined;
+    lede?: string | null | undefined;
     titleBadge?: object | null | undefined;
     actionButton?: object | null | undefined;
     natStatBadge?: boolean | undefined;
@@ -32,14 +32,14 @@ declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
         background?: string | null | undefined;
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         height?: string | number | null | undefined;
         themeOverrides?: object | undefined;
         meta?: object[] | null | undefined;
         title?: string | undefined;
-        pageType?: string | undefined;
-        lede?: string | undefined;
+        pageType?: string | null | undefined;
+        lede?: string | null | undefined;
         titleBadge?: object | null | undefined;
         actionButton?: object | null | undefined;
         natStatBadge?: boolean | undefined;