diff --git a/scss/bitstyles/base/forms/_index.scss b/scss/bitstyles/base/forms/_index.scss
index 37482d0ee..8ea99e48d 100644
--- a/scss/bitstyles/base/forms/_index.scss
+++ b/scss/bitstyles/base/forms/_index.scss
@@ -25,10 +25,10 @@ label {
   gap: settings.$label-gap;
   align-items: baseline;
   margin-bottom: settings.$label-gap;
-  cursor: pointer;
   font-weight: settings.$label-font-weight;
+  cursor: pointer;
 
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     color: settings.$label-disabled-color;
   }
 }
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index 4dea21b00..250b37792 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -5,22 +5,16 @@
 @use 'sass:math';
 
 [type='checkbox'] {
-  display: inline-block;
   position: relative;
+  top: calc(settings.$gap / 2);
   flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin: settings.$gap;
+  outline-offset: 0;
   font-size: settings.$size;
-  vertical-align: middle;
   cursor: pointer;
   appearance: none;
-  top: calc(settings.$gap / 2);
-
-  &:focus-visible {
-    outline: focus.$outline-color solid focus.$outline-width;
-    outline-offset: focus.$outline-offset;
-  }
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -35,12 +29,17 @@
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
-      outline: none;
+      outline-width: 0;
       background-color: settings.$background-color-hover;
       box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       background-color: settings.$background-color-active;
@@ -57,7 +56,9 @@
       transition: opacity math.div(animation.$transition-duration, 2)
           animation.$transition-duration animation.$transition-easing,
         transform math.div(animation.$transition-duration, 2)
-          animation.$transition-duration animation.$transition-easing;
+          animation.$transition-duration animation.$transition-easing,
+        outline-offset animation.$transition-duration
+          animation.$transition-easing;
       opacity: 0;
       background-image: settings.$background-image-checked;
       background-repeat: no-repeat;
@@ -77,21 +78,6 @@
       }
     }
 
-    &:checked:hover,
-    &:checked:focus {
-      border-color: settings.$border-color-checked-hover;
-      background-color: settings.$background-color-checked-hover;
-      box-shadow: settings.$box-shadow-checked-hover;
-      color: settings.$color-checked-hover;
-    }
-
-    &:checked:active {
-      border-color: settings.$border-color-checked-active;
-      background-color: settings.$background-color-checked-active;
-      box-shadow: settings.$box-shadow-checked-active;
-      color: settings.$color-checked-active;
-    }
-
     &:invalid,
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
@@ -113,5 +99,23 @@
         color: settings.$color-disabled-checked;
       }
     }
+
+    &:checked:hover:not(:invalid),
+    &:checked:focus:not(:invalid),
+    &:checked:hover:not([aria-invalid='true']),
+    &:checked:focus:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-hover;
+      background-color: settings.$background-color-checked-hover;
+      box-shadow: settings.$box-shadow-checked-hover;
+      color: settings.$color-checked-hover;
+    }
+
+    &:checked:active:not(:invalid),
+    &:checked:active:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-active;
+      background-color: settings.$background-color-checked-active;
+      box-shadow: settings.$box-shadow-checked-active;
+      color: settings.$color-checked-active;
+    }
   }
 }
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index 5c7447d6b..2674ceabb 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -81,6 +81,9 @@ $box-shadow-disabled: none !default;
 //
 // Disabled-checked colors ////////////////////////////////////////
 $color-disabled-checked: palette.get('grayscale', 'white') !default;
-$background-color-disabled-checked: palette.get('grayscale', 'light-1') !default;
+$background-color-disabled-checked: palette.get(
+  'grayscale',
+  'light-1'
+) !default;
 $border-color-disabled-checked: palette.get('grayscale', 'light-1') !default;
 $box-shadow-disabled-checked: none !default;
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index 10e1378ad..1bf5562a4 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -5,19 +5,15 @@
 
 [type='radio'] {
   position: relative;
+  top: calc(settings.$gap / 2);
   flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin: settings.$gap;
+  outline-offset: 0;
   font-size: settings.$size;
   cursor: pointer;
   appearance: none;
-  top: calc(settings.$gap / 2);
-
-  &:focus-visible {
-    outline: focus.$outline-color solid focus.$outline-width;
-    outline-offset: focus.$outline-offset;
-  }
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -37,7 +33,9 @@
       transform: scale(0.5);
       transition: opacity animation.$transition-duration
           animation.$transition-easing,
-        transform animation.$transition-duration animation.$transition-easing;
+        transform animation.$transition-duration animation.$transition-easing,
+        outline-offset animation.$transition-duration
+          animation.$transition-easing;
       border-radius: settings.$border-radius;
       opacity: 0;
       background: settings.$color-checked;
@@ -46,11 +44,17 @@
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
+      outline-width: 0;
       background-color: settings.$background-color-hover;
       box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       background-color: settings.$background-color-active;
@@ -70,21 +74,6 @@
       }
     }
 
