From a18defa055a89f30027f60e0383ef4dbdaec1a61 Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Mon, 9 May 2022 09:54:34 +0200
Subject: [PATCH 1/7] feat #1084 (carousel navigation focus): add focus for
 Prev and Next buttons

---
 scss/_carousel.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 78e3c378d6..4c47009e93 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -104,6 +104,7 @@
   text-align: center;
   background: none;
   border: 0;
+  outline: 0;
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
 
@@ -127,6 +128,16 @@
     --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg}; // Boosted mod
     color: $carousel-control-color;
   }
+
+  &:focus:focus-visible,
+  &:focus {
+    & > span {
+      outline: 3px solid $brand-orange;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px $white;
+
+    }
+  }
   // End mod
 }
 

From 6fb7b4093eea9b932e38c388647006080311607f Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Mon, 9 May 2022 10:08:43 +0200
Subject: [PATCH 2/7] feat #1084 (carousel navigation focus): add focus for
 indicators buttons

---
 scss/_carousel.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 4c47009e93..7af72d8a8c 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -135,7 +135,6 @@
       outline: 3px solid $brand-orange;
       outline-offset: 2px;
       box-shadow: 0 0 0 2px $white;
-
     }
   }
   // End mod
@@ -219,12 +218,22 @@
     &:hover,
     &:focus {
       background-color: color-contrast($carousel-indicator-active-bg);
-      transform: scale($carousel-indicator-hover-scale);
 
       &::before {
         transform: translate3d(-50%, -50%, 0) scale($carousel-indicator-active-scale);
       }
     }
+
+    &:hover {
+      transform: scale($carousel-indicator-hover-scale);
+    }
+
+    &:focus {
+      outline: 3px solid $brand-orange;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px $white;
+    }
+
   }
 
   .active {

From eb63ff3c61521dae73ceff70e6c57e5d92978ea0 Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 11 May 2022 15:29:30 +0200
Subject: [PATCH 3/7] feat #1084 (carousel navigation focus): fix after review

---
 scss/_carousel.scss  | 28 ++++++++++++++++------------
 scss/_variables.scss |  3 ++-
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 7af72d8a8c..bc577f2492 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -125,16 +125,18 @@
   }
 
   &:active {
-    --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg}; // Boosted mod
+    --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg};
     color: $carousel-control-color;
   }
 
   &:focus:focus-visible,
   &:focus {
-    & > span {
-      outline: 3px solid $brand-orange;
-      outline-offset: 2px;
-      box-shadow: 0 0 0 2px $white;
+    &[data-focus-visible-added] {
+      & > span {
+        outline: map-get($border-widths, 3) solid $brand-orange;
+        outline-offset: $outline-offset;
+        box-shadow: 0 0 0 $outline-offset $white;
+      }
     }
   }
   // End mod
@@ -218,20 +220,22 @@
     &:hover,
     &:focus {
       background-color: color-contrast($carousel-indicator-active-bg);
-
-      &::before {
-        transform: translate3d(-50%, -50%, 0) scale($carousel-indicator-active-scale);
-      }
     }
 
     &:hover {
       transform: scale($carousel-indicator-hover-scale);
+      &::before {
+        transform: translate3d(-50%, -50%, 0) scale($carousel-indicator-active-scale);
+      }
     }
 
     &:focus {
-      outline: 3px solid $brand-orange;
-      outline-offset: 2px;
-      box-shadow: 0 0 0 2px $white;
+      &[data-focus-visible-added] {
+        outline: map-get($border-widths, 3) solid $brand-orange;
+        outline-offset: $outline-offset;
+        box-shadow: 0 0 0 $outline-offset $white;
+        transform: none;
+      }
     }
 
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9587d6ce39..687d99d0e6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -563,7 +563,8 @@ $container-padding-x: $grid-gutter-width !default;
 $border-width:                .125rem !default;
 $border-widths: (
   1: $border-width * .5,
-  2: $border-width
+  2: $border-width,
+  3: $border-width * 1.5
 ) !default;
 
 $border-style:                solid !default;

From 667563cc0ce2349489344e94ada0ce585c42db2b Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Mon, 9 May 2022 09:54:34 +0200
Subject: [PATCH 4/7] feat #1084 (carousel navigation focus): add focus for
 Prev and Next buttons

---
 scss/_carousel.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 78e3c378d6..4c47009e93 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -104,6 +104,7 @@
   text-align: center;
   background: none;
   border: 0;
+  outline: 0;
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
 
@@ -127,6 +128,16 @@
     --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg}; // Boosted mod
     color: $carousel-control-color;
   }
