From 03625534e12985c153be27abf69b32213c99b002 Mon Sep 17 00:00:00 2001
From: babakfp <babak.bxf@gmail.com>
Date: Tue, 5 Nov 2024 20:32:20 +0330
Subject: [PATCH] fix(docs): convert invalid self-closing tags to proper
 closing tags for Svelte 5

---
 .../data/snippets/svelte/checkbox/usage.mdx    |  2 +-
 .../snippets/svelte/color-picker/usage.mdx     | 18 +++++++++---------
 .../svelte/color-picker/with-preview.mdx       |  4 ++--
 .../svelte/color-picker/with-swatches.mdx      |  4 ++--
 website/data/snippets/svelte/dialog/usage.mdx  |  2 +-
 .../svelte/editable/custom-controls.mdx        |  2 +-
 .../data/snippets/svelte/editable/usage.mdx    |  2 +-
 .../data/snippets/svelte/hover-card/usage.mdx  |  2 +-
 .../snippets/svelte/number-input/scrubber.mdx  |  2 +-
 .../data/snippets/svelte/progress/usage.mdx    |  2 +-
 website/data/snippets/svelte/qr-code/usage.mdx |  2 +-
 .../data/snippets/svelte/radio-group/usage.mdx |  2 +-
 .../snippets/svelte/range-slider/usage.mdx     |  2 +-
 .../snippets/svelte/signature-pad/usage.mdx    |  2 +-
 .../data/snippets/svelte/slider/tick-marks.mdx |  2 +-
 website/data/snippets/svelte/slider/usage.mdx  |  2 +-
 .../data/snippets/svelte/splitter/usage.mdx    |  2 +-
 website/data/snippets/svelte/switch/usage.mdx  |  2 +-
 .../snippets/svelte/tabs/with-indicator.mdx    |  2 +-
 website/data/snippets/svelte/tour/usage.mdx    |  6 +++---
 20 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/website/data/snippets/svelte/checkbox/usage.mdx b/website/data/snippets/svelte/checkbox/usage.mdx
index 788f106445..5444df86c7 100644
--- a/website/data/snippets/svelte/checkbox/usage.mdx
+++ b/website/data/snippets/svelte/checkbox/usage.mdx
@@ -11,7 +11,7 @@
   <span {...api.getLabelProps()}>
     Input is {api.checked ? "checked" : "unchecked"}
   </span>
