@onsvisual/svelte-components 1.0.36 → 1.0.38

package/dist/inputs/ButtonGroup/ButtonGroupItem.svelte

@@ -1,101 +1,101 @@
-<script>
-	import { getContext } from "svelte";
-
-	let { value = "", label = "" } = $props();
-
-	// Get the parent ButtonGroup context
-	const buttonGroup = getContext("buttonGroup");
-	const { groupName, selectedValue } = buttonGroup;
-
-	// Subscribe to selectedValue store
-	const currentSelected = $derived(selectedValue);
-	const selected = $derived($currentSelected === value);
-
-	function handleClick() {
-		selectedValue.set(value); // Update the store
-	}
-
-	let buttonRef;
-
-	function handleKeydown(event) {
-		const buttons = Array.from(document.querySelectorAll(`[name="${groupName}"]`));
-		const currentIndex = buttons.indexOf(buttonRef);
-
-		let newIndex = -1;
-
-		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-			newIndex = (currentIndex + 1) % buttons.length;
-		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-			newIndex = (currentIndex - 1 + buttons.length) % buttons.length;
-		} else if (event.key === "Enter" || event.key === " ") {
-			handleClick();
-			return;
-		}
-
-		if (newIndex !== -1) {
-			buttons[newIndex].focus();
-		}
-	}
-</script>
-
-<div class="button-container">
-	<input
-		type="radio"
-		id={value}
-		name={groupName}
-		{value}
-		checked={selected}
-		class="radio-input"
-		on:click={handleClick}
-		on:keydown={handleKeydown}
-		aria-checked={selected}
-		tabindex="0"
-		bind:this={buttonRef}
-	/>
-	<label for={value} class="button" class:selected on:click={handleClick}>
-		{label || value}
-	</label>
-</div>
-
-<style>
-	.button-container {
-		display: flex;
-	}
-
-	.radio-input {
-		position: absolute;
-		opacity: 0;
-		width: 0;
-		height: 0;
-	}
-
-	.button {
-		flex-grow: 0;
-		padding: 4px 8px;
-		border: none;
-		background: transparent;
-		font-size: 14px;
-		cursor: pointer;
-		border-radius: 6px;
-		transition:
-			background 0.2s ease,
-			color 0.2s ease;
-		color: #707071;
-		text-align: center;
-	}
-
-	.button:hover {
-		background-color: #e8e8e8;
-	}
-
-	.button:focus {
-		box-shadow: orange 0 0 0 2px;
-	}
-
-	.button.selected {
-		background: white;
-		font-weight: bold;
-		color: #206095;
-		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-	}
-</style>
+<script>
+	import { getContext } from "svelte";
+
+	let { value = "", label = "" } = $props();
+
+	// Get the parent ButtonGroup context
+	const buttonGroup = getContext("buttonGroup");
+	const { groupName, selectedValue } = buttonGroup;
+
+	// Subscribe to selectedValue store
+	const currentSelected = $derived(selectedValue);
+	const selected = $derived($currentSelected === value);
+
+	function handleClick() {
+		selectedValue.set(value); // Update the store
+	}
+
+	let buttonRef;
+
+	function handleKeydown(event) {
+		const buttons = Array.from(document.querySelectorAll(`[name="${groupName}"]`));
+		const currentIndex = buttons.indexOf(buttonRef);
+
+		let newIndex = -1;
+
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			newIndex = (currentIndex + 1) % buttons.length;
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			newIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+		} else if (event.key === "Enter" || event.key === " ") {
+			handleClick();
+			return;
+		}
+
+		if (newIndex !== -1) {
+			buttons[newIndex].focus();
+		}
+	}
+</script>
+
+<div class="button-container">
+	<input
+		type="radio"
+		id={value}
+		name={groupName}
+		{value}
+		checked={selected}
+		class="radio-input"
+		on:click={handleClick}
+		on:keydown={handleKeydown}
+		aria-checked={selected}
+		tabindex="0"
+		bind:this={buttonRef}
+	/>
+	<label for={value} class="button" class:selected on:click={handleClick}>
+		{label || value}
+	</label>
+</div>
+
+<style>
+	.button-container {
+		display: flex;
+	}
+
+	.radio-input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.button {
+		flex-grow: 0;
+		padding: 4px 8px;
+		border: none;
+		background: transparent;
+		font-size: 14px;
+		cursor: pointer;
+		border-radius: 6px;
+		transition:
+			background 0.2s ease,
+			color 0.2s ease;
+		color: #707071;
+		text-align: center;
+	}
+
+	.button:hover {
+		background-color: #e8e8e8;
+	}
+
+	.button:focus {
+		box-shadow: orange 0 0 0 2px;
+	}
+
+	.button.selected {
+		background: white;
+		font-weight: bold;
+		color: #206095;
+		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+	}
+</style>

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

@@ -1,21 +1,23 @@
-Radio inputs dressed up as a button group.
-
-<!-- prettier-ignore -->
-```html
-<ButtonGroup name="primary" legend="Choose an option">
-      <ButtonGroupItem value="1" label="Option 1" />
-      <ButtonGroupItem value="2" label="Option 2" />
-      <ButtonGroupItem value="3" label="Option 3" />
-</ButtonGroup>
-```
-
-To see what is selected, bind `value` to a variable e.g.
-
-<!-- prettier-ignore -->
-```html
-let selectedValue;
-
-<ButtonGroup name="primary" legend="Choose an option" bind:value="{selectedValue}">
-...
-</ButtonGroup>
-```
+<span class="ons-warning">This component is experimental</span>
+
+Radio inputs dressed up as a button group.
+
+<!-- prettier-ignore -->
+```html
+<ButtonGroup name="primary" legend="Choose an option">
+      <ButtonGroupItem value="1" label="Option 1" />
+      <ButtonGroupItem value="2" label="Option 2" />
+      <ButtonGroupItem value="3" label="Option 3" />
+</ButtonGroup>
+```
+
+To see what is selected, bind `value` to a variable e.g.
+
+<!-- prettier-ignore -->
+```html
+let selectedValue;
+
+<ButtonGroup name="primary" legend="Choose an option" bind:value="{selectedValue}">
+...
+</ButtonGroup>
+```

package/dist/inputs/Checkbox/Checkbox.stories.svelte

@@ -1,34 +1,34 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Checkbox from "./Checkbox.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Checkbox",
-		component: Checkbox,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<div
-		style:padding="12px"
-		style:background={args?.variant === "ghost" ? "var(--ons-color-ocean-blue)" : null}
-		style:color={args?.variant === "ghost" ? "white" : null}
-	>
-		<Checkbox {...args} />
-	</div>
-{/snippet}
-
-<Story name="Default" args={{ id: "checkbox1", label: "Select this" }} {template} />
-
-<Story name="Compact" args={{ id: "checkbox2", label: "Select this", compact: true }} {template} />
-
-<Story
-	name="Ghost checkbox"
-	args={{ id: "checkbox3", label: "Select this", variant: "ghost" }}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Checkbox from "./Checkbox.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Checkbox",
+		component: Checkbox,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div
+		style:padding="12px"
+		style:background={args?.variant === "ghost" ? "var(--ons-color-ocean-blue)" : null}
+		style:color={args?.variant === "ghost" ? "white" : null}
+	>
+		<Checkbox {...args} />
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ id: "checkbox1", label: "Select this" }} {template} />
+
+<Story name="Compact" args={{ id: "checkbox2", label: "Select this", compact: true }} {template} />
+
+<Story
+	name="Ghost checkbox"
+	args={{ id: "checkbox3", label: "Select this", variant: "ghost" }}
+	{template}
+/>

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>