+
+  &:focus:focus-visible,
+  &:focus {
+    & > span {
+      outline: 3px solid $brand-orange;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px $white;
+
+    }
+  }
   // End mod
 }
 

From f7f131d5b01a9f12ae7db9d4360fffbff3daf9bc Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Mon, 9 May 2022 10:08:43 +0200
Subject: [PATCH 5/7] feat #1084 (carousel navigation focus): add focus for
 indicators buttons

---
 scss/_carousel.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 4c47009e93..7af72d8a8c 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -135,7 +135,6 @@
       outline: 3px solid $brand-orange;
       outline-offset: 2px;
       box-shadow: 0 0 0 2px $white;
-
     }
   }
   // End mod
@@ -219,12 +218,22 @@
     &:hover,
     &:focus {
       background-color: color-contrast($carousel-indicator-active-bg);
-      transform: scale($carousel-indicator-hover-scale);
 
       &::before {
         transform: translate3d(-50%, -50%, 0) scale($carousel-indicator-active-scale);
       }
     }
+
+    &:hover {
+      transform: scale($carousel-indicator-hover-scale);
+    }
+
+    &:focus {
+      outline: 3px solid $brand-orange;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px $white;
+    }
+
   }
 
   .active {

From cbb2f2b162a962bd28923a213a1354f6c5c14169 Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 11 May 2022 15:29:30 +0200
Subject: [PATCH 6/7] feat #1084 (carousel navigation focus): fix after review

---
 scss/_carousel.scss  | 28 ++++++++++++++++------------
 scss/_variables.scss |  3 ++-
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 7af72d8a8c..bc577f2492 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -125,16 +125,18 @@
   }
 
   &:active {
-    --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg}; // Boosted mod
+    --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg};
     color: $carousel-control-color;
   }
 
   &:focus:focus-visible,
   &:focus {
-    & > span {
-      outline: 3px solid $brand-orange;
-      outline-offset: 2px;
-      box-shadow: 0 0 0 2px $white;
+    &[data-focus-visible-added] {
+      & > span {
+        outline: map-get($border-widths, 3) solid $brand-orange;
+        outline-offset: $outline-offset;
+        box-shadow: 0 0 0 $outline-offset $white;
+      }
     }
   }
   // End mod
@@ -218,20 +220,22 @@
     &:hover,
     &:focus {
       background-color: color-contrast($carousel-indicator-active-bg);
-
-      &::before {
-        transform: translate3d(-50%, -50%, 0) scale($carousel-indicator-active-scale);
-      }
     }
 
     &:hover {
       transform: scale($carousel-indicator-hover-scale);
+      &::before {
+        transform: translate3d(-50%, -50%, 0) scale($carousel-indicator-active-scale);
+      }
     }
 
     &:focus {
-      outline: 3px solid $brand-orange;
-      outline-offset: 2px;
-      box-shadow: 0 0 0 2px $white;
+      &[data-focus-visible-added] {
+        outline: map-get($border-widths, 3) solid $brand-orange;
+        outline-offset: $outline-offset;
+        box-shadow: 0 0 0 $outline-offset $white;
+        transform: none;
+      }
     }
 
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index cb3dbb11fb..24f0b5e922 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -563,7 +563,8 @@ $container-padding-x: $grid-gutter-width !default;
 $border-width:                .125rem !default;
 $border-widths: (
   1: $border-width * .5,
-  2: $border-width
+  2: $border-width,
+  3: $border-width * 1.5
 ) !default;
 
 $border-style:                solid !default;

From 6416c92c620ae6578dbe8c554a2ef1282ef1df19 Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 1 Jun 2022 14:48:11 +0200
Subject: [PATCH 7/7] feat #1084 (carousel navigation focus): fix after review

---
 scss/_carousel.scss                        | 3 +--
 site/content/docs/5.1/utilities/borders.md | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index bc577f2492..3eeb934b37 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -104,7 +104,7 @@
   text-align: center;
   background: none;
   border: 0;
-  outline: 0;
+  outline: 0; // Boosted mod
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
 
@@ -129,7 +129,6 @@
     color: $carousel-control-color;
   }
 
-  &:focus:focus-visible,
   &:focus {
     &[data-focus-visible-added] {
       & > span {
diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md
index c86d7d3d6e..45f37d02fc 100644
--- a/site/content/docs/5.1/utilities/borders.md
+++ b/site/content/docs/5.1/utilities/borders.md
@@ -108,6 +108,7 @@ Or, choose from any of the `.border-opacity` utilities:
 <span class="border border-0"></span>
 <span class="border border-1"></span>
 <span class="border border-2"></span>
+<span class="border border-3"></span>
 {{< /example >}}
 
 ## Radius