@onsvisual/svelte-components 1.0.40 → 1.0.42

package/dist/inputs/Radios/Radios.svelte

@@ -1,62 +1,62 @@
-<script>
-	import Radio from "./Radio.svelte";
-
-	/**
-	 * Title/legend for parent <fieldset>
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Visually hide the title/legend
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * Unique ID/name for radio group (required)
-	 * @type {string}
-	 */
-	export let id = "radios";
-	/**
-	 * Descriptive "how to" label for inputs
-	 * @type {string|null}
-	 */
-	export let label = null;
-	/**
-	 * Binding for ID of selected option
-	 * @type {object|null}
-	 */
-	export let value = null;
-	/** Optional: Define the radios as an array of {id, label, description?}
-	 * @type {object[]}
-	 */
-	export let items = [];
-	/**
-	 * Compact mode (no border)
-	 * @type {boolean}
-	 */
-	export let compact = false;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<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>
-		</legend>
-	{/if}
-	<div class="ons-input-items">
-		{#if label}
-			<p class="ons-radios__label">{label}</p>
-		{/if}
-		<div class="ons-radios__items">
-			<slot />
-			{#each items as item}
-				<Radio {item} groupId={id} {compact} bind:value on:change />
-			{/each}
-		</div>
-	</div>
-</fieldset>
+<script>
+	import Radio from "./Radio.svelte";
+
+	/**
+	 * Title/legend for parent <fieldset>
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Visually hide the title/legend
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Unique ID/name for radio group (required)
+	 * @type {string}
+	 */
+	export let id = "radios";
+	/**
+	 * Descriptive "how to" label for inputs
+	 * @type {string|null}
+	 */
+	export let label = null;
+	/**
+	 * Binding for ID of selected option
+	 * @type {object|null}
+	 */
+	export let value = null;
+	/** Optional: Define the radios as an array of {id, label, description?}
+	 * @type {object[]}
+	 */
+	export let items = [];
+	/**
+	 * Compact mode (no border)
+	 * @type {boolean}
+	 */
+	export let compact = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<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>
+		</legend>
+	{/if}
+	<div class="ons-input-items">
+		{#if label}
+			<p class="ons-radios__label">{label}</p>
+		{/if}
+		<div class="ons-radios__items">
+			<slot />
+			{#each items as item}
+				<Radio {item} groupId={id} {compact} bind:value on:change />
+			{/each}
+		</div>
+	</div>
+</fieldset>

package/dist/inputs/Radios/docs/component.md

@@ -1,24 +1,24 @@
-A component for defining a group of radio inputs, where the selected item id can be bound to a Svelte variable.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/radios). (Note: In some use cases, it may be preferable to use raw HTML `<input type="radio">` components and style these using CSS.)
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Radios } from "@onsvisual/svelte-components";
-
-  let items = [
-    {
-      id: "house",
-      label: "House or bungalow",
-      description: "Includes terraced, semi-detached and detached homes.",
-    },
-    { id: "flat", label: "Flat, maisonette or apartment" },
-    { id: "mobile", label: "Caravan or other mobile or temporary structure" },
-  ];
-
-  let selected; // A binding for the selected item
-</script>
-
-<Radios {items} bind:value={selected} label="Select one">
-```
+A component for defining a group of radio inputs, where the selected item id can be bound to a Svelte variable.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/radios). (Note: In some use cases, it may be preferable to use raw HTML `<input type="radio">` components and style these using CSS.)
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Radios } from "@onsvisual/svelte-components";
+
+  let items = [
+    {
+      id: "house",
+      label: "House or bungalow",
+      description: "Includes terraced, semi-detached and detached homes.",
+    },
+    { id: "flat", label: "Flat, maisonette or apartment" },
+    { id: "mobile", label: "Caravan or other mobile or temporary structure" },
+  ];
+
+  let selected; // A binding for the selected item
+</script>
+
+<Radios {items} bind:value={selected} label="Select one">
+```

package/dist/inputs/Radios/docs/example.md

@@ -1,21 +1,21 @@
-In this example, the radios are defined explicitly rather than via an array.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Radio, Radios } from "@onsvisual/svelte-components";
-
-  let selected; // A binding for the selected item ID
-</script>
-
-<Radios label="Select one">
-  <Radio
-    groupId="radios"
-    id="house"
-    label="House or bungalow"
-    description="Includes terraced, semi-detached and detached homes."
-  />
-  <Radio groupId="radios" id="flat" label="Flat, maisonette or apartment" />
-  <Radio groupId="radios" id="mobile" label="Caravan or other mobile or temporary structure" />
-</Radios>
-```
+In this example, the radios are defined explicitly rather than via an array.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Radio, Radios } from "@onsvisual/svelte-components";
+
+  let selected; // A binding for the selected item ID
+</script>
+
+<Radios label="Select one">
+  <Radio
+    groupId="radios"
+    id="house"
+    label="House or bungalow"
+    description="Includes terraced, semi-detached and detached homes."
+  />
+  <Radio groupId="radios" id="flat" label="Flat, maisonette or apartment" />
+  <Radio groupId="radios" id="mobile" label="Caravan or other mobile or temporary structure" />
+</Radios>
+```

package/dist/inputs/Select/Select.stories.svelte

@@ -1,63 +1,63 @@
-<script module>
-	// @ts-ignore
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Select from "./Select.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import options from "../../js/menuOptions.js";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Select",
-		component: Select,
-		tags: ["autodocs"],
-		argTypes: {
-			mode: {
-				options: ["search", "dropdown"],
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<div style:padding="0 0 200px">
-		<Select {...args} />
-	</div>
-{/snippet}
-
-<Story name="Default" args={{ id: "default", label: "Select an option", options }} {template} />
-
-<Story
-	name="Pre-selected value"
-	args={{ id: "default", value: options[0], label: "Select an option", options }}
-	{template}
-/>
-
-<Story
-	name="Hidden label"
-	args={{ id: "hidden-label", label: "Select an option", hideLabel: true, options }}
-	{template}
-/>
-
-<Story
-	name="Search mode"
-	args={{
-		id: "search",
-		mode: "search",
-		label: "Type to select",
-		options
-	}}
-	{template}
-/>
-
-<Story
-	name="Options with group as suffix"
-	args={{
-		id: "group-suffix",
-		label: "Select an option",
-		groupKey: "group",
-		options
-	}}
-	{template}
-/>
+<script module>
+	// @ts-ignore
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Select from "./Select.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import options from "../../js/menuOptions.js";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Select",
+		component: Select,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				options: ["search", "dropdown"],
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="0 0 200px">
+		<Select {...args} />
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ id: "default", label: "Select an option", options }} {template} />
+
+<Story
+	name="Pre-selected value"
+	args={{ id: "default", value: options[0], label: "Select an option", options }}
+	{template}
+/>
+
+<Story
+	name="Hidden label"
+	args={{ id: "hidden-label", label: "Select an option", hideLabel: true, options }}
+	{template}
+/>
+
+<Story
+	name="Search mode"
+	args={{
+		id: "search",
+		mode: "search",
+		label: "Type to select",
+		options
+	}}
+	{template}
+/>
+
+<Story
+	name="Options with group as suffix"
+	args={{
+		id: "group-suffix",
+		label: "Select an option",
+		groupKey: "group",
+		options
+	}}
+	{template}
+/>