rizzo-css 0.0.11 → 0.0.13

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+
+  // Build code string so Svelte does not interpret {open} / {query} as expressions
+  const o = '{open}';
+  const notOpen = '{!open}';
+  const setOpenFalse = '() => (open = false)';
+  const toggleOpen = '() => (open = !open)';
+  const query = '{query}';
+  const searchStructureCode =
+    `<div class="search" data-search>
+  <div class="search__trigger-wrapper">
+    <button
+      type="button"
+      class="search__trigger"
+      aria-label="Open search"
+      aria-expanded=` +
+    o +
+    `
+      aria-controls="search-results-panel"
+      onclick=` +
+    toggleOpen +
+    `
+    >
+      <SearchIcon class="search__icon" width={20} height={20} />
+      <span class="search__trigger-text">Search</span>
+      <kbd class="search__kbd" aria-hidden="true"><span class="search__kbd-modifier"><!-- Cmd icon --></span><kbd>K</kbd></kbd>
+    </button>
+  </div>
+  <div
+    class="search__overlay"
+    data-search-overlay
+    aria-hidden=` +
+    notOpen +
+    `
+    role="dialog"
+    aria-modal="true"
+  >
+    <div
+      class="search__panel"
+      id="search-results-panel"
+      tabindex="-1"
+      aria-hidden=` +
+    notOpen +
+    `
+    >
+      <div class="search__header">
+        <input
+          type="search"
+          class="search__input"
+          placeholder="Search documentation..."
+          aria-label="Search"
+          data-search-input
+          bind:value=` +
+    query +
+    `
+        />
+        <button type="button" class="search__close-btn" aria-label="Close" onclick=` +
+    setOpenFalse +
+    `>
+          Close
+        </button>
+      </div>
+      <div class="search__results" role="listbox" aria-label="Search results">
+        <!-- search__empty / search__results-list / search__loading / search__no-results -->
+      </div>
+    </div>
+  </div>
+</div>`;
+</script>
+
+<section>
+  <h2>Search component</h2>
+  <p>An accessible search overlay with Algolia integration (or client-side fallback). The docs site uses the <strong>Astro</strong> Search in the layout. In a Svelte app, use the same BEM classes and data attributes; wire open/close state, <strong>Cmd+K</strong> / <strong>Ctrl+K</strong>, and your search API or Algolia client.</p>
+
+  <h3>Live example</h3>
+  <p>Search is in the navbar (top of page) — click the search icon or press <kbd>Ctrl+K</kbd> / <kbd>Cmd+K</kbd>. You can also use the <strong>standalone search above</strong> (same as navbar).</p>
+
+  <h3>Features</h3>
+  <ul>
+    <li><strong>Full-screen overlay</strong> — Centered search panel; overlay covers the viewport when open.</li>
+    <li><strong>Keyboard shortcut</strong> — <kbd>Ctrl+K</kbd> / <kbd>Cmd+K</kbd> to open or close.</li>
+    <li><strong>Escape</strong> — Closes search; restore focus to trigger.</li>
+    <li>Close button (X) with screen reader label; optional text label on mobile.</li>
+    <li>Live results as you type; Algolia integration or client-side search.</li>
+    <li>Full keyboard navigation (Arrow keys, Enter, Tab) in results.</li>
+    <li>Mobile responsive; full-width panel on small screens. Mutually exclusive with mobile menu on the docs site.</li>
+    <li>ARIA (dialog, listbox, searchbox), focus trap, and live regions for screen readers.</li>
+  </ul>
+
+  <h3>Key BEM classes and data attributes</h3>
+  <p>Use these so styles and any shared scripts (e.g. Cmd+K) work. Toggle <code>aria-hidden</code> on the overlay and panel from your open state.</p>
+  <ul>
+    <li><code>search</code> — root wrapper; use <code>data-search</code> if you reuse the Astro script pattern.</li>
+    <li><code>search__trigger-wrapper</code> / <code>search__trigger</code> — button to open search; <code>aria-expanded</code>, <code>aria-controls</code> = panel id.</li>
+    <li><code>search__overlay</code> — full-screen overlay; <code>data-search-overlay</code>; set <code>aria-hidden</code> from state.</li>
+    <li><code>search__panel</code> — dialog panel; <code>role="dialog"</code>, <code>aria-modal="true"</code>, <code>aria-labelledby</code> (title id), <code>tabindex="-1"</code> for focus trap.</li>
+    <li><code>search__header</code> — contains input row and close button.</li>
+    <li><code>search__input-wrapper</code> / <code>search__input</code> — search input; <code>aria-controls</code> = results list id; <code>data-search-input</code> for script hooks.</li>
+    <li><code>search__clear</code> — clear input button; <code>data-search-clear</code>.</li>
+    <li><code>search__close-btn</code> — close overlay button.</li>
+    <li><code>search__results</code> — container for results; <code>role="listbox"</code>, <code>aria-label="Search results"</code>, <code>aria-live="polite"</code>.</li>
+    <li><code>search__empty</code>, <code>search__loading</code>, <code>search__no-results</code> — states; use <code>hidden</code> or conditional render.</li>
+    <li><code>search__result-item</code> / <code>search__result-title</code> / <code>search__result-category</code> / <code>search__result-content</code> — result row and parts.</li>
+  </ul>
+
+  <h3>Structure example (simplified)</h3>
+  <p>Minimal markup; add IDs, ARIA, and data attributes as needed. Control visibility with <code>aria-hidden</code> and optional classes.</p>
+  <CodeBlock
+    code={searchStructureCode}
+    language="svelte"
+  />
+
+  <h3>Implementing in Svelte</h3>
+  <ul>
+    <li><strong>Open state:</strong> e.g. <code>let open = $state(false)</code>. Set <code>aria-expanded</code> on the trigger and <code>{'aria-hidden={!open}'}</code> on overlay and panel.</li>
+    <li><strong>Cmd+K / Ctrl+K:</strong> Add a <code>keydown</code> listener on <code>window</code> or <code>document</code>; if <code>key === 'k'</code> and (metaKey or ctrlKey), prevent default and toggle <code>{'open'}</code>.</li>
+    <li><strong>Escape:</strong> When overlay is open, handle Escape to set <code>{'open = false'}</code> and call <code>triggerEl.focus()</code>.</li>
+    <li><strong>Focus trap:</strong> When open, focus the input; trap Tab inside the panel; on close, restore focus to the trigger.</li>
+    <li><strong>Search:</strong> Connect <code>query</code> to Algolia (e.g. <code>searchClient</code> + index) or to client-side filtering; render results with <code>search__result-item</code> and siblings. Use <code>aria-activedescendant</code> for keyboard-highlighted result.</li>
+  </ul>
+
+  <h3>Keyboard shortcuts</h3>
+  <ul>
+    <li><kbd>Ctrl+K</kbd> / <kbd>Cmd+K</kbd> — Open or close search</li>
+    <li><kbd>Escape</kbd> — Close search</li>
+    <li><kbd>Arrow Down</kbd> — Next result</li>
+    <li><kbd>Arrow Up</kbd> — Previous result</li>
+    <li><kbd>Enter</kbd> — Open selected result</li>
+  </ul>
+
+  <p><a href="/docs/components/search">Full Astro Search documentation</a> — Algolia setup, props, and the inline script you can port to Svelte.</p>
+  <p><a href="/docs/svelte/components">← Back to Svelte components</a></p>
+</section>
+
+<style>
+  kbd {
+    display: inline-block;
+    padding: var(--spacing-0-125) var(--spacing-0-375);
+    background-color: var(--background-alt);
+    border: var(--outline-width) solid var(--border);
+    border-radius: var(--radius);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    line-height: 1;
+  }
+</style>

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+  import Gear from '$lib/rizzo/icons/Gear.svelte';
+</script>
+
+<section>
+  <h2>Settings component</h2>
+  <p>Slide-in panel for theme, font size, and accessibility options. All settings persist in <code>localStorage</code>. The docs site uses the <strong>Astro</strong> Settings in the layout; open via the navbar gear or <code>window.openSettings()</code>. In a Svelte app, use the same BEM classes and wire state + persistence to match.</p>
+
+  <h3>Live example</h3>
+  <p>Open Settings via the <strong>gear icon in the navbar</strong> or the button below (same as navbar).</p>
+  <div class="example">
+    <div class="example-title">Open Settings</div>
+    <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick={() => window.openSettings?.()}>
+      <Gear class="navbar__settings-icon" width={20} height={20} />
+      <span class="navbar__settings-label">Settings</span>
+    </button>
+  </div>
+
+  <h3>Features</h3>
+  <ul>
+    <li><strong>Theme switcher</strong> — Integrated ThemeSwitcher; persists as <code>theme</code> in localStorage (e.g. <code>github-dark-classic</code>, <code>system</code>).</li>
+    <li><strong>Font size slider</strong> — 75%–150%; track uses <code>--slider-progress</code>. Persists as <code>fontSizeScale</code>; apply as <code>--font-size-scale</code> on <code>html</code>.</li>
+    <li><strong>Reduce motion</strong> — Toggle adds <code>.reduced-motion</code> to document root. Persists as <code>reducedMotion</code> (<code>true</code>/<code>false</code> string).</li>
+    <li><strong>High contrast</strong> — Toggle adds <code>.high-contrast</code> to root. Persists as <code>highContrast</code>.</li>
+    <li><strong>Scrollbar style</strong> — Radio: Thin (default), Thick, Hidden. Applies <code>.scrollbar-thick</code> or <code>.scrollbar-hidden</code> on <code>html</code>. Persists as <code>scrollbarStyle</code> (<code>thin</code>, <code>thick</code>, <code>hidden</code>).</li>
+    <li>Slide-in from right with overlay; animations respect <code>prefers-reduced-motion</code>.</li>
+    <li>Focus trap when open; focus returns to trigger on close. Escape closes. ARIA (dialog, labels).</li>
+    <li>Mobile: full-width panel.</li>
+  </ul>
+
+  <h3>Key BEM classes and data attributes</h3>
+  <ul>
+    <li><code>settings</code> — root; <code>data-settings</code>. Set <code>aria-hidden</code> from open state.</li>
+    <li><code>settings__overlay</code> — backdrop; <code>data-settings-overlay</code>; click to close.</li>
+    <li><code>settings__panel</code> — drawer; <code>role="dialog"</code>, <code>aria-modal="true"</code>, <code>aria-labelledby="settings-title"</code>.</li>
+    <li><code>settings__header</code>, <code>settings__title</code>, <code>settings__close</code> — header and close button; <code>data-settings-close</code>.</li>
+    <li><code>settings__content</code> — scrollable body.</li>
+    <li><code>settings__section</code>, <code>settings__section-title</code>, <code>settings__control</code> — section layout.</li>
+    <li><code>settings__label</code>, <code>settings__label-text</code>, <code>settings__label-value</code> — labels; <code>data-font-size-value</code> for the percentage display.</li>
+    <li><code>settings__slider</code> — range input; <code>data-font-size-slider</code>, <code>style="--slider-progress: 50%"</code> for filled track.</li>
+    <li><code>settings__slider-labels</code> — e.g. Small / Default / Large.</li>
+    <li><code>settings__checkbox-label</code>, <code>settings__checkbox</code> — toggles; <code>data-reduced-motion</code>, <code>data-high-contrast</code>.</li>
+    <li><code>settings__radio-group</code> (role="radiogroup"), <code>settings__radio-label</code>, <code>settings__radio</code> — scrollbar options; <code>data-scrollbar-style</code>, <code>name="scrollbar-style"</code>, values <code>thin</code> / <code>thick</code> / <code>hidden</code>.</li>
+    <li><code>settings__help-text</code> — description under controls.</li>
+  </ul>
+
+  <h3>Persistence (localStorage)</h3>
+  <p>Read/write these keys and apply to the document so styles and theme stay in sync:</p>
+  <ul>
+    <li><code>theme</code> — theme id or <code>system</code>; set <code>data-theme</code> on <code>html</code>.</li>
+    <li><code>fontSizeScale</code> — number string (e.g. <code>1</code>, <code>1.25</code>); set <code>style="--font-size-scale: …"</code> on <code>html</code>.</li>
+    <li><code>reducedMotion</code> — <code>"true"</code> / <code>"false"</code>; add/remove <code>.reduced-motion</code> on <code>html</code>.</li>
+    <li><code>highContrast</code> — <code>"true"</code> / <code>"false"</code>; add/remove <code>.high-contrast</code> on <code>html</code>.</li>
+    <li><code>scrollbarStyle</code> — <code>thin</code> / <code>thick</code> / <code>hidden</code>; add <code>.scrollbar-thick</code> or <code>.scrollbar-hidden</code> on <code>html</code> when not thin.</li>
+  </ul>
+
+  <h3>Structure example (simplified)</h3>
+  <CodeBlock
+    code={`<div class="settings" data-settings aria-hidden={!open}>
+  <div class="settings__overlay" data-settings-overlay onclick={() => (open = false)}></div>
+  <div
+    class="settings__panel"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="settings-title"
+    aria-hidden={!open}
+  >
+    <div class="settings__header">
+      <h2 id="settings-title" class="settings__title">Settings</h2>
+      <button type="button" class="settings__close" aria-label="Close settings" data-settings-close onclick={() => (open = false)">×</button>
+    </div>
+    <div class="settings__content">
+      <section class="settings__section">
+        <h3 class="settings__section-title">Theme</h3>
+        <div class="settings__control"><!-- ThemeSwitcher or theme list --></div>
+      </section>
+      <section class="settings__section">
+        <h3 class="settings__section-title">Font Size</h3>
+        <div class="settings__control">
+          <label for="font-size-slider" class="settings__label">
+            <span class="settings__label-text">Adjust text size</span>
+            <span class="settings__label-value" data-font-size-value>{fontSizePercent}%</span>
+          </label>
+          <input type="range" id="font-size-slider" class="settings__slider" min="0.75" max="1.5" step="0.05" bind:value={fontSizeScale} style="--slider-progress: {sliderProgress}" data-font-size-slider />
+          <div class="settings__slider-labels"><span>Small</span><span>Default</span><span>Large</span></div>
+        </div>
+      </section>
+      <section class="settings__section">
+        <h3 class="settings__section-title">Accessibility</h3>
+        <div class="settings__control">
+          <label class="settings__checkbox-label">
+            <input type="checkbox" class="settings__checkbox" bind:checked={reducedMotion} data-reduced-motion />
+            <span>Reduce motion</span>
+          </label>
+          <p class="settings__help-text">Minimize animations and transitions</p>
+        </div>
+        <div class="settings__control">
+          <label class="settings__checkbox-label">
+            <input type="checkbox" class="settings__checkbox" bind:checked={highContrast} data-high-contrast />
+            <span>High contrast</span>
+          </label>
+          <p class="settings__help-text">Increase contrast for better visibility</p>
+        </div>
+        <div class="settings__control">
+          <div class="settings__label"><span class="settings__label-text">Scrollbar style</span></div>
+          <div class="settings__radio-group" role="radiogroup" aria-label="Scrollbar style">
+            <label class="settings__radio-label">
+              <input type="radio" name="scrollbar-style" value="thin" class="settings__radio" bind:group={scrollbarStyle} data-scrollbar-style />
+              <span>Thin</span>
+            </label>
+            <label class="settings__radio-label">
+              <input type="radio" name="scrollbar-style" value="thick" class="settings__radio" bind:group={scrollbarStyle} data-scrollbar-style />
+              <span>Thick</span>
+            </label>
+            <label class="settings__radio-label">
+              <input type="radio" name="scrollbar-style" value="hidden" class="settings__radio" bind:group={scrollbarStyle} data-scrollbar-style />
+              <span>Hidden</span>
+            </label>
+          </div>
+          <p class="settings__help-text">Choose your preferred scrollbar appearance</p>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>`}
+    language="svelte"
+  />
+
+  <h3>Implementing in Svelte</h3>
+  <ul>
+    <li><strong>Open state:</strong> e.g. <code>let open = $state(false)</code>. Set <code>{'aria-hidden={!open}'}</code> on root, overlay, and panel. Expose <code>openSettings()</code> / <code>closeSettings()</code> (e.g. on a global or context) so the navbar can open the panel.</li>
+    <li><strong>Overlay/close:</strong> Click overlay or close button → <code>{'open = false'}</code>. Escape key → close and restore focus to trigger.</li>
+    <li><strong>Focus trap:</strong> When open, focus first focusable in panel; trap Tab inside; on close, focus the element that opened (e.g. settings button).</li>
+    <li><strong>Persistence:</strong> On change, write to <code>localStorage</code> and update <code>html</code> (classes, <code>data-theme</code>, <code>--font-size-scale</code>). On mount, read from <code>localStorage</code> and set initial state + DOM.</li>
+    <li><strong>Slider progress:</strong> Compute <code>--slider-progress</code> from <code>(value - min) / (max - min) * 100%</code> for the filled track gradient.</li>
+  </ul>
+
+  <h3>Opening from navbar</h3>
+  <p>Expose a global so the navbar settings button can open the panel. In your Settings component, use <code>onMount</code> to set <code>window.openSettings</code> and <code>window.closeSettings</code> to functions that toggle your <code>{'open'}</code> state and restore focus. The Vanilla scaffold and Astro layout do the same.</p>
+  <CodeBlock
+    code={`// Inside your Settings component (or a parent that holds open state)
+import { onMount } from 'svelte';
+let open = $state(false);
+onMount(() => {
+  (window as any).openSettings = () => { open = true; };
+  (window as any).closeSettings = () => { open = false; };
+  return () => {
+    delete (window as any).openSettings;
+    delete (window as any).closeSettings;
+  };
+});`}
+    language="svelte"
+  />
+
+  <p><a href="/docs/components/settings">Full Astro Settings documentation</a> — layout, persistence, and the inline script you can port to Svelte.</p>
+  <p><a href="/docs/svelte/components">← Back to Svelte components</a></p>
+</section>

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import Spinner from '$lib/rizzo/Spinner.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+</script>
+
+<section>
+  <h2>Spinner component</h2>
+  <p>Respects reduced motion via CSS.</p>
+
+  <h3>Sizes and variants</h3>
+  <div class="example">
+    <div class="example-title">Live examples</div>
+    <div class="example-row">
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+      <Spinner variant="success" />
+      <Spinner variant="error" label="Loading…" />
+    </div>
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Spinner from './components/svelte/Spinner.svelte';
+</script>
+
+<Spinner />
+<Spinner size="lg" variant="success" label="Loading…" />`}
+    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/TableDoc.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import Table from '$lib/rizzo/Table.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+
+  const basicColumns = [
+    { key: 'name', label: 'Name' },
+    { key: 'role', label: 'Role' },
+    { key: 'status', label: 'Status' },
+  ];
+  const basicData = [
+    { name: 'Alice', role: 'Developer', status: 'Active' },
+    { name: 'Bob', role: 'Designer', status: 'Active' },
+    { name: 'Carol', role: 'Manager', status: 'Away' },
+  ];
+
+  const sortColumns = [
+    { key: 'name', label: 'Name' },
+    { key: 'score', label: 'Score', type: 'number' as const },
+    { key: 'level', label: 'Level', type: 'number' as const },
+  ];
+  const sortData = [
+    { name: 'Alice', score: 92, level: 3 },
+    { name: 'Bob', score: 87, level: 2 },
+    { name: 'Carol', score: 95, level: 4 },
+  ];
+
+  const filterColumns = [
+    { key: 'name', label: 'Name' },
+    { key: 'role', label: 'Role' },
+    { key: 'status', label: 'Status' },
+  ];
+  const filterData = [
+    { name: 'Alice', role: 'Developer', status: 'Active' },
+    { name: 'Bob', role: 'Designer', status: 'Active' },
+    { name: 'Carol', role: 'Manager', status: 'Away' },
+    { name: 'Dave', role: 'Developer', status: 'Active' },
+  ];
+
+  const plainColumns = [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }];
+  const plainData = [{ a: '1', b: '2' }, { a: '3', b: '4' }];
+</script>
+
+<section>
+  <h2>Table component</h2>
+  <p>An accessible data table for displaying tabular data. Supports column header sorting (click or Enter/Space), optional filter input to search across all columns, striped rows, and responsive horizontal scroll. Same styles and functionality as the <a href="/docs/components/table">Astro Table</a>.</p>
+
+  <h3>Props</h3>
+  <ul>
+    <li><code>columns</code> (array, required) — Column definitions: <code>{'{ key, label, sortable?, type? }'}</code>. <code>type</code> is <code>'string'</code> or <code>'number'</code> for sort order.</li>
+    <li><code>data</code> (array, required) — Row data: array of objects with keys matching column <code>key</code>.</li>
+    <li><code>caption</code> (string, optional) — Table caption for accessibility.</li>
+    <li><code>sortable</code> (boolean, optional) — Enable column header sorting (default: true).</li>
+    <li><code>filterable</code> (boolean, optional) — Show filter input above table (default: false).</li>
+    <li><code>filterPlaceholder</code> (string, optional) — Placeholder for filter input (default: "Filter table…").</li>
+    <li><code>striped</code> (boolean, optional) — Striped rows (default: true).</li>
+    <li><code>class</code> (string, optional) — Additional CSS classes.</li>
+  </ul>
+
+  <h3>Basic usage</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Table columns={basicColumns} data={basicData} caption="Sample data" />
+  </div>
+
+  <h3>With sorting (number column)</h3>
+  <p>Set <code>type: 'number'</code> on columns that should sort numerically.</p>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Table columns={sortColumns} data={sortData} caption="Scores" />
+  </div>
+
+  <h3>With filter</h3>
+  <p>Use <code>filterable</code> to show a search input that filters rows by any column.</p>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Table columns={filterColumns} data={filterData} caption="Filterable list" filterable filterPlaceholder="Search…" />
+  </div>
+
+  <h3>Without stripes</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Table columns={plainColumns} data={plainData} caption="Plain table" striped={false} />
+  </div>
+
+  <h3>Features</h3>
+  <ul>
+    <li><strong>Accessible</strong> — Semantic table, caption, <code>scope="col"</code>, <code>aria-sort</code> on sortable headers, keyboard (Enter/Space) to sort.</li>
+    <li><strong>Sorting</strong> — Sortable column headers with Sort icon; click to sort ascending/descending; <code>type: 'number'</code> for numeric sort.</li>
+    <li><strong>Filtering</strong> — Optional filter input with Filter icon; rows shown/hidden by matching text in any cell.</li>
+    <li><strong>Striped rows</strong> — Optional alternating row background (default: true).</li>
+    <li><strong>Responsive</strong> — Table wrapper scrolls horizontally on small screens.</li>
+  </ul>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Table from './Table.svelte';
+</script>
+
+<Table
+  caption="Sample data"
+  columns={[
+    { key: 'name', label: 'Name' },
+    { key: 'role', label: 'Role' },
+    { key: 'status', label: 'Status' },
+  ]}
+  data={[
+    { name: 'Alice', role: 'Developer', status: 'Active' },
+    { name: 'Bob', role: 'Designer', status: 'Active' },
+    { name: 'Carol', role: 'Manager', status: 'Away' },
+  ]}
+/>`}
+    language="svelte"
+  />
+  <p><strong>Astro & Vanilla:</strong> <a href="/docs/components/table">Astro</a> · <a href="/docs/vanilla/components/table">Vanilla</a></p>
+</section>

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

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import Tabs from '$lib/rizzo/Tabs.svelte';
+  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
+</script>
+
+<section>
+  <h2>Tabs component</h2>
+  <p>An accessible tabs component for organizing content into multiple panels. Same styles and functionality as the <a href="/docs/components/tabs">Astro Tabs</a>: full keyboard navigation and ARIA tab pattern.</p>
+
+  <h3>Props</h3>
+  <ul>
+    <li><code>tabs</code> (array, required) — Array of tab objects with <code>id</code> and <code>label</code> (optional <code>content</code>)</li>
+    <li><code>id</code> (string, optional) — Unique identifier for the tabs component</li>
+    <li><code>defaultTab</code> (string, optional) — ID of the tab to show by default (defaults to first tab)</li>
+    <li><code>variant</code> (string, optional) — <code>'default'</code>, <code>'pills'</code>, or <code>'underline'</code></li>
+    <li><code>class</code> (string, optional) — Additional CSS classes</li>
+  </ul>
+
+  <h3>Basic usage</h3>
+  <p>Use the <code>content</code> property on each tab or pass panel content via the default snippet (one child per tab, in order).</p>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Tabs
+      tabs={[
+        { id: 'overview', label: 'Overview' },
+        { id: 'features', label: 'Features' },
+        { id: 'pricing', label: 'Pricing' },
+      ]}
+    >
+      {#snippet children(activeTabId)}
+        {#if activeTabId === 'overview'}
+          <div class="tabs__panel-content">
+            <h4>Overview</h4>
+            <p>This is the overview content. It provides a general introduction to the topic.</p>
+          </div>
+        {:else if activeTabId === 'features'}
+          <div class="tabs__panel-content">
+            <h4>Features</h4>
+            <ul>
+              <li>Feature 1: Accessible design</li>
+              <li>Feature 2: Keyboard navigation</li>
+              <li>Feature 3: Theme-aware styling</li>
+            </ul>
+          </div>
+        {:else if activeTabId === 'pricing'}
+          <div class="tabs__panel-content">
+            <h4>Pricing</h4>
+            <p>Choose the plan that works best for you.</p>
+          </div>
+        {/if}
+      {/snippet}
+    </Tabs>
+  </div>
+
+  <h3>With content property</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Tabs
+      tabs={[
+        { id: 'tab1', label: 'Tab 1', content: '<p>Content for tab 1</p>' },
+        { id: 'tab2', label: 'Tab 2', content: '<p>Content for tab 2</p>' },
+        { id: 'tab3', label: 'Tab 3', content: '<p>Content for tab 3</p>' },
+      ]}
+    />
+  </div>
+
+  <h3>Variants</h3>
+  <h4>Default</h4>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Tabs
+      variant="default"
+      tabs={[
+        { id: 'd1', label: 'Tab 1', content: '<p>Default variant with bottom border indicator</p>' },
+        { id: 'd2', label: 'Tab 2', content: '<p>Tab 2 content</p>' },
+        { id: 'd3', label: 'Tab 3', content: '<p>Tab 3 content</p>' },
+      ]}
+    />
+  </div>
+  <h4>Pills</h4>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Tabs
+      variant="pills"
+      tabs={[
+        { id: 'p1', label: 'Tab 1', content: '<p>Pills variant with filled background for active tab</p>' },
+        { id: 'p2', label: 'Tab 2', content: '<p>Tab 2 content</p>' },
+        { id: 'p3', label: 'Tab 3', content: '<p>Tab 3 content</p>' },
+      ]}
+    />
+  </div>
+  <h4>Underline</h4>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Tabs
+      variant="underline"
+      tabs={[
+        { id: 'u1', label: 'Tab 1', content: '<p>Underline variant with thicker bottom border for active tab</p>' },
+        { id: 'u2', label: 'Tab 2', content: '<p>Tab 2 content</p>' },
+        { id: 'u3', label: 'Tab 3', content: '<p>Tab 3 content</p>' },
+      ]}
+    />
+  </div>
+
+  <h3>Default tab</h3>
+  <div class="example">
+    <div class="example-title">Live example</div>
+    <Tabs
+      defaultTab="second"
+      tabs={[
+        { id: 'first', label: 'First', content: '<p>First tab content</p>' },
+        { id: 'second', label: 'Second', content: '<p>Second tab is active by default</p>' },
+        { id: 'third', label: 'Third', content: '<p>Third tab content</p>' },
+      ]}
+    />
+  </div>
+
+  <h3>Usage</h3>
+  <CodeBlock
+    code={`<script>
+  import Tabs from './components/svelte/Tabs.svelte';
+</script>
+
+<!-- With content on each tab -->
+<Tabs
+  tabs={[
+    { id: 'overview', label: 'Overview', content: '<p>…</p>' },
+    { id: 'api', label: 'API', content: '<p>…</p>' },
+  ]}
+  defaultTab="overview"
+/>
+
+<!-- With snippet (dynamic content by active tab) -->
+<Tabs tabs={[{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }]}>
+  {#snippet children(activeTabId)}
+    {#if activeTabId === 'a'}…{:else}…{/if}
+  {/snippet}
+</Tabs>
+
+<Tabs tabs={items} variant="pills" />`}
+    language="svelte"
+  />
+
+  <h3>Features</h3>
+  <ul>
+    <li><strong>ARIA tab pattern</strong> — <code>role="tablist"</code>, <code>role="tab"</code>, <code>role="tabpanel"</code>, <code>aria-selected</code>, <code>aria-controls</code>, <code>aria-labelledby</code></li>
+    <li><strong>Keyboard</strong> — Arrow Right/Down, Arrow Left/Up, Home, End, Enter, Space</li>
+    <li><strong>Three variants</strong> — Default, Pills, Underline</li>
+    <li><strong>Theme-aware</strong> — Adapts to all 14 themes</li>
+  </ul>
+  <p><strong>Astro & Vanilla:</strong> <a href="/docs/components/tabs">Astro</a> · <a href="/docs/vanilla/components/tabs">Vanilla</a></p>
+</section>