Switch gains checked_state_changed callback() (#9520)

Author: NigelBreslaw

ui-libraries/material/docs/src/content/docs/components/switch.mdx

@@ -60,4 +60,9 @@ A tooltip text that appears when hovering over the switch.
 ## Functions
 
 ### toggle()
-Toggles the switch state between checked and unchecked.
+Toggles the switch state between checked and unchecked.
+
+## Callbacks
+
+### checked_state_changed(checked: bool)
+The switch state changed.

ui-libraries/material/src/ui/components/switch.slint

@@ -17,6 +17,8 @@ export component Switch {
     property <bool> has_icon: (root.checked && root.on_icon.width > 0 && root.on_icon.height > 0) || (root.off_icon.width > 0 && root.off_icon.height > 0);
     property <color> foreground: root.checked ? MaterialPalette.on_primary_container : MaterialPalette.surface_container_highest;
 
+    callback checked_state_changed(checked: bool);
+
     min_width: MaterialStyleMetrics.size_52;
     min_height: MaterialStyleMetrics.size_32;
 
@@ -125,6 +127,10 @@ export component Switch {
         root.checked = !root.checked;
     }
 
+    changed checked => {
+        root.checked_state_changed(root.checked);
+    }
+
     states [
         disabled when !root.enabled : {
            state_layer.display_background: false;