Add catpuccin theme + material 3 components

- Update DankToggle to be more representative of m3 design
- Add DankButtonGroup to represent a m3 button group

Widgets/DankToggle.qml

@@ -5,6 +5,7 @@ import qs.Widgets
 Item {
     id: toggle
 
+    // API
     property bool checked: false
     property bool enabled: true
     property bool toggling: false
@@ -17,13 +18,15 @@ Item {
 
     readonly property bool showText: text && !hideText
 
-    width: showText ? parent.width : 48
-    height: showText ? 60 : 24
+    readonly property int trackWidth: 52
+    readonly property int trackHeight: 30
+    readonly property int insetCircle: 24
+
+    width: showText ? parent.width : trackWidth
+    height: showText ? 60 : trackHeight
 
     function handleClick() {
-        if (!enabled) {
-            return
-        }
+        if (!enabled) return
         checked = !checked
         clicked()
         toggled(checked)
@@ -31,7 +34,6 @@ Item {
 
     StyledRect {
         id: background
-
         anchors.fill: parent
         radius: showText ? Theme.cornerRadius : 0
         color: showText ? Theme.surfaceHover : "transparent"
@@ -80,26 +82,35 @@ Item {
     StyledRect {
         id: toggleTrack
 
-        width: text ? 48 : parent.width
-        height: text ? 24 : parent.height
+        width: showText ? trackWidth : Math.max(parent.width, trackWidth)
+        height: showText ? trackHeight : Math.max(parent.height, trackHeight)
         anchors.right: parent.right
-        anchors.rightMargin: text ? Theme.spacingM : 0
+        anchors.rightMargin: showText ? Theme.spacingM : 0
         anchors.verticalCenter: parent.verticalCenter
         radius: height / 2
+
         color: (checked && enabled) ? Theme.primary : Theme.surfaceVariantAlpha
         opacity: toggling ? 0.6 : (enabled ? 1 : 0.4)
 
-        StyledRect {
-            id: toggleHandle
+        border.color: (!checked || !enabled) ? Theme.outline : "transparent"
 
-            width: 20
-            height: 20
-            radius: 10
-            color: Theme.surface
+        readonly property int pad: Math.round((height - thumb.width) / 2)
+        readonly property int edgeLeft: pad
+        readonly property int edgeRight: width - thumb.width - pad
+
+        StyledRect {
+            id: thumb
+
+            width: (checked && enabled) ? insetCircle : insetCircle - 4
+            height: (checked && enabled) ? insetCircle : insetCircle - 4
+            radius: width / 2
             anchors.verticalCenter: parent.verticalCenter
-            x: (checked && enabled) ? parent.width - width - 2 : 2
-            border.color: Qt.rgba(0, 0, 0, 0.1)
-            border.width: 1
+
+            color: (checked && enabled) ? Theme.surface : Theme.outline
+            border.color: (checked && enabled) ? Theme.outline : Theme.outline
+            border.width: (checked && enabled) ? 1 : 2
+
+            x: (checked && enabled) ? toggleTrack.edgeRight : toggleTrack.edgeLeft
 
             Behavior on x {
                 NumberAnimation {
@@ -108,6 +119,48 @@ Item {
                     easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
                 }
             }
+
+            Behavior on color {
+                ColorAnimation {
+                    duration: Appearance.anim.durations.normal
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Appearance.anim.curves.emphasized
+                }
+            }
+
+            Behavior on border.width {
+                NumberAnimation {
+                    duration: Appearance.anim.durations.normal
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Appearance.anim.curves.emphasized
+                }
+            }
+
+            DankIcon {
+                id: checkIcon
+                anchors.centerIn: parent
+                name: "check"
+                size: 20
+                color: Theme.surfaceText
+                filled: true
+                opacity: checked && enabled ? 1 : 0
+                scale: checked && enabled ? 1 : 0.6
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Anims.durShort
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Anims.emphasized
+                    }
+                }
+                Behavior on scale {
+                    NumberAnimation {
+                        duration: Anims.durShort
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Anims.emphasized
+                    }
+                }
+            }
         }
 
         StateLayer {