rizzo-css 0.0.12 → 0.0.14

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

@@ -0,0 +1,119 @@
+---
+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

@@ -0,0 +1,124 @@
+---
+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>

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

@@ -0,0 +1,74 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+---
+
+<DocsLayout title="Button Component — Astro" description="Semantic button component with variants using theme variables">
+	
+	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/button" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/button</a>.</p>
+	
+		<section>
+		<h2>Button Component</h2>
+		<p>Semantic button component with variants using theme variables.</p>
+		
+		<h3>Button Variants</h3>
+		<div class="example">
+			<div class="example-title">Live Examples</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
+				<button class="btn">Default</button>
+				<button class="btn btn-primary">Primary</button>
+				<button class="btn btn-success">Success</button>
+				<button class="btn btn-warning">Warning</button>
+				<button class="btn btn-error">Error</button>
+				<button class="btn btn-info">Info</button>
+				<button class="btn btn-outline">Outline</button>
+			</div>
+		</div>
+		
+		<p>All buttons:</p>
+		<ul>
+			<li>Use semantic theme variables</li>
+			<li>Have hover and focus states</li>
+			<li>Support disabled state</li>
+			<li>Are keyboard accessible</li>
+		</ul>
+		
+		<h3>Usage</h3>
+		<CodeBlock code={`<!-- Using component -->
+---
+import Button from '../../components/Button.astro';
+---
+
+<Button>Click me</Button>
+
+<!-- Using classes -->
+<button class="btn">Default</button>
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-success">Success</button>
+<button class="btn btn-warning">Warning</button>
+<button class="btn btn-error">Error</button>
+<button class="btn btn-info">Info</button>
+<button class="btn btn-outline">Outline</button>`} language="astro" />
+		
+		<h3>Button Variants</h3>
+		<ul>
+			<li><code>btn</code> - Default button style</li>
+			<li><code>btn-primary</code> - Primary action button</li>
+			<li><code>btn-success</code> - Success/positive action</li>
+			<li><code>btn-warning</code> - Warning action</li>
+			<li><code>btn-error</code> - Error/destructive action</li>
+			<li><code>btn-info</code> - Informational action</li>
+			<li><code>btn-outline</code> - Outlined button style</li>
+		</ul>
+		
+		<h3>Disabled State</h3>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
+				<button class="btn" disabled>Disabled Default</button>
+				<button class="btn btn-primary" disabled>Disabled Primary</button>
+			</div>
+		</div>
+		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/button">Svelte</a> · Vanilla: same HTML and BEM as in Usage above.</p>
+	</section>
+</DocsLayout>

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

