rizzo-css 0.0.12 → 0.0.14

package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/React.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+    height?: number;
+    class?: string;
+  }
+  let { width = 16, height = 16, class: className = '' }: Props = $props();
+</script>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 128 128"
+  class={className}
+  aria-hidden="true"
+>
+  <g fill="#61dafb">
+    <circle cx="64" cy="64" r="11.4"/>
+    <path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3c.6-2.4 1.1-4.8 1.5-7.1c2.1-13.2-.2-22.5-6.6-26.1c-1.9-1.1-4-1.6-6.4-1.6c-7 0-15.9 5.2-24.9 13.9c-9-8.7-17.9-13.9-24.9-13.9c-2.4 0-4.5.5-6.4 1.6c-6.4 3.7-8.7 13-6.6 26.1c.4 2.3.9 4.7 1.5 7.1c-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3c-.6 2.4-1.1 4.8-1.5 7.1c-2.1 13.2.2 22.5 6.6 26.1c1.9 1.1 4 1.6 6.4 1.6c7.1 0 16-5.2 24.9-13.9c9 8.7 17.9 13.9 24.9 13.9c2.4 0 4.5-.5 6.4-1.6c6.4-3.7 8.7-13 6.6-26.1c-.4-2.3-.9-4.7-1.5-7.1c2.4-.7 4.7-1.4 6.9-2.3c12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8M92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3c-.3 2.1-.8 4.3-1.4 6.6c-5.2-1.2-10.7-2-16.5-2.5c-3.4-4.8-6.9-9.1-10.4-13c7.4-7.3 14.9-12.3 21-12.3c1.3 0 2.5.3 3.5.9M81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6c-3.7.3-7.4.4-11.2.4c-3.9 0-7.6-.1-11.2-.4q-3.3-4.8-6-9.6c-1.9-3.3-3.7-6.7-5.3-10c1.6-3.3 3.4-6.7 5.3-10c1.8-3.2 3.9-6.4 6.1-9.6c3.7-.3 7.4-.4 11.2-.4c3.9 0 7.6.1 11.2.4q3.3 4.8 6 9.6c1.9 3.3 3.7 6.7 5.3 10c-1.7 3.3-3.4 6.6-5.3 10m8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3c-3.4.8-7 1.4-10.8 1.9c1.2-1.9 2.5-3.9 3.6-6c1.2-2.1 2.3-4.2 3.4-6.2M64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3c2.3.1 4.6.2 6.9.2s4.6-.1 6.9-.2c-2.2 2.9-4.5 5.7-6.9 8.3m-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9c1.1-3.3 2.3-6.8 3.8-10.3c1.1 2 2.2 4.1 3.4 6.1c1.2 2.2 2.4 4.1 3.6 6.1m-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3c3.4-.8 7-1.4 10.8-1.9c-1.2 1.9-2.5 3.9-3.6 6c-1.2 2.1-2.3 4.2-3.4 6.2M64 30.2c2.4 2.6 4.7 5.4 6.9 8.3c-2.3-.1-4.6-.2-6.9-.2s-4.6.1-6.9.2c2.2-2.9 4.5-5.7 6.9-8.3m22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9c-1.1 3.3-2.3 6.8-3.8 10.3c-1.1-2.1-2.2-4.2-3.4-6.2M31.7 35c-1.7-10.5-.3-17.9 3.8-20.3c1-.6 2.2-.9 3.5-.9c6 0 13.5 4.9 21 12.3c-3.5 3.8-7 8.2-10.4 13c-5.8.5-11.3 1.4-16.5 2.5c-.6-2.3-1-4.5-1.4-6.6M7 64c0-4.7 5.7-9.7 15.7-13.4c2-.8 4.2-1.5 6.4-2.1c1.6 5 3.6 10.3 6 15.6c-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64m28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3c.3-2.1.8-4.3 1.4-6.6c5.2 1.2 10.7 2 16.5 2.5c3.4 4.8 6.9 9.1 10.4 13c-7.4 7.3-14.9 12.3-21 12.3c-1.3 0-2.5-.3-3.5-.9M96.3 93c1.7 10.5.3 17.9-3.8 20.3c-1 .6-2.2.9-3.5.9c-6 0-13.5-4.9-21-12.3c3.5-3.8 7-8.2 10.4-13c5.8-.5 11.3-1.4 16.5-2.5c.6 2.3 1 4.5 1.4 6.6m9-15.6c-2 .8-4.2 1.5-6.4 2.1c-1.6-5-3.6-10.3-6-15.6c2.4-5.3 4.5-10.5 6-15.5c13.8 4 22.1 10 22.1 15.6c0 4.7-5.8 9.7-15.7 13.4"/>
+  </g>
+</svg>

