feat(toggle): dispatch toggle event

COMPONENT_INDEX.md

@@ -3958,16 +3958,17 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
+| Event name | Type       | Detail                             |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :--------------------------------- |
-| click      | forwarded | --     |
+| toggle     | dispatched | <code>{ toggled: boolean; }</code> |
-| mouseover  | forwarded | --     |
+| click      | forwarded  | --                                 |
-| mouseenter | forwarded | --     |
+| mouseover  | forwarded  | --                                 |
-| mouseleave | forwarded | --     |
+| mouseenter | forwarded  | --                                 |
-| change     | forwarded | --     |
+| mouseleave | forwarded  | --                                 |
-| keyup      | forwarded | --     |
+| change     | forwarded  | --                                 |
-| focus      | forwarded | --     |
+| keyup      | forwarded  | --                                 |
-| blur       | forwarded | --     |
+| focus      | forwarded  | --                                 |
+| blur       | forwarded  | --                                 |
 
 ## `ToggleSkeleton`
 

docs/src/COMPONENT_API.json

@@ -9245,6 +9245,11 @@
       ],
       "slots": [],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "toggle",
+          "detail": "{ toggled: boolean; }"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },

docs/src/pages/components/Toggle.svx

@@ -19,6 +19,10 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <FileSource src="/framed/Toggle/ToggleReactive" />
 
+### on:toggle event
+
+<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
+
 ### Custom labels
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

src/Toggle/Toggle.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ toggled: boolean; }} toggle
+   */
+
   /**
    * Specify the toggle size
    * @type {"default" | "sm"}
@@ -28,6 +32,12 @@
    * @type {string}
    */
   export let name = undefined;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("toggle", { toggled });
 </script>
 
 <div

tests/Toggle.test.svelte

@@ -4,7 +4,13 @@
 
 <Toggle labelText="Push notifications" />
 
-<Toggle labelText="Push notifications" toggled />
+<Toggle
+  labelText="Push notifications"
+  toggled
+  on:toggle="{(e) => {
+    console.log(e.detail.toggled);
+  }}"
+/>
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 

types/Toggle/Toggle.d.ts

@@ -53,6 +53,7 @@ export default class Toggle {
   $$prop_def: ToggleProps;
   $$slot_def: {};
 
+  $on(eventname: "toggle", cb: (event: CustomEvent<{ toggled: boolean }>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;