npm - rizzo-css - Versions diffs - 0.0.1 → 0.0.2 - Mend

rizzo-css 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/README.md +13 -7
package/bin/rizzo-css.js +303 -0
package/package.json +12 -4
package/scaffold/astro/Accordion.astro +178 -0
package/scaffold/astro/Alert.astro +131 -0
package/scaffold/astro/Avatar.astro +59 -0
package/scaffold/astro/Badge.astro +24 -0
package/scaffold/astro/Breadcrumb.astro +61 -0
package/scaffold/astro/Button.astro +3 -0
package/scaffold/astro/Card.astro +18 -0
package/scaffold/astro/Checkbox.astro +38 -0
package/scaffold/astro/CopyToClipboard.astro +199 -0
package/scaffold/astro/Divider.astro +37 -0
package/scaffold/astro/Dropdown.astro +807 -0
package/scaffold/astro/FormGroup.astro +51 -0
package/scaffold/astro/Input.astro +59 -0
package/scaffold/astro/Modal.astro +212 -0
package/scaffold/astro/Pagination.astro +240 -0
package/scaffold/astro/ProgressBar.astro +65 -0
package/scaffold/astro/Radio.astro +38 -0
package/scaffold/astro/Select.astro +49 -0
package/scaffold/astro/Spinner.astro +30 -0
package/scaffold/astro/Table.astro +181 -0
package/scaffold/astro/Tabs.astro +223 -0
package/scaffold/astro/Textarea.astro +58 -0
package/scaffold/astro/Toast.astro +30 -0
package/scaffold/astro/Tooltip.astro +32 -0
package/scaffold/astro/icons/Brush.astro +11 -0
package/scaffold/astro/icons/Cake.astro +12 -0
package/scaffold/astro/icons/Check.astro +30 -0
package/scaffold/astro/icons/Cherry.astro +12 -0
package/scaffold/astro/icons/ChevronDown.astro +30 -0
package/scaffold/astro/icons/Circle.astro +30 -0
package/scaffold/astro/icons/Close.astro +31 -0
package/scaffold/astro/icons/Copy.astro +31 -0
package/scaffold/astro/icons/Eye.astro +31 -0
package/scaffold/astro/icons/Filter.astro +30 -0
package/scaffold/astro/icons/Flame.astro +29 -0
package/scaffold/astro/icons/Flower.astro +12 -0
package/scaffold/astro/icons/Gear.astro +31 -0
package/scaffold/astro/icons/Heart.astro +29 -0
package/scaffold/astro/icons/IceCream.astro +32 -0
package/scaffold/astro/icons/Leaf.astro +30 -0
package/scaffold/astro/icons/Lemon.astro +12 -0
package/scaffold/astro/icons/Moon.astro +30 -0
package/scaffold/astro/icons/Owl.astro +35 -0
package/scaffold/astro/icons/Palette.astro +34 -0
package/scaffold/astro/icons/Rainbow.astro +32 -0
package/scaffold/astro/icons/Search.astro +31 -0
package/scaffold/astro/icons/Shield.astro +29 -0
package/scaffold/astro/icons/Snowflake.astro +35 -0
package/scaffold/astro/icons/Sort.astro +31 -0
package/scaffold/astro/icons/Sun.astro +30 -0
package/scaffold/astro/icons/Sunset.astro +11 -0
package/scaffold/astro/icons/Zap.astro +10 -0
package/scaffold/astro/icons/devicons/Astro.astro +54 -0
package/scaffold/astro/icons/devicons/Bash.astro +35 -0
package/scaffold/astro/icons/devicons/Css3.astro +30 -0
package/scaffold/astro/icons/devicons/Git.astro +25 -0
package/scaffold/astro/icons/devicons/Html5.astro +28 -0
package/scaffold/astro/icons/devicons/Javascript.astro +26 -0
package/scaffold/astro/icons/devicons/Nodejs.astro +48 -0
package/scaffold/astro/icons/devicons/Plaintext.astro +34 -0
package/scaffold/svelte/.gitkeep +0 -0
package/scaffold/svelte/Accordion.svelte +128 -0
package/scaffold/svelte/Alert.svelte +79 -0
package/scaffold/svelte/Avatar.svelte +39 -0
package/scaffold/svelte/Badge.svelte +31 -0
package/scaffold/svelte/Breadcrumb.svelte +46 -0
package/scaffold/svelte/Button.svelte +23 -0
package/scaffold/svelte/Card.svelte +14 -0
package/scaffold/svelte/Checkbox.svelte +37 -0
package/scaffold/svelte/CopyToClipboard.svelte +76 -0
package/scaffold/svelte/Divider.svelte +28 -0
package/scaffold/svelte/Dropdown.svelte +237 -0
package/scaffold/svelte/FormGroup.svelte +41 -0
package/scaffold/svelte/Input.svelte +57 -0
package/scaffold/svelte/Modal.svelte +152 -0
package/scaffold/svelte/Pagination.svelte +93 -0
package/scaffold/svelte/ProgressBar.svelte +56 -0
package/scaffold/svelte/Radio.svelte +38 -0
package/scaffold/svelte/Select.svelte +47 -0
package/scaffold/svelte/Spinner.svelte +14 -0
package/scaffold/svelte/Table.svelte +155 -0
package/scaffold/svelte/Tabs.svelte +109 -0
package/scaffold/svelte/Textarea.svelte +57 -0
package/scaffold/svelte/Toast.svelte +30 -0
package/scaffold/svelte/Tooltip.svelte +19 -0
package/scaffold/svelte/index.ts +33 -0

