diff --git a/dist/breadcrumbs/ds4/breadcrumbs.css b/dist/breadcrumbs/ds4/breadcrumbs.css
index 43279708d..483df595a 100644
--- a/dist/breadcrumbs/ds4/breadcrumbs.css
+++ b/dist/breadcrumbs/ds4/breadcrumbs.css
@@ -58,6 +58,10 @@ nav.breadcrumbs button[aria-current] {
   color: var(--breadcrumbs-item-current-foreground-color, #767676);
   text-decoration: none;
 }
+nav.breadcrumbs a:focus:not(:focus-visible),
+nav.breadcrumbs button:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   nav.breadcrumbs {
     margin: 16px 0;
diff --git a/dist/breadcrumbs/ds6/breadcrumbs.css b/dist/breadcrumbs/ds6/breadcrumbs.css
index 2adfefe0d..959e9ef1c 100644
--- a/dist/breadcrumbs/ds6/breadcrumbs.css
+++ b/dist/breadcrumbs/ds6/breadcrumbs.css
@@ -65,6 +65,10 @@ nav.breadcrumbs button[aria-current] {
   color: var(--breadcrumbs-item-current-foreground-color, #767676);
   text-decoration: none;
 }
+nav.breadcrumbs a:focus:not(:focus-visible),
+nav.breadcrumbs button:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   nav.breadcrumbs {
     margin: 16px 0;
diff --git a/dist/button/ds4/button.css b/dist/button/ds4/button.css
index 896ea6f45..432a7adc3 100644
--- a/dist/button/ds4/button.css
+++ b/dist/button/ds4/button.css
@@ -38,6 +38,10 @@ a.fake-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+button.btn:focus:not(:focus-visible),
+a.fake-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 button.btn--wide,
 a.fake-btn--wide {
   padding-left: 48px;
diff --git a/dist/button/ds6/button.css b/dist/button/ds6/button.css
index 00ebea9fc..356c360f1 100644
--- a/dist/button/ds6/button.css
+++ b/dist/button/ds6/button.css
@@ -59,6 +59,10 @@ a.fake-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+button.btn:focus:not(:focus-visible),
+a.fake-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 button.btn--wide,
 a.fake-btn--wide {
   padding-left: 48px;
diff --git a/dist/carousel/ds4/carousel.css b/dist/carousel/ds4/carousel.css
index 36a70f8a7..df1e56d5b 100644
--- a/dist/carousel/ds4/carousel.css
+++ b/dist/carousel/ds4/carousel.css
@@ -118,6 +118,9 @@ div.carousel {
   color: #333;
   color: var(--carousel-paddle-foreground-color, #333);
 }
+.carousel__control:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   .carousel:focus-within .carousel__control {
     opacity: 0.92;
@@ -152,6 +155,9 @@ div.carousel {
 .carousel__control:active {
   background-color: #333;
 }
+.carousel__playback:focus:not(:focus-visible) {
+  outline: none;
+}
 span.carousel,
 span.carousel__container {
   display: inline-block;
diff --git a/dist/carousel/ds6/carousel.css b/dist/carousel/ds6/carousel.css
index 92db59f54..bcda93fb4 100644
--- a/dist/carousel/ds6/carousel.css
+++ b/dist/carousel/ds6/carousel.css
@@ -126,6 +126,9 @@ div.carousel {
   color: #111820;
   color: var(--carousel-paddle-foreground-color, #111820);
 }
+.carousel__control:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   .carousel:focus-within .carousel__control {
     opacity: 0.92;
@@ -160,6 +163,9 @@ div.carousel {
 .carousel__control:active {
   background-color: #414141;
 }
+.carousel__playback:focus:not(:focus-visible) {
+  outline: none;
+}
 span.carousel,
 span.carousel__container {
   display: inline-block;
diff --git a/dist/checkbox/ds4/checkbox.css b/dist/checkbox/ds4/checkbox.css
index 8a9d5a582..8580ac05d 100644
--- a/dist/checkbox/ds4/checkbox.css
+++ b/dist/checkbox/ds4/checkbox.css
@@ -65,12 +65,16 @@ input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.check
 input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.checkbox__unchecked {
   display: none;
 }
-input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
-  outline: 1px dotted #767676;
-}
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
   opacity: 1;
 }
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon svg {
   fill: #ccc;
 }
+input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon {
+  outline: none;
+}
diff --git a/dist/checkbox/ds6/checkbox.css b/dist/checkbox/ds6/checkbox.css
index fbf8f4385..a683694f0 100644
--- a/dist/checkbox/ds6/checkbox.css
+++ b/dist/checkbox/ds6/checkbox.css
@@ -71,12 +71,16 @@ input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.check
 input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.checkbox__unchecked {
   display: none;
 }
-input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
-  outline: 1px dotted #767676;
-}
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
   opacity: 1;
 }
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon svg {
   fill: #c7c7c7;
 }
+input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon {
+  outline: none;
+}
diff --git a/dist/cta-button/ds4/cta-button.css b/dist/cta-button/ds4/cta-button.css
index 0289ec07f..a8fb2b9f7 100644
--- a/dist/cta-button/ds4/cta-button.css
+++ b/dist/cta-button/ds4/cta-button.css
@@ -33,6 +33,9 @@ a.cta-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+a.cta-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 a.cta-btn:visited {
   color: #333;
   color: var(--cta-button-visited-foreground-color, #333);
diff --git a/dist/cta-button/ds6/cta-button.css b/dist/cta-button/ds6/cta-button.css
index 4b00a0934..9670acd2b 100644
--- a/dist/cta-button/ds6/cta-button.css
+++ b/dist/cta-button/ds6/cta-button.css
@@ -43,6 +43,9 @@ a.cta-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+a.cta-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 a.cta-btn:visited {
   color: #111820;
   color: var(--cta-button-visited-foreground-color, #111820);
diff --git a/dist/details/ds4/details.css b/dist/details/ds4/details.css
index 947e9700b..f4dec8f69 100644
--- a/dist/details/ds4/details.css
+++ b/dist/details/ds4/details.css
@@ -43,3 +43,6 @@ details.details[open] span.details__icon {
 details.details[open] summary.details__summary::before {
   content: none;
 }
+details.details summary:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/details/ds6/details.css b/dist/details/ds6/details.css
index 1aa0f5eb1..189428395 100644
--- a/dist/details/ds6/details.css
+++ b/dist/details/ds6/details.css
@@ -48,3 +48,6 @@ details.details[open] span.details__icon {
 details.details[open] summary.details__summary::before {
   content: none;
 }
+details.details summary:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/drawer-dialog/ds4/drawer-dialog.css b/dist/drawer-dialog/ds4/drawer-dialog.css
index d50f00aee..5b1e942b7 100644
--- a/dist/drawer-dialog/ds4/drawer-dialog.css
+++ b/dist/drawer-dialog/ds4/drawer-dialog.css
@@ -185,3 +185,6 @@ button.drawer-dialog__close {
   -webkit-transform: translateX(0);
           transform: translateX(0);
 }
+.drawer-dialog__handle:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/drawer-dialog/ds6/drawer-dialog.css b/dist/drawer-dialog/ds6/drawer-dialog.css
index 88c143004..a9b460922 100644
--- a/dist/drawer-dialog/ds6/drawer-dialog.css
+++ b/dist/drawer-dialog/ds6/drawer-dialog.css
@@ -190,3 +190,6 @@ button.drawer-dialog__close {
   -webkit-transform: translateX(0);
           transform: translateX(0);
 }
+.drawer-dialog__handle:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/expand-button/ds4/expand-button.css b/dist/expand-button/ds4/expand-button.css
index ca38f1acb..9967f9349 100644
--- a/dist/expand-button/ds4/expand-button.css
+++ b/dist/expand-button/ds4/expand-button.css
@@ -31,6 +31,9 @@ button.expand-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+button.expand-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 button.expand-btn:hover,
 button.expand-btn:focus {
   border-color: #00489f;
diff --git a/dist/expand-button/ds6/expand-button.css b/dist/expand-button/ds6/expand-button.css
index e92aaa4f5..cbf8fc5b7 100644
--- a/dist/expand-button/ds6/expand-button.css
+++ b/dist/expand-button/ds6/expand-button.css
@@ -51,6 +51,9 @@ button.expand-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+button.expand-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 button.expand-btn:hover,
 button.expand-btn:focus {
   border-color: #2b0eaf;
diff --git a/dist/filter-button/ds4/filter-button.css b/dist/filter-button/ds4/filter-button.css
index 177eb173d..d92221946 100644
--- a/dist/filter-button/ds4/filter-button.css
+++ b/dist/filter-button/ds4/filter-button.css
@@ -116,3 +116,9 @@ a.filter-link--selected:not([href]):hover,
 a.filter-link--selected[aria-disabled="true"]:hover {
   background-color: #dbeafe;
 }
+/* stylelint-disable no-descending-specificity */
+button.filter-button:focus:not(:focus-visible),
+a.filter-link:focus:not(:focus-visible) {
+  outline: none;
+}
+/* stylelint-enable no-descending-specificity */
diff --git a/dist/filter-button/ds6/filter-button.css b/dist/filter-button/ds6/filter-button.css
index 11bc5f61c..30868c3c5 100644
--- a/dist/filter-button/ds6/filter-button.css
+++ b/dist/filter-button/ds6/filter-button.css
@@ -127,3 +127,9 @@ a.filter-link--selected:not([href]):hover,
 a.filter-link--selected[aria-disabled="true"]:hover {
   background-color: #e1e8fd;
 }
+/* stylelint-disable no-descending-specificity */
+button.filter-button:focus:not(:focus-visible),
+a.filter-link:focus:not(:focus-visible) {
+  outline: none;
+}
+/* stylelint-enable no-descending-specificity */
diff --git a/dist/filter-menu-button/ds4/filter-menu-button.css b/dist/filter-menu-button/ds4/filter-menu-button.css
index 30cbb0532..f5fa374b5 100644
--- a/dist/filter-menu-button/ds4/filter-menu-button.css
+++ b/dist/filter-menu-button/ds4/filter-menu-button.css
@@ -310,6 +310,9 @@ button.filter-menu-button__footer:hover {
 .filter-menu-button__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked {
   display: block;
 }
+button.filter-menu-button__button:focus:not(:focus-visible) {
+  outline: none;
+}
 [dir="rtl"] .filter-menu-button__button-cell .icon--dropdown {
   margin-left: 0;
   margin-right: 8px;
diff --git a/dist/filter-menu-button/ds6/filter-menu-button.css b/dist/filter-menu-button/ds6/filter-menu-button.css
index 20b09bda1..0006d04b9 100644
--- a/dist/filter-menu-button/ds6/filter-menu-button.css
+++ b/dist/filter-menu-button/ds6/filter-menu-button.css
@@ -315,6 +315,9 @@ button.filter-menu-button__footer:hover {
 .filter-menu-button__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked {
   display: block;
 }
+button.filter-menu-button__button:focus:not(:focus-visible) {
+  outline: none;
+}
 [dir="rtl"] .filter-menu-button__button-cell .icon--dropdown {
   margin-left: 0;
   margin-right: 8px;
diff --git a/dist/icon-button/ds4/icon-button.css b/dist/icon-button/ds4/icon-button.css
index 927610469..65ea35233 100644
--- a/dist/icon-button/ds4/icon-button.css
+++ b/dist/icon-button/ds4/icon-button.css
@@ -39,6 +39,10 @@ a.icon-link:hover > svg {
   fill: #333;
   fill: var(--icon-button-icon-hover-foreground-color, #333);
 }
+button.icon-btn:not(:focus-visible),
+a.icon-link:not(:focus-visible) {
+  outline: none;
+}
 a.icon-link:visited > svg {
   fill: #555;
   fill: var(--icon-button-icon-foreground-color, #555);
diff --git a/dist/icon-button/ds6/icon-button.css b/dist/icon-button/ds6/icon-button.css
index a3547a80e..4e423575e 100644
--- a/dist/icon-button/ds6/icon-button.css
+++ b/dist/icon-button/ds6/icon-button.css
@@ -48,6 +48,10 @@ a.icon-link:hover > svg {
   fill: #3665f3;
   fill: var(--icon-button-icon-hover-foreground-color, #3665f3);
 }
+button.icon-btn:not(:focus-visible),
+a.icon-link:not(:focus-visible) {
+  outline: none;
+}
 a.icon-link:visited > svg {
   fill: #111820;
   fill: var(--icon-button-icon-foreground-color, #111820);
diff --git a/dist/listbox-button/ds4/listbox-button.css b/dist/listbox-button/ds4/listbox-button.css
index ebaeb8bb9..d7fa788a1 100644
--- a/dist/listbox-button/ds4/listbox-button.css
+++ b/dist/listbox-button/ds4/listbox-button.css
@@ -136,3 +136,6 @@ span.listbox-button__value {
   -webkit-box-flex: 1;
           flex: 1 0 auto;
 }
+.listbox-button__options:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/listbox-button/ds6/listbox-button.css b/dist/listbox-button/ds6/listbox-button.css
index 80a3890bb..8b3f23e0e 100644
--- a/dist/listbox-button/ds6/listbox-button.css
+++ b/dist/listbox-button/ds6/listbox-button.css
@@ -146,3 +146,6 @@ span.listbox-button__value {
   -webkit-box-flex: 1;
           flex: 1 0 auto;
 }
+.listbox-button__options:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/listbox/ds4/listbox.css b/dist/listbox/ds4/listbox.css
index 054888551..49c905660 100644
--- a/dist/listbox/ds4/listbox.css
+++ b/dist/listbox/ds4/listbox.css
@@ -94,3 +94,6 @@ div.listbox__option[role="option"]:active svg.icon {
   color: #ccc;
   color: var(--dropdown-item-active-status-color, #ccc);
 }
+.listbox__options:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/listbox/ds6/listbox.css b/dist/listbox/ds6/listbox.css
index fd88b7d1d..5fecb5ff9 100644
--- a/dist/listbox/ds6/listbox.css
+++ b/dist/listbox/ds6/listbox.css
@@ -104,3 +104,6 @@ div.listbox__option[role="option"]:active svg.icon {
   color: #fff;
   color: var(--dropdown-item-active-status-color, #fff);
 }
+.listbox__options:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/menu-button/ds4/menu-button.css b/dist/menu-button/ds4/menu-button.css
index 6a185f8ff..8778d05ee 100644
--- a/dist/menu-button/ds4/menu-button.css
+++ b/dist/menu-button/ds4/menu-button.css
@@ -265,3 +265,6 @@ hr.menu-button__separator {
   border-width: 1px;
   margin: 0;
 }
+div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/menu-button/ds6/menu-button.css b/dist/menu-button/ds6/menu-button.css
index 3b8afde06..5a9a7085a 100644
--- a/dist/menu-button/ds6/menu-button.css
+++ b/dist/menu-button/ds6/menu-button.css
@@ -274,3 +274,6 @@ hr.menu-button__separator {
   border-width: 1px;
   margin: 0;
 }
+div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/menu/ds4/menu.css b/dist/menu/ds4/menu.css
index bdc7da44b..0b167c7a9 100644
--- a/dist/menu/ds4/menu.css
+++ b/dist/menu/ds4/menu.css
@@ -169,3 +169,6 @@ hr.menu__separator {
   border-style: solid;
   border-width: 1px;
 }
+div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/menu/ds6/menu.css b/dist/menu/ds6/menu.css
index 2113e6b95..d9439db89 100644
--- a/dist/menu/ds6/menu.css
+++ b/dist/menu/ds6/menu.css
@@ -178,3 +178,6 @@ hr.menu__separator {
   border-style: solid;
   border-width: 1px;
 }
+div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/mixins/button/base/button-mixins.less b/dist/mixins/button/base/button-mixins.less
index 81231e2bf..c55995c24 100644
--- a/dist/mixins/button/base/button-mixins.less
+++ b/dist/mixins/button/base/button-mixins.less
@@ -16,6 +16,11 @@
 
         height: 40px;
     }
+
+    // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
 }
 
 .btn-icon-base() {
diff --git a/dist/mixins/carousel/base/carousel-mixins.less b/dist/mixins/carousel/base/carousel-mixins.less
index 2dd35ca0b..94aa4fb64 100644
--- a/dist/mixins/carousel/base/carousel-mixins.less
+++ b/dist/mixins/carousel/base/carousel-mixins.less
@@ -47,6 +47,11 @@
         .customColorProperty(carousel-paddle-foreground-color);
     }
 
+    // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
+
     // progressive enhancement for browsers with support
     // :focus-within and :hover cannot be combined as
     // IE/Edge will discard the entire rule
diff --git a/dist/pagination/ds4/pagination.css b/dist/pagination/ds4/pagination.css
index f9c7468db..25a4c3b73 100644
--- a/dist/pagination/ds4/pagination.css
+++ b/dist/pagination/ds4/pagination.css
@@ -111,6 +111,10 @@ nav.pagination--fluid ol.pagination__items li {
   -webkit-box-flex: 1;
           flex: 1 0 48px;
 }
+a.pagination__item:focus:not(:focus-visible),
+button.pagination__item:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   nav.pagination {
     margin: 16px 0;
diff --git a/dist/pagination/ds6/pagination.css b/dist/pagination/ds6/pagination.css
index 11fc2b2e7..09f8583ba 100644
--- a/dist/pagination/ds6/pagination.css
+++ b/dist/pagination/ds6/pagination.css
@@ -117,6 +117,10 @@ nav.pagination--fluid ol.pagination__items li {
   -webkit-box-flex: 1;
           flex: 1 0 48px;
 }
+a.pagination__item:focus:not(:focus-visible),
+button.pagination__item:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   nav.pagination {
     margin: 16px 0;
diff --git a/dist/radio/ds4/radio.css b/dist/radio/ds4/radio.css
index f029befb5..8b4756031 100644
--- a/dist/radio/ds4/radio.css
+++ b/dist/radio/ds4/radio.css
@@ -65,12 +65,16 @@ input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__checked
 input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__unchecked {
   display: none;
 }
-input.radio__control[type="radio"]:focus + span.radio__icon {
-  outline: 1px dotted #767676;
-}
 input.radio__control[type="radio"][disabled] + span.radio__icon {
   opacity: 1;
 }
 input.radio__control[type="radio"][disabled] + span.radio__icon svg {
   fill: #ccc;
 }
+input.radio__control[type="radio"]:focus + span.radio__icon {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon {
+  outline: none;
+}
diff --git a/dist/radio/ds6/radio.css b/dist/radio/ds6/radio.css
index d2599612d..af0c3469a 100644
--- a/dist/radio/ds6/radio.css
+++ b/dist/radio/ds6/radio.css
@@ -71,12 +71,16 @@ input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__checked
 input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__unchecked {
   display: none;
 }
-input.radio__control[type="radio"]:focus + span.radio__icon {
-  outline: 1px dotted #767676;
-}
 input.radio__control[type="radio"][disabled] + span.radio__icon {
   opacity: 1;
 }
 input.radio__control[type="radio"][disabled] + span.radio__icon svg {
   fill: #c7c7c7;
 }
+input.radio__control[type="radio"]:focus + span.radio__icon {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon {
+  outline: none;
+}
diff --git a/dist/select/ds4/select.css b/dist/select/ds4/select.css
index 2c0d8f4a7..c3d1556a5 100644
--- a/dist/select/ds4/select.css
+++ b/dist/select/ds4/select.css
@@ -58,6 +58,7 @@ span.select {
   background-color: #fff;
   background-color: var(--select-focus-background-color, #fff);
   outline: 0;
+  text-decoration: underline;
 }
 .select select::-ms-expand {
   display: none;
@@ -90,6 +91,10 @@ span.select {
   border-style: solid;
   border-width: 1px;
 }
+.select select[disabled] + svg {
+  color: #ccc;
+}
+/* stylelint-disable no-descending-specificity */
 [dir="rtl"] .select > select {
   padding-left: 30px;
   padding-right: 16px;
@@ -102,6 +107,4 @@ span.select {
   left: 0;
   right: auto;
 }
-.select select[disabled] + svg {
-  color: #ccc;
-}
+/* stylelint-enable no-descending-specificity */
diff --git a/dist/select/ds6/select.css b/dist/select/ds6/select.css
index e9c455e13..6248b18d2 100644
--- a/dist/select/ds6/select.css
+++ b/dist/select/ds6/select.css
@@ -74,6 +74,7 @@ span.select {
   background-color: #fff;
   background-color: var(--select-focus-background-color, #fff);
   outline: 0;
+  text-decoration: underline;
 }
 .select select::-ms-expand {
   display: none;
@@ -106,6 +107,10 @@ span.select {
   border-style: solid;
   border-width: 1px;
 }
+.select select[disabled] + svg {
+  color: #a2a2a2;
+}
+/* stylelint-disable no-descending-specificity */
 [dir="rtl"] .select > select {
   padding-left: 30px;
   padding-right: 16px;
@@ -118,6 +123,4 @@ span.select {
   left: 0;
   right: auto;
 }
-.select select[disabled] + svg {
-  color: #a2a2a2;
-}
+/* stylelint-enable no-descending-specificity */
diff --git a/dist/switch/ds4/switch.css b/dist/switch/ds4/switch.css
index ab904bca7..5b0bc50fd 100644
--- a/dist/switch/ds4/switch.css
+++ b/dist/switch/ds4/switch.css
@@ -54,12 +54,6 @@ span.switch__control {
   width: 40px;
   z-index: 1;
 }
-input.switch__control {
-  opacity: 0;
-}
-input.switch__control:focus + span.switch__button {
-  outline: 1px dotted #767676;
-}
 input.switch__control[disabled] + span.switch__button {
   background-color: #ccc;
   background-color: var(--switch-disabled-background-color, #ccc);
@@ -71,6 +65,15 @@ span.switch__control[aria-disabled="true"] + span.switch__button {
   background-color: #ccc;
   background-color: var(--switch-disabled-background-color, #ccc);
 }
+input.switch__control {
+  opacity: 0;
+}
+input.switch__control:focus + span.switch__button {
+  outline: 1px auto #767676;
+}
+input.switch__control:focus:not(:focus-visible) + span.switch__button {
+  outline: none;
+}
 span.switch__control[aria-checked="true"] + span.switch__button::after {
   left: 19px;
 }
@@ -79,6 +82,9 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"] + span.swi
   background-color: #0654ba;
   background-color: var(--switch-checked-background-color, #0654ba);
 }
+span.switch__control:focus:not(:focus-visible) {
+  outline: 0;
+}
 @media screen and (-ms-high-contrast: active) {
   input.switch__control {
     opacity: 1;
diff --git a/dist/switch/ds6/switch.css b/dist/switch/ds6/switch.css
index 7b53968d7..2c0952387 100644
--- a/dist/switch/ds6/switch.css
+++ b/dist/switch/ds6/switch.css
@@ -59,12 +59,6 @@ span.switch__control {
   width: 40px;
   z-index: 1;
 }
-input.switch__control {
-  opacity: 0;
-}
-input.switch__control:focus + span.switch__button {
-  outline: 1px dotted #767676;
-}
 input.switch__control[disabled] + span.switch__button {
   background-color: #c7c7c7;
   background-color: var(--switch-disabled-background-color, #c7c7c7);
@@ -76,6 +70,15 @@ span.switch__control[aria-disabled="true"] + span.switch__button {
   background-color: #c7c7c7;
   background-color: var(--switch-disabled-background-color, #c7c7c7);
 }
+input.switch__control {
+  opacity: 0;
+}
+input.switch__control:focus + span.switch__button {
+  outline: 1px auto #767676;
+}
+input.switch__control:focus:not(:focus-visible) + span.switch__button {
+  outline: none;
+}
 span.switch__control[aria-checked="true"] + span.switch__button::after {
   left: 19px;
 }
@@ -84,6 +87,9 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"] + span.swi
   background-color: #3665f3;
   background-color: var(--switch-checked-background-color, #3665f3);
 }
+span.switch__control:focus:not(:focus-visible) {
+  outline: 0;
+}
 @media screen and (-ms-high-contrast: active) {
   input.switch__control {
     opacity: 1;
diff --git a/dist/tabs/ds4/tabs.css b/dist/tabs/ds4/tabs.css
index f0de5ff16..a92c54f63 100644
--- a/dist/tabs/ds4/tabs.css
+++ b/dist/tabs/ds4/tabs.css
@@ -83,3 +83,7 @@ li.fake-tabs__item--current > a[aria-current="page"] {
   position: relative;
   top: -1px;
 }
+div.tabs__item[role="tab"]:focus:not(:focus-visible),
+li.fake-tabs__item a:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/tabs/ds6/tabs.css b/dist/tabs/ds6/tabs.css
index 4287a4f86..0f47af585 100644
--- a/dist/tabs/ds6/tabs.css
+++ b/dist/tabs/ds6/tabs.css
@@ -92,3 +92,7 @@ li.fake-tabs__item--current > a[aria-current="page"] {
   position: relative;
   top: -1px;
 }
+div.tabs__item[role="tab"]:focus:not(:focus-visible),
+li.fake-tabs__item a:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/toast-dialog/ds4/toast-dialog.css b/dist/toast-dialog/ds4/toast-dialog.css
index 60581ef65..c50cc7170 100644
--- a/dist/toast-dialog/ds4/toast-dialog.css
+++ b/dist/toast-dialog/ds4/toast-dialog.css
@@ -25,8 +25,7 @@
 .toast-dialog a:focus {
   outline-color: #fff;
   outline-color: var(--toast-dialog-foreground-color, #fff);
-  outline-offset: -8px;
-  outline-style: dotted;
+  outline-style: auto;
   outline-width: 1px;
 }
 .toast-dialog--transition {
@@ -77,9 +76,9 @@ button.toast-dialog__close:focus > svg {
 button.toast-dialog__close:focus {
   outline-color: #fff;
   outline-color: var(--toast-dialog-foreground-color, #fff);
-  outline-offset: -8px;
-  outline-style: dotted;
+  outline-style: auto;
   outline-width: 1px;
+  outline-offset: -8px;
 }
 .toast-dialog__footer {
   display: -webkit-box;
@@ -108,8 +107,7 @@ button.toast-dialog__close:focus {
 .toast-dialog__footer .btn--secondary:focus {
   outline-color: #fff;
   outline-color: var(--toast-dialog-foreground-color, #fff);
-  outline-offset: -8px;
-  outline-style: dotted;
+  outline-style: auto;
   outline-width: 1px;
 }
 .toast-dialog__footer .btn--primary:focus,
diff --git a/dist/toast-dialog/ds6/toast-dialog.css b/dist/toast-dialog/ds6/toast-dialog.css
index 83f7c2295..cc9e5af1f 100644
--- a/dist/toast-dialog/ds6/toast-dialog.css
+++ b/dist/toast-dialog/ds6/toast-dialog.css
@@ -25,8 +25,7 @@
 .toast-dialog a:focus {
   outline-color: #fff;
   outline-color: var(--toast-dialog-foreground-color, #fff);
-  outline-offset: -8px;
-  outline-style: dotted;
+  outline-style: auto;
   outline-width: 1px;
 }
 .toast-dialog--transition {
@@ -77,9 +76,9 @@ button.toast-dialog__close:focus > svg {
 button.toast-dialog__close:focus {
   outline-color: #fff;
   outline-color: var(--toast-dialog-foreground-color, #fff);
-  outline-offset: -8px;
-  outline-style: dotted;
+  outline-style: auto;
   outline-width: 1px;
+  outline-offset: -8px;
 }
 .toast-dialog__footer {
   display: -webkit-box;
@@ -108,8 +107,7 @@ button.toast-dialog__close:focus {
 .toast-dialog__footer .btn--secondary:focus {
   outline-color: #fff;
   outline-color: var(--toast-dialog-foreground-color, #fff);
-  outline-offset: -8px;
-  outline-style: dotted;
+  outline-style: auto;
   outline-width: 1px;
 }
 .toast-dialog__footer .btn--primary:focus,
diff --git a/dist/variables/ds4/checkbox-variables.less b/dist/variables/ds4/checkbox-variables.less
index 3d00b2bcc..e0e0be220 100644
--- a/dist/variables/ds4/checkbox-variables.less
+++ b/dist/variables/ds4/checkbox-variables.less
@@ -6,4 +6,4 @@
 @checkbox-unchecked-color: @color-text-default;
 @checkbox-disabled-opacity: 1;
 @checkbox-disabled-color: @color-action-disabled;
-@checkbox-custom-outline-color: @color-text-secondary;
+@checkbox-custom-outline: 1px auto @color-text-secondary;
diff --git a/dist/variables/ds4/radio-variables.less b/dist/variables/ds4/radio-variables.less
index 384357264..e048eb60b 100644
--- a/dist/variables/ds4/radio-variables.less
+++ b/dist/variables/ds4/radio-variables.less
@@ -6,4 +6,4 @@
 @radio-unchecked-color: @color-text-default;
 @radio-disabled-opacity: 1;
 @radio-disabled-color: @color-disabled;
-@radio-custom-outline-color: @color-text-secondary;
+@radio-custom-outline: 1px auto @color-text-secondary;
diff --git a/dist/variables/ds6/checkbox-variables.less b/dist/variables/ds6/checkbox-variables.less
index 3d00b2bcc..e0e0be220 100644
--- a/dist/variables/ds6/checkbox-variables.less
+++ b/dist/variables/ds6/checkbox-variables.less
@@ -6,4 +6,4 @@
 @checkbox-unchecked-color: @color-text-default;
 @checkbox-disabled-opacity: 1;
 @checkbox-disabled-color: @color-action-disabled;
-@checkbox-custom-outline-color: @color-text-secondary;
+@checkbox-custom-outline: 1px auto @color-text-secondary;
diff --git a/dist/variables/ds6/radio-variables.less b/dist/variables/ds6/radio-variables.less
index 384357264..e048eb60b 100644
--- a/dist/variables/ds6/radio-variables.less
+++ b/dist/variables/ds6/radio-variables.less
@@ -6,4 +6,4 @@
 @radio-unchecked-color: @color-text-default;
 @radio-disabled-opacity: 1;
 @radio-disabled-color: @color-disabled;
-@radio-custom-outline-color: @color-text-secondary;
+@radio-custom-outline: 1px auto @color-text-secondary;
diff --git a/docs/src/less/base/index.less b/docs/src/less/base/index.less
index e5b74e18c..18e5d89be 100644
--- a/docs/src/less/base/index.less
+++ b/docs/src/less/base/index.less
@@ -144,7 +144,7 @@ main > div > h2 {
 }
 
 .app-bar__links a:focus {
-    outline: 2px dotted white;
+    outline: 1px auto white;
 }
 
 .app-bar__links a:visited {
diff --git a/docs/static/ds4/docs.min.css b/docs/static/ds4/docs.min.css
index 64a0f0c3c..79cc73dff 100644
--- a/docs/static/ds4/docs.min.css
+++ b/docs/static/ds4/docs.min.css
@@ -1,5 +1,5 @@
 /*! Wombat VIM theme */
-figure .highlight,.highlight pre,.highlight table{background:#242424!important;color:#f6f3e8!important}.highlight .hll{background-color:#ffc!important}.highlight .c{color:#99968b!important;font-style:italic!important}.highlight .err{color:#f6f3e8!important}.highlight .g{color:#f6f3e8!important}.highlight .k{color:#8ac6f2!important}.highlight .l{color:#f6f3e8!important}.highlight .n,.highlight .h{color:#f6f3e8!important}.highlight .o{color:#f6f3e8!important}.highlight .x{color:#f6f3e8!important}.highlight .p{color:#f6f3e8!important}.highlight .cm{color:#99968b!important;font-style:italic!important}.highlight .cp{color:#e5786d!important}.highlight .c1{color:#99968b!important;font-style:italic!important}.highlight .cs{color:#99968b!important;font-style:italic!important}.highlight .gd{color:#f6f3e8!important}.highlight .ge{color:#f6f3e8!important}.highlight .gr{color:#f6f3e8!important}.highlight .gh{color:#f6f3e8!important;font-weight:bold!important}.highlight .gi{color:#f6f3e8!important}.highlight .go{color:#808080!important;background-color:#303030!important}.highlight .gp{color:#f6f3e8!important}.highlight .gs{color:#f6f3e8!important}.highlight .gu{color:#f6f3e8!important;font-weight:bold!important}.highlight .gt{color:#f6f3e8!important}.highlight .kc{color:#8ac6f2!important}.highlight .kd{color:#8ac6f2!important}.highlight .kn{color:#8ac6f2!important}.highlight .kp{color:#8ac6f2!important}.highlight .kr{color:#8ac6f2!important}.highlight .kt{color:#cae682!important}.highlight .ld{color:#f6f3e8!important}.highlight .m{color:#e5786d!important}.highlight .s{color:#95e454!important;font-style:italic!important}.highlight .na{color:#cae682!important}.highlight .nb{color:#f6f3e8!important}.highlight .nc{color:#f6f3e8!important}.highlight .no{color:#e5786d!important}.highlight .nd{color:#f6f3e8!important}.highlight .ni{color:#e7f6da!important}.highlight .ne{color:#f6f3e8!important}.highlight .nf{color:#cae682!important}.highlight .nl{color:#f6f3e8!important}.highlight .nn{color:#f6f3e8!important}.highlight .nx{color:#f6f3e8!important}.highlight .py{color:#f6f3e8!important}.highlight .nt{color:#8ac6f2!important}.highlight .nv{color:#cae682!important}.highlight .ow{color:#f6f3e8!important}.highlight .w{color:#f6f3e8!important}.highlight .mf{color:#e5786d!important}.highlight .mh{color:#e5786d!important}.highlight .mi{color:#e5786d!important}.highlight .mo{color:#e5786d!important}.highlight .sb{color:#95e454!important;font-style:italic!important}.highlight .sc{color:#95e454!important;font-style:italic!important}.highlight .sd{color:#95e454!important;font-style:italic!important}.highlight .s2{color:#95e454!important;font-style:italic!important}.highlight .se{color:#95e454!important;font-style:italic!important}.highlight .sh{color:#95e454!important;font-style:italic!important}.highlight .si{color:#95e454!important;font-style:italic!important}.highlight .sx{color:#95e454!important;font-style:italic!important}.highlight .sr{color:#95e454!important;font-style:italic!important}.highlight .s1{color:#95e454!important;font-style:italic!important}.highlight .ss{color:#95e454!important;font-style:italic!important}.highlight .bp{color:#f6f3e8!important}.highlight .vc{color:#cae682!important}.highlight .vg{color:#cae682!important}.highlight .vi{color:#cae682!important}.highlight .il{color:#e5786d!important}span.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}span.highlight .s{word-break:break-all;word-wrap:break-word}figure.highlight{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px;margin:8px 0;width:100%}figure.highlight pre{font-family:monospace;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}body{margin:0}header{background-color:#0654ba}footer{margin-top:32px}main > div > h2{margin-bottom:12px;margin-top:24px;padding-top:8px}.page-grid{padding:8px}.skin-graphic{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:48px auto 0 auto;max-width:600px;width:100%}.modules-expander{background:#eee;padding:4px}.modules-expander__tip{color:#767676;margin:4px 8px;text-align:center}.modules-expander__list{-webkit-column-count:2;-moz-column-count:2;column-count:2;font-size:20px;line-height:1.75em;list-style-type:none;margin:0;width:100%}.modules-expander[open]{padding-bottom:32px}.modules-expander__list a{text-decoration:none}.modules-expander .details__summary{padding:8px 0}.app-bar{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:white;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 8px;padding:16px 0}.app-bar__title{font-size:26px;font-weight:bold;margin:0}.app-bar__links{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-shrink:0;list-style-type:none;margin-left:8px;padding:0}.app-bar__links li:not(:last-child)::after{content:'';margin:0 8px}.app-bar__links a{color:white;text-decoration:none}.modules-expander__list a:visited{color:#0654ba}.app-bar__links a:hover{text-decoration:underline}.app-bar__links a:focus{outline:2px dotted white}.app-bar__links a:visited{color:white}.section-header{display:-webkit-box;display:flex;margin:16px 0}.section-header h2{margin:0}.section-header__version{align-self:flex-end;background-color:#eee;margin-left:auto;padding:2px 4px}#about dl{margin:16px 0 32px 0}#about dt{font-weight:bold;margin:0 0 12px 0}#about dd{margin:0 0 12px 0}.demo{background-color:#fff;background-color:var(--color-background-default,#fff);border:1px dashed #ddd}.demo--dark-mode{background-color:#fff;border:1px dashed #eee;color:#333}.demo__inner{margin:8px}span.demo,span.demo__inner{display:inline-block}@media (prefers-color-scheme:dark){.skin-experiment-dark-mode header{background-color:#0654ba;background-color:var(--color-link-default,#0654ba)}.skin-experiment-dark-mode a.demo-link-visited{color:#6a29b9;color:var(--color-link-visited,#6a29b9)}.skin-experiment-dark-mode a.demo-link-visited:link,.skin-experiment-dark-mode a.demo-link-visited:visited{color:#6a29b9;color:var(--color-link-visited,#6a29b9)}.skin-experiment-dark-mode .section-header__version,.skin-experiment-dark-mode span.highlight{background-color:#333}.skin-experiment-dark-mode .site-nav a,.skin-experiment-dark-mode .site-nav a:visited{color:#333;color:var(--color-text-default,#333)}.skin-experiment-dark-mode .site-nav a:hover{color:#333;color:var(--color-text-default,#333)}}.carousel__list--default-demo li{background-color:rgba(6,84,186,0.2);color:#333;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:200px}.carousel__list--discrete-demo li{background-color:rgba(6,84,186,0.2);-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:calc(25% - 24px)}.carousel__list--slideshow-demo li{background-color:rgba(6,84,186,0.2);color:#333;font-size:36px;font-weight:bold;height:300px;line-height:300px;margin-right:16px;text-align:center;width:100%}.carousel__list--discrete-demo li:last-child{margin-right:0}.carousel__list--slideshow-demo li:last-child{margin-right:0}.demo-colors{list-style:none;margin:0;padding:0}.demo-colors li{margin:1rem 0}.demo-colors li::before{content:'';display:block;height:1.25rem;margin-bottom:0.25rem;margin-right:1rem;vertical-align:middle;width:100%}a.demo-link-visited{color:#6a29b9}a.demo-link-visited:link,a.demo-link-visited:visited{color:#6a29b9}.utility-table{border:1px solid #eee;width:100%}.utility-table th{text-transform:uppercase}.utility-table th,.utility-table td{padding:8px 16px;text-align:left}.utility-table tbody tr:nth-child(odd){background-color:#eee}.utility-table td{border-top:1px solid #eee}span.icon{background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle}.icon-table{margin:32px 0;width:100%}.icon-table th{background-color:#eee;padding:8px 6px;text-align:left}.icon-table th:first-child{width:100%}.icon-table th:not(:first-child){min-width:100px}.icon-table td{border-bottom:1px solid #eee;padding:4px 6px;text-align:left}.demo-color-white::before{background-color:#fff;outline:1px dashed #ccc}.demo-color-grey1::before{background-color:#eee}.demo-color-grey2::before{background-color:#ddd}.demo-color-grey3::before{background-color:#ccc}.demo-color-grey4::before{background-color:#999}.demo-color-grey5::before{background-color:#767676}.demo-color-grey6::before{background-color:#333}.demo-color-black::before{background-color:#000}.demo-color-background-default::before{background-color:#fff;outline:1px dashed #ccc}.demo-color-background-default-dark-mode::before{background-color:#fff;outline:1px dashed #333}.demo-color-text-default::before{background-color:#333}.demo-color-text-default-dark-mode::before{background-color:#333}.demo-color-text-secondary::before{background-color:#767676}.demo-color-text-secondary-dark-mode::before{background-color:#767676}.demo-color-text-disabled::before{background-color:#999}.demo-color-text-disabled-dark-mode::before{background-color:#999}.demo-color-text-confirmation::before{background-color:#457016}.demo-color-text-confirmation-dark-mode::before{background-color:#457016}.demo-color-action-secondary::before{background-color:#767676}.demo-color-action-secondary-dark-mode::before{background-color:#767676}.demo-color-action-disabled::before{background-color:#ccc}.demo-color-action-disabled-dark-mode::before{background-color:#ccc}.demo-color-link-default::before{background-color:#0654ba}.demo-color-link-default-dark-mode::before{background-color:#0654ba}.demo-color-link-hover::before{background-color:#00489f}.demo-color-link-hover-dark-mode::before{background-color:#00489f}.demo-color-link-visited::before{background-color:#6a29b9}.demo-color-link-visited-dark-mode::before{background-color:#6a29b9}.demo-color-action-primary::before{background-color:#0654ba}.demo-color-action-primary-dark-mode::before{background-color:#0654ba}.demo-color-action-hover::before{background-color:#00489f}.demo-color-action-hover-dark-mode::before{background-color:#00489f}.demo-color-action-destroy::before{background-color:#dd1e31}.demo-color-action-destroy-dark-mode::before{background-color:#dd1e31}.demo-color-status-information::before{background-color:#0654ba}.demo-color-status-information-dark-mode::before{background-color:#0654ba}.demo-color-status-confirmation::before{background-color:#5ba71b}.demo-color-status-confirmation-dark-mode::before{background-color:#5ba71b}.demo-color-status-attention::before{background-color:#dd1e31}.demo-color-status-attention-dark-mode::before{background-color:#dd1e31}.demo-color-separator::before{background-color:#eee}.demo-color-separator-dark-mode::before{background-color:#eee}.demo-color-image-border::before{background-color:#eee}.demo-color-image-border-dark-mode::before{background-color:#eee}.demo-typography{list-style:none;margin:0;padding:0}.demo-typography li{margin:1rem 0}@media only screen and (min-width:601px){.page-grid{display:grid;margin:0 auto;max-width:600px;width:100%}header{background-color:#0654ba;padding:0 8px}main{grid-column-end:2;grid-column-start:2;grid-row-end:1;grid-row-start:1;overflow-x:hidden;padding-left:8px}footer{grid-column-end:2;grid-column-start:2;grid-row-end:2;grid-row-start:2}.app-bar{margin:0 auto;max-width:600px;padding-left:8px;width:100%}.site-nav{grid-column-end:1;grid-column-start:1;grid-row-end:1;grid-row-start:1;height:100vh;overflow-y:scroll;padding-left:8px;padding-right:24px;position:-webkit-sticky;position:sticky;top:0}.site-nav h2{color:#767676;margin-bottom:12px;margin-top:24px;text-transform:uppercase}.site-nav h2:first-of-type{margin-top:32px}.site-nav ul{line-height:1.5em;list-style-type:none;margin:0;padding:0}.site-nav ul:last-child{padding-bottom:32px}.site-nav a{text-decoration:none}.site-nav a:visited{color:#0654ba}.demo-colors li::before{display:inline-block;width:10rem}}@media only screen and (min-width:961px){#about dl{-webkit-column-count:2;-moz-column-count:2;column-count:2}.app-bar{max-width:960px}.page-grid{grid-column-gap:16px;max-width:960px}}@media only screen and (min-width:1281px){.app-bar{max-width:1280px}.page-grid{grid-column-gap:32px;max-width:1280px}}.demo-color-b1::before{background-color:rgba(6,84,186,0.2)}.demo-color-b3::before{background-color:rgba(6,84,186,0.6)}.demo-color-b4::before{background-color:#0654ba}.demo-color-b6::before{background-color:#00489f}.demo-color-r1::before{background-color:rgba(221,30,49,0.2)}.demo-color-r3::before{background-color:rgba(221,30,49,0.6)}.demo-color-r4::before{background-color:#dd1e31}.demo-color-r6::before{background-color:#ad1f3a}.demo-color-g1::before{background-color:rgba(91,167,27,0.2)}.demo-color-g3::before{background-color:rgba(91,167,27,0.6)}.demo-color-g4::before{background-color:#5ba71b}.demo-color-g6::before{background-color:#457016}.demo-color-m1::before{background-color:rgba(106,41,185,0.2)}.demo-color-m3::before{background-color:rgba(106,41,185,0.6)}.demo-color-m4::before{background-color:#6a29b9}.demo-color-o1::before{background-color:rgba(241,142,12,0.2)}.demo-color-o3::before{background-color:rgba(241,142,12,0.6)}.demo-color-o4::before{background-color:#f18e0c}.demo-color-o6::before{background-color:#d36c07}
+figure .highlight,.highlight pre,.highlight table{background:#242424!important;color:#f6f3e8!important}.highlight .hll{background-color:#ffc!important}.highlight .c{color:#99968b!important;font-style:italic!important}.highlight .err{color:#f6f3e8!important}.highlight .g{color:#f6f3e8!important}.highlight .k{color:#8ac6f2!important}.highlight .l{color:#f6f3e8!important}.highlight .n,.highlight .h{color:#f6f3e8!important}.highlight .o{color:#f6f3e8!important}.highlight .x{color:#f6f3e8!important}.highlight .p{color:#f6f3e8!important}.highlight .cm{color:#99968b!important;font-style:italic!important}.highlight .cp{color:#e5786d!important}.highlight .c1{color:#99968b!important;font-style:italic!important}.highlight .cs{color:#99968b!important;font-style:italic!important}.highlight .gd{color:#f6f3e8!important}.highlight .ge{color:#f6f3e8!important}.highlight .gr{color:#f6f3e8!important}.highlight .gh{color:#f6f3e8!important;font-weight:bold!important}.highlight .gi{color:#f6f3e8!important}.highlight .go{color:#808080!important;background-color:#303030!important}.highlight .gp{color:#f6f3e8!important}.highlight .gs{color:#f6f3e8!important}.highlight .gu{color:#f6f3e8!important;font-weight:bold!important}.highlight .gt{color:#f6f3e8!important}.highlight .kc{color:#8ac6f2!important}.highlight .kd{color:#8ac6f2!important}.highlight .kn{color:#8ac6f2!important}.highlight .kp{color:#8ac6f2!important}.highlight .kr{color:#8ac6f2!important}.highlight .kt{color:#cae682!important}.highlight .ld{color:#f6f3e8!important}.highlight .m{color:#e5786d!important}.highlight .s{color:#95e454!important;font-style:italic!important}.highlight .na{color:#cae682!important}.highlight .nb{color:#f6f3e8!important}.highlight .nc{color:#f6f3e8!important}.highlight .no{color:#e5786d!important}.highlight .nd{color:#f6f3e8!important}.highlight .ni{color:#e7f6da!important}.highlight .ne{color:#f6f3e8!important}.highlight .nf{color:#cae682!important}.highlight .nl{color:#f6f3e8!important}.highlight .nn{color:#f6f3e8!important}.highlight .nx{color:#f6f3e8!important}.highlight .py{color:#f6f3e8!important}.highlight .nt{color:#8ac6f2!important}.highlight .nv{color:#cae682!important}.highlight .ow{color:#f6f3e8!important}.highlight .w{color:#f6f3e8!important}.highlight .mf{color:#e5786d!important}.highlight .mh{color:#e5786d!important}.highlight .mi{color:#e5786d!important}.highlight .mo{color:#e5786d!important}.highlight .sb{color:#95e454!important;font-style:italic!important}.highlight .sc{color:#95e454!important;font-style:italic!important}.highlight .sd{color:#95e454!important;font-style:italic!important}.highlight .s2{color:#95e454!important;font-style:italic!important}.highlight .se{color:#95e454!important;font-style:italic!important}.highlight .sh{color:#95e454!important;font-style:italic!important}.highlight .si{color:#95e454!important;font-style:italic!important}.highlight .sx{color:#95e454!important;font-style:italic!important}.highlight .sr{color:#95e454!important;font-style:italic!important}.highlight .s1{color:#95e454!important;font-style:italic!important}.highlight .ss{color:#95e454!important;font-style:italic!important}.highlight .bp{color:#f6f3e8!important}.highlight .vc{color:#cae682!important}.highlight .vg{color:#cae682!important}.highlight .vi{color:#cae682!important}.highlight .il{color:#e5786d!important}span.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}span.highlight .s{word-break:break-all;word-wrap:break-word}figure.highlight{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px;margin:8px 0;width:100%}figure.highlight pre{font-family:monospace;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}body{margin:0}header{background-color:#0654ba}footer{margin-top:32px}main > div > h2{margin-bottom:12px;margin-top:24px;padding-top:8px}.page-grid{padding:8px}.skin-graphic{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:48px auto 0 auto;max-width:600px;width:100%}.modules-expander{background:#eee;padding:4px}.modules-expander__tip{color:#767676;margin:4px 8px;text-align:center}.modules-expander__list{-webkit-column-count:2;-moz-column-count:2;column-count:2;font-size:20px;line-height:1.75em;list-style-type:none;margin:0;width:100%}.modules-expander[open]{padding-bottom:32px}.modules-expander__list a{text-decoration:none}.modules-expander .details__summary{padding:8px 0}.app-bar{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:white;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 8px;padding:16px 0}.app-bar__title{font-size:26px;font-weight:bold;margin:0}.app-bar__links{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-shrink:0;list-style-type:none;margin-left:8px;padding:0}.app-bar__links li:not(:last-child)::after{content:'';margin:0 8px}.app-bar__links a{color:white;text-decoration:none}.modules-expander__list a:visited{color:#0654ba}.app-bar__links a:hover{text-decoration:underline}.app-bar__links a:focus{outline:1px auto white}.app-bar__links a:visited{color:white}.section-header{display:-webkit-box;display:flex;margin:16px 0}.section-header h2{margin:0}.section-header__version{align-self:flex-end;background-color:#eee;margin-left:auto;padding:2px 4px}#about dl{margin:16px 0 32px 0}#about dt{font-weight:bold;margin:0 0 12px 0}#about dd{margin:0 0 12px 0}.demo{background-color:#fff;background-color:var(--color-background-default,#fff);border:1px dashed #ddd}.demo--dark-mode{background-color:#fff;border:1px dashed #eee;color:#333}.demo__inner{margin:8px}span.demo,span.demo__inner{display:inline-block}@media (prefers-color-scheme:dark){.skin-experiment-dark-mode header{background-color:#0654ba;background-color:var(--color-link-default,#0654ba)}.skin-experiment-dark-mode a.demo-link-visited{color:#6a29b9;color:var(--color-link-visited,#6a29b9)}.skin-experiment-dark-mode a.demo-link-visited:link,.skin-experiment-dark-mode a.demo-link-visited:visited{color:#6a29b9;color:var(--color-link-visited,#6a29b9)}.skin-experiment-dark-mode .section-header__version,.skin-experiment-dark-mode span.highlight{background-color:#333}.skin-experiment-dark-mode .site-nav a,.skin-experiment-dark-mode .site-nav a:visited{color:#333;color:var(--color-text-default,#333)}.skin-experiment-dark-mode .site-nav a:hover{color:#333;color:var(--color-text-default,#333)}}.carousel__list--default-demo li{background-color:rgba(6,84,186,0.2);color:#333;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:200px}.carousel__list--discrete-demo li{background-color:rgba(6,84,186,0.2);-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:calc(25% - 24px)}.carousel__list--slideshow-demo li{background-color:rgba(6,84,186,0.2);color:#333;font-size:36px;font-weight:bold;height:300px;line-height:300px;margin-right:16px;text-align:center;width:100%}.carousel__list--discrete-demo li:last-child{margin-right:0}.carousel__list--slideshow-demo li:last-child{margin-right:0}.demo-colors{list-style:none;margin:0;padding:0}.demo-colors li{margin:1rem 0}.demo-colors li::before{content:'';display:block;height:1.25rem;margin-bottom:0.25rem;margin-right:1rem;vertical-align:middle;width:100%}a.demo-link-visited{color:#6a29b9}a.demo-link-visited:link,a.demo-link-visited:visited{color:#6a29b9}.utility-table{border:1px solid #eee;width:100%}.utility-table th{text-transform:uppercase}.utility-table th,.utility-table td{padding:8px 16px;text-align:left}.utility-table tbody tr:nth-child(odd){background-color:#eee}.utility-table td{border-top:1px solid #eee}span.icon{background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle}.icon-table{margin:32px 0;width:100%}.icon-table th{background-color:#eee;padding:8px 6px;text-align:left}.icon-table th:first-child{width:100%}.icon-table th:not(:first-child){min-width:100px}.icon-table td{border-bottom:1px solid #eee;padding:4px 6px;text-align:left}.demo-color-white::before{background-color:#fff;outline:1px dashed #ccc}.demo-color-grey1::before{background-color:#eee}.demo-color-grey2::before{background-color:#ddd}.demo-color-grey3::before{background-color:#ccc}.demo-color-grey4::before{background-color:#999}.demo-color-grey5::before{background-color:#767676}.demo-color-grey6::before{background-color:#333}.demo-color-black::before{background-color:#000}.demo-color-background-default::before{background-color:#fff;outline:1px dashed #ccc}.demo-color-background-default-dark-mode::before{background-color:#fff;outline:1px dashed #333}.demo-color-text-default::before{background-color:#333}.demo-color-text-default-dark-mode::before{background-color:#333}.demo-color-text-secondary::before{background-color:#767676}.demo-color-text-secondary-dark-mode::before{background-color:#767676}.demo-color-text-disabled::before{background-color:#999}.demo-color-text-disabled-dark-mode::before{background-color:#999}.demo-color-text-confirmation::before{background-color:#457016}.demo-color-text-confirmation-dark-mode::before{background-color:#457016}.demo-color-action-secondary::before{background-color:#767676}.demo-color-action-secondary-dark-mode::before{background-color:#767676}.demo-color-action-disabled::before{background-color:#ccc}.demo-color-action-disabled-dark-mode::before{background-color:#ccc}.demo-color-link-default::before{background-color:#0654ba}.demo-color-link-default-dark-mode::before{background-color:#0654ba}.demo-color-link-hover::before{background-color:#00489f}.demo-color-link-hover-dark-mode::before{background-color:#00489f}.demo-color-link-visited::before{background-color:#6a29b9}.demo-color-link-visited-dark-mode::before{background-color:#6a29b9}.demo-color-action-primary::before{background-color:#0654ba}.demo-color-action-primary-dark-mode::before{background-color:#0654ba}.demo-color-action-hover::before{background-color:#00489f}.demo-color-action-hover-dark-mode::before{background-color:#00489f}.demo-color-action-destroy::before{background-color:#dd1e31}.demo-color-action-destroy-dark-mode::before{background-color:#dd1e31}.demo-color-status-information::before{background-color:#0654ba}.demo-color-status-information-dark-mode::before{background-color:#0654ba}.demo-color-status-confirmation::before{background-color:#5ba71b}.demo-color-status-confirmation-dark-mode::before{background-color:#5ba71b}.demo-color-status-attention::before{background-color:#dd1e31}.demo-color-status-attention-dark-mode::before{background-color:#dd1e31}.demo-color-separator::before{background-color:#eee}.demo-color-separator-dark-mode::before{background-color:#eee}.demo-color-image-border::before{background-color:#eee}.demo-color-image-border-dark-mode::before{background-color:#eee}.demo-typography{list-style:none;margin:0;padding:0}.demo-typography li{margin:1rem 0}@media only screen and (min-width:601px){.page-grid{display:grid;margin:0 auto;max-width:600px;width:100%}header{background-color:#0654ba;padding:0 8px}main{grid-column-end:2;grid-column-start:2;grid-row-end:1;grid-row-start:1;overflow-x:hidden;padding-left:8px}footer{grid-column-end:2;grid-column-start:2;grid-row-end:2;grid-row-start:2}.app-bar{margin:0 auto;max-width:600px;padding-left:8px;width:100%}.site-nav{grid-column-end:1;grid-column-start:1;grid-row-end:1;grid-row-start:1;height:100vh;overflow-y:scroll;padding-left:8px;padding-right:24px;position:-webkit-sticky;position:sticky;top:0}.site-nav h2{color:#767676;margin-bottom:12px;margin-top:24px;text-transform:uppercase}.site-nav h2:first-of-type{margin-top:32px}.site-nav ul{line-height:1.5em;list-style-type:none;margin:0;padding:0}.site-nav ul:last-child{padding-bottom:32px}.site-nav a{text-decoration:none}.site-nav a:visited{color:#0654ba}.demo-colors li::before{display:inline-block;width:10rem}}@media only screen and (min-width:961px){#about dl{-webkit-column-count:2;-moz-column-count:2;column-count:2}.app-bar{max-width:960px}.page-grid{grid-column-gap:16px;max-width:960px}}@media only screen and (min-width:1281px){.app-bar{max-width:1280px}.page-grid{grid-column-gap:32px;max-width:1280px}}.demo-color-b1::before{background-color:rgba(6,84,186,0.2)}.demo-color-b3::before{background-color:rgba(6,84,186,0.6)}.demo-color-b4::before{background-color:#0654ba}.demo-color-b6::before{background-color:#00489f}.demo-color-r1::before{background-color:rgba(221,30,49,0.2)}.demo-color-r3::before{background-color:rgba(221,30,49,0.6)}.demo-color-r4::before{background-color:#dd1e31}.demo-color-r6::before{background-color:#ad1f3a}.demo-color-g1::before{background-color:rgba(91,167,27,0.2)}.demo-color-g3::before{background-color:rgba(91,167,27,0.6)}.demo-color-g4::before{background-color:#5ba71b}.demo-color-g6::before{background-color:#457016}.demo-color-m1::before{background-color:rgba(106,41,185,0.2)}.demo-color-m3::before{background-color:rgba(106,41,185,0.6)}.demo-color-m4::before{background-color:#6a29b9}.demo-color-o1::before{background-color:rgba(241,142,12,0.2)}.demo-color-o3::before{background-color:rgba(241,142,12,0.6)}.demo-color-o4::before{background-color:#f18e0c}.demo-color-o6::before{background-color:#d36c07}
 
 
 
diff --git a/docs/static/ds6/docs.min.css b/docs/static/ds6/docs.min.css
index 4235a368c..4a3805a0b 100644
--- a/docs/static/ds6/docs.min.css
+++ b/docs/static/ds6/docs.min.css
@@ -1,5 +1,5 @@
 /*! Wombat VIM theme */
-figure .highlight,.highlight pre,.highlight table{background:#242424!important;color:#f6f3e8!important}.highlight .hll{background-color:#ffc!important}.highlight .c{color:#99968b!important;font-style:italic!important}.highlight .err{color:#f6f3e8!important}.highlight .g{color:#f6f3e8!important}.highlight .k{color:#8ac6f2!important}.highlight .l{color:#f6f3e8!important}.highlight .n,.highlight .h{color:#f6f3e8!important}.highlight .o{color:#f6f3e8!important}.highlight .x{color:#f6f3e8!important}.highlight .p{color:#f6f3e8!important}.highlight .cm{color:#99968b!important;font-style:italic!important}.highlight .cp{color:#e5786d!important}.highlight .c1{color:#99968b!important;font-style:italic!important}.highlight .cs{color:#99968b!important;font-style:italic!important}.highlight .gd{color:#f6f3e8!important}.highlight .ge{color:#f6f3e8!important}.highlight .gr{color:#f6f3e8!important}.highlight .gh{color:#f6f3e8!important;font-weight:bold!important}.highlight .gi{color:#f6f3e8!important}.highlight .go{color:#808080!important;background-color:#303030!important}.highlight .gp{color:#f6f3e8!important}.highlight .gs{color:#f6f3e8!important}.highlight .gu{color:#f6f3e8!important;font-weight:bold!important}.highlight .gt{color:#f6f3e8!important}.highlight .kc{color:#8ac6f2!important}.highlight .kd{color:#8ac6f2!important}.highlight .kn{color:#8ac6f2!important}.highlight .kp{color:#8ac6f2!important}.highlight .kr{color:#8ac6f2!important}.highlight .kt{color:#cae682!important}.highlight .ld{color:#f6f3e8!important}.highlight .m{color:#e5786d!important}.highlight .s{color:#95e454!important;font-style:italic!important}.highlight .na{color:#cae682!important}.highlight .nb{color:#f6f3e8!important}.highlight .nc{color:#f6f3e8!important}.highlight .no{color:#e5786d!important}.highlight .nd{color:#f6f3e8!important}.highlight .ni{color:#e7f6da!important}.highlight .ne{color:#f6f3e8!important}.highlight .nf{color:#cae682!important}.highlight .nl{color:#f6f3e8!important}.highlight .nn{color:#f6f3e8!important}.highlight .nx{color:#f6f3e8!important}.highlight .py{color:#f6f3e8!important}.highlight .nt{color:#8ac6f2!important}.highlight .nv{color:#cae682!important}.highlight .ow{color:#f6f3e8!important}.highlight .w{color:#f6f3e8!important}.highlight .mf{color:#e5786d!important}.highlight .mh{color:#e5786d!important}.highlight .mi{color:#e5786d!important}.highlight .mo{color:#e5786d!important}.highlight .sb{color:#95e454!important;font-style:italic!important}.highlight .sc{color:#95e454!important;font-style:italic!important}.highlight .sd{color:#95e454!important;font-style:italic!important}.highlight .s2{color:#95e454!important;font-style:italic!important}.highlight .se{color:#95e454!important;font-style:italic!important}.highlight .sh{color:#95e454!important;font-style:italic!important}.highlight .si{color:#95e454!important;font-style:italic!important}.highlight .sx{color:#95e454!important;font-style:italic!important}.highlight .sr{color:#95e454!important;font-style:italic!important}.highlight .s1{color:#95e454!important;font-style:italic!important}.highlight .ss{color:#95e454!important;font-style:italic!important}.highlight .bp{color:#f6f3e8!important}.highlight .vc{color:#cae682!important}.highlight .vg{color:#cae682!important}.highlight .vi{color:#cae682!important}.highlight .il{color:#e5786d!important}span.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}span.highlight .s{word-break:break-all;word-wrap:break-word}figure.highlight{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px;margin:8px 0;width:100%}figure.highlight pre{font-family:monospace;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}body{margin:0}header{background-color:#3665f3}footer{margin-top:32px}main > div > h2{margin-bottom:12px;margin-top:24px;padding-top:8px}.page-grid{padding:8px}.skin-graphic{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:48px auto 0 auto;max-width:600px;width:100%}.modules-expander{background:#eee;padding:4px}.modules-expander__tip{color:#767676;margin:4px 8px;text-align:center}.modules-expander__list{-webkit-column-count:2;-moz-column-count:2;column-count:2;font-size:20px;line-height:1.75em;list-style-type:none;margin:0;width:100%}.modules-expander[open]{padding-bottom:32px}.modules-expander__list a{text-decoration:none}.modules-expander .details__summary{padding:8px 0}.app-bar{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:white;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 8px;padding:16px 0}.app-bar__title{font-size:26px;font-weight:bold;margin:0}.app-bar__links{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-shrink:0;list-style-type:none;margin-left:8px;padding:0}.app-bar__links li:not(:last-child)::after{content:'';margin:0 8px}.app-bar__links a{color:white;text-decoration:none}.modules-expander__list a:visited{color:#3665f3}.app-bar__links a:hover{text-decoration:underline}.app-bar__links a:focus{outline:2px dotted white}.app-bar__links a:visited{color:white}.section-header{display:-webkit-box;display:flex;margin:16px 0}.section-header h2{margin:0}.section-header__version{align-self:flex-end;background-color:#f5f5f5;margin-left:auto;padding:2px 4px}#about dl{margin:16px 0 32px 0}#about dt{font-weight:bold;margin:0 0 12px 0}#about dd{margin:0 0 12px 0}.demo{background-color:#fff;background-color:var(--color-background-default,#fff);border:1px dashed #e5e5e5}.demo--dark-mode{background-color:#171717;border:1px dashed #393939;color:#dcdcdc}.demo__inner{margin:8px}span.demo,span.demo__inner{display:inline-block}@media (prefers-color-scheme:dark){.skin-experiment-dark-mode header{background-color:#3665f3;background-color:var(--color-link-default,#3665f3)}.skin-experiment-dark-mode a.demo-link-visited{color:#82187c;color:var(--color-link-visited,#82187c)}.skin-experiment-dark-mode a.demo-link-visited:link,.skin-experiment-dark-mode a.demo-link-visited:visited{color:#82187c;color:var(--color-link-visited,#82187c)}.skin-experiment-dark-mode .section-header__version,.skin-experiment-dark-mode span.highlight{background-color:#414141}.skin-experiment-dark-mode .site-nav a,.skin-experiment-dark-mode .site-nav a:visited{color:#111820;color:var(--color-text-default,#111820)}.skin-experiment-dark-mode .site-nav a:hover{color:#111820;color:var(--color-text-default,#111820)}}.carousel__list--default-demo li{background-color:#f1f8fe;color:#111820;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:200px}.carousel__list--discrete-demo li{background-color:#f1f8fe;-webkit-box-sizing:border-box;box-sizing:border-box;color:#111820;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:calc(25% - 24px)}.carousel__list--slideshow-demo li{background-color:#f1f8fe;color:#111820;font-size:36px;font-weight:bold;height:300px;line-height:300px;margin-right:16px;text-align:center;width:100%}.carousel__list--discrete-demo li:last-child{margin-right:0}.carousel__list--slideshow-demo li:last-child{margin-right:0}.demo-colors{list-style:none;margin:0;padding:0}.demo-colors li{margin:1rem 0}.demo-colors li::before{content:'';display:block;height:1.25rem;margin-bottom:0.25rem;margin-right:1rem;vertical-align:middle;width:100%}a.demo-link-visited{color:#82187c}a.demo-link-visited:link,a.demo-link-visited:visited{color:#82187c}.utility-table{border:1px solid #e5e5e5;width:100%}.utility-table th{text-transform:uppercase}.utility-table th,.utility-table td{padding:8px 16px;text-align:left}.utility-table tbody tr:nth-child(odd){background-color:#f5f5f5}.utility-table td{border-top:1px solid #e5e5e5}span.icon{background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle}.icon-table{margin:32px 0;width:100%}.icon-table th{background-color:#eee;padding:8px 6px;text-align:left}.icon-table th:first-child{width:100%}.icon-table th:not(:first-child){min-width:100px}.icon-table td{border-bottom:1px solid #eee;padding:4px 6px;text-align:left}.demo-color-white::before{background-color:#fff;outline:1px dashed #c7c7c7}.demo-color-grey1::before{background-color:#f5f5f5}.demo-color-grey2::before{background-color:#e5e5e5}.demo-color-grey3::before{background-color:#c7c7c7}.demo-color-grey4::before{background-color:#a2a2a2}.demo-color-grey5::before{background-color:#767676}.demo-color-grey6::before{background-color:#414141}.demo-color-black::before{background-color:#111820}.demo-color-background-default::before{background-color:#fff;outline:1px dashed #c7c7c7}.demo-color-background-default-dark-mode::before{background-color:#171717;outline:1px dashed #dcdcdc}.demo-color-text-default::before{background-color:#111820}.demo-color-text-default-dark-mode::before{background-color:#dcdcdc}.demo-color-text-secondary::before{background-color:#767676}.demo-color-text-secondary-dark-mode::before{background-color:#9c9c9c}.demo-color-text-disabled::before{background-color:#c7c7c7}.demo-color-text-disabled-dark-mode::before{background-color:#4d4d4d}.demo-color-text-confirmation::before{background-color:#05823f}.demo-color-text-confirmation-dark-mode::before{background-color:#24bc6b}.demo-color-action-secondary::before{background-color:#767676}.demo-color-action-secondary-dark-mode::before{background-color:#9c9c9c}.demo-color-action-disabled::before{background-color:#c7c7c7}.demo-color-action-disabled-dark-mode::before{background-color:#4d4d4d}.demo-color-link-default::before{background-color:#3665f3}.demo-color-link-default-dark-mode::before{background-color:#5192ff}.demo-color-link-hover::before{background-color:#2b0eaf}.demo-color-link-hover-dark-mode::before{background-color:#94bcff}.demo-color-link-visited::before{background-color:#82187c}.demo-color-link-visited-dark-mode::before{background-color:#d2a4cf}.demo-color-action-primary::before{background-color:#3665f3}.demo-color-action-primary-dark-mode::before{background-color:#5192ff}.demo-color-action-hover::before{background-color:#2b0eaf}.demo-color-action-hover-dark-mode::before{background-color:#94bcff}.demo-color-action-destroy::before{background-color:#e62048}.demo-color-action-destroy-dark-mode::before{background-color:#e75064}.demo-color-status-information::before{background-color:#3665f3}.demo-color-status-information-dark-mode::before{background-color:#5192ff}.demo-color-status-confirmation::before{background-color:#28a443}.demo-color-status-confirmation-dark-mode::before{background-color:#24bc6b}.demo-color-status-attention::before{background-color:#e62048}.demo-color-status-attention-dark-mode::before{background-color:#e75064}.demo-color-separator::before{background-color:#e5e5e5}.demo-color-separator-dark-mode::before{background-color:#393939}.demo-color-image-border::before{background-color:#e5e5e5}.demo-color-image-border-dark-mode::before{background-color:#393939}.demo-typography{list-style:none;margin:0;padding:0}.demo-typography li{margin:1rem 0}@media only screen and (min-width:601px){.page-grid{display:grid;margin:0 auto;max-width:600px;width:100%}header{background-color:#3665f3;padding:0 8px}main{grid-column-end:2;grid-column-start:2;grid-row-end:1;grid-row-start:1;overflow-x:hidden;padding-left:8px}footer{grid-column-end:2;grid-column-start:2;grid-row-end:2;grid-row-start:2}.app-bar{margin:0 auto;max-width:600px;padding-left:8px;width:100%}.site-nav{grid-column-end:1;grid-column-start:1;grid-row-end:1;grid-row-start:1;height:100vh;overflow-y:scroll;padding-left:8px;padding-right:24px;position:-webkit-sticky;position:sticky;top:0}.site-nav h2{color:#767676;margin-bottom:12px;margin-top:24px;text-transform:uppercase}.site-nav h2:first-of-type{margin-top:32px}.site-nav ul{line-height:1.5em;list-style-type:none;margin:0;padding:0}.site-nav ul:last-child{padding-bottom:32px}.site-nav a{text-decoration:none}.site-nav a:visited{color:#3665f3}.demo-colors li::before{display:inline-block;width:10rem}}@media only screen and (min-width:961px){#about dl{-webkit-column-count:2;-moz-column-count:2;column-count:2}.app-bar{max-width:960px}.page-grid{grid-column-gap:16px;max-width:960px}}@media only screen and (min-width:1281px){.app-bar{max-width:1280px}.page-grid{grid-column-gap:32px;max-width:1280px}}.demo-color-b1::before{background-color:#c5e5fb}.demo-color-b3::before{background-color:#659eff}.demo-color-b4::before{background-color:#3665f3}.demo-color-b6::before{background-color:#2b0eaf}.demo-color-r1::before{background-color:#ffd1dd}.demo-color-r3::before{background-color:#ff6383}.demo-color-r4::before{background-color:#e62048}.demo-color-r6::before{background-color:#a00739}.demo-color-g1::before{background-color:#ccfdce}.demo-color-g3::before{background-color:#5ee471}.demo-color-g4::before{background-color:#28a443}.demo-color-g6::before{background-color:#05823f}.demo-color-m1::before{background-color:#fad8f0}.demo-color-m3::before{background-color:#ea5fbc}.demo-color-m4::before{background-color:#82187c}.demo-color-o1::before{background-color:#ffdec7}.demo-color-o3::before{background-color:#ff8559}.demo-color-o4::before{background-color:#ff6932}.demo-color-o6::before{background-color:#b03005}.demo-color-b2::before{background-color:#93c9ff}.demo-color-b5::before{background-color:#382aef}.demo-color-b7::before{background-color:#121258}.demo-color-r2::before{background-color:#ffa2b6}.demo-color-r5::before{background-color:#c4003a}.demo-color-r7::before{background-color:#680226}.demo-color-y1::before{background-color:#fcf2bd}.demo-color-y2::before{background-color:#f7e376}.demo-color-y3::before{background-color:#fbcd25}.demo-color-y4::before{background-color:#f7b100}.demo-color-y5::before{background-color:#e58c02}.demo-color-y6::before{background-color:#aa5404}.demo-color-y7::before{background-color:#592e13}.demo-color-g2::before{background-color:#9ef4a6}.demo-color-g5::before{background-color:#1bab49}.demo-color-g7::before{background-color:#07522c}.demo-color-o2::before{background-color:#feb786}.demo-color-o5::before{background-color:#db3c07}.demo-color-o6::before{background-color:#b03005}.demo-color-o7::before{background-color:#5c1b05}.demo-color-m2::before{background-color:#f5a0d9}.demo-color-m5::before{background-color:#a60d8a}.demo-color-m6::before{background-color:#82187c}.demo-color-m7::before{background-color:#500750}.demo-color-t1::before{background-color:#c2f2ef}.demo-color-t2::before{background-color:#71e3e2}.demo-color-t3::before{background-color:#1dcbca}.demo-color-t4::before{background-color:#02a2ac}.demo-color-t5::before{background-color:#01718f}.demo-color-t6::before{background-color:#0e4a6c}.demo-color-t7::before{background-color:#003147}.demo-color-l1::before{background-color:#f4fabe}.demo-color-l2::before{background-color:#e9f577}.demo-color-l3::before{background-color:#c9e43b}.demo-color-l4::before{background-color:#accf02}.demo-color-l5::before{background-color:#86b300}.demo-color-l6::before{background-color:#4b7d06}.demo-color-l7::before{background-color:#364f03}.carousel__list--default-demo li{border-radius:8px}.carousel__list--discrete-demo li{border-radius:8px}.carousel__list--slideshow-demo li{border-radius:8px}
+figure .highlight,.highlight pre,.highlight table{background:#242424!important;color:#f6f3e8!important}.highlight .hll{background-color:#ffc!important}.highlight .c{color:#99968b!important;font-style:italic!important}.highlight .err{color:#f6f3e8!important}.highlight .g{color:#f6f3e8!important}.highlight .k{color:#8ac6f2!important}.highlight .l{color:#f6f3e8!important}.highlight .n,.highlight .h{color:#f6f3e8!important}.highlight .o{color:#f6f3e8!important}.highlight .x{color:#f6f3e8!important}.highlight .p{color:#f6f3e8!important}.highlight .cm{color:#99968b!important;font-style:italic!important}.highlight .cp{color:#e5786d!important}.highlight .c1{color:#99968b!important;font-style:italic!important}.highlight .cs{color:#99968b!important;font-style:italic!important}.highlight .gd{color:#f6f3e8!important}.highlight .ge{color:#f6f3e8!important}.highlight .gr{color:#f6f3e8!important}.highlight .gh{color:#f6f3e8!important;font-weight:bold!important}.highlight .gi{color:#f6f3e8!important}.highlight .go{color:#808080!important;background-color:#303030!important}.highlight .gp{color:#f6f3e8!important}.highlight .gs{color:#f6f3e8!important}.highlight .gu{color:#f6f3e8!important;font-weight:bold!important}.highlight .gt{color:#f6f3e8!important}.highlight .kc{color:#8ac6f2!important}.highlight .kd{color:#8ac6f2!important}.highlight .kn{color:#8ac6f2!important}.highlight .kp{color:#8ac6f2!important}.highlight .kr{color:#8ac6f2!important}.highlight .kt{color:#cae682!important}.highlight .ld{color:#f6f3e8!important}.highlight .m{color:#e5786d!important}.highlight .s{color:#95e454!important;font-style:italic!important}.highlight .na{color:#cae682!important}.highlight .nb{color:#f6f3e8!important}.highlight .nc{color:#f6f3e8!important}.highlight .no{color:#e5786d!important}.highlight .nd{color:#f6f3e8!important}.highlight .ni{color:#e7f6da!important}.highlight .ne{color:#f6f3e8!important}.highlight .nf{color:#cae682!important}.highlight .nl{color:#f6f3e8!important}.highlight .nn{color:#f6f3e8!important}.highlight .nx{color:#f6f3e8!important}.highlight .py{color:#f6f3e8!important}.highlight .nt{color:#8ac6f2!important}.highlight .nv{color:#cae682!important}.highlight .ow{color:#f6f3e8!important}.highlight .w{color:#f6f3e8!important}.highlight .mf{color:#e5786d!important}.highlight .mh{color:#e5786d!important}.highlight .mi{color:#e5786d!important}.highlight .mo{color:#e5786d!important}.highlight .sb{color:#95e454!important;font-style:italic!important}.highlight .sc{color:#95e454!important;font-style:italic!important}.highlight .sd{color:#95e454!important;font-style:italic!important}.highlight .s2{color:#95e454!important;font-style:italic!important}.highlight .se{color:#95e454!important;font-style:italic!important}.highlight .sh{color:#95e454!important;font-style:italic!important}.highlight .si{color:#95e454!important;font-style:italic!important}.highlight .sx{color:#95e454!important;font-style:italic!important}.highlight .sr{color:#95e454!important;font-style:italic!important}.highlight .s1{color:#95e454!important;font-style:italic!important}.highlight .ss{color:#95e454!important;font-style:italic!important}.highlight .bp{color:#f6f3e8!important}.highlight .vc{color:#cae682!important}.highlight .vg{color:#cae682!important}.highlight .vi{color:#cae682!important}.highlight .il{color:#e5786d!important}span.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}span.highlight .s{word-break:break-all;word-wrap:break-word}figure.highlight{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px;margin:8px 0;width:100%}figure.highlight pre{font-family:monospace;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}body{margin:0}header{background-color:#3665f3}footer{margin-top:32px}main > div > h2{margin-bottom:12px;margin-top:24px;padding-top:8px}.page-grid{padding:8px}.skin-graphic{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:48px auto 0 auto;max-width:600px;width:100%}.modules-expander{background:#eee;padding:4px}.modules-expander__tip{color:#767676;margin:4px 8px;text-align:center}.modules-expander__list{-webkit-column-count:2;-moz-column-count:2;column-count:2;font-size:20px;line-height:1.75em;list-style-type:none;margin:0;width:100%}.modules-expander[open]{padding-bottom:32px}.modules-expander__list a{text-decoration:none}.modules-expander .details__summary{padding:8px 0}.app-bar{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:white;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 8px;padding:16px 0}.app-bar__title{font-size:26px;font-weight:bold;margin:0}.app-bar__links{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-shrink:0;list-style-type:none;margin-left:8px;padding:0}.app-bar__links li:not(:last-child)::after{content:'';margin:0 8px}.app-bar__links a{color:white;text-decoration:none}.modules-expander__list a:visited{color:#3665f3}.app-bar__links a:hover{text-decoration:underline}.app-bar__links a:focus{outline:1px auto white}.app-bar__links a:visited{color:white}.section-header{display:-webkit-box;display:flex;margin:16px 0}.section-header h2{margin:0}.section-header__version{align-self:flex-end;background-color:#f5f5f5;margin-left:auto;padding:2px 4px}#about dl{margin:16px 0 32px 0}#about dt{font-weight:bold;margin:0 0 12px 0}#about dd{margin:0 0 12px 0}.demo{background-color:#fff;background-color:var(--color-background-default,#fff);border:1px dashed #e5e5e5}.demo--dark-mode{background-color:#171717;border:1px dashed #393939;color:#dcdcdc}.demo__inner{margin:8px}span.demo,span.demo__inner{display:inline-block}@media (prefers-color-scheme:dark){.skin-experiment-dark-mode header{background-color:#3665f3;background-color:var(--color-link-default,#3665f3)}.skin-experiment-dark-mode a.demo-link-visited{color:#82187c;color:var(--color-link-visited,#82187c)}.skin-experiment-dark-mode a.demo-link-visited:link,.skin-experiment-dark-mode a.demo-link-visited:visited{color:#82187c;color:var(--color-link-visited,#82187c)}.skin-experiment-dark-mode .section-header__version,.skin-experiment-dark-mode span.highlight{background-color:#414141}.skin-experiment-dark-mode .site-nav a,.skin-experiment-dark-mode .site-nav a:visited{color:#111820;color:var(--color-text-default,#111820)}.skin-experiment-dark-mode .site-nav a:hover{color:#111820;color:var(--color-text-default,#111820)}}.carousel__list--default-demo li{background-color:#f1f8fe;color:#111820;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:200px}.carousel__list--discrete-demo li{background-color:#f1f8fe;-webkit-box-sizing:border-box;box-sizing:border-box;color:#111820;font-size:24px;font-weight:bold;height:120px;line-height:120px;margin-right:16px;text-align:center;width:calc(25% - 24px)}.carousel__list--slideshow-demo li{background-color:#f1f8fe;color:#111820;font-size:36px;font-weight:bold;height:300px;line-height:300px;margin-right:16px;text-align:center;width:100%}.carousel__list--discrete-demo li:last-child{margin-right:0}.carousel__list--slideshow-demo li:last-child{margin-right:0}.demo-colors{list-style:none;margin:0;padding:0}.demo-colors li{margin:1rem 0}.demo-colors li::before{content:'';display:block;height:1.25rem;margin-bottom:0.25rem;margin-right:1rem;vertical-align:middle;width:100%}a.demo-link-visited{color:#82187c}a.demo-link-visited:link,a.demo-link-visited:visited{color:#82187c}.utility-table{border:1px solid #e5e5e5;width:100%}.utility-table th{text-transform:uppercase}.utility-table th,.utility-table td{padding:8px 16px;text-align:left}.utility-table tbody tr:nth-child(odd){background-color:#f5f5f5}.utility-table td{border-top:1px solid #e5e5e5}span.icon{background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle}.icon-table{margin:32px 0;width:100%}.icon-table th{background-color:#eee;padding:8px 6px;text-align:left}.icon-table th:first-child{width:100%}.icon-table th:not(:first-child){min-width:100px}.icon-table td{border-bottom:1px solid #eee;padding:4px 6px;text-align:left}.demo-color-white::before{background-color:#fff;outline:1px dashed #c7c7c7}.demo-color-grey1::before{background-color:#f5f5f5}.demo-color-grey2::before{background-color:#e5e5e5}.demo-color-grey3::before{background-color:#c7c7c7}.demo-color-grey4::before{background-color:#a2a2a2}.demo-color-grey5::before{background-color:#767676}.demo-color-grey6::before{background-color:#414141}.demo-color-black::before{background-color:#111820}.demo-color-background-default::before{background-color:#fff;outline:1px dashed #c7c7c7}.demo-color-background-default-dark-mode::before{background-color:#171717;outline:1px dashed #dcdcdc}.demo-color-text-default::before{background-color:#111820}.demo-color-text-default-dark-mode::before{background-color:#dcdcdc}.demo-color-text-secondary::before{background-color:#767676}.demo-color-text-secondary-dark-mode::before{background-color:#9c9c9c}.demo-color-text-disabled::before{background-color:#c7c7c7}.demo-color-text-disabled-dark-mode::before{background-color:#4d4d4d}.demo-color-text-confirmation::before{background-color:#05823f}.demo-color-text-confirmation-dark-mode::before{background-color:#24bc6b}.demo-color-action-secondary::before{background-color:#767676}.demo-color-action-secondary-dark-mode::before{background-color:#9c9c9c}.demo-color-action-disabled::before{background-color:#c7c7c7}.demo-color-action-disabled-dark-mode::before{background-color:#4d4d4d}.demo-color-link-default::before{background-color:#3665f3}.demo-color-link-default-dark-mode::before{background-color:#5192ff}.demo-color-link-hover::before{background-color:#2b0eaf}.demo-color-link-hover-dark-mode::before{background-color:#94bcff}.demo-color-link-visited::before{background-color:#82187c}.demo-color-link-visited-dark-mode::before{background-color:#d2a4cf}.demo-color-action-primary::before{background-color:#3665f3}.demo-color-action-primary-dark-mode::before{background-color:#5192ff}.demo-color-action-hover::before{background-color:#2b0eaf}.demo-color-action-hover-dark-mode::before{background-color:#94bcff}.demo-color-action-destroy::before{background-color:#e62048}.demo-color-action-destroy-dark-mode::before{background-color:#e75064}.demo-color-status-information::before{background-color:#3665f3}.demo-color-status-information-dark-mode::before{background-color:#5192ff}.demo-color-status-confirmation::before{background-color:#28a443}.demo-color-status-confirmation-dark-mode::before{background-color:#24bc6b}.demo-color-status-attention::before{background-color:#e62048}.demo-color-status-attention-dark-mode::before{background-color:#e75064}.demo-color-separator::before{background-color:#e5e5e5}.demo-color-separator-dark-mode::before{background-color:#393939}.demo-color-image-border::before{background-color:#e5e5e5}.demo-color-image-border-dark-mode::before{background-color:#393939}.demo-typography{list-style:none;margin:0;padding:0}.demo-typography li{margin:1rem 0}@media only screen and (min-width:601px){.page-grid{display:grid;margin:0 auto;max-width:600px;width:100%}header{background-color:#3665f3;padding:0 8px}main{grid-column-end:2;grid-column-start:2;grid-row-end:1;grid-row-start:1;overflow-x:hidden;padding-left:8px}footer{grid-column-end:2;grid-column-start:2;grid-row-end:2;grid-row-start:2}.app-bar{margin:0 auto;max-width:600px;padding-left:8px;width:100%}.site-nav{grid-column-end:1;grid-column-start:1;grid-row-end:1;grid-row-start:1;height:100vh;overflow-y:scroll;padding-left:8px;padding-right:24px;position:-webkit-sticky;position:sticky;top:0}.site-nav h2{color:#767676;margin-bottom:12px;margin-top:24px;text-transform:uppercase}.site-nav h2:first-of-type{margin-top:32px}.site-nav ul{line-height:1.5em;list-style-type:none;margin:0;padding:0}.site-nav ul:last-child{padding-bottom:32px}.site-nav a{text-decoration:none}.site-nav a:visited{color:#3665f3}.demo-colors li::before{display:inline-block;width:10rem}}@media only screen and (min-width:961px){#about dl{-webkit-column-count:2;-moz-column-count:2;column-count:2}.app-bar{max-width:960px}.page-grid{grid-column-gap:16px;max-width:960px}}@media only screen and (min-width:1281px){.app-bar{max-width:1280px}.page-grid{grid-column-gap:32px;max-width:1280px}}.demo-color-b1::before{background-color:#c5e5fb}.demo-color-b3::before{background-color:#659eff}.demo-color-b4::before{background-color:#3665f3}.demo-color-b6::before{background-color:#2b0eaf}.demo-color-r1::before{background-color:#ffd1dd}.demo-color-r3::before{background-color:#ff6383}.demo-color-r4::before{background-color:#e62048}.demo-color-r6::before{background-color:#a00739}.demo-color-g1::before{background-color:#ccfdce}.demo-color-g3::before{background-color:#5ee471}.demo-color-g4::before{background-color:#28a443}.demo-color-g6::before{background-color:#05823f}.demo-color-m1::before{background-color:#fad8f0}.demo-color-m3::before{background-color:#ea5fbc}.demo-color-m4::before{background-color:#82187c}.demo-color-o1::before{background-color:#ffdec7}.demo-color-o3::before{background-color:#ff8559}.demo-color-o4::before{background-color:#ff6932}.demo-color-o6::before{background-color:#b03005}.demo-color-b2::before{background-color:#93c9ff}.demo-color-b5::before{background-color:#382aef}.demo-color-b7::before{background-color:#121258}.demo-color-r2::before{background-color:#ffa2b6}.demo-color-r5::before{background-color:#c4003a}.demo-color-r7::before{background-color:#680226}.demo-color-y1::before{background-color:#fcf2bd}.demo-color-y2::before{background-color:#f7e376}.demo-color-y3::before{background-color:#fbcd25}.demo-color-y4::before{background-color:#f7b100}.demo-color-y5::before{background-color:#e58c02}.demo-color-y6::before{background-color:#aa5404}.demo-color-y7::before{background-color:#592e13}.demo-color-g2::before{background-color:#9ef4a6}.demo-color-g5::before{background-color:#1bab49}.demo-color-g7::before{background-color:#07522c}.demo-color-o2::before{background-color:#feb786}.demo-color-o5::before{background-color:#db3c07}.demo-color-o6::before{background-color:#b03005}.demo-color-o7::before{background-color:#5c1b05}.demo-color-m2::before{background-color:#f5a0d9}.demo-color-m5::before{background-color:#a60d8a}.demo-color-m6::before{background-color:#82187c}.demo-color-m7::before{background-color:#500750}.demo-color-t1::before{background-color:#c2f2ef}.demo-color-t2::before{background-color:#71e3e2}.demo-color-t3::before{background-color:#1dcbca}.demo-color-t4::before{background-color:#02a2ac}.demo-color-t5::before{background-color:#01718f}.demo-color-t6::before{background-color:#0e4a6c}.demo-color-t7::before{background-color:#003147}.demo-color-l1::before{background-color:#f4fabe}.demo-color-l2::before{background-color:#e9f577}.demo-color-l3::before{background-color:#c9e43b}.demo-color-l4::before{background-color:#accf02}.demo-color-l5::before{background-color:#86b300}.demo-color-l6::before{background-color:#4b7d06}.demo-color-l7::before{background-color:#364f03}.carousel__list--default-demo li{border-radius:8px}.carousel__list--discrete-demo li{border-radius:8px}.carousel__list--slideshow-demo li{border-radius:8px}
 
 
 
diff --git a/src/less/breadcrumbs/base/breadcrumbs.less b/src/less/breadcrumbs/base/breadcrumbs.less
index a391f1476..8f60a4015 100644
--- a/src/less/breadcrumbs/base/breadcrumbs.less
+++ b/src/less/breadcrumbs/base/breadcrumbs.less
@@ -64,6 +64,13 @@ nav.breadcrumbs {
         }
     }
     // stylelint-enable no-descending-specificity
+
+    a:focus,
+    button:focus {
+        &:not(:focus-visible) {
+            outline: none;
+        }
+    }
 }
 
 @media (min-width: 601px) {
diff --git a/src/less/carousel/base/carousel.less b/src/less/carousel/base/carousel.less
index 17d7849f5..043bf306a 100644
--- a/src/less/carousel/base/carousel.less
+++ b/src/less/carousel/base/carousel.less
@@ -80,6 +80,10 @@ div.carousel {
     .carousel-paddle-mixin-base();
 }
 
+.carousel__playback:focus:not(:focus-visible) {
+    outline: none;
+}
+
 span.carousel,
 span.carousel__container {
     display: inline-block;
diff --git a/src/less/checkbox/base/checkbox.less b/src/less/checkbox/base/checkbox.less
index 8521a4a2c..2150f711d 100644
--- a/src/less/checkbox/base/checkbox.less
+++ b/src/less/checkbox/base/checkbox.less
@@ -74,10 +74,6 @@ input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.check
     display: none;
 }
 
-input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
-    outline: 1px dotted @checkbox-custom-outline-color;
-}
-
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
     opacity: @checkbox-disabled-opacity;
 
@@ -85,3 +81,13 @@ input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
         fill: @checkbox-disabled-color;
     }
 }
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
+    outline: @checkbox-custom-outline;
+    outline-offset: 2px;
+}
+
+input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon {
+    outline: none;
+}
diff --git a/src/less/details/base/details.less b/src/less/details/base/details.less
index ed888f1ab..04e86bc79 100644
--- a/src/less/details/base/details.less
+++ b/src/less/details/base/details.less
@@ -53,3 +53,8 @@ details.details[open] {
         content: none;
     }
 }
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+details.details summary:focus:not(:focus-visible) {
+    outline: none;
+}
diff --git a/src/less/drawer-dialog/base/drawer-dialog.less b/src/less/drawer-dialog/base/drawer-dialog.less
index a1eb2304a..55011ed8f 100644
--- a/src/less/drawer-dialog/base/drawer-dialog.less
+++ b/src/less/drawer-dialog/base/drawer-dialog.less
@@ -137,3 +137,7 @@ button.drawer-dialog__close {
         transform: translateX(0);
     }
 }
+
+.drawer-dialog__handle:focus:not(:focus-visible) {
+    outline: none;
+}
diff --git a/src/less/filter-button/base/filter-button.less b/src/less/filter-button/base/filter-button.less
index 47edde412..32b1deaa5 100644
--- a/src/less/filter-button/base/filter-button.less
+++ b/src/less/filter-button/base/filter-button.less
@@ -71,3 +71,15 @@ a.filter-link--selected:not([href]):hover,
 a.filter-link--selected[aria-disabled="true"]:hover {
     background-color: @filter-button-selected-background-color;
 }
+
+/* stylelint-disable no-descending-specificity */
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+button.filter-button:focus,
+a.filter-link:focus {
+    &:not(:focus-visible) {
+        outline: none;
+    }
+}
+
+/* stylelint-enable no-descending-specificity */
diff --git a/src/less/filter-menu-button/base/filter-menu-button.less b/src/less/filter-menu-button/base/filter-menu-button.less
index 9cd81417b..29c98eae9 100644
--- a/src/less/filter-menu-button/base/filter-menu-button.less
+++ b/src/less/filter-menu-button/base/filter-menu-button.less
@@ -264,6 +264,11 @@ button.filter-menu-button__footer {
     }
 }
 
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+button.filter-menu-button__button:focus:not(:focus-visible) {
+    outline: none;
+}
+
 [dir="rtl"] {
     .filter-menu-button__button-cell .icon--dropdown {
         margin-left: 0;
diff --git a/src/less/icon-button/base/icon-button.less b/src/less/icon-button/base/icon-button.less
index 82d5e0119..6e0891d88 100644
--- a/src/less/icon-button/base/icon-button.less
+++ b/src/less/icon-button/base/icon-button.less
@@ -39,6 +39,10 @@ a.icon-link {
     &:hover > svg {
         .customFillProperty(icon-button-icon-hover-foreground-color);
     }
+
+    &:not(:focus-visible) {
+        outline: none;
+    }
 }
 
 // visited link state
diff --git a/src/less/listbox-button/base/listbox-button.less b/src/less/listbox-button/base/listbox-button.less
index 536982922..698bcde2e 100644
--- a/src/less/listbox-button/base/listbox-button.less
+++ b/src/less/listbox-button/base/listbox-button.less
@@ -82,3 +82,8 @@ span.listbox-button__value {
 
     flex: 1 0 auto;
 }
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+.listbox-button__options:focus:not(:focus-visible) {
+    outline: none;
+}
diff --git a/src/less/listbox/base/listbox.less b/src/less/listbox/base/listbox.less
index 8b89e505f..4f81f8547 100644
--- a/src/less/listbox/base/listbox.less
+++ b/src/less/listbox/base/listbox.less
@@ -53,3 +53,8 @@ div.listbox__option[aria-selected="true"] svg.icon {
 div.listbox__option[role="option"]:active svg.icon {
     .customColorProperty(dropdown-item-active-status-color);
 }
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+.listbox__options:focus:not(:focus-visible) {
+    outline: none;
+}
diff --git a/src/less/menu-button/base/menu-button.less b/src/less/menu-button/base/menu-button.less
index 718682fb5..e0cdf9bc3 100644
--- a/src/less/menu-button/base/menu-button.less
+++ b/src/less/menu-button/base/menu-button.less
@@ -192,3 +192,8 @@ hr.menu-button__separator {
     border-width: 1px;
     margin: 0;
 }
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
+    outline: none;
+}
diff --git a/src/less/menu/base/menu.less b/src/less/menu/base/menu.less
index 69d463275..6710493d3 100644
--- a/src/less/menu/base/menu.less
+++ b/src/less/menu/base/menu.less
@@ -127,3 +127,8 @@ hr.menu__separator {
     border-style: solid;
     border-width: 1px;
 }
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
+    outline: none;
+}
diff --git a/src/less/mixins/button/base/button-mixins.less b/src/less/mixins/button/base/button-mixins.less
index 81231e2bf..c55995c24 100644
--- a/src/less/mixins/button/base/button-mixins.less
+++ b/src/less/mixins/button/base/button-mixins.less
@@ -16,6 +16,11 @@
 
         height: 40px;
     }
+
+    // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
 }
 
 .btn-icon-base() {
diff --git a/src/less/mixins/carousel/base/carousel-mixins.less b/src/less/mixins/carousel/base/carousel-mixins.less
index 2dd35ca0b..94aa4fb64 100644
--- a/src/less/mixins/carousel/base/carousel-mixins.less
+++ b/src/less/mixins/carousel/base/carousel-mixins.less
@@ -47,6 +47,11 @@
         .customColorProperty(carousel-paddle-foreground-color);
     }
 
+    // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
+
     // progressive enhancement for browsers with support
     // :focus-within and :hover cannot be combined as
     // IE/Edge will discard the entire rule
diff --git a/src/less/pagination/base/pagination.less b/src/less/pagination/base/pagination.less
index fb46ae558..f31aaf3ad 100644
--- a/src/less/pagination/base/pagination.less
+++ b/src/less/pagination/base/pagination.less
@@ -97,6 +97,14 @@ nav.pagination--fluid ol.pagination__items li {
     flex: 1 0 48px;
 }
 
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+a.pagination__item:focus,
+button.pagination__item:focus {
+    &:not(:focus-visible) {
+        outline: none;
+    }
+}
+
 @media (min-width: 601px) {
     nav.pagination {
         margin: 16px 0;
diff --git a/src/less/radio/base/radio.less b/src/less/radio/base/radio.less
index c81ef9514..050e44511 100644
--- a/src/less/radio/base/radio.less
+++ b/src/less/radio/base/radio.less
@@ -74,10 +74,6 @@ input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__uncheck
     display: none;
 }
 
-input.radio__control[type="radio"]:focus + span.radio__icon {
-    outline: 1px dotted @radio-custom-outline-color;
-}
-
 input.radio__control[type="radio"][disabled] + span.radio__icon {
     opacity: @radio-disabled-opacity;
 
@@ -85,3 +81,13 @@ input.radio__control[type="radio"][disabled] + span.radio__icon {
         fill: @radio-disabled-color;
     }
 }
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+input.radio__control[type="radio"]:focus + span.radio__icon {
+    outline: @radio-custom-outline;
+    outline-offset: 2px;
+}
+
+input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon {
+    outline: none;
+}
diff --git a/src/less/select/base/select.less b/src/less/select/base/select.less
index 0b86a9d40..b746e3454 100644
--- a/src/less/select/base/select.less
+++ b/src/less/select/base/select.less
@@ -64,6 +64,7 @@ span.select {
     .customBackgroundColorProperty(select-focus-background-color);
 
     outline: 0;
+    text-decoration: underline;
 }
 
 // custom IE pseudo selector for the arrow
@@ -95,6 +96,11 @@ span.select {
     border-width: 1px;
 }
 
+.select select[disabled] + svg {
+    color: @select-disabled-foregound-color;
+}
+
+/* stylelint-disable no-descending-specificity */
 [dir="rtl"] {
     .select > select {
         padding-left: 30px;
@@ -111,7 +117,4 @@ span.select {
         right: auto;
     }
 }
-
-.select select[disabled] + svg {
-    color: @select-disabled-foregound-color;
-}
+/* stylelint-enable no-descending-specificity */
diff --git a/src/less/switch/base/switch.less b/src/less/switch/base/switch.less
index a201e6d2a..68a87778c 100644
--- a/src/less/switch/base/switch.less
+++ b/src/less/switch/base/switch.less
@@ -56,14 +56,6 @@ span.switch__control {
     z-index: 1;
 }
 
-input.switch__control {
-    opacity: 0;
-
-    &:focus + span.switch__button {
-        outline: 1px dotted @switch-custom-outline-color;
-    }
-}
-
 input.switch__control[disabled] + span.switch__button {
     .customBackgroundColorProperty(switch-disabled-background-color);
 }
@@ -76,6 +68,18 @@ span.switch__control[aria-disabled="true"] + span.switch__button {
     .customBackgroundColorProperty(switch-disabled-background-color);
 }
 
+input.switch__control {
+    opacity: 0;
+
+    &:focus + span.switch__button {
+        outline: 1px auto @switch-custom-outline-color;
+    }
+
+    &:focus:not(:focus-visible) + span.switch__button {
+        outline: none;
+    }
+}
+
 span.switch__control[aria-checked="true"] + span.switch__button::after {
     left: 19px;
 }
@@ -85,6 +89,11 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"] + span.swi
     .customBackgroundColorProperty(switch-checked-background-color);
 }
 
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+span.switch__control:focus:not(:focus-visible) {
+    outline: 0;
+}
+
 @media screen and (-ms-high-contrast: active) {
     input.switch__control {
         opacity: 1;
diff --git a/src/less/tabs/base/tabs.less b/src/less/tabs/base/tabs.less
index 614e8b57c..fd1912fa2 100644
--- a/src/less/tabs/base/tabs.less
+++ b/src/less/tabs/base/tabs.less
@@ -82,3 +82,11 @@ li.fake-tabs__item--current > a[aria-current="page"] {
     position: relative;
     top: -1px;
 }
+
+// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+div.tabs__item[role="tab"]:focus,
+li.fake-tabs__item a:focus {
+    &:not(:focus-visible) {
+        outline: none;
+    }
+}
diff --git a/src/less/toast-dialog/base/toast-dialog.less b/src/less/toast-dialog/base/toast-dialog.less
index 0f80e426c..0ffdf80a4 100644
--- a/src/less/toast-dialog/base/toast-dialog.less
+++ b/src/less/toast-dialog/base/toast-dialog.less
@@ -3,8 +3,7 @@
 .toast-dialog-outline() {
     .customOutlineColorProperty(toast-dialog-foreground-color);
 
-    outline-offset: -8px;
-    outline-style: dotted;
+    outline-style: auto;
     outline-width: 1px;
 }
 
@@ -84,6 +83,8 @@ button.toast-dialog__close {
 
     &:focus {
         .toast-dialog-outline();
+
+        outline-offset: -8px;
     }
 }
 
diff --git a/src/less/variables/ds4/checkbox-variables.less b/src/less/variables/ds4/checkbox-variables.less
index 3d00b2bcc..e0e0be220 100644
--- a/src/less/variables/ds4/checkbox-variables.less
+++ b/src/less/variables/ds4/checkbox-variables.less
@@ -6,4 +6,4 @@
 @checkbox-unchecked-color: @color-text-default;
 @checkbox-disabled-opacity: 1;
 @checkbox-disabled-color: @color-action-disabled;
-@checkbox-custom-outline-color: @color-text-secondary;
+@checkbox-custom-outline: 1px auto @color-text-secondary;
diff --git a/src/less/variables/ds4/radio-variables.less b/src/less/variables/ds4/radio-variables.less
index 384357264..e048eb60b 100644
--- a/src/less/variables/ds4/radio-variables.less
+++ b/src/less/variables/ds4/radio-variables.less
@@ -6,4 +6,4 @@
 @radio-unchecked-color: @color-text-default;
 @radio-disabled-opacity: 1;
 @radio-disabled-color: @color-disabled;
-@radio-custom-outline-color: @color-text-secondary;
+@radio-custom-outline: 1px auto @color-text-secondary;
diff --git a/src/less/variables/ds6/checkbox-variables.less b/src/less/variables/ds6/checkbox-variables.less
index 3d00b2bcc..e0e0be220 100644
--- a/src/less/variables/ds6/checkbox-variables.less
+++ b/src/less/variables/ds6/checkbox-variables.less
@@ -6,4 +6,4 @@
 @checkbox-unchecked-color: @color-text-default;
 @checkbox-disabled-opacity: 1;
 @checkbox-disabled-color: @color-action-disabled;
-@checkbox-custom-outline-color: @color-text-secondary;
+@checkbox-custom-outline: 1px auto @color-text-secondary;
diff --git a/src/less/variables/ds6/radio-variables.less b/src/less/variables/ds6/radio-variables.less
index 384357264..e048eb60b 100644
--- a/src/less/variables/ds6/radio-variables.less
+++ b/src/less/variables/ds6/radio-variables.less
@@ -6,4 +6,4 @@
 @radio-unchecked-color: @color-text-default;
 @radio-disabled-opacity: 1;
 @radio-disabled-color: @color-disabled;
-@radio-custom-outline-color: @color-text-secondary;
+@radio-custom-outline: 1px auto @color-text-secondary;