rizzo-css 0.0.11 → 0.0.13

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

@@ -0,0 +1,209 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import Tooltip from '../../components/Tooltip.astro';
+import Button from '../../components/Button.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+---
+
+<DocsLayout title="Tooltip Component — Astro" description="Accessible tooltip component with positioning options and hover states">
+	
+	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/tooltip" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/tooltip</a>.</p>
+	
+		<section>
+		<h2>Tooltip Component</h2>
+		<p>An accessible tooltip component that provides additional context or information when users hover over or focus on an element. Tooltips are positioned relative to their trigger element and support multiple positions.</p>
+	</section>
+	
+	<section>
+		<h2>Basic Usage</h2>
+		<p>Wrap any element with a tooltip wrapper and include the Tooltip component:</p>
+		
+		<div class="example">
+			<div class="example-title">Basic Tooltip</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-4); align-items: center; padding: var(--spacing-8);">
+				<div class="tooltip-wrapper" aria-describedby="tooltip-basic">
+					<button class="btn btn-primary">Hover me</button>
+					<Tooltip id="tooltip-basic" text="This is a basic tooltip" position="top" />
+				</div>
+			</div>
+		</div>
+		
+		<CodeBlock code={`---
+import Tooltip from '../../components/Tooltip.astro';
+---
+
+<div class="tooltip-wrapper" aria-describedby="tooltip-basic">
+  <button class="btn btn-primary">Hover me</button>
+  <Tooltip id="tooltip-basic" text="This is a basic tooltip" position="top" />
+</div>`} language="astro" />
+	</section>
+	
+	<section>
+		<h2>Positions</h2>
+		<p>Tooltips can be positioned in four directions: top, bottom, left, or right.</p>
+		
+		<div class="example">
+			<div class="example-title">Position Examples</div>
+			<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); align-items: center; justify-items: center; padding: var(--spacing-12); min-height: 300px;">
+				<!-- Top -->
+				<div class="tooltip-wrapper" aria-describedby="tooltip-top" style="grid-column: 2; grid-row: 1;">
+					<button class="btn btn-primary">Top</button>
+					<Tooltip id="tooltip-top" text="Tooltip on top" position="top" />
+				</div>
+				
+				<!-- Left -->
+				<div class="tooltip-wrapper" aria-describedby="tooltip-left" style="grid-column: 1; grid-row: 2;">
+					<button class="btn btn-primary">Left</button>
+					<Tooltip id="tooltip-left" text="Tooltip on left" position="left" />
+				</div>
+				
+				<!-- Right -->
+				<div class="tooltip-wrapper" aria-describedby="tooltip-right" style="grid-column: 3; grid-row: 2;">
+					<button class="btn btn-primary">Right</button>
+					<Tooltip id="tooltip-right" text="Tooltip on right" position="right" />
+				</div>
+				
+				<!-- Bottom -->
+				<div class="tooltip-wrapper" aria-describedby="tooltip-bottom" style="grid-column: 2; grid-row: 3;">
+					<button class="btn btn-primary">Bottom</button>
+					<Tooltip id="tooltip-bottom" text="Tooltip on bottom" position="bottom" />
+				</div>
+			</div>
+		</div>
+		
+		<CodeBlock code={`<!-- Top position -->
+<div class="tooltip-wrapper" aria-describedby="tooltip-top">
+  <button>Hover me</button>
+  <Tooltip id="tooltip-top" text="Tooltip on top" position="top" />
+</div>
+
+<!-- Bottom position -->
+<div class="tooltip-wrapper" aria-describedby="tooltip-bottom">
+  <button>Hover me</button>
+  <Tooltip id="tooltip-bottom" text="Tooltip on bottom" position="bottom" />
+</div>
+
+<!-- Left position -->
+<div class="tooltip-wrapper" aria-describedby="tooltip-left">
+  <button>Hover me</button>
+  <Tooltip id="tooltip-left" text="Tooltip on left" position="left" />
+</div>
+
+<!-- Right position -->
+<div class="tooltip-wrapper" aria-describedby="tooltip-right">
+  <button>Hover me</button>
+  <Tooltip id="tooltip-right" text="Tooltip on right" position="right" />
+</div>`} language="astro" />
+	</section>
+	
+	<section>
+		<h2>With Different Elements</h2>
+		<p>Tooltips work with any element - buttons, links, icons, badges, etc.</p>
+		
+		<div class="example">
+			<div class="example-title">Tooltip Examples</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-4); align-items: center; padding: var(--spacing-8);">
+				<div class="tooltip-wrapper" aria-describedby="tooltip-button">
+					<button class="btn btn-success">Success Button</button>
+					<Tooltip id="tooltip-button" text="This is a success button" position="top" />
+				</div>
+				
+				<div class="tooltip-wrapper" aria-describedby="tooltip-link">
+					<a href="#tooltip-link" style="color: var(--accent); text-decoration: underline;">Hover link</a>
+					<Tooltip id="tooltip-link" text="This is a link with a tooltip" position="top" />
+				</div>
+				
+				<div class="tooltip-wrapper" aria-describedby="tooltip-badge">
+					<span class="badge badge--primary">New</span>
+					<Tooltip id="tooltip-badge" text="This is a badge with a tooltip" position="top" />
+				</div>
+				
+				<div class="tooltip-wrapper" aria-describedby="tooltip-icon">
+					<button class="btn" aria-label="Settings" style="padding: var(--spacing-2);">
+						<svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+							<circle cx="8" cy="8" r="2.5"></circle>
+							<path d="M8 1v2M8 13v2M15 8h-2M3 8H1M12.364 3.636l-1.414 1.414M5.05 10.95l-1.414 1.414M12.364 12.364l-1.414-1.414M5.05 5.05L3.636 3.636"></path>
+						</svg>
+					</button>
+					<Tooltip id="tooltip-icon" text="Settings icon" position="top" />
+				</div>
+			</div>
+		</div>
+	</section>
+	
+	<section>
+		<h2>Long Text</h2>
+		<p>Tooltips automatically wrap long text and have a maximum width:</p>
+		
+		<div class="example">
+			<div class="example-title">Long Text Tooltip</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-4); align-items: center; padding: var(--spacing-8);">
+				<div class="tooltip-wrapper" aria-describedby="tooltip-long">
+					<button class="btn btn-info">Hover for long text</button>
+					<Tooltip id="tooltip-long" text="This is a much longer tooltip that will automatically wrap to multiple lines when it exceeds the maximum width of the tooltip container." position="top" />
+				</div>
+			</div>
+		</div>
+	</section>
+	
+	<section>
+		<h2>Props</h2>
+		<ul>
+			<li><code>text</code> (string, required) - The tooltip text content</li>
+			<li><code>position</code> ('top' | 'bottom' | 'left' | 'right', optional) - Tooltip position relative to trigger element (default: 'top')</li>
+			<li><code>delay</code> (number, optional) - Delay in milliseconds before showing tooltip (default: 0)</li>
+			<li><code>id</code> (string, optional) - Unique ID for the tooltip. 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 position options (top, bottom, left, right)</li>
+			<li>Automatic arrow positioning</li>
+			<li>Accessible with ARIA attributes</li>
+			<li>Keyboard accessible (works with focus states)</li>
+			<li>Theme-aware styling using semantic variables</li>
+			<li>Smooth animations (respects <code>prefers-reduced-motion</code>)</li>
+			<li>Automatic text wrapping for long content</li>
+			<li>Maximum width constraint for readability</li>
+		</ul>
+	</section>
+	
+	<section>
+		<h2>Accessibility</h2>
+		<p>The Tooltip component includes comprehensive accessibility features:</p>
+		<ul>
+			<li><strong>ARIA Attributes:</strong> Uses <code>role="tooltip"</code> and <code>aria-describedby</code> pattern</li>
+			<li><strong>Keyboard Support:</strong> Tooltips appear on focus for keyboard users</li>
+			<li><strong>Screen Reader Support:</strong> Tooltip content is associated with the trigger element</li>
+			<li><strong>Focus Management:</strong> Tooltips work with <code>:focus-within</code> for proper focus handling</li>
+		</ul>
+		
+		<h3>Proper Usage</h3>
+		<p>Always use <code>aria-describedby</code> on the trigger element to associate it with the tooltip:</p>
+		<CodeBlock code={`<div class="tooltip-wrapper" aria-describedby="my-tooltip">
+  <button>Hover me</button>
+  <Tooltip id="my-tooltip" text="Tooltip text" />
+</div>`} language="astro" />
+	</section>
+	
+	<section>
+		<h2>Styling</h2>
+		<p>Tooltips use semantic theme variables and automatically adapt to the selected theme:</p>
+		<ul>
+			<li>Background: <code>var(--text)</code> (uses text color for high contrast)</li>
+			<li>Text: <code>var(--background)</code> (uses background color for contrast)</li>
+			<li>Shadow: <code>var(--shadow-lg)</code> for depth</li>
+		</ul>
+		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/tooltip">Svelte</a> · Vanilla: same HTML and BEM as in Usage above; add minimal JS for show/hide and position.</p>
+	</section>
+</DocsLayout>
+
+<style>
+	.tooltip-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+</style>

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

