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

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

@@ -2,6 +2,7 @@
 /** @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;
     hideTitle?: boolean | undefined;
@@ -17,6 +18,7 @@ export type ScrollerSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         title?: string | undefined;
         hideTitle?: boolean | undefined;

package/dist/layout/Section/Section.svelte

@@ -8,7 +8,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 = "";
@@ -33,12 +33,12 @@
 	 */
 	export let hideTitle = 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/Section/Section.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  SectionEvents */
 /** @typedef {typeof __propDef.slots}  SectionSlots */
 export default class Section extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
     marginTop?: boolean | undefined;
@@ -22,8 +22,8 @@ export type SectionSlots = 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;
         height?: string | number | null | undefined;
         marginTop?: boolean | undefined;

package/dist/layout/ShareButtons/ShareButtons.svelte

@@ -8,15 +8,20 @@
 	 */
 	export let title = "Share this page";
 	/**
-	 * 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;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	let href = "";
 	let pageTitle = "";
@@ -27,7 +32,7 @@
 	});
 </script>
 
-<Container width="wide" {marginTop} {marginBottom}>
+<Container width="wide" {marginTop} {marginBottom} {cls}>
 	<h2 class="ons-u-fs-r--b ons-u-mb-2xs">{title}</h2>
 	<ul class="ons-list ons-list--inline ons-list--icons">
 		<li class="ons-list__item">

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

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

package/dist/layout/Summary/Summary.svelte

@@ -18,13 +18,18 @@
 	 * @type {object[]}
 	 */
 	export let items = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	function handleChange(item) {
 		dispatch("change", { item });
 	}
 </script>
 
