@gitlab/ui 128.13.1 → 128.13.3

package/dist/tokens/build/js/tokens.dark.js

@@ -243,8 +243,8 @@ const GL_COLOR_BRAND_GRAY_03 = '#74717a';
 const GL_COLOR_BRAND_GRAY_04 = '#45424d';
 const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
 const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
-const GL_FONT_FAMILY_REGULAR = ["var(--default-regular-font, 'GitLab Sans')", '-apple-system', 'BlinkMacSystemFont', "'Segoe UI'", 'Roboto', "'Noto Sans'", 'Ubuntu', 'Cantarell', "'Helvetica Neue'", 'sans-serif', "'Apple Color Emoji'", "'Segoe UI Emoji'", "'Segoe UI Symbol'", "'Noto Color Emoji'"];
-const GL_FONT_FAMILY_MONOSPACE = ["var(--default-mono-font, 'GitLab Mono')", "'JetBrains Mono'", 'Menlo', "'DejaVu Sans Mono'", "'Liberation Mono'", 'Consolas', "'Ubuntu Mono'", "'Courier New'", "'andale mono'", "'lucida console'", 'monospace'];
+const GL_FONT_FAMILY_REGULAR = ["var(--default-regular-font, 'GitLab Sans')", "'GitLab Sans'", '-apple-system', 'BlinkMacSystemFont', "'Segoe UI'", 'Roboto', "'Noto Sans'", 'Ubuntu', 'Cantarell', "'Helvetica Neue'", 'sans-serif', "'Apple Color Emoji'", "'Segoe UI Emoji'", "'Segoe UI Symbol'", "'Noto Color Emoji'"];
+const GL_FONT_FAMILY_MONOSPACE = ["var(--default-mono-font, 'GitLab Mono')", "'GitLab Mono'", "'JetBrains Mono'", 'Menlo', "'DejaVu Sans Mono'", "'Liberation Mono'", 'Consolas', "'Ubuntu Mono'", "'Courier New'", "'andale mono'", "'lucida console'", 'monospace'];
 const GL_FONT_SIZE_100 = '0.75rem';
 const GL_FONT_SIZE_200 = '0.8125rem';
 const GL_FONT_SIZE_300 = '0.875rem';

package/dist/tokens/build/js/tokens.js

@@ -243,8 +243,8 @@ const GL_COLOR_BRAND_GRAY_03 = '#74717a';
 const GL_COLOR_BRAND_GRAY_04 = '#45424d';
 const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
 const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
-const GL_FONT_FAMILY_REGULAR = ["var(--default-regular-font, 'GitLab Sans')", '-apple-system', 'BlinkMacSystemFont', "'Segoe UI'", 'Roboto', "'Noto Sans'", 'Ubuntu', 'Cantarell', "'Helvetica Neue'", 'sans-serif', "'Apple Color Emoji'", "'Segoe UI Emoji'", "'Segoe UI Symbol'", "'Noto Color Emoji'"];
-const GL_FONT_FAMILY_MONOSPACE = ["var(--default-mono-font, 'GitLab Mono')", "'JetBrains Mono'", 'Menlo', "'DejaVu Sans Mono'", "'Liberation Mono'", 'Consolas', "'Ubuntu Mono'", "'Courier New'", "'andale mono'", "'lucida console'", 'monospace'];
+const GL_FONT_FAMILY_REGULAR = ["var(--default-regular-font, 'GitLab Sans')", "'GitLab Sans'", '-apple-system', 'BlinkMacSystemFont', "'Segoe UI'", 'Roboto', "'Noto Sans'", 'Ubuntu', 'Cantarell', "'Helvetica Neue'", 'sans-serif', "'Apple Color Emoji'", "'Segoe UI Emoji'", "'Segoe UI Symbol'", "'Noto Color Emoji'"];
+const GL_FONT_FAMILY_MONOSPACE = ["var(--default-mono-font, 'GitLab Mono')", "'GitLab Mono'", "'JetBrains Mono'", 'Menlo', "'DejaVu Sans Mono'", "'Liberation Mono'", 'Consolas', "'Ubuntu Mono'", "'Courier New'", "'andale mono'", "'lucida console'", 'monospace'];
 const GL_FONT_SIZE_100 = '0.75rem';
 const GL_FONT_SIZE_200 = '0.8125rem';
 const GL_FONT_SIZE_300 = '0.875rem';