-  <div {...api.getControlProps()} />
+  <div {...api.getControlProps()}></div>
   <input {...api.getHiddenInputProps()} />
 </label>
 ```
diff --git a/website/data/snippets/svelte/color-picker/usage.mdx b/website/data/snippets/svelte/color-picker/usage.mdx
index 463b4d9838..9ea15fe5c6 100644
--- a/website/data/snippets/svelte/color-picker/usage.mdx
+++ b/website/data/snippets/svelte/color-picker/usage.mdx
@@ -15,8 +15,8 @@
 
   <div {...api.getControlProps()}>
     <button {...api.getTriggerProps()}>
-      <div {...api.getTransparencyGridProps({ size: "10px" })} />
-      <div {...api.getSwatchProps({ value: api.value })} />
+      <div {...api.getTransparencyGridProps({ size: "10px" })}></div>
+      <div {...api.getSwatchProps({ value: api.value })}></div>
     </button>
     <input {...api.getChannelInputProps({ channel: "hex" })} />
     <input {...api.getChannelInputProps({ channel: "alpha" })} />
@@ -25,19 +25,19 @@
   <div {...api.getPositionerProps()}>
     <div {...api.getContentProps()}>
       <div {...api.getAreaProps()}>
-        <div {...api.getAreaBackgroundProps()} />
-        <div {...api.getAreaThumbProps()} />
+        <div {...api.getAreaBackgroundProps()}></div>
+        <div {...api.getAreaThumbProps()}></div>
       </div>
 
       <div {...api.getChannelSliderProps({ channel: "hue" })}>
-        <div {...api.getChannelSliderTrackProps({ channel: "hue" })} />
-        <div {...api.getChannelSliderThumbProps({ channel: "hue" })} />
+        <div {...api.getChannelSliderTrackProps({ channel: "hue" })}></div>
+        <div {...api.getChannelSliderThumbProps({ channel: "hue" })}></div>
       </div>
 
       <div {...api.getChannelSliderProps({ channel: "alpha" })}>
-        <div {...api.getTransparencyGridProps({ size: "12px" })} />
-        <div {...api.getChannelSliderTrackProps({ channel: "alpha" })} />
-        <div {...api.getChannelSliderThumbProps({ channel: "alpha" })} />
+        <div {...api.getTransparencyGridProps({ size: "12px" })}></div>
+        <div {...api.getChannelSliderTrackProps({ channel: "alpha" })}></div>
+        <div {...api.getChannelSliderThumbProps({ channel: "alpha" })}></div>
       </div>
     </div>
   </div>
diff --git a/website/data/snippets/svelte/color-picker/with-preview.mdx b/website/data/snippets/svelte/color-picker/with-preview.mdx
index 45a7a6fa9a..0caaaf1688 100644
--- a/website/data/snippets/svelte/color-picker/with-preview.mdx
+++ b/website/data/snippets/svelte/color-picker/with-preview.mdx
@@ -10,8 +10,8 @@
 
 <div {...api.getRootProps()}>
   <div>
-    <div {...api.getTransparencyGridProps({ size: "4px" })} />
-    <div {...api.getSwatchProps({ value: api.value })} />
+    <div {...api.getTransparencyGridProps({ size: "4px" })}></div>
+    <div {...api.getSwatchProps({ value: api.value })}></div>
   </div>
   <!-- ... -->
 </div>
diff --git a/website/data/snippets/svelte/color-picker/with-swatches.mdx b/website/data/snippets/svelte/color-picker/with-swatches.mdx
index c4e752f8e8..e03a93c456 100644
--- a/website/data/snippets/svelte/color-picker/with-swatches.mdx
+++ b/website/data/snippets/svelte/color-picker/with-swatches.mdx
@@ -18,8 +18,8 @@
         {#each presets as preset}
           <button {...api.getSwatchTriggerProps({ value: preset })}>
             <div style="position:relative;">
-              <div {...api.getTransparencyGridProps({ size: "4px" })} />
-              <div {...api.getSwatchProps({ value: preset })} />
+              <div {...api.getTransparencyGridProps({ size: "4px" })}></div>
+              <div {...api.getSwatchProps({ value: preset })}></div>
             </div>
           </button>
         {/each}
diff --git a/website/data/snippets/svelte/dialog/usage.mdx b/website/data/snippets/svelte/dialog/usage.mdx
index b3f6cbc6d1..388c80fd11 100644
--- a/website/data/snippets/svelte/dialog/usage.mdx
+++ b/website/data/snippets/svelte/dialog/usage.mdx
@@ -9,7 +9,7 @@
 
 <button {...api.getTriggerProps()}>Open Dialog</button>
 {#if api.open}
-  <div use:portal {...api.getBackdropProps()} />
+  <div use:portal {...api.getBackdropProps()}></div>
   <div use:portal {...api.getPositionerProps()}>
     <div {...api.getContentProps()}>
       <h2 {...api.getTitleProps()}>Edit profile</h2>
diff --git a/website/data/snippets/svelte/editable/custom-controls.mdx b/website/data/snippets/svelte/editable/custom-controls.mdx
index 76ed81d0d7..15d7161eba 100644
--- a/website/data/snippets/svelte/editable/custom-controls.mdx
+++ b/website/data/snippets/svelte/editable/custom-controls.mdx
@@ -10,7 +10,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getAreaProps()}>
     <input {...api.getInputProps()} />
-    <span {...api.getPreviewProps()} />
+    <span {...api.getPreviewProps()}></span>
   </div>
   <div>
     {#if !api.editing}
diff --git a/website/data/snippets/svelte/editable/usage.mdx b/website/data/snippets/svelte/editable/usage.mdx
index 55f1053bca..2b21b06b36 100644
--- a/website/data/snippets/svelte/editable/usage.mdx
+++ b/website/data/snippets/svelte/editable/usage.mdx
@@ -10,7 +10,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getAreaProps()}>
     <input {...api.getInputProps()} />
-    <span {...api.getPreviewProps()} />
+    <span {...api.getPreviewProps()}></span>
   </div>
 </div>
 ```