-<div class="ons-summary">
+<div class="ons-summary {cls}">
 	<div {id} class="ons-summary__group">
 		{#if title}<h2 class="ons-summary__group-title">{title}</h2>{/if}
 		<dl class="ons-summary__items">

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

@@ -2,6 +2,7 @@
 /** @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;
     items?: object[] | undefined;
@@ -17,6 +18,7 @@ export type SummarySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         title?: string | undefined;
         items?: object[] | undefined;

package/dist/layout/Tabs/Tabs.svelte

@@ -20,6 +20,11 @@
 	 * @type {string|null}
 	 */
 	export let selected = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	let el;
 
@@ -39,7 +44,7 @@
 </script>
 
 <section
-	class="ons-tabs"
+	class="ons-tabs {cls}"
 	class:ons-tabs__border={border}
 	class:ons-tabs__compact={compact}
 	bind:this={el}

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

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

package/dist/templates/intro.mdx

@@ -4,7 +4,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Using templates
 
-This section includes a series of starter templates constructed from multiple components within this library. All of these templates are included in the [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project, which is typically to be the easiest way to use them.
+This section includes a series of starter templates constructed from multiple components within this library. Similar templates to these examples are included in the [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project, which is typically the easiest way to use them.
 
 When using these templates in an existing SvelteKit project (or one built from scratch), you will need to include the **main.css** file from this library, which is best imported to your top-level `+layout.svelte` file in Svelte Kit. By doing this, you will not need to include it on individual pages.
 

package/dist/wrappers/Container/Container.svelte

@@ -1,11 +1,13 @@
 <script>
+	import Theme from "../Theme/Theme.svelte";
+
 	/**
 	 * Optional: Set the unique ID of the container
 	 * @type {string}
 	 */
 	export let id = "";
 	/**
-	 * Optional: Set a CSS class for the container
+	 * Optional: Set an additional CSS class for the container
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -20,45 +22,56 @@
 	 */
 	export let height = null;
 	/**
-	 * Optional margin above container
+	 * Adds margin above container
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below container
+	 * Adds margin below container
 	 * @type {boolean}
 	 */
 	export let marginBottom = false;
 	/**
-	 * Overrides the base theme background (accepts any valid CSS background value)
+	 * Optional: Sets a base theme ("light", "dark" or null for no theme)
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
+	 */
+	export let theme = null;
+	/**
+	 * Optional: Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let themeOverrides = {};
+	/**
+	 * Optional: Overrides the base theme background (accepts any valid CSS background value)
 	 * @type {string|null}
 	 */
 	export let background = null;
 </script>
 
-<div
-	{id}
-	class="ons-page__container {cls || ''}"
-	class:ons-container={width !== "full"}
-	class:ons-container--wide={width === "wider"}
-	class:ons-u-mt-xl={marginTop}
-	class:ons-u-mb-xl={marginBottom}
-	style:background
-	style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
->
-	{#if width === "narrow"}
-		<div class="ons-grid">
-			<div class="ons-grid__col ons-col-10@m ons-col-8@l">
-				<slot />
+<Theme {theme} overrides={themeOverrides} {background}>
+	<div
+		{id}
+		class="ons-page__container {cls || ''}"
+		class:ons-container={width !== "full"}
+		class:ons-container--wide={width === "wider"}
+		class:ons-u-mt-xl={marginTop}
+		class:ons-u-mb-xl={marginBottom}
+		style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
+	>
+		{#if width === "narrow"}
+			<div class="ons-grid">
+				<div class="ons-grid__col ons-col-10@m ons-col-8@l">
+					<slot />
+				</div>
 			</div>
-		</div>
-	{:else if width === "medium"}
-		<div class="ons-grid">
-			<div class="ons-grid__col ons-col-10@l">
-				<slot />
+		{:else if width === "medium"}
+			<div class="ons-grid">
+				<div class="ons-grid__col ons-col-10@l">
+					<slot />
+				</div>
 			</div>
-		</div>
-	{:else}
-		<slot />
-	{/if}
-</div>
+		{:else}
+			<slot />
+		{/if}
+	</div>
+</Theme>

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

@@ -2,13 +2,15 @@
 /** @typedef {typeof __propDef.events}  ContainerEvents */
 /** @typedef {typeof __propDef.slots}  ContainerSlots */
 export default class Container 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;
+    themeOverrides?: object | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,13 +23,15 @@ export type ContainerSlots = 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;
+        themeOverrides?: object | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/wrappers/Container/docs/component.md

@@ -1,4 +1,6 @@
-A container to set the width, minimum height and theme of a block of content.
+A container to set the width and minimum height of a block of content.
+
+Note that the this component includes the `<Theme>` component internally, allowing colour themes to be applied directly without adding an additional wrapper around it.
 
 <!-- prettier-ignore -->
 ```html
@@ -6,5 +8,5 @@ A container to set the width, minimum height and theme of a block of content.
   import { Container } from "@onsvisual/svelte-components";
 </script>
 
-<Container width="{narrow|medium|wide|full}"> {child_components} </Container>
+<Container width="{narrow|medium|wide|wider|full}" theme="light">{child_components}</Container>
 ```

package/dist/wrappers/Theme/Theme.svelte

@@ -3,7 +3,7 @@
 
 	/**
 	 * Sets a base theme ("light", "dark" or null for no theme)
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|null}
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
 	 */
 	export let theme = null;
 	/**
@@ -27,7 +27,7 @@
 	 */
 	export let allowClientOverrides = false;
 	/**
-	 * Optional: Set a CSS class for the theme container
+	 * Optional: Set an additional CSS class for the theme container
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -47,14 +47,14 @@
 </script>
 
 <svelte:head>
-	{#if global}
+	{#if global && (style || background)}
 		{@html "<st" +
 			`yle>:root{${style}background:${background || "var(--ons-color-page-light)"};color:var(--ons-color-text);</st` +
 			"yle>"}
 	{/if}
 </svelte:head>
 
-{#if global || (!theme && !background)}
+{#if global || !(theme || background)}
 	<slot />
 {:else}
 	<div class="ons-svelte-theme-wrapper {cls}" {style} style:background>

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

@@ -2,12 +2,12 @@
 /** @typedef {typeof __propDef.events}  ThemeEvents */
 /** @typedef {typeof __propDef.slots}  ThemeSlots */
 export default class Theme extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    background?: string | null | undefined;
-    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
     overrides?: object | undefined;
+    background?: string | null | undefined;
     global?: boolean | undefined;
     allowClientOverrides?: boolean | undefined;
+    cls?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,12 +20,12 @@ export type ThemeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        background?: string | null | undefined;
-        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
         overrides?: object | undefined;
+        background?: string | null | undefined;
         global?: boolean | undefined;
         allowClientOverrides?: boolean | undefined;
+        cls?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/wrappers/Theme/docs/component.md

@@ -6,5 +6,5 @@ A component that sets the colour scheme of its child components using CSS variab
   import { Theme } from "@onsvisual/svelte-components";
 </script>
 
-<Theme theme="{theme_name}"> {child_components} </Theme>
+<Theme theme="{light|dark|paleblue|blue|navyblue|grey}"> {child_components} </Theme>
 ```

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

@@ -4,6 +4,7 @@ declare namespace _default {
     export { paleblue };
     export { blue };
     export { navyblue };
+    export { grey };
 }
 export default _default;
 declare const light: {
@@ -141,3 +142,30 @@ declare const navyblue: {
     "--ons-color-borders-indent": string;
     "--ons-color-borders-light": string;
 };
+declare const grey: {
+    "--ons-color-page-light": string;
+    "--ons-color-text": string;
+    "--ons-color-text-light": string;
+    "--ons-color-text-link": string;
+    "--ons-color-text-link-hover": string;
+    "--ons-color-text-link-active": string;
+    "--ons-color-text-link-focus": string;
+    "--ons-color-text-inverse": string;
+    "--ons-color-text-inverse-link": string;
+    "--ons-color-text-inverse-link-hover": string;
+    "--ons-color-text-banner-link": string;
+    "--ons-color-text-banner-link-hover": string;
+    "--ons-color-text-metadata": string;
+    "--ons-color-input-bg": string;
+    "--ons-color-hero-bg": string;
+    "--ons-color-hero-bg-dark": string;
+    "--ons-color-banner-bg": string;
+    "--ons-color-banner-bg-dark": string;
+    "--ons-color-banner-browser-bg:": string;
+    "--ons-color-focus": string;
+    "--ons-color-focus-dark": string;
+    "--ons-color-highlight": string;
+    "--ons-color-borders": string;
+    "--ons-color-borders-indent": string;
+    "--ons-color-borders-light": string;
+};

package/dist/wrappers/Theme/themes.js

@@ -65,5 +65,6 @@ const dark = {
 const paleblue = { ...light, "--ons-color-page-light": "--ons-color-ocean-blue-tint" };
 const blue = { ...dark, "--ons-color-page-light": "--ons-color-ocean-blue" };
 const navyblue = { ...dark, "--ons-color-page-light": "--ons-color-night-blue" };
+const grey = { ...light, "--ons-color-page-light": "--ons-color-grey-5" };
 
-export default { light, dark, paleblue, blue, navyblue };
+export default { light, dark, paleblue, blue, navyblue, grey };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.0-next.4",
+	"version": "1.0.0-next.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",