@onsvisual/svelte-components 1.0.40 → 1.0.42

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

@@ -1,27 +1,27 @@
-An extended alternative to an HTML `<select>` component (see Dropdown), with auto-complete and the ability to have a custom **loadOptions** function.
-
-This component is a Svelte wrapper for the GOV.UK [accessible-autocomplete](https://github.com/alphagov/accessible-autocomplete).
-
-(Note: This component is not fully compatible with a previous version of the same component based on svelte-select.)
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { AccessibleSelect } from "@onsvisual/svelte-components";
-
-  const values = [
-    { id: "1", label: "one" },
-    { id: "2", label: "two" },
-    { id: "3", label: "three" },
-  ];
-  
-
-  // Bind the <select> value to a variable (reactive)
-  let value;
-
-  // Define your own function on change
-  const handleChange = (e) => console.log(e);
-</script>
-
-<AccessibleSelect {options} bind:value on:change="{handleChange}" />
-```
+An extended alternative to an HTML `<select>` component (see Dropdown), with auto-complete and the ability to have a custom **loadOptions** function.
+
+This component is a Svelte wrapper for the GOV.UK [accessible-autocomplete](https://github.com/alphagov/accessible-autocomplete).
+
+(Note: This component is not fully compatible with a previous version of the same component based on svelte-select.)
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { AccessibleSelect } from "@onsvisual/svelte-components";
+
+  const values = [
+    { id: "1", label: "one" },
+    { id: "2", label: "two" },
+    { id: "3", label: "three" },
+  ];
+  
+
+  // Bind the <select> value to a variable (reactive)
+  let value;
+
+  // Define your own function on change
+  const handleChange = (e) => console.log(e);
+</script>
+
+<AccessibleSelect {options} bind:value on:change="{handleChange}" />
+```

package/dist/inputs/Textarea/Textarea.stories.svelte

@@ -1,40 +1,40 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Textarea from "./Textarea.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Textarea",
-		component: Textarea,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<div style:padding="12px">
-		<Textarea {...args} />
-	</div>
-{/snippet}
-
-<Story
-	name="Default"
-	args={{
-		id: "text",
-		label: "Enter some text"
-	}}
-	{template}
-/>
-
-<Story
-	name="Hidden label and character limit"
-	args={{
-		id: "text",
-		label: "Enter some text",
-		hideLabel: true,
-		charLimit: 200
-	}}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Textarea from "./Textarea.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Textarea",
+		component: Textarea,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Textarea {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		id: "text",
+		label: "Enter some text"
+	}}
+	{template}
+/>
+
+<Story
+	name="Hidden label and character limit"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		hideLabel: true,
+		charLimit: 200
+	}}
+	{template}
+/>

package/dist/inputs/Textarea/Textarea.svelte