diff --git a/website/data/snippets/svelte/hover-card/usage.mdx b/website/data/snippets/svelte/hover-card/usage.mdx
index e50dc15a1c..140d4c572c 100644
--- a/website/data/snippets/svelte/hover-card/usage.mdx
+++ b/website/data/snippets/svelte/hover-card/usage.mdx
@@ -15,7 +15,7 @@
     <div {...api.getPositionerProps()}>
       <div {...api.getContentProps()}>
         <div {...api.getArrowProps()}>
-          <div {...api.getArrowTipProps()} />
+          <div {...api.getArrowTipProps()}></div>
         </div>
         Twitter Preview
       </div>
diff --git a/website/data/snippets/svelte/number-input/scrubber.mdx b/website/data/snippets/svelte/number-input/scrubber.mdx
index 1e91c7594c..9df22f5f63 100644
--- a/website/data/snippets/svelte/number-input/scrubber.mdx
+++ b/website/data/snippets/svelte/number-input/scrubber.mdx
@@ -12,7 +12,7 @@
 <div {...api.getRootProps()}>
   <label {...api.getLabelProps()}>Enter number:</label>
   <div>
-    <div {...api.getScrubberProps()} />
+    <div {...api.getScrubberProps()}></div>
     <input {...api.getInputProps()} />
   </div>
 </div>
diff --git a/website/data/snippets/svelte/progress/usage.mdx b/website/data/snippets/svelte/progress/usage.mdx
index 9ea8a994e1..e7d41f4b0f 100644
--- a/website/data/snippets/svelte/progress/usage.mdx
+++ b/website/data/snippets/svelte/progress/usage.mdx
@@ -11,7 +11,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getLabelProps()}>Upload progress</div>
   <div {...api.getTrackProps()}>
-    <div {...api.getRangeProps()} />
+    <div {...api.getRangeProps()}></div>
   </div>
 </div>
 ```
diff --git a/website/data/snippets/svelte/qr-code/usage.mdx b/website/data/snippets/svelte/qr-code/usage.mdx
index fbbac8ed34..5990951045 100644
--- a/website/data/snippets/svelte/qr-code/usage.mdx
+++ b/website/data/snippets/svelte/qr-code/usage.mdx
@@ -9,7 +9,7 @@
 
 <div {...api.getRootProps()}>
   <svg {...api.getFrameProps()}>
-    <path {...api.getPatternProps()} />
+    <path {...api.getPatternProps()}></span>
   </svg>
   <div {...api.getOverlayProps()}>
     <img
diff --git a/website/data/snippets/svelte/radio-group/usage.mdx b/website/data/snippets/svelte/radio-group/usage.mdx
index 703dcb162f..dba26c1322 100644
--- a/website/data/snippets/svelte/radio-group/usage.mdx
+++ b/website/data/snippets/svelte/radio-group/usage.mdx
@@ -21,7 +21,7 @@
     <label {...api.getItemProps({ value: opt.id })}>
       <span {...api.getItemTextProps({ value: opt.id })}>{opt.label}</span>
       <input {...api.getItemHiddenInputProps({ value: opt.id })} />
-      <div {...api.getItemControlProps({ value: opt.id })} />
+      <div {...api.getItemControlProps({ value: opt.id })}></div>
     </label>
   {/each}
 </div>
diff --git a/website/data/snippets/svelte/range-slider/usage.mdx b/website/data/snippets/svelte/range-slider/usage.mdx
index 365f5016c5..d0985833b6 100644
--- a/website/data/snippets/svelte/range-slider/usage.mdx
+++ b/website/data/snippets/svelte/range-slider/usage.mdx
@@ -17,7 +17,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getControlProps()}>
     <div {...api.getTrackProps()}>
-      <div {...api.getRangeProps()} />
+      <div {...api.getRangeProps()}></div>
     </div>
     {#each api.value as _, index}
       <div {...api.getThumbProps({ index })}>
diff --git a/website/data/snippets/svelte/signature-pad/usage.mdx b/website/data/snippets/svelte/signature-pad/usage.mdx
index 729eb71a32..bb6ab799bc 100644
--- a/website/data/snippets/svelte/signature-pad/usage.mdx
+++ b/website/data/snippets/svelte/signature-pad/usage.mdx
@@ -27,7 +27,7 @@
 
     <button {...api.getClearTriggerProps()}>X</button>
 
-    <div {...api.getGuideProps()} />
+    <div {...api.getGuideProps()}></div>
   </div>
 </div>
 ```
