Use $state for things that are not passed

Author: RobbieTheWagner

shepherd.js/src/components/shepherd-element.svelte

@@ -10,17 +10,17 @@
 
   let {
     classPrefix,
-    element = $bindable(),
     descriptionId,
-    firstFocusableElement,
-    focusableElements,
     labelId,
-    lastFocusableElement,
-    step,
-    dataStepId
+    step
   } = $props();
 
-  let classes;
+  let classes = $state();
+  let dataStepId = $state();
+  let element = $state();
+  let firstFocusableElement = $state();
+  let focusableElements = $state();
+  let lastFocusableElement = $state();
 
   const hasCancelIcon = $derived(step.options?.cancelIcon?.enabled ?? false);
   const hasTitle = $derived(step.options?.title ?? false);

shepherd.js/src/components/shepherd-modal.svelte

@@ -1,9 +1,10 @@
 <script>
   import { makeOverlayPath } from '../utils/overlay-path.ts';
 
-  let { element = $bindable(), openingProperties = $bindable() } = $props();
+  let { openingProperties = $bindable() } = $props();
+  let element = $state();
   let modalIsVisible = $state(false);
-  let rafId = undefined;
+  let rafId = $state();
   let pathDefinition = $derived(makeOverlayPath(openingProperties));
 
   closeModalOpening();