refactor(patterns): split 7 variant-heavy patterns into framework-specific DemoSection files with shared data

CLAUDE.md

@@ -84,7 +84,9 @@ src/
 
 - **`meta.ts`**: タイトル、説明、TOC、リソース、フレームワーク別メタデータ（ソースファイル、API Props/Events/Slots）を `PatternMeta` 型で定義。全テキストは `Record<Locale, string>` で i18n 対応
 - **`DemoSection.*.astro`** (推奨): framework ごとに分割した薄い Astro。`DemoSection.{react,vue,svelte,web-component}.astro` が、それぞれ自分の framework の実装ファイルだけを静的 import する。ページ側 dispatcher が `framework` から該当ファイルを選んで呼ぶ
+- **`{pattern}-demo-data.ts`** (任意): 4 framework で内容が完全に同一かつ概ね 8 行以上の純 data (配列/オブジェクトリテラル) を切り出した共通ファイル。framework 固有の prop 名 (Vue `ariaLabel` ↔ React/Astro `aria-label`) や関数 (`renderCell` など) は含めず、各 `DemoSection.{framework}.astro` 側で吸収する
 - **`DemoSection.astro`** (legacy): 4 framework の実装を 1 ファイルで静的 import する旧形式。dispatcher にフォールバックとして残してあり、まだ移行していない pattern で使われている。**注意**: legacy 形式は `@vitejs/plugin-react v6` + Vite 8 + Vue SFC `<script setup lang="ts">` の組み合わせで dev 限定の `$RefreshSig$` エラーを引き起こすことがあるため、Vue SFC を含むパターンは新形式に移行することを推奨
+- **移行状況** (transitional): PR #169 で 9 pattern (alert / checkbox / combobox / disclosure / menu-button / menubar / slider / slider-multithumb / toolbar)、PR-A で 7 pattern (accordion / listbox / radio-group / tabs / tree-view / table / treegrid) を分割済み。残り 16 pattern は legacy のまま (PR-B で対応予定)。最終的に legacy 形式と dispatcher fallback は撤去する
 - **動的ルーティング**: `[pattern]/[framework]/index.astro` が `import.meta.glob()` で全パターンの `meta.ts` を検出し、`getStaticPaths()` でビルド時にページ生成。同じファイル内の dispatcher が `DemoSection.{framework}.astro` を優先し、無ければ legacy `DemoSection.astro` にフォールバック
 
 **パスエイリアス**（tsconfig.json）:

src/patterns/accordion/DemoSection.react.astro

@@ -0,0 +1,61 @@
+---
+import type { Framework } from '@/lib/frameworks';
+import type { Locale } from '@/i18n/ui';
+import { Accordion as AccordionReact } from './Accordion';
+import { defaultItems, multipleItems, disabledItems } from './accordion-demo-data';
+
+interface Props {
+  framework?: Framework;
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">
+      {isJa ? '単一展開（デフォルト）' : 'Single Expansion (Default)'}
+    </h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa
+          ? '同時に1つのパネルのみ展開できます。新しいパネルを開くと、前に開いていたパネルが閉じます。'
+          : 'Only one panel can be expanded at a time. Opening a new panel closes the previously open one.'
+      }
+    </p>
+    <AccordionReact client:load items={defaultItems} headingLevel={3} />
+  </div>
+
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '複数展開' : 'Multiple Expansion'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa ? (
+          <Fragment>
+            <code>allowMultiple</code> プロパティを使用して、複数のパネルを同時に展開できます。
+          </Fragment>
+        ) : (
+          <Fragment>
+            Multiple panels can be expanded simultaneously using the <code>allowMultiple</code>{' '}
+            prop.
+          </Fragment>
+        )
+      }
+    </p>
+    <AccordionReact client:load items={multipleItems} allowMultiple={true} headingLevel={3} />
+  </div>
+
+  <div>
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '無効な項目あり' : 'With Disabled Items'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa
+          ? '個別のアコーディオン項目を無効にできます。キーボードナビゲーションは無効な項目を自動的にスキップします。'
+          : 'Individual accordion items can be disabled. Keyboard navigation automatically skips disabled items.'
+      }
+    </p>
+    <AccordionReact client:load items={disabledItems} headingLevel={3} />
+  </div>
+</div>

