rizzo-css 0.0.16 → 0.0.18

package/scaffold/astro-app/src/pages/components/alert.astro

@@ -1,250 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="Alert Component — Astro" description="Accessible alert component with variants and dismissible functionality">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/alert" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/alert</a>.</p>
-	
-		<section>
-		<h2>Alert Component</h2>
-		<p>An accessible alert component for displaying important messages to users. Supports success, error, warning, and info variants with optional dismissible functionality.</p>
-	</section>
-	
-	<section>
-		<h2>Variants</h2>
-		<p>Alerts come in four semantic variants that use theme-aware colors. Click the buttons below to see them in action:</p>
-		
-		<div class="example">
-			<div class="example-title">Live Examples</div>
-			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3); margin-bottom: var(--spacing-4);">
-				<button class="btn btn-success" onclick="showAlert('success', 'Success! Your changes have been saved successfully.')">Show Success Alert</button>
-				<button class="btn btn-error" onclick="showAlert('error', 'Error! Something went wrong. Please try again.')">Show Error Alert</button>
-				<button class="btn btn-warning" onclick="showAlert('warning', 'Warning! This action cannot be undone.')">Show Warning Alert</button>
-				<button class="btn btn-info" onclick="showAlert('info', 'Info: New features are available in the latest update.')">Show Info Alert</button>
-			</div>
-			<div id="alert-examples-container" class="alert-examples-container" style="min-height: 1px; margin-top: var(--spacing-4);"></div>
-		</div>
-	</section>
-	
-	<section>
-		<h2>Auto-Dismiss</h2>
-		<p>Alerts can automatically dismiss after a set duration:</p>
-		
-		<div class="example">
-			<div class="example-title">Auto-Dismiss Examples</div>
-			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3); margin-bottom: var(--spacing-4);">
-				<button class="btn btn-primary" onclick="showAlert('success', 'This alert will auto-dismiss in 3 seconds', true, 3000, 'alert-auto-dismiss-container')">3 Second Auto-Dismiss</button>
-				<button class="btn btn-primary" onclick="showAlert('info', 'This alert will auto-dismiss in 5 seconds', true, 5000, 'alert-auto-dismiss-container')">5 Second Auto-Dismiss</button>
-				<button class="btn btn-primary" onclick="showAlert('warning', 'This alert will auto-dismiss in 7 seconds', true, 7000, 'alert-auto-dismiss-container')">7 Second Auto-Dismiss</button>
-			</div>
-			<div id="alert-auto-dismiss-container" class="alert-examples-container" style="min-height: 1px; margin-top: var(--spacing-4);"></div>
-		</div>
-	</section>
-	
-	<section>
-		<h2>Usage</h2>
-		<CodeBlock code={`---
-import Alert from '../../components/Alert.astro';
----
-
-<!-- Basic alert -->
-<Alert variant="success">
-  Your changes have been saved.
-</Alert>
-
-<!-- Dismissible alert -->
-<Alert variant="error" dismissible>
-  An error occurred. Please try again.
-</Alert>
-
-<!-- Auto-dismiss alert -->
-<Alert variant="success" dismissible autoDismiss={5000}>
-  This alert will automatically dismiss in 5 seconds.
-</Alert>`} language="astro" />
-	</section>
-	
-	<section>
-		<h2>Props</h2>
-		<ul>
-			<li><code>variant</code> (string, optional) - Alert variant: <code>"success"</code>, <code>"error"</code>, <code>"warning"</code>, or <code>"info"</code> (default: <code>"info"</code>)</li>
-			<li><code>dismissible</code> (boolean, optional) - Whether the alert can be dismissed (default: <code>false</code>)</li>
-			<li><code>autoDismiss</code> (number, optional) - Auto-dismiss duration in milliseconds. Set to <code>0</code> to disable (default: <code>0</code>). Common values: <code>3000</code> (3s), <code>5000</code> (5s), <code>7000</code> (7s)</li>
-			<li><code>id</code> (string, optional) - Unique ID for the alert. If not provided, a random ID will be generated</li>
-			<li><code>class</code> (string, optional) - Additional CSS classes</li>
-		</ul>
-	</section>
-	
-	<section>
-		<h2>Features</h2>
-		<ul>
-			<li>Four semantic variants (success, error, warning, info)</li>
-			<li>Theme-aware colors using semantic variables</li>
-			<li>Dismissible functionality with smooth animations</li>
-			<li><strong>Auto-dismiss functionality</strong> - Automatically dismiss after a set duration</li>
-			<li>Full keyboard accessibility (Enter/Space to dismiss)</li>
-			<li>ARIA attributes for screen readers (<code>role="alert"</code>, <code>aria-live="polite"</code>)</li>
-			<li>Screen reader announcements when dismissed</li>
-			<li>Respects <code>prefers-reduced-motion</code></li>
-			<li>Focus management for close button</li>
-		</ul>
-		
-		<h3>Toast Notifications</h3>
-		<p>For toast notifications (fixed position alerts), see the <a href="/docs/components/toast">Toast Component documentation</a>.</p>
-	</section>
-	
-	<section>
-		<h2>Accessibility</h2>
-		<p>The Alert component includes comprehensive accessibility features:</p>
-		<ul>
-			<li><strong>ARIA Roles:</strong> Uses <code>role="alert"</code> for important messages</li>
-			<li><strong>Live Regions:</strong> <code>aria-live="polite"</code> for screen reader announcements</li>
-			<li><strong>Labels:</strong> Each variant has an appropriate <code>aria-label</code></li>
-			<li><strong>Keyboard Support:</strong> Close button responds to Enter/Space keys</li>
-			<li><strong>Focus Management:</strong> Close button has visible focus indicators</li>
-			<li><strong>Screen Reader Feedback:</strong> Announces when alerts are dismissed</li>
-		</ul>
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/alert">Svelte</a> · Vanilla: same HTML and BEM as in Usage above; add minimal JS for dismiss.</p>
-	</section>
-</DocsLayout>
-
-<script is:inline>
-	// Make function available globally immediately
-	function showAlert(variant, message, dismissible, autoDismiss, containerId) {
-		if (!message) return;
-		
-		variant = variant || 'info';
-		dismissible = dismissible !== undefined ? dismissible : true;
-		autoDismiss = autoDismiss !== undefined ? autoDismiss : 0;
-		containerId = containerId || 'alert-examples-container';
-		
-		// Find the specific alert container
-		var container = document.getElementById(containerId);
-		if (!container) {
-			// Fallback to first container with class
-			container = document.querySelector('.alert-examples-container');
-		}
-		
-		if (!container) {
-			console.error('Alert container not found:', containerId);
-			return;
-		}
-		
-		var alertId = 'alert-' + Math.random().toString(36).substr(2, 9);
-		var alertEl = document.createElement('div');
-		alertEl.id = alertId;
-		alertEl.className = 'alert alert--' + variant;
-		alertEl.setAttribute('role', 'alert');
-		alertEl.setAttribute('aria-live', 'polite');
-		
-		// Ensure alert is visible and has proper display
-		alertEl.style.display = 'flex';
-		alertEl.style.visibility = 'visible';
-		alertEl.style.opacity = '1';
-		
-		var content = document.createElement('div');
-		content.className = 'alert__content';
-		// Extract variant label and message - remove duplicate variant label from message
-		var variantLabel = variant.charAt(0).toUpperCase() + variant.slice(1);
-		var variantPrefix = variantLabel + '!';
-		var variantPrefixWithColon = variantLabel + ':';
-		
-		// Remove variant label from the beginning of the message if it exists
-		var cleanMessage = message;
-		if (message.toLowerCase().startsWith(variantPrefix.toLowerCase())) {
-			cleanMessage = message.substring(variantPrefix.length).trim();
-		} else if (message.toLowerCase().startsWith(variantPrefixWithColon.toLowerCase())) {
-			cleanMessage = message.substring(variantPrefixWithColon.length).trim();
-		}
-		
-		// Show just the variant label in bold, then the clean message
-		content.innerHTML = '<strong>' + variantPrefix + '</strong> ' + cleanMessage;
-		// Ensure content is visible
-		content.style.color = 'inherit';
-		content.style.display = 'block';
-		content.style.visibility = 'visible';
-		content.style.opacity = '1';
-		alertEl.appendChild(content);
-		
-		var closeBtn = null;
-		if (dismissible) {
-			closeBtn = document.createElement('button');
-			closeBtn.type = 'button';
-			closeBtn.className = 'alert__close';
-			closeBtn.setAttribute('aria-label', 'Dismiss alert');
-			closeBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>';
-			// Ensure close button is visible
-			closeBtn.style.color = 'inherit';
-			closeBtn.style.opacity = '0.8';
-			closeBtn.style.display = 'flex';
-			closeBtn.style.visibility = 'visible';
-			alertEl.appendChild(closeBtn);
-		}
-		
-		container.appendChild(alertEl);
-		
-		// Force CSS to apply after element is in DOM - especially important for warning variant
-		requestAnimationFrame(function() {
-			// Force reflow to apply CSS classes
-			alertEl.offsetHeight;
-			
-			// Get computed styles
-			var computedStyle = window.getComputedStyle(alertEl);
-			var textColor = computedStyle.color;
-			var bgColor = computedStyle.backgroundColor;
-			
-			// For warning alerts, ensure theme variable text color is applied
-			if (variant === 'warning') {
-				// Use CSS variable for theming support
-				alertEl.style.color = 'var(--warning-text)';
-				content.style.color = 'var(--warning-text)';
-				if (closeBtn) {
-					closeBtn.style.color = 'var(--warning-text)';
-					closeBtn.style.opacity = '0.9';
-				}
-			} else {
-				// For other variants, just ensure color is inherited
-				if (textColor && textColor !== 'transparent' && textColor !== 'rgba(0, 0, 0, 0)') {
-					content.style.color = textColor;
-				} else {
-					content.style.color = 'inherit';
-				}
-			}
-			
-			// Double-check content is visible
-			var contentStyle = window.getComputedStyle(content);
-			if (contentStyle.display === 'none' || contentStyle.visibility === 'hidden' || contentStyle.opacity === '0') {
-				content.style.display = 'block';
-				content.style.visibility = 'visible';
-				content.style.opacity = '1';
-			}
-		});
-		
-		var closeAlert = function() {
-			alertEl.style.opacity = '0';
-			alertEl.style.transform = 'translateY(-10px)';
-			setTimeout(function() {
-				if (alertEl && alertEl.parentNode) {
-					alertEl.remove();
-				}
-			}, 200);
-		};
-		
-		if (closeBtn) {
-			closeBtn.addEventListener('click', closeAlert);
-			
-			if (autoDismiss > 0) {
-				var timeoutId = setTimeout(closeAlert, autoDismiss);
-				closeBtn.addEventListener('click', function() {
-					clearTimeout(timeoutId);
-				});
-			}
-		} else if (autoDismiss > 0) {
-			setTimeout(closeAlert, autoDismiss);
-		}
-	}
-	
-	// Make available on window for global access
-	window.showAlert = showAlert;
-</script>

