rizzo-css 0.0.12 → 0.0.13

package/.env.example

@@ -0,0 +1,12 @@
+# Optional: used only if you add search (e.g. Algolia) to a scaffold-based project
+# Copy to .env in your project and replace with your own values
+
+# Public (client-side) — safe to expose in the browser
+PUBLIC_ALGOLIA_APP_ID=your-algolia-app-id
+PUBLIC_ALGOLIA_SEARCH_KEY=your-search-only-api-key
+PUBLIC_ALGOLIA_INDEX_NAME=your-index-name
+
+# Private (server-side only) — do not commit or expose
+ALGOLIA_APP_ID=your-algolia-app-id
+ALGOLIA_ADMIN_KEY=your-admin-api-key
+ALGOLIA_INDEX_NAME=your-index-name

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mingleusa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -12,7 +12,7 @@ pnpm add rizzo-css
 yarn add rizzo-css
 ```
 
-**Quick start (no install):** `npx rizzo-css init` — first choose **add to existing project** or **create new**. Existing: framework (auto-detect), themes, optional components. New: scaffold (Vanilla example, default Astro app, or default Svelte app; CLI colors: Vanilla = yellow, Astro = orange, Svelte = orange-red). All get the **same CSS and component styles**. To use the **official Svelte or Astro scaffold** plus Rizzo CSS, create the app with their CLI first, then run `npx rizzo-css add`:
+**Quick start (no install):** `npx rizzo-css init` — first choose **framework** (Vanilla, Astro, or Svelte), then **add to existing** or **create new**. Existing: themes, optional components. New: full scaffold (CLI colors: Vanilla = yellow, Astro = orange, Svelte = orange-red). All get the **same CSS and component styles**. To use the **official Svelte or Astro scaffold** plus Rizzo CSS, create the app with their CLI first, then run `npx rizzo-css add`:
 
 ```bash
 npm create svelte@latest my-app && cd my-app && npx rizzo-css add
@@ -31,7 +31,17 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
 | **Astro** | `npm install rizzo-css` | `import 'rizzo-css'` in layout or link from `public/` | Copy components from `node_modules/rizzo-css/scaffold/astro/` or use `npx rizzo-css add` with components |
 | **Svelte** | `npm install rizzo-css` | `import 'rizzo-css'` in root layout or link from `static/` | Copy components from `node_modules/rizzo-css/scaffold/svelte/` or use `npx rizzo-css add` with components |
 
-Scaffolds (full starter apps) are in the package: `scaffold/vanilla/`, `scaffold/astro-app/`, `scaffold/svelte-app/`. Use `npx rizzo-css init` and choose “Create new” to generate a project from one of them; each scaffold folder has a README with setup and commands.
+**CSS paths (CLI and scaffolds):**
+
+| Framework | Where the CLI copies CSS | `<link href="...">` in your HTML/layout |
+|-----------|-------------------------|----------------------------------------|
+| **Vanilla** | `css/rizzo.min.css` (project root) | `css/rizzo.min.css` (relative) |
+| **Astro** | `public/css/rizzo.min.css` | `/css/rizzo.min.css` (Astro serves `public/` at `/`) |
+| **Svelte** | `static/css/rizzo.min.css` | `/css/rizzo.min.css` (SvelteKit serves `static/` at `/`) |
+
+With `npx rizzo-css add --path <dir>`, the CLI still suggests the correct href for your framework (e.g. Astro/Svelte get a leading `/` path).
+
+Scaffolds (full starter apps) are in the package: `scaffold/vanilla/`, `scaffold/astro-app/`, `scaffold/svelte-app/`. Use `npx rizzo-css init` and choose **Create new project** to get the full clone (navbar/chrome + component showcase) for the chosen framework. **Add to existing** only adds the CSS and optional components (no full scaffold). Each scaffold folder has a README with setup and instructions for editing the cloned site.
 
 ## Use
 