package/dist/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -6,12 +6,13 @@ import { concat } from '../../../utils/array';
 import { getComponentConfig } from '../../../utils/config';
 import { requestAF } from '../../../utils/dom';
 import { getRootEventName, getRootActionEventName } from '../../../utils/events';
-import { isUndefined } from '../../../utils/inspect';
+import { isUndefined, isFunction } from '../../../utils/inspect';
 import { keys, omit, hasOwnProperty, defineProperty, assign, defineProperties, readonlyDescriptor } from '../../../utils/object';
 import { pluginFactory } from '../../../utils/plugins';
 import { warn, warnNotClient } from '../../../utils/warn';
 import { createNewChildComponent } from '../../../utils/create-new-child-component';
 import { getEventRoot } from '../../../utils/get-event-root';
+import { isVue3 } from '../../../vue';
 import { props, BToast } from '../toast';
 
 /**
@@ -124,9 +125,22 @@ const plugin = Vue => {
     });
     // Convert certain props to slots
     keys(propsToSlots).forEach(prop => {
-      const value = props[prop];
+      let value = props[prop];
       if (!isUndefined(value)) {
-        toast.$slots[propsToSlots[prop]] = concat(value);
+        if (isVue3(toast)) {
+          // In Vue 3 compat, $slots is readonly. Set slots on the internal
+          // instance as functions so VNodes are available during the
+          // component's render cycle. When the value is a render function,
+          // defer calling it until the slot is evaluated during render so
+          // that $createElement runs within an active component context.
+          const slotFn = isFunction(value) ? () => concat(value(toast.$createElement)) : () => concat(value);
+          toast.$.slots[propsToSlots[prop]] = slotFn;
+        } else {
+          if (isFunction(value)) {
+            value = value(toast.$createElement);
+          }
+          toast.$slots[propsToSlots[prop]] = concat(value);
+        }
       }
     });
     // Create a mount point (a DIV) and mount it (which triggers the show)

package/dist/vendor/bootstrap-vue/src/components/toast/toast.js

@@ -244,7 +244,12 @@ const BToast = /*#__PURE__*/extend({
       const {
         computedToaster
       } = this;
-      if (!Wormhole.hasTarget(computedToaster)) {
+      const hasTarget = Wormhole.hasTarget(computedToaster);
+      const hasDOM = document.getElementById(computedToaster);
+      if (!hasTarget || !hasDOM) {
+        if (hasTarget && !hasDOM) {
+          Wormhole.unregisterTarget(computedToaster);
+        }
         const div = document.createElement('div');
         document.body.appendChild(div);
         const toaster = createNewChildComponent(this.bvEventRoot, BToaster, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.13.1",
+  "version": "128.13.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -127,8 +127,8 @@
     "@vue/vue2-jest": "29.2.6",
     "@vue/vue3-jest": "^29.2.6",
     "@yarnpkg/lockfile": "^1.1.0",
-    "acorn": "^8.15.0",
-    "acorn-walk": "^8.3.4",
+    "acorn": "^8.16.0",
+    "acorn-walk": "^8.3.5",
     "autoprefixer": "10.4.24",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
@@ -166,7 +166,7 @@
     "start-server-and-test": "^2.1.3",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.3.1",
+    "style-dictionary": "^5.3.2",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/alert/alert.scss

@@ -22,7 +22,12 @@ $gl-alert-top-border-size: 2px;
     border-bottom: 1px solid $border-bottom-color;
 
     &::before {
-      background: linear-gradient(to right, transparent 0%, $border-top-color 50%, transparent 100%);
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        $border-top-color 50%,
+        transparent 100%
+      );
     }
 
     .gl-alert-title {
@@ -130,7 +135,7 @@ $gl-alert-top-border-size: 2px;
   $title-color: var(--gl-alert-danger-title-color),
   $border-top-color: var(--gl-alert-danger-border-top-color),
   $border-bottom-color: var(--gl-alert-danger-border-bottom-color),
-  $icon-color: var(--gl-feedback-danger-icon-color),
+  $icon-color: var(--gl-feedback-danger-icon-color)
 );
 
 @include gl-alert-variant(
@@ -139,7 +144,7 @@ $gl-alert-top-border-size: 2px;
   $title-color: var(--gl-alert-warning-title-color),
   $border-top-color: var(--gl-alert-warning-border-top-color),
   $border-bottom-color: var(--gl-alert-warning-border-bottom-color),
-  $icon-color: var(--gl-feedback-warning-icon-color),
+  $icon-color: var(--gl-feedback-warning-icon-color)
 );
 
 @include gl-alert-variant(
@@ -148,7 +153,7 @@ $gl-alert-top-border-size: 2px;
   $title-color: var(--gl-alert-neutral-title-color),
   $border-top-color: var(--gl-alert-neutral-border-top-color),
   $border-bottom-color: var(--gl-alert-neutral-border-bottom-color),
-  $icon-color: var(--gl-feedback-neutral-icon-color),
+  $icon-color: var(--gl-feedback-neutral-icon-color)
 );
 
 @include gl-alert-variant(
@@ -157,7 +162,7 @@ $gl-alert-top-border-size: 2px;
   $title-color: var(--gl-alert-info-title-color),
   $border-top-color: var(--gl-alert-info-border-top-color),
   $border-bottom-color: var(--gl-alert-info-border-bottom-color),
-  $icon-color: var(--gl-feedback-info-icon-color),
+  $icon-color: var(--gl-feedback-info-icon-color)
 );
 
 @include gl-alert-variant(
@@ -166,5 +171,5 @@ $gl-alert-top-border-size: 2px;
   $title-color: var(--gl-alert-success-title-color),
   $border-top-color: var(--gl-alert-success-border-top-color),
   $border-bottom-color: var(--gl-alert-success-border-bottom-color),
-  $icon-color: var(--gl-feedback-success-icon-color),
+  $icon-color: var(--gl-feedback-success-icon-color)
 );

package/src/components/base/animated_icon/animated_icon.scss

@@ -6,7 +6,8 @@
   * {
     transition: all $gl-transition-duration-medium $gl-easing-out-cubic;
     // 'all' will also animate the visibility property, which makes the icon disappear later than it should
-    transition-property: color, fill, opacity, transform, rotate, translate, scale, stroke-dasharray, stroke-dashoffset;
+    transition-property:
+      color, fill, opacity, transform, rotate, translate, scale, stroke-dasharray, stroke-dashoffset;
     animation-duration: $gl-transition-duration-slow;
     animation-timing-function: $gl-easing-out-cubic;
     animation-fill-mode: both;
@@ -103,14 +104,15 @@
  * animated_chevron_lg_down_up_icon.vue
  * * * * * * * * * * * * * * * * */
 
- /* on state */
- .gl-animated-icon-on {
+/* on state */
+.gl-animated-icon-on {
   .gl-animated-chevron-lg-down-up-arrow-left-line,
   .gl-animated-chevron-lg-down-up-arrow-right-line {
     translate: 50% 31.2%;
     scale: 1 1.01;
-    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
-                scale $gl-transition-duration-medium linear(1 0%, -29 16%, 1 100%);
+    transition:
+      all $gl-transition-duration-medium $gl-easing-out-cubic,
+      scale $gl-transition-duration-medium linear(1 0%, -29 16%, 1 100%);
   }
 
   .gl-animated-chevron-lg-down-up-arrow-left-line {
@@ -128,8 +130,9 @@
   .gl-animated-chevron-lg-down-up-arrow-right-line {
     translate: 50% 68.8%;
     scale: 1 1;
-    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
-                scale $gl-transition-duration-medium linear(1 0%, 29 16%, 1 100%);
+    transition:
+      all $gl-transition-duration-medium $gl-easing-out-cubic,
+      scale $gl-transition-duration-medium linear(1 0%, 29 16%, 1 100%);
   }
 
   .gl-animated-chevron-lg-down-up-arrow-left-line {
@@ -145,14 +148,15 @@
  * animated_chevron_down_up_icon.vue
  * * * * * * * * * * * * * * * * */
 
- /* on state */
- .gl-animated-icon-on {
+/* on state */
+.gl-animated-icon-on {
   .gl-animated-chevron-down-up-arrow-left-line,
   .gl-animated-chevron-down-up-arrow-right-line {
     translate: 50% 37.6%;
     scale: 1 1.01;
-    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
-                scale $gl-transition-duration-medium linear(1 0%, -27 16%, 1 100%);
+    transition:
+      all $gl-transition-duration-medium $gl-easing-out-cubic,
+      scale $gl-transition-duration-medium linear(1 0%, -27 16%, 1 100%);
   }
 
   .gl-animated-chevron-down-up-arrow-left-line {
@@ -170,8 +174,9 @@
   .gl-animated-chevron-down-up-arrow-right-line {
     translate: 50% 62.6%;
     scale: 1 1;
-    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
-                scale $gl-transition-duration-medium linear(1 0%, 27 16%, 1 100%);
+    transition:
+      all $gl-transition-duration-medium $gl-easing-out-cubic,
+      scale $gl-transition-duration-medium linear(1 0%, 27 16%, 1 100%);
   }
 
   .gl-animated-chevron-down-up-arrow-left-line {
@@ -266,12 +271,20 @@
 }
 
 @keyframes gl-animated-loader-on {
-  30% { translate: 0 -30%; }
-  60% { translate: 0 2%; }
-  65% { translate: 0 0; }
+  30% {
+    translate: 0 -30%;
+  }
+
+  60% {
+    translate: 0 2%;
+  }
+
+  65% {
+    translate: 0 0;
+  }
 }
 
- /* * * * * * * * * * * * * * * * *
+/* * * * * * * * * * * * * * * * *
  * animated_notifications_icon.vue
  * * * * * * * * * * * * * * * * */
 
@@ -368,7 +381,7 @@
  * animated_sort_icon.vue
  * * * * * * * * * * * * * * * * */
 
- .gl-animated-sort-icon {
+.gl-animated-sort-icon {
   overflow: visible;
 }
 
@@ -445,7 +458,6 @@
   translate: 0 0;
 }
 
-
 /* * * * * * * * * * * * * * * * *
  * animated_star_icon.vue
  * * * * * * * * * * * * * * * * */
@@ -520,7 +532,6 @@
   }
 }
 
-
 /* * * * * * * * * * * * * * * * *
  * animated_todo_icon.vue
  * * * * * * * * * * * * * * * * */

package/src/components/base/avatar/avatar.scss

@@ -1,5 +1,5 @@
-@use 'sass:map';
-@use 'sass:list';
+@use "sass:map";
+@use "sass:list";
 
 // Available background colors for the identicon fallback for avatars
 //
@@ -8,18 +8,17 @@
 // changed, resulting in changing the color of all identicons, because
 // we do a modulo division with the total number of colors on the
 // object's id to always give it the same "random" color.
-$gl-avatar-identicon-bgs: var(--gl-avatar-fallback-background-color-red),
+$gl-avatar-identicon-bgs:
+  var(--gl-avatar-fallback-background-color-red), var(--gl-avatar-fallback-background-color-purple),
   var(--gl-avatar-fallback-background-color-purple),
-  var(--gl-avatar-fallback-background-color-purple), var(--gl-avatar-fallback-background-color-blue),
-  var(--gl-avatar-fallback-background-color-green),
+  var(--gl-avatar-fallback-background-color-blue), var(--gl-avatar-fallback-background-color-green),
   var(--gl-avatar-fallback-background-color-orange),
   var(--gl-avatar-fallback-background-color-neutral);
 
-$gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
-  var(--gl-avatar-fallback-text-color-purple),
+$gl-avatar-identicon-texts:
+  var(--gl-avatar-fallback-text-color-red), var(--gl-avatar-fallback-text-color-purple),
   var(--gl-avatar-fallback-text-color-purple), var(--gl-avatar-fallback-text-color-blue),
-  var(--gl-avatar-fallback-text-color-green),
-  var(--gl-avatar-fallback-text-color-orange),
+  var(--gl-avatar-fallback-text-color-green), var(--gl-avatar-fallback-text-color-orange),
   var(--gl-avatar-fallback-text-color-neutral);
 
 @mixin gl-avatar {

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -28,11 +28,19 @@
   // Don't include the badge
   &:not(:last-child) {
     margin-right: var(--mask-offset);
-    mask: radial-gradient(circle at calc(var(--avatar-size) * 1.25) center, transparent var(--mask-cutout), white 0);
+    mask: radial-gradient(
+      circle at calc(var(--avatar-size) * 1.25) center,
+      transparent var(--mask-cutout),
+      white 0
+    );
 
-    &:hover+.gl-avatars-inline-child>.gl-avatar-link,
-    &:hover+.gl-avatars-inline-child>.gl-avatars-inline-badge {
-      mask: radial-gradient(circle at var(--mask-offset) center, transparent var(--mask-cutout), white 0);
+    &:hover + .gl-avatars-inline-child > .gl-avatar-link,
+    &:hover + .gl-avatars-inline-child > .gl-avatars-inline-badge {
+      mask: radial-gradient(
+        circle at var(--mask-offset) center,
+        transparent var(--mask-cutout),
+        white 0
+      );
     }
   }
 

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -23,7 +23,7 @@ $breadcrumb-max-width: $grid-size * 16;
   &:not(:last-child, :has(+ .gl-breadcrumb-clipboard-button))::after {
     color: var(--gl-breadcrumb-separator-color);
     @apply gl-px-3;
-    content: '/';
+    content: "/";
   }
 
   > a {
@@ -63,7 +63,7 @@ $breadcrumb-max-width: $grid-size * 16;
 }
 
 .gl-breadcrumb-item {
-/**
+  /**
    * If the last/only item, which is always visible, has a very long title,
    * it could overflow the breadcrumb component. This CSS makes sure it
    * shows an ellipsis instead.

package/src/components/base/button/button.scss

@@ -13,7 +13,7 @@
   $focus-border-color: null,
   $active-color: null,
   $active-background-color: null,
-  $active-border-color: null,
+  $active-border-color: null
 ) {
   color: $color;
   background-color: $background-color;
@@ -21,8 +21,9 @@
 
   &::before {
     background-color: $border-color;
-    transition: background-color $gl-transition-duration-medium $gl-easing-out-cubic,
-                border-color $gl-transition-duration-medium $gl-easing-out-cubic;
+    transition:
+      background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+      border-color $gl-transition-duration-medium $gl-easing-out-cubic;
   }
 
   &:hover {
@@ -78,7 +79,8 @@
   border: $gl-border-size-1 solid var(--gl-button-default-primary-border-color-default);
   min-height: $gl-button-medium-size;
   min-width: $gl-button-medium-size;
-  transition: color $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,
@@ -148,7 +150,7 @@
       $focus-border-color: var(--gl-button-default-primary-border-color-focus),
       $active-color: var(--gl-button-default-primary-foreground-color-active),
       $active-background-color: var(--gl-button-default-primary-background-color-active),
-      $active-border-color: var(--gl-button-default-primary-border-color-active),
+      $active-border-color: var(--gl-button-default-primary-border-color-active)
     );
 
     &.selected {
@@ -228,7 +230,7 @@
       $focus-border-color: var(--gl-button-default-tertiary-border-color-focus),
       $active-color: var(--gl-button-default-tertiary-foreground-color-active),
       $active-background-color: var(--gl-button-default-tertiary-background-color-active),
-      $active-border-color: var(--gl-button-default-tertiary-border-color-active),
+      $active-border-color: var(--gl-button-default-tertiary-border-color-active)
     );
   }
 
@@ -245,7 +247,7 @@
       $focus-border-color: var(--gl-button-confirm-primary-border-color-focus),
       $active-color: var(--gl-button-confirm-primary-foreground-color-active),
       $active-background-color: var(--gl-button-confirm-primary-background-color-active),
-      $active-border-color: var(--gl-button-confirm-primary-border-color-active),
+      $active-border-color: var(--gl-button-confirm-primary-border-color-active)
     );
   }
 
@@ -262,7 +264,7 @@
       $focus-border-color: var(--gl-button-confirm-secondary-border-color-focus),
       $active-color: var(--gl-button-confirm-secondary-foreground-color-active),
       $active-background-color: var(--gl-button-confirm-secondary-background-color-active),
-      $active-border-color: var(--gl-button-confirm-secondary-border-color-active),
+      $active-border-color: var(--gl-button-confirm-secondary-border-color-active)
     );
   }
 
@@ -279,7 +281,7 @@
       $focus-border-color: var(--gl-button-confirm-tertiary-border-color-focus),
       $active-color: var(--gl-button-confirm-tertiary-foreground-color-active),
       $active-background-color: var(--gl-button-confirm-tertiary-background-color-active),
-      $active-border-color: var(--gl-button-confirm-tertiary-border-color-active),
+      $active-border-color: var(--gl-button-confirm-tertiary-border-color-active)
     );
   }
 
@@ -296,7 +298,7 @@
       $focus-border-color: var(--gl-button-danger-primary-border-color-focus),
       $active-color: var(--gl-button-danger-primary-foreground-color-active),
       $active-background-color: var(--gl-button-danger-primary-background-color-active),
-      $active-border-color: var(--gl-button-danger-primary-border-color-active),
+      $active-border-color: var(--gl-button-danger-primary-border-color-active)
     );
   }
 
@@ -313,7 +315,7 @@
       $focus-border-color: var(--gl-button-danger-secondary-border-color-focus),
       $active-color: var(--gl-button-danger-secondary-foreground-color-active),
       $active-background-color: var(--gl-button-danger-secondary-background-color-active),
-      $active-border-color: var(--gl-button-danger-secondary-border-color-active),
+      $active-border-color: var(--gl-button-danger-secondary-border-color-active)
     );
   }
 
@@ -330,7 +332,7 @@
       $focus-border-color: var(--gl-button-danger-tertiary-border-color-focus),
       $active-color: var(--gl-button-danger-tertiary-foreground-color-active),
       $active-background-color: var(--gl-button-danger-tertiary-background-color-active),
-      $active-border-color: var(--gl-button-danger-tertiary-border-color-active),
+      $active-border-color: var(--gl-button-danger-tertiary-border-color-active)
     );
   }
 
@@ -470,8 +472,8 @@
     }
   }
 
-  &.disabled[class*='-tertiary'],
-  &[disabled][class*='-tertiary'] {
+  &.disabled[class*="-tertiary"],
+  &[disabled][class*="-tertiary"] {
     @apply gl-bg-transparent;
     @apply gl-shadow-none;
   }

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/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 */