@@ -0,0 +1,290 @@
+---
+import DocsLayout from '../layouts/DocsLayout.astro';
+import Card from '../components/Card.astro';
+---
+
+<DocsLayout title="Components — Astro" description="Component library with usage examples and live demos">
+	<section>
+		<h2>Component Library</h2>
+		<p>Rizzo CSS includes a comprehensive set of accessible, theme-aware components. Each component is built with semantic variables, follows BEM naming conventions, and includes full keyboard navigation and ARIA support.</p>
+		<p>Full documentation (getting started, theming, API) is on the main site: <a href="https://rizzo-css.vercel.app/docs" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs</a>.</p>
+	</section>
+	
+	<section>
+		<h2>Available Components</h2>
+		<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--spacing-70), 1fr)); gap: var(--spacing-6); margin: var(--spacing-8) 0;">
+			<a href="/components/navbar" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Navbar</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Responsive, accessible navigation bar with integrated settings button</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/settings" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Settings</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Comprehensive settings panel for theme switching and accessibility options</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/theme-switcher" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Theme Switcher</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Accessible theme switcher with theme icons and keyboard navigation</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/button" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Button</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Semantic button component with variants using theme variables</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/badge" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Badge</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Small labels and tags for displaying status, categories, or counts</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/accordion" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Accordion</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Collapsible sections with single/multiple open and keyboard navigation</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/breadcrumb" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Breadcrumb</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Navigation breadcrumbs with separator customization and responsive truncation</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/pagination" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Pagination</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Accessible pagination with prev/next, page numbers, ellipsis, and configurable URLs</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/progress-bar" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Progress Bar</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Progress bar with variants, sizes, optional label, and indeterminate (loading) state</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/spinner" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Spinner</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Accessible loading spinner with variants and sizes; respects reduced motion</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/avatar" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Avatar</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">User avatar with image or initials fallback, sizes and circle/square shape</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/divider" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Divider</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Horizontal or vertical divider line with optional label (e.g. OR)</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/table" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Table</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Data table with column sorting and optional filtering</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/icons" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 0.5rem 0;">Icons</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Reusable SVG icon components (Tabler Icons and Devicons) with interactive card grid and copy functionality</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/copy-to-clipboard" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">CopyToClipboard</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Component for copying text values to the clipboard with visual feedback</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/forms" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 0.5rem 0;">Forms</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Comprehensive set of accessible form components with validation states</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/cards" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Cards</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Flexible card component with variants, sections, and image support</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/modal" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 0.5rem 0;">Modal</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Accessible modal/dialog component with focus trapping and keyboard navigation</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/alert" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Alert</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Accessible alert component with variants, dismissible functionality, and auto-dismiss</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/toast" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Toast</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Fixed position toast notifications with auto-dismiss and programmatic control</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/search" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 0.5rem 0;">Search</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Search with Algolia integration; Cmd icon + K in trigger (same size as search icon); same live example on Astro, Svelte, and Vanilla</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/tooltip" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Tooltip</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Accessible tooltip component with positioning options and hover states</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/dropdown" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Dropdown</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Accessible dropdown menu with keyboard navigation, nested submenus, separators, and menu items</p>
+					</div>
+				</Card>
+			</a>
+			
+			<a href="/components/tabs" class="component-card-link">
+				<Card variant="elevated">
+					<div class="card__body">
+						<h3 style="margin: 0 0 var(--spacing-2) 0;">Tabs</h3>
+						<p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Accessible tabs component with keyboard navigation and ARIA tab pattern</p>
+					</div>
+				</Card>
+			</a>
+		</div>
+	</section>
+	
+	<section>
+		<h2>Component Features</h2>
+		<p>All components in Rizzo CSS share these core features:</p>
+		<ul>
+			<li><strong>Semantic Theming</strong> - All components use semantic CSS variables that adapt to the selected theme</li>
+			<li><strong>Accessibility</strong> - Full keyboard navigation, ARIA attributes, and screen reader support</li>
+			<li><strong>BEM Naming</strong> - Consistent class naming convention (block__element--modifier)</li>
+			<li><strong>Responsive</strong> - Mobile-first design with responsive breakpoints</li>
+			<li><strong>Theme-Aware</strong> - Automatically adapt to all 14 available themes</li>
+			<li><strong>WCAG AA Compliant</strong> - Proper contrast ratios and accessible color combinations</li>
+		</ul>
+	</section>
+</DocsLayout>
+
+<style>
+	.component-card-link {
+		text-decoration: none;
+		color: inherit;
+		display: block;
+		transition: transform var(--transition-base);
+	}
+	
+	.component-card-link:hover {
+		transform: translateY(calc(-1 * var(--spacing-0-125)));
+	}
+	
+	.component-card-link:focus-visible {
+		outline: var(--outline-width) solid var(--accent);
+		outline-offset: var(--outline-offset);
+		border-radius: var(--radius-lg);
+	}
+	
+	.component-card-link .card__body h3 {
+		color: var(--text);
+		transition: color var(--transition-base);
+	}
+	
+	.component-card-link:hover .card__body h3 {
+		color: var(--accent);
+	}
+	
+	@media (prefers-reduced-motion: reduce) {
+		.component-card-link {
+			transition: none;
+		}
+		
+		.component-card-link:hover {
+			transform: none;
+		}
+	}
+	
+	@media (width <= 640px) {
+		div[style*="grid-template-columns"] {
+			grid-template-columns: 1fr !important;
+		}
+	}
+</style>

