fix: use data to set focus instead of class

BREAKING CHANGE: focus is set by data attribute instead of class

src/js/plugins/track-focus.js

@@ -7,17 +7,13 @@
  */
 
 const DATA_MOUSE_FOCUS = 'data-focus-mouse'
-const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse'
 
 class TrackFocus {
   constructor() {
     this._usingMouse = false
-
     this._bindEvents()
   }
 
-  // Public
-
   // Private
   _bindEvents() {
     if (typeof document === 'undefined') {
@@ -32,14 +28,12 @@ class TrackFocus {
     document.addEventListener('focusin', (evt) => {
       if (this._usingMouse) {
         if (evt.target) {
-          evt.target.classList.add(CLASS_NAME_MOUSE_FOCUS)
           evt.target.setAttribute(DATA_MOUSE_FOCUS, true)
         }
       }
     })
     document.addEventListener('focusout', (evt) => {
       if (evt.target) {
-        evt.target.classList.remove(CLASS_NAME_MOUSE_FOCUS)
         evt.target.setAttribute(DATA_MOUSE_FOCUS, false)
       }
     })

src/scss/components/_navigation.scss

@@ -408,7 +408,7 @@
               }
             }
 
-            &.focus--mouse {
+            &[data-focus-mouse='true'] {
               border-color: transparent !important;
             }
 

src/scss/components/_tab.scss

@@ -65,7 +65,7 @@
       border-right: 2px solid transparent;
       white-space: normal;
       position: relative;
-      &:focus:not(.focus--mouse) {
+      &:focus:not([data-focus-mouse='true']) {
         box-shadow: inset 0 0px 0 2px $focus-outline-color !important;
       }
       &:hover {
@@ -117,7 +117,7 @@
       border-bottom-color: transparent;
     }
 
-    &:focus:not(.focus--mouse) {
+    &:focus:not([data-focus-mouse='true']) {
       box-shadow: inset 0 1px 0 2px $focus-outline-color !important;
     }
 
@@ -326,7 +326,7 @@
     .nav-link {
       border-bottom: none;
       border-top: 2px solid transparent;
-      &:focus:not(.focus--mouse) {
+      &:focus:not([data-focus-mouse='true']) {
         box-shadow: inset 0 -1px 0 2px $focus-outline-color !important;
       }
     }
@@ -356,7 +356,7 @@
         border-bottom: none;
         border-right: none;
         border-left: 2px solid transparent;
-        &:focus:not(.focus--mouse) {
+        &:focus:not([data-focus-mouse='true']) {
           box-shadow: inset 0px 0px 0 2px $focus-outline-color !important;
         }
         &:hover {

src/scss/forms/_form-input-number.scss

@@ -88,7 +88,7 @@
         }
       }
     }
-    &:focus:not(.focus--mouse) {
+    &:focus:not([data-focus-mouse='true']) {
       opacity: 1;
     }
 

src/scss/forms/_form-input-upload.scss

@@ -571,7 +571,7 @@
         }
       }
 
-      &:focus:not(.focus--mouse) {
+      &:focus:not([data-focus-mouse='true']) {
         &[type='file'] + label {
           outline: auto 5px -webkit-focus-ring-color;
         }

src/scss/forms/_form-toggles.scss

@@ -24,7 +24,7 @@
     &:focus + .lever {
       @extend %focus;
     }
-    &:focus.focus--mouse + .lever {
+    &:focus[data-focus-mouse='true'] + .lever {
       @extend %focusmouse;
     }
     & + .lever {

src/scss/forms/_forms.scss

@@ -272,7 +272,7 @@ textarea {
       @extend %focus;
     }
 
-    &:focus.focus--mouse + label {
+    &:focus[data-focus-mouse='true'] + label {
       @extend %focusmouse;
     }
   }

src/scss/forms/_just-validate.scss

@@ -8,10 +8,10 @@
   }
 }
 
-.input-group-text:has(~ .focus--mouse:not(.btn)),
-.focus--mouse:not(.btn) ~ .input-group-text,
-button:has(~ .focus--mouse:not(.btn)),
-.focus--mouse:not(.btn) + button {
+.input-group-text:has(~ [data-focus-mouse='true']:not(.btn)),
+[data-focus-mouse='true']:not(.btn) ~ .input-group-text,
+button:has(~ [data-focus-mouse='true']:not(.btn)),
+[data-focus-mouse='true']:not(.btn) + button {
   border-color: inherit !important;
   box-shadow: none !important;
   outline: none !important;

src/scss/utilities/focus.scss

@@ -1,10 +1,10 @@
-:focus:not(.focus--mouse),
+:focus:not([data-focus-mouse='true']),
 %focus,
-.it-carousel-wrapper .splide__pagination button:focus:not(.focus--mouse),
-.upload:focus:not(.focus--mouse) + label,
-.upload-dragdrop-input:focus[type='file']:not(.focus--mouse) + label,
-.avatar-upload:focus-within:not(.focus--mouse),
-.rating input:focus:not(.focus--mouse) + label svg {
+.it-carousel-wrapper .splide__pagination button:focus:not([data-focus-mouse='true']),
+.upload:focus:not([data-focus-mouse='true']) + label,
+.upload-dragdrop-input:focus[type='file']:not([data-focus-mouse='true']) + label,
+.avatar-upload:focus-within:not([data-focus-mouse='true']),
+.rating input:focus:not([data-focus-mouse='true']) + label svg {
   border-color: $focus-outline-color-out !important;
   box-shadow:
     0 0 0 2px $focus-outline-color-in,
@@ -17,15 +17,15 @@
   box-shadow: none !important;
 }
 
-.focus--mouse:not(.btn),
+[data-focus-mouse='true']:not(.btn),
 %focusmouse {
   border-color: inherit !important;
   box-shadow: none !important;
   outline: none !important;
 }
 
 p a {
-  &:focus:not(.focus--mouse, .btn) {
+  &:focus:not([data-focus-mouse='true'], .btn) {
     outline-offset: 0px !important;
     outline: 3px $focus-outline-color-out solid !important;
     background: $focus-outline-color-in;
@@ -38,22 +38,22 @@ p a {
 .shadow-none,
 .shadow-sm,
 .shadow-lg {
-  &:focus:not(.focus--mouse) {
+  &:focus:not([data-focus-mouse='true']) {
     box-shadow:
       0 0 0 2px $focus-outline-color-in,
       0 0 0 5px $focus-outline-color-out !important;
   }
 }
 
 .avatar-group-stacked .avatar {
-  &:focus:not(.focus--mouse) {
+  &:focus:not([data-focus-mouse='true']) {
     border: 0;
     margin-left: -4px;
     margin-top: 2px;
     margin-right: 2px;
   }
 
-  &.avatar-dropdown .btn-dropdown:focus:not(.focus--mouse) {
+  &.avatar-dropdown .btn-dropdown:focus:not([data-focus-mouse='true']) {
     height: 100%;
     width: 100%;
     border-radius: 50%;
@@ -62,14 +62,14 @@ p a {
 
 .chip {
   button {
-    &:focus:not(.focus--mouse) {
+    &:focus:not([data-focus-mouse='true']) {
       border-radius: 50%;
     }
   }
 }
 
 .form-check {
-  .toggles label:has(input[type='checkbox']:focus:not(.focus--mouse)) {
+  .toggles label:has(input[type='checkbox']:focus:not([data-focus-mouse='true'])) {
     @extend %focus;
 
     input,
@@ -80,12 +80,12 @@ p a {
     }
   }
 
-  .toggles label:has(input[type='checkbox']:focus.focus--mouse) {
+  .toggles label:has(input[type='checkbox']:focus[data-focus-mouse='true']) {
     @extend %focusmouse;
   }
 
   &.form-check-group {
-    :focus:not(.focus--mouse),
+    :focus:not([data-focus-mouse='true']),
     [type='checkbox']:focus + label,
     [type='radio']:focus + label {
       width: 100%;
@@ -95,7 +95,7 @@ p a {
 
 .bg-dark .btn,
 .back-to-top.dark {
-  &:focus:not(.focus--mouse),
+  &:focus:not([data-focus-mouse='true']),
   &%focus {
     box-shadow:
       0 0 0 2px $focus-outline-color-out,