@onsvisual/svelte-components 1.0.44 → 1.0.45

package/dist/inputs/ButtonGroup/ButtonGroup.svelte

@@ -1,57 +1,57 @@
-<script>
-	import { setContext } from "svelte";
-	import { writable } from "svelte/store";
-
-	let { name = "", legend = "", value, visuallyHideLegend = false } = $props();
-
-	// create the store
-	const selectedValue = writable(value);
-
-	//  When store changes and update prop
-	$effect(() => {
-		selectedValue.set(value);
-	});
-
-	const currentValue = $derived(selectedValue);
-
-	$effect(() => {
-		if ($currentValue !== value) {
-			value = $currentValue;
-		}
-	});
-
-	// Create a context to share with child Button components
-	setContext("buttonGroup", {
-		groupName: name,
-		selectedValue
-	});
-</script>
-
-<fieldset class="button-group">
-	{#if legend}
-		<legend class:ons-u-vh={visuallyHideLegend}>{legend}</legend>
-	{/if}
-	<div class="buttons">
-		<slot />
-	</div>
-</fieldset>
-
-<style>
-	.button-group {
-		display: inline-block;
-	}
-
-	legend {
-		font-weight: bold;
-		margin-bottom: 0.5rem;
-	}
-
-	.buttons {
-		display: flex;
-		gap: 8px;
-		background: #f5f5f6;
-		padding: 4px;
-		border-radius: 8px;
-		justify-content: space-between;
-	}
-</style>
+<script>
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+
+	let { name = "", legend = "", value, visuallyHideLegend = false } = $props();
+
+	// create the store
+	const selectedValue = writable(value);
+
+	//  When store changes and update prop
+	$effect(() => {
+		selectedValue.set(value);
+	});
+
+	const currentValue = $derived(selectedValue);
+
+	$effect(() => {
+		if ($currentValue !== value) {
+			value = $currentValue;
+		}
+	});
+
+	// Create a context to share with child Button components
+	setContext("buttonGroup", {
+		groupName: name,
+		selectedValue
+	});
+</script>
+
+<fieldset class="button-group">
+	{#if legend}
+		<legend class:ons-u-vh={visuallyHideLegend}>{legend}</legend>
+	{/if}
+	<div class="buttons">
+		<slot />
+	</div>
+</fieldset>
+
+<style>
+	.button-group {
+		display: inline-block;
+	}
+
+	legend {
+		font-weight: bold;
+		margin-bottom: 0.5rem;
+	}
+
+	.buttons {
+		display: flex;
+		gap: 8px;
+		background: #f5f5f6;
+		padding: 4px;
+		border-radius: 8px;
+		justify-content: space-between;
+	}
+</style>

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,23 +1,23 @@
-<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>
-```
+<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}
+/>