flowbite-svelte 0.27.13 → 0.27.15

package/tailwind.config.cjs

@@ -0,0 +1,88 @@
+const config = {
+	content: [
+		"./src/**/*.{html,js,svelte,ts,md}",
+		"./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+	],
+
+	theme: {
+		extend: {},
+	},
+
+	plugins: [
+		require('flowbite/plugin')
+	],
+	darkMode: 'class',
+	theme: {
+		extend: {
+			colors: {
+				// rose
+				primary: { "50": "#fff1f2", "100": "#ffe4e6", "200": "#fecdd3", "300": "#fda4af", "400": "#fb7185", "500": "#f43f5e", "600": "#e11d48", "700": "#be123c", "800": "#9f1239", "900": "#881337" }
+
+				// pink
+				// primary: {"50":"#fdf2f8","100":"#fce7f3","200":"#fbcfe8","300":"#f9a8d4","400":"#f472b6","500":"#ec4899","600":"#db2777","700":"#be185d","800":"#9d174d","900":"#831843"}
+
+				// fuchsia
+				// primary: {"50":"#fdf4ff","100":"#fae8ff","200":"#f5d0fe","300":"#f0abfc","400":"#e879f9","500":"#d946ef","600":"#c026d3","700":"#a21caf","800":"#86198f","900":"#701a75"}
+
+				// purple
+				// primary: {"50":"#faf5ff","100":"#f3e8ff","200":"#e9d5ff","300":"#d8b4fe","400":"#c084fc","500":"#a855f7","600":"#9333ea","700":"#7e22ce","800":"#6b21a8","900":"#581c87"}
+
+				// violet
+				// primary: {"50":"#f5f3ff","100":"#ede9fe","200":"#ddd6fe","300":"#c4b5fd","400":"#a78bfa","500":"#8b5cf6","600":"#7c3aed","700":"#6d28d9","800":"#5b21b6","900":"#4c1d95"}
+
+				// indigo
+				// primary: {"50":"#eef2ff","100":"#e0e7ff","200":"#c7d2fe","300":"#a5b4fc","400":"#818cf8","500":"#6366f1","600":"#4f46e5","700":"#4338ca","800":"#3730a3","900":"#312e81"}
+
+				// blue
+				// primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"}
+
+				// sky
+				// primary: {"50":"#f0f9ff","100":"#e0f2fe","200":"#bae6fd","300":"#7dd3fc","400":"#38bdf8","500":"#0ea5e9","600":"#0284c7","700":"#0369a1","800":"#075985","900":"#0c4a6e"}
+
+				// cyan
+				// primary: {"50":"#ecfeff","100":"#cffafe","200":"#a5f3fc","300":"#67e8f9","400":"#22d3ee","500":"#06b6d4","600":"#0891b2","700":"#0e7490","800":"#155e75","900":"#164e63"}
+
+				// teal
+				// primary: {"50":"#f0fdfa","100":"#ccfbf1","200":"#99f6e4","300":"#5eead4","400":"#2dd4bf","500":"#14b8a6","600":"#0d9488","700":"#0f766e","800":"#115e59","900":"#134e4a"}
+
+				// emerald
+				// primary: {"50":"#ecfdf5","100":"#d1fae5","200":"#a7f3d0","300":"#6ee7b7","400":"#34d399","500":"#10b981","600":"#059669","700":"#047857","800":"#065f46","900":"#064e3b"}
+
+				// green
+				// primary: {"50":"#f0fdf4","100":"#dcfce7","200":"#bbf7d0","300":"#86efac","400":"#4ade80","500":"#22c55e","600":"#16a34a","700":"#15803d","800":"#166534","900":"#14532d"}
+
+				// lime
+				// primary: {"50":"#f7fee7","100":"#ecfccb","200":"#d9f99d","300":"#bef264","400":"#a3e635","500":"#84cc16","600":"#65a30d","700":"#4d7c0f","800":"#3f6212","900":"#365314"}
+
+				// yellow
+				// primary: {"50":"#fefce8","100":"#fef9c3","200":"#fef08a","300":"#fde047","400":"#facc15","500":"#eab308","600":"#ca8a04","700":"#a16207","800":"#854d0e","900":"#713f12"}
+
+				// amber
+				// primary: {"50":"#fffbeb","100":"#fef3c7","200":"#fde68a","300":"#fcd34d","400":"#fbbf24","500":"#f59e0b","600":"#d97706","700":"#b45309","800":"#92400e","900":"#78350f"}
+
+				// orange
+				// primary: {"50":"#fff7ed","100":"#ffedd5","200":"#fed7aa","300":"#fdba74","400":"#fb923c","500":"#f97316","600":"#ea580c","700":"#c2410c","800":"#9a3412","900":"#7c2d12"}
+
+				// red
+				// primary: {"50":"#fef2f2","100":"#fee2e2","200":"#fecaca","300":"#fca5a5","400":"#f87171","500":"#ef4444","600":"#dc2626","700":"#b91c1c","800":"#991b1b","900":"#7f1d1d"}
+
+				// stone
+				// primary: {"50":"#fafaf9","100":"#f5f5f4","200":"#e7e5e4","300":"#d6d3d1","400":"#a8a29e","500":"#78716c","600":"#57534e","700":"#44403c","800":"#292524","900":"#1c1917"}
+
+				// neutral
+				// primary: {"50":"#fafafa","100":"#f5f5f5","200":"#e5e5e5","300":"#d4d4d4","400":"#a3a3a3","500":"#737373","600":"#525252","700":"#404040","800":"#262626","900":"#171717"}
+
+				// zinc
+				// primary: {"50":"#fafafa","100":"#f4f4f5","200":"#e4e4e7","300":"#d4d4d8","400":"#a1a1aa","500":"#71717a","600":"#52525b","700":"#3f3f46","800":"#27272a","900":"#18181b"}
+
+				// gray
+				// primary: {"50":"#f9fafb","100":"#f3f4f6","200":"#e5e7eb","300":"#d1d5db","400":"#9ca3af","500":"#6b7280","600":"#4b5563","700":"#374151","800":"#1f2937","900":"#111827"}
+
+				// slate
+				// primary: {"50":"#f8fafc","100":"#f1f5f9","200":"#e2e8f0","300":"#cbd5e1","400":"#94a3b8","500":"#64748b","600":"#475569","700":"#334155","800":"#1e293b","900":"#0f172a"}
+			}
+		}
+	}
+};
+
+module.exports = config;

package/tests/components.spec.ts

@@ -0,0 +1,176 @@
+import { expect, test } from '@playwright/test';
+
+// Accordion
+test('Accordion page should have h1', async ({ page }) => {
+	await page.goto('/components/accordion');
+	expect(await page.textContent('h1')).toBe('Svelte Accordion - Flowbite');
+});
+
+// Alert
+test('Alert page should have h1', async ({ page }) => {
+	await page.goto('/components/alert');
+	expect(await page.textContent('h1')).toBe('Svelte Alert - Flowbite');
+});
+
+// Avatar
+test('Avatar page should have h1', async ({ page }) => {
+	await page.goto('/components/avatar');
+	expect(await page.textContent('h1')).toBe('Svelte Avatar - Flowbite');
+});
+
+// Badges
+test('Badges page should have h1', async ({ page }) => {
+	await page.goto('/components/badge');
+	expect(await page.textContent('h1')).toBe('Svelte Badge - Flowbite');
+});
+
+// Breadcrumbs
+test('Breadcrumb page should have h1', async ({ page }) => {
+	await page.goto('/components/breadcrumb');
+	expect(await page.textContent('h1')).toBe('Svelte Breadcrumb - Flowbite');
+});
+
+// Button groups
+test('Button Group page should have h1', async ({ page }) => {
+	await page.goto('/components/button-group');
+	expect(await page.textContent('h1')).toBe('Svelte Button Group - Flowbite');
+});
+
+// Buttons
+test('Buttons page should have h1', async ({ page }) => {
+	await page.goto('/components/button');
+	expect(await page.textContent('h1')).toBe('Svelte Buttons - Flowbite');
+});
+
+// Cards
+test('Cards page should have h1', async ({ page }) => {
+	await page.goto('/components/card');
+	expect(await page.textContent('h1')).toBe('Svelte Cards - Flowbite');
+});
+
+// Carousel
+test('Carousel page should have h1', async ({ page }) => {
+	await page.goto('/components/carousel');
+	expect(await page.textContent('h1')).toBe('Svelte Carousel - Flowbite');
+});
+
+// Darkmode
+test('Dark mode page should have h1', async ({ page }) => {
+	await page.goto('/components/darkmode');
+	expect(await page.textContent('h1')).toBe('Svelte Dark Mode - Flowbite');
+});
+
+// Datepicker
+test('Datepicker page should have h1', async ({ page }) => {
+	await page.goto('/datepicker');
+	expect(await page.textContent('h1')).toBe('Svelte Datepicker - Flowbite');
+});
+
+// Dropdown
+test('Dropdown page should have h1', async ({ page }) => {
+	await page.goto('/components/dropdown');
+	expect(await page.textContent('h1')).toBe('Svelte Dropdown - Flowbite');
+});
+
+// Footer
+test('Footer index page should have h1', async ({ page }) => {
+	await page.goto('/components/footer');
+	expect(await page.textContent('h1')).toBe('Svelte Footer - Flowbite');
+});
+
+// Kbd
+test('Kbd group page should have h1', async ({ page }) => {
+	await page.goto('/components/kbd');
+	expect(await page.textContent('h1')).toBe('Svelte KBD (Keyboard) - Flowbite');
+});
+
+// List group
+test('List group page should have h1', async ({ page }) => {
+	await page.goto('/components/list-group');
+	expect(await page.textContent('h1')).toBe('Svelte List Group - Flowbite');
+});
+
+// Modals
+test('Modals page should have h1', async ({ page }) => {
+	await page.goto('/components/modal');
+	expect(await page.textContent('h1')).toBe('Svelte Modal - Flowbite');
+});
+
+// Navbar
+test('Navbar page should have h1', async ({ page }) => {
+	await page.goto('/components/navbar');
+	expect(await page.textContent('h1')).toBe('Svelte Navbar - Flowbite');
+});
+
+// Pagination
+test('Paginations page should have h1', async ({ page }) => {
+	await page.goto('/components/pagination');
+	expect(await page.textContent('h1')).toBe('Svelte Pagination - Flowbite');
+});
+
+// Popover
+test('Popover page should have h1', async ({ page }) => {
+	await page.goto('/components/popover');
+	expect(await page.textContent('h1')).toBe('Svelte Popover - Flowbite');
+});
+
+// Progress bar
+test('Progress bar page should have h1', async ({ page }) => {
+	await page.goto('/components/progress');
+	expect(await page.textContent('h1')).toBe('Svelte Progress Bar - Flowbite');
+});
+
+// Ratings
+test('Rating page should have h1', async ({ page }) => {
+	await page.goto('/components/rating');
+	expect(await page.textContent('h1')).toBe('Svelte Rating - Flowbite');
+});
+
+// Sidebar
+test('Sidebar page should have h1', async ({ page }) => {
+	await page.goto('/components/sidebar');
+	expect(await page.textContent('h1')).toBe('Svelte Sidebar - Flowbite');
+});
+
+// Skeleton
+test('Skeleton page should have h1', async ({ page }) => {
+	await page.goto('/components/skeleton');
+	expect(await page.textContent('h1')).toBe('Svelte Skeleton - Flowbite');
+});
+
+// Spinner
+test('Spinner page should have h1', async ({ page }) => {
+	await page.goto('/components/spinner');
+	expect(await page.textContent('h1')).toBe('Svelte Spinner - Flowbite');
+});
+
+// Tables
+test('Table page should have h1', async ({ page }) => {
+	await page.goto('/components/table');
+	expect(await page.textContent('h1')).toBe('Svelte Tables - Flowbite');
+});
+
+// Tabs
+test('Tab page should have h1', async ({ page }) => {
+	await page.goto('/components/tab');
+	expect(await page.textContent('h1')).toBe('Svelte Tabs - Flowbite');
+});
+
+// Timeline
+test('Timeline page should have h1', async ({ page }) => {
+	await page.goto('/components/timeline');
+	expect(await page.textContent('h1')).toBe('Svelte Timeline - Flowbite');
+});
+
+// Toasts
+test('Toast page should have h1', async ({ page }) => {
+	await page.goto('/components/toast');
+	expect(await page.textContent('h1')).toBe('Svelte Toasts - Flowbite');
+});
+
+// Tooltips
+test('Tooltip page should have h1', async ({ page }) => {
+	await page.goto('/components/tooltip');
+	expect(await page.textContent('h1')).toBe('Svelte Tooltip - Flowbite');
+});
+

package/tests/extend.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test';
+
+// Icons
+test('Icon page should have h1', async ({ page }) => {
+	await page.goto('/extend/icons');
+	expect(await page.textContent('h1')).toBe('External icon libraries');
+});
+
+// flowbite-svelte-starter
+test('Flowbite-Svelte-Starter page should have h1', async ({ page }) => {
+	await page.goto('/extend/flowbite-svelte-starter');
+	expect(await page.textContent('h1')).toBe('Flowbite-Svelte Starter');
+});

package/tests/forms.spec.ts

@@ -0,0 +1,62 @@
+/************** 
+ * To run this test
+ * npx playwright test tests/forms.spec.ts 
+************/
+
+import { expect, test } from '@playwright/test';
+
+// Forms
+test('Form page should have h1', async ({ page }) => {
+	await page.goto('/components/forms');
+	expect(await page.textContent('h1')).toBe('Svelte Forms - Flowbite');
+});
+
+test('Checkbox page should have h1', async ({ page }) => {
+	await page.goto('/forms/checkbox');
+	expect(await page.textContent('h1')).toBe('Svelte Checkbox - Flowbite');
+});
+
+test('File input page should have h1', async ({ page }) => {
+	await page.goto('/forms/file-input');
+	expect(await page.textContent('h1')).toBe('Svelte File Input - Flowbite');
+});
+
+test('Floating label page should have h1', async ({ page }) => {
+	await page.goto('/forms/floating-label');
+	expect(await page.textContent('h1')).toBe('Svelte Floating Label - Flowbite');
+});
+
+test('Input page should have h1', async ({ page }) => {
+	await page.goto('/forms/input-field');
+	expect(await page.textContent('h1')).toBe('Svelte Input Fields - Flowbite');
+});
+
+test('Radio page should have h1', async ({ page }) => {
+	await page.goto('/forms/radio');
+	expect(await page.textContent('h1')).toBe('Svelte Radio - Flowbite');
+});
+
+test('Range page should have h1', async ({ page }) => {
+	await page.goto('/forms/range');
+	expect(await page.textContent('h1')).toBe('Svelte Range - Flowbite');
+});
+
+test('Search page should have h1', async ({ page }) => {
+	await page.goto('/forms/search-input');
+	expect(await page.textContent('h1')).toBe('Svelte Search Input - Flowbite');
+});
+
+test('Seletct page should have h1', async ({ page }) => {
+	await page.goto('/forms/select');
+	expect(await page.textContent('h1')).toBe('Svelte Select - Flowbite');
+});
+
+test('Textarea page should have h1', async ({ page }) => {
+	await page.goto('/forms/textarea');
+	expect(await page.textContent('h1')).toBe('Svelte Textarea - Flowbite');
+});
+
+test('Toggle page should have h1', async ({ page }) => {
+	await page.goto('/forms/toggle');
+	expect(await page.textContent('h1')).toBe('Svelte Toggle (Switch) - Flowbite');
+});

package/tests/page.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+
+test('index page should have h1', async ({ page }) => {
+	await page.goto('/');
+	expect(await page.textContent('h1 > span')).toBe('Flowbite Svelte');
+});
+
+test('About page should have h1', async ({ page }) => {
+	await page.goto('/pages/about');
+	expect(await page.textContent('h1')).toBe('About Flowbite-Svelte');
+});
+
+test('Getting Started page should have h1', async ({ page }) => {
+	await page.goto('/pages/getting-started');
+	expect(await page.textContent('h1')).toBe('Getting Started');
+});
+
+test('How to contribute page should have h1', async ({ page }) => {
+	await page.goto('/pages/how-to-contribute');
+	expect(await page.textContent('h1')).toBe('How to Contribute');
+});
+
+test('License page should have h1', async ({ page }) => {
+	await page.goto('/pages/license');
+	expect(await page.textContent('h1')).toBe('License');
+});
+
+test('Type list page should have h1', async ({ page }) => {
+	await page.goto('/pages/types');
+	expect(await page.textContent('h1')).toBe('Types');
+});

package/tests/redirect.spec.ts

@@ -0,0 +1,176 @@
+import { expect, test } from '@playwright/test';
+
+// Accordion
+test('Accordion page should have h1', async ({ page }) => {
+  await page.goto('/accordion');
+  expect(await page.textContent('h1')).toBe('Svelte Accordion - Flowbite');
+});
+
+// Alert
+test('Alert page should have h1', async ({ page }) => {
+  await page.goto('/alert');
+  expect(await page.textContent('h1')).toBe('Svelte Alert - Flowbite');
+});
+
+// Avatar
+test('Avatar page should have h1', async ({ page }) => {
+  await page.goto('/avatar');
+  expect(await page.textContent('h1')).toBe('Svelte Avatar - Flowbite');
+});
+
+// Badges
+test('Badges page should have h1', async ({ page }) => {
+  await page.goto('/badge');
+  expect(await page.textContent('h1')).toBe('Svelte Badge - Flowbite');
+});
+
+// Breadcrumbs
+test('Breadcrumb page should have h1', async ({ page }) => {
+  await page.goto('/breadcrumb');
+  expect(await page.textContent('h1')).toBe('Svelte Breadcrumb - Flowbite');
+});
+
+// Button groups
+test('Button Group page should have h1', async ({ page }) => {
+  await page.goto('/button-group');
+  expect(await page.textContent('h1')).toBe('Svelte Button Group - Flowbite');
+});
+
+// Buttons
+test('Buttons page should have h1', async ({ page }) => {
+  await page.goto('/button');
+  expect(await page.textContent('h1')).toBe('Svelte Buttons - Flowbite');
+});
+
+// Cards
+test('Cards page should have h1', async ({ page }) => {
+  await page.goto('/card');
+  expect(await page.textContent('h1')).toBe('Svelte Cards - Flowbite');
+});
+
+// Carousel
+test('Carousel page should have h1', async ({ page }) => {
+  await page.goto('/carousel');
+  expect(await page.textContent('h1')).toBe('Svelte Carousel - Flowbite');
+});
+
+// Darkmode
+test('Dark mode page should have h1', async ({ page }) => {
+  await page.goto('/darkmode');
+  expect(await page.textContent('h1')).toBe('Svelte Dark Mode - Flowbite');
+});
+
+// Datepicker
+test('Datepicker page should have h1', async ({ page }) => {
+  await page.goto('/datepicker');
+  expect(await page.textContent('h1')).toBe('Svelte Datepicker - Flowbite');
+});
+
+// Dropdown
+test('Dropdown page should have h1', async ({ page }) => {
+  await page.goto('/dropdown');
+  expect(await page.textContent('h1')).toBe('Svelte Dropdown - Flowbite');
+});
+
+// Footer
+test('Footer index page should have h1', async ({ page }) => {
+  await page.goto('/footer');
+  expect(await page.textContent('h1')).toBe('Svelte Footer - Flowbite');
+});
+
+// Kbd
+test('Kbd group page should have h1', async ({ page }) => {
+  await page.goto('/kbd');
+  expect(await page.textContent('h1')).toBe('Svelte KBD (Keyboard) - Flowbite');
+});
+
+// List group
+test('List group page should have h1', async ({ page }) => {
+  await page.goto('/list-group');
+  expect(await page.textContent('h1')).toBe('Svelte List Group - Flowbite');
+});
+
+// Modals
+test('Modals page should have h1', async ({ page }) => {
+  await page.goto('/modal');
+  expect(await page.textContent('h1')).toBe('Svelte Modal - Flowbite');
+});
+
+// Navbar
+test('Navbar page should have h1', async ({ page }) => {
+  await page.goto('/navbar');
+  expect(await page.textContent('h1')).toBe('Svelte Navbar - Flowbite');
+});
+
+// Pagination
+test('Paginations page should have h1', async ({ page }) => {
+  await page.goto('/pagination');
+  expect(await page.textContent('h1')).toBe('Svelte Pagination - Flowbite');
+});
+
+// Popover
+test('Popover page should have h1', async ({ page }) => {
+  await page.goto('/popover');
+  expect(await page.textContent('h1')).toBe('Svelte Popover - Flowbite');
+});
+
+// Progress bar
+test('Progress bar page should have h1', async ({ page }) => {
+  await page.goto('/progress');
+  expect(await page.textContent('h1')).toBe('Svelte Progress Bar - Flowbite');
+});
+
+// Ratings
+test('Rating page should have h1', async ({ page }) => {
+  await page.goto('/rating');
+  expect(await page.textContent('h1')).toBe('Svelte Rating - Flowbite');
+});
+
+// Sidebar
+test('Sidebar page should have h1', async ({ page }) => {
+  await page.goto('/sidebar');
+  expect(await page.textContent('h1')).toBe('Svelte Sidebar - Flowbite');
+});
+
+// Skeleton
+test('Skeleton page should have h1', async ({ page }) => {
+  await page.goto('/skeleton');
+  expect(await page.textContent('h1')).toBe('Svelte Skeleton - Flowbite');
+});
+
+// Spinner
+test('Spinner page should have h1', async ({ page }) => {
+  await page.goto('/spinner');
+  expect(await page.textContent('h1')).toBe('Svelte Spinner - Flowbite');
+});
+
+// Tables
+test('Table page should have h1', async ({ page }) => {
+  await page.goto('/table');
+  expect(await page.textContent('h1')).toBe('Svelte Tables - Flowbite');
+});
+
+// Tabs
+test('Tab page should have h1', async ({ page }) => {
+  await page.goto('/tab');
+  expect(await page.textContent('h1')).toBe('Svelte Tabs - Flowbite');
+});
+
+// Timeline
+test('Timeline page should have h1', async ({ page }) => {
+  await page.goto('/timeline');
+  expect(await page.textContent('h1')).toBe('Svelte Timeline - Flowbite');
+});
+
+// Toasts
+test('Toast page should have h1', async ({ page }) => {
+  await page.goto('/toast');
+  expect(await page.textContent('h1')).toBe('Svelte Toasts - Flowbite');
+});
+
+// Tooltips
+test('Tooltip page should have h1', async ({ page }) => {
+  await page.goto('/tooltip');
+  expect(await page.textContent('h1')).toBe('Svelte Tooltip - Flowbite');
+});
+

package/tests/typography.spec.ts

@@ -0,0 +1,52 @@
+/************** 
+ * To run this test
+ * npx playwright test tests/typography.spec.ts 
+************/
+
+import { expect, test } from '@playwright/test';
+
+// Typography
+test('Typography page should have h1', async ({ page }) => {
+	await page.goto('/components/typography');
+	expect(await page.textContent('h1')).toBe('Svelte Typography - Flowbite');
+});
+
+test('Blockquote page should have h1', async ({ page }) => {
+	await page.goto('/typography/blockquote');
+	expect(await page.textContent('h1')).toBe('Svelte Blockquote - Flowbite');
+});
+
+test('Headings page should have h1', async ({ page }) => {
+	await page.goto('/typography/heading');
+	expect(await page.textContent('h1')).toBe('Svelte Heading - Flowbite');
+});
+
+test('HR page should have h1', async ({ page }) => {
+	await page.goto('/typography/hr');
+	expect(await page.textContent('h1')).toBe('Svelte Horizontal Line (HR) - Flowbite');
+});
+
+test('Images page should have h1', async ({ page }) => {
+	await page.goto('/typography/image');
+	expect(await page.textContent('h1')).toBe('Svelte Images - Flowbite');
+});
+
+test('Links page should have h1', async ({ page }) => {
+	await page.goto('/typography/link');
+	expect(await page.textContent('h1')).toBe('Svelte Links - Flowbite');
+});
+
+test('Lists page should have h1', async ({ page }) => {
+	await page.goto('/typography/list');
+	expect(await page.textContent('h1')).toBe('Svelte Lists - Flowbite');
+});
+
+test('Paragraphs page should have h1', async ({ page }) => {
+	await page.goto('/typography/paragraph');
+	expect(await page.textContent('h1')).toBe('Svelte Paragraph - Flowbite');
+});
+
+test('Text page should have h1', async ({ page }) => {
+	await page.goto('/typography/text');
+	expect(await page.textContent('h1')).toBe('Svelte Text - Flowbite');
+});

package/tests/utilities.spec.ts

@@ -0,0 +1,22 @@
+/************** 
+ * To run this test
+ * npx playwright test tests/utilities.spec.ts 
+************/
+
+import { expect, test } from '@playwright/test';
+
+// Utilities
+test('CloseButton page should have h1', async ({ page }) => {
+  await page.goto('/utilities/close-button');
+  expect(await page.textContent('h1')).toBe('Svelte Close Button - Flowbite');
+});
+
+test('Label page should have h1', async ({ page }) => {
+  await page.goto('/utilities/label');
+  expect(await page.textContent('h1')).toBe('Svelte Label - Flowbite');
+});
+
+test('Toolbar page should have h1', async ({ page }) => {
+  await page.goto('/utilities/toolbar');
+  expect(await page.textContent('h1')).toBe('Svelte Toolbar - Flowbite');
+});

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/vite.config.ts

@@ -0,0 +1,19 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import type { UserConfig } from 'vite';
+import path from 'path';
+import examples from 'mdsvexamples/vite';
+
+const config: UserConfig = {
+	plugins: [sveltekit(), examples],
+	server: {
+		port: 8080,
+		strictPort: false
+	},
+	resolve: {
+		alias: {
+			'flowbite-svelte': path.resolve(process.cwd(), './src/lib/index.ts')
+		}
+	}
+};
+
+export default config;