@@ -1,113 +1,113 @@
-<script>
-	import { createEventDispatcher } from "svelte";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * ID for &lt;textarea&gt; element
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Name for &lt;textarea&gt; element
-	 * @type {string|null}
-	 */
-	export let name = id;
-	/**
-	 * A prop to bind to for the entered value
-	 * @type {string|null}
-	 */
-	export let value = null;
-	/**
-	 * A label to describe the &lt;textarea&gt; element (expected for accessibility)
-	 * @type {string|null}
-	 */
-	export let label = "Enter some text";
-	/**
-	 * Visually hide the label
-	 * @type {boolean}
-	 */
-	export let hideLabel = false;
-	/**
-	 * An optional description to help users know what to enter
-	 * @type {string|null}
-	 */
-	export let description = null;
-	/**
-	 * The maximum number of characters that can be entered (optional)
-	 * @type {number|null}
-	 */
-	export let charLimit = null;
-	/**
-	 * The height of the &lt;textarea&gt; element in rows
-	 * @type {number}
-	 */
-	export let rows = 8;
-	/**
-	 * The width of the &lt;textarea&gt; element in characters
-	 * @type {number}
-	 */
-	export let width = 30;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-
-	$: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
-</script>
-
-<div class="ons-field {cls}">
-	{#if label}
-		<label
-			class="ons-label ons-label--with-description"
-			class:ons-u-vh={hideLabel}
-			aria-describedby={description ? `${id}-description-hint` : null}
-			for={id}>{label}</label
-		>
-	{/if}
-	{#if description}
-		<span id="{id}-description-hint" class="ons-label__description ons-input--with-description"
-			>{description}</span
-		>
-	{/if}
-	<textarea
-		{id}
-		{name}
-		bind:value
-		class="ons-input ons-input--textarea {Number.isInteger(width) ? `ons-input--w-${width}` : null}"
-		class:ons-js-char-limit-input={charLimit}
-		class:ons-input--limit-reached={remaining === 0}
-		{rows}
-		maxlength={charLimit}
-		data-char-limit-ref="{id}-lim"
-		aria-describedby="textarea-char-limit-lim"
-	></textarea>
-	{#if Number.isInteger(remaining)}
-		<span
-			id="textarea-char-limit-lim"
-			class="ons-input__limit ons-u-fs-s--b ons-u-mt-xs"
-			class:ons-input__limit--reached={remaining === 0}
-			data-charcount-singular="You have {remaining} character remaining"
-			data-charcount-plural="You have {remaining} characters remaining"
-			data-charcount-limit-singular=""
-			data-charcount-limit-plural=""
-			aria-live={remaining === 0 ? "assertive" : "polite"}
-		>
-			You have {remaining}
-			{remaining === 1 ? "character" : "characters"} remaining
-		</span>
-	{/if}
-</div>
-
-<style>
-	.ons-input--textarea {
-		background: var(--background, white);
-		border-color: currentColor;
-	}
-	.ons-input--textarea:focus {
-		box-shadow:
-			0 0 0 1px currentColor,
-			0 0 0 4px #fbc900;
-	}
-</style>
+<script>
+	import { createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * ID for &lt;textarea&gt; element
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Name for &lt;textarea&gt; element
+	 * @type {string|null}
+	 */
+	export let name = id;
+	/**
+	 * A prop to bind to for the entered value
+	 * @type {string|null}
+	 */
+	export let value = null;
+	/**
+	 * A label to describe the &lt;textarea&gt; element (expected for accessibility)
+	 * @type {string|null}
+	 */
+	export let label = "Enter some text";
+	/**
+	 * Visually hide the label
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * An optional description to help users know what to enter
+	 * @type {string|null}
+	 */
+	export let description = null;
+	/**
+	 * The maximum number of characters that can be entered (optional)
+	 * @type {number|null}
+	 */
+	export let charLimit = null;
+	/**
+	 * The height of the &lt;textarea&gt; element in rows
+	 * @type {number}
+	 */
+	export let rows = 8;
+	/**
+	 * The width of the &lt;textarea&gt; element in characters
+	 * @type {number}
+	 */
+	export let width = 30;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	$: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
+</script>
+
+<div class="ons-field {cls}">
+	{#if label}
+		<label
+			class="ons-label ons-label--with-description"
+			class:ons-u-vh={hideLabel}
+			aria-describedby={description ? `${id}-description-hint` : null}
+			for={id}>{label}</label
+		>
+	{/if}
+	{#if description}
+		<span id="{id}-description-hint" class="ons-label__description ons-input--with-description"
+			>{description}</span
+		>
+	{/if}
+	<textarea
+		{id}
+		{name}
+		bind:value
+		class="ons-input ons-input--textarea {Number.isInteger(width) ? `ons-input--w-${width}` : null}"
+		class:ons-js-char-limit-input={charLimit}
+		class:ons-input--limit-reached={remaining === 0}
+		{rows}
+		maxlength={charLimit}
+		data-char-limit-ref="{id}-lim"
+		aria-describedby="textarea-char-limit-lim"
+	></textarea>
+	{#if Number.isInteger(remaining)}
+		<span
+			id="textarea-char-limit-lim"
+			class="ons-input__limit ons-u-fs-s--b ons-u-mt-xs"
+			class:ons-input__limit--reached={remaining === 0}
+			data-charcount-singular="You have {remaining} character remaining"
+			data-charcount-plural="You have {remaining} characters remaining"
+			data-charcount-limit-singular=""
+			data-charcount-limit-plural=""
+			aria-live={remaining === 0 ? "assertive" : "polite"}
+		>
+			You have {remaining}
+			{remaining === 1 ? "character" : "characters"} remaining
+		</span>
+	{/if}
+</div>
+
+<style>
+	.ons-input--textarea {
+		background: var(--background, white);
+		border-color: currentColor;
+	}
+	.ons-input--textarea:focus {
+		box-shadow:
+			0 0 0 1px currentColor,
+			0 0 0 4px #fbc900;
+	}
+</style>

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

@@ -1,16 +1,16 @@
-A standard `<input>` element with Svelte bindings and events.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Input } from "@onsvisual/svelte-components";
-
-  // Bind the <input> value to a variable (reactive)
-  let value;
-
-  // Define your own function on change
-  const handleChange = (e) => console.log(e);
-</script>
-
-<Input bind:value on:change="{handleChange}" />
-```
+A standard `<input>` element with Svelte bindings and events.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Input } from "@onsvisual/svelte-components";
+
+  // Bind the <input> value to a variable (reactive)
+  let value;
+
+  // Define your own function on change
+  const handleChange = (e) => console.log(e);
+</script>
+
+<Input bind:value on:change="{handleChange}" />
+```