don't highlight noMatchingOptionsMsg <span> in sms-search-matches

drop non-functional --sms-highlight-* CSS variables and explain in readme how to customize highlight styles
change default highlight color to mediumaquamarine

readme.md

@@ -189,7 +189,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    highlightMatches: boolean = true
    ```
 
-   Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(search-results)` below for available CSS variables.
+   Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(sms-search-matches)` below for available CSS variables.
 
 1. ```ts
    id: string | null = null
@@ -526,7 +526,7 @@ Minimal example that changes the background color of the options dropdown:
 - `div.multiselect.open`
   - `z-index: var(--sms-open-z-index, 4)`: Increase this if needed to ensure the dropdown list is displayed atop all other page elements.
 - `div.multiselect:focus-within`
-  - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` if not set which defaults to `cornflowerblue`.
+  - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` which in turn defaults to `cornflowerblue`.
 - `div.multiselect.disabled`
   - `background: var(--sms-disabled-bg, lightgray)`: Background when in disabled state.
 - `div.multiselect input::placeholder`
@@ -559,11 +559,15 @@ Minimal example that changes the background color of the options dropdown:
 - `div.multiselect > ul.options > li.disabled`
   - `background: var(--sms-li-disabled-bg, #f5f5f6)`: Background of disabled options in the dropdown list.
   - `color: var(--sms-li-disabled-text, #b8b8b8)`: Text color of disabled option in the dropdown list.
-- `::highlight(search-results)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`
-  - `color: var(--sms-highlight-color, orange)`
-  - `background: var(--sms-highlight-bg)`
-  - `text-decoration: var(--sms-highlight-text-decoration)`
-  - `text-decoration-color: var(--sms-highlight-text-decoration-color)`
+- `::highlight(sms-search-matches)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`. These styles [cannot be set via CSS variables](https://stackoverflow.com/a/56799215). Instead, use a new rule set. For example:
+
+  ```css
+  ::highlight(sms-search-matches) {
+    color: orange;
+    background: rgba(0, 0, 0, 0.15);
+    text-decoration: underline;
+  }
+  ```
 
 ### With CSS frameworks
 

src/app.css

@@ -3,7 +3,8 @@
   --blue: cornflowerblue;
   --text-color: #ccc;
 
-  --sms-active-color: var(--blue);
+  --sms-active-color: rgba(0, 0, 0, 0.4);
+  --sms-focus-border: 1pt solid cornflowerblue;
   --sms-options-bg: rgb(33, 31, 47);
   --sms-selected-bg: rgba(255, 255, 255, 0.2);
   --sms-text-color: white;

src/lib/MultiSelect.svelte

@@ -383,7 +383,13 @@
     const query = event?.target?.value.trim().toLowerCase()
     if (!query) return
 
-    const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT)
+    const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => {
+        // don't highlight text in the "no matching options" message
+        if (node?.textContent === noMatchingOptionsMsg) return NodeFilter.FILTER_REJECT
+        return NodeFilter.FILTER_ACCEPT
+      },
+    })
     const text_nodes: Node[] = []
     let current_node = tree_walker.nextNode()
     while (current_node) {
@@ -414,7 +420,7 @@
 
     // create Highlight object from ranges and add to registry
     // eslint-disable-next-line no-undef
-    CSS.highlights.set(`search-results`, new Highlight(...ranges.flat()))
+    CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat()))
   }
 </script>
 
@@ -782,10 +788,7 @@
   :where(span.max-select-msg) {
     padding: 0 3pt;
   }
-  ::highlight(search-results) {
-    color: var(--sms-highlight-color, orange);
-    background: var(--sms-highlight-bg);
-    text-decoration: var(--sms-highlight-text-decoration);
-    text-decoration-color: var(--sms-highlight-text-decoration-color);
+  ::highlight(sms-search-matches) {
+    color: mediumaquamarine;
   }
 </style>