@gitlab/ui 134.8.0 → 134.9.0

package/src/tokens/contextual/toggle.tokens.json

@@ -15,7 +15,7 @@
               }
             },
             "hover": {
-              "$value": "{control.border.color.hover}",
+              "$value": "{toggle.switch.track.color.unchecked.default}",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
               "$extensions": {
@@ -25,7 +25,7 @@
               }
             },
             "focus": {
-              "$value": "{control.border.color.focus}",
+              "$value": "{toggle.switch.track.color.unchecked.hover}",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
               "$extensions": {
@@ -35,7 +35,7 @@
               }
             },
             "active": {
-              "$value": "{control.border.color.focus}",
+              "$value": "{toggle.switch.track.color.unchecked.focus}",
               "$type": "color",
               "$description": "Used for the track color of an unchecked toggle switch in the active state.",
               "$extensions": {

package/src/utils/string_utils.js

@@ -26,7 +26,7 @@ export const splitAfterSymbols = (symbols, string) => {
     return [string];
   }
 
-  for (let i = 0; i < string.length; ) {
+  for (let i = 0; i < string.length;) {
     let symbolFound = false;
 
     for (let j = 0; j < symbols.length; j += 1) {

package/src/vendor/bootstrap/scss/_button-group.scss

@@ -16,7 +16,7 @@
     @include hover() {
       z-index: 1;
     }
-    &:focus,
+    &:focus-visible,
     &:active,
     &.active {
       z-index: 1;

package/src/vendor/bootstrap/scss/_buttons.scss

@@ -24,7 +24,7 @@
     text-decoration: none;
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     outline: 0;
     box-shadow: $btn-focus-box-shadow;
@@ -44,7 +44,7 @@
     &.active {
       @include box-shadow($btn-active-box-shadow);
 
-      &:focus {
+      &:focus-visible {
         @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
       }
     }
@@ -90,7 +90,7 @@ fieldset:disabled a.btn {
     text-decoration: $link-hover-decoration;
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     text-decoration: $link-hover-decoration;
   }

package/src/vendor/bootstrap/scss/_custom-forms.scss

@@ -36,7 +36,7 @@
     @include box-shadow($custom-control-indicator-checked-box-shadow);
   }
 
-  &:focus ~ .custom-control-label::before {
+  &:focus-visible ~ .custom-control-label::before {
     // the mixin is not used here to make sure there is feedback
     @if $enable-shadows {
       box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
@@ -45,7 +45,7 @@
     }
   }
 
-  &:focus:not(:checked) ~ .custom-control-label::before {
+  &:focus-visible:not(:checked) ~ .custom-control-label::before {
     border-color: $custom-control-indicator-focus-border-color;
   }
 
@@ -235,7 +235,7 @@
   @include box-shadow($custom-select-box-shadow);
   appearance: none;
 
-  &:focus {
+  &:focus-visible {
     border-color: $custom-select-focus-border-color;
     outline: 0;
     @if $enable-shadows {
@@ -318,7 +318,7 @@
   overflow: hidden;
   opacity: 0;
 
-  &:focus ~ .custom-file-label {
+  &:focus-visible ~ .custom-file-label {
     border-color: $custom-file-focus-border-color;
     box-shadow: $custom-file-focus-box-shadow;
   }
@@ -389,7 +389,7 @@
   background-color: transparent;
   appearance: none;
 
-  &:focus {
+  &:focus-visible {
     outline: 0;
 
     // Pseudo-elements must be split across multiple rulesets to have an effect.

package/src/vendor/bootstrap/scss/_forms.scss

@@ -31,7 +31,7 @@
     border: 0;
   }
 
-  // Customize the `:focus` state to imitate native WebKit styles.
+  // Customize the `:focus-visible` state to imitate native WebKit styles.
   @include form-control-focus($ignore-warning: true);
 
   // Placeholder
@@ -70,7 +70,7 @@ select.form-control {
     text-shadow: 0 0 0 $input-color;
   }
 
-  &:focus::-ms-value {
+  &:focus-visible::-ms-value {
     // Suppress the nested default white text on blue background highlight given to
     // the selected option text when the (still closed) <select> receives focus
     // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to

package/src/vendor/bootstrap/scss/_input-group.scss

@@ -29,14 +29,14 @@
   }
 
   // Bring the "active" form control to the top of surrounding elements
-  > .form-control:focus,
-  > .custom-select:focus,
-  > .custom-file .custom-file-input:focus ~ .custom-file-label {
+  > .form-control:focus-visible,
+  > .custom-select:focus-visible,
+  > .custom-file .custom-file-input:focus-visible ~ .custom-file-label {
     z-index: 3;
   }
 
   // Bring the custom file input above the label
-  > .custom-file .custom-file-input:focus {
+  > .custom-file .custom-file-input:focus-visible {
     z-index: 4;
   }
 
@@ -93,7 +93,7 @@
     position: relative;
     z-index: 2;
 
-    &:focus {
+    &:focus-visible {
       z-index: 3;
     }
   }

package/src/vendor/bootstrap/scss/_pagination.scss

@@ -23,7 +23,7 @@
     border-color: $pagination-hover-border-color;
   }
 
-  &:focus {
+  &:focus-visible {
     z-index: 3;
     outline: $pagination-focus-outline;
     box-shadow: $pagination-focus-box-shadow;

package/src/vendor/bootstrap/scss/mixins/_badge.scss

@@ -9,7 +9,7 @@
       background-color: color.adjust($bg, $lightness: -10%);
     }
 
-    &:focus,
+    &:focus-visible,
     &.focus {
       outline: 0;
       box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);

package/src/vendor/bootstrap/scss/mixins/_buttons.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 // Button variants
 //
-// Easily pump out default styles, as well as :hover, :focus, :active,
+// Easily pump out default styles, as well as :hover, :focus-visible, :active,
 // and disabled options for all buttons
 
 @mixin button-variant($background, $border, $hover-background: color.adjust($background, $lightness: -7.5%), $hover-border: color.adjust($border, $lightness: -10%), $active-background: color.adjust($background, $lightness: -10%), $active-border: color.adjust($border, $lightness: -12.5%)) {
@@ -16,7 +16,7 @@
     border-color: $hover-border;
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
@@ -51,7 +51,7 @@
     }
     border-color: $active-border;
 
-    &:focus {
+    &:focus-visible {
       @if $enable-shadows and $btn-active-box-shadow != none {
         @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5));
       } @else {
@@ -72,7 +72,7 @@
     border-color: $active-border;
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
@@ -90,7 +90,7 @@
     background-color: $active-background;
     border-color: $active-border;
 
-    &:focus {
+    &:focus-visible {
       @if $enable-shadows and $btn-active-box-shadow != none {
         @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
       } @else {

package/src/vendor/bootstrap/scss/mixins/_forms.scss

@@ -12,7 +12,7 @@
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
 @mixin form-control-focus($ignore-warning: false) {
-  &:focus {
+  &:focus-visible {
     color: $input-focus-color;
     background-color: $input-focus-bg;
     border-color: $input-focus-border-color;
@@ -93,7 +93,7 @@
         background-size: $input-height-inner-half $input-height-inner-half;
       }
 
-      &:focus {
+      &:focus-visible {
         border-color: $color;
         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
       }
@@ -129,7 +129,7 @@
         background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
       }
 
-      &:focus {
+      &:focus-visible {
         border-color: $color;
         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
       }
@@ -166,7 +166,7 @@
         }
       }
 
-      &:focus {
+      &:focus-visible {
         ~ .custom-control-label::before {
           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
         }
@@ -185,7 +185,7 @@
         border-color: $color;
       }
 
-      &:focus {
+      &:focus-visible {
         ~ .custom-file-label {
           border-color: $color;
           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);

package/src/vendor/bootstrap/scss/mixins/_hover.scss

@@ -15,7 +15,7 @@
 
 @mixin hover-focus() {
   &:hover,
-  &:focus {
+  &:focus-visible {
     @content;
   }
 }
@@ -23,14 +23,14 @@
 @mixin plain-hover-focus() {
   &,
   &:hover,
-  &:focus {
+  &:focus-visible {
     @content;
   }
 }
 
 @mixin hover-focus-active() {
   &:hover,
-  &:focus,
+  &:focus-visible,
   &:active {
     @content;
   }

package/src/vendor/bootstrap/scss/mixins/_screen-reader.scss

@@ -23,7 +23,7 @@
 
 @mixin sr-only-focusable() {
   &:active,
-  &:focus {
+  &:focus-visible {
     position: static;
     width: auto;
     height: auto;

package/src/vendor/bootstrap-vue/src/_utilities.scss

@@ -7,7 +7,7 @@ $bv-utility-classes-defined: false !default;
   $bv-utility-classes-defined: true;
 
   // No focus outline helper (use sparingly)
-  .bv-no-focus-ring:focus {
+  .bv-no-focus-ring:focus-visible {
     outline: none;
   }
 }

package/src/vendor/bootstrap-vue/src/components/dropdown/_dropdown-form.scss

@@ -13,9 +13,9 @@ $bv-dropdown-form-defined: false !default;
     clear: both;
     font-weight: $font-weight-normal;
 
-    &:focus {
+    &:focus-visible {
       // From https://github.com/twbs/bootstrap/blob/master/scss/_reboot.scss
-      // mimicking button:focus styling.
+      // mimicking button:focus-visible styling.
       // We add important here as anything with tabindex `-1` and focused will not
       // have a focus ring due to reboot.scss and its `!important` override.
       // Needed for keyboard navigation high-lighting

package/src/vendor/bootstrap-vue/src/components/dropdown/_dropdown.scss

@@ -28,7 +28,7 @@ $bv-dropdown-defined: false !default;
     // Hide the focus ring introduced by Bootstratp v4.4 reboot
     // on items with tabindex="-1", as we know how users feel
     // about blue rings where they don't expect them.
-    .dropdown-menu:focus {
+    .dropdown-menu:focus-visible {
       outline: none;
     }
 

package/tailwind.defaults.js

@@ -33,7 +33,7 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
         'background-color': 'var(--gl-action-neutral-background-color-hover)',
         'border-color': 'var(--gl-action-neutral-border-color-hover)',
       },
-      '&:focus': {
+      '&:focus-visible': {
         color: 'var(--gl-action-neutral-foreground-color-focus)',
         'background-color': 'var(--gl-action-neutral-background-color-focus)',
         'border-color': 'var(--gl-action-neutral-border-color-focus)',
@@ -53,7 +53,7 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
         'background-color': 'var(--gl-action-confirm-background-color-hover)',
         'border-color': 'var(--gl-action-confirm-border-color-hover)',
       },
-      '&:focus': {
+      '&:focus-visible': {
         color: 'var(--gl-action-confirm-foreground-color-focus)',
         'background-color': 'var(--gl-action-confirm-background-color-focus)',
         'border-color': 'var(--gl-action-confirm-border-color-focus)',
@@ -73,7 +73,7 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
         'background-color': 'var(--gl-action-danger-background-color-hover)',
         'border-color': 'var(--gl-action-danger-border-color-hover)',
       },
-      '&:focus': {
+      '&:focus-visible': {
         color: 'var(--gl-action-danger-foreground-color-focus)',
         'background-color': 'var(--gl-action-danger-background-color-focus)',
         'border-color': 'var(--gl-action-danger-border-color-focus)',
@@ -89,7 +89,7 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
       '&:hover': {
         'background-color': 'var(--gl-action-neutral-background-color-hover)',
       },
-      '&:focus': {
+      '&:focus-visible': {
         'background-color': 'var(--gl-action-neutral-background-color-focus)',
       },
       '&:active': {
@@ -154,7 +154,7 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
       '&:hover': {
         'border-color': 'var(--gl-control-border-color-hover)',
       },
-      '&:focus': {
+      '&:focus-visible': {
         'border-color': 'var(--gl-control-border-color-focus)',
       },
       '&:disabled': {