@@ -0,0 +1,247 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import Card from '../../components/Card.astro';
+import Button from '../../components/Button.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+---
+
+<DocsLayout title="Card Component — Astro" description="Flexible card component with variants, sections, and image support">
+	
+	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/cards" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/cards</a>.</p>
+	
+		<section>
+		<h2>Card Component</h2>
+		<p>The Card component provides a flexible container for organizing content with variants, sections, and image support.</p>
+	</section>
+
+	<section>
+		<h2>Basic Usage</h2>
+		<p>The simplest card usage:</p>
+		
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<Card>
+				<h3>Card Title</h3>
+				<p>This is a basic card with default styling. It uses semantic theme variables and adapts to all themes.</p>
+			</Card>
+		</div>
+		
+		<h3>Code Example</h3>
+		<CodeBlock code={`---
+import Card from '../../components/Card.astro';
+---
+
+<Card>
+  <h3>Card Title</h3>
+  <p>Card content goes here</p>
+</Card>`} language="astro" />
+	</section>
+
+	<section>
+		<h2>Card Variants</h2>
+		<p>Cards support four variants for different visual styles:</p>
+		
+		<h3>Default</h3>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<Card variant="default">
+				<h3>Default Card</h3>
+				<p>Standard card with border and background.</p>
+			</Card>
+		</div>
+		
+		<h3>Elevated</h3>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<Card variant="elevated">
+				<h3>Elevated Card</h3>
+				<p>Card with shadow effect. Hover to see it lift up.</p>
+			</Card>
+		</div>
+		
+		<h3>Outlined</h3>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<Card variant="outlined">
+				<h3>Outlined Card</h3>
+				<p>Transparent background with border. Hover to see accent border.</p>
+			</Card>
+		</div>
+		
+		<h3>Filled</h3>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<Card variant="filled">
+				<h3>Filled Card</h3>
+				<p>Uses main background color instead of alt background.</p>
+			</Card>
+		</div>
+		
+		<h3>Code Example</h3>
+		<CodeBlock code={`---
+import Card from '../../components/Card.astro';
+---
+
+<Card variant="elevated">
+  <h3>Elevated Card</h3>
+  <p>Content</p>
+</Card>
+
+<Card variant="outlined">
+  <h3>Outlined Card</h3>
+  <p>Content</p>
+</Card>
+
+<Card variant="filled">
+  <h3>Filled Card</h3>
+  <p>Content</p>
+</Card>`} language="astro" />
+	</section>
+
+	<section>
+		<h2>Card Sections</h2>
+		<p>Use card sections for structured layouts with header, body, and footer:</p>
+		
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<Card>
+				<div class="card__header">
+					<h3 class="card__title">Card Title</h3>
+					<p class="card__subtitle">Card subtitle or description</p>
+				</div>
+				<div class="card__body">
+					<p>This is the main content area of the card. It can contain any content you need.</p>
+					<p>Multiple paragraphs, lists, or other elements work great here.</p>
+				</div>
+				<div class="card__footer">
+					<button class="btn btn-primary">Action</button>
+					<button class="btn btn-outline">Cancel</button>
+				</div>
+			</Card>
+		</div>
+		
+		<h3>Code Example</h3>
+		<CodeBlock code={`---
+import Card from '../../components/Card.astro';
+import Button from '../../components/Button.astro';
+---
+
+<Card>
+  <div class="card__header">
+    <h3 class="card__title">Card Title</h3>
+    <p class="card__subtitle">Subtitle text</p>
+  </div>
+  <div class="card__body">
+    <p>Main content area</p>
+  </div>
+  <div class="card__footer">
+    <Button>Action</Button>
+  </div>
+</Card>`} language="astro" />
+		
+		<h3>Section Classes</h3>
+		<ul>
+			<li><code>card__header</code> - Header section with bottom border</li>
+			<li><code>card__body</code> - Main content area (flexible, takes remaining space)</li>
+			<li><code>card__footer</code> - Footer section with top border</li>
+			<li><code>card__title</code> - Title styling for header</li>
+			<li><code>card__subtitle</code> - Subtitle styling for header</li>
+		</ul>
+	</section>
+
+	<section>
+		<h2>Card with Image</h2>
+		<p>Add an image to your card using the <code>card__image</code> class:</p>
+		
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<Card variant="elevated">
+				<div style="width: 100%; height: var(--spacing-50); background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: calc(-1 * var(--spacing-6)) calc(-1 * var(--spacing-6)) var(--spacing-6) calc(-1 * var(--spacing-6)); display: flex; align-items: center; justify-content: center; color: var(--accent-text); font-weight: var(--font-weight-semibold);">
+					Image Placeholder
+				</div>
+				<div class="card__header">
+					<h3 class="card__title">Card with Image</h3>
+				</div>
+				<div class="card__body">
+					<p>This card includes an image at the top. The image automatically adjusts to the card's border radius.</p>
+				</div>
+			</Card>
+		</div>
+		
+		<h3>Code Example</h3>
+		<CodeBlock code={`---
+import Card from '../../components/Card.astro';
+---
+
+<Card variant="elevated">
+  <img src="/path/to/image.jpg" alt="Description" class="card__image" />
+  <div class="card__header">
+    <h3 class="card__title">Card Title</h3>
+  </div>
+  <div class="card__body">
+    <p>Card content</p>
+  </div>
+</Card>`} language="astro" />
+	</section>
+
+	<section>
+		<h2>Complete Example</h2>
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<Card variant="elevated">
+				<div style="width: 100%; height: var(--spacing-50); background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: calc(-1 * var(--spacing-6)) calc(-1 * var(--spacing-6)) var(--spacing-6) calc(-1 * var(--spacing-6)); display: flex; align-items: center; justify-content: center; color: var(--accent-text); font-weight: var(--font-weight-semibold);">
+					Featured Image
+				</div>
+				<div class="card__header">
+					<h3 class="card__title">Complete Card Example</h3>
+					<p class="card__subtitle">With image, header, body, and footer</p>
+				</div>
+				<div class="card__body">
+					<p>This is a complete card example showcasing all features:</p>
+					<ul>
+						<li>Image at the top</li>
+						<li>Structured header with title and subtitle</li>
+						<li>Flexible body content</li>
+						<li>Footer with actions</li>
+					</ul>
+				</div>
+				<div class="card__footer">
+					<button class="btn btn-primary">Primary Action</button>
+					<button class="btn btn-outline">Secondary</button>
+				</div>
+			</Card>
+		</div>
+	</section>
+
+	<section>
+		<h2>Props</h2>
+		<ul>
+			<li><code>variant</code> ('default' | 'elevated' | 'outlined' | 'filled', optional) - Card variant style (default: 'default')</li>
+			<li><code>class</code> (string, optional) - Additional CSS classes</li>
+		</ul>
+	</section>
+
+	<section>
+		<h2>Styling</h2>
+		<p>All card styles use semantic theme variables and automatically adapt to the selected theme. Card styles are defined in <code>src/styles/layout.css</code>.</p>
+		
+		<h3>Customization</h3>
+		<p>You can customize cards using CSS variables or by adding custom classes:</p>
+		<CodeBlock code={`.custom-card {
+  border-radius: 1rem;
+  padding: 2rem;
+}`} language="css" />
+	</section>
+
+	<section>
+		<h2>Accessibility</h2>
+		<p>Cards are semantic containers and don't require specific ARIA attributes. However, when using cards as interactive elements (like links or buttons), ensure proper accessibility:</p>
+		<ul>
+			<li>Use semantic HTML (e.g., <code>&lt;article&gt;</code> for card content)</li>
+			<li>Provide proper heading hierarchy</li>
+			<li>Include alt text for images</li>
+			<li>Ensure keyboard navigation for interactive cards</li>
+		</ul>
+		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/cards">Svelte</a> · Vanilla: same HTML and BEM as in Usage above.</p>
+	</section>
+</DocsLayout>

