rizzo-css 0.0.11 → 0.0.13

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/BreadcrumbDoc.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Breadcrumb from '$lib/rizzo/Breadcrumb.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+</script>
+
+<section>
+  <h2>Breadcrumb component</h2>
+  <p>Separator options: chevron, slash, arrow.</p>
+
+  <h3>Examples</h3>
+  <div class="example">
+    <div class="example-title">Live examples</div>
+    <div class="example-stack">
+      <Breadcrumb
+        items={[
+          { label: 'Home', href: '/' },
+          { label: 'Docs', href: '/docs' },
+          { label: 'Svelte' },
+        ]}
+      />
+      <Breadcrumb
+        items={[
+          { label: 'Home', href: '/' },
+          { label: 'Current' },
+        ]}
+        separator="slash"
+      />
+    </div>
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Breadcrumb from './components/svelte/Breadcrumb.svelte';
+</script>
+
+<Breadcrumb
+  items={[
+    { label: 'Home', href: '/' },
+    { label: 'Docs', href: '/docs' },
+    { label: 'Current' },
+  ]}
+/>
+<Breadcrumb items={items} separator="slash" />`}
+    language="svelte"
+  />
+</section>
+
+<style>
+  .example-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+  }
+</style>

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ButtonDoc.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Button from '$lib/rizzo/Button.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+</script>
+
+<section>
+  <h2>Button component</h2>
+  <p>Semantic theme variables and BEM classes (<code>btn</code>, <code>btn-primary</code>, etc.).</p>
+
+  <h3>Button variants</h3>
+  <div class="example">
+    <div class="example-title">Live examples</div>
+    <div class="example-buttons">
+      <Button>Default</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="success">Success</Button>
+      <Button variant="warning">Warning</Button>
+      <Button variant="error">Error</Button>
+      <Button variant="info">Info</Button>
+      <Button variant="outline">Outline</Button>
+    </div>
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Button from './components/svelte/Button.svelte';
+</script>
+
+<Button>Click me</Button>
+<Button variant="primary">Primary</Button>
+<Button variant="outline">Outline</Button>
+
+<button class="btn">Default</button>
+<button class="btn btn-primary">Primary</button>`}
+    language="svelte"
+  />
+
+  <h3>Disabled state</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <div class="example-buttons">
+      <Button disabled>Disabled default</Button>
+      <Button variant="primary" disabled>Disabled primary</Button>
+    </div>
+  </div>
+</section>
+
+<style>
+  .example-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+  }
+</style>

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/CardsDoc.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import Card from '$lib/rizzo/Card.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+
+  const imagePlaceholderStyle = '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);';
+</script>
+
+<section>
+  <h2>Card component</h2>
+  <p>The Card component provides a flexible container for organizing content with variants, sections, and image support.</p>
+
+  <h3>Basic usage</h3>
+  <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>Card variants</h3>
+  <p>Cards support four variants for different visual styles:</p>
+
+  <h4>Default</h4>
+  <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>
+
+  <h4>Elevated</h4>
+  <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>
+
+  <h4>Outlined</h4>
+  <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>
+
+  <h4>Filled</h4>
+  <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>Card sections</h3>
+  <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 type="button" class="btn btn-primary">Action</button>
+        <button type="button" class="btn btn-outline">Cancel</button>
+      </div>
+    </Card>
+  </div>
+  <h4>Section classes</h4>
+  <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>
+
+  <h3>Card with image</h3>
+  <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={imagePlaceholderStyle}>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>Complete example</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Card variant="elevated">
+      <div style={imagePlaceholderStyle}>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 type="button" class="btn btn-primary">Primary Action</button>
+        <button type="button" class="btn btn-outline">Secondary</button>
+      </div>
+    </Card>
+  </div>
+
+  <h3>Props</h3>
+  <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>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Card from './components/svelte/Card.svelte';
+</script>
+
+<Card variant="elevated">
+  <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 class="btn btn-primary">Action</button>
+  </div>
+</Card>`}
+    language="svelte"
+  />
+</section>
+
+<style>
+  .example {
+    margin: var(--spacing-6) 0;
+    padding: var(--spacing-4);
+    background: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+  }
+  .example-title {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-dim);
+    margin-bottom: var(--spacing-3);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wider);
+  }
+</style>

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ComingSoon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  interface Props {
+    title: string;
+  }
+  let { title }: Props = $props();
+</script>
+
+<section>
+  <h2>{title} component</h2>
+  <p>The Svelte implementation and examples for <strong>{title}</strong> are not yet available.</p>
+  <p><a href="/docs/svelte/components">← Back to Svelte components overview</a></p>
+</section>

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ComponentsOverview.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import Card from '$lib/rizzo/Card.svelte';
+
+  /* Order matches Astro Navbar components dropdown (alphabetical) */
+  const items: { href: string; title: string; desc: string }[] = [
+    { href: '/components/accordion', title: 'Accordion', desc: 'Expandable panels with single or multiple open' },
+    { href: '/components/alert', title: 'Alert', desc: 'Alert with variants, dismissible and auto-dismiss' },
+    { href: '/components/avatar', title: 'Avatar', desc: 'Avatar with image or initials, sizes and shapes' },
+    { href: '/components/badge', title: 'Badge', desc: 'Small labels and tags with variants and pill option' },
+    { href: '/components/breadcrumb', title: 'Breadcrumb', desc: 'Breadcrumb navigation with separator options' },
+    { href: '/components/button', title: 'Button', desc: 'Semantic button with variants using theme variables' },
+    { href: '/components/cards', title: 'Cards', desc: 'Flexible card with variants and sections' },
+    { href: '/components/copy-to-clipboard', title: 'Copy to Clipboard', desc: 'Copy text with visual feedback' },
+    { href: '/components/divider', title: 'Divider', desc: 'Horizontal or vertical divider with optional label' },
+    { href: '/components/dropdown', title: 'Dropdown', desc: 'Menu with items, links, submenus, and actions' },
+    { href: '/components/forms', title: 'Forms', desc: 'FormGroup, Input, Checkbox, Textarea, Select, Radio' },
+    { href: '/components/icons', title: 'Icons', desc: 'Reusable SVG icon components (Tabler, Devicons); Astro reference, same CSS in Svelte' },
+    { href: '/components/modal', title: 'Modal', desc: 'Dialog with overlay, focus trap, and sizes' },
+    { href: '/components/navbar', title: 'Navbar', desc: 'Responsive navigation with dropdowns and search; Astro reference, same BEM in Svelte' },
+    { href: '/components/pagination', title: 'Pagination', desc: 'Page navigation with first/last and ellipsis' },
+    { href: '/components/progress-bar', title: 'Progress Bar', desc: 'Progress bar with variants and indeterminate state' },
+    { href: '/components/search', title: 'Search', desc: 'Search with Algolia; Cmd+K/Ctrl+K to open or close; Astro reference' },
+    { href: '/components/settings', title: 'Settings', desc: 'Theme, font size, and accessibility panel; Astro reference, same CSS' },
+    { href: '/components/spinner', title: 'Spinner', desc: 'Loading spinner with variants and sizes' },
+    { href: '/components/table', title: 'Table', desc: 'Data table with sorting and optional filter' },
+    { href: '/components/tabs', title: 'Tabs', desc: 'Tabs with default, pills, and underline variants' },
+    { href: '/components/theme-switcher', title: 'Theme Switcher', desc: 'Theme dropdown with Preference (System), Dark/Light groups, preview panel (current theme by default, hover to preview); Astro reference' },
+    { href: '/components/toast', title: 'Toast', desc: 'Positioned alerts with dismiss and auto-dismiss' },
+    { href: '/components/tooltip', title: 'Tooltip', desc: 'Tooltip with positioning options' },
+  ];
+</script>
+
+<section>
+  <h2>Component library</h2>
+  <p>These components are built with Svelte and use the same Rizzo CSS classes and variables. Each page includes live examples and usage snippets.</p>
+  <p><strong>Every framework:</strong> Each component also has an <a href="/docs/components">Astro</a> doc page (live demos + “Using classes” HTML). Vanilla uses the same HTML and BEM from the Astro Usage sections. Use the framework switcher at the top to toggle between Astro and Svelte docs.</p>
+</section>
+
+<section>
+  <h2>Available components</h2>
+  <div class="docs-component-grid">
+    {#each items as item}
+      <a href={item.href} class="component-card-link">
+        <Card variant="elevated">
+          <div class="card__body">
+            <h3 class="card-title">{item.title}</h3>
+            <p class="card-desc">{item.desc}</p>
+          </div>
+        </Card>
+      </a>
+    {/each}
+  </div>
+</section>
+
+<section>
+  <h2>Component features</h2>
+  <p>All components share: semantic theming, accessibility (keyboard + ARIA), BEM naming, responsive design, and WCAG AA compliance.</p>
+</section>
+
+<style>
+  .docs-component-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--spacing-70), 1fr));
+    gap: var(--spacing-6);
+    margin: var(--spacing-8) 0;
+  }
+  .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 :global(.card__body .card-title) {
+    margin: 0 0 var(--spacing-2) 0;
+  }
+  .component-card-link :global(.card__body .card-desc) {
+    margin: 0;
+    color: var(--text-dim);
+    font-size: var(--font-size-sm);
+  }
+  .component-card-link:hover :global(.card-title) {
+    color: var(--accent);
+  }
+  @media (width <= 640px) {
+    .docs-component-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/CopyToClipboardDoc.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import CopyToClipboard from '$lib/rizzo/CopyToClipboard.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+</script>
+
+<section>
+  <h2>Copy to clipboard</h2>
+  <p>Optional <code>label</code> and <code>format</code> for feedback text.</p>
+
+  <h3>Example</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <CopyToClipboard value="pnpm add rizzo-css" label="Copy" format="command" />
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import CopyToClipboard from './components/svelte/CopyToClipboard.svelte';
+</script>
+
+<CopyToClipboard value="npm install foo" label="Copy" />
+<CopyToClipboard value={code} format="code" />`}
+    language="svelte"
+  />
+</section>

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/DividerDoc.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import Divider from '$lib/rizzo/Divider.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+</script>
+
+<section>
+  <h2>Divider component</h2>
+  <p>A simple divider for visually separating content. Supports horizontal (default) and vertical orientation, and an optional label (e.g. "OR") in the middle for horizontal dividers.</p>
+
+  <h3>Props</h3>
+  <ul>
+    <li><code>orientation</code> (string, optional) — <code>horizontal</code>, <code>vertical</code> (default: horizontal)</li>
+    <li><code>label</code> (string, optional) — Optional text shown in the middle (horizontal only)</li>
+    <li><code>class</code> (string, optional) — Additional CSS classes</li>
+  </ul>
+
+  <h3>Basic usage (horizontal)</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <div>
+      <p class="example-content">Content above</p>
+      <Divider />
+      <p class="example-content example-content-below">Content below</p>
+    </div>
+  </div>
+  <CodeBlock code={`<script>
+  import Divider from './components/svelte/Divider.svelte';
+</script>
+
+<Divider />`} language="svelte" />
+
+  <h3>With label</h3>
+  <p>Use <code>label</code> to show text in the middle (e.g. "OR" between two options).</p>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Divider label="OR" />
+  </div>
+  <CodeBlock code={`<Divider label="OR" />`} language="svelte" />
+
+  <h3>Vertical</h3>
+  <p>Use <code>orientation="vertical"</code> inside a flex row to separate items. The parent should have a defined height (e.g. <code>min-height</code> or <code>height</code>).</p>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <div class="example-vertical-row">
+      <span>Item 1</span>
+      <Divider orientation="vertical" />
+      <span>Item 2</span>
+      <Divider orientation="vertical" />
+      <span>Item 3</span>
+    </div>
+  </div>
+  <CodeBlock code={`<div style="display: flex; align-items: center; gap: var(--spacing-3); min-height: var(--spacing-16);">
+  <span>Item 1</span>
+  <Divider orientation="vertical" />
+  <span>Item 2</span>
+  <Divider orientation="vertical" />
+  <span>Item 3</span>
+</div>`} language="svelte" />
+
+  <h3>Features</h3>
+  <ul>
+    <li><strong>Accessible</strong> — <code>role="separator"</code> and <code>aria-orientation</code>; optional <code>aria-label</code> when label is set</li>
+    <li><strong>Horizontal</strong> — Full-width line; optional label in the center</li>
+    <li><strong>Vertical</strong> — Full-height line for use in flex layouts</li>
+    <li><strong>Theme-aware</strong> — Uses <code>--border</code> and <code>--text-dim</code></li>
+  </ul>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Divider from './components/svelte/Divider.svelte';
+</script>
+
+<Divider />
+<Divider label="OR" />
+<Divider orientation="vertical" />`}
+    language="svelte"
+  />
+</section>
+
+<style>
+  .example {
+    margin: var(--spacing-6) 0;
+    padding: var(--spacing-4);
+    background: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+  }
+  .example-title {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-dim);
+    margin-bottom: var(--spacing-3);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wider);
+  }
+  .example-content { margin: 0 0 var(--spacing-2) 0; }
+  .example-content-below { margin: var(--spacing-2) 0 0 0; }
+  .example-vertical-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    min-height: var(--spacing-16);
+  }
+</style>