@onsvisual/svelte-components 1.0.0-next.5 → 1.0.0-next.7

package/dist/inputs/ErrorPanel/ErrorPanel.svelte

@@ -4,9 +4,14 @@
 	 * @type {string}
 	 */
 	export let message = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-panel ons-panel--error ons-panel--no-title" id="number-of-employees-error">
+<div class="ons-panel ons-panel--error ons-panel--no-title {cls}" id="number-of-employees-error">
 	<span class="ons-panel__assistive-text ons-u-vh">Error: </span>
 	<div class="ons-panel__body">
 		{#if message}

package/dist/inputs/ErrorPanel/ErrorPanel.svelte.d.ts

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

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -11,9 +11,14 @@
 	 * @type {object[]}
 	 */
 	export let items = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
+<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error {cls}">
 	<div class="ons-panel__header">
 		<h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
 	</div>

package/dist/inputs/ErrorSummary/ErrorSummary.svelte.d.ts

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

package/dist/inputs/Input/Input.svelte

@@ -68,9 +68,14 @@
 	 * @type {boolean}
 	 */
 	export let error = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}
 		<label
 			class="ons-label"

package/dist/inputs/Input/Input.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  InputEvents */
 /** @typedef {typeof __propDef.slots}  InputSlots */
 export default class Input extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     width?: number | undefined;
     label?: string | undefined;
@@ -27,6 +28,7 @@ export type InputSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         width?: number | undefined;
         label?: string | undefined;

package/dist/inputs/Radios/Radios.svelte

@@ -35,9 +35,14 @@
 	 * @type {boolean}
 	 */
 	export let compact = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<fieldset class="ons-fieldset">
+<fieldset class="ons-fieldset {cls}">
 	{#if title}
 		<legend class="ons-fieldset__legend ons-u-mb-no">
 			<span class="ons-fieldset__legend-title ons-u-pb-no" class:ons-u-vh={hideTitle}>{title}</span>

package/dist/inputs/Radios/Radios.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  RadiosEvents */
 /** @typedef {typeof __propDef.slots}  RadiosSlots */
 export default class Radios extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     label?: string | undefined;
     title?: string | undefined;
@@ -23,6 +24,7 @@ export type RadiosSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         label?: string | undefined;
         title?: string | undefined;

package/dist/inputs/Select/Select.svelte

@@ -108,6 +108,11 @@
 		hideMenu = false;
 		dispatch("clear", value);
 	}
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	function inputValueTemplate(result) {
 		return result && result[labelKey];
@@ -183,7 +188,7 @@
 	<script src={scriptUrl} on:load={handleScriptLoad}></script>
 </svelte:head>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}<label for={id} class="ons-label" class:ons-u-vh={hideLabel}>{label}</label>{/if}
 	<div class="ons-autocomplete-wrapper">
 		{#if scriptLoaded}

package/dist/inputs/Select/Select.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 export default class Select extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     label?: string | undefined;
     mode?: "default" | "search" | undefined;
@@ -31,6 +32,7 @@ export type SelectSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         label?: string | undefined;
         mode?: "default" | "search" | undefined;

package/dist/inputs/Textarea/Textarea.svelte

@@ -43,11 +43,16 @@
 	 * @type {number}
 	 */
 	export let width = 30;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	$: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
 </script>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}
 		<label
 			class="ons-label ons-label--with-description"

package/dist/inputs/Textarea/Textarea.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  TextareaEvents */
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     width?: number | undefined;
     label?: string | undefined;
@@ -20,6 +21,7 @@ export type TextareaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         width?: number | undefined;
         label?: string | undefined;

package/dist/layout/Accordion/Accordion.svelte

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

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  AccordionEvents */
 /** @typedef {typeof __propDef.slots}  AccordionSlots */
 export default class Accordion extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     showToggle?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type AccordionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         showToggle?: boolean | undefined;
     };
     events: {

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -16,6 +16,11 @@
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
 	 */
 	export let width = "wide";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 	/**
 	 * Overrides the base theme background (accepts any valid CSS background value)
 	 * @type {string|null}
@@ -23,7 +28,7 @@
 	export let background = null;
 </script>
 
-<Container {width} {background}>
+<Container {width} {background} {cls}>
 	<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
 		<ol class="ons-breadcrumbs__items ons-u-fs-s">
 			{#each backHref ? [{ label: "Back", href: backHref }] : links as link}

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

@@ -2,8 +2,9 @@
 /** @typedef {typeof __propDef.events}  BreadcrumbEvents */
 /** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
 export default class Breadcrumb extends SvelteComponentTyped<{
-    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     background?: string | null | undefined;
+    cls?: string | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     links?: object[] | undefined;
     backHref?: string | undefined;
 }, {
@@ -16,8 +17,9 @@ export type BreadcrumbSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         background?: string | null | undefined;
+        cls?: string | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         links?: object[] | undefined;
         backHref?: string | undefined;
     };

package/dist/layout/Card/Card.svelte

@@ -7,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 = "";

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  CardEvents */
 /** @typedef {typeof __propDef.slots}  CardSlots */
 export default class Card extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     title?: string | undefined;
     image?: string | undefined;
     headingTag?: "h2" | "h3" | undefined;
@@ -27,8 +27,8 @@ export type CardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         title?: string | undefined;
         image?: string | undefined;
         headingTag?: "h2" | "h3" | undefined;

package/dist/layout/Contents/Contents.svelte

@@ -19,9 +19,14 @@
 	 * @type {string}
 	 */
 	export let skipHref = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<aside class="ons-table-of-contents-container" role="complementary">
+<aside class="ons-table-of-contents-container {cls}" role="complementary">
 	{#if skipHref}
 		<a class="ons-skip-to-content" href="#0">Skip to guide content</a>
 	{/if}

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

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

package/dist/layout/DescriptionList/DescriptionList.svelte

@@ -14,10 +14,15 @@
 	 * @type {"default"|"inline"}
 	 */
 	export let mode = "default";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 <dl
-	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {mode ===
+	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {cls} {mode ===
 	'inline'
 		? 'ons-u-mt-s ons-u-mt-l@l'
 		: 'ons-u-cf'}"

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

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

package/dist/layout/Details/Details.svelte

@@ -18,6 +18,11 @@
 	 * @type {boolean}
 	 */
 	export let open = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	function doToggle(e) {
 		dispatch("toggle", { open: e.newState === "open", e });
@@ -25,7 +30,7 @@
 </script>
 
 <details
-	class="ons-details ons-js-details ons-details--initialised"
+	class="ons-details ons-js-details ons-details--initialised {cls}"
 	class:ons-details--open={open}
 	bind:open
 	on:toggle={doToggle}

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

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

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;