npm - @gitlab/ui - Versions diffs - 134.8.0 → 135.0.0 - Mend

@gitlab/ui 134.8.0 → 135.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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': {