diff --git a/website/data/snippets/svelte/slider/tick-marks.mdx b/website/data/snippets/svelte/slider/tick-marks.mdx
index 7a600f1dd8..f8c7b3ab65 100644
--- a/website/data/snippets/svelte/slider/tick-marks.mdx
+++ b/website/data/snippets/svelte/slider/tick-marks.mdx
@@ -4,7 +4,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getControlProps()}>
     <div {...api.getTrackProps()}>
-      <div {...api.getRangeProps()} />
+      <div {...api.getRangeProps()}></div>
     </div>
     {#each api.value as _, index}
       <div {...api.getThumbProps({ index })}>
diff --git a/website/data/snippets/svelte/slider/usage.mdx b/website/data/snippets/svelte/slider/usage.mdx
index 825f2439b2..16a8605ea4 100644
--- a/website/data/snippets/svelte/slider/usage.mdx
+++ b/website/data/snippets/svelte/slider/usage.mdx
@@ -20,7 +20,7 @@
   </div>
   <div {...api.getControlProps()}>
     <div {...api.getTrackProps()}>
-      <div {...api.getRangeProps()} />
+      <div {...api.getRangeProps()}></div>
     </div>
     {#each api.value as _, index}
       <div {...api.getThumbProps({ index })}>
diff --git a/website/data/snippets/svelte/splitter/usage.mdx b/website/data/snippets/svelte/splitter/usage.mdx
index 95062f3704..a786f8c733 100644
--- a/website/data/snippets/svelte/splitter/usage.mdx
+++ b/website/data/snippets/svelte/splitter/usage.mdx
@@ -20,7 +20,7 @@
   <div {...api.getPanelProps({ id: "a" })}>
     <p>A</p>
   </div>
-  <div {...api.getResizeTriggerProps({ id: "a:b" })} />
+  <div {...api.getResizeTriggerProps({ id: "a:b" })}></div>
   <div {...api.getPanelProps({ id: "b" })}>
     <p>B</p>
   </div>
diff --git a/website/data/snippets/svelte/switch/usage.mdx b/website/data/snippets/svelte/switch/usage.mdx
index 289472d92c..e7dc400069 100644
--- a/website/data/snippets/svelte/switch/usage.mdx
+++ b/website/data/snippets/svelte/switch/usage.mdx
@@ -11,7 +11,7 @@
 <label {...api.getRootProps()}>
   <input {...api.getHiddenInputProps()} />
   <span {...api.getControlProps()}>
-    <span {...api.getThumbProps()} />
+    <span {...api.getThumbProps()}></span>
   </span>
   <span {...api.getLabelProps()}>{api.checked ? "On" : "Off"}</span>
 </label>
diff --git a/website/data/snippets/svelte/tabs/with-indicator.mdx b/website/data/snippets/svelte/tabs/with-indicator.mdx
index 2977ede50e..e3b63072a2 100644
--- a/website/data/snippets/svelte/tabs/with-indicator.mdx
+++ b/website/data/snippets/svelte/tabs/with-indicator.mdx
@@ -8,7 +8,7 @@
         {item.label}
       </button>
     {/each}
-    <div {...api.getIndicatorProps()} />
+    <div {...api.getIndicatorProps()}></div>
   </div>
   {#each data as item}
     <div {...api.getContentProps({ value: item.value })}>
diff --git a/website/data/snippets/svelte/tour/usage.mdx b/website/data/snippets/svelte/tour/usage.mdx
index a4c93bf131..7fc8c20a87 100644
--- a/website/data/snippets/svelte/tour/usage.mdx
+++ b/website/data/snippets/svelte/tour/usage.mdx
@@ -15,14 +15,14 @@
   {#if api.step && api.open}
     <div use:portal>
       {#if api.step.backdrop}
-        <div {...api.getBackdropProps()} />
+        <div {...api.getBackdropProps()}></div>
       {/if}
-      <div {...api.getSpotlightProps()} />
+      <div {...api.getSpotlightProps()}></div>
       <div {...api.getPositionerProps()}>
         <div {...api.getContentProps()}>
           {#if api.step.arrow}
             <div {...api.getArrowProps()}>
-              <div {...api.getArrowTipProps()} />
+              <div {...api.getArrowTipProps()}></div>
             </div>
           {/if}