add focus ring to group and ripple buttons

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

@@ -42,6 +42,7 @@ Button {
     property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F"
     property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"
     property color colBackgroundToggledActive: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
+    property color colFocusRing: Appearance.colors.colOnSecondaryContainer
 
     property real radius: root.down ? root.buttonRadiusPressed : root.buttonRadius
     property real leftRadius: root.down ? root.buttonRadiusPressed : root.buttonRadius
@@ -117,7 +118,6 @@ Button {
         };
     }
 
-    property bool tabbedTo: root.focus && (focusReason === Qt.TabFocusReason || focusReason === Qt.BacktabFocusReason)
     background: Rectangle {
         id: buttonBackground
         topLeftRadius: root.leftRadius
@@ -130,9 +130,24 @@ Button {
         Behavior on color {
             animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
         }
+    }
 
-        border.width: root.tabbedTo ? 2 : 0
+    Rectangle {
-        border.color: Appearance.colors.colSecondary
+        id: focusRing
+        topLeftRadius: root.leftRadius - anchors.margins
+        topRightRadius: root.rightRadius - anchors.margins
+        bottomLeftRadius: root.leftRadius - anchors.margins
+        bottomRightRadius: root.rightRadius - anchors.margins
+        visible: root.visualFocus
+        color: "transparent"
+        anchors {
+            fill: parent
+            margins: -4
+        }
+        border {
+            color: root.colFocusRing
+            width: 2
+        }
     }
 
     contentItem: StyledText {

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
     }