rizzo-css 0.0.15 → 0.0.17

package/scaffold/astro-app/src/components/PackageInstallTabs.astro

@@ -0,0 +1,87 @@
+---
+import Tabs from './Tabs.astro';
+import CodeBlock from './CodeBlock.astro';
+
+interface Props {
+  /** Package name to install, e.g. "rizzo-css" */
+  packageName?: string;
+  /** Optional default tab id (npm, pnpm, yarn, bun) */
+  defaultTab?: string;
+  /** Optional class for the wrapper */
+  class?: string;
+}
+
+const { packageName = 'rizzo-css', defaultTab = 'npm', class: className = '' } = Astro.props;
+
+const commands = {
+  npm: `npm install ${packageName}`,
+  pnpm: `pnpm add ${packageName}`,
+  yarn: `yarn add ${packageName}`,
+  bun: `bun add ${packageName}`,
+};
+
+const tabs = [
+  { id: 'npm', label: 'npm' },
+  { id: 'pnpm', label: 'pnpm' },
+  { id: 'yarn', label: 'yarn' },
+  { id: 'bun', label: 'bun' },
+];
+---
+
+<div class={`package-install-tabs ${className}`.trim()} data-package={packageName}>
+  <p class="package-install-tabs__hint">Choose your package manager — click a tab to select, then copy the command.</p>
+  <Tabs tabs={tabs} defaultTab={defaultTab} id={`pkg-tabs-${packageName.replace(/\s+/g, '-')}`} class="package-install-tabs__tabs">
+    <div class="package-install-tabs__panel">
+      <CodeBlock code={commands.npm} language="bash" />
+    </div>
+    <div class="package-install-tabs__panel">
+      <CodeBlock code={commands.pnpm} language="bash" />
+    </div>
+    <div class="package-install-tabs__panel">
+      <CodeBlock code={commands.yarn} language="bash" />
+    </div>
+    <div class="package-install-tabs__panel">
+      <CodeBlock code={commands.bun} language="bash" />
+    </div>
+  </Tabs>
+</div>
+
+<style>
+  .package-install-tabs {
+    margin: var(--spacing-2) 0;
+  }
+  .package-install-tabs__hint {
+    font-size: var(--font-size-sm);
+    color: var(--text-dim);
+    margin-bottom: var(--spacing-1);
+  }
+  .package-install-tabs__tabs {
+    margin-top: 0;
+  }
+  .package-install-tabs :global(.tabs__list) {
+    overflow-x: visible;
+    overflow-y: visible;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    margin-bottom: var(--spacing-2);
+  }
+  .package-install-tabs :global(.tabs__list)::-webkit-scrollbar {
+    display: none;
+  }
+  .package-install-tabs :global(.tabs__panel) {
+    padding: 0;
+    min-height: 0;
+  }
+  .package-install-tabs__panel {
+    padding-top: var(--spacing-1);
+  }
+  .package-install-tabs__panel :global(.code-block) {
+    margin: 0;
+  }
+  .package-install-tabs__panel :global(.code-block__header) {
+    padding: var(--spacing-1) var(--spacing-2);
+  }
+  .package-install-tabs__panel :global(.code-block pre) {
+    padding: var(--spacing-2);
+  }
+</style>

package/scaffold/astro-app/src/components/ThemeIcon.astro

@@ -0,0 +1,50 @@
+---
+import type { ThemeIconKey } from '../config/themes';
+import { ALL_THEMES } from '../config/themes';
+import Owl from './icons/Owl.astro';
+import Palette from './icons/Palette.astro';
+import Flame from './icons/Flame.astro';
+import Sunset from './icons/Sunset.astro';
+import Zap from './icons/Zap.astro';
+import Shield from './icons/Shield.astro';
+import Heart from './icons/Heart.astro';
+import Sun from './icons/Sun.astro';
+import Cake from './icons/Cake.astro';
+import Lemon from './icons/Lemon.astro';
+import Rainbow from './icons/Rainbow.astro';
+import Leaf from './icons/Leaf.astro';
+import Cherry from './icons/Cherry.astro';
+import Brush from './icons/Brush.astro';
+
+const iconMap: Record<ThemeIconKey, typeof Owl> = {
+  gear: Owl, // fallback; theme pages don't use 'gear'
+  owl: Owl,
+  palette: Palette,
+  flame: Flame,
+  sunset: Sunset,
+  zap: Zap,
+  shield: Shield,
+  heart: Heart,
+  sun: Sun,
+  cake: Cake,
+  lemon: Lemon,
+  rainbow: Rainbow,
+  leaf: Leaf,
+  cherry: Cherry,
+  brush: Brush,
+};
+
+interface Props {
+  themeId: string;
+  size?: number;
+  class?: string;
+}
+
+const { themeId, size = 24, class: className = '' } = Astro.props;
+const theme = ALL_THEMES.find((t) => t.value === themeId);
+const IconComponent = theme ? iconMap[theme.iconKey] : null;
+---
+
+{IconComponent ? (
+  <IconComponent width={size} height={size} class={className} />
+) : null}