package/scaffold/astro-app/src/pages/docs/accessibility.astro

@@ -0,0 +1,9 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+---
+<DocsLayout title="Accessibility" description="Keyboard, ARIA, and screen reader support.">
+  <section>
+    <p>Read the full doc on the main site:</p>
+    <p><a href="https://rizzo-css.vercel.app/docs/accessibility" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/accessibility</a></p>
+  </section>
+</DocsLayout>

package/scaffold/astro-app/src/pages/docs/colors.astro

@@ -0,0 +1,9 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+---
+<DocsLayout title="Colors" description="Semantic color variables and themes.">
+  <section>
+    <p>Read the full doc on the main site:</p>
+    <p><a href="https://rizzo-css.vercel.app/docs/colors" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/colors</a></p>
+  </section>
+</DocsLayout>

package/scaffold/astro-app/src/pages/docs/design-system.astro

@@ -0,0 +1,9 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+---
+<DocsLayout title="Design System" description="Design tokens, BEM, and structure.">
+  <section>
+    <p>Read the full doc on the main site:</p>
+    <p><a href="https://rizzo-css.vercel.app/docs/design-system" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/design-system</a></p>
+  </section>
+</DocsLayout>

package/scaffold/astro-app/src/pages/docs/getting-started.astro

@@ -0,0 +1,9 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+---
+<DocsLayout title="Getting Started" description="Install, add CSS, and set a theme.">
+  <section>
+    <p>Read the full doc on the main site:</p>
+    <p><a href="https://rizzo-css.vercel.app/docs/getting-started" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/getting-started</a></p>
+  </section>
+</DocsLayout>