package/scaffold/astro-app/src/pages/components/avatar.astro

@@ -1,102 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import AvatarComponent from '../../components/Avatar.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="Avatar Component — Astro" description="User avatar with image or initials fallback, sizes and shapes">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/avatar" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/avatar</a>.</p>
-	
-		<section>
-		<h2>Avatar Component</h2>
-		<p>An accessible avatar for users: show a profile image when available, or initials derived from a name (or custom initials) when no image is provided. Supports multiple sizes and circle or square shape.</p>
-		
-		<h3>Props</h3>
-		<ul>
-			<li><code>src</code> (string, optional) - Image URL; when provided, the image is shown</li>
-			<li><code>alt</code> (string, optional) - Alt text for the image</li>
-			<li><code>name</code> (string, optional) - Full name used to derive initials when no image (e.g. "Jane Doe" → "JD")</li>
-			<li><code>initials</code> (string, optional) - Override initials when no image (e.g. "JD"); ignored if <code>name</code> is provided</li>
-			<li><code>size</code> (string, optional) - <code>sm</code>, <code>md</code>, <code>lg</code> (default: md)</li>
-			<li><code>shape</code> (string, optional) - <code>circle</code>, <code>square</code> (default: circle)</li>
-			<li><code>class</code> (string, optional) - Additional CSS classes</li>
-		</ul>
-
-		<h3>Basic Usage (initials)</h3>
-		<p>When no <code>src</code> is provided, use <code>name</code> to show initials (first letter of first and last word, or first two letters of a single word).</p>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<div style="display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap;">
-				<AvatarComponent name="Jane Doe" />
-				<AvatarComponent name="Alice" />
-				<AvatarComponent initials="AB" />
-			</div>
-		</div>
-		<CodeBlock code={`---
-import Avatar from '../../components/Avatar.astro';
----
-
-<Avatar name="Jane Doe" />
-<Avatar name="Alice" />
-<Avatar initials="AB" />`} language="astro" />
-
-		<h3>Sizes</h3>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<div style="display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap;">
-				<AvatarComponent name="Jane Doe" size="sm" />
-				<AvatarComponent name="Jane Doe" size="md" />
-				<AvatarComponent name="Jane Doe" size="lg" />
-			</div>
-		</div>
-		<CodeBlock code={`<Avatar name="Jane Doe" size="sm" />
-<Avatar name="Jane Doe" size="md" />
-<Avatar name="Jane Doe" size="lg" />`} language="astro" />
-
-		<h3>Shape</h3>
-		<p>Use <code>shape="square"</code> for a rounded square; default is <code>circle</code>.</p>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<div style="display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap;">
-				<AvatarComponent name="Jane Doe" shape="circle" />
-				<AvatarComponent name="Jane Doe" shape="square" />
-			</div>
-		</div>
-		<CodeBlock code={`<Avatar name="Jane Doe" shape="circle" />
-<Avatar name="Jane Doe" shape="square" />`} language="astro" />
-
-		<h3>With image</h3>
-		<p>Pass <code>src</code> (and <code>alt</code>) to show a profile image. The image is scaled to cover the avatar with <code>object-fit: cover</code>.</p>
-		<div class="example">
-			<div class="example-title">Live Example (placeholder image)</div>
-			<div style="display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap;">
-				<AvatarComponent
-					src="https://api.dicebear.com/7.x/initials/svg?seed=Jane"
-					alt="Jane Doe"
-					size="md"
-				/>
-				<AvatarComponent
-					src="https://api.dicebear.com/7.x/initials/svg?seed=Alice"
-					alt="Alice"
-					size="lg"
-				/>
-			</div>
-		</div>
-		<CodeBlock code={`<Avatar
-  src="/path/to/photo.jpg"
-  alt="Jane Doe"
-  size="md"
-/>`} language="astro" />
-
-		<h3>Features</h3>
-		<ul>
-			<li><strong>Accessible</strong> - <code>role="img"</code> and <code>aria-label</code> from alt, name, or initials</li>
-			<li><strong>Initials</strong> - Derived from <code>name</code> (e.g. "Jane Doe" → "JD") or set via <code>initials</code></li>
-			<li><strong>Image</strong> - Optional <code>src</code> with <code>loading="lazy"</code> and <code>object-fit: cover</code></li>
-			<li><strong>Sizes</strong> - sm, md, lg</li>
-			<li><strong>Shape</strong> - circle (default) or square with rounded corners</li>
-		</ul>
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/avatar">Svelte</a> · Vanilla: same HTML and BEM as in Usage above.</p>
-	</section>
-</DocsLayout>

