@gitlab/ui 113.3.2 → 113.5.0

package/src/vendor/bootstrap/scss/mixins/_box-shadow.scss

@@ -1,19 +1,20 @@
+@use "sass:list";
 @mixin box-shadow($shadow...) {
   @if $enable-shadows {
     $result: ();
 
-    @if (length($shadow) == 1) {
+    @if (list.length($shadow) == 1) {
       // We can pass `@include box-shadow(none);`
       $result: $shadow;
     } @else {
       // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
-      @for $i from 1 through length($shadow) {
-        @if nth($shadow, $i) != "none" {
-          $result: append($result, nth($shadow, $i), "comma");
+      @for $i from 1 through list.length($shadow) {
+        @if list.nth($shadow, $i) != "none" {
+          $result: list.append($result, list.nth($shadow, $i), "comma");
         }
       }
     }
-    @if (length($result) > 0) {
+    @if (list.length($result) > 0) {
       box-shadow: $result;
     }
   }

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

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:map";
 // Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -14,9 +16,9 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $n: list.index($breakpoint-names, $name);
+  @return if($n != null and $n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -24,7 +26,7 @@
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 

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

@@ -1,9 +1,10 @@
+@use "sass:color";
 // Button variants
 //
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
+@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%)) {
   color: color-yiq($background);
   @include gradient-bg($background);
   border-color: $border;
@@ -21,10 +22,10 @@
     @include gradient-bg($hover-background);
     border-color: $hover-border;
     @if $enable-shadows {
-      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5));
     } @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+      box-shadow: 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5);
     }
   }
 
@@ -52,10 +53,10 @@
 
     &:focus {
       @if $enable-shadows and $btn-active-box-shadow != none {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5));
       } @else {
         // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+        box-shadow: 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5);
       }
     }
   }

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

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
@@ -160,8 +161,8 @@
 
       &:checked {
         ~ .custom-control-label::before {
-          border-color: lighten($color, 10%);
-          @include gradient-bg(lighten($color, 10%));
+          border-color: color.adjust($color, $lightness: 10%);
+          @include gradient-bg(color.adjust($color, $lightness: 10%));
         }
       }
 

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