-    &:checked:hover,
-    &:checked:focus {
-      border-color: settings.$border-color-checked-hover;
-      background-color: settings.$background-color-checked-hover;
-      box-shadow: settings.$box-shadow-checked-hover;
-      color: settings.$color-checked-hover;
-    }
-
-    &:checked:active {
-      border-color: settings.$border-color-checked-active;
-      background-color: settings.$background-color-checked-active;
-      box-shadow: settings.$box-shadow-checked-active;
-      color: settings.$color-checked-active;
-    }
-
     &:invalid,
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
@@ -110,5 +99,27 @@
         background: settings.$color-disabled-checked;
       }
     }
+
+    &:focus:not(:focus-visible) {
+      outline-width: 0;
+    }
+
+    &:checked:hover:not(:invalid),
+    &:checked:focus:not(:invalid),
+    &:checked:hover:not([aria-invalid='true']),
+    &:checked:focus:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-hover;
+      background-color: settings.$background-color-checked-hover;
+      box-shadow: settings.$box-shadow-checked-hover;
+      color: settings.$color-checked-hover;
+    }
+
+    &:checked:active:not(:invalid),
+    &:checked:active:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-active;
+      background-color: settings.$background-color-checked-active;
+      box-shadow: settings.$box-shadow-checked-active;
+      color: settings.$color-checked-active;
+    }
   }
 }
diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
index fb90a7ee3..3b55bcd98 100644
--- a/scss/bitstyles/base/input-text/_index.scss
+++ b/scss/bitstyles/base/input-text/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use './settings';
 @use '../../settings/animation';
+@use '../../settings/focus';
 @use 'sass:math';
 @use '../../tools/custom-property';
 