package/scaffold/astro-app/src/pages/components/theme-switcher.astro

@@ -63,6 +63,7 @@ import ThemeSwitcher from '../../components/ThemeSwitcher.astro';
 			<li>Constants: <code>THEME_SYSTEM</code>, <code>DEFAULT_THEME_DARK</code>, <code>DEFAULT_THEME_LIGHT</code>.</li>
 		</ul>
 		<p><strong>Theme IDs:</strong> Run <code>npx rizzo-css theme</code> to list all 14 ids, or see <a href="/docs/theming#available-themes">Theming – Available themes</a>. To sync a custom UI when the theme changes elsewhere, listen for the <code>rizzo-theme-change</code> event.</p>
+		<p><strong>ThemeIcon:</strong> To show the same icon as the switcher elsewhere (e.g. theme pages, cards), use <strong>Astro</strong> <code>&lt;ThemeIcon themeId="github-dark-classic" size={24} /&gt;</code> or <strong>Svelte</strong> <code>&lt;ThemeIcon themeId="github-dark-classic" size={24} /&gt;</code>. Props: <code>themeId</code>, optional <code>size</code> (default 24), optional <code>class</code>. Vanilla: use the icon SVGs from the Icons section and map theme id to icon via <code>themes.ts</code> <code>iconKey</code>.</p>
 		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/theme-switcher">Svelte</a> (live Svelte component) · <a href="/docs/vanilla/components/theme-switcher">Vanilla</a> (live example + copyable HTML). Or use theme utilities (<code>applyTheme</code>, <code>getThemeLabel</code>) and see <a href="/docs/theming#building-your-own-theme-switcher">Building your own theme switcher</a>.</p>
 	</section>
 </DocsLayout>

