chore(demo): Demo improvements

demo/src/lib/Alert.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
+	import type { BootstrapColor } from "./types.js";
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		class?: ClassValue;
+		background?: BootstrapColor;
+		dismissible?: boolean;
+		children?: any;
+		onDismiss?: () => void;
+	};
+
+	let {
+		class: cssClass,
+		background = 'primary',
+		dismissible = false,
+		children,
+		onDismiss,
+		...restProps
+	}: Props = $props();
+
+	let dismissed = $state(false);
+
+	const classes: ClassValue = $derived([
+		'alert',
+		`alert-${background}`,
+		dismissible && 'alert-dismissible',
+		cssClass
+	]);
+
+	function handleDismiss() {
+		dismissed = true;
+		onDismiss?.();
+	}
+</script>
+
+{#if !dismissed}
+	<div class={classes} role="alert" {...restProps}>
+		{#if children}
+			{@render children()}
+		{/if}
+
+		{#if dismissible}
+			<button 
+				type="button" 
+				class="btn-close" 
+				aria-label="Close" 
+				onclick={handleDismiss}
+			></button>
+		{/if}
+	</div>
+{/if}
+
+<!--
+@component
+
+Bootstrap Alert component with type safety and full Bootstrap 5 support.
+
+## Props:
+- `background`: Bootstrap color variant (default: 'primary')
+- `dismissible`: Whether the alert can be dismissed (default: false)
+- `class`: Additional CSS classes (ClassValue type for clsx support)
+- `onDismiss`: Callback function when alert is dismissed
+- Plus all standard HTML div attributes
+
+## Examples:
+```svelte
+<Alert background="success">
+  Operation completed successfully!
+</Alert>
+
+<Alert background="warning" dismissible onDismiss={() => console.log('Alert dismissed')}>
+  <strong>Warning!</strong> Please check your input.
+</Alert>
+
+<Alert background="info" class="mb-4 shadow">
+  <h4 class="alert-heading">Well done!</h4>
+  <p>You successfully completed the task.</p>
+</Alert>
+```
+-->

demo/src/lib/Badge.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
+	import type { BootstrapBackgroundColor, BootstrapTextColor } from "./types.js";
+
+    type Props = HTMLAttributes<HTMLSpanElement> & {
+        class?: ClassValue;
+        background?: BootstrapBackgroundColor;
+        textColor?: BootstrapTextColor;
+        pill?: boolean;
+        size?: 'sm' | 'lg';
+        children?: any;
+    };
+
+    let {
+        class: cssClass,
+        background = 'primary',
+        textColor,
+        pill = false,
+        size,
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const classes: ClassValue = $derived([
+        "badge",
+        background && `bg-${background}`,
+        textColor && `text-${textColor}`,
+        pill && "rounded-pill",
+        size === 'sm' && "fs-7 px-2 py-1",
+        size === 'lg' && "fs-5 px-3 py-2",
+        cssClass
+    ]);
+</script>
+
+<span class={classes} {...restProps}>
+    {@render children?.()}
+</span>
+
+<!--
+@component Badge
+A reusable Bootstrap badge component with full type safety.
+
+Usage examples:
+```svelte
+<Badge>Default</Badge>
+<Badge background="success">Success</Badge>
+<Badge background="danger" textColor="white">Error</Badge>
+<Badge background="primary" pill={true}>Pill Badge</Badge>
+<Badge background="info" size="lg">Large Badge</Badge>
+<Badge background="warning" size="sm">Small Badge</Badge>
+```
+-->

demo/src/lib/Card.svelte

@@ -1,17 +1,58 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
+	import type { BootstrapColor } from "./types.js";
 
     type Props = HTMLAttributes<HTMLDivElement> & {
-        class?: string;
+        class?: ClassValue;
+        hover?: boolean;
+        border?: BootstrapColor;
     }
 
     let {
         class: cssClass,
+        hover = true,
+        border,
         children,
         ...restProps
     }: Props = $props();
+
+    const classes: ClassValue = $derived([
+        "card",
+        hover && "card-hover",
+        border && `border-${border}`,
+        cssClass
+    ]);
 </script>
 
-<div class={["card", cssClass]} {...restProps}>
+<div class={classes} {...restProps}>
     {@render children?.()}
 </div>
+
+<style>
+    .card-hover {
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .card-hover:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+</style>
+
+<!--
+@component Card
+A reusable Bootstrap card component with hover effects and type-safe styling.
+
+Usage examples:
+```svelte
+<Card>Basic card</Card>
+<Card border="primary" class="h-100">Card with border</Card>
+<Card border="success" hover={false}>Card without hover effect</Card>
+```
+
+Props:
+- `border`: Bootstrap color for card border
+- `hover`: Enable/disable hover effect (default: true)
+- `class`: Additional CSS classes
+-->

demo/src/lib/CardBody.svelte

@@ -1,17 +1,37 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
 
     type Props = HTMLAttributes<HTMLDivElement> & {
-        class?: string;
+        class?: ClassValue;
     }
 
     let {
         class: cssClass,
         children,
         ...restProps
     }: Props = $props();
+
+    const classes: ClassValue = $derived([
+        "card-body",
+        cssClass
+    ]);
 </script>
 
-<div class={["card-body", cssClass]} {...restProps}>
+<div class={classes} {...restProps}>
     {@render children?.()}
 </div>
+
+<!--
+@component CardBody
+A reusable Bootstrap card body component.
+
+Usage examples:
+```svelte
+<CardBody>Card content goes here</CardBody>
+<CardBody class="text-center">Centered content</CardBody>
+```
+
+Props:
+- `class`: Additional CSS classes
+-->

demo/src/lib/CardHeader.svelte

@@ -1,19 +1,51 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
+	import type { BootstrapBackgroundColor, BootstrapTextColor } from "./types.js";
 
     type Props = HTMLAttributes<HTMLDivElement> & {
-        class?: string;
+        class?: ClassValue;
         tag?: string;
+        background?: BootstrapBackgroundColor;
+        textColor?: BootstrapTextColor;
     }
 
     let {
         class: cssClass,
         tag = "div",
+        background,
+        textColor,
         children,
         ...restProps
     }: Props = $props();
+
+    const classes: ClassValue = $derived([
+        "card-header",
+        "mb-0", // Remove default margin when used as heading
+        background && `bg-${background}`,
+        textColor && `text-${textColor}`,
+        cssClass
+    ]);
 </script>
 
-<svelte:element this={tag} class={["card-header", cssClass]} {...restProps}>
+<svelte:element this={tag} class={classes} {...restProps}>
     {@render children?.()}
 </svelte:element>
+
+<!--
+@component CardHeader
+A reusable Bootstrap card header component with semantic HTML support.
+
+Usage examples:
+```svelte
+<CardHeader>Basic header</CardHeader>
+<CardHeader tag="h3">Header as H3</CardHeader>
+<CardHeader background="primary" textColor="white">Styled header</CardHeader>
+```
+
+Props:
+- `tag`: HTML element to render (default: "div")
+- `background`: Bootstrap background color
+- `textColor`: Bootstrap text color
+- `class`: Additional CSS classes
+-->

demo/src/lib/NavBar.svelte

@@ -14,7 +14,7 @@
 		{ text: 'Home', href: '/hash-routing' },
 		{
 			text: 'Start Demo',
-			href: '/hash-routing#' + (routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo')
+			href: `#${(routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo')}`
 		}
 	];
 </script>

demo/src/lib/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Bootstrap color variants used throughout the demo application
+ */
+export type BootstrapColor = 
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';
+
+/**
+ * Bootstrap text color variants
+ * Includes standard colors plus additional text-specific variants
+ */
+export type BootstrapTextColor = BootstrapColor | 'white' | 'muted' | 'black-50' | 'white-50' | 'body' | 'black';
+
+/**
+ * Bootstrap background color variants
+ * Includes standard colors plus transparent
+ */
+export type BootstrapBackgroundColor = BootstrapColor | 'transparent';
+
+/**
+ * Bootstrap size variants used for spacing, buttons, etc.
+ */
+export type BootstrapSize = 'sm' | 'md' | 'lg' | 'xl';