package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/SvelteIcon.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+    height?: number;
+    class?: string;
+  }
+  let { width = 16, height = 16, class: className = '' }: Props = $props();
+</script>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 128 128"
+  class={className}
+  aria-hidden="true"
+>
+  <path fill="#ff3e00" d="M110.43 16.936C98.553-.076 75.09-5.118 58.13 5.696l-29.792 19a34.2 34.2 0 0 0-15.48 22.897a25.478 30.64 0 0 0-.572 6.396a36.15 36.15 0 0 0 4.163 16.73A34.4 34.4 0 0 0 11.34 83.5a25.348 30.483 0 0 0 .345 14.412a36.5 36.5 0 0 0 5.9 13.152c11.878 17.01 35.394 22.053 52.3 11.24l29.762-19.001a34.13 34.13 0 0 0 15.438-22.918a35.5 35.5 0 0 0 .572-6.386a36.2 36.2 0 0 0-4.112-16.71a34.4 34.4 0 0 0 5.112-12.77c.369-2.11.557-4.245.562-6.386a36.4 36.4 0 0 0-6.787-21.178z"/>
+  <path fill="#fff" d="M55.219 112.662a28.463 34.23 0 0 1-5.954.76a23.64 23.64 0 0 1-19.435-10.187a21.9 21.9 0 0 1-4.08-12.74a15.658 18.83 0 0 1 .333-3.833a15.425 18.55 0 0 1 .72-2.782l.561-1.708l1.52 1.156a38.7 38.7 0 0 0 11.658 5.834l1.104.333l-.104 1.104v.573a6.63 6.63 0 0 0 1.228 3.854a7.1 7.1 0 0 0 2.538 2.288a8.262 9.936 0 0 0 3.312.837a8.251 9.923 0 0 0 1.79-.229a7.272 8.745 0 0 0 1.833-.802l29.76-19.094a6.26 6.26 0 0 0 2.904-5.302a6.62 6.62 0 0 0-1.26-3.844a7.14 7.14 0 0 0-2.553-2.252a8.313 9.997 0 0 0-3.307-.81a8.246 9.917 0 0 0-1.79.23a6.938 8.344 0 0 0-1.822.801l-11.346 7.25a24.376 29.314 0 0 1-6.048 2.656a23.64 23.64 0 0 1-25.39-9.416a21.94 21.94 0 0 1-4.08-12.74c.002-1.285.114-2.567.333-3.833a20.65 20.65 0 0 1 9.286-13.781l29.792-18.99a21.9 21.9 0 0 1 6.048-2.667a24 24 0 0 1 5.954-.75A23.68 23.68 0 0 1 98.22 24.745a21.94 21.94 0 0 1 4.029 12.75a15.748 18.939 0 0 1-.334 3.844a15.407 18.529 0 0 1-.718 2.781l-.562 1.708l-1.52-1.114a38.4 38.4 0 0 0-11.658-5.834l-1.104-.343l.104-1.105v-.572a6.7 6.7 0 0 0-1.228-3.865a7.1 7.1 0 0 0-2.55-2.25a8.309 9.992 0 0 0-3.3-.813a8.221 9.887 0 0 0-1.77.271a6.819 8.2 0 0 0-1.831.802l-29.793 18.99a5.88 7.071 0 0 0-1.836 1.79a4.75 5.713 0 0 0-.963 2.377a5.037 6.057 0 0 0-.136 1.104a6.62 6.62 0 0 0 1.228 3.844a7.1 7.1 0 0 0 2.549 2.25a8.299 9.98 0 0 0 3.301.812a8.247 9.918 0 0 0 1.79-.23a6.943 8.35 0 0 0 1.833-.801l11.367-7.292a24.218 29.125 0 0 1 6.048-2.656a28.526 34.305 0 0 1 5.954-.76A23.66 23.66 0 0 1 96.566 60.61a21.94 21.94 0 0 1 3.737 16.614a20.6 20.6 0 0 1-9.286 13.781l-29.74 18.99a24.308 29.233 0 0 1-6.057 2.667z"/>
+</svg>

