feat!: replace arrow up/down direction tabIndex by highlight, fix #206 (

#213)

* feat!: replace arrow up/down direction tabIndex by highlight, fix #206
- fixes #206
- previous tabIndex implementation required to use arrow to go up/down the list OR use filter (when enabled) BUT not both at the same time, this new implementation is more UX friendly and is typically what most user will want which is to keep filter in focus but also allow to use up/down arrow at the same time
- also change selection and checkbox to use default primary color

.github/workflows/main.yml

@@ -83,6 +83,7 @@ jobs:
         run: pnpm test:e2e
 
       - name: Upload Event File
+        if: always()
         uses: actions/upload-artifact@v4
         with:
           name: Event File

packages/demo/src/app-routing.ts

@@ -81,7 +81,7 @@ export const exampleRouting = [
       { name: 'example07', view: '/src/examples/example07.html', viewModel: Example07, title: 'Submit Select' },
       { name: 'example08', view: '/src/examples/example08.html', viewModel: Example08, title: 'The Data' },
       { name: 'example09', view: '/src/examples/example09.html', viewModel: Example09, title: 'Locale' },
-      { name: 'example10', view: '/src/examples/example10.html', viewModel: Example10, title: 'Large Select' },
+      { name: 'example10', view: '/src/examples/example10.html', viewModel: Example10, title: 'Large Select (Virtual Scroll)' },
       { name: 'example11', view: '/src/examples/example11.html', viewModel: Example11, title: 'The Themes' },
       { name: 'example12', view: '/src/examples/example12.html', viewModel: Example12, title: 'Checkbox/Radio Icons' },
       { name: 'example13', view: '/src/examples/example13.html', viewModel: Example13, title: 'Dynamically Create Select' },

packages/demo/src/examples/example10.html

@@ -1,7 +1,7 @@
 <div class="row mb-2">
   <div class="col-md-12 title-desc">
     <h2 class="bd-title">
-      Large Select
+      Large Select - Virtual Scroll
       <span class="float-end links">
         Code <span class="fa fa-link"></span>
         <span class="small">

packages/demo/src/style.scss

@@ -1,5 +1,10 @@
 @use 'sass:math';
 
+// $body-color: #ccc;
+$primary: teal;
+$btn-color: #fff;
+
+@import 'bootstrap';
 @import 'multiple-select-vanilla/dist/styles/css/multiple-select.css';
 
 $navbar-height: 60px;

packages/demo/vite.config.mts

@@ -5,6 +5,7 @@ export default defineConfig({
   server: {
     port: 4000,
     cors: true,
+    open: true,
     host: 'localhost',
   },
   optimizeDeps: {