add focus ring to group and ripple buttons

dots/.config/quickshell/ii/modules/common/widgets/RippleButton.qml

@@ -29,6 +29,7 @@ Button {
     property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"
     property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
     property color colRippleToggled: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
+    property color colFocusRing: Appearance.colors.colOnSecondaryContainer
 
     opacity: root.enabled ? 1 : 0.4
     property color buttonColor: ColorUtils.transparentize(root.toggled ? 
@@ -180,6 +181,21 @@ Button {
         }
     }
 
+    Rectangle {
+        id: focusRing
+        radius: buttonBackground.radius - anchors.margins
+        visible: root.visualFocus
+        color: "transparent"
+        anchors {
+            fill: parent
+            margins: -4
+        }
+        border {
+            color: root.colFocusRing
+            width: 2
+        }
+    }
+
     contentItem: StyledText {
         text: root.buttonText
     }