package/scaffold/astro-app/src/pages/components/badge.astro

@@ -1,119 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import Badge from '../../components/Badge.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="Badge Component — Astro" description="Small labels and tags for displaying status, categories, or counts">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/badge" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/badge</a>.</p>
-	
-		<section>
-		<h2>Badge Component</h2>
-		<p>Small labels and tags for displaying status, categories, or counts. Badges are inline elements that can be used within text or alongside other components.</p>
-		
-		<h3>Badge Variants</h3>
-		<div class="example">
-			<div class="example-title">Live Examples</div>
-			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: center;">
-				<Badge variant="primary">Primary</Badge>
-				<Badge variant="success">Success</Badge>
-				<Badge variant="warning">Warning</Badge>
-				<Badge variant="error">Error</Badge>
-				<Badge variant="info">Info</Badge>
-			</div>
-		</div>
-		
-		<h3>Badge Sizes</h3>
-		<div class="example">
-			<div class="example-title">Live Examples</div>
-			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: center;">
-				<Badge variant="primary" size="sm">Small</Badge>
-				<Badge variant="primary" size="md">Medium</Badge>
-				<Badge variant="primary" size="lg">Large</Badge>
-			</div>
-		</div>
-		
-		<h3>Pill Badges</h3>
-		<div class="example">
-			<div class="example-title">Live Examples</div>
-			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: center;">
-				<Badge variant="primary" pill>Pill Primary</Badge>
-				<Badge variant="success" pill>Pill Success</Badge>
-				<Badge variant="warning" pill size="sm">Small Pill</Badge>
-				<Badge variant="error" pill size="lg">Large Pill</Badge>
-			</div>
-		</div>
-		
-		<h3>Usage in Context</h3>
-		<div class="example">
-			<div class="example-title">Live Examples</div>
-			<div style="display: flex; flex-direction: column; gap: var(--spacing-4);">
-				<p>You have <Badge variant="info">3</Badge> new messages.</p>
-				<p>Status: <Badge variant="success" pill>Active</Badge></p>
-				<p>Priority: <Badge variant="error" size="sm">High</Badge></p>
-				<div style="display: flex; align-items: center; gap: var(--spacing-2);">
-					<span>Categories:</span>
-					<Badge variant="primary" size="sm">Design</Badge>
-					<Badge variant="info" size="sm">Development</Badge>
-					<Badge variant="success" size="sm" pill>Completed</Badge>
-				</div>
-			</div>
-		</div>
-		
-		<p>All badges:</p>
-		<ul>
-			<li>Use semantic theme variables</li>
-			<li>Are inline elements (can be used within text)</li>
-			<li>Support multiple variants and sizes</li>
-			<li>Have pill/rounded variant option</li>
-			<li>Automatically adapt to theme changes</li>
-		</ul>
-		
-		<h3>Usage</h3>
-		<CodeBlock code={`<!-- Using component -->
----
-import Badge from '../../components/Badge.astro';
----
-
-<Badge variant="primary">New</Badge>
-<Badge variant="success" size="sm">Active</Badge>
-<Badge variant="error" pill>Urgent</Badge>
-
-<!-- Using classes -->
-<span class="badge badge--primary">Primary</span>
-<span class="badge badge--success badge--sm">Small Success</span>
-<span class="badge badge--error badge--lg badge--pill">Large Pill Error</span>`} language="astro" />
-		
-		<h3>Props</h3>
-		<ul>
-			<li><code>variant</code> (optional) - Badge variant: <code>primary</code>, <code>success</code>, <code>warning</code>, <code>error</code>, <code>info</code> (default: <code>primary</code>)</li>
-			<li><code>size</code> (optional) - Badge size: <code>sm</code>, <code>md</code>, <code>lg</code> (default: <code>md</code>)</li>
-			<li><code>pill</code> (optional) - Boolean to enable pill/rounded variant (default: <code>false</code>)</li>
-			<li><code>class</code> (optional) - Additional CSS classes</li>
-		</ul>
-		
-		<h3>Badge Variants</h3>
-		<p>Text on solid semantic variants (success, warning, error, info) uses the same contrast variables as buttons (<code>--success-text-on-solid</code>, <code>--warning-text-on-solid</code>, etc.) so badge text stays readable across all themes.</p>
-		<ul>
-			<li><code>badge--primary</code> - Primary/accent color badge</li>
-			<li><code>badge--success</code> - Success/positive badge</li>
-			<li><code>badge--warning</code> - Warning badge</li>
-			<li><code>badge--error</code> - Error/destructive badge</li>
-			<li><code>badge--info</code> - Informational badge</li>
-		</ul>
-		
-		<h3>Badge Sizes</h3>
-		<ul>
-			<li><code>badge--sm</code> - Small badge (extra small font, minimal padding)</li>
-			<li><code>badge--md</code> - Medium badge (small font, standard padding) - default</li>
-			<li><code>badge--lg</code> - Large badge (base font, larger padding)</li>
-		</ul>
-		
-		<h3>Pill Variant</h3>
-		<p>Add the <code>badge--pill</code> class or <code>pill</code> prop to create fully rounded badges:</p>
-		<CodeBlock code={`<Badge variant="primary" pill>Pill Badge</Badge>
-<span class="badge badge--primary badge--pill">Pill Badge</span>`} language="astro" />
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/badge">Svelte</a> · Vanilla: same HTML and BEM as in Usage above.</p>
-	</section>
-</DocsLayout>

