rizzo-css 0.0.11 → 0.0.13

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>

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import AvatarComponent from '$lib/rizzo/Avatar.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+</script>
+
+<section>
+  <h2>Avatar component</h2>
+  <p>Accessible avatar: profile image when provided, or initials from <code>name</code> / <code>initials</code>. Sizes (sm, md, lg) and shape (circle, square). BEM: <code>avatar</code>, <code>avatar--sm</code>/<code>md</code>/<code>lg</code>, <code>avatar--circle</code>/<code>square</code>.</p>
+
+  <h3>Props</h3>
+  <ul>
+    <li><code>src</code> (string, optional) — Image URL</li>
+    <li><code>alt</code> (string, optional) — Alt text for the image</li>
+    <li><code>name</code> (string, optional) — Full name for initials (e.g. "Jane Doe" → "JD")</li>
+    <li><code>initials</code> (string, optional) — Override initials; ignored if <code>name</code> is set</li>
+    <li><code>size</code> (string, optional) — <code>sm</code>, <code>md</code>, <code>lg</code> (default: md)</li>
+    <li><code>shape</code> (string, optional) — <code>circle</code>, <code>square</code> (default: circle)</li>
+    <li><code>class</code> (string, optional) — Additional CSS classes</li>
+  </ul>
+
+  <h3>Initials (basic)</h3>
+  <div class="example">
+    <div class="example-title">Live examples</div>
+    <div class="example-row">
+      <AvatarComponent name="Jane Doe" />
+      <AvatarComponent name="Alice" />
+      <AvatarComponent initials="AB" />
+    </div>
+  </div>
+
+  <h3>Sizes</h3>
+  <div class="example">
+    <div class="example-title">Live examples</div>
+    <div class="example-row">
+      <AvatarComponent name="Jane Doe" size="sm" />
+      <AvatarComponent name="Jane Doe" size="md" />
+      <AvatarComponent name="Jane Doe" size="lg" />
+    </div>
+  </div>
+
+  <h3>Shape</h3>
+  <p>Use <code>shape="square"</code> for a rounded square; default is <code>circle</code>.</p>
+  <div class="example">
+    <div class="example-title">Live examples</div>
+    <div class="example-row">
+      <AvatarComponent name="Jane Doe" shape="circle" />
+      <AvatarComponent name="Jane Doe" shape="square" />
+    </div>
+  </div>
+
+  <h3>With image</h3>
+  <p>Pass <code>src</code> and <code>alt</code> for a profile image (lazy-loaded, <code>object-fit: cover</code>).</p>
+  <div class="example">
+    <div class="example-title">Live example (placeholder)</div>
+    <div class="example-row">
+      <AvatarComponent
+        src="https://api.dicebear.com/7.x/initials/svg?seed=Jane"
+        alt="Jane Doe"
+        size="md"
+      />
+      <AvatarComponent
+        src="https://api.dicebear.com/7.x/initials/svg?seed=Alice"
+        alt="Alice"
+        size="lg"
+      />
+    </div>
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Avatar from './components/svelte/Avatar.svelte';
+</script>
+
+<Avatar name="Jane Doe" />
+<Avatar name="Alice" />
+<Avatar initials="AB" />
+<Avatar name="Jane Doe" size="sm" />
+<Avatar name="Jane Doe" shape="square" />
+<Avatar src="/photo.jpg" alt="Jane Doe" size="md" />`}
+    language="svelte"
+  />
+</section>
+
+<style>
+  .example-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    align-items: center;
+  }
+</style>

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import Badge from '$lib/rizzo/Badge.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+</script>
+
+<section>
+  <h2>Badge component</h2>
+  <p>Small labels and tags with variants, sizes, and optional pill style. BEM: <code>badge</code>, <code>badge--primary</code>, etc. Text on solid semantic variants (success, warning, error, info) uses the same contrast variables as buttons (<code>--success-text-on-solid</code>, etc.) for theme-aware readability.</p>
+
+  <h3>Props</h3>
+  <ul>
+    <li><code>variant</code> (string, optional) — <code>primary</code>, <code>success</code>, <code>warning</code>, <code>error</code>, <code>info</code></li>
+    <li><code>size</code> (string, optional) — <code>sm</code>, <code>md</code>, <code>lg</code></li>
+    <li><code>pill</code> (boolean, optional) — Rounded pill style</li>
+    <li><code>class</code> (string, optional) — Additional CSS classes</li>
+  </ul>
+
+  <h3>Variants</h3>
+  <div class="example">
+    <div class="example-title">Live examples</div>
+    <div class="example-badges">
+      <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>Sizes and pill</h3>
+  <div class="example">
+    <div class="example-badges">
+      <Badge variant="primary" size="sm">Small</Badge>
+      <Badge variant="primary" size="md">Medium</Badge>
+      <Badge variant="primary" size="lg">Large</Badge>
+      <Badge variant="success" pill>Pill</Badge>
+    </div>
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Badge from './components/svelte/Badge.svelte';
+</script>
+
+<Badge variant="primary">New</Badge>
+<Badge variant="success" size="sm">Active</Badge>
+<Badge variant="error" pill>Urgent</Badge>`}
+    language="svelte"
+  />
+</section>
+
+<style>
+  .example-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    align-items: center;
+  }
+</style>