@@ -1,8 +1,9 @@
+@use "sass:color";
 // Gradients
 
 @mixin gradient-bg($color) {
   @if $enable-gradients {
-    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+    background: $color linear-gradient(180deg, color.mix($body-bg, $color, 15%), $color) repeat-x;
   } @else {
     background-color: $color;
   }

package/src/vendor/bootstrap/scss/mixins/_grid-framework.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Framework grid generation
 //
 // Used only by Bootstrap to generate the correct number of grid classes given
@@ -12,7 +13,7 @@
     padding-left: $gutter * .5;
   }
 
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @if $columns > 0 {

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

@@ -1,3 +1,4 @@
+@use "sass:math";
 /// Grid system
 //
 // Generate semantic grid columns with these mixins.
@@ -38,11 +39,11 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage(divide($size, $columns));
+  flex: 0 0 math.percentage(divide($size, $columns));
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage(divide($size, $columns));
+  max-width: math.percentage(divide($size, $columns));
 }
 
 @mixin make-col-auto() {
@@ -53,7 +54,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: divide($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
+  margin-left: if($num == 0, 0, math.percentage($num));
 }
 
 // Row columns

package/src/vendor/bootstrap/scss/mixins/_list-group.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // List Groups
 
 @mixin list-group-item-variant($state, $background, $color) {
@@ -8,7 +9,7 @@
     &.list-group-item-action {
       @include hover-focus() {
         color: $color;
-        background-color: darken($background, 5%);
+        background-color: color.adjust($background, $lightness: -5%);
       }
 
       &.active {

package/src/vendor/bootstrap/scss/mixins/_table-row.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Tables
 
 @mixin table-row-variant($state, $background, $border: null) {
@@ -23,7 +24,7 @@
   // Hover states for `.table-hover`
   // Note: this is not available for cells or rows within `thead` or `tfoot`.
   .table-hover {
-    $hover-background: darken($background, 5%);
+    $hover-background: color.adjust($background, $lightness: -5%);
 
     .table-#{$state} {
       @include hover() {

package/src/vendor/bootstrap/scss/mixins/_text-emphasis.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // stylelint-disable declaration-no-important
 
 // Typography
@@ -9,7 +10,7 @@
   @if $emphasized-link-hover-darken-percentage != 0 {
     a#{$parent} {
       @include hover-focus() {
-        color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+        color: color.adjust($color, $lightness: -($emphasized-link-hover-darken-percentage)) !important;
       }
     }
   }

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

@@ -1,10 +1,11 @@
+@use "sass:list";
 // stylelint-disable property-disallowed-list
 @mixin transition($transition...) {
-  @if length($transition) == 0 {
+  @if list.length($transition) == 0 {
     $transition: $transition-base;
   }
 
-  @if length($transition) > 1 {
+  @if list.length($transition) > 1 {
     @each $value in $transition {
       @if $value == null or $value == none {
         @warn "The keyword 'none' or 'null' must be used as a single argument.";
@@ -13,11 +14,11 @@
   }
 
   @if $enable-transitions {
-    @if nth($transition, 1) != null {
+    @if list.nth($transition, 1) != null {
       transition: $transition;
     }
 
-    @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
+    @if $enable-prefers-reduced-motion-media-query and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
       @media (prefers-reduced-motion: reduce) {
         transition: none;
       }

package/src/vendor/bootstrap/scss/utilities/_display.scss

@@ -1,10 +1,11 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 //
 // Utilities for common `display` values
 //
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/src/vendor/bootstrap/scss/utilities/_embed.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:math";
 // Credit: Nicolas Gallagher and SUIT CSS.
 
 .embed-responsive {
@@ -28,12 +30,12 @@
 }
 
 @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
-  $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
-  $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
+  $embed-responsive-aspect-ratio-x: list.nth($embed-responsive-aspect-ratio, 1);
+  $embed-responsive-aspect-ratio-y: list.nth($embed-responsive-aspect-ratio, 2);
 
   .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
     &::before {
-      padding-top: percentage(divide($embed-responsive-aspect-ratio-y, $embed-responsive-aspect-ratio-x));
+      padding-top: math.percentage(divide($embed-responsive-aspect-ratio-y, $embed-responsive-aspect-ratio-x));
     }
   }
 }

package/src/vendor/bootstrap/scss/utilities/_flex.scss

@@ -1,10 +1,11 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 // Flex variation
 //
 // Custom styles for additional flex alignment options.
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/src/vendor/bootstrap/scss/utilities/_float.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/src/vendor/bootstrap/scss/utilities/_spacing.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 // Margin and Padding
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/src/vendor/bootstrap/scss/utilities/_text.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 //
@@ -15,7 +16,7 @@
 
 // Responsive alignment
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/src/vendor/bootstrap/scss/vendor/_rfs.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
 // stylelint-disable property-blacklist, scss/dollar-variable-default
 
 // SCSS RFS mixin
@@ -30,7 +33,7 @@ $rfs-two-dimensional: false !default;
 // Factor of decrease
 $rfs-factor: 10 !default;
 
-@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+@if meta.type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
   @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
 }
 
@@ -47,12 +50,12 @@ $rfs-safari-iframe-resize-bug-fix: false !default;
 $enable-responsive-font-sizes: true !default;
 
 // Cache $rfs-base-font-size unit
-$rfs-base-font-size-unit: unit($rfs-base-font-size);
+$rfs-base-font-size-unit: math.unit($rfs-base-font-size);
 
 @function divide($dividend, $divisor, $precision: 10) {
   $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
   @if $dividend == 0 {
     @return 0;
   }
@@ -77,16 +80,16 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
     }
   }
   $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
   $unit-map: (
     "px": 1px,
     "rem": 1rem,
     "em": 1em,
     "%": 1%
   );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
+  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+    $result: $result * map.get($unit-map, $dividend-unit);
   }
   @return $result;
 }
@@ -100,7 +103,7 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
-$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
 
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == "px" {
@@ -155,7 +158,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 // Responsive font size mixin
 @mixin rfs($fs, $important: false) {
   // Cache $fs unit
-  $fs-unit: if(type-of($fs) == "number", unit($fs), false);
+  $fs-unit: if(meta.type-of($fs) == "number", math.unit($fs), false);
 
   // Add !important suffix if needed
   $rfs-suffix: if($important, " !important", "");

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // --- BootstrapVue custom SCSS variables ---
 //
 // Users can override these variables in their custom SCSS
@@ -85,7 +87,7 @@ $b-toaster-offset-right: $b-toaster-offset-top !default;
 // Value from 0 to 1, or 0% to 100%
 // Bootstrap default is 0.85 (extracted from the `$toast-background-color` value)
 // Bootstrap does not have this as a variable, so we add it in.
-$b-toast-background-opacity: alpha($toast-background-color) !default;
+$b-toast-background-opacity: color.alpha($toast-background-color) !default;
 
 // Toast variant levels wrt theme color value
 $b-toast-bg-level: $alert-bg-level !default;

package/src/vendor/bootstrap-vue/src/components/form-input/_form-input.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Temporary fix for cssnano bug: https://github.com/cssnano/cssnano/issues/712
 // By moving center to last value in `background-position` property
 // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2599
@@ -150,13 +152,13 @@ input[type="color"].form-control:disabled {
       // Pseudo-elements must be split across multiple rulesets to have an affect
       &:focus {
         &::-webkit-slider-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
         }
         &::-moz-range-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
         }
         &::-ms-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
         }
       }
 
@@ -165,7 +167,7 @@ input[type="color"].form-control:disabled {
         background-image: none;
 
         &:active {
-          background-color: lighten($color, 35%);
+          background-color: color.adjust($color, $lightness: 35%);
           background-image: none;
         }
       }
@@ -179,7 +181,7 @@ input[type="color"].form-control:disabled {
         background-image: none;
 
         &:active {
-          background-color: lighten($color, 35%);
+          background-color: color.adjust($color, $lightness: 35%);
           background-image: none;
         }
       }
@@ -198,7 +200,7 @@ input[type="color"].form-control:disabled {
         background-image: none;
 
         &:active {
-          background-color: lighten($color, 35%);
+          background-color: color.adjust($color, $lightness: 35%);
           background-image: none;
         }
       }

package/src/vendor/bootstrap-vue/src/components/table/_table.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use 'sass:string';
+
 // --- General styling ---
 
 .table.b-table {
@@ -259,7 +262,7 @@ $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
 // But if we want to preserve backwards compatibility with v4.3, we leave this in
 // See https://codepen.io/kevinweber/pen/dXWoRw
 @function bv-escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if string.index($string, "data:image/svg+xml") {
     @each $char, $encoded in $bv-escaped-characters {
       $string: str-replace($string, $char, $encoded);
     }
@@ -380,7 +383,7 @@ $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
 @if $bv-enable-table-stacked {
   .table.b-table {
     &.b-table-stacked {
-      @each $breakpoint in map-keys($grid-breakpoints) {
+      @each $breakpoint in map.keys($grid-breakpoints) {
         $next: breakpoint-next($breakpoint, $grid-breakpoints);
         $infix: breakpoint-infix($next, $grid-breakpoints);
 

package/src/vendor/bootstrap-vue/src/components/toast/_toast.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // --- <b-toast> custom SCSS ---
 
 // Toast wrapper element class (needed for list transition in toasters)
@@ -45,7 +47,7 @@
 @mixin b-toast-variant($background, $border, $color) {
   // Based on alert-variant mixin
   .toast {
-    background-color: rgba(lighten($background, 5%), $b-toast-background-opacity);
+    background-color: rgba(color.adjust($background, $lightness: 5%), $b-toast-background-opacity);
     border-color: rgba($border, $b-toast-background-opacity);
     color: $color;
 
@@ -62,7 +64,7 @@
 
   &.b-toast-solid {
     .toast {
-      background-color: rgba(lighten($background, 5%), 1);
+      background-color: rgba(color.adjust($background, $lightness: 5%), 1);
     }
   }
 }

package/translations.js

@@ -10,6 +10,9 @@ export default {
   'GlChartLegend.current': 'Current',
   'GlChartLegend.max': 'Max',
   'GlChartLegend.min': 'Min',
+  'GlCollapsibleListbox.loadingAnnouncementText.loadingItems': 'Loading items',
+  'GlCollapsibleListbox.loadingAnnouncementText.loadingMoreItems': 'Loading more items',
+  'GlCollapsibleListbox.loadingAnnouncementText.searching': 'Searching',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
   'GlDatepicker.monthLabel': 'Month',
   'GlDatepicker.yearLabel': 'Year',