fix(Toggle): forward all events including child components

src/lib/components/toggle/ContentLeft.svelte

@@ -3,6 +3,11 @@
 	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: TOGGLE_CONTEXT_ID,
@@ -13,16 +18,17 @@
 	const { name, toggleOff }: { name: string; toggleOff: () => void } =
 		getContext(TOGGLE_CONTEXT_ID);
 
-	const defaultClass = 'mr-3';
+	const defaultClass = 'mr-3 cursor-pointer';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <span
-	class={finalClass}
-	style={$$props.style}
 	id="{name}-label-left"
+	class={finalClass}
 	on:click={toggleOff}
-	on:keypress
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class', 'id', 'on:click'])}
 >
 	<slot name="label" />
 	<slot name="description" />

src/lib/components/toggle/ContentRight.svelte

@@ -3,6 +3,11 @@
 	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: TOGGLE_CONTEXT_ID,
@@ -12,16 +17,17 @@
 
 	const { name, toggleOn }: { name: string; toggleOn: () => void } = getContext(TOGGLE_CONTEXT_ID);
 
-	const defaultClass = 'ml-3';
+	const defaultClass = 'ml-3 cursor-pointer';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <span
-	class={finalClass}
-	style={$$props.style}
 	id="{name}-label-right"
+	class={finalClass}
 	on:click={toggleOn}
-	on:keypress
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class', 'id', 'on:click'])}
 >
 	<slot name="label" />
 	<slot name="description" />

src/lib/components/toggle/Description.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass = 'text-sm text-light-secondary-content dark:text-dark-secondary-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} style={$$props.style}><slot /></span>
+<span
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}><slot /></span
+>

src/lib/components/toggle/Label.svelte

@@ -1,8 +1,19 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} style={$$props.style}><slot /> </span>
+<span
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+	><slot />
+</span>

src/lib/components/toggle/LeftIcon.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import type { MaterialIcon } from '../../types';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	export let icon: MaterialIcon;
 
 	const defaultClass = 'material-icons text-sm absolute left-0.5';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} style={$$props.style}>{icon}</span>
+<span
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}>{icon}</span
+>

src/lib/components/toggle/RightIcon.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import type { MaterialIcon } from '../../types';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	export let icon: MaterialIcon;
 
 	const defaultClass = 'material-icons text-sm absolute right-0.5';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} style={$$props.style}>{icon}</span>
+<span
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}>{icon}</span
+>