rizzo-css 0.0.12 → 0.0.13

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

@@ -0,0 +1,144 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import TableComponent from '../../components/Table.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+---
+
+<DocsLayout title="Table Component — Astro" description="Accessible data table with sorting and optional filtering">
+	
+	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/table" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/table</a>.</p>
+	
+		<section>
+		<h2>Table Component</h2>
+		<p>An accessible data table for displaying tabular data. Supports column header sorting (click or Enter/Space), optional filter input to search across all columns, striped rows, and responsive horizontal scroll.</p>
+		
+		<h3>Props</h3>
+		<ul>
+			<li><code>columns</code> (array, required) - Column definitions: <code>{'{ key, label, sortable?, type? }'}</code>. <code>type</code> is <code>'string'</code> or <code>'number'</code> for sort order.</li>
+			<li><code>data</code> (array, required) - Row data: array of objects with keys matching column <code>key</code>.</li>
+			<li><code>caption</code> (string, optional) - Table caption for accessibility.</li>
+			<li><code>sortable</code> (boolean, optional) - Enable column header sorting (default: true).</li>
+			<li><code>filterable</code> (boolean, optional) - Show filter input above table (default: false).</li>
+			<li><code>filterPlaceholder</code> (string, optional) - Placeholder for filter input (default: "Filter table…").</li>
+			<li><code>striped</code> (boolean, optional) - Striped rows (default: true).</li>
+			<li><code>class</code> (string, optional) - Additional CSS classes.</li>
+		</ul>
+
+		<h3>Basic Usage</h3>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TableComponent
+				caption="Sample data"
+				columns={[
+					{ key: 'name', label: 'Name' },
+					{ key: 'role', label: 'Role' },
+					{ key: 'status', label: 'Status' },
+				]}
+				data={[
+					{ name: 'Alice', role: 'Developer', status: 'Active' },
+					{ name: 'Bob', role: 'Designer', status: 'Active' },
+					{ name: 'Carol', role: 'Manager', status: 'Away' },
+				]}
+			/>
+		</div>
+		<CodeBlock code={`---
+import Table from '../../components/Table.astro';
+---
+
+<Table
+  caption="Sample data"
+  columns={[
+    { key: 'name', label: 'Name' },
+    { key: 'role', label: 'Role' },
+    { key: 'status', label: 'Status' },
+  ]}
+  data={[
+    { name: 'Alice', role: 'Developer', status: 'Active' },
+    { name: 'Bob', role: 'Designer', status: 'Active' },
+    { name: 'Carol', role: 'Manager', status: 'Away' },
+  ]}
+/>`} language="astro" />
+
+		<h3>With Sorting (number column)</h3>
+		<p>Set <code>type: 'number'</code> on columns that should sort numerically.</p>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TableComponent
+				caption="Scores"
+				columns={[
+					{ key: 'name', label: 'Name' },
+					{ key: 'score', label: 'Score', type: 'number' },
+					{ key: 'level', label: 'Level', type: 'number' },
+				]}
+				data={[
+					{ name: 'Alice', score: 92, level: 3 },
+					{ name: 'Bob', score: 87, level: 2 },
+					{ name: 'Carol', score: 95, level: 4 },
+				]}
+			/>
+		</div>
+		<CodeBlock code={`<Table
+  caption="Scores"
+  columns={[
+    { key: 'name', label: 'Name' },
+    { key: 'score', label: 'Score', type: 'number' },
+    { key: 'level', label: 'Level', type: 'number' },
+  ]}
+  data={[
+    { name: 'Alice', score: 92, level: 3 },
+    { name: 'Bob', score: 87, level: 2 },
+    { name: 'Carol', score: 95, level: 4 },
+  ]}
+/>`} language="astro" />
+
+		<h3>With Filter</h3>
+		<p>Use <code>filterable</code> to show a search input that filters rows by any column.</p>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TableComponent
+				caption="Filterable list"
+				columns={[
+					{ key: 'name', label: 'Name' },
+					{ key: 'role', label: 'Role' },
+					{ key: 'status', label: 'Status' },
+				]}
+				data={[
+					{ name: 'Alice', role: 'Developer', status: 'Active' },
+					{ name: 'Bob', role: 'Designer', status: 'Active' },
+					{ name: 'Carol', role: 'Manager', status: 'Away' },
+					{ name: 'Dave', role: 'Developer', status: 'Active' },
+				]}
+				filterable
+				filterPlaceholder="Search…"
+			/>
+		</div>
+		<CodeBlock code={`<Table
+  caption="Filterable list"
+  columns={[...]}
+  data={[...]}
+  filterable
+  filterPlaceholder="Search…"
+/>`} language="astro" />
+
+		<h3>Without Stripes</h3>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TableComponent
+				caption="Plain table"
+				columns={[{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }]}
+				data={[{ a: '1', b: '2' }, { a: '3', b: '4' }]}
+				striped={false}
+			/>
+		</div>
+
+		<h3>Features</h3>
+		<ul>
+			<li><strong>Accessible</strong> - Semantic <code>&lt;table&gt;</code>, <code>&lt;caption&gt;</code>, <code>scope="col"</code>, <code>aria-sort</code> on sortable headers, keyboard (Enter/Space) to sort.</li>
+			<li><strong>Sorting</strong> - Sortable column headers use the Sort icon; click to sort ascending/descending; <code>type: 'number'</code> for numeric sort.</li>
+			<li><strong>Filtering</strong> - Optional filter input with Filter icon; rows are shown/hidden by matching text in any cell.</li>
+			<li><strong>Striped rows</strong> - Optional alternating row background; row hover uses theme colors for contrast.</li>
+			<li><strong>Responsive</strong> - Table wrapper scrolls horizontally on small screens.</li>
+		</ul>
+		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/table">Svelte</a> · Vanilla: same HTML and BEM as in Usage above; add minimal JS for sorting/filter if needed.</p>
+	</section>
+</DocsLayout>

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

