masuP9 · masuP9 · May 13, 2026 · May 13, 2026 · May 13, 2026 · May 13, 2026
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -2,19 +2,9 @@
 
 ## プロジェクト概要
 
-**APG Patterns Examples** は、WAI-ARIA Authoring Practices Guide (APG) のコンポーネントパターンを React、Vue、Svelte、Astro の4つのフレームワークで実装し、実際に動作するデモと詳細なコード解説を提供するプロジェクトです。
+**APG Patterns Examples** は、WAI-ARIA Authoring Practices Guide (APG) のコンポーネントパターンを React、Vue、Svelte、Astro の4つのフレームワークで実装し、実際に動作するデモとテストを提供するプロジェクト。
 
-### プロジェクトの目標
-
-- APG準拠のアクセシブルなコンポーネント実装
-- フレームワーク別のベストプラクティス提供
-- プロダクション品質のコード
-- 日英バイリンガル対応
-- GitHub Pages での自動デプロイ
-
----
-
-## 技術スタック（Astro リビルド版）
+## 技術スタック
 
 | レイヤー       | 技術                           |
 | -------------- | ------------------------------ |
@@ -317,54 +307,7 @@ Astro テンプレート内で React/Vue/Svelte の子コンポーネントを
 
 ### コマンド
 
-```bash
-# 開発サーバー起動
-npm run dev
-# ※ポートは自動割当（空いているポートが使用される）
-# 起動後にターミナル出力でポート番号を確認すること
-
-# ビルド
-npm run build
-
-# テスト（全て: unit + e2e）
-npm run test
-
-# ユニットテスト（全フレームワーク）
-npm run test:unit
-
-# フレームワーク別ユニットテスト
-npm run test:react
-npm run test:vue
-npm run test:svelte
-npm run test:astro    # Container API テスト
-
-# E2E テスト（Playwright）
-npm run test:e2e
-npm run test:e2e:ui   # UI モード
-
-# 特定パターンの E2E テスト
-npm run test:e2e:pattern --pattern=tabs
-npm run test:e2e:pattern --pattern=accordion
-
-# 特定フレームワーク + 特定パターン（要: npm run dev 別ターミナル）
-npm run test:e2e:react:pattern --pattern=tabs
-npm run test:e2e:vue:pattern --pattern=tabs
-
-# その他
-npm run test:watch    # ウォッチモード
-npm run test:coverage # カバレッジ
-
-# フォーマット
-npm run format           # Prettier + mdx-formatter（並列実行）
-npm run format:mdx       # MDX のみ（mdx-formatter）
-npm run format:mdx:check # MDX フォーマットチェック
-
-# リント
-npm run lint            # 全チェック（並列実行）
-npm run lint:eslint     # ESLint のみ
-npm run lint:types      # TypeScript 型チェックのみ
-npm run lint:astro      # Astro チェックのみ
-```
+package.jsonのscriptsを参照
 
 ### コーディングスタイル規約
 
