optimize style sheets, support tabIndex in popup

lib/ui/dropdown.js

@@ -120,12 +120,54 @@ class Dropdown {
 
         // header
         const header = createElement('div', 'drop-header');
+        header.addEventListener('keypress', e => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                header.dispatchEvent(new MouseEvent('click'));
+            }
+        });
+        header.addEventListener('keydown', e => {
+            const up = e.key === 'ArrowUp';
+            const down = e.key === 'ArrowDown';
+            if (up || down) {
+                const source = this.source;
+                const count = source.length;
+                const valuekey = this.#options.valuekey;
+                let index = source?.indexOf(this.#selected);
+                if (isNaN(index) || index < -1) {
+                    index = -1;
+                } else if (index >= count) {
+                    index = count - 1;
+                }
+                if (up) {
+                    if (index > 0) {
+                        index--;
+                    } else {
+                        index = 0;
+                    }
+                } else if (down) {
+                    if (index < 0) {
+                        index = 0;
+                    } else if (index < count) {
+                        index++;
+                    } else {
+                        index = count - 1;
+                    }
+                }
+                const target = source[index]?.[valuekey];
+                if (target != null) {
+                    this.select(target);
+                }
+            } else if (e.key === 'Tab') {
+                this.#dropdown(false);
+            }
+        });
         header.addEventListener('click', () => {
             if (this.disabled) {
                 return;
             }
             const active = this.#expanded;
-            if (active && this.#label.hasFocus()) {
+            const label = this.#label;
+            if (active && label.ownerDocument.activeElement === label) {
                 return;
             }
             this.#dropdown(!active);
@@ -230,6 +272,10 @@ class Dropdown {
             }
             this.#label.value = selected;
         } else {
+            const expanded = this.#expanded;
+            if (expanded) {
+                this.#container.querySelectorAll('li[data-value].selected').forEach(li => li.classList.remove('selected'));
+            }
             if (item == null) {
                 this.#selected = null;
                 this.#label.innerText = ' ';
@@ -245,6 +291,13 @@ class Dropdown {
                 }
                 this.#label.innerText = text;
             }
+            if (expanded) {
+                const val = selected.replace(/"/g, '\\"');
+                const li = this.#container.querySelector(`li[data-value="${val}"]`);
+                if (li != null) {
+                    li.classList.add('selected');
+                }
+            }
         }
         this.#selected = item;
         if (!silence && typeof this.onselected === 'function') {
@@ -276,7 +329,7 @@ class Dropdown {
         }
     }
 
-    get #expanded() { return this.#container?.style?.visibility === 'visible' }
+    get #expanded() { return this.#container?.classList?.contains('active') }
 
     #dropdown(flag = true) {
         const options = this.#options;