fix: self-closing tags

package.json

@@ -42,7 +42,7 @@
     "@sveltejs/adapter-vercel": "^5.4.6",
     "@sveltejs/kit": "^2.7.3",
     "@sveltejs/package": "2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.20",
@@ -63,7 +63,7 @@
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.5",
     "svelte-lib-helpers": "^0.4.16",
-    "svelte-meta-tags": "^4.0.4",
+    "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.3",
     "svelte2tsx": "^0.7.22",
     "tailwind-merge": "^1.13.1",

src/routes/+page.svelte

@@ -33,7 +33,7 @@
     siteName: 'Flowbite Svelte'
   }}
   twitter={{
-    handle: '@shinokada',
+    creator: '@shinokada',
     cardType: 'summary_large_image',
     title: `${title}`,
     description: `${description}`,

src/routes/docs/components/modal.md

@@ -30,7 +30,7 @@ Get started with multiple sizes, colors, and styles built with the utility class
 
 Modal visibility (open/close) is controlled by the `open` property. You can bind it to a variable that other element (usually button) will toggle. You can also use the `open=true` attribute to show open the modal by default. Opening and closing the modal will trigger the `open` and `close` events.
 
-<p class="p-2"/>
+<p class="p-2"></p>
 
 An option of automatic closing of the modal can be enabled by setting the `autoclose` property. Any `<button>` element put in the modal will close it on click.
 

src/routes/docs/components/popover.md

@@ -154,12 +154,12 @@ Use this example to trigger a popover component with detailed information and an
       <div class="space-y-2">
         <h3 class="font-semibold text-gray-900 dark:text-white">
           About Italy
-          <h3>
+          <span>
             <p class="text-gray-500 dark:text-gray-500">Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also considered part of Western Europe. A unitary parliamentary republic with Rome as its capital and largest city.</p>
             <a href="/" class="flex items-center font-medium text-primary-600 dark:text-primary-500 dark:hover:text-primary-600 hover:text-primary-700">
               Read more <ChevronRightOutline class="w-2 h-2 ms-1.5 text-primary-600 dark:text-primary-500" />
             </a>
-          </h3>
+          </span>
         </h3>
       </div>
     </div>
@@ -189,7 +189,7 @@ Show helpful information inside a popover when hovering over a question mark but
   <div class="p-3 space-y-2">
     <h3 class="font-semibold text-gray-900 dark:text-white">Activity growth - Incremental</h3>
     Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend.
-    <h3 class="font-semibold text-gray-900 dark:text-white">Calculation</h3>
+    <span class="font-semibold text-gray-900 dark:text-white">Calculation</span>
     For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n.
     <a href="/" class="flex items-center font-medium text-primary-600 dark:text-primary-500 dark:hover:text-primary-600 hover:text-primary-700">
       Read more <ChevronRightOutline class="w-4 h-4 ms-1.5 text-primary-600 dark:text-primary-500" />
@@ -221,7 +221,7 @@ Show a progress bar with details inside a popover when hovering over a settings
       of block storage remaining.
     </p>
     <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
-      <div class="bg-red-600 h-2.5 rounded-full" style="width: 85%" />
+      <div class="bg-red-600 h-2.5 rounded-full" style="width: 85%" ></div>
     </div>
     <a href="/" class="flex items-center font-medium text-primary-600 dark:text-primary-500 dark:hover:text-primary-600 hover:text-primary-700">
       Upgrade now <ChevronRightOutline class="w-4 h-4 ms-1.5 text-primary-600 dark:text-primary-500" />
@@ -255,10 +255,10 @@ Dynamically show the password strength progress when creating a new password pos
 <Popover class="text-sm" triggeredBy="#password" placement="bottom">
   <h3 class="font-semibold text-gray-900 dark:text-white">Must have at least 6 characters</h3>
   <div class="grid grid-cols-4 gap-2">
-    <div class="h-1 bg-orange-300 dark:bg-orange-400" />
-    <div class="h-1 bg-orange-300 dark:bg-orange-400" />
-    <div class="h-1 bg-gray-200 dark:bg-gray-600" />
-    <div class="h-1 bg-gray-200 dark:bg-gray-600" />
+    <div class="h-1 bg-orange-300 dark:bg-orange-400" ></div>
+    <div class="h-1 bg-orange-300 dark:bg-orange-400" ></div>
+    <div class="h-1 bg-gray-200 dark:bg-gray-600" ></div>
+    <div class="h-1 bg-gray-200 dark:bg-gray-600" ></div>
   </div>
   <p class="py-2">It’s better to have:</p>
   <ul>

src/routes/docs/components/tabs.md

@@ -28,11 +28,11 @@ The tabs component can be used either as an extra navigational hierarchy complem
 
 Use the following default tabs component example to show a dynamic content in your webpage.
 
-<p class="my-2"/>
+<p class="my-2"></p>
 
 If your tab title is a simple string set the `title` property on `TabItem`, otherwise when more control is needed overwrite the `title` slot.
 
-<p class="my-2"/>
+<p class="my-2"></p>
 
 The last tab in that example shows not only how to show a disabled tab, but how to use the `title` slot entry as well.
 
@@ -80,11 +80,11 @@ The last tab in that example shows not only how to show a disabled tab, but how
 
 You can control the style of tabs component by settings the `activeClasses` and `inactiveClasses` on the `TabItem` elements. See the `Custom style` section below for more details.
 
-<p class="my-2"/>
+<p class="my-2"></p>
 
 However tabs component comes with several pre-defined styles that are accessible to you by setting the `tabStyle` property. This will set the `activeClasses` and `inactiveClasses` properties for you.
 
-<p class="my-2"/>
+<p class="my-2"></p>
 
 Use the `tabStyle="underline"` to achieve this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.
 

src/routes/docs/components/timeline.md

@@ -103,7 +103,7 @@ Use this horizontally aligned timeline component to show a series of data in a c
         <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
           <CalendarWeekSolid class="w-4 h-4 text-primary-600 dark:text-primary-400" />
         </div>
-        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" ></div>
       </div>
     </svelte:fragment>
     <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>
@@ -114,7 +114,7 @@ Use this horizontally aligned timeline component to show a series of data in a c
         <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
           <CalendarWeekSolid class="w-4 h-4 text-primary-600 dark:text-primary-400" />
         </div>
-        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
       </div>
     </svelte:fragment>
     <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>
@@ -125,7 +125,7 @@ Use this horizontally aligned timeline component to show a series of data in a c
         <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
           <CalendarWeekSolid class="w-4 h-4 text-primary-600 dark:text-primary-400" />
         </div>
-        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
       </div>
     </svelte:fragment>
     <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>

src/routes/docs/forms/select.md

@@ -157,7 +157,7 @@ Get started with the small, default, and large sizes for the select component fr
 <Select id="select-md" size="md" items={countries} class="mb-6" />
 <Label for="select-lg" class="mb-2">Large select</Label>
 <Select id="select-lg" size="lg" items={countries} class="mb-6" />
-<p class="my-6" />
+<p class="my-6" ></p>
 <Label for="select-sm" class="sr-only">Underline small select</Label>
 <Select id="select-sm" underline size="sm" items={countries} class="mb-6" />
 <Label for="select-md" class="sr-only">Underline default select</Label>

src/routes/docs/pages/quickstart.md

@@ -107,7 +107,7 @@ export default {
 
 Now you should be able to work with the Flowbite Svelte library and import components such as the navbar, dropdown, modal, and more.
 
-<div class="h-8" />
+<div class="h-8" ></div>
 
 Now you are ready to go! Add the following to `src/routes/+page.svelte` and if you see the following image, then your setting is complete.
 

src/routes/icons/svelte-4.md

@@ -25,7 +25,7 @@ Use well over 500 SVG icons based on the open-source [Flowbite Icons](https://fl
 ## Requirements
 
 ```markdown
-- Svelte 4 or 5 (without Runes)
+- Svelte 4 or 5
 - TailwindCSS
 - tailwind-merge
 ```
@@ -39,7 +39,7 @@ npm create svelte@latest my-project
 cd my-project
 npx svelte-add@latest tailwindcss
 pnpm i
-pnpm i -D flowbite-svelte-icons
+pnpm i -D flowbite-svelte-icons@v1-latest
 ```
 
 To make sure the classes used by flowbite-svelte-icons are included by the Tailwindcss, add the following to tailwind.config.cjs.