@onsvisual/svelte-components 1.0.43 → 1.0.45

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -1,180 +1,180 @@
-<script>
-	import { onMount, onDestroy, getContext, createEventDispatcher } from "svelte";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * ID for input element
-	 * @type {string}
-	 */
-	export let id;
-	/**
-	 * Label for input
-	 * @type {string}
-	 */
-	export let label;
-	/**
-	 * Optional: Extended description for element
-	 * @type {string|null}
-	 */
-	export let description = null;
-	/**
-	 * Binding for checked state of input
-	 * @type {boolean}
-	 */
-	export let checked = false;
-	/**
-	 * Option to disable input
-	 * @type {boolean}
-	 */
-	export let disabled = false;
-	/**
-	 * Optional: Define the item as an object in the form {id, label, description?}
-	 * @type {object}
-	 */
-	export let item = { id, label, description, checked, disabled };
-	/**
-	 * Optional: Name of checkbox group
-	 * @type {string|null}
-	 */
-	export let groupName = null;
-	/**
-	 * Binding for checked state of input
-	 * @type {object[]|null}
-	 */
-	export let group = null;
-	/**
-	 * Set display mode of checkbox
-	 * @type {"default"|"ghost"}
-	 */
-	export let variant = "default";
-	/**
-	 * 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;
-
-	const checkboxes = getContext("checkboxes");
-
-	let el;
-
-	function findAncestor(el, cls) {
-		while ((el = el.parentElement) && !el.classList.contains(cls));
-		return el;
-	}
-
-	function updateGroup() {
-		const groupIndex = {};
-		for (const g of group) groupIndex[g.id] = g;
-		const newGroupIds = $checkboxes.filter((c) => c.checked).map((c) => c?.id);
-		if (newGroupIds.length !== group.length)
-			group = newGroupIds.map((id) => groupIndex[id] || item);
-	}
-
-	function doChange(e) {
-		checked = _checked = item.checked;
-		if (Array.isArray(group) && Array.isArray($checkboxes)) {
-			updateGroup();
-		}
-		dispatch("change", { item, e });
-	}
-
-	// Track changes to checked from bind:checked outside component
-	let _checked = item.checked;
-	function trackChecked(checked) {
-		if (_checked !== checked) {
-			item.checked = _checked = checked;
-		}
-	}
-	$: trackChecked(checked);
-
-	onMount(() => {
-		if (Array.isArray(group) && Array.isArray($checkboxes)) {
-			const root = findAncestor(el, "ons-checkboxes__items");
-			$checkboxes = [...root.getElementsByTagName("input")];
-			updateGroup();
-		}
-	});
-
-	onDestroy(() => {
-		if (Array.isArray(group) && Array.isArray($checkboxes)) {
-			$checkboxes = $checkboxes.filter((c) => c.id !== id);
-			updateGroup();
-		}
-	});
-</script>
-
-<span
-	class="ons-checkboxes__item {cls}"
-	class:ons-checkboxes__item--ghost={variant === "ghost"}
-	class:ons-checkboxes__item--no-border={compact}
->
-	<span class="ons-checkbox" class:ons-checkbox--no-border={compact}>
-		<input
-			type="checkbox"
-			id={item.id}
-			name={groupName}
-			value={item}
-			bind:checked={item.checked}
-			class="ons-checkbox__input ons-js-checkbox"
-			disabled={item.disabled}
-			aria-disabled={item.disabled}
-			on:change={doChange}
-			bind:this={el}
-		/>
-		<label
-			class="ons-checkbox__label"
-			class:ons-label--with-description={item.description}
-			for={item.id}
-			id="{item.id}-label"
-			aria-describedby={item.description ? `${item.id}-label-description-hint` : null}
-		>
-			{item.label}
-			{#if item.description}
-				<span class="ons-label__aria-hidden-description" aria-hidden="true"
-					><span class="ons-label__description ons-radio__label--with-description">
-						{item.description}
-					</span></span
-				>
-			{/if}
-		</label>
-		{#if item.description}
-			<span
-				class="ons-label__visually-hidden-description ons-u-vh"
-				id="{item.id}-label-description-hint"
-			>
-				{item.description}
-			</span>
-		{/if}
-	</span>
-</span>
-
-<style>
-	.ons-checkboxes__item--ghost .ons-checkbox__label::before {
-		background: rgba(0, 0, 0, 0);
-		border-color: var(--ons-color-text-inverse);
-		border-width: 2px;
-		opacity: 60%;
-	}
-	.ons-checkboxes__item--ghost .ons-checkbox__input,
-	.ons-checkboxes__item--ghost .ons-checkbox__input::after {
-		background: rgba(0, 0, 0, 0);
-		border-color: var(--ons-color-text-inverse);
-	}
-	.ons-checkboxes__item--ghost .ons-checkbox__input:focus + .ons-checkbox__label::before {
-		box-shadow:
-			0 0 0 1px var(--ons-color-input-border),
-			0 0 0 4px var(--ons-color-focus);
-		opacity: 100%;
-	}
-	.ons-checkboxes__item--ghost
-		.ons-checkbox__input:checked:not(:focus)
-		+ .ons-checkbox__label::before {
-		box-shadow: 0 0 0 1px var(--ons-color-text-inverse);
-	}
-</style>
+<script>
+	import { onMount, onDestroy, getContext, createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * ID for input element
+	 * @type {string}
+	 */
+	export let id;
+	/**
+	 * Label for input
+	 * @type {string}
+	 */
+	export let label;
+	/**
+	 * Optional: Extended description for element
+	 * @type {string|null}
+	 */
+	export let description = null;
+	/**
+	 * Binding for checked state of input
+	 * @type {boolean}
+	 */
+	export let checked = false;
+	/**
+	 * Option to disable input
+	 * @type {boolean}
+	 */
+	export let disabled = false;
+	/**
+	 * Optional: Define the item as an object in the form {id, label, description?}
+	 * @type {object}
+	 */
+	export let item = { id, label, description, checked, disabled };
+	/**
+	 * Optional: Name of checkbox group
+	 * @type {string|null}
+	 */
+	export let groupName = null;
+	/**
+	 * Binding for checked state of input
+	 * @type {object[]|null}
+	 */
+	export let group = null;
+	/**
+	 * Set display mode of checkbox
+	 * @type {"default"|"ghost"}
+	 */
+	export let variant = "default";
+	/**
+	 * 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;
+
+	const checkboxes = getContext("checkboxes");
+
+	let el;
+
+	function findAncestor(el, cls) {
+		while ((el = el.parentElement) && !el.classList.contains(cls));
+		return el;
+	}
+
+	function updateGroup() {
+		const groupIndex = {};
+		for (const g of group) groupIndex[g.id] = g;
+		const newGroupIds = $checkboxes.filter((c) => c.checked).map((c) => c?.id);
+		if (newGroupIds.length !== group.length)
+			group = newGroupIds.map((id) => groupIndex[id] || item);
+	}
+
+	function doChange(e) {
+		checked = _checked = item.checked;
+		if (Array.isArray(group) && Array.isArray($checkboxes)) {
+			updateGroup();
+		}
+		dispatch("change", { item, e });
+	}
+
+	// Track changes to checked from bind:checked outside component
+	let _checked = item.checked;
+	function trackChecked(checked) {
+		if (_checked !== checked) {
+			item.checked = _checked = checked;
+		}
+	}
+	$: trackChecked(checked);
+
+	onMount(() => {
+		if (Array.isArray(group) && Array.isArray($checkboxes)) {
+			const root = findAncestor(el, "ons-checkboxes__items");
+			$checkboxes = [...root.getElementsByTagName("input")];
+			updateGroup();
+		}
+	});
+
+	onDestroy(() => {
+		if (Array.isArray(group) && Array.isArray($checkboxes)) {
+			$checkboxes = $checkboxes.filter((c) => c.id !== id);
+			updateGroup();
+		}
+	});
+</script>
+
+<span
+	class="ons-checkboxes__item {cls}"
+	class:ons-checkboxes__item--ghost={variant === "ghost"}
+	class:ons-checkboxes__item--no-border={compact}
+>
+	<span class="ons-checkbox" class:ons-checkbox--no-border={compact}>
+		<input
+			type="checkbox"
+			id={item.id}
+			name={groupName}
+			value={item}
+			bind:checked={item.checked}
+			class="ons-checkbox__input ons-js-checkbox"
+			disabled={item.disabled}
+			aria-disabled={item.disabled}
+			on:change={doChange}
+			bind:this={el}
+		/>
+		<label
+			class="ons-checkbox__label"
+			class:ons-label--with-description={item.description}
+			for={item.id}
+			id="{item.id}-label"
+			aria-describedby={item.description ? `${item.id}-label-description-hint` : null}
+		>
+			{item.label}
+			{#if item.description}
+				<span class="ons-label__aria-hidden-description" aria-hidden="true"
+					><span class="ons-label__description ons-radio__label--with-description">
+						{item.description}
+					</span></span
+				>
+			{/if}
+		</label>
+		{#if item.description}
+			<span
+				class="ons-label__visually-hidden-description ons-u-vh"
+				id="{item.id}-label-description-hint"
+			>
+				{item.description}
+			</span>
+		{/if}
+	</span>
+</span>
+
+<style>
+	.ons-checkboxes__item--ghost .ons-checkbox__label::before {
+		background: rgba(0, 0, 0, 0);
+		border-color: var(--ons-color-text-inverse);
+		border-width: 2px;
+		opacity: 60%;
+	}
+	.ons-checkboxes__item--ghost .ons-checkbox__input,
+	.ons-checkboxes__item--ghost .ons-checkbox__input::after {
+		background: rgba(0, 0, 0, 0);
+		border-color: var(--ons-color-text-inverse);
+	}
+	.ons-checkboxes__item--ghost .ons-checkbox__input:focus + .ons-checkbox__label::before {
+		box-shadow:
+			0 0 0 1px var(--ons-color-input-border),
+			0 0 0 4px var(--ons-color-focus);
+		opacity: 100%;
+	}
+	.ons-checkboxes__item--ghost
+		.ons-checkbox__input:checked:not(:focus)
+		+ .ons-checkbox__label::before {
+		box-shadow: 0 0 0 1px var(--ons-color-text-inverse);
+	}
+</style>

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

@@ -1,14 +1,14 @@
-A checkbox element with various styling and labelling options. Its "checked" attribute can be bound to a Svelte boolean (true/false) variable.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Checkbox } from "@onsvisual/svelte-components";
-
-  let checked = false;
-</script>
-
-<Checkbox id="checkbox" label="Select this" bind:checked />
-```
+A checkbox element with various styling and labelling options. Its "checked" attribute can be bound to a Svelte boolean (true/false) variable.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkbox } from "@onsvisual/svelte-components";
+
+  let checked = false;
+</script>
+
+<Checkbox id="checkbox" label="Select this" bind:checked />
+```

package/dist/inputs/Checkboxes/Checkboxes.stories.svelte

@@ -1,34 +1,34 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
-	import Checkbox from "../Checkbox/Checkbox.svelte";
-	import Checkboxes from "./Checkboxes.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import exampleDocs from "./docs/example.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Checkboxes",
-		component: Checkboxes,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-
-	const items = [
-		{ id: "ice-cream", label: "Ice cream", checked: true },
-		{ id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
-		{ id: "disabled", label: "Disabled option", checked: false, disabled: true }
-	];
-</script>
-
-<Story name="Default" args={{ label: "Select items", items }} />
-
-<Story name="Compact without label" args={{ items, compact: true }} />
-
-<Story name="Individually defined checkboxes" asChild parameters={withStoryDocs(exampleDocs)}>
-	<Checkboxes label="Select items">
-		<Checkbox id="ice-cream" label="Ice cream" />
-		<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
-		<Checkbox id="disabled" label="Disabled option" disabled />
-	</Checkboxes>
-</Story>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import Checkbox from "../Checkbox/Checkbox.svelte";
+	import Checkboxes from "./Checkboxes.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Checkboxes",
+		component: Checkboxes,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const items = [
+		{ id: "ice-cream", label: "Ice cream", checked: true },
+		{ id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
+		{ id: "disabled", label: "Disabled option", checked: false, disabled: true }
+	];
+</script>
+
+<Story name="Default" args={{ label: "Select items", items }} />
+
+<Story name="Compact without label" args={{ items, compact: true }} />
+
+<Story name="Individually defined checkboxes" asChild parameters={withStoryDocs(exampleDocs)}>
+	<Checkboxes label="Select items">
+		<Checkbox id="ice-cream" label="Ice cream" />
+		<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
+		<Checkbox id="disabled" label="Disabled option" disabled />
+	</Checkboxes>
+</Story>

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -1,62 +1,62 @@
-<script>
-	import { setContext } from "svelte";
-	import { writable } from "svelte/store";
-	import Checkbox from "../Checkbox/Checkbox.svelte";
-
-	/**
-	 * Title/legend for parent <fieldset>
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Visually hide the title/legend
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * Descriptive "how to" label for inputs
-	 * @type {string|null}
-	 */
-	export let label = null;
-	/** Optional: Define the checkboxes as an array of {id, label, checked, description?}
-	 * @type {object[]|null}
-	 */
-	export let items = null;
-	/** Compact mode (no borders)
-	 * @type {boolean}
-	 */
-	export let compact = false;
-	/** Binding for selected checkboxes (if checkboxes are defined as "items")
-	 * @type {object[]}
-	 */
-	export let value = [];
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-
-	const checkboxes = writable([]);
-	setContext("checkboxes", checkboxes);
-</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-checkboxes__label">{label}</p>
-		{/if}
-		<div class="ons-checkboxes__items">
-			<slot />
-			{#if Array.isArray(items)}
-				{#each items as item}
-					<Checkbox {item} bind:group={value} {compact} on:change />
-				{/each}
-			{/if}
-		</div>
-	</div>
-</fieldset>
+<script>
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+	import Checkbox from "../Checkbox/Checkbox.svelte";
+
+	/**
+	 * Title/legend for parent <fieldset>
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Visually hide the title/legend
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Descriptive "how to" label for inputs
+	 * @type {string|null}
+	 */
+	export let label = null;
+	/** Optional: Define the checkboxes as an array of {id, label, checked, description?}
+	 * @type {object[]|null}
+	 */
+	export let items = null;
+	/** Compact mode (no borders)
+	 * @type {boolean}
+	 */
+	export let compact = false;
+	/** Binding for selected checkboxes (if checkboxes are defined as "items")
+	 * @type {object[]}
+	 */
+	export let value = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	const checkboxes = writable([]);
+	setContext("checkboxes", checkboxes);
+</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-checkboxes__label">{label}</p>
+		{/if}
+		<div class="ons-checkboxes__items">
+			<slot />
+			{#if Array.isArray(items)}
+				{#each items as item}
+					<Checkbox {item} bind:group={value} {compact} on:change />
+				{/each}
+			{/if}
+		</div>
+	</div>
+</fieldset>

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

@@ -1,20 +1,20 @@
-A component for defining a group of [checkbox](/docs/inputs-checkbox--docs) elements, whose checked values can be bound to Svelte variables, or grouped in an array.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes). (Note: In some use cases, it may be preferable to use raw HTML `<input type="checkbox">` components and style these using CSS.)
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Checkboxes } from "@onsvisual/svelte-components";
-
-  let items = [
-    { id: "ice-cream", label: "Ice cream", checked: true },
-    { id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
-    { id: "disabled", label: "Disabled option", checked: false, disabled: true },
-  ];
-
-  let selected = []; // An array of the selected items
-</script>
-
-<Checkboxes {items} bind:value={selected} label="Select items">
-```
+A component for defining a group of [checkbox](/docs/inputs-checkbox--docs) elements, whose checked values can be bound to Svelte variables, or grouped in an array.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes). (Note: In some use cases, it may be preferable to use raw HTML `<input type="checkbox">` components and style these using CSS.)
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkboxes } from "@onsvisual/svelte-components";
+
+  let items = [
+    { id: "ice-cream", label: "Ice cream", checked: true },
+    { id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
+    { id: "disabled", label: "Disabled option", checked: false, disabled: true },
+  ];
+
+  let selected = []; // An array of the selected items
+</script>
+
+<Checkboxes {items} bind:value={selected} label="Select items">
+```

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

@@ -1,16 +1,16 @@
-In this example, the child textboxes are defined explicitly.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Checkbox, Checkboxes } from "@onsvisual/svelte-components";
-
-  let selected = []; // An array of the selected items
-</script>
-
-<Checkboxes label="Select items">
-  <Checkbox id="ice-cream" label="Ice cream" bind:group={selected} />
-  <Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" bind:group={selected} />
-  <Checkbox id="disabled" label="Disabled option" bind:group={selected} />
-</Checkboxes>
-```
+In this example, the child textboxes are defined explicitly.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkbox, Checkboxes } from "@onsvisual/svelte-components";
+
+  let selected = []; // An array of the selected items
+</script>
+
+<Checkboxes label="Select items">
+  <Checkbox id="ice-cream" label="Ice cream" bind:group={selected} />
+  <Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" bind:group={selected} />
+  <Checkbox id="disabled" label="Disabled option" bind:group={selected} />
+</Checkboxes>
+```