@onsvisual/svelte-components 1.0.47 → 1.0.48

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

@@ -1,22 +1,22 @@
-A wrapper component that uses IntersectionObserver to monitor whether the elements in contains are within the current viewport.
-
-This component can be useful for triggering actions such as lazy loading of data/images or scroll-driven interactions.
-
-This component has **enter** and **exit** events, triggered when it enters or leaves the viewport. It also has a **visible** binding which has a value of **true** when it is within the viewport.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Observe } from "@onsvisual/svelte-components";
-
-  const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
-</script>
-
-{#each colors as color}
-<Observe
-  on:enter={() => console.log(`${color} entered`)}
-  on:exit={() => console.log(`${color} exited`)}>
-  <div class="section" style:background={color} style:height="400px"/>
-</Observe>
-{/each}
-```
+A wrapper component that uses IntersectionObserver to monitor whether the elements in contains are within the current viewport.
+
+This component can be useful for triggering actions such as lazy loading of data/images or scroll-driven interactions.
+
+This component has **enter** and **exit** events, triggered when it enters or leaves the viewport. It also has a **visible** binding which has a value of **true** when it is within the viewport.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Observe } from "@onsvisual/svelte-components";
+
+  const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
+</script>
+
+{#each colors as color}
+<Observe
+  on:enter={() => console.log(`${color} entered`)}
+  on:exit={() => console.log(`${color} exited`)}>
+  <div class="section" style:background={color} style:height="400px"/>
+</Observe>
+{/each}
+```

package/dist/wrappers/Theme/Theme.stories.svelte

@@ -1,70 +1,70 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Theme from "./Theme.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Wrappers/Theme",
-		component: Theme,
-		tags: ["autodocs"],
-		argTypes: {
-			theme: {
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Theme {...args}>
-		<div style:padding="12px">
-			<h2>Title</h2>
-			<p>Text with a <a href="#0">hyperlink</a>.</p>
-		</div>
-	</Theme>
-{/snippet}
-
-<Story name="Default light theme" args={{}} {template} />
-
-<Story
-	name="Dark theme"
-	args={{
-		theme: "dark"
-	}}
-	{template}
-/>
-
-<Story
-	name="Pale blue theme"
-	args={{
-		theme: "paleblue"
-	}}
-	{template}
-/>
-
-<Story
-	name="Blue theme"
-	args={{
-		theme: "blue"
-	}}
-	{template}
-/>
-
-<Story
-	name="Navy blue theme"
-	args={{
-		theme: "navyblue"
-	}}
-	{template}
-/>
-
-<Story
-	name="Dark with background override"
-	args={{
-		theme: "dark",
-		background: "var(--ons-color-aqua-teal)"
-	}}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Theme from "./Theme.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Theme",
+		component: Theme,
+		tags: ["autodocs"],
+		argTypes: {
+			theme: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Theme {...args}>
+		<div style:padding="12px">
+			<h2>Title</h2>
+			<p>Text with a <a href="#0">hyperlink</a>.</p>
+		</div>
+	</Theme>
+{/snippet}
+
+<Story name="Default light theme" args={{}} {template} />
+
+<Story
+	name="Dark theme"
+	args={{
+		theme: "dark"
+	}}
+	{template}
+/>
+
+<Story
+	name="Pale blue theme"
+	args={{
+		theme: "paleblue"
+	}}
+	{template}
+/>
+
+<Story
+	name="Blue theme"
+	args={{
+		theme: "blue"
+	}}
+	{template}
+/>
+
+<Story
+	name="Navy blue theme"
+	args={{
+		theme: "navyblue"
+	}}
+	{template}
+/>
+
+<Story
+	name="Dark with background override"
+	args={{
+		theme: "dark",
+		background: "var(--ons-color-aqua-teal)"
+	}}
+	{template}
+/>

package/dist/wrappers/Theme/Theme.svelte

@@ -1,76 +1,76 @@
-<script>
-	import themes from "./themes.js";
-
-	/**
-	 * Sets a base theme ("light", "dark" or null for no theme)
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
-	 */
-	export let theme = null;
-	/**
-	 * Define additional props to override the base theme
-	 * @type {object}
-	 */
-	export let overrides = {};
-	/**
-	 * Overrides the base theme background (accepts any valid CSS background value)
-	 * @type {string|null}
-	 */
-	export let background = null;
-	/**
-	 * Sets the theme at html body level (only use this at the top level)
-	 * @type {boolean}
-	 */
-	export let global = false;
-	/**
-	 * Allows client imported CSS for embeddable content
-	 * @type {boolean}
-	 */
-	export let allowClientOverrides = false;
-	/**
-	 * Optional: Set an additional CSS class for the theme container
-	 * @type {string|null}
-	 */
-	export let cls = null;
-
-	function makeStyle(theme, overrides) {
-		if (theme) {
-			const _theme = { ...themes[theme], ...overrides };
-			return Object.keys(_theme)
-				.map(
-					(key) => `${key}:${_theme[key].startsWith("--") ? `var(${_theme[key]})` : _theme[key]};`
-				)
-				.join("");
-		}
-		return "";
-	}
-	$: style = makeStyle(theme, overrides);
-</script>
-
-<svelte:head>
-	{#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)}
-	<slot />
-{:else}
-	<div class="ons-svelte-theme-wrapper {cls}" {style} style:background>
-		{#if allowClientOverrides}
-			<div class="client-css-override" style:display="contents">
-				<slot />
-			</div>
-		{:else}
-			<slot />
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.ons-svelte-theme-wrapper {
-		background: var(--ons-color-page-light);
-		color: var(--ons-color-text);
-	}
-</style>
+<script>
+	import themes from "./themes.js";
+
+	/**
+	 * Sets a base theme ("light", "dark" or null for no theme)
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
+	 */
+	export let theme = null;
+	/**
+	 * Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let overrides = {};
+	/**
+	 * Overrides the base theme background (accepts any valid CSS background value)
+	 * @type {string|null}
+	 */
+	export let background = null;
+	/**
+	 * Sets the theme at html body level (only use this at the top level)
+	 * @type {boolean}
+	 */
+	export let global = false;
+	/**
+	 * Allows client imported CSS for embeddable content
+	 * @type {boolean}
+	 */
+	export let allowClientOverrides = false;
+	/**
+	 * Optional: Set an additional CSS class for the theme container
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	function makeStyle(theme, overrides) {
+		if (theme) {
+			const _theme = { ...themes[theme], ...overrides };
+			return Object.keys(_theme)
+				.map(
+					(key) => `${key}:${_theme[key].startsWith("--") ? `var(${_theme[key]})` : _theme[key]};`
+				)
+				.join("");
+		}
+		return "";
+	}
+	$: style = makeStyle(theme, overrides);
+</script>
+
+<svelte:head>
+	{#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)}
+	<slot />
+{:else}
+	<div class="ons-svelte-theme-wrapper {cls}" {style} style:background>
+		{#if allowClientOverrides}
+			<div class="client-css-override" style:display="contents">
+				<slot />
+			</div>
+		{:else}
+			<slot />
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.ons-svelte-theme-wrapper {
+		background: var(--ons-color-page-light);
+		color: var(--ons-color-text);
+	}
+</style>

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

@@ -1,10 +1,10 @@
-A component that sets the colour scheme of its child components using CSS variables.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Theme } from "@onsvisual/svelte-components";
-</script>
-
-<Theme theme="{light|dark|paleblue|blue|navyblue|grey}"> {child_components} </Theme>
-```
+A component that sets the colour scheme of its child components using CSS variables.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Theme } from "@onsvisual/svelte-components";
+</script>
+
+<Theme theme="{light|dark|paleblue|blue|navyblue|grey}"> {child_components} </Theme>
+```

package/dist/wrappers/Theme/themes.js

@@ -1,70 +1,70 @@
-const light = {
-	// Text
-	"--ons-color-text": "--ons-color-black",
-	"--ons-color-text-light": "--ons-color-grey-75",
-	"--ons-color-text-link": "--ons-color-ocean-blue",
-	"--ons-color-text-link-hover": "--ons-color-night-blue",
-	"--ons-color-text-link-active": "--ons-color-night-blue",
-	"--ons-color-text-link-focus": "--ons-color-black",
-	"--ons-color-text-inverse": "--ons-color-white",
-	"--ons-color-text-inverse-link": "--ons-color-white",
-	"--ons-color-text-inverse-link-hover": "--ons-color-grey-5",
-	"--ons-color-text-banner-link": "--ons-color-grey-100",
-	"--ons-color-text-banner-link-hover": "--ons-color-black",
-	"--ons-color-text-metadata": "--ons-color-black",
-
-	// Background
-	"--ons-color-page-light": "--ons-color-white",
-	"--ons-color-input-bg": "--ons-color-white",
-	"--ons-color-hero-bg": "--ons-color-branded-tint",
-	"--ons-color-hero-bg-dark": "--ons-color-branded",
-	"--ons-color-banner-bg": "--ons-color-grey-5",
-	"--ons-color-banner-bg-dark": "--ons-color-grey-15",
-	"--ons-color-banner-browser-bg:": "--ons-color-black",
-
-	// Other
-	"--ons-color-focus": "--ons-color-sun-yellow",
-	"--ons-color-focus-dark": "--ons-color-sun-yellow-dark",
-	"--ons-color-highlight": "--ons-color-neon-yellow",
-	"--ons-color-borders": "--ons-color-grey-35",
-	"--ons-color-borders-indent": "--ons-color-grey-35",
-	"--ons-color-borders-light": "--ons-color-grey-35"
-};
-const dark = {
-	// Text
-	"--ons-color-text": "--ons-color-white",
-	"--ons-color-text-light": "--ons-color-grey-35",
-	"--ons-color-text-link": "--ons-color-white",
-	"--ons-color-text-link-hover": "--ons-color-grey-5",
-	"--ons-color-text-link-active": "--ons-color-grey-5",
-	"--ons-color-text-link-focus": "--ons-color-black",
-	"--ons-color-text-inverse": "--ons-color-white",
-	"--ons-color-text-inverse-link": "--ons-color-white",
-	"--ons-color-text-inverse-link-hover": "--ons-color-grey-5",
-	"--ons-color-text-banner-link": "--ons-color-grey-5",
-	"--ons-color-text-banner-link-hover": "--ons-color-white",
-	"--ons-color-text-metadata": "--ons-color-white",
-
-	// Background
-	"--ons-color-page-light": "--ons-color-black",
-	"--ons-color-input-bg": "--ons-color-white",
-	"--ons-color-hero-bg": "--ons-color-branded-tint",
-	"--ons-color-hero-bg-dark": "--ons-color-branded",
-	"--ons-color-banner-bg": "--ons-color-grey-100",
-	"--ons-color-banner-bg-dark": "--ons-color-grey-75",
-	"--ons-color-banner-browser-bg:": "--ons-color-white",
-
-	// Other
-	"--ons-color-focus": "--ons-color-sun-yellow",
-	"--ons-color-focus-dark": "--ons-color-sun-yellow-dark",
-	"--ons-color-highlight": "--ons-color-neon-yellow",
-	"--ons-color-borders": "--ons-color-grey-75",
-	"--ons-color-borders-indent": "--ons-color-grey-75",
-	"--ons-color-borders-light": "--ons-color-grey-75"
-};
-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, grey };
+const light = {
+	// Text
+	"--ons-color-text": "--ons-color-black",
+	"--ons-color-text-light": "--ons-color-grey-75",
+	"--ons-color-text-link": "--ons-color-ocean-blue",
+	"--ons-color-text-link-hover": "--ons-color-night-blue",
+	"--ons-color-text-link-active": "--ons-color-night-blue",
+	"--ons-color-text-link-focus": "--ons-color-black",
+	"--ons-color-text-inverse": "--ons-color-white",
+	"--ons-color-text-inverse-link": "--ons-color-white",
+	"--ons-color-text-inverse-link-hover": "--ons-color-grey-5",
+	"--ons-color-text-banner-link": "--ons-color-grey-100",
+	"--ons-color-text-banner-link-hover": "--ons-color-black",
+	"--ons-color-text-metadata": "--ons-color-black",
+
+	// Background
+	"--ons-color-page-light": "--ons-color-white",
+	"--ons-color-input-bg": "--ons-color-white",
+	"--ons-color-hero-bg": "--ons-color-branded-tint",
+	"--ons-color-hero-bg-dark": "--ons-color-branded",
+	"--ons-color-banner-bg": "--ons-color-grey-5",
+	"--ons-color-banner-bg-dark": "--ons-color-grey-15",
+	"--ons-color-banner-browser-bg:": "--ons-color-black",
+
+	// Other
+	"--ons-color-focus": "--ons-color-sun-yellow",
+	"--ons-color-focus-dark": "--ons-color-sun-yellow-dark",
+	"--ons-color-highlight": "--ons-color-neon-yellow",
+	"--ons-color-borders": "--ons-color-grey-35",
+	"--ons-color-borders-indent": "--ons-color-grey-35",
+	"--ons-color-borders-light": "--ons-color-grey-35"
+};
+const dark = {
+	// Text
+	"--ons-color-text": "--ons-color-white",
+	"--ons-color-text-light": "--ons-color-grey-35",
+	"--ons-color-text-link": "--ons-color-white",
+	"--ons-color-text-link-hover": "--ons-color-grey-5",
+	"--ons-color-text-link-active": "--ons-color-grey-5",
+	"--ons-color-text-link-focus": "--ons-color-black",
+	"--ons-color-text-inverse": "--ons-color-white",
+	"--ons-color-text-inverse-link": "--ons-color-white",
+	"--ons-color-text-inverse-link-hover": "--ons-color-grey-5",
+	"--ons-color-text-banner-link": "--ons-color-grey-5",
+	"--ons-color-text-banner-link-hover": "--ons-color-white",
+	"--ons-color-text-metadata": "--ons-color-white",
+
+	// Background
+	"--ons-color-page-light": "--ons-color-black",
+	"--ons-color-input-bg": "--ons-color-white",
+	"--ons-color-hero-bg": "--ons-color-branded-tint",
+	"--ons-color-hero-bg-dark": "--ons-color-branded",
+	"--ons-color-banner-bg": "--ons-color-grey-100",
+	"--ons-color-banner-bg-dark": "--ons-color-grey-75",
+	"--ons-color-banner-browser-bg:": "--ons-color-white",
+
+	// Other
+	"--ons-color-focus": "--ons-color-sun-yellow",
+	"--ons-color-focus-dark": "--ons-color-sun-yellow-dark",
+	"--ons-color-highlight": "--ons-color-neon-yellow",
+	"--ons-color-borders": "--ons-color-grey-75",
+	"--ons-color-borders-indent": "--ons-color-grey-75",
+	"--ons-color-borders-light": "--ons-color-grey-75"
+};
+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, grey };