@gitlab/ui 128.13.2 → 128.14.0

package/src/components/base/button_group/button_group.scss

@@ -10,24 +10,24 @@ $gl-button-group-border-z-index: $gl-button-group-focus-z-index + 1;
   > .gl-button:not(:first-child),
   > .btn-group:not(:first-child) > .gl-button,
   > .gl-new-dropdown:not(:first-child) > .gl-button {
-    @apply gl-border-l-0 gl-rounded-l-none;
+    @apply gl-rounded-l-none gl-border-l-0;
   }
 
   > .gl-button:not(:last-child):not(.dropdown-toggle),
   > .btn-group:not(:last-child) > .gl-button,
   > .gl-new-dropdown:not(:last-child) > .gl-button {
-    @apply gl-border-r-0 gl-rounded-r-none;
+    @apply gl-rounded-r-none gl-border-r-0;
   }
 
   // Pseudo element to mock border between buttons
   > .gl-button:not(:first-child),
   > .btn-group:not(:first-child) > .gl-button,
   > .gl-new-dropdown:not(:first-child) > .gl-button {
-    @apply gl-relative gl-ml-[1px] gl-isolate;
+    @apply gl-relative gl-isolate gl-ml-[1px];
 
     &::before {
-      content: '';
-      @apply gl-absolute gl-block gl-top-[-1px] gl-bottom-[-1px] gl-left-[-1px] gl-w-[1px];
+      content: "";
+      @apply gl-absolute gl-bottom-[-1px] gl-left-[-1px] gl-top-[-1px] gl-block gl-w-[1px];
       z-index: $gl-button-group-border-z-index;
     }
   }
@@ -87,13 +87,13 @@ $gl-button-group-border-z-index: $gl-button-group-focus-z-index + 1;
   > .gl-button:not(:first-child),
   > .btn-group:not(:first-child) > .gl-button,
   > .gl-new-dropdown:not(:first-child) > .gl-button {
-    @apply gl-border-t-0 gl-rounded-t-none;
+    @apply gl-rounded-t-none gl-border-t-0;
   }
 
   > .gl-button:not(:last-child):not(.dropdown-toggle),
   > .btn-group:not(:last-child) > .gl-button,
   > .gl-new-dropdown:not(:last-child) > .gl-button {
-    @apply gl-border-b-0 gl-rounded-b-none;
+    @apply gl-rounded-b-none gl-border-b-0;
   }
 
   // Pseudo element to mock border between buttons
@@ -103,8 +103,8 @@ $gl-button-group-border-z-index: $gl-button-group-focus-z-index + 1;
     @apply gl-relative gl-mt-[1px];
 
     &::before {
-      content: '';
-      @apply gl-absolute gl-block gl-left-[-1px] gl-right-[-1px] gl-top-[-1px] gl-h-[1px];
+      content: "";
+      @apply gl-absolute gl-left-[-1px] gl-right-[-1px] gl-top-[-1px] gl-block gl-h-[1px];
       z-index: $gl-button-group-border-z-index;
     }
   }

package/src/components/base/card/card.scss

@@ -1,47 +1,56 @@
 .gl-card {
-  @apply gl-bg-subtle;
+  @apply gl-bg-strong;
+  @apply gl-border-1;
   @apply gl-border-solid;
+  @apply gl-border-transparent;
+  @apply contrast-more:gl-border-strong;
   @apply gl-flex;
   @apply gl-flex-col;
   @apply gl-break-words;
   @apply gl-relative;
   @apply gl-text-base;
+  @apply gl-p-2;
   border-radius: var(--gl-card-border-radius);
 }
 
-.gl-card,
 .gl-card-header,
-.gl-card-footer {
-  @apply gl-border-1;
-  @apply gl-border-section;
-}
-
-.gl-card-header,
-.gl-card-body,
-.gl-card-footer {
-  @apply gl-px-5;
-  @apply gl-py-4;
+.gl-card-body {
+  @apply gl-text-default;
 }
 
 .gl-card-header {
-  @apply gl-border-b-solid;
+  @apply gl-px-3;
+  @apply gl-pt-2;
+  @apply gl-pb-3;
+  @apply gl-my-1;
   border-top-left-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
   border-top-right-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
-  @apply gl-text-heading;
-}
 
-.gl-card-footer {
-  @apply gl-border-t-solid;
-  border-bottom-left-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
-  border-bottom-right-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply gl-text-base;
+    @apply gl-text-heading;
+    @apply gl-m-0;
+  }
 }
 