@@ -0,0 +1,220 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import TabsComponent from '../../components/Tabs.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+---
+
+<DocsLayout title="Tabs Component — Astro" description="Accessible tabs component with keyboard navigation and ARIA tab pattern">
+	
+	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/tabs" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/tabs</a>.</p>
+	
+		<section>
+		<h2>Tabs Component</h2>
+		<p>An accessible tabs component for organizing content into multiple panels. Supports full keyboard navigation and follows ARIA tab pattern best practices.</p>
+		
+		<h3>Props</h3>
+		<ul>
+			<li><code>tabs</code> (array, required) - Array of tab objects with <code>id</code> and <code>label</code> properties</li>
+			<li><code>id</code> (string, optional) - Unique identifier for the tabs component</li>
+			<li><code>defaultTab</code> (string, optional) - ID of the tab to show by default (defaults to first tab)</li>
+			<li><code>variant</code> (string, optional) - Visual variant: <code>'default'</code>, <code>'pills'</code>, or <code>'underline'</code> (default: <code>'default'</code>)</li>
+			<li><code>class</code> (string, optional) - Additional CSS classes</li>
+		</ul>
+
+		<h3>Tab Object Structure</h3>
+		<ul>
+			<li><code>id</code> (string, required) - Unique identifier for the tab</li>
+			<li><code>label</code> (string, required) - Display text for the tab button</li>
+			<li><code>content</code> (string, optional) - HTML content for the tab panel (alternative to using slots)</li>
+		</ul>
+
+		<h3>Basic Usage</h3>
+		<p>Provide panel content as children in the same order as the tabs array:</p>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TabsComponent
+				tabs={[
+					{ id: 'overview', label: 'Overview' },
+					{ id: 'features', label: 'Features' },
+					{ id: 'pricing', label: 'Pricing' },
+				]}
+			>
+				<div>
+					<h4>Overview</h4>
+					<p>This is the overview content. It provides a general introduction to the topic.</p>
+				</div>
+				<div>
+					<h4>Features</h4>
+					<ul>
+						<li>Feature 1: Accessible design</li>
+						<li>Feature 2: Keyboard navigation</li>
+						<li>Feature 3: Theme-aware styling</li>
+					</ul>
+				</div>
+				<div>
+					<h4>Pricing</h4>
+					<p>Choose the plan that works best for you.</p>
+				</div>
+			</TabsComponent>
+		</div>
+
+		<CodeBlock code={`---
+import Tabs from '../../components/Tabs.astro';
+---
+
+<Tabs
+  tabs={[
+    { id: 'overview', label: 'Overview' },
+    { id: 'features', label: 'Features' },
+    { id: 'pricing', label: 'Pricing' },
+  ]}
+>
+  <div>
+    <h4>Overview</h4>
+    <p>Overview content here</p>
+  </div>
+  <div>
+    <h4>Features</h4>
+    <p>Features content here</p>
+  </div>
+  <div>
+    <h4>Pricing</h4>
+    <p>Pricing content here</p>
+  </div>
+</Tabs>`} language="astro" />
+
+		<h3>With Content Property</h3>
+		<p>You can also provide content directly in the tab object:</p>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TabsComponent
+				tabs={[
+					{ id: 'tab1', label: 'Tab 1', content: '<p>Content for tab 1</p>' },
+					{ id: 'tab2', label: 'Tab 2', content: '<p>Content for tab 2</p>' },
+					{ id: 'tab3', label: 'Tab 3', content: '<p>Content for tab 3</p>' },
+				]}
+			/>
+		</div>
+
+		<CodeBlock code={`<Tabs
+  tabs={[
+    { id: 'tab1', label: 'Tab 1', content: '<p>Content for tab 1</p>' },
+    { id: 'tab2', label: 'Tab 2', content: '<p>Content for tab 2</p>' },
+    { id: 'tab3', label: 'Tab 3', content: '<p>Content for tab 3</p>' },
+  ]}
+/>`} language="astro" />
+
+		<h3>Variants</h3>
+		
+		<h4>Default Variant</h4>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TabsComponent
+				variant="default"
+				tabs={[
+					{ id: 'default1', label: 'Tab 1' },
+					{ id: 'default2', label: 'Tab 2' },
+					{ id: 'default3', label: 'Tab 3' },
+				]}
+			>
+				<div><p>Default variant with bottom border indicator</p></div>
+				<div><p>Tab 2 content</p></div>
+				<div><p>Tab 3 content</p></div>
+			</TabsComponent>
+		</div>
+
+		<h4>Pills Variant</h4>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TabsComponent
+				variant="pills"
+				tabs={[
+					{ id: 'pills1', label: 'Tab 1' },
+					{ id: 'pills2', label: 'Tab 2' },
+					{ id: 'pills3', label: 'Tab 3' },
+				]}
+			>
+				<div><p>Pills variant with filled background for active tab</p></div>
+				<div><p>Tab 2 content</p></div>
+				<div><p>Tab 3 content</p></div>
+			</TabsComponent>
+		</div>
+
+		<h4>Underline Variant</h4>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TabsComponent
+				variant="underline"
+				tabs={[
+					{ id: 'underline1', label: 'Tab 1' },
+					{ id: 'underline2', label: 'Tab 2' },
+					{ id: 'underline3', label: 'Tab 3' },
+				]}
+			>
+				<div><p>Underline variant with thicker bottom border for active tab</p></div>
+				<div><p>Tab 2 content</p></div>
+				<div><p>Tab 3 content</p></div>
+			</TabsComponent>
+		</div>
+
+		<h3>Default Tab</h3>
+		<p>You can specify which tab should be active by default:</p>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<TabsComponent
+				defaultTab="second"
+				tabs={[
+					{ id: 'first', label: 'First' },
+					{ id: 'second', label: 'Second' },
+					{ id: 'third', label: 'Third' },
+				]}
+			>
+				<div><p>First tab content</p></div>
+				<div><p>Second tab is active by default</p></div>
+				<div><p>Third tab content</p></div>
+			</TabsComponent>
+		</div>
+
+		<CodeBlock code={`<Tabs
+  defaultTab="second"
+  tabs={[
+    { id: 'first', label: 'First' },
+    { id: 'second', label: 'Second' },
+    { id: 'third', label: 'Third' },
+  ]}
+>
+  <div>First tab content</div>
+  <div>Second tab content</div>
+  <div>Third tab content</div>
+</Tabs>`} language="astro" />
+
+		<h3>Features</h3>
+		<ul>
+			<li><strong>ARIA Tab Pattern</strong> - Full ARIA support with <code>role="tablist"</code>, <code>role="tab"</code>, <code>role="tabpanel"</code>, <code>aria-selected</code>, <code>aria-controls</code>, and <code>aria-labelledby</code></li>
+			<li><strong>Keyboard Navigation</strong> - Arrow keys (Left/Right or Up/Down), Home, End, Enter, and Space for activation</li>
+			<li><strong>Three Variants</strong> - Default (border indicator), Pills (filled background), and Underline (thicker border)</li>
+			<li><strong>Theme-Aware</strong> - Automatically adapts to all 14 available themes</li>
+			<li><strong>Responsive</strong> - Horizontal scrolling on mobile for many tabs</li>
+			<li><strong>Accessible</strong> - WCAG AA compliant with proper focus indicators</li>
+		</ul>
+
+		<h3>Keyboard Navigation</h3>
+		<ul>
+			<li><strong>Arrow Right / Arrow Down</strong> - Move to next tab</li>
+			<li><strong>Arrow Left / Arrow Up</strong> - Move to previous tab</li>
+			<li><strong>Home</strong> - Move to first tab</li>
+			<li><strong>End</strong> - Move to last tab</li>
+			<li><strong>Enter / Space</strong> - Activate focused tab</li>
+			<li><strong>Tab</strong> - Move focus to tab panel content</li>
+		</ul>
+
+		<h3>Accessibility</h3>
+		<ul>
+			<li><strong>ARIA Attributes</strong> - Proper <code>role</code>, <code>aria-selected</code>, <code>aria-controls</code>, <code>aria-labelledby</code>, and <code>aria-hidden</code> attributes</li>
+			<li><strong>Focus Management</strong> - Only active tab is in tab order (<code>tabindex="0"</code>), others are <code>tabindex="-1"</code></li>
+			<li><strong>Screen Reader Support</strong> - Proper announcements when tabs change</li>
+			<li><strong>Focus Indicators</strong> - Visible focus outline using <code>--accent</code> color</li>
+		</ul>
+		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/tabs">Svelte</a> · Vanilla: same HTML and BEM as in Usage above; add minimal JS for tab switch and keyboard.</p>
+	</section>
+</DocsLayout>

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

