From 19e4663cd4002bc4fcbad844945131fca2b4ad38 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 12 Feb 2026 16:18:22 +0000
Subject: [PATCH 1/4] Initial plan


From a9f438bdc82a77f8e8090895c4c2e7a78e3c176b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 12 Feb 2026 16:21:36 +0000
Subject: [PATCH 2/4] Fix select dropdown option styling for better contrast

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>
---
 components/page-selector/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/page-selector/index.js b/components/page-selector/index.js
index 87d95412..52578f2c 100644
--- a/components/page-selector/index.js
+++ b/components/page-selector/index.js
@@ -120,6 +120,14 @@ export default class PageSelector extends HTMLElement {
                     font-family: inherit;
                     cursor: pointer;
                 }
+                select option {
+                    background-color: white;
+                    color: #333;
+                }
+                select option:checked {
+                    background-color: #005a8c;
+                    color: white;
+                }
             </style>
             <select part="select" aria-label="Select page">
                 ${optionsHtml}

From c9303c071e4fb19f42f994f1dc72b15797a6e927 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 12 Feb 2026 16:24:31 +0000
Subject: [PATCH 3/4] Use browser-native selection styling for better
 compatibility

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>
---
 components/page-selector/index.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/page-selector/index.js b/components/page-selector/index.js
index 52578f2c..35cccb13 100644
--- a/components/page-selector/index.js
+++ b/components/page-selector/index.js
@@ -124,10 +124,6 @@ export default class PageSelector extends HTMLElement {
                     background-color: white;
                     color: #333;
                 }
-                select option:checked {
-                    background-color: #005a8c;
-                    color: white;
-                }
             </style>
             <select part="select" aria-label="Select page">
                 ${optionsHtml}

From 23cd33d868568a1fcde4146ab7ace01fd317c26f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 12 Feb 2026 16:25:33 +0000
Subject: [PATCH 4/4] Use CSS system colors for better accessibility and theme
 compatibility

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>
---
 components/page-selector/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/page-selector/index.js b/components/page-selector/index.js
index 35cccb13..67ffc625 100644
--- a/components/page-selector/index.js
+++ b/components/page-selector/index.js
@@ -121,8 +121,8 @@ export default class PageSelector extends HTMLElement {
                     cursor: pointer;
                 }
                 select option {
-                    background-color: white;
-                    color: #333;
+                    background-color: Canvas;
+                    color: CanvasText;
                 }
             </style>
             <select part="select" aria-label="Select page">