-.gl-card-header,
-.gl-card-footer {
-  @apply gl-bg-section;
+.gl-card-body {
+  @apply gl-grow;
+  @apply gl-p-3;
+  @apply gl-bg-default;
+  @apply contrast-more:gl-border;
+  @apply forced-colors:gl-border;
+  border-radius: calc(var(--gl-card-border-radius) - $gl-spacing-scale-2);
 }
 
-.gl-card-body,
 .gl-card-footer {
-  @apply gl-text-default;
+  @apply gl-px-3;
+  @apply gl-pt-3;
+  @apply gl-pb-2;
+  border-bottom-left-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
+  border-bottom-right-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
+  @apply gl-text-subtle;
 }

package/src/components/base/datepicker/datepicker.scss

@@ -17,7 +17,7 @@ $pd-day-selected-shadow: var(--gl-control-background-color-selected-default);
 $pd-day-disabled-color: var(--gl-text-color-disabled);
 $pd-week-color: var(--gl-text-color-subtle);
 
-@import 'pikaday/scss/pikaday';
+@import "pikaday/scss/pikaday";
 
 .gl-datepicker-actions {
   @apply gl-text-sm;
@@ -87,7 +87,7 @@ $pd-week-color: var(--gl-text-color-subtle);
         This is necessary because the parent element (which already has a border-radius)
         requires the ::before element to extend beyond its edges to ensure proper coverage. */
         @apply gl-rounded-lg;
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: 0;
@@ -132,21 +132,21 @@ $pd-week-color: var(--gl-text-color-subtle);
 
   .pika-next {
     &::before {
-      mask-image: url('#{$gl-icon-chevron-right}');
+      mask-image: url("#{$gl-icon-chevron-right}");
     }
 
     @media (forced-colors: active) {
-      background-image: url('#{$gl-icon-chevron-right}');
+      background-image: url("#{$gl-icon-chevron-right}");
     }
   }
 
   .pika-prev {
     &::before {
-      mask-image: url('#{$gl-icon-chevron-left}');
+      mask-image: url("#{$gl-icon-chevron-left}");
     }
 
     @media (forced-colors: active) {
-      background-image: url('#{$gl-icon-chevron-left}');
+      background-image: url("#{$gl-icon-chevron-left}");
     }
   }
 

package/src/components/base/drawer/drawer.scss

@@ -75,7 +75,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
     background: $gl-drawer-scrim-gradient;
     top: -$gl-border-size-1;
     @apply -gl-translate-y-full;
-    content: '';
+    content: "";
     left: 0;
     position: absolute;
     @apply gl-pointer-events-none;
@@ -127,7 +127,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 .gl-drawer-body-scrim {
   &::after {
     background: $gl-drawer-scrim-gradient;
-    content: '';
+    content: "";
     bottom: 0;
     @apply gl-pointer-events-none;
     @apply gl-w-full;

package/src/components/base/dropdown/dropdown.scss

@@ -38,7 +38,7 @@
   }
 
   .gl-dropdown-header-top {
-    @apply gl-border-1 gl-border-b-solid gl-border-dropdown-divider;
+    @apply gl-border-1 gl-border-dropdown-divider gl-border-b-solid;
     @apply gl-flex;
     @apply gl-text-base;
     @apply gl-text-strong;
@@ -52,11 +52,11 @@
   }
 
   .gl-dropdown-header {
-    @apply gl-border-b-1 gl-border-b-solid gl-border-b-dropdown-divider;
+    @apply gl-border-b-1 gl-border-b-dropdown-divider gl-border-b-solid;
   }
 
   .gl-dropdown-footer {
-    @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown-divider;
+    @apply gl-border-t-1 gl-border-t-dropdown-divider gl-border-t-solid;
     @apply gl-py-3;
   }
 
@@ -88,7 +88,7 @@
   .dropdown-toggle-split {
     &::after {
       @apply gl-border-0;
-      content: '';
+      content: "";
       @apply gl-block;
       @apply gl-w-5;
       @apply gl-h-5;

package/src/components/base/dropdown/dropdown_divider.scss

@@ -4,7 +4,7 @@
   @apply gl-my-2;
   @apply gl-mx-0;
   @apply gl-p-0;
-  @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown-divider;
+  @apply gl-border-t-1 gl-border-t-dropdown-divider gl-border-t-solid;
 }
 
 /* Styling when the component is used on its own */

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -80,7 +80,7 @@
       border-color: var(--gl-control-border-color-focus);
     }
 
-    .custom-control-input:checked  ~ .custom-control-label::before {
+    .custom-control-input:checked ~ .custom-control-label::before {
       background-color: var(--gl-control-background-color-selected-default);
       border-color: var(--gl-control-border-color-selected-default);
 
@@ -90,9 +90,9 @@
       }
     }
 
-    .custom-control-input[type='checkbox']:checked ~ .custom-control-label,
-    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
-    .custom-control-input[type='radio']:checked ~ .custom-control-label {
+    .custom-control-input[type="checkbox"]:checked ~ .custom-control-label,
+    .custom-control-input[type="checkbox"]:indeterminate ~ .custom-control-label,
+    .custom-control-input[type="radio"]:checked ~ .custom-control-label {
       &::after {
         background: 50% 50% no-repeat;
         background-color: var(--gl-control-indicator-color-selected);
@@ -101,24 +101,24 @@
       }
     }
 
-    .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
+    .custom-control-input[type="checkbox"]:checked ~ .custom-control-label::after {
       background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-check}');
+      mask-image: url("#{$gl-icon-check}");
     }
 
-    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
+    .custom-control-input[type="checkbox"]:indeterminate ~ .custom-control-label::after {
       background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-indeterminate}');
+      mask-image: url("#{$gl-icon-indeterminate}");
     }
 
-    .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
+    .custom-control-input[type="radio"]:checked ~ .custom-control-label::after {
       background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-radio}');
+      mask-image: url("#{$gl-icon-radio}");
     }
 
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
     .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label {
-      &::before  {
+      &::before {
         background-color: var(--gl-control-background-color-selected-hover);
         border-color: var(--gl-control-border-color-selected-hover);
       }
@@ -185,7 +185,7 @@
     }
 
     .custom-control-input:checked:disabled ~ .custom-control-label,
-    .custom-control-input[type='checkbox']:indeterminate:disabled ~ .custom-control-label {
+    .custom-control-input[type="checkbox"]:indeterminate:disabled ~ .custom-control-label {
       &::before {
         background-color: var(--gl-control-background-color-disabled);
         border-color: var(--gl-control-border-color-disabled);

package/src/components/base/form/form_combobox/form_combobox.scss

@@ -34,8 +34,9 @@
 
       // Target the actual Bootstrap dropdown item element
       .dropdown-item {
-        transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
-                    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+        transition:
+          background-color $gl-transition-duration-fast $gl-easing-out-cubic,
+          box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
         @apply gl-rounded-default;
         @apply gl-border-0;
         @apply gl-w-full;

package/src/components/base/form/form_input/form_input.scss

@@ -22,7 +22,9 @@
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
   }
 
-  &:not(.gl-form-input-not-readonly):not(:disabled):not(.form-control-plaintext):not([type='color']):read-only {
+  &:not(.gl-form-input-not-readonly):not(:disabled):not(.form-control-plaintext):not(
+      [type="color"]
+    ):read-only {
     background: var(--gl-control-background-color-readonly);
     box-shadow: none;
   }

package/src/components/base/form/form_select/form_select.scss

@@ -72,7 +72,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   &::after {
     content: "";
     background-color: var(--gl-icon-color-default);
-    mask-image: url('#{$gl-icon-select-chevron-down}');
+    mask-image: url("#{$gl-icon-select-chevron-down}");
     mask-repeat: no-repeat;
     mask-position: center center;
     pointer-events: none;
@@ -88,7 +88,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     }
   }
 
-  &:has(>.gl-form-select:disabled) {
+  &:has(> .gl-form-select:disabled) {
     &::after {
       background-color: var(--gl-icon-color-disabled);
 

package/src/components/base/label/label.scss

@@ -1,5 +1,5 @@
 $label-max-width: 100%;
-$label-close-button: '.gl-label-close.gl-button';
+$label-close-button: ".gl-label-close.gl-button";
 $label-padding-horizontal: 0.75 * $grid-size;
 $label-padding-horizontal-half: 0.375 * $grid-size;
 
@@ -24,7 +24,10 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   }
 
   &:has(*:first-child:focus) {
-    @include gl-focus($color: var(--label-background-color, var(--gl-background-color-default)), $important: true);
+    @include gl-focus(
+      $color: var(--label-background-color, var(--gl-background-color-default)),
+      $important: true
+    );
   }
 
   .gl-label-link {

package/src/components/base/link/link.scss

@@ -29,7 +29,7 @@
 }
 
 .gl-link-external::after {
-  content: ' ↗';
+  content: " ↗";
   font-size: 1em;
 }
 

package/src/components/base/loading_icon/loading_icon.scss

@@ -82,7 +82,7 @@ $gl-loader-dots-size-xl: 1rem;
   &::before,
   > span,
   &::after {
-    content: '';
+    content: "";
 
     display: inline-block;
     border-radius: 100%;

package/src/components/base/markdown/markdown.scss

@@ -134,7 +134,7 @@
         @apply gl-mr-2;
         text-rendering: auto;
         -webkit-font-smoothing: antialiased;
-        content: '📎';
+        content: "📎";
       }
     }
   }

package/src/components/base/new_dropdowns/dropdown.scss

@@ -184,12 +184,20 @@
         &.top-scrim-light {
           height: 2.25rem;
           border-radius: 0.375rem 0.375rem 0 0;
-          background: linear-gradient(180deg, var(--gl-dropdown-background-color) 0%, var(--gl-color-alpha-0));
+          background: linear-gradient(
+            180deg,
+            var(--gl-dropdown-background-color) 0%,
+            var(--gl-color-alpha-0)
+          );
         }
 
         &.top-scrim-dark {
           height: 0.25rem;
-          background: linear-gradient(180deg, var(--gl-shadow-color-default) 0%, var(--gl-color-alpha-0) 100%);
+          background: linear-gradient(
+            180deg,
+            var(--gl-shadow-color-default) 0%,
+            var(--gl-color-alpha-0) 100%
+          );
         }
       }
     }
@@ -203,7 +211,11 @@
         position: relative;
         top: calc(-2.25rem + #{$dropdown-content-padding});
         border-radius: 0 0 0.375rem 0.375rem;
-        background: linear-gradient(180deg, var(--gl-color-alpha-0) 0%, var(--gl-dropdown-background-color));
+        background: linear-gradient(
+          180deg,
+          var(--gl-color-alpha-0) 0%,
+          var(--gl-dropdown-background-color)
+        );
       }
     }
 

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -101,8 +101,9 @@
   }
 
   .gl-new-dropdown-item-content {
-    transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
-                box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+    transition:
+      background-color $gl-transition-duration-fast $gl-easing-out-cubic,
+      box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
     @apply gl-rounded-default;
     @apply gl-border-0;
     @apply gl-w-full;

package/src/components/base/pagination/pagination.scss

@@ -16,10 +16,11 @@
 
 .gl-pagination-item {
   border-radius: var(--gl-action-border-radius);
-  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
-              background-color $gl-transition-duration-medium $gl-easing-out-cubic,
-              border-color $gl-transition-duration-medium $gl-easing-out-cubic,
-              box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+  transition:
+    color $gl-transition-duration-medium $gl-easing-out-cubic,
+    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    border-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
   @apply gl-flex;
   @apply gl-justify-center;
   @apply gl-p-3;

package/src/components/base/path/path.scss

@@ -12,7 +12,7 @@ $path-chevron-right-margin: px-to-rem(14px);
 // Mixins
 @mixin gl-path-chevron {
   @apply gl-bg-inherit;
-  content: '';
+  content: "";
   position: absolute;
   top: $path-chevron-top;
   right: $path-chevron-right;
@@ -79,7 +79,9 @@ $path-chevron-right-margin: px-to-rem(14px);
       display: none;
       z-index: 2;
       right: calc(-0.75rem + 1px);
-      box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0.5px -0.5px 0 2.5px var(--gl-focus-ring-outer-color);
+      box-shadow:
+        0 0 0 1px var(--gl-focus-ring-inner-color),
+        0.5px -0.5px 0 2.5px var(--gl-focus-ring-outer-color);
       clip-path: polygon(0% 0%, 0% -30%, 160% 0%, 75% 130%, 100% 100%);
       transform: rotate(45deg) skew(14deg, 14deg) scale(0.99);
     }
@@ -103,7 +105,10 @@ $path-chevron-right-margin: px-to-rem(14px);
     &:focus,
     &:focus:active {
       // Custom focus to account for path shape
-      box-shadow: 5px -3px 0 -2px var(--gl-focus-ring-inner-color), 5px 3px 0 -2px var(--gl-focus-ring-inner-color), 0 0 0 1px var(--gl-focus-ring-inner-color),
+      box-shadow:
+        5px -3px 0 -2px var(--gl-focus-ring-inner-color),
+        5px 3px 0 -2px var(--gl-focus-ring-inner-color),
+        0 0 0 1px var(--gl-focus-ring-inner-color),
         0 0 0 3px var(--gl-focus-ring-outer-color);
       outline: none;
       border-top-right-radius: 1px;

package/src/components/base/progress_bar/progress_bar.scss

@@ -1,7 +1,7 @@
 .gl-progress-bar {
   background-color: var(--gl-progress-bar-track-color);
 }
-  
+
 .gl-progress {
   @apply gl-flex-col;
   @apply gl-justify-center;
@@ -27,4 +27,4 @@
 
 .gl-progress-bar-danger {
   background-color: var(--gl-progress-bar-indicator-color-danger);
-}
+}

package/src/components/base/table/table.scss

@@ -24,7 +24,7 @@ table.gl-table {
   }
 
   thead tr th {
-    @apply gl-text-heading gl-font-bold;
+    @apply gl-font-bold gl-text-heading;
 
     .gl-table-th-sort-icon-wrapper {
       @apply gl-ml-2;
@@ -38,7 +38,7 @@ table.gl-table {
       }
     }
 
-    [name='sort-icon'] {
+    [name="sort-icon"] {
       user-select: none;
       color: var(--gl-table-sorting-icon-color);
     }
@@ -68,7 +68,7 @@ table.gl-table {
   @mixin gl-tmp-stacked-override {
     tbody > tr {
       &::after {
-        content: '';
+        content: "";
         @apply gl-h-6;
         @apply gl-w-full;
         @apply gl-block;
@@ -123,7 +123,7 @@ table.gl-table {
   thead th:hover {
     background-color: transparent !important;
 
-    [name='sort-icon'] {
+    [name="sort-icon"] {
       display: flex !important;
     }
   }

package/src/components/base/tabs/tabs/tabs.scss

@@ -1,5 +1,5 @@
 .gl-tabs-wrapper {
-  @apply gl-relative gl-flex gl-flex-wrap gl-border-b;
+  @apply gl-border-b gl-relative gl-flex gl-flex-wrap;
 }
 
 .gl-tabs-nav {
@@ -23,7 +23,7 @@
     border-radius $gl-transition-duration-fast $gl-easing-out-cubic;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     border-bottom: $gl-border-size-2 solid transparent;
     translate: 0 $gl-border-size-2;
@@ -37,8 +37,9 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    &, &::before {
-      transition-duration: .01ms;
+    &,
+    &::before {
+      transition-duration: 0.01ms;
     }
   }
 
@@ -140,7 +141,7 @@
 }
 
 .gl-tabs-fade {
-  @apply gl-absolute gl-top-0 gl-bottom-0 gl-z-2;
+  @apply gl-absolute gl-bottom-0 gl-top-0 gl-z-2;
   @apply gl-w-8;
   @apply gl-p-2;
   @apply gl-flex;
@@ -152,7 +153,7 @@
 }
 
 .gl-tabs-fade-right {
-  @apply gl-justify-end gl-right-0;
+  @apply gl-right-0 gl-justify-end;
   @include gl-bg-gradient-blur(right, var(--gl-background-color-default));
 }
 

package/src/components/base/toast/toast.js

@@ -14,35 +14,37 @@ const DEFAULT_OPTIONS = {
 
 let toastsCount = 0;
 
-function renderTitle(h, toast, options) {
-  const nodes = [
-    h(CloseButton, {
-      class: ['gl-toast-close-button'],
-      on: {
-        click: toast.hide,
-      },
-    }),
-  ];
-  if (options.action) {
-    const { onClick, text, href } = options.action;
-    nodes.unshift(
-      h(
-        'a',
-        {
-          attrs: {
-            role: href ? undefined : 'button',
-            href,
-          },
-          class: ['gl-toast-action'],
-          on: {
-            click: (e) => onClick(e, toast),
-          },
+function renderTitle(toast, options) {
+  return (h) => {
+    const nodes = [
+      h(CloseButton, {
+        class: ['gl-toast-close-button'],
+        on: {
+          click: toast.hide,
         },
-        text,
-      ),
-    );
-  }
-  return nodes;
+      }),
+    ];
+    if (options.action) {
+      const { onClick, text, href } = options.action;
+      nodes.unshift(
+        h(
+          'a',
+          {
+            attrs: {
+              role: href ? undefined : 'button',
+              href,
+            },
+            class: ['gl-toast-action'],
+            on: {
+              click: (e) => onClick(e, toast),
+            },
+          },
+          text,
+        ),
+      );
+    }
+    return nodes;
+  };
 }
 
 function showToast(message, options = {}) {
@@ -73,7 +75,7 @@ function showToast(message, options = {}) {
     ...DEFAULT_OPTIONS,
     ...updatedAutoHideDelay,
     id,
-    title: renderTitle(this.$createElement, toast, options),
+    title: renderTitle(toast, options),
   });
   return toast;
 }