@@ -46,7 +56,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.12 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.13 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->
@@ -71,6 +81,10 @@ Theme IDs and full docs: [Theming](https://rizzo-css.vercel.app/docs/theming).
 
 Full documentation: **[rizzo-css.vercel.app](https://rizzo-css.vercel.app)** — Getting Started, Components, Themes, and usage for Vanilla, Astro, and Svelte.
 
+## Package contents
+
+In addition to `dist/`, `bin/`, and `scaffold/`, the package includes **LICENSE** (MIT) and **.env.example** (optional; for projects that add search, e.g. Algolia — copy to `.env` and set your own values).
+
 ## License
 
 MIT

package/bin/rizzo-css.js

@@ -6,15 +6,18 @@ const readline = require('readline');
 
 const COMMANDS = ['init', 'add', 'theme', 'help'];
 const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
-const THEMES = [
+// Dark and light themes (order matches scaffold optgroups and config/themes.ts)
+const DARK_THEMES = [
   'github-dark-classic',
-  'github-light',
   'shades-of-purple',
   'sandstorm-classic',
   'rocky-blood-orange',
   'minimal-dark-neon-yellow',
   'hack-the-box',
   'pink-cat-boo',
+];
+const LIGHT_THEMES = [
+  'github-light',
   'red-velvet-cupcake',
   'orangy-one-light',
   'sunflower',
@@ -22,6 +25,7 @@ const THEMES = [
   'cute-pink',
   'semi-light-purple',
 ];
+const THEMES = [...DARK_THEMES, ...LIGHT_THEMES];
 // Components available for scaffold (must match scaffold/svelte and scaffold/astro)
 const SVELTE_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
@@ -336,7 +340,7 @@ Usage:
   npx rizzo-css <command> [options]
 
 Commands:
-  init    Add Rizzo to existing project or scaffold new one (first menu: existing vs new)
+  init    Add Rizzo to existing project or scaffold new one (first: framework, then existing vs new)
   add     Copy Rizzo CSS into the current project (auto-detects Svelte/Astro)
   theme   List all available themes (use in init or set data-theme on <html>)
   help    Show this help
@@ -360,11 +364,35 @@ Docs: https://rizzo-css.vercel.app
 }
 
 function cmdTheme() {
-  process.stdout.write('\nAvailable themes (set data-theme on <html>):\n\n');
-  THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
+  process.stdout.write('\nDark themes (set data-theme on <html>):\n');
+  DARK_THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
+  process.stdout.write('\nLight themes:\n');
+  LIGHT_THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
   process.stdout.write('\nExample: <html lang="en" data-theme="github-dark-classic">\n\n');
 }
 
+/** Prompt for default dark theme, default light theme, and initial theme. Returns { theme, defaultDark, defaultLight }. */
+async function promptThemes() {
+  const defaultDark = await selectMenu(
+    DARK_THEMES.map((t) => ({ value: t, label: t })),
+    '? Default dark theme (used when system preference is dark)'
+  );
+  const defaultLight = await selectMenu(
+    LIGHT_THEMES.map((t) => ({ value: t, label: t })),
+    '? Default light theme (used when system preference is light)'
+  );
+  const initialChoice = await selectMenu(
+    [
+      { value: 'system', label: 'System (follow OS light/dark)' },
+      { value: defaultDark, label: defaultDark + ' (dark)' },
+      { value: defaultLight, label: defaultLight + ' (light)' },
+    ],
+    '? Initial theme on first load'
+  );
+  const theme = initialChoice;
+  return { theme, defaultDark: DARK_THEMES.includes(defaultDark) ? defaultDark : DARK_THEMES[0], defaultLight: LIGHT_THEMES.includes(defaultLight) ? defaultLight : LIGHT_THEMES[0] };
+}
+
 /** Detect framework from cwd: "svelte" | "astro" | null. */
 function detectFramework(cwd) {
   if (existsSync(join(cwd, 'svelte.config.js')) || existsSync(join(cwd, 'svelte.config.ts'))) return 'svelte';
@@ -386,6 +414,24 @@ function getFrameworkCssPaths(framework) {
   return { targetDir: 'css', linkHref: 'css/rizzo.min.css' };
 }
 
+/**
+ * Browser-visible href for the CSS file. Astro serves public/ at /, SvelteKit serves static/ at /.
+ * Use this when a custom --path is provided so we tell the user the correct <link href="...">.
+ */
+function getLinkHrefForTargetDir(framework, targetDir) {
+  const file = 'rizzo.min.css';
+  if (framework === 'astro' && targetDir) {
+    const path = targetDir.replace(/^public\/?/, '').replace(/\/+$/, '') || 'css';
+    return '/' + (path ? path + '/' : '') + file;
+  }
+  if (framework === 'svelte' && targetDir) {
+    const path = targetDir.replace(/^static\/?/, '').replace(/\/+$/, '') || 'css';
+    return '/' + (path ? path + '/' : '') + file;
+  }
+  const base = targetDir ? targetDir.replace(/\/+$/, '') : 'css';
+  return base ? base + '/' + file : file;
+}
+
 function cmdAdd(argv) {
   const pathIdx = argv.indexOf('--path');
   const customPath = pathIdx !== -1 && argv[pathIdx + 1] ? argv[pathIdx + 1] : null;
@@ -407,7 +453,7 @@ function cmdAdd(argv) {
 
   mkdirSync(join(cwd, targetDir), { recursive: true });
   copyFileSync(cssSource, targetFile);
-  const linkHref = customPath ? customPath + '/rizzo.min.css' : paths.linkHref;
+  const linkHref = customPath ? getLinkHrefForTargetDir(framework, targetDir) : paths.linkHref;
   console.log('\n✓ Rizzo CSS copied to ' + targetFile);
   if (framework === 'svelte') {
     console.log('\nDetected Svelte/SvelteKit. Add to your root layout (e.g. src/app.html):\n');
@@ -582,26 +628,25 @@ function copyAstroComponents(projectDir, selectedNames) {
   }
 }
 
-/** Add Rizzo CSS (and optional components) to an existing project in cwd. */
-async function runAddToExisting() {
+/** Add Rizzo CSS (and optional components) to an existing project in cwd. frameworkOverride: when set (from init), skip framework prompt. */
+async function runAddToExisting(frameworkOverride) {
   const cwd = process.cwd();
-  const detected = detectFramework(cwd);
-  const frameworkOptions = [
-    { value: 'vanilla', label: 'Vanilla JS (HTML + CSS)', color: C.vanilla },
-    { value: 'astro', label: 'Astro', color: C.astro },
-    { value: 'svelte', label: 'Svelte', color: C.svelte },
-  ];
-  let frameworkPrompt = '? Framework';
-  if (detected) {
-    frameworkPrompt += ' (detected: ' + detected + ' — pick to confirm or choose another)';
-  }
-  const framework = await selectMenu(frameworkOptions, frameworkPrompt);
-
-  const defaultTheme = await selectMenu(
-    THEMES.map((t) => ({ value: t, label: t })),
-    '? Default theme (all 14 themes are included in the CSS; this sets the initial data-theme)'
-  );
-  const theme = THEMES.includes(defaultTheme) ? defaultTheme : THEMES[0];
+  let framework = frameworkOverride;
+  if (framework == null) {
+    const detected = detectFramework(cwd);
+    const frameworkOptions = [
+      { value: 'vanilla', label: 'Vanilla JS (HTML + CSS)', color: C.vanilla },
+      { value: 'astro', label: 'Astro', color: C.astro },
+      { value: 'svelte', label: 'Svelte', color: C.svelte },
+    ];
+    let frameworkPrompt = '? Framework';
+    if (detected) {
+      frameworkPrompt += ' (detected: ' + detected + ' — pick to confirm or choose another)';
+    }
+    framework = await selectMenu(frameworkOptions, frameworkPrompt);
+  }
+
+  const { theme, defaultDark, defaultLight } = await promptThemes();
 
   let selectedComponents = [];
   const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
@@ -652,6 +697,7 @@ async function runAddToExisting() {
     console.log('\nAdd to your root layout (e.g. src/app.html):');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
     console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    console.log('  For theme "system": default dark ' + defaultDark + ', default light ' + defaultLight);
     if (selectedComponents.length > 0) {
       console.log('  Components are in src/lib/rizzo — import from \'$lib/rizzo\'.');
     }
@@ -659,6 +705,7 @@ async function runAddToExisting() {
     console.log('\nAdd to your layout (e.g. src/layouts/Layout.astro):');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
     console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    console.log('  For theme "system": default dark ' + defaultDark + ', default light ' + defaultLight);
     if (selectedComponents.length > 0) {
       console.log('  Components are in src/components/rizzo — import from there.');
     }
@@ -666,21 +713,31 @@ async function runAddToExisting() {
     console.log('\nAdd to your HTML or layout:');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
     console.log('\nSet a theme on <html>: data-theme="' + theme + '" (see: npx rizzo-css theme)');
+    console.log('  For theme "system": default dark ' + defaultDark + ', default light ' + defaultLight);
   }
   console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
 
 async function cmdInit() {
+  const framework = await selectMenu(
+    [
+      { value: 'vanilla', label: 'Vanilla JS (HTML + CSS + same styles & components)', color: C.vanilla },
+      { value: 'astro', label: 'Astro', color: C.astro },
+      { value: 'svelte', label: 'Svelte', color: C.svelte },
+    ],
+    '? Framework — all get the same CSS and component styles'
+  );
+
   const initMode = await selectMenu(
     [
       { value: 'existing', label: 'Add to existing project (current directory)' },
       { value: 'new', label: 'Create new project (scaffold)' },
     ],
-    '? Are you using an existing project or creating a new one?'
+    '? Add to existing project or create a new one?'
   );
 
   if (initMode === 'existing') {
-    await runAddToExisting();
+    await runAddToExisting(framework);
     return;
   }
 
@@ -693,20 +750,7 @@ async function cmdInit() {
   );
   const name = projectChoice === 'name' ? await question('Project name (folder name): ') : '';
 
-  const framework = await selectMenu(
-    [
-      { value: 'vanilla', label: 'Vanilla JS (HTML + CSS + same styles & components)', color: C.vanilla },
-      { value: 'astro', label: 'Astro', color: C.astro },
-      { value: 'svelte', label: 'Svelte', color: C.svelte },
-    ],
-    '? Framework (arrows, Enter to select) — all get the same CSS and component styles'
-  );
-
-  const defaultTheme = await selectMenu(
-    THEMES.map((t) => ({ value: t, label: t })),
-    '? Default theme (all 14 themes are included in the CSS; this sets the initial data-theme)'
-  );
-  const theme = THEMES.includes(defaultTheme) ? defaultTheme : THEMES[0];
+  const { theme, defaultDark, defaultLight } = await promptThemes();
 
   let selectedComponents = [];
   const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
@@ -739,12 +783,14 @@ async function cmdInit() {
     process.exit(1);
   }
 
-  const themeComment = '\n  <!-- Default theme: ' + theme + ' (all 14 themes included in CSS) -->';
+  const themeComment = '\n  <!-- Initial: ' + theme + '; dark: ' + defaultDark + '; light: ' + defaultLight + ' (all 14 themes in CSS) -->';
   const projectNamePkg = name
     ? name.replace(/\s+/g, '-').toLowerCase()
     : (framework === 'astro' ? 'my-astro-app' : framework === 'svelte' ? 'my-svelte-app' : 'my-app');
   const replacements = {
     '{{DATA_THEME}}': theme,
+    '{{DEFAULT_DARK}}': defaultDark,
+    '{{DEFAULT_LIGHT}}': defaultLight,
     '{{THEME_LIST_COMMENT}}': themeComment,
     '{{TITLE}}': name || 'App',
     '{{PROJECT_NAME}}': projectNamePkg,
@@ -798,6 +844,8 @@ async function cmdInit() {
       let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
       indexHtml = indexHtml
         .replace(/\{\{DATA_THEME\}\}/g, theme)
+        .replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark)
+        .replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight)
         .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
         .replace(/\{\{TITLE\}\}/g, name || 'App')
         .replace(/\{\{LINK_HREF\}\}/g, linkHref);
@@ -828,7 +876,9 @@ async function cmdInit() {
       const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
       if (existsSync(vanillaJs)) {
         mkdirSync(join(projectDir, 'js'), { recursive: true });
-        copyFileSync(vanillaJs, join(projectDir, 'js', 'main.js'));
+        let mainJs = readFileSync(vanillaJs, 'utf8');
+        mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
+        writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
       }
     }
     if (framework === 'svelte' && selectedComponents.length > 0) {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "scripts": {
-    "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js"
+    "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js && node scripts/prepare-astro-scaffold.js && node scripts/prepare-vanilla-scaffold.js && node scripts/prepare-svelte-scaffold.js"
   },
   "description": "A modern CSS design system with semantic theming, 14 themes, and accessible components (BEM). Use with Astro, Svelte, or any framework.",
   "style": "dist/rizzo.min.css",
@@ -22,6 +22,8 @@
   "files": [
     "dist",
     "README.md",
+    "LICENSE",
+    ".env.example",
     "bin",
     "scaffold"
   ],
@@ -41,4 +43,4 @@
   "homepage": "https://rizzo-css.vercel.app",
   "license": "MIT",
   "author": "mingleusa"
-}
+}

package/scaffold/astro-app/README.md

@@ -1,6 +1,6 @@
 # Astro + Rizzo CSS
 
-This project was scaffolded with `npx rizzo-css init` (Astro).
+This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Astro. This full clone (navbar, docs pages, component showcase) is only generated for new projects; **Add to existing project** only adds the CSS and optional components.
 
 ## First-time setup
 
@@ -25,8 +25,19 @@ The theme selected during `rizzo-css init` is set in `src/layouts/Layout.astro`
 - `pnpm build` — Build for production
 - `pnpm preview` — Preview production build
 
+## Editing the cloned site
+
+- **Layout and shell** — `src/layouts/Layout.astro` (navbar, settings, theme script, CSS link). Change the default theme or title placeholders here.
+- **Docs and theme pages** — `src/pages/docs/` (getting-started, design-system, theming, themes, etc.). Each page uses `DocsLayout` and can be edited or replaced; stubs link to the main site for full content.
+- **Component showcase** — `src/pages/components.astro` (index) and `src/pages/components/*.astro`. Edit or add component demos; imports use `../../components/` and `../../layouts/`.
+- **Home page** — `src/pages/index.astro`. Replace the hero and links with your own content.
+- **Components and config** — `src/components/` (Navbar, Settings, Card, etc.) and `src/config/themes.ts`. Customize or remove components; update the nav in `Navbar.astro` if you add/remove routes.
+- **CSS** — The app loads `/css/rizzo.min.css` (from `public/css/`). Replace or add styles as needed.
+
+After editing, run `pnpm dev` to preview and `pnpm build` for production.
+
 ## Other scaffolds
 
-From the same **rizzo-css** package: **Vanilla** (`scaffold/vanilla/`) — single HTML file with Settings and toast; **Svelte** (`scaffold/svelte-app/`) — SvelteKit app. Use `npx rizzo-css init` and pick a different framework to create one of them.
+From the same **rizzo-css** package: **Vanilla** (`scaffold/vanilla/`) — index + component showcase (components/index.html, components/<slug>.html) with Settings and toast; **Svelte** (`scaffold/svelte-app/`) — SvelteKit app with /components and /components/[slug]. Use `npx rizzo-css init` and pick a different framework to create one of them.
 
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

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

@@ -0,0 +1,178 @@
+---
+import ChevronDown from './icons/ChevronDown.astro';
+
+interface AccordionItem {
+  id: string;
+  title: string;
+  content?: string;
+}
+
+interface Props {
+  items: AccordionItem[];
+  id?: string;
+  allowMultiple?: boolean;
+  defaultExpanded?: string | string[];
+  class?: string;
+}
+
+const {
+  items,
+  id,
+  allowMultiple = false,
+  defaultExpanded,
+  class: className = '',
+} = Astro.props;
+
+const accordionId = id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
+
+const getDefaultExpanded = (): Set<string> => {
+  if (defaultExpanded === undefined) return new Set(items[0] ? [items[0].id] : []);
+  if (typeof defaultExpanded === 'string') return new Set([defaultExpanded]);
+  return new Set(defaultExpanded);
+};
+
+const defaultOpenIds = getDefaultExpanded();
+const classes = `accordion ${className}`.trim();
+let slotIndex = 0;
+---
+
+<div class={classes} data-accordion={accordionId} data-allow-multiple={allowMultiple ? 'true' : 'false'}>
+  {items.map((item) => {
+    const triggerId = `${accordionId}-trigger-${item.id}`;
+    const panelId = `${accordionId}-panel-${item.id}`;
+    const isExpanded = defaultOpenIds.has(item.id);
+    const useSlot = !item.content;
+    const currentSlotIndex = useSlot ? slotIndex++ : -1;
+
+    return (
+      <div class="accordion__item" data-accordion-item data-item-id={item.id}>
+        <h3 class="accordion__heading">
+          <button
+            type="button"
+            class={`accordion__trigger ${isExpanded ? 'accordion__trigger--expanded' : ''}`}
+            id={triggerId}
+            aria-expanded={isExpanded}
+            aria-controls={panelId}
+            data-accordion-trigger
+          >
+            <span class="accordion__title">{item.title}</span>
+            <ChevronDown class="accordion__icon" width={16} height={16} aria-hidden="true" />
+          </button>
+        </h3>
+        <div
+          class={`accordion__panel ${isExpanded ? 'accordion__panel--expanded' : ''}`}
+          id={panelId}
+          role="region"
+          aria-labelledby={triggerId}
+          hidden={!isExpanded}
+          data-accordion-panel
+        >
+          <div class="accordion__panel-inner">
+            {item.content ? (
+              <div class="accordion__panel-content" set:html={item.content} />
+            ) : (
+              <div class="accordion__panel-content accordion__panel-slot" data-accordion-slot-index={currentSlotIndex}>
+                <!-- Slot content distributed by script -->
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  })}
+  <!-- Slot content for distribution (same order as items) -->
+  <div class="accordion__slot-content" style="display: none;">
+    <slot />
+  </div>
+</div>
+
+<script is:inline>
+  (function initAccordions() {
+    function initOne(accordion) {
+      if (accordion.dataset.accordionInit === 'true') return;
+      accordion.dataset.accordionInit = 'true';
+
+      const isMultiple = accordion.getAttribute('data-allow-multiple') === 'true';
+      const triggers = accordion.querySelectorAll('[data-accordion-trigger]');
+
+      const setExpanded = (trigger, expanded) => {
+        const panelId = trigger.getAttribute('aria-controls');
+        const panel = panelId ? accordion.querySelector('#' + CSS.escape(panelId)) : null;
+        trigger.setAttribute('aria-expanded', String(expanded));
+        trigger.classList.toggle('accordion__trigger--expanded', expanded);
+        if (panel) {
+          panel.classList.toggle('accordion__panel--expanded', expanded);
+          panel.hidden = !expanded;
+        }
+      };
+
+      const toggle = (trigger) => {
+        const expanded = trigger.getAttribute('aria-expanded') === 'true';
+        if (!isMultiple) {
+          triggers.forEach((t) => setExpanded(t, false));
+        }
+        setExpanded(trigger, !expanded);
+      };
+
+      triggers.forEach((trigger) => {
+        trigger.addEventListener('click', () => toggle(trigger));
+      });
+
+      triggers.forEach((trigger, index) => {
+        trigger.addEventListener('keydown', (e) => {
+          let targetIndex = index;
+          switch (e.key) {
+            case 'ArrowDown':
+              e.preventDefault();
+              targetIndex = Math.min(index + 1, triggers.length - 1);
+              break;
+            case 'ArrowUp':
+              e.preventDefault();
+              targetIndex = Math.max(index - 1, 0);
+              break;
+            case 'Home':
+              e.preventDefault();
+              targetIndex = 0;
+              break;
+            case 'End':
+              e.preventDefault();
+              targetIndex = triggers.length - 1;
+              break;
+            case 'Enter':
+            case ' ':
+              e.preventDefault();
+              toggle(trigger);
+              return;
+            default:
+              return;
+          }
+          if (targetIndex !== index) {
+            triggers[targetIndex].focus();
+          }
+        });
+      });
+
+      const slotContent = accordion.querySelector('.accordion__slot-content');
+      if (slotContent) {
+        const slotChildren = Array.from(slotContent.children);
+        slotChildren.forEach((child, index) => {
+          const slotPlaceholder = accordion.querySelector('[data-accordion-slot-index="' + index + '"]');
+          if (slotPlaceholder) {
+            slotPlaceholder.appendChild(child);
+          }
+        });
+        slotContent.remove();
+      }
+    }
+
+    function init() {
+      document.querySelectorAll('[data-accordion]').forEach(initOne);
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
+</script>