package/scaffold/svelte/ThemeIcon.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  interface Props {
+    themeId: string;
+    size?: number;
+    class?: string;
+  }
+
+  let { themeId, size = 24, class: className = '' }: Props = $props();
+
+  /** Same icon SVGs as ThemeSwitcher (one per theme). */
+  const THEME_ICON_SVG: Record<string, string> = {
+    'github-dark-classic':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 7h.01" /><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20" /><path d="m20 7 2 .5-2 .5" /><path d="M10 18v3" /><path d="M14 17.75V21" /><path d="M7 18a6 6 0 0 0 3.84-10.61" /></svg>',
+    'github-light':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" /></svg>',
+    'red-velvet-cupcake':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" /><path d="M4 16s1-1 4-1 5 2 8 2 4-1 4-1V4" /><path d="M2 16v4M22 16v4M8 8h.01M16 8h.01M8 12h.01M16 12h.01" /></svg>',
+    'orangy-one-light':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.5 6.5c.5-2.5 2.5-4 5-4 1.5 0 2.5.5 3 1" /><path d="M12 12c-2 2-3 4-3 6 0 3 2 5 5 5 2 0 4-1 6-3" /><path d="M18 12c2 2 3 4 3 6 0 3-2 5-5 5-2 0-4-1-6-3" /></svg>',
+    sunflower:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 17a10 10 0 0 0-20 0" /><path d="M6 17a6 6 0 0 1 12 0" /><path d="M10 17a2 2 0 0 1 4 0" /></svg>',
+    'shades-of-purple':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/><path d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>',
+    'sandstorm-classic':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" /></svg>',
+    'rocky-blood-orange':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 10V2M4.93 10.93l1.41 1.41M2 18h2M20 18h2M17.66 10.93l1.41-1.41M22 22H2M8 6l4-4 4 4M16 18a4 4 0 0 0-8 0" /><path d="M12 22v-4" /></svg>',
+    'minimal-dark-neon-yellow':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" /></svg>',
+    'hack-the-box':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>',
+    'green-breeze-light':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg>',
+    'pink-cat-boo':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>',
+    'cute-pink':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M15 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M12 8v4M10 10l-2 2M14 10l2 2" /></svg>',
+    'semi-light-purple':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" /><path d="M7.87 14.14c-.32.32-.67.68-1.06 1.06a5.04 5.04 0 0 1-2.17 1.22c-.47.15-.85.2-1.15.2-.16 0-.3-.02-.41-.03a1 1 0 0 1-.63-.97c-.01-.14.02-.31.07-.51.1-.41.3-.95.6-1.59.3-.64.67-1.33 1.08-2.05" /></svg>',
+  };
+
+  const iconSvg = $derived(THEME_ICON_SVG[themeId] ?? null);
+  const sizedSvg = $derived(
+    iconSvg
+      ? iconSvg.replace(/width="16"/, `width="${size}"`).replace(/height="16"/, `height="${size}"`)
+      : null
+  );
+</script>
+
+{#if sizedSvg}
+  <span class={className} style="display: inline-flex; vertical-align: middle;">
+    {@html sizedSvg}
+  </span>
+{/if}

package/scaffold/svelte/index.ts

@@ -31,3 +31,5 @@ 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';
+export { default as ThemeIcon } from './ThemeIcon.svelte';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/scaffold/svelte-app/src/lib/rizzo/ThemeIcon.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  interface Props {
+    themeId: string;
+    size?: number;
+    class?: string;
+  }
+
+  let { themeId, size = 24, class: className = '' }: Props = $props();
+
+  /** Same icon SVGs as ThemeSwitcher (one per theme). */
+  const THEME_ICON_SVG: Record<string, string> = {
+    'github-dark-classic':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 7h.01" /><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20" /><path d="m20 7 2 .5-2 .5" /><path d="M10 18v3" /><path d="M14 17.75V21" /><path d="M7 18a6 6 0 0 0 3.84-10.61" /></svg>',
+    'github-light':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" /></svg>',
+    'red-velvet-cupcake':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" /><path d="M4 16s1-1 4-1 5 2 8 2 4-1 4-1V4" /><path d="M2 16v4M22 16v4M8 8h.01M16 8h.01M8 12h.01M16 12h.01" /></svg>',
+    'orangy-one-light':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.5 6.5c.5-2.5 2.5-4 5-4 1.5 0 2.5.5 3 1" /><path d="M12 12c-2 2-3 4-3 6 0 3 2 5 5 5 2 0 4-1 6-3" /><path d="M18 12c2 2 3 4 3 6 0 3-2 5-5 5-2 0-4-1-6-3" /></svg>',
+    sunflower:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 17a10 10 0 0 0-20 0" /><path d="M6 17a6 6 0 0 1 12 0" /><path d="M10 17a2 2 0 0 1 4 0" /></svg>',
+    'shades-of-purple':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/><path d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>',
+    'sandstorm-classic':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" /></svg>',
+    'rocky-blood-orange':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 10V2M4.93 10.93l1.41 1.41M2 18h2M20 18h2M17.66 10.93l1.41-1.41M22 22H2M8 6l4-4 4 4M16 18a4 4 0 0 0-8 0" /><path d="M12 22v-4" /></svg>',
+    'minimal-dark-neon-yellow':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" /></svg>',
+    'hack-the-box':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>',
+    'green-breeze-light':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg>',
+    'pink-cat-boo':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>',
+    'cute-pink':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M15 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M12 8v4M10 10l-2 2M14 10l2 2" /></svg>',
+    'semi-light-purple':
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" /><path d="M7.87 14.14c-.32.32-.67.68-1.06 1.06a5.04 5.04 0 0 1-2.17 1.22c-.47.15-.85.2-1.15.2-.16 0-.3-.02-.41-.03a1 1 0 0 1-.63-.97c-.01-.14.02-.31.07-.51.1-.41.3-.95.6-1.59.3-.64.67-1.33 1.08-2.05" /></svg>',
+  };
+
+  const iconSvg = $derived(THEME_ICON_SVG[themeId] ?? null);
+  const sizedSvg = $derived(
+    iconSvg
+      ? iconSvg.replace(/width="16"/, `width="${size}"`).replace(/height="16"/, `height="${size}"`)
+      : null
+  );
+</script>
+
+{#if sizedSvg}
+  <span class={className} style="display: inline-flex; vertical-align: middle;">
+    {@html sizedSvg}
+  </span>
+{/if}

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

@@ -31,3 +31,5 @@ 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';
+export { default as ThemeIcon } from './ThemeIcon.svelte';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import ThemeSwitcher from '$lib/rizzo/ThemeSwitcher.svelte';
+  import ThemeIcon from '$lib/rizzo/ThemeIcon.svelte';
   import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
 </script>
 
@@ -55,6 +56,13 @@
   </ul>
   <p>Theme IDs: run <code>npx rizzo-css theme</code> or see <a href="/docs/theming#available-themes">Theming – Available themes</a>. Listen for <code>rizzo-theme-change</code> to sync other UI when the theme changes.</p>
 
+  <h3>ThemeIcon</h3>
+  <p>To show the same icon as the switcher elsewhere (e.g. theme pages, cards), use <code>&lt;ThemeIcon themeId="github-dark-classic" size={24} /&gt;</code>. Props: <code>themeId</code>, optional <code>size</code> (default 24), optional <code>class</code>.</p>
+  <div class="example">
+    <div class="example-title">Example: theme icons</div>
+    <p><ThemeIcon themeId="github-dark-classic" size={24} /> GitHub Dark Classic · <ThemeIcon themeId="sunflower" size={20} /> Sunflower · <ThemeIcon themeId="shades-of-purple" size={28} /> Shades of Purple</p>
+  </div>
+
   <h3>Structure example (simplified)</h3>
   <CodeBlock
     code={`<div class="theme-switcher" data-theme-switcher>

package/scaffold/vanilla/README.md

@@ -13,7 +13,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.15`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.17`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/copy-to-clipboard.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -176,6 +176,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -198,6 +206,14 @@
 
 
 
+
+
+
+
+
+
+
+