package/scaffold/astro-app/src/pages/docs/index.astro

@@ -0,0 +1,15 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+---
+<DocsLayout title="Documentation" description="Overview and links to the full docs on the main site.">
+  <section>
+    <p>Full documentation lives on the main site. Use the links below or the nav.</p>
+    <ul>
+      <li><a href="https://rizzo-css.vercel.app/docs/getting-started" target="_blank" rel="noopener noreferrer">Getting Started</a></li>
+      <li><a href="https://rizzo-css.vercel.app/docs/design-system" target="_blank" rel="noopener noreferrer">Design System</a></li>
+      <li><a href="https://rizzo-css.vercel.app/docs/accessibility" target="_blank" rel="noopener noreferrer">Accessibility</a></li>
+      <li><a href="https://rizzo-css.vercel.app/docs/colors" target="_blank" rel="noopener noreferrer">Colors</a></li>
+      <li><a href="https://rizzo-css.vercel.app/docs/theming" target="_blank" rel="noopener noreferrer">Theming</a></li>
+    </ul>
+  </section>
+</DocsLayout>

package/scaffold/astro-app/src/pages/docs/themes/[theme].astro

@@ -0,0 +1,14 @@
+---
+import DocsLayout from '../../../layouts/DocsLayout.astro';
+
+const { theme } = Astro.params;
+const mainSiteUrl = 'https://rizzo-css.vercel.app/docs/themes/' + theme;
+const themeId = theme || 'unknown';
+---
+<DocsLayout title={`Theme: ${themeId}`} description="Theme preview and link to main site.">
+  <section>
+    <p>Full theme showcase on the main site:</p>
+    <p><a href={mainSiteUrl} target="_blank" rel="noopener noreferrer">{mainSiteUrl}</a></p>
+    <p>Set this theme with <code>data-theme="{themeId}"</code> on <code>&lt;html&gt;</code> or use the Settings panel.</p>
+  </section>
+</DocsLayout>

