From 25e52c4db63a1d906059021b0d652000e166192b Mon Sep 17 00:00:00 2001
From: Remi Ebeling <remi.ebeling@merifond-new-markets.de>
Date: Tue, 18 Mar 2025 14:43:51 +0100
Subject: [PATCH 1/7] add missing focus state highlighting in toggle component

---
 packages/forms/resources/views/components/toggle.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/forms/resources/views/components/toggle.blade.php b/packages/forms/resources/views/components/toggle.blade.php
index 7cbaafea6a..62a08de36a 100644
--- a/packages/forms/resources/views/components/toggle.blade.php
+++ b/packages/forms/resources/views/components/toggle.blade.php
@@ -68,7 +68,7 @@
                     ], escape: false)
                     ->merge($getExtraAttributes(), escape: false)
                     ->merge($getExtraAlpineAttributes(), escape: false)
-                    ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70'])
+                    ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70 focus-visible:outline-primary-600'])
             }}
         >
             <span

From 8e73ffc2fb9c14477edb5a18f9177ac32a038387 Mon Sep 17 00:00:00 2001
From: Remi Ebeling <remi.ebeling@merifond-new-markets.de>
Date: Thu, 20 Mar 2025 14:04:08 +0100
Subject: [PATCH 2/7] switch focus-highlighting from outline to ring in toggle

---
 packages/forms/resources/views/components/toggle.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/forms/resources/views/components/toggle.blade.php b/packages/forms/resources/views/components/toggle.blade.php
index 62a08de36a..ce9580dd69 100644
--- a/packages/forms/resources/views/components/toggle.blade.php
+++ b/packages/forms/resources/views/components/toggle.blade.php
@@ -68,7 +68,7 @@
                     ], escape: false)
                     ->merge($getExtraAttributes(), escape: false)
                     ->merge($getExtraAlpineAttributes(), escape: false)
-                    ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70 focus-visible:outline-primary-600'])
+                    ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70 focus-visible:ring-primary-500 focus-visible:ring-2'])
             }}
         >
             <span

From b47c89d6eaf439417a8f46ed7a6f28b049519a4e Mon Sep 17 00:00:00 2001
From: Remi Ebeling <remi.ebeling@merifond-new-markets.de>
Date: Thu, 20 Mar 2025 15:07:05 +0100
Subject: [PATCH 3/7] add ring offset to improve focus indication for active
 toggles

---
 packages/forms/resources/views/components/toggle.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/forms/resources/views/components/toggle.blade.php b/packages/forms/resources/views/components/toggle.blade.php
index ce9580dd69..3f675c7d4a 100644
--- a/packages/forms/resources/views/components/toggle.blade.php
+++ b/packages/forms/resources/views/components/toggle.blade.php
@@ -68,7 +68,7 @@
                     ], escape: false)
                     ->merge($getExtraAttributes(), escape: false)
                     ->merge($getExtraAlpineAttributes(), escape: false)
-                    ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70 focus-visible:ring-primary-500 focus-visible:ring-2'])
+                    ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70 focus-visible:ring-primary-500 focus-visible:ring-offset-1 focus-visible:ring-2'])
             }}
         >
             <span

From 712a99aa5e8089ef0d6b2bde00de44ff817bce53 Mon Sep 17 00:00:00 2001
From: Remi Ebeling <remi.ebeling@merifond-new-markets.de>
Date: Fri, 21 Mar 2025 08:03:56 +0100
Subject: [PATCH 4/7] Fix toggle focus indication offset color in dark mode

---
 packages/forms/resources/views/components/toggle.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/forms/resources/views/components/toggle.blade.php b/packages/forms/resources/views/components/toggle.blade.php
index 3f675c7d4a..89e409b418 100644
--- a/packages/forms/resources/views/components/toggle.blade.php
+++ b/packages/forms/resources/views/components/toggle.blade.php
@@ -68,7 +68,7 @@
                     ], escape: false)
                     ->merge($getExtraAttributes(), escape: false)
                     ->merge($getExtraAlpineAttributes(), escape: false)
-                    ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70 focus-visible:ring-primary-500 focus-visible:ring-offset-1 focus-visible:ring-2'])
+                    ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70 focus-visible:ring-primary-600 focus-visible:ring-offset-1 focus-visible:ring-2 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900'])
             }}
         >
             <span

From 6baa476f427c5ce3d5a48ad96cc972ced2ee2752 Mon Sep 17 00:00:00 2001
From: Remi Ebeling <remi.ebeling@merifond-new-markets.de>
Date: Fri, 21 Mar 2025 08:18:54 +0100
Subject: [PATCH 5/7] make toggle-column keyboard-accessible

---
 .../views/columns/toggle-column.blade.php     | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/tables/resources/views/columns/toggle-column.blade.php b/packages/tables/resources/views/columns/toggle-column.blade.php
index 70c220ecd6..57985e830c 100644
--- a/packages/tables/resources/views/columns/toggle-column.blade.php
+++ b/packages/tables/resources/views/columns/toggle-column.blade.php
@@ -28,26 +28,22 @@
         @endphp
 
         <div
