feat(multi-select): forward "on:clear" event

COMPONENT_INDEX.md

@@ -2749,6 +2749,7 @@ No slots.
 
 ### Forwarded events
 
+- `on:clear`
 - `on:keydown`
 - `on:focus`
 - `on:blur`

docs/src/PUBLIC_API.json

@@ -8051,11 +8051,22 @@
       ],
       "slots": [],
       "forwarded_events": [
+        [
+          "clear",
+          {
+            "start": 8393,
+            "end": 8401,
+            "type": "EventHandler",
+            "name": "clear",
+            "modifiers": [],
+            "expression": null
+          }
+        ],
         [
           "keydown",
           {
-            "start": 9267,
-            "end": 9277,
+            "start": 9289,
+            "end": 9299,
             "type": "EventHandler",
             "name": "keydown",
             "modifiers": [],
@@ -8065,8 +8076,8 @@
         [
           "focus",
           {
-            "start": 9769,
-            "end": 9777,
+            "start": 9791,
+            "end": 9799,
             "type": "EventHandler",
             "name": "focus",
             "modifiers": [],
@@ -8076,8 +8087,8 @@
         [
           "blur",
           {
-            "start": 9788,
-            "end": 9795,
+            "start": 9810,
+            "end": 9817,
             "type": "EventHandler",
             "name": "blur",
             "modifiers": [],

src/MultiSelect/MultiSelect.svelte

@@ -169,11 +169,10 @@
   let fieldRef = null;
   let selectionRef = null;
   let inputRef = null;
-
-  $: inputValue = "";
-  $: initialSorted = false;
-  $: highlightedIndex = -1;
-  $: prevChecked = [];
+  let inputValue = "";
+  let initialSorted = false;
+  let highlightedIndex = -1;
+  let prevChecked = [];
 
   setContext("MultiSelect", {
     declareRef: ({ key, ref }) => {
@@ -335,6 +334,7 @@
       {#if checked.length > 0}
         <ListBoxSelection
           selectionCount="{checked.length}"
+          on:clear
           on:clear="{() => {
             sortedItems = sortedItems.map((item) => ({
               ...item,