package/README.md CHANGED Viewed

@@ -12,23 +12,29 @@ pnpm add rizzo-css
 yarn add rizzo-css
 ```
+**Quick start (no install):** `npx rizzo-css init` scaffolds a project (prompts for framework and optional Astro/Svelte components). `npx rizzo-css add` copies the CSS into the current project. `npx rizzo-css theme` lists themes.
 ## Use
-Import the built CSS once in your app (e.g. root layout or main entry):
+Import or link the CSS **once** in your app (e.g. root layout or main entry).
-**In a bundler (Vite, Astro, etc.):**
+**With a bundler (Vite, Astro, webpack, etc.):**
 ```js
 import 'rizzo-css';
 ```
-**In HTML:**
+**Without a bundler (plain HTML):** Use a CDN (unpkg and jsDelivr both serve the package automatically):
 ```html
-<link rel="stylesheet" href="node_modules/rizzo-css/dist/rizzo.min.css" />
+<!-- unpkg -->
+<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest" />
+<!-- or jsDelivr -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rizzo-css@latest" />
 ```
-Then use the same class names and HTML structure as the [component docs](https://github.com/mingleusa/rizzo-css/tree/main/docs#components). For Astro or Svelte, you can copy the reference components from the [repo](https://github.com/mingleusa/rizzo-css).
+Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). For Astro or Svelte, reference components and examples are in the [documentation](https://rizzo-css.vercel.app/docs/getting-started).
 ## Themes
@@ -38,11 +44,11 @@ Set the theme via `data-theme` on `<html>`:
 <html lang="en" data-theme="github-dark-classic">
 ```