@@ -0,0 +1,67 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import ThemeSwitcher from '../../components/ThemeSwitcher.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+---
+
+<DocsLayout title="Theme Switcher Component — Astro" description="Accessible theme switcher with theme icons and keyboard navigation">
+	
+	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/theme-switcher" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/theme-switcher</a>.</p>
+	
+		<section>
+		<h2>Theme Switcher Component</h2>
+		<p>The ThemeSwitcher is integrated into the Settings panel, but can also be used standalone.</p>
+		
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<p>Try switching themes using the theme switcher below:</p>
+			<ThemeSwitcher />
+		</div>
+		
+		<h3>Usage</h3>
+		<CodeBlock code={`---
+import ThemeSwitcher from '../../components/ThemeSwitcher.astro';
+---
+
+<ThemeSwitcher />`} language="astro" />
+		
+		<h3>Features</h3>
+		<p>The theme switcher:</p>
+		<ul>
+			<li><strong>Preference (System)</strong> – Choose System to follow OS light/dark; theme updates when you change the OS preference.</li>
+			<li><strong>Preview panel</strong> – Always visible when the menu is open (on viewports &gt;480px). Shows a fixed “Preview” label; the theme name, swatch, and accent bar show the <strong>current</strong> theme by default and the <strong>hovered</strong> theme on hover/focus. Full-height divider between list and preview. Hidden on small viewports.</li>
+			<li>Groups themes by Preference, Dark, and Light; each theme has a unique icon.</li>
+			<li>Shows active theme name and icon in the trigger button.</li>
+			<li>When System is selected, both System and the applied theme show the active background and accent bar.</li>
+			<li>Persists selection in <code>localStorage</code> (key <code>theme</code>: theme id or <code>system</code>).</li>
+			<li>First visit uses initial <code>data-theme</code> or OS preference.</li>
+			<li>Full keyboard navigation (see below).</li>
+		</ul>
+		
+		<h3>Keyboard Navigation</h3>
+		<ul>
+			<li><code>Enter</code> or <code>Space</code> - Open/close menu</li>
+			<li><code>ArrowDown</code> - Open menu and focus first option</li>
+			<li><code>ArrowUp</code> - Open menu and focus last option</li>
+			<li><code>ArrowDown/ArrowUp</code> - Navigate options within menu</li>
+			<li><code>Home</code> - Jump to first option</li>
+			<li><code>End</code> - Jump to last option</li>
+			<li><code>Enter</code> or <code>Space</code> - Select theme</li>
+			<li><code>Escape</code> - Close menu</li>
+			<li><code>Tab</code> - Close menu and continue tabbing</li>
+		</ul>
+
+		<h3>Building your own theme switcher</h3>
+		<p>All 14 themes are included in the Rizzo CSS bundle. Switching themes is done by setting <code>data-theme</code> on <code>&lt;html&gt;</code> and persisting the choice in <code>localStorage</code> (key <code>theme</code>). You can use the ThemeSwitcher component above, or build a custom UI with the same behavior.</p>
+		<p><strong>Theme utilities</strong> (see <a href="/docs/getting-started#javascript-utilities">Getting Started – JavaScript utilities</a>):</p>
+		<ul>
+			<li><code>applyTheme(value)</code> – Sets <code>data-theme</code> and saves to <code>localStorage</code>. Use a theme id (e.g. <code>github-dark-classic</code>) or <code>system</code> to follow OS light/dark. Dispatches <code>rizzo-theme-change</code>.</li>
+			<li><code>getThemeLabel(value)</code> / <code>getThemeInfo(value)</code> – Display names for theme ids and for <code>system</code>.</li>
+			<li><code>getStoredTheme()</code> – Current stored value (<code>theme</code> id or <code>system</code>).</li>
+			<li><code>resolveSystemTheme()</code> – Resolves OS preference to a concrete theme id (dark → GitHub Dark Classic, light → GitHub Light).</li>
+			<li>Constants: <code>THEME_SYSTEM</code>, <code>DEFAULT_THEME_DARK</code>, <code>DEFAULT_THEME_LIGHT</code>.</li>
+		</ul>
+		<p><strong>Theme IDs:</strong> Run <code>npx rizzo-css theme</code> to list all 14 ids, or see <a href="/docs/theming#available-themes">Theming – Available themes</a>. To sync a custom UI when the theme changes elsewhere, listen for the <code>rizzo-theme-change</code> event.</p>
+		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/theme-switcher">Svelte</a> (live Svelte component) · <a href="/docs/vanilla/components/theme-switcher">Vanilla</a> (live example + copyable HTML). Or use theme utilities (<code>applyTheme</code>, <code>getThemeLabel</code>) and see <a href="/docs/theming#building-your-own-theme-switcher">Building your own theme switcher</a>.</p>
+	</section>
+</DocsLayout>

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

