@onsvisual/svelte-components 1.0.47 → 1.0.48

package/dist/decorators/Blockquote/Blockquote.stories.svelte

@@ -1,25 +1,25 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Blockquote from "./Blockquote.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Decorators/Blockquote",
-		component: Blockquote,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Blockquote {...args}>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-		labore et dolore magna aliqua.
-	</Blockquote>
-{/snippet}
-
-<Story name="Default" args={{ attribution: "A N Other" }} {template} />
-
-<Story name="Quote without attribution" args={{}} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Blockquote from "./Blockquote.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Blockquote",
+		component: Blockquote,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Blockquote {...args}>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+		labore et dolore magna aliqua.
+	</Blockquote>
+{/snippet}
+
+<Story name="Default" args={{ attribution: "A N Other" }} {template} />
+
+<Story name="Quote without attribution" args={{}} {template} />

package/dist/decorators/Blockquote/Blockquote.svelte

@@ -1,27 +1,27 @@
-<script>
-	/**
-	 * Attribution for the quote.
-	 * @type {string|null}
-	 */
-	export let attribution = null;
-</script>
-
-<blockquote class="ons-quote">
-	<svg
-		class="ons-icon"
-		viewBox="0 0 14 10"
-		xmlns="http://www.w3.org/2000/svg"
-		focusable="false"
-		fill="currentColor"
-		role="img"
-		title="ons-icon-quote"
-	>
-		<path
-			d="M13.44.77h-3l-2 4v6h6v-6h-3l2-4zm-8 0h-3l-2 4v6h6v-6h-3l2-4z"
-			transform="translate(-0.44 -0.77)"
-		/>
-	</svg><span class="ons-quote__text ons-u-fs-l"><slot /></span>
-	{#if attribution}
-		<span class="ons-quote__ref">&mdash; {attribution}</span>
-	{/if}
-</blockquote>
+<script>
+	/**
+	 * Attribution for the quote.
+	 * @type {string|null}
+	 */
+	export let attribution = null;
+</script>
+
+<blockquote class="ons-quote">
+	<svg
+		class="ons-icon"
+		viewBox="0 0 14 10"
+		xmlns="http://www.w3.org/2000/svg"
+		focusable="false"
+		fill="currentColor"
+		role="img"
+		title="ons-icon-quote"
+	>
+		<path
+			d="M13.44.77h-3l-2 4v6h6v-6h-3l2-4zm-8 0h-3l-2 4v6h6v-6h-3l2-4z"
+			transform="translate(-0.44 -0.77)"
+		/>
+	</svg><span class="ons-quote__text ons-u-fs-l"><slot /></span>
+	{#if attribution}
+		<span class="ons-quote__ref">&mdash; {attribution}</span>
+	{/if}
+</blockquote>

package/dist/decorators/Blockquote/docs/component.md

@@ -1,10 +1,10 @@
-A component to highlight a pull quote on a page, with optional attribution.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Blockquote } from "@onsvisual/svelte-components";
-</script>
-
-<Blockquote attribution="A. Person">Some quoted text.</Blockquote>
-```
+A component to highlight a pull quote on a page, with optional attribution.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Blockquote } from "@onsvisual/svelte-components";
+</script>
+
+<Blockquote attribution="A. Person">Some quoted text.</Blockquote>
+```

package/dist/decorators/Divider/Divider.stories.svelte

@@ -1,29 +1,29 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Divider from "./Divider.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Decorators/Divider",
-		component: Divider,
-		tags: ["autodocs"],
-		argTypes: {
-			hr: {
-				control: { type: "select" }
-			},
-			width: {
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story name="Default" args={{}} />
-
-<Story name="Light mode" args={{ mode: "light" }} />
-
-<Story name="Narrow divider" args={{ hr: "narrow" }} />
-
-<Story name="Invisible divider" args={{ hr: null }} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Divider from "./Divider.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Divider",
+		component: Divider,
+		tags: ["autodocs"],
+		argTypes: {
+			hr: {
+				control: { type: "select" }
+			},
+			width: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="Light mode" args={{ mode: "light" }} />
+
+<Story name="Narrow divider" args={{ hr: "narrow" }} />
+
+<Story name="Invisible divider" args={{ hr: null }} />

package/dist/decorators/Divider/Divider.svelte

@@ -1,52 +1,52 @@
-<script>
-	import Container from "../../wrappers/Container/Container.svelte";
-
-	/**
-	 * Optional: Include a horizontal rule
-	 * @type {"narrow"|"full"|null}
-	 */
-	export let hr = "full";
-	/**
-	 * Sets the width of the container
-	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-	 */
-	export let width = "wide";
-	/**
-	 * Sets the mode/colour of the line
-	 * @type {"dark"|"light"}
-	 */
-	export let mode = "dark";
-	/**
-	 * Adds margin above section
-	 * @type {boolean}
-	 */
-	export let marginTop = !!hr;
-	/**
-	 * Adds margin below section
-	 * @type {boolean}
-	 */
-	export let marginBottom = true;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<Container {width} {marginTop} {marginBottom} {cls}>
-	<hr
-		class="ons-u-mt-no"
-		class:ons-u-vh={!hr}
-		class:ons-svelte-hr-narrow={hr === "narrow"}
-		class:ons-svelte-hr-light={hr && mode === "light"}
-	/>
-</Container>
-
-<style>
-	.ons-svelte-hr-narrow {
-		width: 75px;
-	}
-	.ons-svelte-hr-light {
-		border-color: var(--ons-color-borders-light);
-	}
-</style>
+<script>
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * Optional: Include a horizontal rule
+	 * @type {"narrow"|"full"|null}
+	 */
+	export let hr = "full";
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
+	/**
+	 * Sets the mode/colour of the line
+	 * @type {"dark"|"light"}
+	 */
+	export let mode = "dark";
+	/**
+	 * Adds margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = !!hr;
+	/**
+	 * Adds margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = true;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<Container {width} {marginTop} {marginBottom} {cls}>
+	<hr
+		class="ons-u-mt-no"
+		class:ons-u-vh={!hr}
+		class:ons-svelte-hr-narrow={hr === "narrow"}
+		class:ons-svelte-hr-light={hr && mode === "light"}
+	/>
+</Container>
+
+<style>
+	.ons-svelte-hr-narrow {
+		width: 75px;
+	}
+	.ons-svelte-hr-light {
+		border-color: var(--ons-color-borders-light);
+	}
+</style>

package/dist/decorators/Divider/docs/component.md

@@ -1,12 +1,12 @@
-A component to draw a divider between blocks of contnet.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Divider } from "@onsvisual/svelte-components";
-</script>
-
-<!-- Some content blocks -->
-<Divider />
-<!-- More content blocks -->
-```
+A component to draw a divider between blocks of contnet.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Divider } from "@onsvisual/svelte-components";
+</script>
+
+<!-- Some content blocks -->
+<Divider />
+<!-- More content blocks -->
+```

package/dist/decorators/Em/Em.stories.svelte

@@ -1,30 +1,30 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Em from "./Em.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Decorators/Em",
-		component: Em,
-		tags: ["autodocs"],
-		argTypes: {
-			color: {
-				control: { type: "color" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Em {...args}>{args.text}</Em>
-{/snippet}
-
-<Story name="Mark mode" args={{ text: "Text on grey background" }} {template} />
-
-<Story
-	name="Badge mode"
-	args={{ text: "Text on badge", color: "navy", mode: "badge" }}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Em from "./Em.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Em",
+		component: Em,
+		tags: ["autodocs"],
+		argTypes: {
+			color: {
+				control: { type: "color" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Em {...args}>{args.text}</Em>
+{/snippet}
+
+<Story name="Mark mode" args={{ text: "Text on grey background" }} {template} />
+
+<Story
+	name="Badge mode"
+	args={{ text: "Text on badge", color: "navy", mode: "badge" }}
+	{template}
+/>

package/dist/decorators/Em/Em.svelte

@@ -1,58 +1,58 @@
-<script>
-	import { contrastColor } from "../../js/utils";
-
-	/**
-	 * Any valid CSS colour
-	 * @type {string}
-	 */
-	export let color = "lightgrey";
-	/**
-	 * Any valid CSS colour (CSS variables will not be parsed)
-	 * @type {"default"|"badge"}
-	 */
-	export let mode = "default";
-	/**
-	 * Override the font size of the surrounding text
-	 * @type {string|null}
-	 */
-	export let fontSize = null;
-	/**
-	 * Don't break text across lines
-	 * @type {boolean}
-	 */
-	export let nowrap = true;
-	/**
-	 * Descriptive text for screen readers if not self-explanatory
-	 * @type {string|null}
-	 */
-	export let ariaLabel = null;
-
-	$: text = contrastColor(color);
-</script>
-
-<mark
-	class:ons-svelte-mark={mode === "default"}
-	class:ons-svelte-badge={mode === "badge"}
-	class:ons-u-nowrap={nowrap}
-	style:background-color={color}
-	style:color={text}
-	style:font-size={fontSize}
-	role="presentation"
-	aria-label={ariaLabel}
->
-	<slot />
-</mark>
-
-<style>
-	.ons-svelte-mark {
-		padding: 1px 4px 1px 4px;
-	}
-	.ons-svelte-badge {
-		display: inline-block;
-		line-height: 1;
-		padding: 6px 8px;
-		border-radius: 4px;
-		box-shadow: none;
-		transform: translateY(-4px);
-	}
-</style>
+<script>
+	import { contrastColor } from "../../js/utils";
+
+	/**
+	 * Any valid CSS colour
+	 * @type {string}
+	 */
+	export let color = "lightgrey";
+	/**
+	 * Any valid CSS colour (CSS variables will not be parsed)
+	 * @type {"default"|"badge"}
+	 */
+	export let mode = "default";
+	/**
+	 * Override the font size of the surrounding text
+	 * @type {string|null}
+	 */
+	export let fontSize = null;
+	/**
+	 * Don't break text across lines
+	 * @type {boolean}
+	 */
+	export let nowrap = true;
+	/**
+	 * Descriptive text for screen readers if not self-explanatory
+	 * @type {string|null}
+	 */
+	export let ariaLabel = null;
+
+	$: text = contrastColor(color);
+</script>
+
+<mark
+	class:ons-svelte-mark={mode === "default"}
+	class:ons-svelte-badge={mode === "badge"}
+	class:ons-u-nowrap={nowrap}
+	style:background-color={color}
+	style:color={text}
+	style:font-size={fontSize}
+	role="presentation"
+	aria-label={ariaLabel}
+>
+	<slot />
+</mark>
+
+<style>
+	.ons-svelte-mark {
+		padding: 1px 4px 1px 4px;
+	}
+	.ons-svelte-badge {
+		display: inline-block;
+		line-height: 1;
+		padding: 6px 8px;
+		border-radius: 4px;
+		box-shadow: none;
+		transform: translateY(-4px);
+	}
+</style>

package/dist/decorators/Em/docs/component.md

@@ -1,12 +1,12 @@
-A component to visually highlight text. Can be used for inline text or to provide a "badge".
-
-Consists of a `<mark>` element with a custom background color, where the highlighted text will automatically appear black or white to maximise contrast.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Em } from "@onsvisual/svelte-components";
-</script>
-
-<Em color="steelblue">Highlighted text</Em>
-```
+A component to visually highlight text. Can be used for inline text or to provide a "badge".
+
+Consists of a `<mark>` element with a custom background color, where the highlighted text will automatically appear black or white to maximise contrast.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Em } from "@onsvisual/svelte-components";
+</script>
+
+<Em color="steelblue">Highlighted text</Em>
+```

package/dist/decorators/Icon/Icon.stories.svelte

@@ -1,27 +1,27 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Icon from "./Icon.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Decorators/Icon",
-		component: Icon,
-		tags: ["autodocs"],
-		argTypes: {
-			type: {
-				control: { type: "select" }
-			},
-			size: {
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story name="Arrow icon" args={{ type: "arrow" }} />
-
-<Story name="Arrow pointing down" args={{ type: "arrow", rotation: 90 }} />
-
-<Story name="Search icon, large" args={{ type: "search", size: "3xl" }} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Icon from "./Icon.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Icon",
+		component: Icon,
+		tags: ["autodocs"],
+		argTypes: {
+			type: {
+				control: { type: "select" }
+			},
+			size: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Arrow icon" args={{ type: "arrow" }} />
+
+<Story name="Arrow pointing down" args={{ type: "arrow", rotation: 90 }} />
+
+<Story name="Search icon, large" args={{ type: "search", size: "3xl" }} />