src/patterns/accordion/DemoSection.svelte.astro

@@ -0,0 +1,61 @@
+---
+import type { Framework } from '@/lib/frameworks';
+import type { Locale } from '@/i18n/ui';
+import AccordionSvelte from './Accordion.svelte';
+import { defaultItems, multipleItems, disabledItems } from './accordion-demo-data';
+
+interface Props {
+  framework?: Framework;
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">
+      {isJa ? '単一展開（デフォルト）' : 'Single Expansion (Default)'}
+    </h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa
+          ? '同時に1つのパネルのみ展開できます。新しいパネルを開くと、前に開いていたパネルが閉じます。'
+          : 'Only one panel can be expanded at a time. Opening a new panel closes the previously open one.'
+      }
+    </p>
+    <AccordionSvelte client:load items={defaultItems} headingLevel={3} />
+  </div>
+
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '複数展開' : 'Multiple Expansion'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa ? (
+          <Fragment>
+            <code>allowMultiple</code> プロパティを使用して、複数のパネルを同時に展開できます。
+          </Fragment>
+        ) : (
+          <Fragment>
+            Multiple panels can be expanded simultaneously using the <code>allowMultiple</code>{' '}
+            prop.
+          </Fragment>
+        )
+      }
+    </p>
+    <AccordionSvelte client:load items={multipleItems} allowMultiple={true} headingLevel={3} />
+  </div>
+
+  <div>
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '無効な項目あり' : 'With Disabled Items'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa
+          ? '個別のアコーディオン項目を無効にできます。キーボードナビゲーションは無効な項目を自動的にスキップします。'
+          : 'Individual accordion items can be disabled. Keyboard navigation automatically skips disabled items.'
+      }
+    </p>
+    <AccordionSvelte client:load items={disabledItems} headingLevel={3} />
+  </div>
+</div>

src/patterns/accordion/DemoSection.vue.astro

@@ -0,0 +1,61 @@
+---
+import type { Framework } from '@/lib/frameworks';
+import type { Locale } from '@/i18n/ui';
+import AccordionVue from './Accordion.vue';
+import { defaultItems, multipleItems, disabledItems } from './accordion-demo-data';
+
+interface Props {
+  framework?: Framework;
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">
+      {isJa ? '単一展開（デフォルト）' : 'Single Expansion (Default)'}
+    </h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa
+          ? '同時に1つのパネルのみ展開できます。新しいパネルを開くと、前に開いていたパネルが閉じます。'
+          : 'Only one panel can be expanded at a time. Opening a new panel closes the previously open one.'
+      }
+    </p>
+    <AccordionVue client:load items={defaultItems} headingLevel={3} />
+  </div>
+
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '複数展開' : 'Multiple Expansion'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa ? (
+          <Fragment>
+            <code>allowMultiple</code> プロパティを使用して、複数のパネルを同時に展開できます。
+          </Fragment>
+        ) : (
+          <Fragment>
+            Multiple panels can be expanded simultaneously using the <code>allowMultiple</code>{' '}
+            prop.
+          </Fragment>
+        )
+      }
+    </p>
+    <AccordionVue client:load items={multipleItems} allowMultiple={true} headingLevel={3} />
+  </div>
+
+  <div>
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '無効な項目あり' : 'With Disabled Items'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa
+          ? '個別のアコーディオン項目を無効にできます。キーボードナビゲーションは無効な項目を自動的にスキップします。'
+          : 'Individual accordion items can be disabled. Keyboard navigation automatically skips disabled items.'
+      }
+    </p>
+    <AccordionVue client:load items={disabledItems} headingLevel={3} />
+  </div>
+</div>