From a026212f98cf7605d81e5ae920000488dee2c237 Mon Sep 17 00:00:00 2001
From: masuP9 <masuP9@gmail.com>
Date: Wed, 13 May 2026 15:12:25 +0900
Subject: [PATCH] =?UTF-8?q?release:=20v0.3.4=20=E2=80=94=20forced-colors?=
 =?UTF-8?q?=20hover/contrast=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix several patterns whose hover/active states became dim or unreadable
in Windows High Contrast Mode with dark color scheme.

- checkbox/radio/switch: hover used var(--foreground) under
  forced-color-adjust:none, which resolved to a near-white custom color
  dimmer than the base ButtonBorder. Add system-color hover overrides
  inside @media (forced-colors: active) using Highlight.
- combobox: option hover and [aria-selected='true'] used Highlight +
  HighlightText, which collapsed to an unreadable label (Chromium's
  forced-colors text painting plus HighlightText==Canvas in dark mode).
  Switch both to outline-based indication, matching the
  prefers-contrast: high pattern already used in this file.
- accordion: expanded trigger now uses ButtonFace/ButtonText instead of
  Highlight/HighlightText for the same readability reason.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 package.json                        |  2 +-
 src/styles/patterns/accordion.css   |  4 ++--
 src/styles/patterns/checkbox.css    | 20 ++++++++++++++++++++
 src/styles/patterns/combobox.css    |  7 ++++---
 src/styles/patterns/radio-group.css |  9 +++++++++
 src/styles/patterns/switch.css      |  9 +++++++++
 6 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 92569f24..45309f3c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "apg-patterns-examples",
   "type": "module",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": false,
   "description": "Accessible UI components following WAI-ARIA APG patterns. Multi-framework implementations in React, Vue, Svelte, and Astro with documentation and tests.",
   "author": "masuP9",
diff --git a/src/styles/patterns/accordion.css b/src/styles/patterns/accordion.css
index 95e6574e..13c413fb 100644
--- a/src/styles/patterns/accordion.css
+++ b/src/styles/patterns/accordion.css
@@ -188,8 +188,8 @@
   }
 
   .apg-accordion-trigger--expanded {
-    background: Highlight;
-    color: HighlightText;
+    background: ButtonFace;
+    color: ButtonText;
   }
 
   .apg-accordion-trigger:focus {
diff --git a/src/styles/patterns/checkbox.css b/src/styles/patterns/checkbox.css
index 2994a96a..7d75b605 100644
--- a/src/styles/patterns/checkbox.css
+++ b/src/styles/patterns/checkbox.css
@@ -182,4 +182,24 @@ apg-checkbox {
     background: GrayText;
     border-color: GrayText;
   }
+
+  .apg-checkbox:hover .apg-checkbox-control {
+    border-color: Highlight;
+  }
+
+  .apg-checkbox-input:checked:hover + .apg-checkbox-control,
+  .apg-checkbox-input:indeterminate:hover + .apg-checkbox-control {
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  .apg-checkbox:has(.apg-checkbox-input:disabled):hover .apg-checkbox-control {
+    border-color: GrayText;
+  }
+
+  .apg-checkbox-input:disabled:checked:hover + .apg-checkbox-control,
+  .apg-checkbox-input:disabled:indeterminate:hover + .apg-checkbox-control {
+    background: GrayText;
+    border-color: GrayText;
+  }
 }
diff --git a/src/styles/patterns/combobox.css b/src/styles/patterns/combobox.css
index 3845a179..6e93fa10 100644
--- a/src/styles/patterns/combobox.css
+++ b/src/styles/patterns/combobox.css
@@ -253,9 +253,10 @@
     border-color: Highlight;
   }
 
-  .apg-combobox-option[aria-selected='true'] {
-    background: Highlight;
-    color: HighlightText;
+  .apg-combobox-option[aria-selected='true'],
+  .apg-combobox-option:hover:not([aria-disabled='true']) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
   }
 
   .apg-combobox-option[aria-disabled='true'] {
diff --git a/src/styles/patterns/radio-group.css b/src/styles/patterns/radio-group.css
index f4cd71b6..cfeffcba 100644
--- a/src/styles/patterns/radio-group.css
+++ b/src/styles/patterns/radio-group.css
@@ -164,4 +164,13 @@ apg-radio-group {
     background: GrayText;
     border-color: GrayText;
   }
+
+  .apg-radio:not(.apg-radio--disabled):hover .apg-radio-control {
+    border-color: Highlight;
+  }
+
+  .apg-radio--selected:not(.apg-radio--disabled):hover .apg-radio-control {
+    background: Highlight;
+    border-color: Highlight;
+  }
 }
diff --git a/src/styles/patterns/switch.css b/src/styles/patterns/switch.css
index b2ae1b7c..4ff651eb 100644
--- a/src/styles/patterns/switch.css
+++ b/src/styles/patterns/switch.css
@@ -200,4 +200,13 @@ apg-switch {
   .apg-switch:disabled .apg-switch-label {
     color: GrayText;
   }
+
+  .apg-switch:hover:not(:disabled) .apg-switch-track {
+    border-color: Highlight;
+  }
+
+  .apg-switch[aria-checked='true']:hover:not(:disabled) .apg-switch-track {
+    background: Highlight;
+    border-color: Highlight;
+  }
 }