package/scaffold/astro-app/src/pages/components/copy-to-clipboard.astro

@@ -0,0 +1,49 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro';
+import CopyToClipboard from '../../components/CopyToClipboard.astro';
+import CodeBlock from '../../components/CodeBlock.astro';
+---
+
+<DocsLayout title="CopyToClipboard Component — Astro" description="Reusable component for copying text values to the clipboard with visual feedback">
+	
+	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/copy-to-clipboard" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/copy-to-clipboard</a>.</p>
+	
+		<section>
+		<h2>CopyToClipboard Component</h2>
+		<p>A reusable component for copying text values to the clipboard with visual feedback.</p>
+		
+		<div class="example">
+			<div class="example-title">Live Example</div>
+			<p>Click the button below to copy text:</p>
+			<CopyToClipboard id="copy-example-email" value="example@email.com" format="Email" />
+		</div>
+		
+		<h3>Usage</h3>
+		<CodeBlock code={`---
+import CopyToClipboard from '../../components/CopyToClipboard.astro';
+---
+
+<CopyToClipboard id="copy-example-email" value="example@email.com" format="Email" />
+<CopyToClipboard id="copy-css-var" value="var(--accent)" format="CSS Variable" />
+<CopyToClipboard id="copy-hex-color" value="#FF5733" format="Hex" />`} language="astro" />
+		
+		<h3>Props</h3>
+		<ul>
+			<li><code>value</code> (string, required) - The text value to copy</li>
+			<li><code>id</code> (string, optional) - Unique ID for the button. If not provided, a random ID will be generated</li>
+			<li><code>label</code> (string, optional) - ARIA label for the button</li>
+			<li><code>format</code> (string, optional) - Format name shown in feedback message</li>
+			<li><code>class</code> (string, optional) - Additional CSS classes</li>
+		</ul>
+		
+		<h3>Features</h3>
+		<ul>
+			<li>Visual feedback with icon change (copy → checkmark)</li>
+			<li>Accessible with ARIA labels and keyboard support</li>
+			<li>Fallback for older browsers (document.execCommand)</li>
+			<li>Theme-aware styling</li>
+			<li>Auto-reset after 2 seconds</li>
+		</ul>
+		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/copy-to-clipboard">Svelte</a> · Vanilla: same HTML and BEM as in Usage above; add minimal JS for copy.</p>
+	</section>
+</DocsLayout>