@@ -391,11 +334,3 @@ const rowcount = await grid.getAttribute('aria-rowcount');
 - [shadcn/ui](https://ui.shadcn.com/)
 - [プロジェクトサイト](https://masup9.github.io/apg-patterns-examples/)
 - [リポジトリ](https://github.com/masuP9/apg-patterns-examples)
-
----
-
-## 移行状況
-
-現在、Docusaurus + 3 Storybook 構成から Astro への移行を計画中。
-
-詳細は [.internal/site-specification.md](.internal/site-specification.md) を参照。
diff --git a/CODING_RULES.md b/CODING_RULES.md
@@ -475,3 +475,4 @@ const config = thirdPartyLib.getConfig() as Config; // TODO: 型定義改善待
 - ARIA属性の適切な使用
 - キーボードナビゲーション対応必須
 - スクリーンリーダー対応
+- `prefers-contrast` メディアクエリの値は `more` / `less` / `no-preference` / `custom` を使う（`high` / `low` は仕様にない値）
diff --git a/src/patterns/menubar/menubar.css b/src/patterns/menubar/menubar.css
@@ -565,31 +565,6 @@
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-menubar[role='menubar'],
-  .apg-menubar [role='menubar'] {
-    border: 2px solid currentColor;
-  }
-
-  .apg-menubar-menu,
-  .apg-menubar [data-menubar-menu],
-  .apg-menubar-submenu,
-  .apg-menubar [data-submenu] {
-    border-width: 2px;
-  }
-
-  .apg-menubar-trigger:focus,
-  .apg-menubar [data-menubar-trigger]:focus,
-  .apg-menubar-menuitem:focus,
-  .apg-menubar-menu [role='menuitem']:focus,
-  .apg-menubar-menu [role='menuitemcheckbox']:focus,
-  .apg-menubar-menu [role='menuitemradio']:focus {
-    outline: 3px solid #facc15;
-    outline-offset: -3px;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-menubar-trigger,

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -105,6 +105,43 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+/* Design tokens - prefers-contrast: more overrides
+   各パターン CSS では @media (prefers-contrast: more) を持たず、
+   ここで定義した高コントラスト版の変数が自動で適用される */
+@media (prefers-contrast: more) {
+  :root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.08 0 0);
+    --primary: oklch(0.08 0 0);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.94 0 0);
+    --secondary-foreground: oklch(0.08 0 0);
+    --muted: oklch(0.94 0 0);
+    --muted-foreground: oklch(0.3 0 0);
+    --accent: oklch(0.92 0 0);
+    --accent-foreground: oklch(0.08 0 0);
+    --border: oklch(0.5 0 0);
+    --input: oklch(0.42 0 0);
+    --ring: oklch(0.08 0 0);
+  }
+
+  .dark {
+    --background: oklch(0.08 0 0);
+    --foreground: oklch(1 0 0);
+    --primary: oklch(1 0 0);
+    --primary-foreground: oklch(0.08 0 0);
+    --secondary: oklch(0.2 0 0);
+    --secondary-foreground: oklch(1 0 0);
+    --muted: oklch(0.2 0 0);
+    --muted-foreground: oklch(0.82 0 0);
+    --accent: oklch(0.24 0 0);
+    --accent-foreground: oklch(1 0 0);
+    --border: oklch(0.82 0 0);
+    --input: oklch(0.55 0 0);
+    --ring: oklch(1 0 0);
+  }
+}
+
 /* Prevent layout shift when scrollbar appears/disappears (e.g., modal dialogs) */
 html {
   scrollbar-gutter: stable;

diff --git a/src/styles/patterns/accordion.css b/src/styles/patterns/accordion.css
@@ -143,23 +143,6 @@
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-accordion {
-    border-width: 4px;
-  }
-
-  .apg-accordion-trigger--expanded {
-    background: black;
-    color: white;
-  }
-
-  .apg-accordion-trigger:not(.apg-accordion-trigger--expanded):not(:disabled) {
-    background: white;
-    color: black;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-accordion-trigger,

diff --git a/src/styles/patterns/alert-dialog.css b/src/styles/patterns/alert-dialog.css
@@ -187,17 +187,6 @@ body:has(dialog.apg-alert-dialog[open]) {
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-alert-dialog {
-    border-width: 2px;
-  }
-
-  dialog.apg-alert-dialog::backdrop {
-    background: rgba(0, 0, 0, 0.8);
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-alert-dialog,

diff --git a/src/styles/patterns/button.css b/src/styles/patterns/button.css
@@ -55,17 +55,6 @@
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-button {
-    border: 2px solid currentColor;
-  }
-
-  .apg-button[aria-disabled='true'] {
-    border-style: dashed;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-button {

diff --git a/src/styles/patterns/carousel.css b/src/styles/patterns/carousel.css
@@ -311,26 +311,6 @@
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-carousel-tab-indicator {
-    opacity: 1;
-    background: black;
-  }
-
-  .apg-carousel-tab--selected .apg-carousel-tab-indicator {
-    background: #facc15;
-  }
-
-  .apg-carousel-play-pause,
-  .apg-carousel-prev,
-  .apg-carousel-next {
-    border-width: 2px;
-    background: white;
-    color: black;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-carousel-tab,

diff --git a/src/styles/patterns/checkbox.css b/src/styles/patterns/checkbox.css
@@ -120,23 +120,6 @@ apg-checkbox {
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-checkbox-control {
-    border-width: 3px;
-  }
-
-  .apg-checkbox-input:checked + .apg-checkbox-control,
-  .apg-checkbox-input:indeterminate + .apg-checkbox-control {
-    background-color: black;
-    border-color: black;
-  }
-
-  .apg-checkbox-icon {
-    color: white;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-checkbox-control,

diff --git a/src/styles/patterns/combobox.css b/src/styles/patterns/combobox.css
@@ -190,32 +190,6 @@
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-combobox-input {
-    border-width: 2px;
-  }
-
-  .apg-combobox-listbox {
-    border-width: 2px;
-  }
-
-  .apg-combobox-input:focus {
-    outline: 3px solid #facc15;
-    outline-offset: 2px;
-    box-shadow: none;
-  }
-
-  .apg-combobox-option[aria-selected='true'] {
-    outline: 2px solid #facc15;
-    outline-offset: -2px;
-  }
-
-  .apg-combobox-option-icon {
-    color: black;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-combobox-input,

diff --git a/src/styles/patterns/dialog.css b/src/styles/patterns/dialog.css
@@ -151,18 +151,6 @@ dialog.apg-dialog:not([open]) {
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-dialog {
-    border-width: 2px;
-  }
-
-  .apg-dialog-overlay,
-  dialog.apg-dialog::backdrop {
-    background: rgba(0, 0, 0, 0.8);
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-dialog-overlay,

diff --git a/src/styles/patterns/disclosure.css b/src/styles/patterns/disclosure.css
@@ -101,23 +101,6 @@
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-disclosure {
-    border-width: 4px;
-  }
-
-  .apg-disclosure-trigger[aria-expanded='true'] {
-    background: black;
-    color: white;
-  }
-
-  .apg-disclosure-trigger[aria-expanded='false']:not(:disabled) {
-    background: white;
-    color: black;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-disclosure-trigger,

diff --git a/src/styles/patterns/link.css b/src/styles/patterns/link.css
@@ -41,17 +41,6 @@
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-link {
-    text-decoration-thickness: 2px;
-  }
-
-  .apg-link[aria-disabled='true'] {
-    text-decoration: line-through;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-link {

diff --git a/src/styles/patterns/listbox.css b/src/styles/patterns/listbox.css
@@ -112,22 +112,6 @@
    ACCESSIBILITY ENHANCEMENTS
    ============================================================================= */
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .apg-listbox {
-    border-width: 2px;
-  }
-
-  .apg-listbox-option-icon {
-    color: black;
-  }
-
-  .apg-listbox-option:focus {
-    outline: 3px solid #facc15;
-    outline-offset: -3px;
-  }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   .apg-listbox-option {