From 44b1e1eca704122bdbfe7a33c93d192ef0695332 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Tue, 15 Oct 2024 11:07:51 +0200
Subject: [PATCH] fix: add focus style to checkbox

---
 .changeset/dry-dancers-boil.md                              | 5 +++++
 .../src/components/form/mt-checkbox/mt-checkbox.vue         | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .changeset/dry-dancers-boil.md

diff --git a/.changeset/dry-dancers-boil.md b/.changeset/dry-dancers-boil.md
new file mode 100644
index 00000000..40c6e422
--- /dev/null
+++ b/.changeset/dry-dancers-boil.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Add focus styles for checkbox
diff --git a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
index 9f54f797..3b933827 100644
--- a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
+++ b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
@@ -292,6 +292,12 @@ export default defineComponent({
       height: 16px;
       position: relative;
 
+      &:focus-within {
+        outline: 2px solid var(--color-border-brand-selected);
+        outline-offset: 2px;
+        border-radius: var(--border-radius-checkbox);
+      }
+
       & input[type="checkbox"] {
         opacity: 0;
         display: block;