package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Vue.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+    height?: number;
+    class?: string;
+  }
+  let { width = 16, height = 16, class: className = '' }: Props = $props();
+</script>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 128 128"
+  class={className}
+  aria-hidden="true"
+>
+  <path fill="none" d="m0 8.934l49.854.158l14.167 24.47l14.432-24.47L128 8.935l-63.834 110.14zm126.98.637l-24.36.02l-38.476 66.053L25.691 9.592L.942 9.572l63.211 107.89zm-25.149-.008l-22.745.168l-15.053 24.647L49.216 9.73l-22.794-.168l37.731 64.476zm-75.834-.17l23.002.009m-23.002-.01l23.002.01"/>
+  <path fill="#35495e" d="m25.997 9.393l23.002.009L64.035 34.36L79.018 9.404L102 9.398L64.15 75.053z"/>
+  <path fill="#41b883" d="m.91 9.569l25.067-.172l38.15 65.659L101.98 9.401l25.11.026l-62.966 108.06z"/>
+</svg>

package/scaffold/svelte-app/src/lib/rizzo/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Svelte components — same BEM classes and design system as Astro.
+ * Import from this file or from individual components.
+ */
+export { default as Button } from './Button.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Divider } from './Divider.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbItem } from './Breadcrumb.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as CopyToClipboard } from './CopyToClipboard.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export type { Tab } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export type { AccordionItem } from './Accordion.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export type { MenuItem } from './Dropdown.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Table } from './Table.svelte';
+export type { TableColumn } from './Table.svelte';