@@ -9,7 +10,9 @@ textarea,
 input {
   transition: color animation.$transition-duration animation.$transition-easing,
     background-color animation.$transition-duration animation.$transition-easing,
-    border animation.$transition-duration animation.$transition-easing;
+    border animation.$transition-duration animation.$transition-easing,
+    outline-offset animation.$transition-duration animation.$transition-easing;
+  outline-offset: 0;
   resize: vertical;
 
   &::placeholder {
@@ -43,7 +46,7 @@ textarea {
   width: 100%;
   padding: settings.$padding-vertical settings.$padding-horizontal;
   border: settings.$border-width solid settings.$border-color;
-  border-radius: 
+  border-radius:
     var(#{custom-property.get($items: ('input-text', 'border-top-left-radius'))})
     var(#{custom-property.get($items: ('input-text', 'border-top-right-radius'))})
     var(#{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))})
@@ -53,7 +56,8 @@ textarea {
   color: settings.$color;
   font: settings.$font;
 
-  &:hover {
+  &:hover,
+  &:focus {
     border-color: settings.$border-color-hover;
     background-color: settings.$background-hover;
     box-shadow: settings.$box-shadow-hover;
@@ -64,10 +68,14 @@ textarea {
     }
   }
 
-  &:active,
-  &:focus {
+  &:focus-visible {
+    outline: focus.$outline-color solid focus.$outline-width;
+    outline-offset: focus.$outline-offset;
+  }
+
+  &:active {
     border-color: settings.$border-color-active;
-    outline: none;
+    outline-width: 0;
     background-color: settings.$background-active;
     box-shadow: settings.$box-shadow-active;
     color: settings.$color-active;
@@ -100,5 +108,9 @@ textarea {
       color: settings.$placeholder-color-disabled;
     }
   }
+
+  &:focus:not(:focus-visible) {
+    outline-width: 0;
+  }
 }
 /* stylelint-enable selector-max-type */
diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
index 2ced9a503..f9654efea 100644
--- a/scss/bitstyles/base/select/_index.scss
+++ b/scss/bitstyles/base/select/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use 'settings';
 @use '../../settings/animation';
+@use '../../settings/focus';
 @use '../../settings/typography';
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -19,11 +20,13 @@
       border animation.$transition-duration animation.$transition-easing;
     border: settings.$border-width solid settings.$border-color;
     border-radius: settings.$border-radius;
+    outline-offset: 0;
     background-color: settings.$background-color;
     background-image: settings.$background-image;
     background-repeat: no-repeat;
     background-position: right 0.75em top 50%;
     background-size: 1em;
+    box-shadow: settings.$box-shadow;
     color: settings.$color;
     font-weight: settings.$font-weight;
     text-overflow: ellipsis;
@@ -34,19 +37,26 @@
       display: none;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       border-color: settings.$border-color-hover;
       background-color: settings.$background-color-hover;
       background-image: settings.$background-image-hover;
+      box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
-    &:focus,
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       outline: none;
       background-color: settings.$background-color-active;
       background-image: settings.$background-image-active;
+      box-shadow: settings.$box-shadow-active;
       color: settings.$color-active;
     }
 
@@ -55,6 +65,7 @@
       border-color: settings.$border-color-invalid;
       background-color: settings.$background-color-invalid;
       background-image: settings.$background-image-invalid;
+      box-shadow: settings.$box-shadow-invalid;
       color: settings.$color-invalid;
     }
 
@@ -62,9 +73,14 @@
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
       background-image: settings.$background-image-disabled;
+      box-shadow: settings.$box-shadow-disabled;
       color: settings.$color-disabled;
       cursor: default;
     }
+
+    &:focus:not(:focus-visible) {
+      outline-width: 0;
+    }
   }
   /* stylelint-enable selector-max-type */
 }
diff --git a/scss/bitstyles/base/select/_settings.scss b/scss/bitstyles/base/select/_settings.scss
index 19f832d36..e6715de61 100644
--- a/scss/bitstyles/base/select/_settings.scss
+++ b/scss/bitstyles/base/select/_settings.scss
@@ -18,7 +18,7 @@ $color: palette.get('grayscale', 'dark-1') !default;
 $border-color: palette.get('grayscale', 'dark-1') !default;
 $background-color: palette.get('grayscale', 'white') !default;
 $background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(palette.get('grayscale', 'light-1'))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
-$box-shadow: none;
+$box-shadow: none !default;
 
 //
 // Hover styles ////////////////////////////////////////
@@ -26,7 +26,7 @@ $color-hover: palette.get('grayscale', 'dark-1') !default;
 $border-color-hover: palette.get('grayscale', 'dark-1') !default;
 $background-color-hover: palette.get('brand-1', 'light-4') !default;
 $background-image-hover: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color($color-hover)}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
-$box-shadow: none;
+$box-shadow-hover: none !default;
 
 //
 // Active styles ////////////////////////////////////////
@@ -34,7 +34,7 @@ $color-active: palette.get('brand-1', 'dark-1') !default;
 $border-color-active: palette.get('brand-1', 'dark-1') !default;
 $background-color-active: palette.get('grayscale', 'white') !default;
 $background-image-active: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(palette.get('grayscale', 'light-1'))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
-$box-shadow: shadows.get('default');
+$box-shadow-active: shadows.get('default') !default;
 
 //
 // Invalid styles ////////////////////////////////////////
@@ -42,6 +42,7 @@ $color-invalid: palette.get('warning') !default;
 $border-color-invalid: palette.get('warning') !default;
 $background-color-invalid: palette.get('grayscale', 'white') !default;
 $background-image-invalid: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(palette.get('warning'))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
+$box-shadow-invalid: none !default;
 
 //
 // Disabled styles ////////////////////////////////////////
@@ -49,3 +50,4 @@ $color-disabled: palette.get('grayscale') !default;
 $border-color-disabled: palette.get('grayscale') !default;
 $background-color-disabled: palette.get('grayscale', 'light-3') !default;
 $background-image-disabled: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(palette.get('grayscale', 'light-1'))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
+$box-shadow-disabled: none !default;