@@ -0,0 +1,157 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+---
+
+<DocsLayout title="Toast Component — Astro" description="Fixed position toast notifications with auto-dismiss and programmatic control">
+	
+	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/toast" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/toast</a>.</p>
+	
+		<section>
+		<h2>Toast Notifications</h2>
+		<p>Toast notifications are fixed-position alerts that appear in a corner or center of the screen. They're perfect for non-intrusive notifications, success messages, and temporary feedback.</p>
+		
+		<h3>Programmatic Toast Creation</h3>
+		<p>The easiest way to show toasts is using the <code>showToast()</code> function:</p>
+		
+		<div class="example">
+			<div class="example-title">Live Examples</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
+				<button class="btn btn-success" onclick="window.showToast && window.showToast('Success! Your changes have been saved.', { variant: 'success' })">Show Success Toast</button>
+				<button class="btn btn-error" onclick="window.showToast && window.showToast('Error! Something went wrong.', { variant: 'error' })">Show Error Toast</button>
+				<button class="btn btn-warning" onclick="window.showToast && window.showToast('Warning! Please review your changes.', { variant: 'warning' })">Show Warning Toast</button>
+				<button class="btn btn-info" onclick="window.showToast && window.showToast('Info: New features are available.', { variant: 'info' })">Show Info Toast</button>
+			</div>
+		</div>
+		
+		<h3>Toast Positions</h3>
+		<p>Toasts can be positioned in six different locations:</p>
+		
+		<div class="example">
+			<div class="example-title">Position Examples</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('Top Right Toast', { position: 'top-right' })">Top Right</button>
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('Top Left Toast', { position: 'top-left' })">Top Left</button>
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('Top Center Toast', { position: 'top-center' })">Top Center</button>
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('Bottom Right Toast', { position: 'bottom-right' })">Bottom Right</button>
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('Bottom Left Toast', { position: 'bottom-left' })">Bottom Left</button>
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('Bottom Center Toast', { position: 'bottom-center' })">Bottom Center</button>
+			</div>
+		</div>
+		
+		<h3>Auto-Dismiss</h3>
+		<p>Toasts automatically dismiss after 5 seconds by default. You can customize the duration:</p>
+		
+		<div class="example">
+			<div class="example-title">Auto-Dismiss Examples</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('This toast dismisses in 3 seconds', { autoDismiss: 3000 })">3 Second Toast</button>
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('This toast dismisses in 7 seconds', { autoDismiss: 7000 })">7 Second Toast</button>
+				<button class="btn btn-primary" onclick="window.showToast && window.showToast('This toast will not auto-dismiss', { autoDismiss: 0 })">No Auto-Dismiss</button>
+			</div>
+		</div>
+		
+		<h3>Multiple Toasts</h3>
+		<p>Multiple toasts stack vertically in the same position:</p>
+		
+		<div class="example">
+			<div class="example-title">Stacked Toasts</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
+				<button class="btn btn-primary" onclick="if(window.showToast){window.showToast('First toast', { variant: 'success' }); setTimeout(function() { window.showToast('Second toast', { variant: 'info' }); }, 500); setTimeout(function() { window.showToast('Third toast', { variant: 'warning' }); }, 1000);}">Show Multiple Toasts</button>
+				<button class="btn" onclick="window.removeAllToasts && window.removeAllToasts()">Clear All Toasts</button>
+			</div>
+		</div>
+		
+		<h3>Usage</h3>
+		<p>Import the toast utility and use it programmatically:</p>
+		<CodeBlock code={`// Import toast utility
+import { showToast, removeToast, removeAllToasts } from '../utils/toast';
+
+// Show a simple toast
+showToast('Success! Your changes have been saved.', {
+  variant: 'success'
+});
+
+// Show toast with custom options
+showToast('Error occurred', {
+  variant: 'error',
+  position: 'top-right',
+  autoDismiss: 5000,
+  dismissible: true
+});
+
+// Remove a specific toast by ID
+const toastId = showToast('This will be removed', { variant: 'info' });
+setTimeout(() => removeToast(toastId), 2000);
+
+// Remove all toasts
+removeAllToasts();`} language="javascript" />
+		
+		<p>Or use the global functions (available after importing the utility):</p>
+		<CodeBlock code={`// Global functions (available on window)
+window.showToast('Success!', { variant: 'success' });
+window.removeToast('toast-id');
+window.removeAllToasts();`} language="javascript" />
+		
+		<h3>Toast Options</h3>
+		<ul>
+			<li><code>variant</code> (string, optional) - Toast 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 toast can be manually dismissed (default: <code>true</code>)</li>
+			<li><code>autoDismiss</code> (number, optional) - Auto-dismiss duration in milliseconds. Set to <code>0</code> to disable (default: <code>5000</code>)</li>
+			<li><code>position</code> (string, optional) - Toast position: <code>"top-right"</code>, <code>"top-left"</code>, <code>"top-center"</code>, <code>"bottom-right"</code>, <code>"bottom-left"</code>, <code>"bottom-center"</code> (default: <code>"top-right"</code>)</li>
+			<li><code>id</code> (string, optional) - Unique ID for the toast. If not provided, a random ID will be generated</li>
+		</ul>
+		
+		<h3>Features</h3>
+		<ul>
+			<li>Fixed positioning in six locations (top/bottom + left/center/right)</li>
+			<li>Automatic stacking of multiple toasts</li>
+			<li>Auto-dismiss with customizable duration (default: 5 seconds)</li>
+			<li>Smooth slide-in animations (respects <code>prefers-reduced-motion</code>)</li>
+			<li>All alert variants supported (success, error, warning, info)</li>
+			<li>Programmatic control via <code>showToast()</code>, <code>removeToast()</code>, <code>removeAllToasts()</code></li>
+			<li>Mobile responsive (full width on mobile)</li>
+			<li>Accessible with ARIA attributes</li>
+			<li>Theme-aware styling</li>
+		</ul>
+		
+		<h3>Toast Component (Static)</h3>
+		<p>For static toast components in Astro templates, you can use the <code>Toast</code> component:</p>
+		<CodeBlock code={`---
+import Toast from '../../components/Toast.astro';
+---
+
+<Toast variant="success" position="top-right" autoDismiss={5000}>
+  Your changes have been saved!
+</Toast>`} language="astro" />
+		
+		<p><strong>Note:</strong> For dynamic toast notifications, use the programmatic <code>showToast()</code> function instead. The toast functions are available globally on all pages via <code>window.showToast()</code>, <code>window.removeToast()</code>, and <code>window.removeAllToasts()</code>.</p>
+		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/toast">Svelte</a> · Vanilla: same HTML and BEM for static toasts; use <code>showToast()</code> / <code>removeToast()</code> for dynamic (included in scaffold).</p>
+	</section>
+</DocsLayout>
+
+<script is:inline>
+	// Toast functions are available via window.showToast from Layout.astro
+	// All onclick handlers use window.showToast directly
+	// This script just verifies they're available and logs for debugging
+	(function() {
+		function checkFunctions() {
+			if (typeof window !== 'undefined' && window.showToast) {
+				// console.log('Toast functions verified:', {
+				// 	showToast: typeof window.showToast,
+				// 	removeAllToasts: typeof window.removeAllToasts,
+				// 	removeToast: typeof window.removeToast
+				// });
+			} else {
+				console.warn('Toast functions not yet available, retrying...');
+				setTimeout(checkFunctions, 50);
+			}
+		}
+		
+		if (document.readyState === 'loading') {
+			document.addEventListener('DOMContentLoaded', checkFunctions);
+		} else {
+			checkFunctions();
+		}
+	})();
+</script>