package/scaffold/astro-app/src/pages/components/breadcrumb.astro

@@ -1,124 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import BreadcrumbComponent from '../../components/Breadcrumb.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="Breadcrumb Component — Astro" description="Navigation breadcrumbs with separator customization and responsive behavior">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/breadcrumb" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/breadcrumb</a>.</p>
-	
-		<section>
-		<h2>Breadcrumb Component</h2>
-		<p>An accessible breadcrumb navigation component. Supports custom separators (chevron, slash, arrow, or custom character) and responsive truncation on small screens.</p>
-		
-		<h3>Props</h3>
-		<ul>
-			<li><code>items</code> (array, required) - Array of objects with <code>label</code> and optional <code>href</code>. The last item or any item without <code>href</code> is shown as the current page.</li>
-			<li><code>separator</code> (string, optional) - One of <code>'chevron'</code> (default), <code>'slash'</code>, <code>'arrow'</code>, or a custom character (e.g. <code>'>'</code>, <code>'·'</code>)</li>
-			<li><code>class</code> (string, optional) - Additional CSS classes</li>
-		</ul>
-
-		<h3>Item Structure</h3>
-		<ul>
-			<li><code>label</code> (string, required) - Link or current page text</li>
-			<li><code>href</code> (string, optional) - URL for the link. Omit for the current page.</li>
-		</ul>
-
-		<h3>Basic Usage (Chevron Separator)</h3>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<BreadcrumbComponent
-				items={[
-					{ label: 'Home', href: '/' },
-					{ label: 'Docs', href: '/docs' },
-					{ label: 'Components', href: '/docs/components' },
-					{ label: 'Breadcrumb' },
-				]}
-			/>
-		</div>
-
-		<CodeBlock code={`---
-import Breadcrumb from '../../components/Breadcrumb.astro';
----
-
-<Breadcrumb
-  items={[
-    { label: 'Home', href: '/' },
-    { label: 'Docs', href: '/docs' },
-    { label: 'Components', href: '/docs/components' },
-    { label: 'Breadcrumb' },
-  ]}
-/>`} language="astro" />
-
-		<h3>Separator Variants</h3>
-		
-		<h4>Slash</h4>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<BreadcrumbComponent
-				separator="slash"
-				items={[
-					{ label: 'Home', href: '/' },
-					{ label: 'Docs', href: '/docs' },
-					{ label: 'Breadcrumb' },
-				]}
-			/>
-		</div>
-
-		<CodeBlock code={`<Breadcrumb
-  separator="slash"
-  items={[
-    { label: 'Home', href: '/' },
-    { label: 'Docs', href: '/docs' },
-    { label: 'Breadcrumb' },
-  ]}
-/>`} language="astro" />
-
-		<h4>Arrow</h4>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<BreadcrumbComponent
-				separator="arrow"
-				items={[
-					{ label: 'Home', href: '/' },
-					{ label: 'Getting Started', href: '/docs/getting-started' },
-					{ label: 'Installation' },
-				]}
-			/>
-		</div>
-
-		<h4>Custom Character</h4>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<BreadcrumbComponent
-				separator=">"
-				items={[
-					{ label: 'Home', href: '/' },
-					{ label: 'Blog', href: '/blog' },
-					{ label: 'Post Title' },
-				]}
-			/>
-		</div>
-
-		<CodeBlock code={`<Breadcrumb
-  separator=">"
-  items={[
-    { label: 'Home', href: '/' },
-    { label: 'Blog', href: '/blog' },
-    { label: 'Post Title' },
-  ]}
-/>`} language="astro" />
-
-		<h3>Features</h3>
-		<ul>
-			<li><strong>Semantic markup</strong> - <code>&lt;nav aria-label="Breadcrumb"&gt;</code> with <code>&lt;ol&gt;</code> and <code>&lt;li&gt;</code></li>
-			<li><strong>Current page</strong> - Last item or item without <code>href</code> uses <code>aria-current="page"</code> and is not a link</li>
-			<li><strong>Separator customization</strong> - Chevron (icon), slash, arrow (›), or any custom character</li>
-			<li><strong>Responsive</strong> - On small screens (≤639px), long labels truncate with ellipsis; current page label is not truncated</li>
-			<li><strong>Theme-aware</strong> - Uses design system variables for color and spacing</li>
-			<li><strong>Accessible</strong> - Focus styles, hover states, and screen reader friendly</li>
-		</ul>
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/breadcrumb">Svelte</a> · Vanilla: same HTML and BEM as in Usage above.</p>
-	</section>
-</DocsLayout>