package/scaffold/svelte-app/src/lib/rizzo-docs/CodeBlock.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+  import Copy from '$lib/rizzo/icons/Copy.svelte';
+  import Check from '$lib/rizzo/icons/Check.svelte';
+  import Css3 from '$lib/rizzo/icons/devicons/Css3.svelte';
+  import Html5 from '$lib/rizzo/icons/devicons/Html5.svelte';
+  import Javascript from '$lib/rizzo/icons/devicons/Javascript.svelte';
+  import Nodejs from '$lib/rizzo/icons/devicons/Nodejs.svelte';
+  import AstroIcon from '$lib/rizzo/icons/devicons/Astro.svelte';
+  import Plaintext from '$lib/rizzo/icons/devicons/Plaintext.svelte';
+  import Git from '$lib/rizzo/icons/devicons/Git.svelte';
+  import SvelteIcon from '$lib/rizzo/icons/devicons/SvelteIcon.svelte';
+  import React from '$lib/rizzo/icons/devicons/React.svelte';
+  import Vue from '$lib/rizzo/icons/devicons/Vue.svelte';
+  import Bash from '$lib/rizzo/icons/devicons/Bash.svelte';
+
+  interface Props {
+    code: string;
+    language?: string;
+    class?: string;
+  }
+  let { code, language = '', class: className = '' }: Props = $props();
+  let copied = $state(false);
+  const languageLabel = $derived(language || '');
+  const languageLower = $derived(language.toLowerCase());
+
+  async function copyCode() {
+    try {
+      await navigator.clipboard.writeText(code);
+      copied = true;
+      setTimeout(() => (copied = false), 2000);
+    } catch {
+      const ta = document.createElement('textarea');
+      ta.value = code;
+      ta.style.position = 'fixed';
+      ta.style.left = '-999999px';
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      try {
+        document.execCommand('copy');
+        copied = true;
+        setTimeout(() => (copied = false), 2000);
+      } finally {
+        document.body.removeChild(ta);
+      }
+    }
+  }
+
+</script>
+
+<div class={`code-block ${className}`.trim()}>
+  <div class="code-block__header">
+    {#if language}
+      <span class="code-block__language" aria-label={languageLabel}>
+        {#if languageLower === 'css'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <Css3 width={20} height={20} />
+          </span>
+        {:else if languageLower === 'html'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <Html5 width={20} height={20} />
+          </span>
+        {:else if languageLower === 'javascript'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <Javascript width={20} height={20} />
+          </span>
+        {:else if languageLower === 'nodejs'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <Nodejs width={20} height={20} />
+          </span>
+        {:else if languageLower === 'astro'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <AstroIcon width={20} height={20} />
+          </span>
+        {:else if languageLower === 'plaintext'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <Plaintext width={20} height={20} class="code-block__plaintext-icon" />
+          </span>
+        {:else if languageLower === 'git'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <Git width={20} height={20} />
+          </span>
+        {:else if languageLower === 'svelte'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <SvelteIcon width={20} height={20} />
+          </span>
+        {:else if languageLower === 'react' || languageLower === 'jsx' || languageLower === 'tsx'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <React width={20} height={20} />
+          </span>
+        {:else if languageLower === 'vue'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <Vue width={20} height={20} />
+          </span>
+        {:else if languageLower === 'bash' || languageLower === 'shell' || languageLower === 'sh'}
+          <span class="code-block__language-icon" aria-hidden="true">
+            <Bash width={20} height={20} class="code-block__bash-icon" />
+          </span>
+        {/if}
+        <span class="code-block__language-text">{language}</span>
+        <span class="sr-only">{languageLabel}</span>
+      </span>
+    {/if}
+    <span class="tooltip-host" data-tooltip={copied ? 'Copied!' : 'Copy code'}>
+      <button
+        type="button"
+        class="code-block__copy-btn"
+        aria-label={copied ? 'Copied!' : 'Copy code'}
+        onclick={copyCode}
+      >
+        {#if copied}
+          <span class="code-block__copy-icon code-block__copy-icon--check" aria-hidden="true">
+            <Check width={20} height={20} />
+          </span>
+        {:else}
+          <span class="code-block__copy-icon code-block__copy-icon--copy" aria-hidden="true">
+            <Copy width={20} height={20} />
+          </span>
+        {/if}
+      </button>
+    </span>
+  </div>
+  <pre><code>{code}</code></pre>
+</div>
+
+<style>
+  .code-block {
+    position: relative;
+    margin: var(--spacing-4) 0;
+    border-radius: var(--radius-lg);
+    overflow: visible;
+    background-color: var(--background-alt);
+    border: 1px solid var(--border);
+  }
+  .code-block__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-2) var(--spacing-3);
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+  }
+  .code-block__language {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+    font-size: var(--font-size-xs);
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wider);
+    font-weight: var(--font-weight-medium);
+  }
+  .code-block__language-icon {
+    display: block;
+    flex-shrink: 0;
+    width: var(--spacing-5);
+    height: var(--spacing-5);
+    color: var(--text-dim);
+  }
+  .code-block__language-icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  .code-block__plaintext-icon {
+    color: var(--text-dim);
+  }
+  .code-block__plaintext-icon :global(path) {
+    fill: currentColor;
+  }
+  .code-block__bash-icon {
+    color: var(--text-dim);
+  }
+  .code-block__bash-icon :global(.bash-icon__main) {
+    fill: currentColor;
+  }
+  .code-block__language-text {
+    display: none;
+  }
+  @media (width >= 768px) {
+    .code-block__language-text {
+      display: inline;
+    }
+  }
+  .code-block__copy-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-2);
+    min-width: var(--spacing-8);
+    height: var(--spacing-8);
+    margin-left: auto;
+    background-color: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    cursor: pointer;
+    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
+  }
+  .code-block__copy-btn:hover {
+    background-color: var(--background);
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+  .code-block__copy-btn:focus-visible {
+    outline: var(--outline-width) solid var(--accent);
+    outline-offset: var(--outline-offset);
+  }
+  .code-block pre {
+    margin: 0;
+    padding: var(--spacing-4);
+    overflow-x: auto;
+    background-color: var(--background-alt);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+  .code-block code {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-relaxed);
+    color: var(--text);
+    white-space: pre;
+    word-wrap: normal;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/scaffold/svelte-app/src/lib/rizzo-docs/SvelteDocPage.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import Index from './pages/Index.svelte';
+  import ComponentsOverview from './pages/ComponentsOverview.svelte';
+  import ComingSoon from './pages/ComingSoon.svelte';
+  import ButtonDoc from './pages/ButtonDoc.svelte';
+  import BadgeDoc from './pages/BadgeDoc.svelte';
+  import CardsDoc from './pages/CardsDoc.svelte';
+  import DividerDoc from './pages/DividerDoc.svelte';
+  import SpinnerDoc from './pages/SpinnerDoc.svelte';
+  import ProgressBarDoc from './pages/ProgressBarDoc.svelte';
+  import AvatarDoc from './pages/AvatarDoc.svelte';
+  import AlertDoc from './pages/AlertDoc.svelte';
+  import BreadcrumbDoc from './pages/BreadcrumbDoc.svelte';
+  import FormsDoc from './pages/FormsDoc.svelte';
+  import CopyToClipboardDoc from './pages/CopyToClipboardDoc.svelte';
+  import TooltipDoc from './pages/TooltipDoc.svelte';
+  import PaginationDoc from './pages/PaginationDoc.svelte';
+  import TabsDoc from './pages/TabsDoc.svelte';
+  import AccordionDoc from './pages/AccordionDoc.svelte';
+  import DropdownDoc from './pages/DropdownDoc.svelte';
+  import ModalDoc from './pages/ModalDoc.svelte';
+  import ToastDoc from './pages/ToastDoc.svelte';
+  import TableDoc from './pages/TableDoc.svelte';
+  import IconsDoc from './pages/IconsDoc.svelte';
+  import NavbarDoc from './pages/NavbarDoc.svelte';
+  import SearchDoc from './pages/SearchDoc.svelte';
+  import SettingsDoc from './pages/SettingsDoc.svelte';
+  import ThemeSwitcherDoc from './pages/ThemeSwitcherDoc.svelte';
+
+  interface Props {
+    /** Slug from URL (e.g. "components/badge"). Pass string so SSR and client hydrate the same. */
+    slug?: string | undefined;
+  }
+  let { slug }: Props = $props();
+
+  const path = $derived(
+    typeof slug === 'string' && slug !== '' ? slug.split('/').filter(Boolean) : []
+  );
+  const first = $derived(path[0] ?? '');
+  const second = $derived(path[1] ?? '');
+</script>
+
+<div class="svelte-doc-page-root">
+  {#if path.length === 0 || (path.length === 1 && first === '')}
+    <Index />
+  {:else if first === 'components' && !second}
+    <ComponentsOverview />
+  {:else if first === 'components' && second === 'button'}
+    <ButtonDoc />
+  {:else if first === 'components' && second === 'badge'}
+    <BadgeDoc />
+  {:else if first === 'components' && second === 'cards'}
+    <CardsDoc />
+  {:else if first === 'components' && second === 'divider'}
+    <DividerDoc />
+  {:else if first === 'components' && second === 'spinner'}
+    <SpinnerDoc />
+  {:else if first === 'components' && second === 'progress-bar'}
+    <ProgressBarDoc />
+  {:else if first === 'components' && second === 'avatar'}
+    <AvatarDoc />
+  {:else if first === 'components' && second === 'alert'}
+    <AlertDoc />
+  {:else if first === 'components' && second === 'breadcrumb'}
+    <BreadcrumbDoc />
+  {:else if first === 'components' && second === 'forms'}
+    <FormsDoc />
+  {:else if first === 'components' && second === 'copy-to-clipboard'}
+    <CopyToClipboardDoc />
+  {:else if first === 'components' && second === 'tooltip'}
+    <TooltipDoc />
+  {:else if first === 'components' && second === 'pagination'}
+    <PaginationDoc />
+  {:else if first === 'components' && second === 'tabs'}
+    <TabsDoc />
+  {:else if first === 'components' && second === 'accordion'}
+    <AccordionDoc />
+  {:else if first === 'components' && second === 'dropdown'}
+    <DropdownDoc />
+  {:else if first === 'components' && second === 'modal'}
+    <ModalDoc />
+  {:else if first === 'components' && second === 'toast'}
+    <ToastDoc />
+  {:else if first === 'components' && second === 'table'}
+    <TableDoc />
+  {:else if first === 'components' && second === 'icons'}
+    <IconsDoc />
+  {:else if first === 'components' && second === 'navbar'}
+    <NavbarDoc />
+  {:else if first === 'components' && second === 'search'}
+    <SearchDoc />
+  {:else if first === 'components' && second === 'settings'}
+    <SettingsDoc />
+  {:else if first === 'components' && second === 'theme-switcher'}
+    <ThemeSwitcherDoc />
+  {:else}
+    <ComingSoon title={second ? second.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) : first} />
+  {/if}
+</div>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import Accordion from '$lib/rizzo/Accordion.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+
+  const items = [
+    { id: 'one', title: 'Section one', content: '<p>Content for section one.</p>' },
+    { id: 'two', title: 'Section two', content: '<p>Content for section two.</p>' },
+    { id: 'three', title: 'Section three', content: '<p>Content for section three.</p>' },
+  ];
+</script>
+
+<section>
+  <h2>Accordion component</h2>
+  <p>Expandable panels with single or multiple open. Keyboard (Arrow keys, Home, End, Enter/Space) and ARIA.</p>
+
+  <h3>Props</h3>
+  <ul>
+    <li><code>items</code> (array, required) — Objects with <code>id</code>, <code>title</code>, optional <code>content</code> (HTML string)</li>
+    <li><code>id</code> (string, optional) — Unique accordion id</li>
+    <li><code>allowMultiple</code> (boolean, optional) — Allow multiple panels open (default: false)</li>
+    <li><code>defaultExpanded</code> (string | string[], optional) — ID(s) to expand by default</li>
+    <li><code>class</code> (string, optional) — Additional CSS classes</li>
+  </ul>
+
+  <h3>Single open (default)</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Accordion {items} defaultExpanded="one" />
+  </div>
+
+  <h3>Allow multiple</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Accordion {items} allowMultiple defaultExpanded={['one', 'two']} />
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Accordion from './components/svelte/Accordion.svelte';
+</script>
+
+<Accordion
+  items={[
+    { id: 'a', title: 'Panel A', content: '<p>Content A.</p>' },
+    { id: 'b', title: 'Panel B', content: '<p>Content B.</p>' },
+  ]}
+  defaultExpanded="a"
+/>
+<Accordion items={items} allowMultiple />`}
+    language="svelte"
+  />
+</section>

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

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import Alert from '$lib/rizzo/Alert.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+
+  type AlertItem = { id: string; variant: 'success' | 'error' | 'warning' | 'info'; message: string; dismissible: boolean; autoDismiss?: number };
+  let liveAlerts = $state<AlertItem[]>([]);
+  let autoDismissAlerts = $state<AlertItem[]>([]);
+
+  function showAlert(variant: AlertItem['variant'], message: string, dismissible = true, autoDismiss = 0, target: 'live' | 'auto' = 'live') {
+    const item: AlertItem = {
+      id: crypto.randomUUID(),
+      variant,
+      message,
+      dismissible,
+      ...(autoDismiss > 0 ? { autoDismiss } : {}),
+    };
+    if (target === 'auto') autoDismissAlerts = [...autoDismissAlerts, item];
+    else liveAlerts = [...liveAlerts, item];
+  }
+
+  function removeLive(id: string) {
+    liveAlerts = liveAlerts.filter((a) => a.id !== id);
+  }
+  function removeAutoDismiss(id: string) {
+    autoDismissAlerts = autoDismissAlerts.filter((a) => a.id !== id);
+  }
+
+  const msgAuto3 = 'This alert will auto-dismiss in 3 seconds';
+  const msgAuto5 = 'This alert will auto-dismiss in 5 seconds';
+  const msgAuto7 = 'This alert will auto-dismiss in 7 seconds';
+</script>
+
+<section>
+  <h2>Alert component</h2>
+  <p>Variants: success, error, warning, info. Optional dismissible and auto-dismiss.</p>
+
+  <h3>Variants (show on click)</h3>
+  <p>Click the buttons below to see each variant in action:</p>
+  <div class="example">
+    <div class="example-title">Live examples</div>
+    <div class="example-buttons">
+      <button type="button" class="btn btn-success" onclick={() => showAlert('success', 'Success! Your changes have been saved successfully.')}>Show Success Alert</button>
+      <button type="button" class="btn btn-error" onclick={() => showAlert('error', 'Error! Something went wrong. Please try again.')}>Show Error Alert</button>
+      <button type="button" class="btn btn-warning" onclick={() => showAlert('warning', 'Warning! This action cannot be undone.')}>Show Warning Alert</button>
+      <button type="button" class="btn btn-info" onclick={() => showAlert('info', 'Info: New features are available in the latest update.')}>Show Info Alert</button>
+    </div>
+    <div class="example-stack example-alert-container">
+      {#each liveAlerts as item (item.id)}
+        <Alert variant={item.variant} dismissible={item.dismissible} autoDismiss={item.autoDismiss} onDismiss={() => removeLive(item.id)}>
+          {item.message}
+        </Alert>
+      {/each}
+    </div>
+  </div>
+
+  <h3>Auto-dismiss</h3>
+  <p>Alerts can automatically dismiss after a set duration:</p>
+  <div class="example">
+    <div class="example-title">Auto-dismiss examples</div>
+    <div class="example-buttons">
+      <button type="button" class="btn btn-primary" onclick={() => showAlert('success', msgAuto3, true, 3000, 'auto')}>3 second</button>
+      <button type="button" class="btn btn-primary" onclick={() => showAlert('info', msgAuto5, true, 5000, 'auto')}>5 second</button>
+      <button type="button" class="btn btn-primary" onclick={() => showAlert('warning', msgAuto7, true, 7000, 'auto')}>7 second</button>
+    </div>
+    <div class="example-stack example-alert-container">
+      {#each autoDismissAlerts as item (item.id)}
+        <Alert variant={item.variant} dismissible={item.dismissible} autoDismiss={item.autoDismiss} onDismiss={() => removeAutoDismiss(item.id)}>
+          {item.message}
+        </Alert>
+      {/each}
+    </div>
+  </div>
+
+  <h3>Static examples</h3>
+  <div class="example">
+    <div class="example-title">Inline alerts</div>
+    <div class="example-stack">
+      <Alert variant="success">Success message.</Alert>
+      <Alert variant="error">Error message.</Alert>
+      <Alert variant="warning">Warning message.</Alert>
+      <Alert variant="info" dismissible>Dismissible info alert.</Alert>
+    </div>
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Alert from './components/svelte/Alert.svelte';
+</script>
+
+<Alert variant="success">Saved.</Alert>
+<Alert variant="error" dismissible>Something went wrong.</Alert>
+<Alert variant="info" autoDismiss={5000}>Auto-dismiss in 5s.</Alert>`}
+    language="svelte"
+  />
+</section>
+
+<style>
+  .example-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+  }
+  .example-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    margin-bottom: var(--spacing-4);
+  }
+  .example-alert-container {
+    min-height: 1px;
+    margin-top: var(--spacing-4);
+  }
+</style>