-Theme IDs and full docs: [Theming](https://github.com/mingleusa/rizzo-css/blob/main/docs/THEMING.md).
+Theme IDs and full docs: [Theming](https://rizzo-css.vercel.app/docs/theming).
 ## Docs
-Full documentation (components, theming, usage in Astro/Svelte): **[Getting Started](https://github.com/mingleusa/rizzo-css/blob/main/docs/GETTING_STARTED.md#using-rizzo-in-your-project)** in the repo.
+Full documentation: **[rizzo-css.vercel.app](https://rizzo-css.vercel.app)** — Getting Started, Components, Themes, and usage for Astro & Svelte.
 ## License

package/bin/rizzo-css.js ADDED Viewed

@@ -0,0 +1,303 @@
+#!/usr/bin/env node
+const { copyFileSync, mkdirSync, writeFileSync, existsSync, readFileSync, readdirSync } = require('fs');
+const { join, dirname } = require('path');
+const readline = require('readline');
+const COMMANDS = ['init', 'add', 'theme', 'help'];
+const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
+const THEMES = [
+  'github-dark-classic',
+  'github-light',
+  'shades-of-purple',
+  'sandstorm-classic',
+  'rocky-blood-orange',
+  'minimal-dark-neon-yellow',
+  'hack-the-box',
+  'pink-cat-boo',
+  'red-velvet-cupcake',
+  'orangy-one-light',
+  'sunflower',
+  'green-breeze-light',
+  'cute-pink',
+  'semi-light-purple',
+];
+// Components available for scaffold (must match scaffold/svelte and scaffold/astro)
+const SVELTE_COMPONENTS = [
+  'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
+  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
+  'Modal', 'Toast', 'Table',
+];
+const ASTRO_COMPONENTS = [
+  'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
+  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
+  'Modal', 'Toast', 'Table',
+];
+// Resolve path to this package (works when run via npx or from repo)
+function getPackageRoot() {
+  return dirname(require.resolve('../package.json'));
+}
+function getCssPath() {
+  return join(getPackageRoot(), 'dist', 'rizzo.min.css');
+}
+function question(prompt) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(prompt, (answer) => {
+      rl.close();
+      resolve((answer || '').trim());
+    });
+  });
+}
+function printHelp() {
+  console.log(`
+rizzo-css CLI — Add Rizzo CSS to your project
+Usage:
+  npx rizzo-css <command> [options]
+Commands:
+  init    Scaffold a new project (prompts: name, framework, theme; Astro/Svelte: optional component picker)
+  add     Copy Rizzo CSS into the current project
+  theme   List available themes
+  help    Show this help
+Examples:
+  npx rizzo-css init
+  npx rizzo-css add
+  npx rizzo-css add --path public/css
+  npx rizzo-css theme
+Docs: https://rizzo-css.vercel.app
+`);
+}
+function cmdTheme() {
+  console.log('\nAvailable themes (set data-theme on <html>):\n');
+  THEMES.forEach((t) => console.log('  ' + t));
+  console.log('\nExample: <html lang="en" data-theme="github-dark-classic">\n');
+}
+function cmdAdd(argv) {
+  const pathIdx = argv.indexOf('--path');
+  const customPath = pathIdx !== -1 && argv[pathIdx + 1] ? argv[pathIdx + 1] : null;
+  const targetDir = customPath || 'css';
+  const targetFile = join(process.cwd(), targetDir, 'rizzo.min.css');
+  const cssSource = getCssPath();
+  if (!existsSync(cssSource)) {
+    console.error('Error: Rizzo CSS build not found. Run from repo root: pnpm build:css');
+    process.exit(1);
+  }
+  mkdirSync(join(process.cwd(), targetDir), { recursive: true });
+  copyFileSync(cssSource, targetFile);
+  const linkPath = targetDir + '/rizzo.min.css';
+  console.log('\n✓ Rizzo CSS copied to ' + targetFile);
+  console.log('\nAdd to your HTML or layout:\n');
+  console.log('  <link rel="stylesheet" href="' + linkPath + '" />');
+  console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)\n');
+}
+function parseComponentSelection(input, componentList, maxNum) {
+  const s = (input || '').trim().toLowerCase();
+  if (s === 'none' || s === 'n') return [];
+  if (s === 'all' || s === 'a') return componentList.slice();
+  const parts = s.split(/[\s,]+/).filter(Boolean);
+  const indices = new Set();
+  for (const p of parts) {
+    const n = parseInt(p, 10);
+    if (n >= 1 && n <= maxNum) indices.add(n - 1);
+  }
+  return indices.size === 0 ? [] : Array.from(indices).sort((a, b) => a - b).map((i) => componentList[i]);
+}
+function getScaffoldSvelteDir() {
+  return join(getPackageRoot(), 'scaffold', 'svelte');
+}
+function getScaffoldAstroDir() {
+  return join(getPackageRoot(), 'scaffold', 'astro');
+}
+function copyDirRecursive(src, dest) {
+  mkdirSync(dest, { recursive: true });
+  const entries = readdirSync(src, { withFileTypes: true });
+  for (const e of entries) {
+    const srcPath = join(src, e.name);
+    const destPath = join(dest, e.name);
+    if (e.isDirectory()) {
+      copyDirRecursive(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+function copySvelteComponents(projectDir, selectedNames) {
+  const scaffoldDir = getScaffoldSvelteDir();
+  if (!existsSync(scaffoldDir)) {
+    console.log('\n  Component templates not in this package; use CSS only or copy from repo: https://github.com/mingleusa/rizzo-css/tree/main/src/components/svelte');
+    return;
+  }
+  const files = readdirSync(scaffoldDir);
+  const available = files.filter((f) => f.endsWith('.svelte')).map((f) => f.replace('.svelte', ''));
+  const toCopy = selectedNames.filter((n) => available.includes(n));
+  if (toCopy.length === 0) {
+    console.log('\n  No matching component files in scaffold; use CSS only or copy from repo.');
+    return;
+  }
+  const targetDir = join(projectDir, 'src', 'lib', 'rizzo');
+  mkdirSync(targetDir, { recursive: true });
+  const exports = [];
+  for (const name of toCopy) {
+    const src = join(scaffoldDir, name + '.svelte');
+    if (existsSync(src)) {
+      copyFileSync(src, join(targetDir, name + '.svelte'));
+      exports.push(`export { default as ${name} } from './${name}.svelte';`);
+    }
+  }
+  if (exports.length > 0) {
+    const indexContent = `/** Rizzo CSS Svelte components — selected via npx rizzo-css init */\n${exports.join('\n')}\n`;
+    writeFileSync(join(targetDir, 'index.ts'), indexContent, 'utf8');
+    console.log('\n  ✓ ' + exports.length + ' Svelte components copied to ' + targetDir);
+    console.log('  Import in your app: import { Button, Badge, ... } from \'$lib/rizzo\';\n');
+  }
+}
+function copyAstroComponents(projectDir, selectedNames) {
+  const scaffoldDir = getScaffoldAstroDir();
+  if (!existsSync(scaffoldDir)) {
+    console.log('\n  Astro component templates not in this package; use CSS only or copy from repo: https://github.com/mingleusa/rizzo-css/tree/main/src/components');
+    return;
+  }
+  const files = readdirSync(scaffoldDir).filter((f) => f.endsWith('.astro'));
+  const available = files.map((f) => f.replace('.astro', ''));
+  const toCopy = selectedNames.filter((n) => available.includes(n));
+  if (toCopy.length === 0) {
+    console.log('\n  No matching Astro components in scaffold; use CSS only or copy from repo.');
+    return;
+  }
+  const targetDir = join(projectDir, 'src', 'components', 'rizzo');
+  mkdirSync(targetDir, { recursive: true });
+  let count = 0;
+  for (const name of toCopy) {
+    const src = join(scaffoldDir, name + '.astro');
+    if (existsSync(src)) {
+      copyFileSync(src, join(targetDir, name + '.astro'));
+      count++;
+    }
+  }
+  const iconsSrc = join(scaffoldDir, 'icons');
+  if (existsSync(iconsSrc)) {
+    copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
+  }
+  if (count > 0) {
+    console.log('\n  ✓ ' + count + ' Astro components + icons copied to ' + targetDir);
+    console.log('  Import in your pages: import Button from \'../components/rizzo/Button.astro\';\n');
+  }
+}
+async function cmdInit() {
+  const name = await question('Project name (folder name, or leave blank for current directory): ');
+  let framework = await question('Framework: vanilla, astro, svelte (default: vanilla): ') || 'vanilla';
+  framework = framework.toLowerCase();
+  if (!FRAMEWORKS.includes(framework)) framework = 'vanilla';
+  const theme = await question('Theme (default: github-dark-classic, or run "npx rizzo-css theme" for list): ') || 'github-dark-classic';
+  let selectedComponents = [];
+  const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
+  if (componentList.length > 0) {
+    const label = framework === 'svelte' ? 'Svelte' : 'Astro';
+    const include = await question('Include ' + label + ' components? (y/n, default: n): ') || 'n';
+    if (include.toLowerCase() === 'y' || include.toLowerCase() === 'yes') {
+      console.log('\nComponents (enter numbers to include, e.g. 1 3 5, or "all" / "none"):');
+      componentList.forEach((c, i) => console.log('  ' + (i + 1) + '. ' + c));
+      const choice = await question('\nSelection (e.g. 1 2 3 or all): ');
+      selectedComponents = parseComponentSelection(choice, componentList, componentList.length);
+    }
+  }
+  const projectDir = name ? join(process.cwd(), name) : process.cwd();
+  const cssDir = framework === 'astro' ? join(projectDir, 'public', 'css') : join(projectDir, 'css');
+  const cssTarget = join(cssDir, 'rizzo.min.css');
+  const cssSource = getCssPath();
+  if (!existsSync(cssSource)) {
+    console.error('Error: Rizzo CSS build not found. Run from repo root: pnpm build:css');
+    process.exit(1);
+  }
+  mkdirSync(cssDir, { recursive: true });
+  copyFileSync(cssSource, cssTarget);
+  const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${name || 'App'}</title>
+  <link rel="stylesheet" href="${linkHref}" />
+</head>
+<body>
+  <h1>Hello, Rizzo CSS</h1>
+  <p>Edit this file and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
+</body>
+</html>
+`;
+  const indexPath = join(projectDir, 'index.html');
+  writeFileSync(indexPath, indexHtml, 'utf8');
+  if (framework === 'svelte' && selectedComponents.length > 0) {
+    copySvelteComponents(projectDir, selectedComponents);
+  } else if (framework === 'astro' && selectedComponents.length > 0) {
+    copyAstroComponents(projectDir, selectedComponents);
+  }
+  console.log('\n✓ Project ready at ' + projectDir);
+  console.log('  - ' + cssTarget);
+  console.log('  - ' + indexPath);
+  console.log('\nRun a local server (e.g. npx serve .) or open index.html. Docs: https://rizzo-css.vercel.app\n');
+}
+function main() {
+  const argv = process.argv.slice(2);
+  const command = (argv[0] || 'help').toLowerCase().replace(/^--?/, '');
+  if (command === 'help' || command === 'h' || !COMMANDS.includes(command)) {
+    if (argv[0] && !COMMANDS.includes(command) && command !== 'h') {
+      console.error('Unknown command: ' + argv[0] + '\n');
+    }
+    printHelp();
+    return;
+  }
+  if (command === 'theme') {
+    cmdTheme();
+    return;
+  }
+  if (command === 'add') {
+    cmdAdd(argv);
+    return;
+  }
+  if (command === 'init') {
+    cmdInit().catch((err) => {
+      console.error(err);
+      process.exit(1);
+    });
+    return;
+  }
+}
+main();

package/package.json CHANGED Viewed

@@ -1,12 +1,14 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
-    "prepublishOnly": "cd ../.. && pnpm build:css"
+    "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-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",
   "main": "dist/rizzo.min.css",
+  "unpkg": "dist/rizzo.min.css",
+  "jsdelivr": "dist/rizzo.min.css",
   "exports": {
     ".": {
       "style": "./dist/rizzo.min.css",
@@ -14,9 +16,14 @@
       "require": "./dist/rizzo.min.css"
     }
   },
+  "bin": {
+    "rizzo-css": "./bin/rizzo-css.js"
+  },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "bin",
+    "scaffold"
   ],
   "keywords": [
     "css",
@@ -31,5 +38,6 @@
     "type": "git",
     "url": "https://github.com/mingleusa/rizzo-css.git"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "author": "mingleusa"
 }

package/scaffold/astro/Accordion.astro ADDED Viewed

@@ -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>