diff --git a/.internal/page-template.md b/.internal/page-template.md
index f503de6f..afc543cc 100644
--- a/.internal/page-template.md
+++ b/.internal/page-template.md
@@ -2,7 +2,7 @@
 
 このテンプレートは、APG パターンページの構成を統一するためのガイドラインです。
 
-> **Note**: ページは動的ルーティング（`[pattern]/[framework]/index.astro`）で自動生成される。個別のページファイル作成は不要。新しいパターンを追加するには `meta.ts` と `DemoSection.astro` を作成すればよい。
+> **Note**: ページは動的ルーティング（`[pattern]/[framework]/index.astro`）で自動生成される。個別のページファイル作成は不要。新しいパターンを追加するには `meta.ts` と framework 別の `DemoSection.{react,vue,svelte,web-component}.astro` 4 ファイルを作成すればよい。
 
 ## 章構成 (tocItems)
 
@@ -49,7 +49,8 @@ const tocItems = [
 | ファイル | 役割 | 検出パターン |
 |---------|------|-------------|
 | `meta.ts` | メタデータ定義 | `/src/patterns/*/meta.ts` |
-| `DemoSection.astro` | デモ表示 | `/src/patterns/*/DemoSection.astro` |
+| `DemoSection.{react,vue,svelte,web-component}.astro` | framework 別デモ表示 | `/src/patterns/*/DemoSection.{react,vue,svelte,web-component}.astro` |
+| `{pattern}-demo-data.ts` | 共通 demo data（任意） | `/src/patterns/{pattern}/{pattern}-demo-data.ts` |
 | `TestingDocs.astro` | テスト解説 | `/src/patterns/*/TestingDocs.astro` |
 | `{Component}.{tsx,vue,svelte,astro}` | ソースコード表示 | `/src/patterns/**/*.{tsx,vue,svelte,astro}` (`?raw`) |
 | `{Component}.test.*` | テストコード表示 | `/src/patterns/**/*.test.*` (`?raw`) |
@@ -58,7 +59,9 @@ const tocItems = [
 ## 章の説明
 
 ### 1. Demo
-- `DemoSection.astro` コンポーネントが `framework` prop に基づいて適切なフレームワーク実装を表示
+- ページ側 dispatcher が `framework` 値から `DemoSection.{react,vue,svelte,web-component}.astro` の該当ファイルを動的 import して呼ぶ（`Astro Web Component` は `web-component` キー）
+- 各 framework 別ファイルは `locale` prop だけを受け取り、自分の framework の実装ファイルだけを静的 import する
+- 4 framework で内容が完全に同一かつ概ね 8 行以上の純 data は `{pattern}-demo-data.ts` に切り出して全 4 ファイルから import する
 - 複数のバリエーションがある場合は DemoSection 内で `<h3>` 小見出しで分割
 
 ### 2. Native HTML（条件付き）
@@ -108,7 +111,10 @@ const tocItems = [
 
 ### 必須ファイル
 - [ ] `src/patterns/{pattern}/meta.ts` - パターンメタデータ（`PatternMeta` 型）
-- [ ] `src/patterns/{pattern}/DemoSection.astro` - 全フレームワーク統合デモ
+- [ ] `src/patterns/{pattern}/DemoSection.react.astro` - React 用デモ
+- [ ] `src/patterns/{pattern}/DemoSection.vue.astro` - Vue 用デモ
+- [ ] `src/patterns/{pattern}/DemoSection.svelte.astro` - Svelte 用デモ
+- [ ] `src/patterns/{pattern}/DemoSection.web-component.astro` - Astro Web Component 用デモ
 - [ ] `src/patterns/{pattern}/{Component}.tsx` - React 実装
 - [ ] `src/patterns/{pattern}/{Component}.vue` - Vue 実装
 - [ ] `src/patterns/{pattern}/{Component}.svelte` - Svelte 実装
@@ -119,6 +125,7 @@ const tocItems = [
 - [ ] `src/content/accessibility-docs/{pattern}/ja.mdx` - アクセシビリティ解説（日本語）
 - [ ] `src/patterns/{pattern}/{pattern}.md` - AI 向けガイド
 - [ ] `src/patterns/{pattern}/NativeHtmlNotice.astro` - Native HTML 説明（該当パターンのみ）
+- [ ] `src/patterns/{pattern}/{pattern}-demo-data.ts` - 共通 demo data（4 framework で完全一致する 8 行以上の純 data がある場合のみ）
 
 ### meta.ts 構成確認
 - [ ] `PatternMeta` 型に準拠している
diff --git a/.internal/pattern-planning-prompt.md b/.internal/pattern-planning-prompt.md
index 44905c6c..6606379f 100644
--- a/.internal/pattern-planning-prompt.md
+++ b/.internal/pattern-planning-prompt.md
@@ -137,7 +137,8 @@ Phase 1 で llm.md とテストを先に作成し、その後実装に進みま
 
 ### Phase 3: メタデータ・ドキュメント
 - [ ] `meta.ts` - パターンメタデータ（`PatternMeta` 型）
-- [ ] `DemoSection.astro` - 全フレームワーク統合デモ
+- [ ] `DemoSection.react.astro` / `DemoSection.vue.astro` / `DemoSection.svelte.astro` / `DemoSection.web-component.astro` - framework 別デモ
+- [ ] `{pattern}-demo-data.ts` - 共通 demo data（4 framework で完全一致する 8 行以上の純 data がある場合のみ）
 - [ ] `TestingDocs.astro` - テスト解説 ※ `.internal/TestingDocs-template.astro` を参照
 - [ ] `NativeHtmlNotice.astro` - ネイティブ HTML 注記（該当パターンのみ）
 - [ ] `src/content/accessibility-docs/{pattern}/en.mdx` - ARIA 仕様解説（英語）
@@ -689,8 +690,8 @@ export interface {ComponentName}Props extends Omit<
    # meta.ts の存在確認
    ls -la src/patterns/{pattern}/meta.ts
 
-   # DemoSection の存在確認
-   ls -la src/patterns/{pattern}/DemoSection.astro
+   # DemoSection の存在確認（framework 別 4 ファイル）
+   ls -la src/patterns/{pattern}/DemoSection.{react,vue,svelte,web-component}.astro
 
    # アクセシビリティドキュメントの確認
    ls -la src/content/accessibility-docs/{pattern}/en.mdx
@@ -713,7 +714,11 @@ export interface {ComponentName}Props extends Omit<
 
    ### メタデータ・デモ
    - [ ] meta.ts（PatternMeta 型）
-   - [ ] DemoSection.astro
+   - [ ] DemoSection.react.astro
+   - [ ] DemoSection.vue.astro
+   - [ ] DemoSection.svelte.astro
+   - [ ] DemoSection.web-component.astro
+   - [ ] {pattern}-demo-data.ts（共通 data がある場合のみ）
 
    ### ドキュメント
    - [ ] src/content/accessibility-docs/{pattern}/en.mdx
diff --git a/.internal/site-specification.md b/.internal/site-specification.md
index 64163ffb..74289a00 100644
--- a/.internal/site-specification.md
+++ b/.internal/site-specification.md
@@ -221,7 +221,11 @@ src/
 ├── patterns/                        # APG パターン実装
 │   └── button/                      # 例: button パターン
 │       ├── meta.ts                  # パターンメタデータ（単一の真実源）
-│       ├── DemoSection.astro        # 全フレームワーク統合デモ
+│       ├── DemoSection.react.astro          # React 用デモ
+│       ├── DemoSection.vue.astro            # Vue 用デモ
+│       ├── DemoSection.svelte.astro         # Svelte 用デモ
+│       ├── DemoSection.web-component.astro  # Astro Web Component 用デモ
+│       ├── {pattern}-demo-data.ts   # 共通 demo data（必要なときのみ）
 │       ├── TestingDocs.astro        # テストドキュメント
 │       ├── Button.tsx               # React 実装
 │       ├── Button.vue               # Vue 実装
@@ -266,7 +270,8 @@ src/
 各パターンの `meta.ts` が `PatternMeta` 型でメタデータを一元定義する。動的ルーティング（`[pattern]/[framework]/index.astro`）が `import.meta.glob()` で全パターンの `meta.ts` を検出し、`getStaticPaths()` で 4フレームワーク × 2言語 のページをビルド時に生成する。
 
 - **`meta.ts`**: タイトル、説明、TOC、リソース、フレームワーク別 API ドキュメント。全テキストは `Record<Locale, string>` で i18n 対応
-- **`DemoSection.astro`**: 4フレームワークの実装を静的 import し、`framework` prop で切り替え表示
+- **`DemoSection.{react,vue,svelte,web-component}.astro`**: framework ごとに分割した薄い Astro。それぞれ自分の framework の実装ファイルだけを静的 import する。ページ側 dispatcher が `framework` から該当ファイルを選んで動的 import で呼ぶ
+- **`{pattern}-demo-data.ts`** (任意): 4 framework で内容が完全に同一かつ概ね 8 行以上の純 data を切り出した共通ファイル
 - **`content/accessibility-docs/`**: MDX でアクセシビリティ解説を記述。frontmatter は `pattern` と `locale` のみ
 
 ---
diff --git a/CLAUDE.md b/CLAUDE.md
index 4f0ff45f..80f0961e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -43,12 +43,11 @@ src/
 ├── patterns/                  # APG パターン実装
 │   └── button/                # 例: button パターン
 │       ├── meta.ts            # パターンメタデータ（単一の真実源）
-│       ├── DemoSection.astro             # 全フレームワーク統合デモ（legacy）
-│       │                                 # ↓ または framework 別に分割（後述）
-│       ├── DemoSection.react.astro       # React 用デモ（split 後）
-│       ├── DemoSection.vue.astro         # Vue 用デモ（split 後）
-│       ├── DemoSection.svelte.astro      # Svelte 用デモ（split 後）
-│       ├── DemoSection.web-component.astro # Astro Web Component 用（split 後）
+│       ├── DemoSection.react.astro          # React 用デモ
+│       ├── DemoSection.vue.astro            # Vue 用デモ
+│       ├── DemoSection.svelte.astro         # Svelte 用デモ
+│       ├── DemoSection.web-component.astro  # Astro Web Component 用デモ
+│       ├── {pattern}-demo-data.ts # 共通 demo data（必要なときのみ。後述）
 │       ├── TestingDocs.astro  # テストドキュメント
 │       ├── Button.tsx         # React 実装
 │       ├── Button.vue         # Vue 実装
@@ -83,11 +82,9 @@ src/
 各パターンの `meta.ts` が単一の真実源（Single Source of Truth）となる。1つの `meta.ts` から 4フレームワーク × 2言語 = 8ページが動的に生成される。
 
 - **`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` にフォールバック
+- **`DemoSection.{react,vue,svelte,web-component}.astro`**: framework ごとに分割した薄い Astro。それぞれ自分の framework の実装ファイルだけを静的 import する。`Astro.props` から `locale` のみを受け取り、`framework` prop は持たない。pages 側 dispatcher が `framework` から該当ファイルを選んで呼ぶ
+- **`{pattern}-demo-data.ts`** (任意): 4 framework で内容が完全に同一かつ概ね 8 行以上の純 data (配列/オブジェクトリテラル) を切り出した共通ファイル。framework 固有の prop 名 (Vue `ariaLabel` ↔ React/Astro `aria-label`) や関数 (`renderCell` など) は含めず、各 `DemoSection.{framework}.astro` 側で吸収する。共有 data が小さい (8 行未満) または framework 間で差があるパターンでは作らない
+- **動的ルーティング**: `[pattern]/[framework]/index.astro` が `import.meta.glob()` で全パターンの `meta.ts` を検出し、`getStaticPaths()` でビルド時にページ生成。同じファイル内の dispatcher が `DemoSection.${framework}.astro` (Astro Web Component は `web-component`) を `import.meta.glob` 経由で動的 import する。loader 欠落時は `throw` する設計（`getStaticPaths` が valid な組み合わせのみ生成する前提）
 
 **パスエイリアス**（tsconfig.json）:
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 289013f9..b1c90916 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -183,9 +183,13 @@ Each pattern should include:
 
 ```
 src/patterns/{pattern}/
-├── meta.ts                    # Pattern metadata (single source of truth)
-├── DemoSection.astro          # Unified demo for all frameworks
-├── TestingDocs.astro          # Test documentation
+├── meta.ts                          # Pattern metadata (single source of truth)
+├── DemoSection.react.astro          # React demo
+├── DemoSection.vue.astro            # Vue demo
+├── DemoSection.svelte.astro         # Svelte demo
+├── DemoSection.web-component.astro  # Astro Web Component demo
+├── {pattern}-demo-data.ts           # Shared demo data (optional)
+├── TestingDocs.astro                # Test documentation
 ├── {Pattern}.tsx              # React implementation
 ├── {Pattern}.vue              # Vue implementation
 ├── {Pattern}.svelte           # Svelte implementation
diff --git a/src/pages/ja/patterns/[pattern]/[framework]/index.astro b/src/pages/ja/patterns/[pattern]/[framework]/index.astro
index b6c5857e..fb5ee127 100644
--- a/src/pages/ja/patterns/[pattern]/[framework]/index.astro
+++ b/src/pages/ja/patterns/[pattern]/[framework]/index.astro
@@ -24,7 +24,6 @@ import { useTranslation } from '@/i18n';
 import type { PatternMeta } from '@/lib/pattern-meta-types';
 
 // Glob imports for dynamic content loading
-const demoModules = import.meta.glob<{ default: any }>('/src/patterns/*/DemoSection.astro');
 const demoReactModules = import.meta.glob<{ default: any }>(
   '/src/patterns/*/DemoSection.react.astro'
 );
@@ -100,16 +99,12 @@ if (!fwMeta) {
 const fwInfo = FRAMEWORK_INFO[framework];
 
 // Load dynamic components
-// Prefer framework-specific DemoSection (DemoSection.{framework}.astro) if present,
-// fall back to the legacy unified DemoSection.astro during migration.
-const newDemoLoader =
-  frameworkDemoModules[framework][
-    `/src/patterns/${pattern}/DemoSection.${frameworkDemoKey[framework]}.astro`
-  ];
-const legacyDemoLoader = demoModules[`/src/patterns/${pattern}/DemoSection.astro`];
-const DemoSection = newDemoLoader
-  ? ((await newDemoLoader()).default as any)
-  : ((await legacyDemoLoader?.())?.default as any);
+const demoLoaderPath = `/src/patterns/${pattern}/DemoSection.${frameworkDemoKey[framework]}.astro`;
+const demoLoader = frameworkDemoModules[framework][demoLoaderPath];
+if (!demoLoader) {
+  throw new Error(`DemoSection not found: ${demoLoaderPath}`);
+}
+const DemoSection = (await demoLoader()).default as any;
 const TestingDocs = (await testingModules[`/src/patterns/${pattern}/TestingDocs.astro`]?.())
   ?.default as any;
 const NativeHtmlNotice = meta.hasNativeHtmlNotice
@@ -166,7 +161,7 @@ const { Content: AccessibilityContent } = await getAccessibilityContent(pattern,
   <!-- Demo Section -->
   <section class="mb-12">
     <Heading level={2} id="demo" class="mb-4 text-xl font-semibold">{t('pattern.demo')}</Heading>
-    {DemoSection && <DemoSection framework={framework} locale={locale} />}
+    <DemoSection locale={locale} />
     <p class="text-muted-foreground mt-2 text-sm">
       <a href="./demo/" class="text-primary hover:underline">デモのみ表示 →</a>
     </p>
diff --git a/src/pages/patterns/[pattern]/[framework]/index.astro b/src/pages/patterns/[pattern]/[framework]/index.astro
index c2314eee..aba05e01 100644
--- a/src/pages/patterns/[pattern]/[framework]/index.astro
+++ b/src/pages/patterns/[pattern]/[framework]/index.astro
@@ -26,7 +26,6 @@ import { getPatterns } from '@/lib/patterns';
 import type { PatternMeta } from '@/lib/pattern-meta-types';
 
 // Glob imports for dynamic content loading
-const demoModules = import.meta.glob<{ default: any }>('/src/patterns/*/DemoSection.astro');
 const demoReactModules = import.meta.glob<{ default: any }>(
   '/src/patterns/*/DemoSection.react.astro'
 );
@@ -101,16 +100,12 @@ if (!fwMeta) {
 const fwInfo = FRAMEWORK_INFO[framework];
 
 // Load dynamic components
-// Prefer framework-specific DemoSection (DemoSection.{framework}.astro) if present,
-// fall back to the legacy unified DemoSection.astro during migration.
-const newDemoLoader =
-  frameworkDemoModules[framework][
-    `/src/patterns/${pattern}/DemoSection.${frameworkDemoKey[framework]}.astro`
-  ];
-const legacyDemoLoader = demoModules[`/src/patterns/${pattern}/DemoSection.astro`];
-const DemoSection = newDemoLoader
-  ? ((await newDemoLoader()).default as any)
-  : ((await legacyDemoLoader?.())?.default as any);
+const demoLoaderPath = `/src/patterns/${pattern}/DemoSection.${frameworkDemoKey[framework]}.astro`;
+const demoLoader = frameworkDemoModules[framework][demoLoaderPath];
+if (!demoLoader) {
+  throw new Error(`DemoSection not found: ${demoLoaderPath}`);
+}
+const DemoSection = (await demoLoader()).default as any;
 const TestingDocs = (await testingModules[`/src/patterns/${pattern}/TestingDocs.astro`]?.())
   ?.default as any;
 const NativeHtmlNotice = meta.hasNativeHtmlNotice
@@ -166,7 +161,7 @@ const { Content: AccessibilityContent } = await getAccessibilityContent(pattern,
   <!-- Demo Section -->
   <section class="mb-12">
     <Heading level={2} class="mb-4 text-xl font-semibold">Demo</Heading>
-    {DemoSection && <DemoSection framework={framework} locale={locale} />}
+    <DemoSection locale={locale} />
     <p class="text-muted-foreground mt-2 text-sm">
       <a href="./demo/" class="text-primary hover:underline">Open demo only →</a>
     </p>
diff --git a/src/patterns/accordion/DemoSection.react.astro b/src/patterns/accordion/DemoSection.react.astro
index 3a26500a..c8448985 100644
--- a/src/patterns/accordion/DemoSection.react.astro
+++ b/src/patterns/accordion/DemoSection.react.astro
@@ -1,11 +1,9 @@
 ---
-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;
 }
 
diff --git a/src/patterns/accordion/DemoSection.svelte.astro b/src/patterns/accordion/DemoSection.svelte.astro
index 9a108bf7..cfc738eb 100644
--- a/src/patterns/accordion/DemoSection.svelte.astro
+++ b/src/patterns/accordion/DemoSection.svelte.astro
@@ -1,11 +1,9 @@
 ---
-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;
 }
 
diff --git a/src/patterns/accordion/DemoSection.vue.astro b/src/patterns/accordion/DemoSection.vue.astro
index 4ec734e9..39405959 100644
--- a/src/patterns/accordion/DemoSection.vue.astro
+++ b/src/patterns/accordion/DemoSection.vue.astro
@@ -1,11 +1,9 @@
 ---
-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;
 }
 
diff --git a/src/patterns/accordion/DemoSection.web-component.astro b/src/patterns/accordion/DemoSection.web-component.astro
index 6caf6371..8b5f7289 100644
--- a/src/patterns/accordion/DemoSection.web-component.astro
+++ b/src/patterns/accordion/DemoSection.web-component.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import AccordionAstro from './Accordion.astro';
 import { defaultItems, multipleItems, disabledItems } from './accordion-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/alert-dialog/DemoSection.astro b/src/patterns/alert-dialog/DemoSection.astro
deleted file mode 100644
index 2032b3b4..00000000
--- a/src/patterns/alert-dialog/DemoSection.astro
+++ /dev/null
@@ -1,95 +0,0 @@
----
-/**
- * Alert Dialog Demo Section
- *
- * Renders the alert dialog demo for each framework variant.
- * React/Vue/Svelte use wrapper Demo components with client:only
- * since they require browser-only APIs (portals, teleport).
- * Astro renders multiple AlertDialog instances directly.
- */
-import type { Framework } from '@/lib/frameworks';
-import type { Locale } from '@/i18n/ui';
-import AlertDialogDemoReact from './AlertDialogDemo';
-import AlertDialogDemoVue from './AlertDialogDemo.vue';
-import AlertDialogDemoSvelte from './AlertDialogDemo.svelte';
-import AlertDialog from './AlertDialog.astro';
-
-interface Props {
-  framework: Framework;
-  locale?: Locale;
-}
-
-const { framework, locale = 'en' } = Astro.props;
-const isJa = locale === 'ja';
----
-
-{framework === 'react' && <AlertDialogDemoReact client:only="react" />}
-{framework === 'vue' && <AlertDialogDemoVue client:only="vue" />}
-{framework === 'svelte' && <AlertDialogDemoSvelte client:only="svelte" />}
-{
-  framework === 'astro' && (
-    <div>
-      {/* Delete Confirmation */}
-      <div class="mb-8">
-        <h3 class="mb-3 text-lg font-medium">{isJa ? '削除の確認' : 'Delete Confirmation'}</h3>
-        <p class="text-muted-foreground mb-4 text-sm">
-          {isJa
-            ? '明示的な確認が必要な破壊的アクションです。Escapeキーは無効です。'
-            : 'A destructive action that requires explicit confirmation. Escape key is disabled.'}
-        </p>
-        <div class="border-border bg-background rounded-lg border p-6">
-          <AlertDialog
-            title="Delete this item?"
-            message="This action cannot be undone. This will permanently delete the item from your account."
-            triggerText="Delete Item"
-            confirmLabel="Delete"
-            cancelLabel="Cancel"
-            confirmVariant="danger"
-            triggerClass="bg-destructive text-destructive-foreground rounded-md px-4 py-2 hover:opacity-90"
-          />
-        </div>
-      </div>
-
-      {/* Discard Changes */}
-      <div class="mb-8">
-        <h3 class="mb-3 text-lg font-medium">{isJa ? '変更の破棄' : 'Discard Changes'}</h3>
-        <p class="text-muted-foreground mb-4 text-sm">
-          {isJa ? '未保存の変更を失う前に確認します。' : 'Confirm before losing unsaved changes.'}
-        </p>
-        <div class="border-border bg-background rounded-lg border p-6">
-          <AlertDialog
-            title="Discard unsaved changes?"
-            message="You have unsaved changes. Are you sure you want to discard them?"
-            triggerText="Close Editor"
-            confirmLabel="Discard"
-            cancelLabel="Keep Editing"
-            triggerClass="bg-secondary text-secondary-foreground rounded-md px-4 py-2 hover:opacity-90"
-          />
-        </div>
-      </div>
-
-      {/* Information Acknowledgment */}
-      <div class="mb-8">
-        <h3 class="mb-3 text-lg font-medium">
-          {isJa ? '情報の確認' : 'Information Acknowledgment'}
-        </h3>
-        <p class="text-muted-foreground mb-4 text-sm">
-          {isJa
-            ? 'Escapeキーが有効な非破壊的アラートです。'
-            : 'Non-destructive alert with Escape key enabled.'}
-        </p>
-        <div class="border-border bg-background rounded-lg border p-6">
-          <AlertDialog
-            title="System Maintenance"
-            message="The system will undergo maintenance on Sunday at 2:00 AM. Please save your work before then."
-            triggerText="Show Notice"
-            confirmLabel="Understood"
-            cancelLabel="Remind Me Later"
-            allowEscapeClose={true}
-            triggerClass="bg-primary text-primary-foreground rounded-md px-4 py-2 hover:opacity-90"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/patterns/alert-dialog/DemoSection.react.astro b/src/patterns/alert-dialog/DemoSection.react.astro
new file mode 100644
index 00000000..6edbd726
--- /dev/null
+++ b/src/patterns/alert-dialog/DemoSection.react.astro
@@ -0,0 +1,10 @@
+---
+import type { Locale } from '@/i18n/ui';
+import AlertDialogDemoReact from './AlertDialogDemo';
+
+interface Props {
+  locale?: Locale;
+}
+---
+
+<AlertDialogDemoReact client:only="react" />
diff --git a/src/patterns/alert-dialog/DemoSection.svelte.astro b/src/patterns/alert-dialog/DemoSection.svelte.astro
new file mode 100644
index 00000000..45cb477a
--- /dev/null
+++ b/src/patterns/alert-dialog/DemoSection.svelte.astro
@@ -0,0 +1,10 @@
+---
+import type { Locale } from '@/i18n/ui';
+import AlertDialogDemoSvelte from './AlertDialogDemo.svelte';
+
+interface Props {
+  locale?: Locale;
+}
+---
+
+<AlertDialogDemoSvelte client:only="svelte" />
diff --git a/src/patterns/alert-dialog/DemoSection.vue.astro b/src/patterns/alert-dialog/DemoSection.vue.astro
new file mode 100644
index 00000000..250fd24d
--- /dev/null
+++ b/src/patterns/alert-dialog/DemoSection.vue.astro
@@ -0,0 +1,10 @@
+---
+import type { Locale } from '@/i18n/ui';
+import AlertDialogDemoVue from './AlertDialogDemo.vue';
+
+interface Props {
+  locale?: Locale;
+}
+---
+
+<AlertDialogDemoVue client:only="vue" />
diff --git a/src/patterns/alert-dialog/DemoSection.web-component.astro b/src/patterns/alert-dialog/DemoSection.web-component.astro
new file mode 100644
index 00000000..5d706f41
--- /dev/null
+++ b/src/patterns/alert-dialog/DemoSection.web-component.astro
@@ -0,0 +1,74 @@
+---
+import type { Locale } from '@/i18n/ui';
+import AlertDialog from './AlertDialog.astro';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div>
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '削除の確認' : 'Delete Confirmation'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa
+          ? '明示的な確認が必要な破壊的アクションです。Escapeキーは無効です。'
+          : 'A destructive action that requires explicit confirmation. Escape key is disabled.'
+      }
+    </p>
+    <div class="border-border bg-background rounded-lg border p-6">
+      <AlertDialog
+        title="Delete this item?"
+        message="This action cannot be undone. This will permanently delete the item from your account."
+        triggerText="Delete Item"
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        confirmVariant="danger"
+        triggerClass="bg-destructive text-destructive-foreground rounded-md px-4 py-2 hover:opacity-90"
+      />
+    </div>
+  </div>
+
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '変更の破棄' : 'Discard Changes'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {isJa ? '未保存の変更を失う前に確認します。' : 'Confirm before losing unsaved changes.'}
+    </p>
+    <div class="border-border bg-background rounded-lg border p-6">
+      <AlertDialog
+        title="Discard unsaved changes?"
+        message="You have unsaved changes. Are you sure you want to discard them?"
+        triggerText="Close Editor"
+        confirmLabel="Discard"
+        cancelLabel="Keep Editing"
+        triggerClass="bg-secondary text-secondary-foreground rounded-md px-4 py-2 hover:opacity-90"
+      />
+    </div>
+  </div>
+
+  <div class="mb-8">
+    <h3 class="mb-3 text-lg font-medium">{isJa ? '情報の確認' : 'Information Acknowledgment'}</h3>
+    <p class="text-muted-foreground mb-4 text-sm">
+      {
+        isJa
+          ? 'Escapeキーが有効な非破壊的アラートです。'
+          : 'Non-destructive alert with Escape key enabled.'
+      }
+    </p>
+    <div class="border-border bg-background rounded-lg border p-6">
+      <AlertDialog
+        title="System Maintenance"
+        message="The system will undergo maintenance on Sunday at 2:00 AM. Please save your work before then."
+        triggerText="Show Notice"
+        confirmLabel="Understood"
+        cancelLabel="Remind Me Later"
+        allowEscapeClose={true}
+        triggerClass="bg-primary text-primary-foreground rounded-md px-4 py-2 hover:opacity-90"
+      />
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/alert/DemoSection.react.astro b/src/patterns/alert/DemoSection.react.astro
index 71a4812f..32c93e95 100644
--- a/src/patterns/alert/DemoSection.react.astro
+++ b/src/patterns/alert/DemoSection.react.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { AlertDemo as AlertDemoReact } from './AlertDemo';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/alert/DemoSection.svelte.astro b/src/patterns/alert/DemoSection.svelte.astro
index 3d639251..a146cbee 100644
--- a/src/patterns/alert/DemoSection.svelte.astro
+++ b/src/patterns/alert/DemoSection.svelte.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import AlertDemoSvelte from './AlertDemo.svelte';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/alert/DemoSection.vue.astro b/src/patterns/alert/DemoSection.vue.astro
index 25d44ee1..606d32c8 100644
--- a/src/patterns/alert/DemoSection.vue.astro
+++ b/src/patterns/alert/DemoSection.vue.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import AlertDemoVue from './AlertDemo.vue';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/alert/DemoSection.web-component.astro b/src/patterns/alert/DemoSection.web-component.astro
index a4fce13c..e454d643 100644
--- a/src/patterns/alert/DemoSection.web-component.astro
+++ b/src/patterns/alert/DemoSection.web-component.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import Alert from './Alert.astro';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/breadcrumb/DemoSection.astro b/src/patterns/breadcrumb/DemoSection.react.astro
similarity index 58%
rename from src/patterns/breadcrumb/DemoSection.astro
rename to src/patterns/breadcrumb/DemoSection.react.astro
index 01827a45..905a8546 100644
--- a/src/patterns/breadcrumb/DemoSection.astro
+++ b/src/patterns/breadcrumb/DemoSection.react.astro
@@ -1,24 +1,12 @@
 ---
-/**
- * Breadcrumb Demo Section
- *
- * Renders the breadcrumb demo for each framework variant.
- * Each framework's component is statically imported to support
- * Astro's client:load directive for hydration.
- */
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { Breadcrumb as BreadcrumbReact } from './Breadcrumb';
-import BreadcrumbVue from './Breadcrumb.vue';
-import BreadcrumbSvelte from './Breadcrumb.svelte';
-import BreadcrumbAstro from './Breadcrumb.astro';
 
 interface Props {
-  framework: Framework;
   locale?: Locale;
 }
 
-const { framework, locale = 'en' } = Astro.props;
+const { locale = 'en' } = Astro.props;
 const isJa = locale === 'ja';
 
 const basicItems = [
@@ -50,10 +38,7 @@ const longPathItems = [
             : 'A simple breadcrumb trail showing the path to the current page.'
         }
       </p>
-      {framework === 'react' && <BreadcrumbReact client:load items={basicItems} />}
-      {framework === 'vue' && <BreadcrumbVue client:load items={basicItems} />}
-      {framework === 'svelte' && <BreadcrumbSvelte client:load items={basicItems} />}
-      {framework === 'astro' && <BreadcrumbAstro items={basicItems} />}
+      <BreadcrumbReact client:load items={basicItems} />
     </div>
 
     <div>
@@ -65,10 +50,7 @@ const longPathItems = [
             : 'A deeper navigation path with multiple levels of hierarchy.'
         }
       </p>
-      {framework === 'react' && <BreadcrumbReact client:load items={longPathItems} />}
-      {framework === 'vue' && <BreadcrumbVue client:load items={longPathItems} />}
-      {framework === 'svelte' && <BreadcrumbSvelte client:load items={longPathItems} />}
-      {framework === 'astro' && <BreadcrumbAstro items={longPathItems} />}
+      <BreadcrumbReact client:load items={longPathItems} />
     </div>
   </div>
 </div>
diff --git a/src/patterns/breadcrumb/DemoSection.svelte.astro b/src/patterns/breadcrumb/DemoSection.svelte.astro
new file mode 100644
index 00000000..b5ae717c
--- /dev/null
+++ b/src/patterns/breadcrumb/DemoSection.svelte.astro
@@ -0,0 +1,56 @@
+---
+import type { Locale } from '@/i18n/ui';
+import BreadcrumbSvelte from './Breadcrumb.svelte';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+
+const basicItems = [
+  { label: 'Home', href: '/' },
+  { label: 'Patterns', href: '/patterns/' },
+  { label: 'Breadcrumb' },
+];
+
+const longPathItems = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products/' },
+  { label: 'Electronics', href: '/products/electronics/' },
+  { label: 'Computers', href: '/products/electronics/computers/' },
+  { label: 'Laptops', href: '/products/electronics/computers/laptops/' },
+  { label: 'MacBook Pro' },
+];
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="space-y-6">
+    <div>
+      <h3 class="mb-3 text-lg font-medium">
+        {isJa ? '基本的なパンくずリスト' : 'Basic Breadcrumb'}
+      </h3>
+      <p class="text-muted-foreground mb-4 text-sm">
+        {
+          isJa
+            ? '現在のページまでのパスを表示するシンプルなパンくずリストです。'
+            : 'A simple breadcrumb trail showing the path to the current page.'
+        }
+      </p>
+      <BreadcrumbSvelte client:load items={basicItems} />
+    </div>
+
+    <div>
+      <h3 class="mb-3 text-lg font-medium">{isJa ? '深い階層のパス' : 'Long Path'}</h3>
+      <p class="text-muted-foreground mb-4 text-sm">
+        {
+          isJa
+            ? '複数の階層レベルを持つ深いナビゲーションパスです。'
+            : 'A deeper navigation path with multiple levels of hierarchy.'
+        }
+      </p>
+      <BreadcrumbSvelte client:load items={longPathItems} />
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/breadcrumb/DemoSection.vue.astro b/src/patterns/breadcrumb/DemoSection.vue.astro
new file mode 100644
index 00000000..911da853
--- /dev/null
+++ b/src/patterns/breadcrumb/DemoSection.vue.astro
@@ -0,0 +1,56 @@
+---
+import type { Locale } from '@/i18n/ui';
+import BreadcrumbVue from './Breadcrumb.vue';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+
+const basicItems = [
+  { label: 'Home', href: '/' },
+  { label: 'Patterns', href: '/patterns/' },
+  { label: 'Breadcrumb' },
+];
+
+const longPathItems = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products/' },
+  { label: 'Electronics', href: '/products/electronics/' },
+  { label: 'Computers', href: '/products/electronics/computers/' },
+  { label: 'Laptops', href: '/products/electronics/computers/laptops/' },
+  { label: 'MacBook Pro' },
+];
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="space-y-6">
+    <div>
+      <h3 class="mb-3 text-lg font-medium">
+        {isJa ? '基本的なパンくずリスト' : 'Basic Breadcrumb'}
+      </h3>
+      <p class="text-muted-foreground mb-4 text-sm">
+        {
+          isJa
+            ? '現在のページまでのパスを表示するシンプルなパンくずリストです。'
+            : 'A simple breadcrumb trail showing the path to the current page.'
+        }
+      </p>
+      <BreadcrumbVue client:load items={basicItems} />
+    </div>
+
+    <div>
+      <h3 class="mb-3 text-lg font-medium">{isJa ? '深い階層のパス' : 'Long Path'}</h3>
+      <p class="text-muted-foreground mb-4 text-sm">
+        {
+          isJa
+            ? '複数の階層レベルを持つ深いナビゲーションパスです。'
+            : 'A deeper navigation path with multiple levels of hierarchy.'
+        }
+      </p>
+      <BreadcrumbVue client:load items={longPathItems} />
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/breadcrumb/DemoSection.web-component.astro b/src/patterns/breadcrumb/DemoSection.web-component.astro
new file mode 100644
index 00000000..4e537fc4
--- /dev/null
+++ b/src/patterns/breadcrumb/DemoSection.web-component.astro
@@ -0,0 +1,56 @@
+---
+import type { Locale } from '@/i18n/ui';
+import BreadcrumbAstro from './Breadcrumb.astro';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+
+const basicItems = [
+  { label: 'Home', href: '/' },
+  { label: 'Patterns', href: '/patterns/' },
+  { label: 'Breadcrumb' },
+];
+
+const longPathItems = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products/' },
+  { label: 'Electronics', href: '/products/electronics/' },
+  { label: 'Computers', href: '/products/electronics/computers/' },
+  { label: 'Laptops', href: '/products/electronics/computers/laptops/' },
+  { label: 'MacBook Pro' },
+];
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="space-y-6">
+    <div>
+      <h3 class="mb-3 text-lg font-medium">
+        {isJa ? '基本的なパンくずリスト' : 'Basic Breadcrumb'}
+      </h3>
+      <p class="text-muted-foreground mb-4 text-sm">
+        {
+          isJa
+            ? '現在のページまでのパスを表示するシンプルなパンくずリストです。'
+            : 'A simple breadcrumb trail showing the path to the current page.'
+        }
+      </p>
+      <BreadcrumbAstro items={basicItems} />
+    </div>
+
+    <div>
+      <h3 class="mb-3 text-lg font-medium">{isJa ? '深い階層のパス' : 'Long Path'}</h3>
+      <p class="text-muted-foreground mb-4 text-sm">
+        {
+          isJa
+            ? '複数の階層レベルを持つ深いナビゲーションパスです。'
+            : 'A deeper navigation path with multiple levels of hierarchy.'
+        }
+      </p>
+      <BreadcrumbAstro items={longPathItems} />
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/button/DemoSection.astro b/src/patterns/button/DemoSection.astro
deleted file mode 100644
index fbbf5567..00000000
--- a/src/patterns/button/DemoSection.astro
+++ /dev/null
@@ -1,67 +0,0 @@
----
-/**
- * Button Demo Section
- *
- * Renders the button demo for each framework variant.
- * Each framework's component is statically imported to support
- * Astro's client:load directive for hydration.
- */
-import type { Framework } from '@/lib/frameworks';
-import { Button as ButtonReact } from './Button';
-import ButtonVue from './Button.vue';
-import ButtonSvelte from './Button.svelte';
-import ButtonAstro from './Button.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  <div class="flex flex-wrap gap-4">
-    {
-      framework === 'react' && (
-        <>
-          <ButtonReact client:load onClick={() => alert('Clicked!')}>
-            Click me
-          </ButtonReact>
-          <ButtonReact client:load disabled onClick={() => alert('This should not fire!')}>
-            Disabled Button
-          </ButtonReact>
-        </>
-      )
-    }
-    {
-      framework === 'vue' && (
-        <>
-          <ButtonVue client:load>Click me</ButtonVue>
-          <ButtonVue client:load disabled>
-            Disabled Button
-          </ButtonVue>
-        </>
-      )
-    }
-    {
-      framework === 'svelte' && (
-        <>
-          <ButtonSvelte client:load onClick={() => alert('Clicked!')}>
-            Click me
-          </ButtonSvelte>
-          <ButtonSvelte client:load disabled onClick={() => alert('This should not fire!')}>
-            Disabled Button
-          </ButtonSvelte>
-        </>
-      )
-    }
-    {
-      framework === 'astro' && (
-        <>
-          <ButtonAstro>Click me</ButtonAstro>
-          <ButtonAstro disabled>Disabled Button</ButtonAstro>
-        </>
-      )
-    }
-  </div>
-</div>
diff --git a/src/patterns/button/DemoSection.react.astro b/src/patterns/button/DemoSection.react.astro
new file mode 100644
index 00000000..545dac61
--- /dev/null
+++ b/src/patterns/button/DemoSection.react.astro
@@ -0,0 +1,14 @@
+---
+import { Button as ButtonReact } from './Button';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap gap-4">
+    <ButtonReact client:load onClick={() => alert('Clicked!')}>Click me</ButtonReact>
+    <ButtonReact client:load disabled onClick={() => alert('This should not fire!')}>
+      Disabled Button
+    </ButtonReact>
+  </div>
+</div>
diff --git a/src/patterns/button/DemoSection.svelte.astro b/src/patterns/button/DemoSection.svelte.astro
new file mode 100644
index 00000000..dd96474e
--- /dev/null
+++ b/src/patterns/button/DemoSection.svelte.astro
@@ -0,0 +1,14 @@
+---
+import ButtonSvelte from './Button.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap gap-4">
+    <ButtonSvelte client:load onClick={() => alert('Clicked!')}>Click me</ButtonSvelte>
+    <ButtonSvelte client:load disabled onClick={() => alert('This should not fire!')}>
+      Disabled Button
+    </ButtonSvelte>
+  </div>
+</div>
diff --git a/src/patterns/button/DemoSection.vue.astro b/src/patterns/button/DemoSection.vue.astro
new file mode 100644
index 00000000..90bf199f
--- /dev/null
+++ b/src/patterns/button/DemoSection.vue.astro
@@ -0,0 +1,12 @@
+---
+import ButtonVue from './Button.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap gap-4">
+    <ButtonVue client:load>Click me</ButtonVue>
+    <ButtonVue client:load disabled>Disabled Button</ButtonVue>
+  </div>
+</div>
diff --git a/src/patterns/button/DemoSection.web-component.astro b/src/patterns/button/DemoSection.web-component.astro
new file mode 100644
index 00000000..a1a3c39f
--- /dev/null
+++ b/src/patterns/button/DemoSection.web-component.astro
@@ -0,0 +1,12 @@
+---
+import ButtonAstro from './Button.astro';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap gap-4">
+    <ButtonAstro>Click me</ButtonAstro>
+    <ButtonAstro disabled>Disabled Button</ButtonAstro>
+  </div>
+</div>
diff --git a/src/patterns/carousel/DemoSection.astro b/src/patterns/carousel/DemoSection.react.astro
similarity index 51%
rename from src/patterns/carousel/DemoSection.astro
rename to src/patterns/carousel/DemoSection.react.astro
index b9a949eb..47275d15 100644
--- a/src/patterns/carousel/DemoSection.astro
+++ b/src/patterns/carousel/DemoSection.react.astro
@@ -1,28 +1,16 @@
 ---
-/**
- * Carousel Demo Section
- *
- * Renders carousel demos for each framework variant.
- * Includes both manual navigation and auto-rotation demos.
- */
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { CarouselDemo as CarouselDemoReact } from './CarouselDemo';
-import CarouselDemoVue from './CarouselDemo.vue';
-import CarouselDemoSvelte from './CarouselDemo.svelte';
-import CarouselDemoAstro from './CarouselDemo.astro';
 
 interface Props {
-  framework: Framework;
   locale?: Locale;
 }
 
-const { framework, locale = 'en' } = Astro.props;
+const { locale = 'en' } = Astro.props;
 const isJa = locale === 'ja';
 const basePath = import.meta.env.BASE_URL;
 ---
 
-<!-- Manual Navigation -->
 <div class="mb-8">
   <h3 class="mb-3 text-lg font-medium">{isJa ? '手動ナビゲーション' : 'Manual Navigation'}</h3>
   <p class="text-muted-foreground mb-4 text-sm">
@@ -33,14 +21,10 @@ const basePath = import.meta.env.BASE_URL;
     }
   </p>
   <div class="border-border bg-background rounded-lg border p-6">
-    {framework === 'react' && <CarouselDemoReact client:load basePath={basePath} />}
-    {framework === 'vue' && <CarouselDemoVue client:load basePath={basePath} />}
-    {framework === 'svelte' && <CarouselDemoSvelte client:load basePath={basePath} />}
-    {framework === 'astro' && <CarouselDemoAstro />}
+    <CarouselDemoReact client:load basePath={basePath} />
   </div>
 </div>
 
-<!-- Auto-Rotation -->
 <div>
   <h3 class="mb-3 text-lg font-medium">{isJa ? '自動回転' : 'Auto-Rotation'}</h3>
   <p class="text-muted-foreground mb-4 text-sm">
@@ -51,21 +35,6 @@ const basePath = import.meta.env.BASE_URL;
     }
   </p>
   <div class="border-border bg-background rounded-lg border p-6">
-    {
-      framework === 'react' && (
-        <CarouselDemoReact client:load variant="auto-rotate" basePath={basePath} />
-      )
-    }
-    {
-      framework === 'vue' && (
-        <CarouselDemoVue client:load variant="auto-rotate" basePath={basePath} />
-      )
-    }
-    {
-      framework === 'svelte' && (
-        <CarouselDemoSvelte client:load variant="auto-rotate" basePath={basePath} />
-      )
-    }
-    {framework === 'astro' && <CarouselDemoAstro variant="auto-rotate" />}
+    <CarouselDemoReact client:load variant="auto-rotate" basePath={basePath} />
   </div>
 </div>
diff --git a/src/patterns/carousel/DemoSection.svelte.astro b/src/patterns/carousel/DemoSection.svelte.astro
new file mode 100644
index 00000000..85cb07c5
--- /dev/null
+++ b/src/patterns/carousel/DemoSection.svelte.astro
@@ -0,0 +1,40 @@
+---
+import type { Locale } from '@/i18n/ui';
+import CarouselDemoSvelte from './CarouselDemo.svelte';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+const basePath = import.meta.env.BASE_URL;
+---
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '手動ナビゲーション' : 'Manual Navigation'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'タブインジケーター、前へ/次へボタン、またはキーボードの矢印キーで操作できます。'
+        : 'Navigate using the tab indicators, previous/next buttons, or keyboard arrows.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <CarouselDemoSvelte client:load basePath={basePath} />
+  </div>
+</div>
+
+<div>
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '自動回転' : 'Auto-Rotation'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'スライドを自動的に切り替えます。ホバー、フォーカス、または一時停止ボタンのクリックで停止します。prefers-reduced-motion を尊重します。'
+        : 'Automatically rotates through slides. Pauses on hover, focus, or when the user clicks the pause button. Respects prefers-reduced-motion.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <CarouselDemoSvelte client:load variant="auto-rotate" basePath={basePath} />
+  </div>
+</div>
diff --git a/src/patterns/carousel/DemoSection.vue.astro b/src/patterns/carousel/DemoSection.vue.astro
new file mode 100644
index 00000000..99a95b1c
--- /dev/null
+++ b/src/patterns/carousel/DemoSection.vue.astro
@@ -0,0 +1,40 @@
+---
+import type { Locale } from '@/i18n/ui';
+import CarouselDemoVue from './CarouselDemo.vue';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+const basePath = import.meta.env.BASE_URL;
+---
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '手動ナビゲーション' : 'Manual Navigation'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'タブインジケーター、前へ/次へボタン、またはキーボードの矢印キーで操作できます。'
+        : 'Navigate using the tab indicators, previous/next buttons, or keyboard arrows.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <CarouselDemoVue client:load basePath={basePath} />
+  </div>
+</div>
+
+<div>
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '自動回転' : 'Auto-Rotation'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'スライドを自動的に切り替えます。ホバー、フォーカス、または一時停止ボタンのクリックで停止します。prefers-reduced-motion を尊重します。'
+        : 'Automatically rotates through slides. Pauses on hover, focus, or when the user clicks the pause button. Respects prefers-reduced-motion.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <CarouselDemoVue client:load variant="auto-rotate" basePath={basePath} />
+  </div>
+</div>
diff --git a/src/patterns/carousel/DemoSection.web-component.astro b/src/patterns/carousel/DemoSection.web-component.astro
new file mode 100644
index 00000000..ca16ca38
--- /dev/null
+++ b/src/patterns/carousel/DemoSection.web-component.astro
@@ -0,0 +1,39 @@
+---
+import type { Locale } from '@/i18n/ui';
+import CarouselDemoAstro from './CarouselDemo.astro';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '手動ナビゲーション' : 'Manual Navigation'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'タブインジケーター、前へ/次へボタン、またはキーボードの矢印キーで操作できます。'
+        : 'Navigate using the tab indicators, previous/next buttons, or keyboard arrows.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <CarouselDemoAstro />
+  </div>
+</div>
+
+<div>
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '自動回転' : 'Auto-Rotation'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'スライドを自動的に切り替えます。ホバー、フォーカス、または一時停止ボタンのクリックで停止します。prefers-reduced-motion を尊重します。'
+        : 'Automatically rotates through slides. Pauses on hover, focus, or when the user clicks the pause button. Respects prefers-reduced-motion.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <CarouselDemoAstro variant="auto-rotate" />
+  </div>
+</div>
diff --git a/src/patterns/checkbox/DemoSection.react.astro b/src/patterns/checkbox/DemoSection.react.astro
index b0323cc0..6497f1dc 100644
--- a/src/patterns/checkbox/DemoSection.react.astro
+++ b/src/patterns/checkbox/DemoSection.react.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import { Checkbox as CheckboxReact } from './Checkbox';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/checkbox/DemoSection.svelte.astro b/src/patterns/checkbox/DemoSection.svelte.astro
index 93586023..d6329db2 100644
--- a/src/patterns/checkbox/DemoSection.svelte.astro
+++ b/src/patterns/checkbox/DemoSection.svelte.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import CheckboxSvelte from './Checkbox.svelte';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/checkbox/DemoSection.vue.astro b/src/patterns/checkbox/DemoSection.vue.astro
index 600d76dd..1593dce5 100644
--- a/src/patterns/checkbox/DemoSection.vue.astro
+++ b/src/patterns/checkbox/DemoSection.vue.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import CheckboxVue from './Checkbox.vue';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/checkbox/DemoSection.web-component.astro b/src/patterns/checkbox/DemoSection.web-component.astro
index 2ff5f737..32766c9a 100644
--- a/src/patterns/checkbox/DemoSection.web-component.astro
+++ b/src/patterns/checkbox/DemoSection.web-component.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import CheckboxAstro from './Checkbox.astro';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/combobox/DemoSection.react.astro b/src/patterns/combobox/DemoSection.react.astro
index 47bfa83f..0c34f923 100644
--- a/src/patterns/combobox/DemoSection.react.astro
+++ b/src/patterns/combobox/DemoSection.react.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { Combobox as ComboboxReact } from './Combobox';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/combobox/DemoSection.svelte.astro b/src/patterns/combobox/DemoSection.svelte.astro
index 19911814..0d9968d0 100644
--- a/src/patterns/combobox/DemoSection.svelte.astro
+++ b/src/patterns/combobox/DemoSection.svelte.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import ComboboxSvelte from './Combobox.svelte';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/combobox/DemoSection.vue.astro b/src/patterns/combobox/DemoSection.vue.astro
index ec422c07..9f61a810 100644
--- a/src/patterns/combobox/DemoSection.vue.astro
+++ b/src/patterns/combobox/DemoSection.vue.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import ComboboxVue from './Combobox.vue';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/combobox/DemoSection.web-component.astro b/src/patterns/combobox/DemoSection.web-component.astro
index d2622d8a..02ea76dd 100644
--- a/src/patterns/combobox/DemoSection.web-component.astro
+++ b/src/patterns/combobox/DemoSection.web-component.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import ComboboxAstro from './Combobox.astro';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/data-grid/DemoSection.react.astro b/src/patterns/data-grid/DemoSection.react.astro
new file mode 100644
index 00000000..dd2f2138
--- /dev/null
+++ b/src/patterns/data-grid/DemoSection.react.astro
@@ -0,0 +1,9 @@
+---
+import { DataGridDemo as DataGridDemoReact } from './DataGridDemo';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <DataGridDemoReact client:load />
+</div>
diff --git a/src/patterns/data-grid/DemoSection.svelte.astro b/src/patterns/data-grid/DemoSection.svelte.astro
new file mode 100644
index 00000000..64fa5a37
--- /dev/null
+++ b/src/patterns/data-grid/DemoSection.svelte.astro
@@ -0,0 +1,9 @@
+---
+import DataGridDemoSvelte from './DataGridDemo.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <DataGridDemoSvelte client:load />
+</div>
diff --git a/src/patterns/data-grid/DemoSection.vue.astro b/src/patterns/data-grid/DemoSection.vue.astro
new file mode 100644
index 00000000..2d399ec7
--- /dev/null
+++ b/src/patterns/data-grid/DemoSection.vue.astro
@@ -0,0 +1,9 @@
+---
+import DataGridDemoVue from './DataGridDemo.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <DataGridDemoVue client:load />
+</div>
diff --git a/src/patterns/data-grid/DemoSection.astro b/src/patterns/data-grid/DemoSection.web-component.astro
similarity index 51%
rename from src/patterns/data-grid/DemoSection.astro
rename to src/patterns/data-grid/DemoSection.web-component.astro
index 39580038..d707fbd6 100644
--- a/src/patterns/data-grid/DemoSection.astro
+++ b/src/patterns/data-grid/DemoSection.web-component.astro
@@ -1,24 +1,8 @@
 ---
-/**
- * Data Grid Demo Section
- *
- * Renders the data grid demo for each framework variant.
- * React, Vue, and Svelte use dedicated Demo wrapper components.
- * Astro uses the DataGrid component directly with inline demo data.
- */
-import type { Framework } from '@/lib/frameworks';
-import { DataGridDemo as DataGridDemoReact } from './DataGridDemo';
-import DataGridDemoVue from './DataGridDemo.vue';
-import DataGridDemoSvelte from './DataGridDemo.svelte';
 import DataGrid from './DataGrid.astro';
 
-interface Props {
-  framework: Framework;
-}
+interface Props {}
 
-const { framework } = Astro.props;
-
-// Demo data for Astro variant
 const columns = [
   { id: 'name', header: 'Name', sortable: true, sortDirection: 'ascending' as const },
   { id: 'email', header: 'Email', sortable: true },
@@ -54,20 +38,13 @@ const rows = [
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
-  {framework === 'react' && <DataGridDemoReact client:load />}
-  {framework === 'vue' && <DataGridDemoVue client:load />}
-  {framework === 'svelte' && <DataGridDemoSvelte client:load />}
-  {
-    framework === 'astro' && (
-      <DataGrid
-        columns={columns}
-        rows={rows}
-        ariaLabel="Employee list"
-        rowSelectable
-        rowMultiselectable
-        enableRangeSelection
-        editable
-      />
-    )
-  }
+  <DataGrid
+    columns={columns}
+    rows={rows}
+    ariaLabel="Employee list"
+    rowSelectable
+    rowMultiselectable
+    enableRangeSelection
+    editable
+  />
 </div>
diff --git a/src/patterns/dialog/DemoSection.astro b/src/patterns/dialog/DemoSection.astro
deleted file mode 100644
index 0cb2c43e..00000000
--- a/src/patterns/dialog/DemoSection.astro
+++ /dev/null
@@ -1,219 +0,0 @@
----
-/**
- * Dialog Demo Section
- *
- * Renders the dialog demo for each framework variant.
- * React and Vue use client:only for proper portal/overlay handling.
- * Svelte uses client:load with contentHtml prop since it cannot use slots across islands.
- * Astro renders server-side with Web Component interactivity.
- */
-import type { Framework } from '@/lib/frameworks';
-import type { Locale } from '@/i18n/ui';
-import DialogDemoReact from './DialogDemo';
-import DialogDemoVue from './DialogDemo.vue';
-import DialogDemoSvelte from './DialogDemo.svelte';
-import Dialog from './Dialog.astro';
-
-interface Props {
-  framework: Framework;
-  locale?: Locale;
-}
-
-const { framework, locale = 'en' } = Astro.props;
-const isJa = locale === 'ja';
----
-
-<div>
-  {
-    framework === 'react' && (
-      <>
-        <div class="mb-8">
-          <h3 class="mb-3 text-lg font-medium">{isJa ? '基本ダイアログ' : 'Basic Dialog'}</h3>
-          <p class="text-muted-foreground mb-4 text-sm">
-            {isJa
-              ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。'
-              : 'A simple modal dialog with title, description, and close functionality.'}
-          </p>
-          <div class="border-border bg-background rounded-lg border p-6">
-            <DialogDemoReact
-              client:only="react"
-              title="Dialog Title"
-              description="This is a description of the dialog content. It provides additional context for users."
-              triggerText="Open Dialog"
-              triggerClass="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
-            >
-              <p class="mb-4">
-                This is the main content of the dialog. You can place any content here, such as
-                text, forms, or other components.
-              </p>
-              <p>
-                Press{' '}
-                <kbd class="rounded bg-gray-100 px-2 py-1 text-sm dark:bg-gray-800">Escape</kbd> or
-                click outside to close.
-              </p>
-            </DialogDemoReact>
-          </div>
-        </div>
-        <div class="mb-8">
-          <h3 class="mb-3 text-lg font-medium">{isJa ? '説明なし' : 'Without Description'}</h3>
-          <p class="text-muted-foreground mb-4 text-sm">
-            {isJa
-              ? 'タイトルとコンテンツのみのダイアログ。'
-              : 'A dialog with only a title and content.'}
-          </p>
-          <div class="border-border bg-background rounded-lg border p-6">
-            <DialogDemoReact
-              client:only="react"
-              title="Simple Dialog"
-              triggerText="Open Simple Dialog"
-              triggerClass="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
-            >
-              <p>This dialog has no description, only a title and content.</p>
-            </DialogDemoReact>
-          </div>
-        </div>
-      </>
-    )
-  }
-  {
-    framework === 'vue' && (
-      <>
-        <div class="mb-8">
-          <h3 class="mb-3 text-lg font-medium">{isJa ? '基本ダイアログ' : 'Basic Dialog'}</h3>
-          <p class="text-muted-foreground mb-4 text-sm">
-            {isJa
-              ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。'
-              : 'A simple modal dialog with title, description, and close functionality.'}
-          </p>
-          <div class="border-border bg-background rounded-lg border p-6">
-            <DialogDemoVue
-              client:only="vue"
-              title="Dialog Title"
-              description="This is a description of the dialog content. It provides additional context for users."
-              triggerText="Open Dialog"
-              triggerClass="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
-            >
-              <p class="mb-4">
-                This is the main content of the dialog. You can place any content here, such as
-                text, forms, or other components.
-              </p>
-              <p>
-                Press{' '}
-                <kbd class="rounded bg-gray-100 px-2 py-1 text-sm dark:bg-gray-800">Escape</kbd> or
-                click outside to close.
-              </p>
-            </DialogDemoVue>
-          </div>
-        </div>
-        <div class="mb-8">
-          <h3 class="mb-3 text-lg font-medium">{isJa ? '説明なし' : 'Without Description'}</h3>
-          <p class="text-muted-foreground mb-4 text-sm">
-            {isJa
-              ? 'タイトルとコンテンツのみのダイアログ。'
-              : 'A dialog with only a title and content.'}
-          </p>
-          <div class="border-border bg-background rounded-lg border p-6">
-            <DialogDemoVue
-              client:only="vue"
-              title="Simple Dialog"
-              triggerText="Open Simple Dialog"
-              triggerClass="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
-            >
-              <p>This dialog has no description, only a title and content.</p>
-            </DialogDemoVue>
-          </div>
-        </div>
-      </>
-    )
-  }
-  {
-    framework === 'svelte' && (
-      <>
-        <div class="mb-8">
-          <h3 class="mb-3 text-lg font-medium">{isJa ? '基本ダイアログ' : 'Basic Dialog'}</h3>
-          <p class="text-muted-foreground mb-4 text-sm">
-            {isJa
-              ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。'
-              : 'A simple modal dialog with title, description, and close functionality.'}
-          </p>
-          <div class="border-border bg-background rounded-lg border p-6">
-            <DialogDemoSvelte
-              client:load
-              title="Dialog Title"
-              description="This is a description of the dialog content. It provides additional context for users."
-              triggerText="Open Dialog"
-              triggerClass="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
-              contentHtml={`<p class="mb-4">This is the main content of the dialog. You can place any content here, such as text, forms, or other components.</p><p>Press <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded text-sm">Escape</kbd> or click outside to close.</p>`}
-            />
-          </div>
-        </div>
-        <div class="mb-8">
-          <h3 class="mb-3 text-lg font-medium">{isJa ? '説明なし' : 'Without Description'}</h3>
-          <p class="text-muted-foreground mb-4 text-sm">
-            {isJa
-              ? 'タイトルとコンテンツのみのダイアログ。'
-              : 'A dialog with only a title and content.'}
-          </p>
-          <div class="border-border bg-background rounded-lg border p-6">
-            <DialogDemoSvelte
-              client:load
-              title="Simple Dialog"
-              triggerText="Open Simple Dialog"
-              triggerClass="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
-              contentHtml="<p>This dialog has no description, only a title and content.</p>"
-            />
-          </div>
-        </div>
-      </>
-    )
-  }
-  {
-    framework === 'astro' && (
-      <>
-        <div class="mb-8">
-          <h3 class="mb-3 text-lg font-medium">{isJa ? '基本ダイアログ' : 'Basic Dialog'}</h3>
-          <p class="text-muted-foreground mb-4 text-sm">
-            {isJa
-              ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。'
-              : 'A simple modal dialog with title, description, and close functionality.'}
-          </p>
-          <div class="border-border bg-background rounded-lg border p-6">
-            <Dialog
-              title="Dialog Title"
-              description="This is a description of the dialog content. It provides additional context for users."
-              triggerText="Open Dialog"
-              triggerClass="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
-            >
-              <p class="mb-4">
-                This is the main content of the dialog. You can place any content here, such as
-                text, forms, or other components.
-              </p>
-              <p>
-                Press{' '}
-                <kbd class="rounded bg-gray-100 px-2 py-1 text-sm dark:bg-gray-800">Escape</kbd> or
-                click outside to close.
-              </p>
-            </Dialog>
-          </div>
-        </div>
-        <div class="mb-8">
-          <h3 class="mb-3 text-lg font-medium">{isJa ? '説明なし' : 'Without Description'}</h3>
-          <p class="text-muted-foreground mb-4 text-sm">
-            {isJa
-              ? 'タイトルとコンテンツのみのダイアログ。'
-              : 'A dialog with only a title and content.'}
-          </p>
-          <div class="border-border bg-background rounded-lg border p-6">
-            <Dialog
-              title="Simple Dialog"
-              triggerText="Open Simple Dialog"
-              triggerClass="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
-            >
-              <p>This dialog has no description, only a title and content.</p>
-            </Dialog>
-          </div>
-        </div>
-      </>
-    )
-  }
-</div>
diff --git a/src/patterns/dialog/DemoSection.react.astro b/src/patterns/dialog/DemoSection.react.astro
new file mode 100644
index 00000000..fad151fd
--- /dev/null
+++ b/src/patterns/dialog/DemoSection.react.astro
@@ -0,0 +1,57 @@
+---
+import type { Locale } from '@/i18n/ui';
+import DialogDemoReact from './DialogDemo';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '基本ダイアログ' : 'Basic Dialog'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。'
+        : 'A simple modal dialog with title, description, and close functionality.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <DialogDemoReact
+      client:only="react"
+      title="Dialog Title"
+      description="This is a description of the dialog content. It provides additional context for users."
+      triggerText="Open Dialog"
+      triggerClass="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+    >
+      <p class="mb-4">
+        This is the main content of the dialog. You can place any content here, such as text, forms,
+        or other components.
+      </p>
+      <p>
+        Press <kbd class="rounded bg-gray-100 px-2 py-1 text-sm dark:bg-gray-800">Escape</kbd> or click
+        outside to close.
+      </p>
+    </DialogDemoReact>
+  </div>
+</div>
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '説明なし' : 'Without Description'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {isJa ? 'タイトルとコンテンツのみのダイアログ。' : 'A dialog with only a title and content.'}
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <DialogDemoReact
+      client:only="react"
+      title="Simple Dialog"
+      triggerText="Open Simple Dialog"
+      triggerClass="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
+    >
+      <p>This dialog has no description, only a title and content.</p>
+    </DialogDemoReact>
+  </div>
+</div>
diff --git a/src/patterns/dialog/DemoSection.svelte.astro b/src/patterns/dialog/DemoSection.svelte.astro
new file mode 100644
index 00000000..212b1799
--- /dev/null
+++ b/src/patterns/dialog/DemoSection.svelte.astro
@@ -0,0 +1,48 @@
+---
+import type { Locale } from '@/i18n/ui';
+import DialogDemoSvelte from './DialogDemo.svelte';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '基本ダイアログ' : 'Basic Dialog'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。'
+        : 'A simple modal dialog with title, description, and close functionality.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <DialogDemoSvelte
+      client:load
+      title="Dialog Title"
+      description="This is a description of the dialog content. It provides additional context for users."
+      triggerText="Open Dialog"
+      triggerClass="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+      contentHtml={`<p class="mb-4">This is the main content of the dialog. You can place any content here, such as text, forms, or other components.</p><p>Press <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded text-sm">Escape</kbd> or click outside to close.</p>`}
+    />
+  </div>
+</div>
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '説明なし' : 'Without Description'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {isJa ? 'タイトルとコンテンツのみのダイアログ。' : 'A dialog with only a title and content.'}
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <DialogDemoSvelte
+      client:load
+      title="Simple Dialog"
+      triggerText="Open Simple Dialog"
+      triggerClass="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
+      contentHtml="<p>This dialog has no description, only a title and content.</p>"
+    />
+  </div>
+</div>
diff --git a/src/patterns/dialog/DemoSection.vue.astro b/src/patterns/dialog/DemoSection.vue.astro
new file mode 100644
index 00000000..e1fa726b
--- /dev/null
+++ b/src/patterns/dialog/DemoSection.vue.astro
@@ -0,0 +1,57 @@
+---
+import type { Locale } from '@/i18n/ui';
+import DialogDemoVue from './DialogDemo.vue';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '基本ダイアログ' : 'Basic Dialog'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。'
+        : 'A simple modal dialog with title, description, and close functionality.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <DialogDemoVue
+      client:only="vue"
+      title="Dialog Title"
+      description="This is a description of the dialog content. It provides additional context for users."
+      triggerText="Open Dialog"
+      triggerClass="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+    >
+      <p class="mb-4">
+        This is the main content of the dialog. You can place any content here, such as text, forms,
+        or other components.
+      </p>
+      <p>
+        Press <kbd class="rounded bg-gray-100 px-2 py-1 text-sm dark:bg-gray-800">Escape</kbd> or click
+        outside to close.
+      </p>
+    </DialogDemoVue>
+  </div>
+</div>
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '説明なし' : 'Without Description'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {isJa ? 'タイトルとコンテンツのみのダイアログ。' : 'A dialog with only a title and content.'}
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <DialogDemoVue
+      client:only="vue"
+      title="Simple Dialog"
+      triggerText="Open Simple Dialog"
+      triggerClass="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
+    >
+      <p>This dialog has no description, only a title and content.</p>
+    </DialogDemoVue>
+  </div>
+</div>
diff --git a/src/patterns/dialog/DemoSection.web-component.astro b/src/patterns/dialog/DemoSection.web-component.astro
new file mode 100644
index 00000000..5a44cc6f
--- /dev/null
+++ b/src/patterns/dialog/DemoSection.web-component.astro
@@ -0,0 +1,55 @@
+---
+import type { Locale } from '@/i18n/ui';
+import Dialog from './Dialog.astro';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '基本ダイアログ' : 'Basic Dialog'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? 'タイトル、説明、閉じる機能を備えたシンプルなモーダルダイアログ。'
+        : 'A simple modal dialog with title, description, and close functionality.'
+    }
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <Dialog
+      title="Dialog Title"
+      description="This is a description of the dialog content. It provides additional context for users."
+      triggerText="Open Dialog"
+      triggerClass="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+    >
+      <p class="mb-4">
+        This is the main content of the dialog. You can place any content here, such as text, forms,
+        or other components.
+      </p>
+      <p>
+        Press <kbd class="rounded bg-gray-100 px-2 py-1 text-sm dark:bg-gray-800">Escape</kbd> or click
+        outside to close.
+      </p>
+    </Dialog>
+  </div>
+</div>
+
+<div class="mb-8">
+  <h3 class="mb-3 text-lg font-medium">{isJa ? '説明なし' : 'Without Description'}</h3>
+  <p class="text-muted-foreground mb-4 text-sm">
+    {isJa ? 'タイトルとコンテンツのみのダイアログ。' : 'A dialog with only a title and content.'}
+  </p>
+  <div class="border-border bg-background rounded-lg border p-6">
+    <Dialog
+      title="Simple Dialog"
+      triggerText="Open Simple Dialog"
+      triggerClass="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
+    >
+      <p>This dialog has no description, only a title and content.</p>
+    </Dialog>
+  </div>
+</div>
diff --git a/src/patterns/disclosure/DemoSection.react.astro b/src/patterns/disclosure/DemoSection.react.astro
index 6f77f44a..9094afe5 100644
--- a/src/patterns/disclosure/DemoSection.react.astro
+++ b/src/patterns/disclosure/DemoSection.react.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { Disclosure as DisclosureReact } from './Disclosure';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/disclosure/DemoSection.svelte.astro b/src/patterns/disclosure/DemoSection.svelte.astro
index 3f9fd169..41ffb898 100644
--- a/src/patterns/disclosure/DemoSection.svelte.astro
+++ b/src/patterns/disclosure/DemoSection.svelte.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import DisclosureSvelte from './Disclosure.svelte';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/disclosure/DemoSection.vue.astro b/src/patterns/disclosure/DemoSection.vue.astro
index ad20fafd..f7265e5b 100644
--- a/src/patterns/disclosure/DemoSection.vue.astro
+++ b/src/patterns/disclosure/DemoSection.vue.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import DisclosureVue from './Disclosure.vue';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/disclosure/DemoSection.web-component.astro b/src/patterns/disclosure/DemoSection.web-component.astro
index 2cf30a65..582ea966 100644
--- a/src/patterns/disclosure/DemoSection.web-component.astro
+++ b/src/patterns/disclosure/DemoSection.web-component.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import DisclosureAstro from './Disclosure.astro';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/feed/DemoSection.astro b/src/patterns/feed/DemoSection.astro
deleted file mode 100644
index bd81fcd1..00000000
--- a/src/patterns/feed/DemoSection.astro
+++ /dev/null
@@ -1,38 +0,0 @@
----
-/**
- * Feed Demo Section
- *
- * Renders the feed demo for each framework variant.
- * Uses locale-specific demo components (FeedDemo / FeedDemoJa)
- * to display articles in the appropriate language.
- */
-import type { Framework } from '@/lib/frameworks';
-import { FeedDemo as FeedDemoReact } from './FeedDemo';
-import FeedDemoVue from './FeedDemo.vue';
-import FeedDemoSvelte from './FeedDemo.svelte';
-import FeedDemoAstro from './FeedDemo.astro';
-import { FeedDemoJa as FeedDemoJaReact } from './FeedDemoJa';
-import FeedDemoJaVue from './FeedDemoJa.vue';
-import FeedDemoJaSvelte from './FeedDemoJa.svelte';
-import FeedDemoJaAstro from './FeedDemoJa.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
-const isJa = Astro.url.pathname.startsWith('/ja/');
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  {
-    framework === 'react' &&
-      (isJa ? <FeedDemoJaReact client:load /> : <FeedDemoReact client:load />)
-  }
-  {framework === 'vue' && (isJa ? <FeedDemoJaVue client:load /> : <FeedDemoVue client:load />)}
-  {
-    framework === 'svelte' &&
-      (isJa ? <FeedDemoJaSvelte client:load /> : <FeedDemoSvelte client:load />)
-  }
-  {framework === 'astro' && (isJa ? <FeedDemoJaAstro /> : <FeedDemoAstro />)}
-</div>
diff --git a/src/patterns/feed/DemoSection.react.astro b/src/patterns/feed/DemoSection.react.astro
new file mode 100644
index 00000000..774bf06e
--- /dev/null
+++ b/src/patterns/feed/DemoSection.react.astro
@@ -0,0 +1,16 @@
+---
+import type { Locale } from '@/i18n/ui';
+import { FeedDemo as FeedDemoReact } from './FeedDemo';
+import { FeedDemoJa as FeedDemoJaReact } from './FeedDemoJa';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  {isJa ? <FeedDemoJaReact client:load /> : <FeedDemoReact client:load />}
+</div>
diff --git a/src/patterns/feed/DemoSection.svelte.astro b/src/patterns/feed/DemoSection.svelte.astro
new file mode 100644
index 00000000..6794ed24
--- /dev/null
+++ b/src/patterns/feed/DemoSection.svelte.astro
@@ -0,0 +1,16 @@
+---
+import type { Locale } from '@/i18n/ui';
+import FeedDemoSvelte from './FeedDemo.svelte';
+import FeedDemoJaSvelte from './FeedDemoJa.svelte';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  {isJa ? <FeedDemoJaSvelte client:load /> : <FeedDemoSvelte client:load />}
+</div>
diff --git a/src/patterns/feed/DemoSection.vue.astro b/src/patterns/feed/DemoSection.vue.astro
new file mode 100644
index 00000000..aa69da3d
--- /dev/null
+++ b/src/patterns/feed/DemoSection.vue.astro
@@ -0,0 +1,16 @@
+---
+import type { Locale } from '@/i18n/ui';
+import FeedDemoVue from './FeedDemo.vue';
+import FeedDemoJaVue from './FeedDemoJa.vue';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  {isJa ? <FeedDemoJaVue client:load /> : <FeedDemoVue client:load />}
+</div>
diff --git a/src/patterns/feed/DemoSection.web-component.astro b/src/patterns/feed/DemoSection.web-component.astro
new file mode 100644
index 00000000..5f4fc5bc
--- /dev/null
+++ b/src/patterns/feed/DemoSection.web-component.astro
@@ -0,0 +1,16 @@
+---
+import type { Locale } from '@/i18n/ui';
+import FeedDemoAstro from './FeedDemo.astro';
+import FeedDemoJaAstro from './FeedDemoJa.astro';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  {isJa ? <FeedDemoJaAstro /> : <FeedDemoAstro />}
+</div>
diff --git a/src/patterns/grid/DemoSection.react.astro b/src/patterns/grid/DemoSection.react.astro
new file mode 100644
index 00000000..ee417f2e
--- /dev/null
+++ b/src/patterns/grid/DemoSection.react.astro
@@ -0,0 +1,22 @@
+---
+import type { Locale } from '@/i18n/ui';
+import { GridDemo as GridDemoReact } from './GridDemo';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? '矢印キーで移動します。スペースキーでセルを選択します。Enterキーでアクティブにします。'
+        : 'Navigate with arrow keys. Press Space to select cells. Press Enter to activate.'
+    }
+  </p>
+  <GridDemoReact client:load />
+</div>
diff --git a/src/patterns/grid/DemoSection.svelte.astro b/src/patterns/grid/DemoSection.svelte.astro
new file mode 100644
index 00000000..f7487ad1
--- /dev/null
+++ b/src/patterns/grid/DemoSection.svelte.astro
@@ -0,0 +1,22 @@
+---
+import type { Locale } from '@/i18n/ui';
+import GridDemoSvelte from './GridDemo.svelte';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? '矢印キーで移動します。スペースキーでセルを選択します。Enterキーでアクティブにします。'
+        : 'Navigate with arrow keys. Press Space to select cells. Press Enter to activate.'
+    }
+  </p>
+  <GridDemoSvelte client:load />
+</div>
diff --git a/src/patterns/grid/DemoSection.vue.astro b/src/patterns/grid/DemoSection.vue.astro
new file mode 100644
index 00000000..c1462206
--- /dev/null
+++ b/src/patterns/grid/DemoSection.vue.astro
@@ -0,0 +1,22 @@
+---
+import type { Locale } from '@/i18n/ui';
+import GridDemoVue from './GridDemo.vue';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? '矢印キーで移動します。スペースキーでセルを選択します。Enterキーでアクティブにします。'
+        : 'Navigate with arrow keys. Press Space to select cells. Press Enter to activate.'
+    }
+  </p>
+  <GridDemoVue client:load />
+</div>
diff --git a/src/patterns/grid/DemoSection.astro b/src/patterns/grid/DemoSection.web-component.astro
similarity index 70%
rename from src/patterns/grid/DemoSection.astro
rename to src/patterns/grid/DemoSection.web-component.astro
index dc76401f..682331fa 100644
--- a/src/patterns/grid/DemoSection.astro
+++ b/src/patterns/grid/DemoSection.web-component.astro
@@ -1,24 +1,12 @@
 ---
-/**
- * Grid Demo Section
- *
- * Renders the grid demo for each framework variant.
- * React, Vue, and Svelte use their respective GridDemo wrapper components.
- * Astro uses the Grid component directly with inline data.
- */
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
-import { GridDemo as GridDemoReact } from './GridDemo';
-import GridDemoVue from './GridDemo.vue';
-import GridDemoSvelte from './GridDemo.svelte';
 import Grid, { type GridCellData } from './Grid.astro';
 
 interface Props {
-  framework: Framework;
   locale?: Locale;
 }
 
-const { framework, locale = 'en' } = Astro.props;
+const { locale = 'en' } = Astro.props;
 const isJa = locale === 'ja';
 
 const columns = [
@@ -92,19 +80,12 @@ const renderCell = (cell: GridCellData, rowId: string, colId: string) => {
         : 'Navigate with arrow keys. Press Space to select cells. Press Enter to activate.'
     }
   </p>
-  {framework === 'react' && <GridDemoReact client:load />}
-  {framework === 'vue' && <GridDemoVue client:load />}
-  {framework === 'svelte' && <GridDemoSvelte client:load />}
-  {
-    framework === 'astro' && (
-      <Grid
-        columns={columns}
-        rows={rows}
-        ariaLabel="User list"
-        selectable
-        multiselectable
-        renderCell={renderCell}
-      />
-    )
-  }
+  <Grid
+    columns={columns}
+    rows={rows}
+    ariaLabel="User list"
+    selectable
+    multiselectable
+    renderCell={renderCell}
+  />
 </div>
diff --git a/src/patterns/landmarks/DemoSection.astro b/src/patterns/landmarks/DemoSection.astro
deleted file mode 100644
index 898e6bb1..00000000
--- a/src/patterns/landmarks/DemoSection.astro
+++ /dev/null
@@ -1,27 +0,0 @@
----
-/**
- * Landmarks Demo Section
- *
- * Renders the landmark demo for each framework variant.
- * Each framework's component is statically imported to support
- * Astro's client:load directive for hydration.
- */
-import type { Framework } from '@/lib/frameworks';
-import { LandmarkDemo as LandmarkDemoReact } from './LandmarkDemo';
-import LandmarkDemoVue from './LandmarkDemo.vue';
-import LandmarkDemoSvelte from './LandmarkDemo.svelte';
-import LandmarkDemoAstro from './LandmarkDemo.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  {framework === 'react' && <LandmarkDemoReact client:load showLabels={true} />}
-  {framework === 'vue' && <LandmarkDemoVue client:load showLabels={true} />}
-  {framework === 'svelte' && <LandmarkDemoSvelte client:load showLabels={true} />}
-  {framework === 'astro' && <LandmarkDemoAstro showLabels={true} />}
-</div>
diff --git a/src/patterns/landmarks/DemoSection.react.astro b/src/patterns/landmarks/DemoSection.react.astro
new file mode 100644
index 00000000..76c8e52e
--- /dev/null
+++ b/src/patterns/landmarks/DemoSection.react.astro
@@ -0,0 +1,9 @@
+---
+import { LandmarkDemo as LandmarkDemoReact } from './LandmarkDemo';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <LandmarkDemoReact client:load showLabels={true} />
+</div>
diff --git a/src/patterns/landmarks/DemoSection.svelte.astro b/src/patterns/landmarks/DemoSection.svelte.astro
new file mode 100644
index 00000000..87552c5a
--- /dev/null
+++ b/src/patterns/landmarks/DemoSection.svelte.astro
@@ -0,0 +1,9 @@
+---
+import LandmarkDemoSvelte from './LandmarkDemo.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <LandmarkDemoSvelte client:load showLabels={true} />
+</div>
diff --git a/src/patterns/landmarks/DemoSection.vue.astro b/src/patterns/landmarks/DemoSection.vue.astro
new file mode 100644
index 00000000..9f347682
--- /dev/null
+++ b/src/patterns/landmarks/DemoSection.vue.astro
@@ -0,0 +1,9 @@
+---
+import LandmarkDemoVue from './LandmarkDemo.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <LandmarkDemoVue client:load showLabels={true} />
+</div>
diff --git a/src/patterns/landmarks/DemoSection.web-component.astro b/src/patterns/landmarks/DemoSection.web-component.astro
new file mode 100644
index 00000000..d02e0ba4
--- /dev/null
+++ b/src/patterns/landmarks/DemoSection.web-component.astro
@@ -0,0 +1,9 @@
+---
+import LandmarkDemoAstro from './LandmarkDemo.astro';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <LandmarkDemoAstro showLabels={true} />
+</div>
diff --git a/src/patterns/link/DemoSection.astro b/src/patterns/link/DemoSection.astro
deleted file mode 100644
index 6270dafd..00000000
--- a/src/patterns/link/DemoSection.astro
+++ /dev/null
@@ -1,86 +0,0 @@
----
-/**
- * Link Demo Section
- *
- * Renders the link demo for each framework variant.
- * Each framework's component is statically imported to support
- * Astro's client:load directive for hydration.
- */
-import type { Framework } from '@/lib/frameworks';
-import { Link as LinkReact } from './Link';
-import LinkVue from './Link.vue';
-import LinkSvelte from './Link.svelte';
-import LinkAstro from './Link.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  <div class="flex flex-col items-start gap-4">
-    {
-      framework === 'react' && (
-        <>
-          <LinkReact client:load href="https://www.w3.org/WAI/ARIA/apg/">
-            WAI-ARIA APG Documentation
-          </LinkReact>
-          <LinkReact client:load href="https://example.com" target="_blank">
-            External Link (opens in new tab)
-          </LinkReact>
-          <LinkReact client:load onClick={() => alert('Link clicked!')}>
-            Link with onClick handler
-          </LinkReact>
-          <LinkReact client:load href="#" disabled>
-            Disabled Link
-          </LinkReact>
-        </>
-      )
-    }
-    {
-      framework === 'vue' && (
-        <>
-          <LinkVue client:load href="https://www.w3.org/WAI/ARIA/apg/">
-            WAI-ARIA APG Documentation
-          </LinkVue>
-          <LinkVue client:load href="https://example.com" target="_blank">
-            External Link (opens in new tab)
-          </LinkVue>
-          <LinkVue client:load href="#" disabled>
-            Disabled Link
-          </LinkVue>
-        </>
-      )
-    }
-    {
-      framework === 'svelte' && (
-        <>
-          <LinkSvelte client:load href="https://www.w3.org/WAI/ARIA/apg/">
-            WAI-ARIA APG Documentation
-          </LinkSvelte>
-          <LinkSvelte client:load href="https://example.com" target="_blank">
-            External Link (opens in new tab)
-          </LinkSvelte>
-          <LinkSvelte client:load href="#" disabled>
-            Disabled Link
-          </LinkSvelte>
-        </>
-      )
-    }
-    {
-      framework === 'astro' && (
-        <>
-          <LinkAstro href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA APG Documentation</LinkAstro>
-          <LinkAstro href="https://example.com" target="_blank">
-            External Link (opens in new tab)
-          </LinkAstro>
-          <LinkAstro href="#" disabled>
-            Disabled Link
-          </LinkAstro>
-        </>
-      )
-    }
-  </div>
-</div>
diff --git a/src/patterns/link/DemoSection.react.astro b/src/patterns/link/DemoSection.react.astro
new file mode 100644
index 00000000..c0256509
--- /dev/null
+++ b/src/patterns/link/DemoSection.react.astro
@@ -0,0 +1,20 @@
+---
+import { Link as LinkReact } from './Link';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col items-start gap-4">
+    <LinkReact client:load href="https://www.w3.org/WAI/ARIA/apg/">
+      WAI-ARIA APG Documentation
+    </LinkReact>
+    <LinkReact client:load href="https://example.com" target="_blank">
+      External Link (opens in new tab)
+    </LinkReact>
+    <LinkReact client:load onClick={() => alert('Link clicked!')}>
+      Link with onClick handler
+    </LinkReact>
+    <LinkReact client:load href="#" disabled>Disabled Link</LinkReact>
+  </div>
+</div>
diff --git a/src/patterns/link/DemoSection.svelte.astro b/src/patterns/link/DemoSection.svelte.astro
new file mode 100644
index 00000000..320427ce
--- /dev/null
+++ b/src/patterns/link/DemoSection.svelte.astro
@@ -0,0 +1,17 @@
+---
+import LinkSvelte from './Link.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col items-start gap-4">
+    <LinkSvelte client:load href="https://www.w3.org/WAI/ARIA/apg/">
+      WAI-ARIA APG Documentation
+    </LinkSvelte>
+    <LinkSvelte client:load href="https://example.com" target="_blank">
+      External Link (opens in new tab)
+    </LinkSvelte>
+    <LinkSvelte client:load href="#" disabled>Disabled Link</LinkSvelte>
+  </div>
+</div>
diff --git a/src/patterns/link/DemoSection.vue.astro b/src/patterns/link/DemoSection.vue.astro
new file mode 100644
index 00000000..7891b256
--- /dev/null
+++ b/src/patterns/link/DemoSection.vue.astro
@@ -0,0 +1,17 @@
+---
+import LinkVue from './Link.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col items-start gap-4">
+    <LinkVue client:load href="https://www.w3.org/WAI/ARIA/apg/">
+      WAI-ARIA APG Documentation
+    </LinkVue>
+    <LinkVue client:load href="https://example.com" target="_blank">
+      External Link (opens in new tab)
+    </LinkVue>
+    <LinkVue client:load href="#" disabled>Disabled Link</LinkVue>
+  </div>
+</div>
diff --git a/src/patterns/link/DemoSection.web-component.astro b/src/patterns/link/DemoSection.web-component.astro
new file mode 100644
index 00000000..a571c427
--- /dev/null
+++ b/src/patterns/link/DemoSection.web-component.astro
@@ -0,0 +1,15 @@
+---
+import LinkAstro from './Link.astro';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col items-start gap-4">
+    <LinkAstro href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA APG Documentation</LinkAstro>
+    <LinkAstro href="https://example.com" target="_blank">
+      External Link (opens in new tab)
+    </LinkAstro>
+    <LinkAstro href="#" disabled>Disabled Link</LinkAstro>
+  </div>
+</div>
diff --git a/src/patterns/listbox/DemoSection.react.astro b/src/patterns/listbox/DemoSection.react.astro
index 6b9efb0a..42adbc4d 100644
--- a/src/patterns/listbox/DemoSection.react.astro
+++ b/src/patterns/listbox/DemoSection.react.astro
@@ -1,5 +1,4 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import {
   SingleSelectListboxDemo,
@@ -8,7 +7,6 @@ import {
 } from './ListboxDemo';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/listbox/DemoSection.svelte.astro b/src/patterns/listbox/DemoSection.svelte.astro
index 328a591d..a7b6725e 100644
--- a/src/patterns/listbox/DemoSection.svelte.astro
+++ b/src/patterns/listbox/DemoSection.svelte.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import ListboxDemoSvelte from './ListboxDemo.svelte';
 import { fruitOptions, colorOptions } from './listbox-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/listbox/DemoSection.vue.astro b/src/patterns/listbox/DemoSection.vue.astro
index cbe5cc39..051caafa 100644
--- a/src/patterns/listbox/DemoSection.vue.astro
+++ b/src/patterns/listbox/DemoSection.vue.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import ListboxDemoVue from './ListboxDemo.vue';
 import { fruitOptions, colorOptions } from './listbox-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/listbox/DemoSection.web-component.astro b/src/patterns/listbox/DemoSection.web-component.astro
index 615eeb68..031ef95c 100644
--- a/src/patterns/listbox/DemoSection.web-component.astro
+++ b/src/patterns/listbox/DemoSection.web-component.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import Listbox from './Listbox.astro';
 import { fruitOptions, colorOptions } from './listbox-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/menu-button/DemoSection.react.astro b/src/patterns/menu-button/DemoSection.react.astro
index 10e2c1f4..0164253c 100644
--- a/src/patterns/menu-button/DemoSection.react.astro
+++ b/src/patterns/menu-button/DemoSection.react.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { BasicMenuButtonDemo, DisabledItemsMenuButtonDemo } from './MenuButtonDemo';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/menu-button/DemoSection.svelte.astro b/src/patterns/menu-button/DemoSection.svelte.astro
index b0d2299c..753f29a1 100644
--- a/src/patterns/menu-button/DemoSection.svelte.astro
+++ b/src/patterns/menu-button/DemoSection.svelte.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import MenuButtonDemoSvelte from './MenuButtonDemo.svelte';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/menu-button/DemoSection.vue.astro b/src/patterns/menu-button/DemoSection.vue.astro
index 294823f8..b0b16fed 100644
--- a/src/patterns/menu-button/DemoSection.vue.astro
+++ b/src/patterns/menu-button/DemoSection.vue.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import MenuButtonDemoVue from './MenuButtonDemo.vue';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/menu-button/DemoSection.web-component.astro b/src/patterns/menu-button/DemoSection.web-component.astro
index 12c9ab95..41d07a08 100644
--- a/src/patterns/menu-button/DemoSection.web-component.astro
+++ b/src/patterns/menu-button/DemoSection.web-component.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import MenuButton from './MenuButton.astro';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/menubar/DemoSection.react.astro b/src/patterns/menubar/DemoSection.react.astro
index 0780bd90..902e3640 100644
--- a/src/patterns/menubar/DemoSection.react.astro
+++ b/src/patterns/menubar/DemoSection.react.astro
@@ -1,11 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import { BasicMenubarDemo } from './MenubarDemo';
 import '@patterns/menubar/menubar.css';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/menubar/DemoSection.svelte.astro b/src/patterns/menubar/DemoSection.svelte.astro
index aa1d3c2d..4afe5a9c 100644
--- a/src/patterns/menubar/DemoSection.svelte.astro
+++ b/src/patterns/menubar/DemoSection.svelte.astro
@@ -1,11 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import MenubarDemoSvelte from './MenubarDemo.svelte';
 import '@patterns/menubar/menubar.css';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/menubar/DemoSection.vue.astro b/src/patterns/menubar/DemoSection.vue.astro
index 90b59e65..4fb34a10 100644
--- a/src/patterns/menubar/DemoSection.vue.astro
+++ b/src/patterns/menubar/DemoSection.vue.astro
@@ -1,11 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import MenubarDemoVue from './MenubarDemo.vue';
 import '@patterns/menubar/menubar.css';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/menubar/DemoSection.web-component.astro b/src/patterns/menubar/DemoSection.web-component.astro
index 7d5630bc..c5ce4172 100644
--- a/src/patterns/menubar/DemoSection.web-component.astro
+++ b/src/patterns/menubar/DemoSection.web-component.astro
@@ -1,11 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import Menubar, { type MenubarItem } from './Menubar.astro';
 import '@patterns/menubar/menubar.css';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 
 const menubarItems: MenubarItem[] = [
   {
diff --git a/src/patterns/meter/DemoSection.astro b/src/patterns/meter/DemoSection.astro
deleted file mode 100644
index b8e7f748..00000000
--- a/src/patterns/meter/DemoSection.astro
+++ /dev/null
@@ -1,97 +0,0 @@
----
-/**
- * Meter Demo Section
- *
- * Renders the meter demo for each framework variant.
- * Each framework's component is statically imported to support
- * Astro's client:load directive for hydration.
- */
-import type { Framework } from '@/lib/frameworks';
-import { Meter as MeterReact } from './Meter';
-import MeterVue from './Meter.vue';
-import MeterSvelte from './Meter.svelte';
-import MeterAstro from './Meter.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  <div class="flex flex-col gap-6">
-    {
-      framework === 'react' && (
-        <>
-          <div>
-            <MeterReact value={75} label="CPU Usage" valueText="75%" />
-          </div>
-          <div>
-            <MeterReact value={3.5} min={0} max={5} label="Rating" valueText="3.5 / 5" />
-          </div>
-          <div>
-            <MeterReact value={-10} min={-50} max={50} label="Temperature" valueText="-10°C" />
-          </div>
-          <div>
-            <MeterReact value={65} min={0} max={100} label="Progress" valueText="65%" />
-          </div>
-        </>
-      )
-    }
-    {
-      framework === 'vue' && (
-        <>
-          <div>
-            <MeterVue value={75} label="CPU Usage" format="{value}%" />
-          </div>
-          <div>
-            <MeterVue value={3.5} min={0} max={5} label="Rating" format="{value} / {max}" />
-          </div>
-          <div>
-            <MeterVue value={-10} min={-50} max={50} label="Temperature" valueText="-10°C" />
-          </div>
-          <div>
-            <MeterVue value={65} min={0} max={100} label="Progress" format="{value}%" />
-          </div>
-        </>
-      )
-    }
-    {
-      framework === 'svelte' && (
-        <>
-          <div>
-            <MeterSvelte value={75} label="CPU Usage" format="{value}%" />
-          </div>
-          <div>
-            <MeterSvelte value={3.5} min={0} max={5} label="Rating" format="{value} / {max}" />
-          </div>
-          <div>
-            <MeterSvelte value={-10} min={-50} max={50} label="Temperature" valueText="-10°C" />
-          </div>
-          <div>
-            <MeterSvelte value={65} min={0} max={100} label="Progress" format="{value}%" />
-          </div>
-        </>
-      )
-    }
-    {
-      framework === 'astro' && (
-        <>
-          <div>
-            <MeterAstro value={75} label="CPU Usage" format="{value}%" />
-          </div>
-          <div>
-            <MeterAstro value={3.5} min={0} max={5} label="Rating" format="{value} / {max}" />
-          </div>
-          <div>
-            <MeterAstro value={-10} min={-50} max={50} label="Temperature" valueText="-10°C" />
-          </div>
-          <div>
-            <MeterAstro value={65} min={0} max={100} label="Progress" format="{value}%" />
-          </div>
-        </>
-      )
-    }
-  </div>
-</div>
diff --git a/src/patterns/meter/DemoSection.react.astro b/src/patterns/meter/DemoSection.react.astro
new file mode 100644
index 00000000..1fe01a6d
--- /dev/null
+++ b/src/patterns/meter/DemoSection.react.astro
@@ -0,0 +1,14 @@
+---
+import { Meter as MeterReact } from './Meter';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col gap-6">
+    <div><MeterReact value={75} label="CPU Usage" valueText="75%" /></div>
+    <div><MeterReact value={3.5} min={0} max={5} label="Rating" valueText="3.5 / 5" /></div>
+    <div><MeterReact value={-10} min={-50} max={50} label="Temperature" valueText="-10°C" /></div>
+    <div><MeterReact value={65} min={0} max={100} label="Progress" valueText="65%" /></div>
+  </div>
+</div>
diff --git a/src/patterns/meter/DemoSection.svelte.astro b/src/patterns/meter/DemoSection.svelte.astro
new file mode 100644
index 00000000..2a6682a6
--- /dev/null
+++ b/src/patterns/meter/DemoSection.svelte.astro
@@ -0,0 +1,16 @@
+---
+import MeterSvelte from './Meter.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col gap-6">
+    <div><MeterSvelte value={75} label="CPU Usage" format="{value}%" /></div>
+    <div><MeterSvelte value={3.5} min={0} max={5} label="Rating" format="{value} / {max}" /></div>
+    <div>
+      <MeterSvelte value={-10} min={-50} max={50} label="Temperature" valueText="-10°C" />
+    </div>
+    <div><MeterSvelte value={65} min={0} max={100} label="Progress" format="{value}%" /></div>
+  </div>
+</div>
diff --git a/src/patterns/meter/DemoSection.vue.astro b/src/patterns/meter/DemoSection.vue.astro
new file mode 100644
index 00000000..9a222a53
--- /dev/null
+++ b/src/patterns/meter/DemoSection.vue.astro
@@ -0,0 +1,14 @@
+---
+import MeterVue from './Meter.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col gap-6">
+    <div><MeterVue value={75} label="CPU Usage" format="{value}%" /></div>
+    <div><MeterVue value={3.5} min={0} max={5} label="Rating" format="{value} / {max}" /></div>
+    <div><MeterVue value={-10} min={-50} max={50} label="Temperature" valueText="-10°C" /></div>
+    <div><MeterVue value={65} min={0} max={100} label="Progress" format="{value}%" /></div>
+  </div>
+</div>
diff --git a/src/patterns/meter/DemoSection.web-component.astro b/src/patterns/meter/DemoSection.web-component.astro
new file mode 100644
index 00000000..8ec57250
--- /dev/null
+++ b/src/patterns/meter/DemoSection.web-component.astro
@@ -0,0 +1,16 @@
+---
+import MeterAstro from './Meter.astro';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col gap-6">
+    <div><MeterAstro value={75} label="CPU Usage" format="{value}%" /></div>
+    <div><MeterAstro value={3.5} min={0} max={5} label="Rating" format="{value} / {max}" /></div>
+    <div>
+      <MeterAstro value={-10} min={-50} max={50} label="Temperature" valueText="-10°C" />
+    </div>
+    <div><MeterAstro value={65} min={0} max={100} label="Progress" format="{value}%" /></div>
+  </div>
+</div>
diff --git a/src/patterns/radio-group/DemoSection.react.astro b/src/patterns/radio-group/DemoSection.react.astro
index 55f2da77..1287607c 100644
--- a/src/patterns/radio-group/DemoSection.react.astro
+++ b/src/patterns/radio-group/DemoSection.react.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { RadioGroup as RadioGroupReact } from './RadioGroup';
 import { colorOptions, sizeOptions, planOptions, ratingOptions } from './radio-group-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/radio-group/DemoSection.svelte.astro b/src/patterns/radio-group/DemoSection.svelte.astro
index 585fb8a8..2e7612c9 100644
--- a/src/patterns/radio-group/DemoSection.svelte.astro
+++ b/src/patterns/radio-group/DemoSection.svelte.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import RadioGroupSvelte from './RadioGroup.svelte';
 import { colorOptions, sizeOptions, planOptions, ratingOptions } from './radio-group-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/radio-group/DemoSection.vue.astro b/src/patterns/radio-group/DemoSection.vue.astro
index 270e9d1e..0db07119 100644
--- a/src/patterns/radio-group/DemoSection.vue.astro
+++ b/src/patterns/radio-group/DemoSection.vue.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import RadioGroupVue from './RadioGroup.vue';
 import { colorOptions, sizeOptions, planOptions, ratingOptions } from './radio-group-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/radio-group/DemoSection.web-component.astro b/src/patterns/radio-group/DemoSection.web-component.astro
index c8fed468..12a7e661 100644
--- a/src/patterns/radio-group/DemoSection.web-component.astro
+++ b/src/patterns/radio-group/DemoSection.web-component.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import RadioGroupAstro from './RadioGroup.astro';
 import { colorOptions, sizeOptions, planOptions, ratingOptions } from './radio-group-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/slider-multithumb/DemoSection.react.astro b/src/patterns/slider-multithumb/DemoSection.react.astro
index 083534f1..5c2555d0 100644
--- a/src/patterns/slider-multithumb/DemoSection.react.astro
+++ b/src/patterns/slider-multithumb/DemoSection.react.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import { MultiThumbSlider as MultiThumbSliderReact } from './MultiThumbSlider';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/slider-multithumb/DemoSection.svelte.astro b/src/patterns/slider-multithumb/DemoSection.svelte.astro
index c5050616..552a3f4b 100644
--- a/src/patterns/slider-multithumb/DemoSection.svelte.astro
+++ b/src/patterns/slider-multithumb/DemoSection.svelte.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import MultiThumbSliderSvelte from './MultiThumbSlider.svelte';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/slider-multithumb/DemoSection.vue.astro b/src/patterns/slider-multithumb/DemoSection.vue.astro
index c569bf1f..19d0ffe8 100644
--- a/src/patterns/slider-multithumb/DemoSection.vue.astro
+++ b/src/patterns/slider-multithumb/DemoSection.vue.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import MultiThumbSliderVue from './MultiThumbSlider.vue';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/slider-multithumb/DemoSection.web-component.astro b/src/patterns/slider-multithumb/DemoSection.web-component.astro
index fc349e71..51cc0ce1 100644
--- a/src/patterns/slider-multithumb/DemoSection.web-component.astro
+++ b/src/patterns/slider-multithumb/DemoSection.web-component.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import MultiThumbSliderAstro from './MultiThumbSlider.astro';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/slider/DemoSection.react.astro b/src/patterns/slider/DemoSection.react.astro
index c14b2f60..fb8d0dbe 100644
--- a/src/patterns/slider/DemoSection.react.astro
+++ b/src/patterns/slider/DemoSection.react.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import { Slider as SliderReact } from './Slider';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/slider/DemoSection.svelte.astro b/src/patterns/slider/DemoSection.svelte.astro
index aaac4599..93787665 100644
--- a/src/patterns/slider/DemoSection.svelte.astro
+++ b/src/patterns/slider/DemoSection.svelte.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import SliderSvelte from './Slider.svelte';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/slider/DemoSection.vue.astro b/src/patterns/slider/DemoSection.vue.astro
index 05c0ba81..0752422d 100644
--- a/src/patterns/slider/DemoSection.vue.astro
+++ b/src/patterns/slider/DemoSection.vue.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import SliderVue from './Slider.vue';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/slider/DemoSection.web-component.astro b/src/patterns/slider/DemoSection.web-component.astro
index 634746ab..d4a2bcc2 100644
--- a/src/patterns/slider/DemoSection.web-component.astro
+++ b/src/patterns/slider/DemoSection.web-component.astro
@@ -1,10 +1,7 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import SliderAstro from './Slider.astro';
 
-interface Props {
-  framework?: Framework;
-}
+interface Props {}
 ---
 
 <div class="border-border bg-background rounded-lg border p-6">
diff --git a/src/patterns/spinbutton/DemoSection.astro b/src/patterns/spinbutton/DemoSection.astro
deleted file mode 100644
index 831034d7..00000000
--- a/src/patterns/spinbutton/DemoSection.astro
+++ /dev/null
@@ -1,211 +0,0 @@
----
-/**
- * Spinbutton Demo Section
- *
- * Renders the spinbutton demo for each framework variant.
- * Each framework's component is statically imported to support
- * Astro's client:load directive for hydration.
- */
-import type { Framework } from '@/lib/frameworks';
-import { Spinbutton as SpinbuttonReact } from './Spinbutton';
-import SpinbuttonVue from './Spinbutton.vue';
-import SpinbuttonSvelte from './Spinbutton.svelte';
-import SpinbuttonAstro from './Spinbutton.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  <div class="flex flex-col gap-6">
-    {
-      framework === 'react' && (
-        <>
-          <div>
-            <SpinbuttonReact client:load defaultValue={5} min={0} max={100} label="Quantity" />
-          </div>
-          <div>
-            <SpinbuttonReact
-              client:load
-              defaultValue={3}
-              min={1}
-              max={10}
-              label="Rating"
-              format="{value} of {max}"
-            />
-          </div>
-          <div>
-            <SpinbuttonReact
-              client:load
-              defaultValue={0.5}
-              min={0}
-              max={1}
-              step={0.1}
-              label="Opacity"
-            />
-          </div>
-          <div>
-            <SpinbuttonReact client:load defaultValue={0} label="Unbounded" showButtons={true} />
-          </div>
-          <div>
-            <SpinbuttonReact
-              client:load
-              defaultValue={50}
-              min={0}
-              max={100}
-              label="Read-only"
-              readOnly
-            />
-          </div>
-          <div>
-            <SpinbuttonReact
-              client:load
-              defaultValue={50}
-              min={0}
-              max={100}
-              label="Disabled"
-              disabled
-            />
-          </div>
-        </>
-      )
-    }
-    {
-      framework === 'vue' && (
-        <>
-          <div>
-            <SpinbuttonVue client:load defaultValue={5} min={0} max={100} label="Quantity" />
-          </div>
-          <div>
-            <SpinbuttonVue
-              client:load
-              defaultValue={3}
-              min={1}
-              max={10}
-              label="Rating"
-              format="{value} of {max}"
-            />
-          </div>
-          <div>
-            <SpinbuttonVue
-              client:load
-              defaultValue={0.5}
-              min={0}
-              max={1}
-              step={0.1}
-              label="Opacity"
-            />
-          </div>
-          <div>
-            <SpinbuttonVue client:load defaultValue={0} label="Unbounded" showButtons={true} />
-          </div>
-          <div>
-            <SpinbuttonVue
-              client:load
-              defaultValue={50}
-              min={0}
-              max={100}
-              label="Read-only"
-              readOnly
-            />
-          </div>
-          <div>
-            <SpinbuttonVue
-              client:load
-              defaultValue={50}
-              min={0}
-              max={100}
-              label="Disabled"
-              disabled
-            />
-          </div>
-        </>
-      )
-    }
-    {
-      framework === 'svelte' && (
-        <>
-          <div>
-            <SpinbuttonSvelte client:load defaultValue={5} min={0} max={100} label="Quantity" />
-          </div>
-          <div>
-            <SpinbuttonSvelte
-              client:load
-              defaultValue={3}
-              min={1}
-              max={10}
-              label="Rating"
-              format="{value} of {max}"
-            />
-          </div>
-          <div>
-            <SpinbuttonSvelte
-              client:load
-              defaultValue={0.5}
-              min={0}
-              max={1}
-              step={0.1}
-              label="Opacity"
-            />
-          </div>
-          <div>
-            <SpinbuttonSvelte client:load defaultValue={0} label="Unbounded" showButtons={true} />
-          </div>
-          <div>
-            <SpinbuttonSvelte
-              client:load
-              defaultValue={50}
-              min={0}
-              max={100}
-              label="Read-only"
-              readOnly
-            />
-          </div>
-          <div>
-            <SpinbuttonSvelte
-              client:load
-              defaultValue={50}
-              min={0}
-              max={100}
-              label="Disabled"
-              disabled
-            />
-          </div>
-        </>
-      )
-    }
-    {
-      framework === 'astro' && (
-        <>
-          <div>
-            <SpinbuttonAstro defaultValue={5} min={0} max={100} label="Quantity" />
-          </div>
-          <div>
-            <SpinbuttonAstro
-              defaultValue={3}
-              min={1}
-              max={10}
-              label="Rating"
-              format="{value} of {max}"
-            />
-          </div>
-          <div>
-            <SpinbuttonAstro defaultValue={0.5} min={0} max={1} step={0.1} label="Opacity" />
-          </div>
-          <div>
-            <SpinbuttonAstro defaultValue={0} label="Unbounded" showButtons={true} />
-          </div>
-          <div>
-            <SpinbuttonAstro defaultValue={50} min={0} max={100} label="Read-only" readOnly />
-          </div>
-          <div>
-            <SpinbuttonAstro defaultValue={50} min={0} max={100} label="Disabled" disabled />
-          </div>
-        </>
-      )
-    }
-  </div>
-</div>
diff --git a/src/patterns/spinbutton/DemoSection.react.astro b/src/patterns/spinbutton/DemoSection.react.astro
new file mode 100644
index 00000000..8fa08d87
--- /dev/null
+++ b/src/patterns/spinbutton/DemoSection.react.astro
@@ -0,0 +1,31 @@
+---
+import { Spinbutton as SpinbuttonReact } from './Spinbutton';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col gap-6">
+    <div><SpinbuttonReact client:load defaultValue={5} min={0} max={100} label="Quantity" /></div>
+    <div>
+      <SpinbuttonReact
+        client:load
+        defaultValue={3}
+        min={1}
+        max={10}
+        label="Rating"
+        format="{value} of {max}"
+      />
+    </div>
+    <div>
+      <SpinbuttonReact client:load defaultValue={0.5} min={0} max={1} step={0.1} label="Opacity" />
+    </div>
+    <div><SpinbuttonReact client:load defaultValue={0} label="Unbounded" showButtons={true} /></div>
+    <div>
+      <SpinbuttonReact client:load defaultValue={50} min={0} max={100} label="Read-only" readOnly />
+    </div>
+    <div>
+      <SpinbuttonReact client:load defaultValue={50} min={0} max={100} label="Disabled" disabled />
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/spinbutton/DemoSection.svelte.astro b/src/patterns/spinbutton/DemoSection.svelte.astro
new file mode 100644
index 00000000..058476eb
--- /dev/null
+++ b/src/patterns/spinbutton/DemoSection.svelte.astro
@@ -0,0 +1,40 @@
+---
+import SpinbuttonSvelte from './Spinbutton.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col gap-6">
+    <div><SpinbuttonSvelte client:load defaultValue={5} min={0} max={100} label="Quantity" /></div>
+    <div>
+      <SpinbuttonSvelte
+        client:load
+        defaultValue={3}
+        min={1}
+        max={10}
+        label="Rating"
+        format="{value} of {max}"
+      />
+    </div>
+    <div>
+      <SpinbuttonSvelte client:load defaultValue={0.5} min={0} max={1} step={0.1} label="Opacity" />
+    </div>
+    <div>
+      <SpinbuttonSvelte client:load defaultValue={0} label="Unbounded" showButtons={true} />
+    </div>
+    <div>
+      <SpinbuttonSvelte
+        client:load
+        defaultValue={50}
+        min={0}
+        max={100}
+        label="Read-only"
+        readOnly
+      />
+    </div>
+    <div>
+      <SpinbuttonSvelte client:load defaultValue={50} min={0} max={100} label="Disabled" disabled />
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/spinbutton/DemoSection.vue.astro b/src/patterns/spinbutton/DemoSection.vue.astro
new file mode 100644
index 00000000..d35a3a05
--- /dev/null
+++ b/src/patterns/spinbutton/DemoSection.vue.astro
@@ -0,0 +1,31 @@
+---
+import SpinbuttonVue from './Spinbutton.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col gap-6">
+    <div><SpinbuttonVue client:load defaultValue={5} min={0} max={100} label="Quantity" /></div>
+    <div>
+      <SpinbuttonVue
+        client:load
+        defaultValue={3}
+        min={1}
+        max={10}
+        label="Rating"
+        format="{value} of {max}"
+      />
+    </div>
+    <div>
+      <SpinbuttonVue client:load defaultValue={0.5} min={0} max={1} step={0.1} label="Opacity" />
+    </div>
+    <div><SpinbuttonVue client:load defaultValue={0} label="Unbounded" showButtons={true} /></div>
+    <div>
+      <SpinbuttonVue client:load defaultValue={50} min={0} max={100} label="Read-only" readOnly />
+    </div>
+    <div>
+      <SpinbuttonVue client:load defaultValue={50} min={0} max={100} label="Disabled" disabled />
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/spinbutton/DemoSection.web-component.astro b/src/patterns/spinbutton/DemoSection.web-component.astro
new file mode 100644
index 00000000..8f643e78
--- /dev/null
+++ b/src/patterns/spinbutton/DemoSection.web-component.astro
@@ -0,0 +1,22 @@
+---
+import SpinbuttonAstro from './Spinbutton.astro';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col gap-6">
+    <div><SpinbuttonAstro defaultValue={5} min={0} max={100} label="Quantity" /></div>
+    <div>
+      <SpinbuttonAstro defaultValue={3} min={1} max={10} label="Rating" format="{value} of {max}" />
+    </div>
+    <div><SpinbuttonAstro defaultValue={0.5} min={0} max={1} step={0.1} label="Opacity" /></div>
+    <div><SpinbuttonAstro defaultValue={0} label="Unbounded" showButtons={true} /></div>
+    <div>
+      <SpinbuttonAstro defaultValue={50} min={0} max={100} label="Read-only" readOnly />
+    </div>
+    <div>
+      <SpinbuttonAstro defaultValue={50} min={0} max={100} label="Disabled" disabled />
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/switch/DemoSection.astro b/src/patterns/switch/DemoSection.astro
deleted file mode 100644
index 2616bcd1..00000000
--- a/src/patterns/switch/DemoSection.astro
+++ /dev/null
@@ -1,73 +0,0 @@
----
-/**
- * Switch Demo Section
- *
- * Renders the switch demo for each framework variant.
- * Each framework's component is statically imported to support
- * Astro's client:load directive for hydration.
- */
-import type { Framework } from '@/lib/frameworks';
-import { Switch as SwitchReact } from './Switch';
-import SwitchVue from './Switch.vue';
-import SwitchSvelte from './Switch.svelte';
-import SwitchAstro from './Switch.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  <div class="flex flex-col items-start gap-4">
-    {
-      framework === 'react' && (
-        <>
-          <SwitchReact client:load>Wi-Fi</SwitchReact>
-          <SwitchReact client:load initialChecked={true}>
-            Bluetooth
-          </SwitchReact>
-          <SwitchReact client:load disabled>
-            Airplane Mode (disabled)
-          </SwitchReact>
-        </>
-      )
-    }
-    {
-      framework === 'vue' && (
-        <>
-          <SwitchVue client:load>Wi-Fi</SwitchVue>
-          <SwitchVue client:load initialChecked={true}>
-            Bluetooth
-          </SwitchVue>
-          <SwitchVue client:load disabled>
-            Airplane Mode (disabled)
-          </SwitchVue>
-        </>
-      )
-    }
-    {
-      framework === 'svelte' && (
-        <>
-          <SwitchSvelte client:load>Wi-Fi</SwitchSvelte>
-          <SwitchSvelte client:load initialChecked={true}>
-            Bluetooth
-          </SwitchSvelte>
-          <SwitchSvelte client:load disabled>
-            Airplane Mode (disabled)
-          </SwitchSvelte>
-        </>
-      )
-    }
-    {
-      framework === 'astro' && (
-        <>
-          <SwitchAstro>Wi-Fi</SwitchAstro>
-          <SwitchAstro initialChecked={true}>Bluetooth</SwitchAstro>
-          <SwitchAstro disabled>Airplane Mode (disabled)</SwitchAstro>
-        </>
-      )
-    }
-  </div>
-</div>
diff --git a/src/patterns/switch/DemoSection.react.astro b/src/patterns/switch/DemoSection.react.astro
new file mode 100644
index 00000000..e0e41a8c
--- /dev/null
+++ b/src/patterns/switch/DemoSection.react.astro
@@ -0,0 +1,13 @@
+---
+import { Switch as SwitchReact } from './Switch';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col items-start gap-4">
+    <SwitchReact client:load>Wi-Fi</SwitchReact>
+    <SwitchReact client:load initialChecked={true}>Bluetooth</SwitchReact>
+    <SwitchReact client:load disabled>Airplane Mode (disabled)</SwitchReact>
+  </div>
+</div>
diff --git a/src/patterns/switch/DemoSection.svelte.astro b/src/patterns/switch/DemoSection.svelte.astro
new file mode 100644
index 00000000..4913f9e4
--- /dev/null
+++ b/src/patterns/switch/DemoSection.svelte.astro
@@ -0,0 +1,13 @@
+---
+import SwitchSvelte from './Switch.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col items-start gap-4">
+    <SwitchSvelte client:load>Wi-Fi</SwitchSvelte>
+    <SwitchSvelte client:load initialChecked={true}>Bluetooth</SwitchSvelte>
+    <SwitchSvelte client:load disabled>Airplane Mode (disabled)</SwitchSvelte>
+  </div>
+</div>
diff --git a/src/patterns/switch/DemoSection.vue.astro b/src/patterns/switch/DemoSection.vue.astro
new file mode 100644
index 00000000..d408e626
--- /dev/null
+++ b/src/patterns/switch/DemoSection.vue.astro
@@ -0,0 +1,13 @@
+---
+import SwitchVue from './Switch.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col items-start gap-4">
+    <SwitchVue client:load>Wi-Fi</SwitchVue>
+    <SwitchVue client:load initialChecked={true}>Bluetooth</SwitchVue>
+    <SwitchVue client:load disabled>Airplane Mode (disabled)</SwitchVue>
+  </div>
+</div>
diff --git a/src/patterns/switch/DemoSection.web-component.astro b/src/patterns/switch/DemoSection.web-component.astro
new file mode 100644
index 00000000..60da7e72
--- /dev/null
+++ b/src/patterns/switch/DemoSection.web-component.astro
@@ -0,0 +1,13 @@
+---
+import SwitchAstro from './Switch.astro';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-col items-start gap-4">
+    <SwitchAstro>Wi-Fi</SwitchAstro>
+    <SwitchAstro initialChecked={true}>Bluetooth</SwitchAstro>
+    <SwitchAstro disabled>Airplane Mode (disabled)</SwitchAstro>
+  </div>
+</div>
diff --git a/src/patterns/table/DemoSection.react.astro b/src/patterns/table/DemoSection.react.astro
index c7a44a4e..17a320e6 100644
--- a/src/patterns/table/DemoSection.react.astro
+++ b/src/patterns/table/DemoSection.react.astro
@@ -1,5 +1,4 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import {
   BasicTableDemo,
@@ -10,7 +9,6 @@ import {
 } from './TableDemo';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/table/DemoSection.svelte.astro b/src/patterns/table/DemoSection.svelte.astro
index 6d130932..aa97f418 100644
--- a/src/patterns/table/DemoSection.svelte.astro
+++ b/src/patterns/table/DemoSection.svelte.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TableDemoSvelte from './TableDemo.svelte';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/table/DemoSection.vue.astro b/src/patterns/table/DemoSection.vue.astro
index e7160734..c89b2225 100644
--- a/src/patterns/table/DemoSection.vue.astro
+++ b/src/patterns/table/DemoSection.vue.astro
@@ -1,10 +1,8 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TableDemoVue from './TableDemo.vue';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/table/DemoSection.web-component.astro b/src/patterns/table/DemoSection.web-component.astro
index 62cfb726..d90479e6 100644
--- a/src/patterns/table/DemoSection.web-component.astro
+++ b/src/patterns/table/DemoSection.web-component.astro
@@ -1,5 +1,4 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { SortableTableDemo } from './TableDemo';
 import Table from './Table.astro';
@@ -13,7 +12,6 @@ import {
 } from './table-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/tabs/DemoSection.react.astro b/src/patterns/tabs/DemoSection.react.astro
index b2cac468..2cd94dd1 100644
--- a/src/patterns/tabs/DemoSection.react.astro
+++ b/src/patterns/tabs/DemoSection.react.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TabsReact from './Tabs';
 import { demoTabs, manualTabs, verticalTabs } from './tabs-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/tabs/DemoSection.svelte.astro b/src/patterns/tabs/DemoSection.svelte.astro
index f922ef25..d96217f4 100644
--- a/src/patterns/tabs/DemoSection.svelte.astro
+++ b/src/patterns/tabs/DemoSection.svelte.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TabsSvelte from './Tabs.svelte';
 import { demoTabs, manualTabs, verticalTabs } from './tabs-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/tabs/DemoSection.vue.astro b/src/patterns/tabs/DemoSection.vue.astro
index ee1648e9..fbc4e5b2 100644
--- a/src/patterns/tabs/DemoSection.vue.astro
+++ b/src/patterns/tabs/DemoSection.vue.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TabsVue from './Tabs.vue';
 import { demoTabs, manualTabs, verticalTabs } from './tabs-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/tabs/DemoSection.web-component.astro b/src/patterns/tabs/DemoSection.web-component.astro
index 6357a3ae..3d45545a 100644
--- a/src/patterns/tabs/DemoSection.web-component.astro
+++ b/src/patterns/tabs/DemoSection.web-component.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TabsAstro from './Tabs.astro';
 import { demoTabs, manualTabs, verticalTabs } from './tabs-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/toggle-button/DemoSection.astro b/src/patterns/toggle-button/DemoSection.astro
deleted file mode 100644
index d887bfbe..00000000
--- a/src/patterns/toggle-button/DemoSection.astro
+++ /dev/null
@@ -1,54 +0,0 @@
----
-/**
- * Toggle Button Demo Section
- *
- * Renders the toggle button demo for each framework variant.
- */
-import type { Framework } from '@/lib/frameworks';
-import { MuteDemo, DarkModeDemo, NotificationsDemo } from './ToggleButtonDemo';
-import ToggleButtonDemoVue from './ToggleButtonDemo.vue';
-import ToggleButtonDemoSvelte from './ToggleButtonDemo.svelte';
-import ToggleButton from './ToggleButton.astro';
-import Icon from '@/components/ui/icon/icon.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  {
-    framework === 'react' && (
-      <div class="flex flex-wrap gap-4">
-        <MuteDemo client:load />
-        <DarkModeDemo client:load />
-        <NotificationsDemo client:load />
-      </div>
-    )
-  }
-  {framework === 'vue' && <ToggleButtonDemoVue client:load />}
-  {framework === 'svelte' && <ToggleButtonDemoSvelte client:load />}
-  {
-    framework === 'astro' && (
-      <div class="flex flex-wrap gap-4">
-        <ToggleButton>
-          <Icon name="volume-off" slot="pressed-indicator" />
-          <Icon name="volume-2" slot="unpressed-indicator" />
-          Mute
-        </ToggleButton>
-        <ToggleButton initialPressed={true}>
-          <Icon name="moon" slot="pressed-indicator" />
-          <Icon name="sun" slot="unpressed-indicator" />
-          Dark Mode
-        </ToggleButton>
-        <ToggleButton disabled>
-          <Icon name="bell-off" slot="pressed-indicator" />
-          <Icon name="bell" slot="unpressed-indicator" />
-          Notifications
-        </ToggleButton>
-      </div>
-    )
-  }
-</div>
diff --git a/src/patterns/toggle-button/DemoSection.react.astro b/src/patterns/toggle-button/DemoSection.react.astro
new file mode 100644
index 00000000..2f223c32
--- /dev/null
+++ b/src/patterns/toggle-button/DemoSection.react.astro
@@ -0,0 +1,13 @@
+---
+import { MuteDemo, DarkModeDemo, NotificationsDemo } from './ToggleButtonDemo';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap gap-4">
+    <MuteDemo client:load />
+    <DarkModeDemo client:load />
+    <NotificationsDemo client:load />
+  </div>
+</div>
diff --git a/src/patterns/toggle-button/DemoSection.svelte.astro b/src/patterns/toggle-button/DemoSection.svelte.astro
new file mode 100644
index 00000000..89658ea2
--- /dev/null
+++ b/src/patterns/toggle-button/DemoSection.svelte.astro
@@ -0,0 +1,9 @@
+---
+import ToggleButtonDemoSvelte from './ToggleButtonDemo.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <ToggleButtonDemoSvelte client:load />
+</div>
diff --git a/src/patterns/toggle-button/DemoSection.vue.astro b/src/patterns/toggle-button/DemoSection.vue.astro
new file mode 100644
index 00000000..ad204d95
--- /dev/null
+++ b/src/patterns/toggle-button/DemoSection.vue.astro
@@ -0,0 +1,9 @@
+---
+import ToggleButtonDemoVue from './ToggleButtonDemo.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <ToggleButtonDemoVue client:load />
+</div>
diff --git a/src/patterns/toggle-button/DemoSection.web-component.astro b/src/patterns/toggle-button/DemoSection.web-component.astro
new file mode 100644
index 00000000..94c91b48
--- /dev/null
+++ b/src/patterns/toggle-button/DemoSection.web-component.astro
@@ -0,0 +1,26 @@
+---
+import ToggleButton from './ToggleButton.astro';
+import Icon from '@/components/ui/icon/icon.astro';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap gap-4">
+    <ToggleButton>
+      <Icon name="volume-off" slot="pressed-indicator" />
+      <Icon name="volume-2" slot="unpressed-indicator" />
+      Mute
+    </ToggleButton>
+    <ToggleButton initialPressed={true}>
+      <Icon name="moon" slot="pressed-indicator" />
+      <Icon name="sun" slot="unpressed-indicator" />
+      Dark Mode
+    </ToggleButton>
+    <ToggleButton disabled>
+      <Icon name="bell-off" slot="pressed-indicator" />
+      <Icon name="bell" slot="unpressed-indicator" />
+      Notifications
+    </ToggleButton>
+  </div>
+</div>
diff --git a/src/patterns/toolbar/DemoSection.react.astro b/src/patterns/toolbar/DemoSection.react.astro
index f51dabcf..224725d5 100644
--- a/src/patterns/toolbar/DemoSection.react.astro
+++ b/src/patterns/toolbar/DemoSection.react.astro
@@ -1,5 +1,4 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import {
   ToolbarToggleDemo as ToolbarToggleDemoReact,
@@ -10,7 +9,6 @@ import {
 } from './ToolbarToggleDemo';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/toolbar/DemoSection.svelte.astro b/src/patterns/toolbar/DemoSection.svelte.astro
index 365f0a98..e683ff21 100644
--- a/src/patterns/toolbar/DemoSection.svelte.astro
+++ b/src/patterns/toolbar/DemoSection.svelte.astro
@@ -1,5 +1,4 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TextFormattingToolbarDemoSvelte from './TextFormattingToolbarDemo.svelte';
 import VerticalToolbarDemoSvelte from './VerticalToolbarDemo.svelte';
@@ -8,7 +7,6 @@ import ToolbarToggleDemoSvelte from './ToolbarToggleDemo.svelte';
 import ToolbarToggleDefaultDemoSvelte from './ToolbarToggleDefaultDemo.svelte';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/toolbar/DemoSection.vue.astro b/src/patterns/toolbar/DemoSection.vue.astro
index 909098a6..e8f96166 100644
--- a/src/patterns/toolbar/DemoSection.vue.astro
+++ b/src/patterns/toolbar/DemoSection.vue.astro
@@ -1,5 +1,4 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TextFormattingToolbarDemoVue from './TextFormattingToolbarDemo.vue';
 import VerticalToolbarDemoVue from './VerticalToolbarDemo.vue';
@@ -8,7 +7,6 @@ import ToolbarToggleDemoVue from './ToolbarToggleDemo.vue';
 import ToolbarToggleDefaultDemoVue from './ToolbarToggleDefaultDemo.vue';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/toolbar/DemoSection.web-component.astro b/src/patterns/toolbar/DemoSection.web-component.astro
index d63abdea..3238c075 100644
--- a/src/patterns/toolbar/DemoSection.web-component.astro
+++ b/src/patterns/toolbar/DemoSection.web-component.astro
@@ -1,5 +1,4 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import Toolbar from './Toolbar.astro';
 import ToolbarButton from './ToolbarButton.astro';
@@ -7,7 +6,6 @@ import ToolbarToggleButton from './ToolbarToggleButton.astro';
 import ToolbarSeparator from './ToolbarSeparator.astro';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/tooltip/DemoSection.astro b/src/patterns/tooltip/DemoSection.astro
deleted file mode 100644
index e83443c0..00000000
--- a/src/patterns/tooltip/DemoSection.astro
+++ /dev/null
@@ -1,115 +0,0 @@
----
-/**
- * Tooltip Demo Section
- *
- * Renders the tooltip demo for each framework variant.
- * React and Vue use inline Tooltip components with client:load.
- * Svelte uses a dedicated TooltipDemo component with client:only.
- * Astro uses static Tooltip components (Web Component handles interactivity).
- */
-import type { Framework } from '@/lib/frameworks';
-import { Tooltip as TooltipReact } from './Tooltip';
-import TooltipVue from './Tooltip.vue';
-import TooltipDemoSvelte from './TooltipDemo.svelte';
-import TooltipAstro from './Tooltip.astro';
-
-interface Props {
-  framework: Framework;
-}
-
-const { framework } = Astro.props;
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  {
-    framework === 'react' && (
-      <div class="flex flex-wrap items-center gap-8">
-        <TooltipReact content="Save your changes" client:load>
-          <button class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2">
-            Save
-          </button>
-        </TooltipReact>
-
-        <TooltipReact content="This appears on the right" placement="right" client:load>
-          <button class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2">
-            Right tooltip
-          </button>
-        </TooltipReact>
-
-        <TooltipReact content="This appears below" placement="bottom" client:load>
-          <button class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2">
-            Bottom tooltip
-          </button>
-        </TooltipReact>
-
-        <TooltipReact content="This tooltip is disabled" disabled client:load>
-          <button class="bg-muted text-muted-foreground rounded-md px-4 py-2">
-            Disabled tooltip
-          </button>
-        </TooltipReact>
-      </div>
-    )
-  }
-
-  {
-    framework === 'vue' && (
-      <div class="flex flex-wrap items-center gap-8">
-        <TooltipVue content="Save your changes" client:load>
-          <button class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2">
-            Save
-          </button>
-        </TooltipVue>
-
-        <TooltipVue content="This appears on the right" placement="right" client:load>
-          <button class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2">
-            Right tooltip
-          </button>
-        </TooltipVue>
-
-        <TooltipVue content="This appears below" placement="bottom" client:load>
-          <button class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2">
-            Bottom tooltip
-          </button>
-        </TooltipVue>
-
-        <TooltipVue content="This tooltip is disabled" disabled={true} client:load>
-          <button class="bg-muted text-muted-foreground rounded-md px-4 py-2">
-            Disabled tooltip
-          </button>
-        </TooltipVue>
-      </div>
-    )
-  }
-
-  {framework === 'svelte' && <TooltipDemoSvelte client:only="svelte" />}
-
-  {
-    framework === 'astro' && (
-      <div class="flex flex-wrap items-center gap-8">
-        <TooltipAstro content="Save your changes">
-          <button class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2">
-            Save
-          </button>
-        </TooltipAstro>
-
-        <TooltipAstro content="This appears on the right" placement="right">
-          <button class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2">
-            Right tooltip
-          </button>
-        </TooltipAstro>
-
-        <TooltipAstro content="This appears below" placement="bottom">
-          <button class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2">
-            Bottom tooltip
-          </button>
-        </TooltipAstro>
-
-        <TooltipAstro content="This tooltip is disabled" disabled>
-          <button class="bg-muted text-muted-foreground rounded-md px-4 py-2">
-            Disabled tooltip
-          </button>
-        </TooltipAstro>
-      </div>
-    )
-  }
-</div>
diff --git a/src/patterns/tooltip/DemoSection.react.astro b/src/patterns/tooltip/DemoSection.react.astro
new file mode 100644
index 00000000..125ec591
--- /dev/null
+++ b/src/patterns/tooltip/DemoSection.react.astro
@@ -0,0 +1,35 @@
+---
+import { Tooltip as TooltipReact } from './Tooltip';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap items-center gap-8">
+    <TooltipReact content="Save your changes" client:load>
+      <button class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2">
+        Save
+      </button>
+    </TooltipReact>
+
+    <TooltipReact content="This appears on the right" placement="right" client:load>
+      <button
+        class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2"
+      >
+        Right tooltip
+      </button>
+    </TooltipReact>
+
+    <TooltipReact content="This appears below" placement="bottom" client:load>
+      <button
+        class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2"
+      >
+        Bottom tooltip
+      </button>
+    </TooltipReact>
+
+    <TooltipReact content="This tooltip is disabled" disabled client:load>
+      <button class="bg-muted text-muted-foreground rounded-md px-4 py-2">Disabled tooltip</button>
+    </TooltipReact>
+  </div>
+</div>
diff --git a/src/patterns/tooltip/DemoSection.svelte.astro b/src/patterns/tooltip/DemoSection.svelte.astro
new file mode 100644
index 00000000..c61d6412
--- /dev/null
+++ b/src/patterns/tooltip/DemoSection.svelte.astro
@@ -0,0 +1,9 @@
+---
+import TooltipDemoSvelte from './TooltipDemo.svelte';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <TooltipDemoSvelte client:only="svelte" />
+</div>
diff --git a/src/patterns/tooltip/DemoSection.vue.astro b/src/patterns/tooltip/DemoSection.vue.astro
new file mode 100644
index 00000000..c0f96ac8
--- /dev/null
+++ b/src/patterns/tooltip/DemoSection.vue.astro
@@ -0,0 +1,35 @@
+---
+import TooltipVue from './Tooltip.vue';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap items-center gap-8">
+    <TooltipVue content="Save your changes" client:load>
+      <button class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2">
+        Save
+      </button>
+    </TooltipVue>
+
+    <TooltipVue content="This appears on the right" placement="right" client:load>
+      <button
+        class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2"
+      >
+        Right tooltip
+      </button>
+    </TooltipVue>
+
+    <TooltipVue content="This appears below" placement="bottom" client:load>
+      <button
+        class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2"
+      >
+        Bottom tooltip
+      </button>
+    </TooltipVue>
+
+    <TooltipVue content="This tooltip is disabled" disabled={true} client:load>
+      <button class="bg-muted text-muted-foreground rounded-md px-4 py-2">Disabled tooltip</button>
+    </TooltipVue>
+  </div>
+</div>
diff --git a/src/patterns/tooltip/DemoSection.web-component.astro b/src/patterns/tooltip/DemoSection.web-component.astro
new file mode 100644
index 00000000..7ca9044d
--- /dev/null
+++ b/src/patterns/tooltip/DemoSection.web-component.astro
@@ -0,0 +1,35 @@
+---
+import TooltipAstro from './Tooltip.astro';
+
+interface Props {}
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <div class="flex flex-wrap items-center gap-8">
+    <TooltipAstro content="Save your changes">
+      <button class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2">
+        Save
+      </button>
+    </TooltipAstro>
+
+    <TooltipAstro content="This appears on the right" placement="right">
+      <button
+        class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2"
+      >
+        Right tooltip
+      </button>
+    </TooltipAstro>
+
+    <TooltipAstro content="This appears below" placement="bottom">
+      <button
+        class="bg-secondary text-secondary-foreground hover:bg-secondary/90 rounded-md px-4 py-2"
+      >
+        Bottom tooltip
+      </button>
+    </TooltipAstro>
+
+    <TooltipAstro content="This tooltip is disabled" disabled>
+      <button class="bg-muted text-muted-foreground rounded-md px-4 py-2">Disabled tooltip</button>
+    </TooltipAstro>
+  </div>
+</div>
diff --git a/src/patterns/tree-view/DemoSection.react.astro b/src/patterns/tree-view/DemoSection.react.astro
index eb7fa332..df490e67 100644
--- a/src/patterns/tree-view/DemoSection.react.astro
+++ b/src/patterns/tree-view/DemoSection.react.astro
@@ -1,12 +1,10 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import { TreeView as TreeViewReact } from './TreeView';
 import { TreeViewActivationDemo as TreeViewActivationDemoReact } from './TreeViewActivationDemo';
 import { fileSystemNodes, disabledNodes } from './tree-view-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/tree-view/DemoSection.svelte.astro b/src/patterns/tree-view/DemoSection.svelte.astro
index 5d9f8643..1b19c9f1 100644
--- a/src/patterns/tree-view/DemoSection.svelte.astro
+++ b/src/patterns/tree-view/DemoSection.svelte.astro
@@ -1,12 +1,10 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TreeViewSvelte from './TreeView.svelte';
 import TreeViewActivationDemoSvelte from './TreeViewActivationDemo.svelte';
 import { fileSystemNodes, disabledNodes } from './tree-view-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/tree-view/DemoSection.vue.astro b/src/patterns/tree-view/DemoSection.vue.astro
index a9bcf7d1..fa95513f 100644
--- a/src/patterns/tree-view/DemoSection.vue.astro
+++ b/src/patterns/tree-view/DemoSection.vue.astro
@@ -1,12 +1,10 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TreeViewVue from './TreeView.vue';
 import TreeViewActivationDemoVue from './TreeViewActivationDemo.vue';
 import { fileSystemNodes, disabledNodes } from './tree-view-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/tree-view/DemoSection.web-component.astro b/src/patterns/tree-view/DemoSection.web-component.astro
index 9f203a97..414cc139 100644
--- a/src/patterns/tree-view/DemoSection.web-component.astro
+++ b/src/patterns/tree-view/DemoSection.web-component.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TreeViewAstro from './TreeView.astro';
 import { fileSystemNodes, disabledNodes } from './tree-view-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/treegrid/DemoSection.react.astro b/src/patterns/treegrid/DemoSection.react.astro
index 7d6e3b7f..96853289 100644
--- a/src/patterns/treegrid/DemoSection.react.astro
+++ b/src/patterns/treegrid/DemoSection.react.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TreeGridDemoReact from './TreeGridDemo';
 import { TreeGridDemoJa as TreeGridDemoJaReact } from './TreeGridDemoJa';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/treegrid/DemoSection.svelte.astro b/src/patterns/treegrid/DemoSection.svelte.astro
index 59f8c9c3..3630624d 100644
--- a/src/patterns/treegrid/DemoSection.svelte.astro
+++ b/src/patterns/treegrid/DemoSection.svelte.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TreeGridDemoSvelte from './TreeGridDemo.svelte';
 import TreeGridDemoJaSvelte from './TreeGridDemoJa.svelte';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/treegrid/DemoSection.vue.astro b/src/patterns/treegrid/DemoSection.vue.astro
index b874463f..bdb082f5 100644
--- a/src/patterns/treegrid/DemoSection.vue.astro
+++ b/src/patterns/treegrid/DemoSection.vue.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TreeGridDemoVue from './TreeGridDemo.vue';
 import TreeGridDemoJaVue from './TreeGridDemoJa.vue';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/treegrid/DemoSection.web-component.astro b/src/patterns/treegrid/DemoSection.web-component.astro
index e78a0071..64a0390f 100644
--- a/src/patterns/treegrid/DemoSection.web-component.astro
+++ b/src/patterns/treegrid/DemoSection.web-component.astro
@@ -1,11 +1,9 @@
 ---
-import type { Framework } from '@/lib/frameworks';
 import type { Locale } from '@/i18n/ui';
 import TreeGridAstro from './TreeGrid.astro';
 import { columnsEn, columnsJa, nodesEn, nodesJa } from './treegrid-demo-data';
 
 interface Props {
-  framework?: Framework;
   locale?: Locale;
 }
 
diff --git a/src/patterns/window-splitter/DemoSection.astro b/src/patterns/window-splitter/DemoSection.astro
deleted file mode 100644
index 5cbca353..00000000
--- a/src/patterns/window-splitter/DemoSection.astro
+++ /dev/null
@@ -1,37 +0,0 @@
----
-/**
- * Window Splitter Demo Section
- *
- * Renders the window splitter demo for each framework variant.
- * Each framework's component is statically imported to support
- * Astro's client:load directive for hydration.
- */
-import type { Framework } from '@/lib/frameworks';
-import type { Locale } from '@/i18n/ui';
-import { WindowSplitterDemo as WindowSplitterDemoReact } from './WindowSplitterDemo';
-import WindowSplitterDemoVue from './WindowSplitterDemo.vue';
-import WindowSplitterDemoSvelte from './WindowSplitterDemo.svelte';
-import WindowSplitterDemoAstro from './WindowSplitterDemo.astro';
-
-interface Props {
-  framework: Framework;
-  locale?: Locale;
-}
-
-const { framework, locale = 'en' } = Astro.props;
-const isJa = locale === 'ja';
----
-
-<div class="border-border bg-background rounded-lg border p-6">
-  <p class="text-muted-foreground mb-4 text-sm">
-    {
-      isJa
-        ? '矢印キーでスプリッターを移動します。Enter キーで折りたたみ/展開します。Shift+矢印キーで大きなステップで移動します。Home/End キーで最小/最大位置に移動します。'
-        : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.'
-    }
-  </p>
-  {framework === 'react' && <WindowSplitterDemoReact client:load />}
-  {framework === 'vue' && <WindowSplitterDemoVue client:load />}
-  {framework === 'svelte' && <WindowSplitterDemoSvelte client:load />}
-  {framework === 'astro' && <WindowSplitterDemoAstro />}
-</div>
diff --git a/src/patterns/window-splitter/DemoSection.react.astro b/src/patterns/window-splitter/DemoSection.react.astro
new file mode 100644
index 00000000..a8d802b3
--- /dev/null
+++ b/src/patterns/window-splitter/DemoSection.react.astro
@@ -0,0 +1,22 @@
+---
+import type { Locale } from '@/i18n/ui';
+import { WindowSplitterDemo as WindowSplitterDemoReact } from './WindowSplitterDemo';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? '矢印キーでスプリッターを移動します。Enter キーで折りたたみ/展開します。Shift+矢印キーで大きなステップで移動します。Home/End キーで最小/最大位置に移動します。'
+        : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.'
+    }
+  </p>
+  <WindowSplitterDemoReact client:load />
+</div>
diff --git a/src/patterns/window-splitter/DemoSection.svelte.astro b/src/patterns/window-splitter/DemoSection.svelte.astro
new file mode 100644
index 00000000..67231a4a
--- /dev/null
+++ b/src/patterns/window-splitter/DemoSection.svelte.astro
@@ -0,0 +1,22 @@
+---
+import type { Locale } from '@/i18n/ui';
+import WindowSplitterDemoSvelte from './WindowSplitterDemo.svelte';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? '矢印キーでスプリッターを移動します。Enter キーで折りたたみ/展開します。Shift+矢印キーで大きなステップで移動します。Home/End キーで最小/最大位置に移動します。'
+        : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.'
+    }
+  </p>
+  <WindowSplitterDemoSvelte client:load />
+</div>
diff --git a/src/patterns/window-splitter/DemoSection.vue.astro b/src/patterns/window-splitter/DemoSection.vue.astro
new file mode 100644
index 00000000..a4e6e2d2
--- /dev/null
+++ b/src/patterns/window-splitter/DemoSection.vue.astro
@@ -0,0 +1,22 @@
+---
+import type { Locale } from '@/i18n/ui';
+import WindowSplitterDemoVue from './WindowSplitterDemo.vue';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? '矢印キーでスプリッターを移動します。Enter キーで折りたたみ/展開します。Shift+矢印キーで大きなステップで移動します。Home/End キーで最小/最大位置に移動します。'
+        : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.'
+    }
+  </p>
+  <WindowSplitterDemoVue client:load />
+</div>
diff --git a/src/patterns/window-splitter/DemoSection.web-component.astro b/src/patterns/window-splitter/DemoSection.web-component.astro
new file mode 100644
index 00000000..642b45e2
--- /dev/null
+++ b/src/patterns/window-splitter/DemoSection.web-component.astro
@@ -0,0 +1,22 @@
+---
+import type { Locale } from '@/i18n/ui';
+import WindowSplitterDemoAstro from './WindowSplitterDemo.astro';
+
+interface Props {
+  locale?: Locale;
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+---
+
+<div class="border-border bg-background rounded-lg border p-6">
+  <p class="text-muted-foreground mb-4 text-sm">
+    {
+      isJa
+        ? '矢印キーでスプリッターを移動します。Enter キーで折りたたみ/展開します。Shift+矢印キーで大きなステップで移動します。Home/End キーで最小/最大位置に移動します。'
+        : 'Use Arrow keys to move the splitter. Press Enter to collapse/expand. Shift+Arrow moves by a larger step. Home/End moves to min/max position.'
+    }
+  </p>
+  <WindowSplitterDemoAstro />
+</div>