package/scaffold/astro-app/src/pages/docs/theming.astro

@@ -0,0 +1,10 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+---
+<DocsLayout title="Theming" description="Theme overview and how to set data-theme.">
+  <section>
+    <p>Full theming docs and theme showcase on the main site:</p>
+    <p><a href="https://rizzo-css.vercel.app/docs/theming" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/theming</a></p>
+    <p>Use the nav to open individual theme pages below, or the Settings panel to switch themes.</p>
+  </section>
+</DocsLayout>

package/scaffold/astro-app/src/pages/index.astro

@@ -1,21 +1,15 @@
 ---
 import Layout from '../layouts/Layout.astro';
-/* Placeholder replaced by rizzo-css CLI when scaffolding */
 const TITLE = '{{TITLE}}';
 ---
 <Layout title={TITLE}>
-  <a href="#main-content" class="skip-link">Skip to main content</a>
-  <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
-    <a href="/" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{TITLE}</a>
-    <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Docs</a>
-  </header>
-  <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
+  <div class="flex flex-col items-center justify-center text-center" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <span class="badge badge--primary badge--sm mb-4">Astro + Rizzo CSS</span>
     <h1 style="font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--spacing-4) 0; color: var(--text);">Build something great</h1>
     <p style="font-size: var(--font-size-xl); color: var(--text-dim); max-width: 42ch; margin: 0 0 var(--spacing-8) 0; line-height: var(--line-height-relaxed);">Same design system as Vanilla JS and Svelte — 14 themes, 24 components, full keyboard and screen reader support.</p>
     <div class="flex flex-wrap justify-center gap-4 mb-12">
-      <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Get started</a>
-      <a href="https://rizzo-css.vercel.app/docs/components" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Components</a>
+      <a href="/components" class="btn btn-primary">Component showcase</a>
+      <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Get started (docs)</a>
       <button type="button" class="btn btn-outline" onclick="window.showToast && window.showToast('Hello from Rizzo!', { variant: 'success' })">Show toast</button>
     </div>
     <div class="flex flex-wrap justify-center gap-3 mb-16">
@@ -24,7 +18,7 @@ const TITLE = '{{TITLE}}';
       <span class="badge badge--info">WCAG AA</span>
     </div>
     <footer style="margin-top: auto; padding-top: var(--spacing-8); color: var(--text-dim); font-size: var(--font-size-sm);">
-      <a href="https://rizzo-css.vercel.app" style="color: var(--accent);">Rizzo CSS</a> — design system for the web
+      <a href="https://rizzo-css.vercel.app" style="color: var(--accent);">Rizzo CSS</a> — design system for the web. <a href="https://rizzo-css.vercel.app/docs" target="_blank" rel="noopener noreferrer">Full docs</a>.
     </footer>
-  </main>
+  </div>
 </Layout>