diff --git a/svelte/demo/src/daisyui/main.ts b/svelte/demo/src/daisyui/main.ts
index d8ec087a54..49f8232ce6 100644
--- a/svelte/demo/src/daisyui/main.ts
+++ b/svelte/demo/src/daisyui/main.ts
@@ -1,5 +1,6 @@
 import App from './App.svelte';
+import {mount} from 'svelte';
 
-export const main = new App({
+export const main = mount(App, {
 	target: document.getElementById('root')!,
 });
diff --git a/svelte/demo/src/daisyui/samples/accordion/Accordion.svelte b/svelte/demo/src/daisyui/samples/accordion/Accordion.svelte
index 3fe7b5247d..10fe0def07 100644
--- a/svelte/demo/src/daisyui/samples/accordion/Accordion.svelte
+++ b/svelte/demo/src/daisyui/samples/accordion/Accordion.svelte
@@ -2,18 +2,23 @@
 	import {type AccordionProps, createAccordion} from '@agnos-ui/svelte-headless/components/accordion';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 	import {setAccordionApi} from './accordion';
+	import type {Snippet} from 'svelte';
 
-	type $$Props = Partial<Pick<AccordionProps, 'closeOthers' | 'onItemShown' | 'onItemHidden' | 'itemDestroyOnHide' | 'className'>>;
+	let {
+		children,
+		...props
+	}: Partial<Pick<AccordionProps, 'closeOthers' | 'onItemShown' | 'onItemHidden' | 'itemDestroyOnHide' | 'className'>> & {children: Snippet} =
+		$props();
 
 	const widget = callWidgetFactory({
 		factory: createAccordion,
 		widgetName: 'accordion',
-		$$props,
+		props,
 	});
 	setAccordionApi(widget.api);
-	$: widget.patchChangedProps($$props);
+	$effect(() => widget.patchChangedProps({...props}));
 </script>
 
 <div class="flex flex-col gap-2" use:widget.directives.accordionDirective>
-	<slot />
+	{@render children()}
 </div>
diff --git a/svelte/demo/src/daisyui/samples/accordion/AccordionItem.svelte b/svelte/demo/src/daisyui/samples/accordion/AccordionItem.svelte
index 0d196bc870..60e4e66d61 100644
--- a/svelte/demo/src/daisyui/samples/accordion/AccordionItem.svelte
+++ b/svelte/demo/src/daisyui/samples/accordion/AccordionItem.svelte
@@ -2,11 +2,19 @@
 	import {type AccordionItemProps, type AccordionItemWidget} from '@agnos-ui/svelte-headless/components/accordion';
 	import type {WidgetFactory} from '@agnos-ui/svelte-headless/types';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
-	import {onMount} from 'svelte';
+	import {onMount, type Snippet} from 'svelte';
 	import {createSimpleClassTransition} from '@agnos-ui/svelte-headless/services/transitions/simpleClassTransition';
 	import {getAccordionApi} from './accordion';
 
-	type $$Props = Partial<Pick<AccordionItemProps, 'className' | 'destroyOnHide' | 'onVisibleChange' | 'visible' | 'onHidden' | 'onShown' | 'id'>>;
+	let {
+		header,
+		children,
+		visible = $bindable(),
+		...props
+	}: Partial<Pick<AccordionItemProps, 'className' | 'destroyOnHide' | 'onVisibleChange' | 'visible' | 'onHidden' | 'onShown' | 'id'>> & {
+		header: Snippet;
+		children: Snippet;
+	} = $props();
 
 	const transition = createSimpleClassTransition({
 		showClasses: ['collapse-open'],
@@ -14,10 +22,9 @@
 	});
 
 	const {registerItem} = getAccordionApi();
-	export let visible: boolean | undefined = undefined;
 	const widget = callWidgetFactory({
 		factory: registerItem as WidgetFactory<AccordionItemWidget>,
-		$$props,
+		props: {visible, ...props},
 		events: {
 			onVisibleChange: (event) => {
 				visible = event;
@@ -32,9 +39,9 @@
 		directives: {itemDirective, toggleDirective, transitionDirective, bodyContainerAttrsDirective},
 		api: {toggle},
 	} = widget;
-	$: widget.patchChangedProps($$props);
+	$effect(() => widget.patchChangedProps({visible, ...props}));
 
-	const onEnter = (e: KeyboardEvent) => {
+	const onkeydown = (e: KeyboardEvent) => {
 		if (e.key === 'Enter') {
 			toggle();
 		}
@@ -43,12 +50,12 @@
 </script>
 
 <div class="collapse collapse-arrow bg-base-200" use:itemDirective use:transitionDirective>
-	<div role="button" tabindex="0" class="collapse-title text-xl font-medium focus-visible:outline-none" use:toggleDirective on:keydown={onEnter}>
-		<slot name="header"></slot>
+	<div role="button" tabindex="0" class="collapse-title text-xl font-medium focus-visible:outline-none" use:toggleDirective {onkeydown}>
+		{@render header()}
 	</div>
 	<div class="collapse-content" use:bodyContainerAttrsDirective>
 		{#if $shouldBeInDOM$}
-			<slot name="body"></slot>
+			{@render children()}
 		{/if}
 	</div>
 </div>
diff --git a/svelte/demo/src/daisyui/samples/accordion/Default.route.svelte b/svelte/demo/src/daisyui/samples/accordion/Default.route.svelte
index b40ab5e369..2c780c2266 100644
--- a/svelte/demo/src/daisyui/samples/accordion/Default.route.svelte
+++ b/svelte/demo/src/daisyui/samples/accordion/Default.route.svelte
@@ -5,15 +5,21 @@
 
 <Accordion closeOthers itemDestroyOnHide>
 	<AccordionItem visible>
-		<svelte:fragment slot="header">First header</svelte:fragment>
-		<svelte:fragment slot="body">First content</svelte:fragment>
+		{#snippet header()}
+			First header
+		{/snippet}
+		First content
 	</AccordionItem>
 	<AccordionItem>
-		<svelte:fragment slot="header">Second header</svelte:fragment>
-		<svelte:fragment slot="body">Second content</svelte:fragment>
+		{#snippet header()}
+			Second header
+		{/snippet}
+		Second content
 	</AccordionItem>
 	<AccordionItem>
-		<svelte:fragment slot="header">Third header</svelte:fragment>
-		<svelte:fragment slot="body">Third content</svelte:fragment>
+		{#snippet header()}
+			Third header
+		{/snippet}
+		Third content
 	</AccordionItem>
 </Accordion>
diff --git a/svelte/demo/src/daisyui/samples/alert/Alert.svelte b/svelte/demo/src/daisyui/samples/alert/Alert.svelte
index fd49add14d..1d18fe1552 100644
--- a/svelte/demo/src/daisyui/samples/alert/Alert.svelte
+++ b/svelte/demo/src/daisyui/samples/alert/Alert.svelte
@@ -4,7 +4,13 @@
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 	import {createSimpleClassTransition} from '@agnos-ui/svelte-headless/services/transitions/simpleClassTransition';
 	import closeIconSvg from '@agnos-ui/common/samples/common/close_icon.svg?raw';
-	type $$Props = Partial<Pick<AlertProps, 'className' | 'visible' | 'dismissible' | 'ariaCloseButtonLabel'>>;
+	import type {Snippet} from 'svelte';
+
+	let {
+		visible = $bindable(),
+		children,
+		...props
+	}: Partial<Pick<AlertProps, 'className' | 'visible' | 'dismissible' | 'ariaCloseButtonLabel'>> & {children: Snippet} = $props();
 
 	const transition = createSimpleClassTransition({
 		showClasses: ['transition-opacity'],
@@ -12,7 +18,7 @@
 		animationPendingHideClasses: ['opacity-0', 'transition-opacity'],
 	});
 
-	export const {
+	const {
 		stores: {className$, dismissible$, ariaCloseButtonLabel$, hidden$},
 		directives: {transitionDirective},
 		patchChangedProps,
@@ -20,7 +26,7 @@
 	} = callWidgetFactory({
 		factory: createAlert,
 		widgetName: 'alert',
-		$$props,
+		props: {...props, visible},
 		defaultConfig: {transition},
 		events: {
 			onVisibleChange: (event) => {
@@ -29,16 +35,14 @@
 		},
 	});
 
-	export let visible: boolean | undefined = undefined;
-
-	$: patchChangedProps($$props);
+	$effect(() => patchChangedProps({...props, visible}));
 </script>
 
 {#if !$hidden$}
 	<div role="alert" class="flex alert {$className$}" use:transitionDirective>
-		<slot />
+		{@render children()}
 		{#if $dismissible$}
-			<button class="btn btn-sm btn-circle btn-ghost ms-auto" on:click={api.close} aria-label={$ariaCloseButtonLabel$}>
+			<button class="btn btn-sm btn-circle btn-ghost ms-auto" onclick={api.close} aria-label={$ariaCloseButtonLabel$}>
 				{@html closeIconSvg}
 			</button>
 		{/if}
diff --git a/svelte/demo/src/daisyui/samples/alert/Default.route.svelte b/svelte/demo/src/daisyui/samples/alert/Default.route.svelte
index 3547999376..7f98c652bf 100644
--- a/svelte/demo/src/daisyui/samples/alert/Default.route.svelte
+++ b/svelte/demo/src/daisyui/samples/alert/Default.route.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import Alert from './Alert.svelte';
 
-	let visible = true;
+	let visible = $state(true);
 </script>
 
-<button class="btn btn-primary" on:click={() => (visible = true)}>Reset Alert</button>
+<button class="btn btn-primary" onclick={() => (visible = true)}>Reset Alert</button>
 <div class="flex flex-col gap-3 mt-3">
 	<Alert className="alert-success" bind:visible>
 		<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"
diff --git a/svelte/demo/src/daisyui/samples/modal/Default.route.svelte b/svelte/demo/src/daisyui/samples/modal/Default.route.svelte
index 6bb448d84d..908ff2350c 100644
--- a/svelte/demo/src/daisyui/samples/modal/Default.route.svelte
+++ b/svelte/demo/src/daisyui/samples/modal/Default.route.svelte
@@ -1,11 +1,10 @@
-<script lang="ts">
-	import Modal from './Modal.svelte';
-
-	let visible = false;
+<script>
+	import {openModal} from './modal';
+	const onclick = () => openModal({children: modalContent, closeOnOutsideClick: true});
 </script>
 
-<Modal bind:visible closeOnOutsideClick>
+{#snippet modalContent()}
 	<h3 class="font-bold text-lg">A simple modal</h3>
 	<p class="py-4">Press ESC key, click on ✕ button or click outside the modal to close</p>
-</Modal>
-<button class="btn" aria-haspopup="dialog" on:click={() => (visible = true)}> Open modal </button>
+{/snippet}
+<button class="btn" aria-haspopup="dialog" {onclick}> Open modal </button>
diff --git a/svelte/demo/src/daisyui/samples/modal/Modal.svelte b/svelte/demo/src/daisyui/samples/modal/Modal.svelte
index dd5965d5ed..edd5fdcdf1 100644
--- a/svelte/demo/src/daisyui/samples/modal/Modal.svelte
+++ b/svelte/demo/src/daisyui/samples/modal/Modal.svelte
@@ -1,20 +1,14 @@
 <script lang="ts">
 	import {createModal} from '@agnos-ui/svelte-headless/components/modal';
-	import type {ModalProps} from '@agnos-ui/svelte-headless/components/modal';
+	import type {DaisyModalProps} from './modal';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 
-	type $$Props = Partial<Pick<ModalProps, 'closeOnOutsideClick' | 'ariaCloseButtonLabel' | 'closeButton' | 'visible' | 'onVisibleChange'>>;
+	let {children, closeOnOutsideClick, visible = $bindable(), ...props}: DaisyModalProps = $props();
 
-	export const {
-		stores: {visible$, closeButton$},
-		directives: {closeButtonDirective, dialogDirective},
-		patchChangedProps,
-		patch,
-		api,
-	} = callWidgetFactory({
+	const widget = callWidgetFactory({
 		factory: createModal,
 		widgetName: 'modal',
-		$$props,
+		props: {visible, closeOnOutsideClick, ...props},
 		defaultConfig: {closeButton: true},
 		events: {
 			onVisibleChange: (event) => {
@@ -22,15 +16,19 @@
 			},
 		},
 	});
-	export let visible: boolean | undefined = undefined;
-	export let closeOnOutsideClick: boolean | undefined = undefined;
+	export const api = widget.api;
+	const {
+		stores: {closeButton$},
+		directives: {closeButtonDirective, dialogDirective},
+		patchChangedProps,
+	} = widget;
 
-	$: patchChangedProps($$props);
+	$effect(() => patchChangedProps({visible, closeOnOutsideClick, ...props}));
 </script>
 
-<dialog class="modal modal-bottom sm:modal-middle" on:close={api.close} use:dialogDirective>
+<dialog class="modal modal-bottom sm:modal-middle" onclose={api.close} use:dialogDirective>
 	<div class="modal-box">
-		<slot />
+		{@render children()}
 		{#if $closeButton$}
 			<form method="dialog">
 				<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" use:closeButtonDirective> ✕ </button>
@@ -39,7 +37,7 @@
 	</div>
 	{#if closeOnOutsideClick}
 		<form method="dialog" class="modal-backdrop">
-			<button on:click={api.close}>Close</button>
+			<button onclick={api.close}>Close</button>
 		</form>
 	{/if}
 </dialog>
diff --git a/svelte/demo/src/daisyui/samples/modal/modal.ts b/svelte/demo/src/daisyui/samples/modal/modal.ts
new file mode 100644
index 0000000000..c03ae95a99
--- /dev/null
+++ b/svelte/demo/src/daisyui/samples/modal/modal.ts
@@ -0,0 +1,22 @@
+import type {ModalProps} from '@agnos-ui/svelte-headless/components/modal';
+import Modal from './Modal.svelte';
+import {mount, unmount, type Snippet} from 'svelte';
+
+export type DaisyModalProps = Partial<
+	Pick<ModalProps, 'closeOnOutsideClick' | 'ariaCloseButtonLabel' | 'closeButton' | 'visible' | 'onVisibleChange'>
+> & {children: Snippet};
+
+export async function openModal(options: DaisyModalProps) {
+	const target = document.createElement('div');
+	document.body.append(target);
+	const component = mount(Modal, {
+		target,
+		props: options,
+	});
+	try {
+		return await component.api.open();
+	} finally {
+		target.remove();
+		unmount(component);
+	}
+}
diff --git a/svelte/demo/src/daisyui/samples/pagination/Pagination.svelte b/svelte/demo/src/daisyui/samples/pagination/Pagination.svelte
index 56b93340c7..a8f035e0e3 100644
--- a/svelte/demo/src/daisyui/samples/pagination/Pagination.svelte
+++ b/svelte/demo/src/daisyui/samples/pagination/Pagination.svelte
@@ -3,19 +3,12 @@
 	import {createPagination} from '@agnos-ui/svelte-headless/components/pagination';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 
-	type $$Props = Partial<PaginationProps>;
-
-	/**
-	 *  The current page.
-	 *
-	 *  Page numbers start with `1`.
-	 */
-	export let page: $$Props['page'] = undefined;
+	let {page = $bindable(), ...props}: Partial<PaginationProps> = $props();
 
 	const widget = callWidgetFactory({
 		factory: createPagination,
 		widgetName: 'pagination',
-		$$props,
+		props: {...props, page},
 		events: {
 			onPageChange: (value: number) => {
 				page = value;
@@ -40,7 +33,8 @@
 		state$,
 		actions: {first, previous, next, last},
 	} = widget;
-	$: widget.patchChangedProps($$props);
+
+	$effect(() => widget.patchChangedProps({...props, page}));
 </script>
 
 <nav aria-label={$ariaLabel$}>
@@ -49,7 +43,7 @@
 			<button
 				class="join-item btn btn-outline"
 				aria-label={$ariaFirstLabel$}
-				on:click={() => first()}
+				onclick={() => first()}
 				disabled={$previousDisabled$}
 				aria-disabled={$previousDisabled$ ? 'true' : null}
 				tabindex={$previousDisabled$ ? -1 : undefined}
@@ -62,20 +56,20 @@
 				class="join-item btn btn-outline"
 				disabled={$previousDisabled$}
 				aria-label={$ariaPreviousLabel$}
-				on:click={() => previous()}
+				onclick={() => previous()}
 				tabindex={$previousDisabled$ ? -1 : undefined}
 				aria-disabled={$previousDisabled$ ? 'true' : null}
 			>
 				<span aria-hidden="true"> ‹ </span>
 			</button>
 		{/if}
-		{#each $state$.pages as page, i}
+		{#each $state$.pages as page}
 			<button
 				class="join-item btn btn-outline"
 				class:btn-active={page === $state$.page}
 				aria-current={page === $state$.page ? 'page' : null}
 				tabindex={page === -1 ? -1 : $state$.disabled ? -1 : undefined}
-				on:click={page === -1 ? () => {} : () => widget.actions.select(page)}
+				onclick={page === -1 ? () => {} : () => widget.actions.select(page)}
 				disabled={page === -1 || $state$.disabled}
 				>{page}
 				{#if $state$.page === page}<span class="sr-only">{$state$.activeLabel}</span>{/if}
@@ -86,7 +80,7 @@
 				class="join-item btn btn-outline"
 				disabled={$nextDisabled$}
 				aria-label={$ariaNextLabel$}
-				on:click={() => next()}
+				onclick={() => next()}
 				tabindex={$nextDisabled$ ? -1 : undefined}
 				aria-disabled={$nextDisabled$ ? 'true' : null}
 			>
@@ -97,7 +91,7 @@
 			<button
 				class="join-item btn btn-outline"
 				aria-label={$ariaLastLabel$}
-				on:click={() => last()}
+				onclick={() => last()}
 				disabled={$nextDisabled$}
 				tabindex={$nextDisabled$ ? -1 : undefined}
 				aria-disabled={$nextDisabled$ ? 'true' : null}
diff --git a/svelte/demo/src/daisyui/samples/progressbar/Progressbar.svelte b/svelte/demo/src/daisyui/samples/progressbar/Progressbar.svelte
index 6d105e90f6..89cf2f7602 100644
--- a/svelte/demo/src/daisyui/samples/progressbar/Progressbar.svelte
+++ b/svelte/demo/src/daisyui/samples/progressbar/Progressbar.svelte
@@ -2,14 +2,14 @@
 	import {createProgressbar, type ProgressbarProps} from '@agnos-ui/svelte-headless/components/progressbar';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 
-	type $$Props = Partial<Omit<ProgressbarProps, 'min'>>;
+	let props: Partial<Omit<ProgressbarProps, 'min'>> = $props();
 
 	const {
 		stores: {value$, max$, className$},
 		directives: {ariaDirective},
 		patchChangedProps,
-	} = callWidgetFactory({factory: createProgressbar, widgetName: 'progressbar', $$props});
-	$: patchChangedProps($$props);
+	} = callWidgetFactory({factory: createProgressbar, widgetName: 'progressbar', props});
+	$effect(() => patchChangedProps({...props}));
 </script>
 
-<progress use:ariaDirective class="progress {$className$}" value={$value$} max={$max$} />
+<progress use:ariaDirective class="progress {$className$}" value={$value$} max={$max$}></progress>
diff --git a/svelte/demo/src/daisyui/samples/progressbar/RadialProgress.svelte b/svelte/demo/src/daisyui/samples/progressbar/RadialProgress.svelte
index 556858094b..148249c0dc 100644
--- a/svelte/demo/src/daisyui/samples/progressbar/RadialProgress.svelte
+++ b/svelte/demo/src/daisyui/samples/progressbar/RadialProgress.svelte
@@ -2,15 +2,15 @@
 	import {createProgressbar, type ProgressbarProps} from '@agnos-ui/svelte-headless/components/progressbar';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 
-	type $$Props = Partial<ProgressbarProps>;
+	let props: Partial<ProgressbarProps> = $props();
 
-	const widget = callWidgetFactory({factory: createProgressbar, widgetName: 'progressbar', $$props});
+	const widget = callWidgetFactory({factory: createProgressbar, widgetName: 'progressbar', props});
 
 	const {
 		stores: {className$, percentage$},
 		directives: {ariaDirective},
 	} = widget;
-	$: widget.patchChangedProps($$props);
+	$effect(() => widget.patchChangedProps({...props}));
 
 	const percentFormat = new Intl.NumberFormat('default', {
 		style: 'percent',
diff --git a/svelte/demo/src/daisyui/samples/rating/Default.route.svelte b/svelte/demo/src/daisyui/samples/rating/Default.route.svelte
index b91a64491f..240a2464dc 100644
--- a/svelte/demo/src/daisyui/samples/rating/Default.route.svelte
+++ b/svelte/demo/src/daisyui/samples/rating/Default.route.svelte
@@ -1,9 +1,9 @@
 <script>
 	import Rating from './Rating.svelte';
 
-	let rating = 3;
-	let hovered = 0;
-	let left = 0;
+	let rating = $state(3);
+	let hovered = $state(0);
+	let left = $state(0);
 </script>
 
 <Rating bind:rating onHover={(e) => (hovered = e)} onLeave={(e) => (left = e)} />
diff --git a/svelte/demo/src/daisyui/samples/rating/Rating.svelte b/svelte/demo/src/daisyui/samples/rating/Rating.svelte
index 8818da598b..29e32d91cb 100644
--- a/svelte/demo/src/daisyui/samples/rating/Rating.svelte
+++ b/svelte/demo/src/daisyui/samples/rating/Rating.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
 	import {createRating, type RatingProps} from '@agnos-ui/svelte-headless/components/rating';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
+
 	// You can choose here the props (form the core) you want as input
-	type $$Props = Pick<Partial<RatingProps>, 'rating' | 'maxRating' | 'className' | 'onHover' | 'onLeave' | 'ariaLabel'>;
-	export let rating: number | undefined = undefined;
+	let {
+		rating = $bindable(),
+		...props
+	}: Pick<Partial<RatingProps>, 'rating' | 'maxRating' | 'className' | 'onHover' | 'onLeave' | 'ariaLabel'> = $props();
 
 	const widget = callWidgetFactory({
 		factory: createRating,
 		widgetName: 'rating',
-		$$props,
+		props: {...props, rating},
 		events: {
 			onRatingChange: (value: number) => {
 				rating = value;
@@ -20,15 +23,15 @@
 		stores: {visibleRating$, stars$, className$, ariaLabel$},
 		actions: {hover, click, leave},
 	} = widget;
-	$: widget.patchChangedProps($$props);
+	$effect(() => widget.patchChangedProps({...props, rating}));
 </script>
 
 <div class="rating {$className$}">
 	{#each $stars$ as { index } (index)}
 		<input
-			on:mouseleave={leave}
-			on:mouseenter={() => hover(index + 1)}
-			on:click={() => click(index + 1)}
+			onmouseleave={leave}
+			onmouseenter={() => hover(index + 1)}
+			onclick={() => click(index + 1)}
 			type="radio"
 			name="rating-1"
 			class="mask mask-star"
diff --git a/svelte/demo/src/daisyui/samples/slider/Default.route.svelte b/svelte/demo/src/daisyui/samples/slider/Default.route.svelte
index 258fb9c292..6448756e82 100644
--- a/svelte/demo/src/daisyui/samples/slider/Default.route.svelte
+++ b/svelte/demo/src/daisyui/samples/slider/Default.route.svelte
@@ -1,6 +1,6 @@
 <script>
 	import Slider from './Slider.svelte';
-	let sliderValues = [20];
+	let sliderValues = $state([20]);
 </script>
 
 <h2 class="text-lg mb-2">DaisyUI Example</h2>
diff --git a/svelte/demo/src/daisyui/samples/slider/Slider.svelte b/svelte/demo/src/daisyui/samples/slider/Slider.svelte
index b2ea81bf4e..5091b27836 100644
--- a/svelte/demo/src/daisyui/samples/slider/Slider.svelte
+++ b/svelte/demo/src/daisyui/samples/slider/Slider.svelte
@@ -2,14 +2,12 @@
 	import {createSlider, type SliderProps} from '@agnos-ui/svelte-headless/components/slider';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 
-	type $$Props = Partial<Pick<SliderProps, 'min' | 'max' | 'values' | 'stepSize' | 'className'>>;
-
-	export let values: number[] | undefined = undefined;
+	let {values = $bindable(), ...props}: Partial<Pick<SliderProps, 'min' | 'max' | 'values' | 'stepSize' | 'className'>> = $props();
 
 	const widget = callWidgetFactory({
 		factory: createSlider,
 		widgetName: 'slider',
-		$$props,
+		props: {...props, values},
 		events: {
 			onValuesChange: (value: number[]) => {
 				values = value;
@@ -21,7 +19,7 @@
 		directives: {sliderDirective},
 		patchChangedProps,
 	} = widget;
-	$: patchChangedProps($$props);
+	$effect(() => patchChangedProps({...props, values}));
 </script>
 
 <input
@@ -33,8 +31,8 @@
 	step={$stepSize$}
 	class="range"
 	aria-label={$sortedHandles$[0].ariaLabel}
-	on:click={widget.actions.click}
-	on:keydown={(e) => widget.actions.keydown(e, 0)}
-	on:mousedown={(e) => widget.actions.mouseDown(e, 0)}
-	on:touchstart={(e) => widget.actions.touchStart(e, 0)}
+	onclick={widget.actions.click}
+	onkeydown={(e) => widget.actions.keydown(e, 0)}
+	onmousedown={(e) => widget.actions.mouseDown(e, 0)}
+	ontouchstart={(e) => widget.actions.touchStart(e, 0)}
 />
diff --git a/svelte/demo/src/daisyui/samples/toast/Default.route.svelte b/svelte/demo/src/daisyui/samples/toast/Default.route.svelte
index 25213d873e..86a4cce483 100644
--- a/svelte/demo/src/daisyui/samples/toast/Default.route.svelte
+++ b/svelte/demo/src/daisyui/samples/toast/Default.route.svelte
@@ -1,11 +1,11 @@
 <script>
 	import Toast from './Toast.svelte';
 
-	let visible = true;
+	let visible = $state(true);
 </script>
 
 <div class="h-[215px]">
-	<button class="btn btn-primary" on:click={() => (visible = true)}>Reset Toast</button>
+	<button class="btn btn-primary" onclick={() => (visible = true)}>Reset Toast</button>
 	<div class="toast">
 		<Toast className="alert-success" bind:visible>This is a success toast</Toast>
 		<Toast className="alert-error" dismissible={false}>This is an error toast</Toast>
diff --git a/svelte/demo/src/daisyui/samples/toast/Toast.svelte b/svelte/demo/src/daisyui/samples/toast/Toast.svelte
index 7890add86c..acb481ac69 100644
--- a/svelte/demo/src/daisyui/samples/toast/Toast.svelte
+++ b/svelte/demo/src/daisyui/samples/toast/Toast.svelte
@@ -2,31 +2,36 @@
 	import {createToast, type ToastProps as Props} from '@agnos-ui/svelte-headless/components/toast';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
 	import closeIconSvg from '@agnos-ui/common/samples/common/close_icon.svg?raw';
-	type $$Props = Partial<Pick<Props, 'className' | 'visible' | 'dismissible' | 'ariaCloseButtonLabel'>>;
-	export const {
+	import type {Snippet} from 'svelte';
+
+	let {
+		visible = $bindable(),
+		children,
+		...props
+	}: Partial<Pick<Props, 'className' | 'visible' | 'dismissible' | 'ariaCloseButtonLabel'>> & {children: Snippet} = $props();
+
+	const {
 		stores: {className$, dismissible$, ariaCloseButtonLabel$, hidden$},
 		patchChangedProps,
 		api,
 	} = callWidgetFactory({
 		factory: createToast,
 		widgetName: 'toast',
-		$$props,
+		props: {...props, visible},
 		events: {
 			onVisibleChange: (event) => {
 				visible = event;
 			},
 		},
 	});
-	export let visible: boolean | undefined = undefined;
-
-	$: patchChangedProps($$props);
+	$effect(() => patchChangedProps({...props, visible}));
 </script>
 
 {#if !$hidden$}
 	<div class="alert {$className$} flex">
-		<slot />
+		{@render children()}
 		{#if $dismissible$}
-			<button class="btn btn-sm btn-circle btn-ghost" on:click={api.close} aria-label={$ariaCloseButtonLabel$}>
+			<button class="btn btn-sm btn-circle btn-ghost" onclick={api.close} aria-label={$ariaCloseButtonLabel$}>
 				{@html closeIconSvg}
 			</button>
 		{/if}