From 3b50452d2cdd89d853b581b4b3a96b0bd50b0bf7 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 15 Oct 2024 11:18:43 +0200
Subject: [PATCH] update focus style of switch

---
 .changeset/six-readers-melt.md                              | 5 +++++
 .../src/components/form/mt-switch/mt-switch.vue             | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/six-readers-melt.md

diff --git a/.changeset/six-readers-melt.md b/.changeset/six-readers-melt.md
new file mode 100644
index 000000000..43448ac9c
--- /dev/null
+++ b/.changeset/six-readers-melt.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Update focus style of switch
diff --git a/packages/component-library/src/components/form/mt-switch/mt-switch.vue b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
index 0766d02a2..e312bcd9e 100644
--- a/packages/component-library/src/components/form/mt-switch/mt-switch.vue
+++ b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
@@ -368,10 +368,10 @@ export default defineComponent({
       }
     }
 
-    &:focus-within {
+    &:has(:focus-visible) {
       .mt-field__switch-state {
-        border-color: $color-shopware-brand-500;
-        box-shadow: 0 0 4px $color-shopware-brand-500;
+        outline: 2px solid var(--color-border-brand-selected);
+        outline-offset: 2px;
       }
     }
   }