-            role="switch"
-            aria-checked="false"
-            x-bind:aria-checked="state.toString()"
-            wire:loading.attr="disabled"
-            @if (! $isDisabled)
-                x-on:click.stop.prevent="
-                    if (isLoading || $el.hasAttribute('disabled')) {
+            x-data="{
+                async updateState () {
+                    if (this.isLoading) {
                         return
                     }
 
-                    const updatedState = ! state
+                    const updatedState = ! this.state
 
                     // Only update the state if the toggle is being turned off,
                     // otherwise it will flicker on twice when Livewire replaces
                     // the element.
-                    if (state) {
-                        state = false
+                    if (this.state) {
+                        this.state = false
                     }
 
-                    isLoading = true
+                    this.isLoading = true
 
                     const response = await $wire.updateTableColumnState(
                         @js($getName()),
@@ -59,12 +55,21 @@
 
                     // The state is only updated on the frontend if the toggle is
                     // being turned off, so we only need to reset it then.
-                    if (! state && error) {
-                        state = ! state
+                    if (! this.state && error) {
+                        this.state = ! this.state
                     }
 
-                    isLoading = false
-                "
+                    this.isLoading = false
+                }
+            }"
+            role="switch"
+            aria-checked="false"
+            x-bind:aria-checked="state.toString()"
+            wire:loading.attr="disabled"
+            @if (! $isDisabled)
+                tabindex="0"
+                x-on:keydown.space="updateState"
+                x-on:click.stop="updateState"
                 x-tooltip="
                     error === undefined
                         ? false
@@ -114,7 +119,7 @@
                     }}'
             "
             @class([
-                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out',
+                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out focus-visible:ring-primary-600 focus-visible:ring-offset-1 focus-visible:ring-2 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900',
                 'pointer-events-none opacity-70' => $isDisabled,
             ])
         >

From e0f5bd6b0d979cc77ad86c749469f9fe65f89061 Mon Sep 17 00:00:00 2001
From: Remi Ebeling <remi.ebeling@merifond-new-markets.de>
Date: Fri, 21 Mar 2025 08:54:20 +0100
Subject: [PATCH 6/7] restore disabled check in callback

---
 packages/tables/resources/views/columns/toggle-column.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tables/resources/views/columns/toggle-column.blade.php b/packages/tables/resources/views/columns/toggle-column.blade.php
index 57985e830c..c37f5162a8 100644
--- a/packages/tables/resources/views/columns/toggle-column.blade.php
+++ b/packages/tables/resources/views/columns/toggle-column.blade.php
@@ -30,7 +30,7 @@
         <div
             x-data="{
                 async updateState () {
-                    if (this.isLoading) {
+                    if (this.isLoading || $el.hasAttribute('disabled')) {
                         return
                     }
 

From ca9b056e6ad16e71391b93ae638285ba3a7d1915 Mon Sep 17 00:00:00 2001
From: Remi Ebeling <remi.ebeling@merifond-new-markets.de>
Date: Fri, 21 Mar 2025 11:01:17 +0100
Subject: [PATCH 7/7] Revert changes i made to toggle-column

---
 .../views/columns/toggle-column.blade.php     | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/tables/resources/views/columns/toggle-column.blade.php b/packages/tables/resources/views/columns/toggle-column.blade.php
index c37f5162a8..db8fbe78d4 100644
--- a/packages/tables/resources/views/columns/toggle-column.blade.php
+++ b/packages/tables/resources/views/columns/toggle-column.blade.php
@@ -28,22 +28,26 @@
         @endphp
 
         <div
-            x-data="{
-                async updateState () {
-                    if (this.isLoading || $el.hasAttribute('disabled')) {
+            role="switch"
+            aria-checked="false"
+            x-bind:aria-checked="state.toString()"
+            wire:loading.attr="disabled"
+            @if (! $isDisabled)
+                x-on:click.stop.prevent="
+                    if (isLoading || $el.hasAttribute('disabled')) {
                         return
                     }
 
-                    const updatedState = ! this.state
+                    const updatedState = ! state
 
                     // Only update the state if the toggle is being turned off,
                     // otherwise it will flicker on twice when Livewire replaces
                     // the element.
-                    if (this.state) {
-                        this.state = false
+                    if (state) {
+                        state = false
                     }
 
-                    this.isLoading = true
+                    isLoading = true
 
                     const response = await $wire.updateTableColumnState(
                         @js($getName()),
@@ -55,21 +59,12 @@
 
                     // The state is only updated on the frontend if the toggle is
                     // being turned off, so we only need to reset it then.
-                    if (! this.state && error) {
-                        this.state = ! this.state
+                    if (! state && error) {
+                        state = ! state
                     }
 
-                    this.isLoading = false
-                }
-            }"
-            role="switch"
-            aria-checked="false"
-            x-bind:aria-checked="state.toString()"
-            wire:loading.attr="disabled"
-            @if (! $isDisabled)
-                tabindex="0"
-                x-on:keydown.space="updateState"
-                x-on:click.stop="updateState"
+                    isLoading = false
+                "
                 x-tooltip="
                     error === undefined
                         ? false
@@ -119,7 +114,7 @@
                     }}'
             "
             @class([
-                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out focus-visible:ring-primary-600 focus-visible:ring-offset-1 focus-visible:ring-2 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900',
+                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out',
                 'pointer-events-none opacity-70' => $isDisabled,
             ])
         >
@@ -177,4 +172,4 @@
             </span>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file