FIX - keep native dropdown options readable

frontend/src/ui/controls.css

@@ -1265,8 +1265,9 @@ label.sky-list-item__row {
   opacity: 0;
 }
 
-.sky-field--floating-label .sky-field__select option {
-  color: var(--sky-text, #000000);
+.sky-field__select option {
+  background: var(--sky-native-select-option-background, #ffffff);
+  color: var(--sky-native-select-option-text, #000000);
 }
 
 .sky-field--floating-label.sky-field--outline:not(

frontend/src/ui/controls/SkyField.test.ts

@@ -164,6 +164,23 @@ describe('SkyField', () => {
     )
   })
 
+  it('keeps native select options readable on the CEF popup surface', () => {
+    const controls = readFileSync(
+      new URL('../controls.css', import.meta.url),
+      'utf8',
+    )
+    const tokens = readFileSync(
+      new URL('../tokens.css', import.meta.url),
+      'utf8',
+    )
+
+    expect(controls).toMatch(
+      /\.sky-field__select option\s*\{[^}]*background:\s*var\(--sky-native-select-option-background, #ffffff\);[^}]*color:\s*var\(--sky-native-select-option-text, #000000\);/s,
+    )
+    expect(tokens).toContain('--sky-native-select-option-background: #ffffff;')
+    expect(tokens).toContain('--sky-native-select-option-text: #000000;')
+  })
+
   it('raises floating labels only after the field has a value', async () => {
     const emptyApp = createSSRApp(SkyField, {
       floatingLabel: true,

frontend/src/ui/tokens.css

@@ -188,6 +188,8 @@
   --sky-hairline: rgba(0, 0, 0, 0.2);
   --sky-field-outline: rgba(0, 0, 0, 0.3);
   --sky-field-placeholder: rgba(0, 0, 0, 0.3);
+  --sky-native-select-option-background: #ffffff;
+  --sky-native-select-option-text: #000000;
   --sky-pressed: rgba(0, 0, 0, 0.1);
   --sky-tabbar-highlight-background: rgba(0, 0, 0, 0.1);
   --sky-tabbar-thumb-background: rgba(0, 0, 0, 0.05);