@gitlab/ui 86.12.0 → 86.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [86.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.12.1...v86.13.0) (2024-07-17)
+
+
+### Features
+
+* Migrate to tailwind utilities internally ([dc28dbc](https://gitlab.com/gitlab-org/gitlab-ui/commit/dc28dbc1969e9d423bef13682a56cf1d9674267b))
+
+## [86.12.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.12.0...v86.12.1) (2024-07-17)
+
+
+### Bug Fixes
+
+* Properly handle multi-class tailwind migration ([7131ebb](https://gitlab.com/gitlab-org/gitlab-ui/commit/7131ebb48501d1ac962c1b64d7fb45fc07f6fc37))
+
 # [86.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.11.1...v86.12.0) (2024-07-16)
 
 

package/bin/migrate_custom_utils_to_tw.bundled.mjs

@@ -183679,9 +183679,15 @@ var _23 = function() {
 }();
 var lne = { html: rn7("html", gc3, { staticAttrs: ["class"] }), glimmer: rn7("glimmer", oY, { staticAttrs: ["class"] }), lwc: rn7("lwc", gc3, { staticAttrs: ["class"] }), angular: rn7("angular", gc3, { staticAttrs: ["class"], dynamicAttrs: ["[ngClass]"] }), vue: rn7("vue", gc3, { staticAttrs: ["class"], dynamicAttrs: [":class", "v-bind:class"] }), css: rn7("css", Sv), scss: rn7("scss", Sv), less: rn7("less", Sv), babel: rn7("babel", Ls8, { staticAttrs: ["class", "className"] }), "babel-flow": rn7("babel-flow", Ls8, { staticAttrs: ["class", "className"] }), flow: rn7("flow", Ls8, { staticAttrs: ["class", "className"] }), typescript: rn7("typescript", Ls8, { staticAttrs: ["class", "className"] }), "babel-ts": rn7("babel-ts", Ls8, { staticAttrs: ["class", "className"] }), acorn: rn7("acorn", Ls8, { staticAttrs: ["class", "className"] }), meriyah: rn7("meriyah", Ls8, { staticAttrs: ["class", "className"] }), __js_expression: rn7("__js_expression", Ls8, { staticAttrs: ["class", "className"] }), ...si5.parsers.svelte ? { svelte: rn7("svelte", vc3, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.astro ? { astro: rn7("astro", I23, { staticAttrs: ["class", "className"], dynamicAttrs: ["class:list", "className"] }) } : {}, ...si5.parsers.astroExpressionParser ? { astroExpressionParser: rn7("astroExpressionParser", Ls8, { staticAttrs: ["class"], dynamicAttrs: ["class:list"] }) } : {}, ...si5.parsers.marko ? { marko: rn7("marko", cY2, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.melody ? { melody: rn7("melody", O23, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.pug ? { pug: rn7("pug", pY, { staticAttrs: ["class"] }) } : {}, ...si5.parsers["liquid-html"] ? { "liquid-html": rn7("liquid-html", lY, { staticAttrs: ["class"] }) } : {} };
 
-// bin/lib/tailwind_equivalents.js
+// bin/lib/tailwind_equivalents.mjs
 var tailwindEquivalents = {
+  /**
+   * These classes are mapping to multi-classes...
+   */
   "gl-sr-only-focusable": "gl-sr-only focus:gl-not-sr-only",
+  "gl--flex-center": "gl-flex gl-items-center gl-justify-center",
+  "gl-flex-flow-row-wrap": "gl-flex-row gl-flex-wrap",
+  // Normal replacements below
   "gl-spin": "gl-animate-spin",
   "gl-animate-skeleton-loader": null,
   "gl-hover-bg-transparent": "hover:gl-bg-transparent",
@@ -183797,7 +183803,6 @@ var tailwindEquivalents = {
   "gl-hover-text-blue-800": "hover:gl-text-blue-800",
   "gl-hover-text-blue-800!": "hover:!gl-text-blue-800",
   "gl-text-red-500!": "!gl-text-red-500",
-  "gl--flex-center": "gl-flex gl-items-center gl-justify-center",
   "gl-focus--focus": "focus:gl-focus",
   "gl-cursor-default!": "!gl-cursor-default",
   "gl-hover-cursor-pointer": "hover:gl-cursor-pointer",
@@ -183904,7 +183909,6 @@ var tailwindEquivalents = {
   "gl-flex-basis-half": "gl-basis-1/2",
   "gl-flex-basis-full": "gl-basis-full",
   "gl-flex-basis-full!": "!gl-basis-full",
-  "gl-flex-flow-row-wrap": "gl-flex-row gl-flex-wrap",
   "gl-justify-content-center": "gl-justify-center",
   "gl-justify-content-end": "gl-justify-end",
   "gl-justify-content-end!": "!gl-justify-end",
@@ -184208,6 +184212,21 @@ var tailwindEquivalents = {
   "gl-visibility-hidden": "gl-invisible",
   "gl-z-index-200": "gl-z-200",
   "gl-z-index-9999!": "!gl-z-9999",
+  /*
+   Items below have been found by analysing the following projects
+   - jh fork of GitLab
+   - https://gitlab-org.gitlab.io/frontend/playground/gitlab-code-scanner
+   - https://gitlab.com/gitlab-com/gl-infra/gitlab-dedicated/switchboard/
+   - https://gitlab.com/gitlab-org/customers-gitlab-com/
+   - https://gitlab.com/gitlab-org/editor-extensions/gitlab-jetbrains-plugin
+   - https://gitlab.com/gitlab-org/frontend/pajamas-adoption-scanner
+   - https://gitlab.com/gitlab-org/frontend/playground/vue-compat-scanner
+   - https://gitlab.com/gitlab-org/gitlab-docs/
+   - https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com
+   - https://gitlab.com/gitlab-org/gitlab-vscode-extension/
+   - https://gitlab.com/gitlab-org/status-page
+   - https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo
+   */
   "gl-active-bg-t-gray-a-08": "active:gl-bg-alpha-dark-8",
   "gl-inset-border-b-1-gray-200": "gl-shadow-inner-b-1-gray-100",
   "gl-justify-content-center!": "!gl-justify-center",
@@ -184235,18 +184254,87 @@ var tailwindEquivalents = {
   "gl-z-index-1": "gl-z-1",
   "gl-z-index-2": "gl-z-2",
   "gl-z-index-3": "gl-z-3",
-  "gl-z-index-4": "gl-z-4"
+  "gl-z-index-4": "gl-z-4",
+  "gl-bg-data-viz-green-700!": "!gl-bg-data-viz-green-700",
+  "gl-bg-data-viz-magenta-950!": "!gl-bg-data-viz-magenta-950",
+  "gl-inset-border-1-red-300": "gl-shadow-inner-1-red-300",
+  "gl-inset-border-1-red-500": "gl-shadow-inner-1-red-500",
+  "gl-column-gap-3": "gl-gap-x-3"
 };
 
+// bin/lib/tailwind_migrations.mjs
+function legacyClassToImportant(klass) {
+  return klass.endsWith("!") ? klass : `${klass}!`;
+}
+function tailwindClassToImportant(klass) {
+  if (klass.includes(" ")) {
+    return klass.split(" ").map((k9) => tailwindClassToImportant(k9)).join(" ");
+  }
+  if (klass.includes("!gl-")) {
+    return klass;
+  } else {
+    return klass.replace(/(^|:)(-?gl-)/, "$1!$2");
+  }
+}
+function filterOutNonStringValues(rawMigrations) {
+  return Object.entries(rawMigrations).filter(([, to4]) => typeof to4 === "string");
+}
+function addImportantVariants(rawMigrations) {
+  const map2 = rawMigrations.reduce((acc, [from, to4]) => {
+    acc.set(from, to4);
+    if (to4.includes(" ")) {
+      acc.set("\\." + from, "." + to4.replace(/ /g, "."));
+    }
+    const importantFrom = legacyClassToImportant(from);
+    if (!Object.hasOwn(rawMigrations, importantFrom)) {
+      const importantTo = tailwindClassToImportant(to4);
+      acc.set(importantFrom, importantTo);
+      if (to4.includes(" ")) {
+        acc.set("\\." + importantFrom, "." + importantTo.replace(/ /g, "."));
+      }
+    }
+    return acc;
+  }, /* @__PURE__ */ new Map());
+  return Array.from(map2.entries()).map(([from, to4]) => ({ from, to: to4 }));
+}
+function addFromRegExps(rawMigrations) {
+  const classChars = ["-", "\\w", "!", ":"].join("|");
+  return rawMigrations.map((migration) => ({
+    ...migration,
+    fromRegExp: new RegExp(`(?<!${classChars})${migration.from}(?!${classChars})`, "g")
+  }));
+}
+function sortMigrations(unsortedMigrations) {
+  return unsortedMigrations.slice().sort((a3, b6) => {
+    if (a3.from.length < b6.from.length)
+      return 1;
+    if (a3.from.length > b6.from.length)
+      return -1;
+    return 0;
+  });
+}
+async function parseMigrations(obj) {
+  try {
+    return sortMigrations(addFromRegExps(addImportantVariants(filterOutNonStringValues(obj))));
+  } catch (error) {
+    console.error(error.message);
+    return [];
+  }
+}
+function runMigrations(contents, migrationsToDo) {
+  let newContents = contents;
+  for (const { fromRegExp, to: to4 } of migrationsToDo) {
+    newContents = newContents.replaceAll(fromRegExp, to4);
+  }
+  return newContents;
+}
+
 // bin/migrate_custom_utils_to_tw.mjs
 function createRewriter(config, migrationsToDo) {
   const { tailwindConfig, dryRun } = config;
   return async function rewrite(file) {
     const contents = await readFile3(file, { encoding: "utf8" });
-    let newContents = contents;
-    for (const { fromRegExp, to: to4 } of migrationsToDo) {
-      newContents = newContents.replaceAll(fromRegExp, to4);
-    }
+    let newContents = runMigrations(contents, migrationsToDo);
     if (contents === newContents) {
       console.warn(`No changes to ${file}`);
       return;
@@ -184315,50 +184403,6 @@ function validateMigrations(processedMigrations) {
   }
   return true;
 }
-function legacyClassToImportant(klass) {
-  return klass.endsWith("!") ? klass : `${klass}!`;
-}
-function tailwindClassToImportant(klass) {
-  return klass.includes("!gl-") ? klass : klass.replace(/(^|:)(-?gl-)/, "$1!$2");
-}
-function filterOutNonStringValues(rawMigrations) {
-  return Object.entries(rawMigrations).filter(([, to4]) => typeof to4 === "string");
-}
-function addImportantVariants(rawMigrations) {
-  const map2 = rawMigrations.reduce((acc, [from, to4]) => {
-    acc.set(from, to4);
-    const importantFrom = legacyClassToImportant(from);
-    if (!Object.hasOwn(rawMigrations, importantFrom)) {
-      acc.set(importantFrom, tailwindClassToImportant(to4));
-    }
-    return acc;
-  }, /* @__PURE__ */ new Map());
-  return Array.from(map2.entries()).map(([from, to4]) => ({ from, to: to4 }));
-}
-function addFromRegExps(rawMigrations) {
-  const classChars = ["-", "\\w", "!", ":"].join("|");
-  return rawMigrations.map((migration) => ({
-    ...migration,
-    fromRegExp: new RegExp(`(?<!${classChars})${migration.from}(?!${classChars})`, "g")
-  }));
-}
-function sortMigrations(unsortedMigrations) {
-  return unsortedMigrations.slice().sort((a3, b6) => {
-    if (a3.from.length < b6.from.length)
-      return 1;
-    if (a3.from.length > b6.from.length)
-      return -1;
-    return 0;
-  });
-}
-async function parseMigrations(obj) {
-  try {
-    return sortMigrations(addFromRegExps(addImportantVariants(filterOutNonStringValues(obj))));
-  } catch (error) {
-    console.error(error.message);
-    return [];
-  }
-}
 async function getFilesAndDirectories(directories, dryRun) {
   const directoriesPattern = directories.length === 0 ? process.cwd() : directories.length === 1 ? directories[0] : `{${directories.join(",")}}`;
   const extensions = ["haml", "rb", "vue", "js", "snap", "html"];

package/dist/components/base/accordion/accordion_item.js

@@ -98,7 +98,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-text-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/avatar_labeled/avatar_labeled.js

@@ -72,7 +72,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels gl-text-left!",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"},[(_vm.hasLabelLink)?_c('gl-link',{ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels !gl-text-left",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left"},[(_vm.hasLabelLink)?_c('gl-link',{ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/badge/badge.js

@@ -68,7 +68,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({staticClass:"gl-badge",class:{ 'gl-px-2!': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2 gl-ml-n2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({staticClass:"gl-badge",class:{ '!gl-px-2': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/banner/banner.js

@@ -101,9 +101,9 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-banner gl-pl-6 gl-pr-8 gl-py-6",class:{
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-banner gl-py-6 gl-pl-6 gl-pr-8",class:{
     'gl-banner-introduction': _vm.isIntroducing,
-  },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":""}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h2',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',_vm._b({attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},'gl-button',_vm.buttonAttributes,false),[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('close-button',{staticClass:"gl-banner-close",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.handleClose}})],1)};
+  },attrs:{"body-class":"gl-flex !gl-p-0"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":""}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h2',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',_vm._b({attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},'gl-button',_vm.buttonAttributes,false),[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('close-button',{staticClass:"gl-banner-close",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.handleClose}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -193,7 +193,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible)?_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-disclosure-dropdown',{staticStyle:{"height":"16px"},attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":"small"}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{ref:"breadcrumbs",refInFor:true,style:(_vm.itemStyle),attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-mr-2 gl-rounded-base! gl-border",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1)})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible)?_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-disclosure-dropdown',{staticStyle:{"height":"16px"},attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":"small"}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{ref:"breadcrumbs",refInFor:true,style:(_vm.itemStyle),attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-base",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1)})],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/datepicker/datepicker.js

@@ -355,7 +355,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.datepickerClasses},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-display-flex gl-align-items-start gl-gap-3"},[_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-relative"},[_vm._t("default",function(){return [_c('gl-form-input',{class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel,"state":_vm.state},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2),_vm._v(" "),_vm._t("after")],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.datepickerClasses},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-align-items-start gl-flex gl-gap-3"},[_c('div',{staticClass:"gl-relative gl-flex gl-grow"},[_vm._t("default",function(){return [_c('gl-form-input',{class:_vm.renderClearButton ? '!gl-pr-9' : '!gl-pr-7',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel,"state":_vm.state},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2),_vm._v(" "),_vm._t("after")],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -5,7 +5,7 @@ import GlIcon from '../icon/icon';
 import { datepickerWidthOptionsMap } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const CONTAINER_CLASSES = ['gl-display-flex', 'gl-align-items-baseline', 'gl-flex-wrap', 'gl-sm-flex-nowrap', 'gl-sm-gap-3'];
+const CONTAINER_CLASSES = ['gl-flex', 'gl-items-baseline', 'gl-flex-wrap', 'sm:gl-flex-nowrap', 'sm:gl-gap-3'];
 var script = {
   name: 'GlDaterangePicker',
   components: {
@@ -273,7 +273,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-daterange-picker gl-gap-5 gl-display-flex"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer,"start-opened":_vm.startOpened,"state":_vm.startPickerState,"width":_vm.width},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-start")]},proxy:true}],null,true),model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endContainerClasses,attrs:{"data-testid":"daterange-picker-end-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate,"width":_vm.width,"state":_vm.endPickerState},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-end")]},proxy:true}],null,true),model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),(_vm.showIndicator)?_c('div',{staticClass:"gl-daterange-picker-indicator",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2):_vm._e()])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-daterange-picker gl-flex gl-gap-5"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer,"start-opened":_vm.startOpened,"state":_vm.startPickerState,"width":_vm.width},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-start")]},proxy:true}],null,true),model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endContainerClasses,attrs:{"data-testid":"daterange-picker-end-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate,"width":_vm.width,"state":_vm.endPickerState},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-end")]},proxy:true}],null,true),model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),(_vm.showIndicator)?_c('div',{staticClass:"gl-daterange-picker-indicator",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/dropdown/dropdown.js

@@ -225,7 +225,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right,"popper-opts":_vm.popperOptions,"no-flip":_vm.noFlip,"split-href":_vm.splitHref},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",function(){return [(_vm.loading)?_c('gl-loading-icon',{class:{ 'gl-mr-2': !_vm.isIconOnly }}):_vm._e(),_vm._v(" "),(_vm.icon && !(_vm.isIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",function(){return [_vm._v(_vm._s(_vm.buttonText))]})],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right,"popper-opts":_vm.popperOptions,"no-flip":_vm.noFlip,"split-href":_vm.splitHref},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",function(){return [(_vm.loading)?_c('gl-loading-icon',{class:{ 'gl-mr-2': !_vm.isIconOnly }}):_vm._e(),_vm._v(" "),(_vm.icon && !(_vm.isIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",function(){return [_vm._v(_vm._s(_vm.buttonText))]})],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-dropdown-header",class:{ '!gl-border-b-0': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-flex gl-flex-row gl-items-center gl-justify-between"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-justify-content-flex-start gl-flex gl-grow",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-flex gl-grow gl-justify-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/dropdown/dropdown_item.js

@@ -80,7 +80,7 @@ var script = {
       if (this.isCheckCentered) {
         return '';
       }
-      return 'gl-mt-3 gl-align-self-start';
+      return 'gl-mt-3 gl-self-start';
     }
   },
   methods: {
@@ -94,10 +94,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.bootstrapComponent,_vm._g(_vm._b({tag:"component",staticClass:"gl-dropdown-item"},'component',_vm.$attrs,false),_vm.$listeners),[(_vm.shouldShowCheckIcon)?_c('gl-icon',{class:[
-      'gl-dropdown-item-check-icon',
-      { 'gl-visibility-hidden': !_vm.isChecked },
-      _vm.checkedClasses ],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}):_vm._e(),_vm._v(" "),(_vm.iconName)?_c('gl-icon',{class:['gl-dropdown-item-icon', _vm.iconColorCss],attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),(_vm.avatarUrl)?_c('gl-avatar',{attrs:{"size":32,"src":_vm.avatarUrl}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2),_vm._v(" "),(_vm.secondaryText)?_c('p',{staticClass:"gl-dropdown-item-text-secondary"},[_vm._v(_vm._s(_vm.secondaryText))]):_vm._e()]),_vm._v(" "),(_vm.iconRightName)?_c('gl-button',{attrs:{"size":"small","icon":_vm.iconRightName,"aria-label":_vm.iconRightAriaLabel || _vm.iconRightName},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.handleClickIconRight.apply(null, arguments)}}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.bootstrapComponent,_vm._g(_vm._b({tag:"component",staticClass:"gl-dropdown-item"},'component',_vm.$attrs,false),_vm.$listeners),[(_vm.shouldShowCheckIcon)?_c('gl-icon',{class:['gl-dropdown-item-check-icon', { 'gl-invisible': !_vm.isChecked }, _vm.checkedClasses],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}):_vm._e(),_vm._v(" "),(_vm.iconName)?_c('gl-icon',{class:['gl-dropdown-item-icon', _vm.iconColorCss],attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),(_vm.avatarUrl)?_c('gl-avatar',{attrs:{"size":32,"src":_vm.avatarUrl}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2),_vm._v(" "),(_vm.secondaryText)?_c('p',{staticClass:"gl-dropdown-item-text-secondary"},[_vm._v(_vm._s(_vm.secondaryText))]):_vm._e()]),_vm._v(" "),(_vm.iconRightName)?_c('gl-button',{attrs:{"size":"small","icon":_vm.iconRightName,"aria-label":_vm.iconRightAriaLabel || _vm.iconRightName},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.handleClickIconRight.apply(null, arguments)}}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/filtered_search/filtered_search.js

@@ -370,7 +370,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"show-search-button":_vm.showSearchButton,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable-container",class:{
         'gl-filtered-search-scrollable-container-with-search-button': _vm.showSearchButton,
-        'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly,
+        '!gl-bg-gray-10 !gl-shadow-inner-1-gray-100': _vm.viewOnly,
       }},[_c('div',{staticClass:"gl-filtered-search-scrollable"},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",class:_vm.getTokenClassList(idx),attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx),"search-text-option-label":_vm.searchTextOptionLabel,"applied-tokens":_vm.appliedTokens},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})}),1)]),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 

package/dist/components/base/filtered_search/filtered_search_term.js

@@ -168,7 +168,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",attrs:{"is-term":"","active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly,"options":_vm.suggestedTokens},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.onComplete,"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"view",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-filtered-search-term gl-h-auto",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",attrs:{"is-term":"","active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly,"options":_vm.suggestedTokens},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.onComplete,"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"view",fn:function(ref){
 var label = ref.label;
 return [(_vm.showToken)?_c('gl-token',_vm._g({class:{ 'gl-cursor-pointer': !_vm.viewOnly },attrs:{"view-only":_vm.viewOnly}},_vm.eventListeners),[_vm._v(_vm._s(_vm.value.data))]):(_vm.showInput)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",class:{ 'gl-bg-gray-10': _vm.viewOnly },attrs:{"placeholder":_vm.placeholder,"aria-label":label,"readonly":_vm.viewOnly,"data-testid":"filtered-search-term-input"},on:{"focusin":function($event){return _vm.$emit('activate')},"focusout":function($event){return _vm.$emit('deactivate')}}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]}}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
 var __vue_staticRenderFns__ = [];

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -342,7 +342,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   var inputValue = ref.inputValue;
 return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v("\n        "+_vm._s(inputValue)+"\n      ")])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"option-text-field":"value","custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v("\n        "+_vm._s(_vm.operatorDescription)+"\n      ")])]},proxy:true},{key:"option",fn:function(ref){
   var option = ref.option;
-return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"search-input-attributes":_vm.dataSegmentInputAttributes},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"before-input",fn:function(scope){return [_vm._t("before-data-segment-input",null,null,scope)]}},{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
+return [_c('div',{staticClass:"gl-flex"},[_vm._v("\n        "+_vm._s(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"search-input-attributes":_vm.dataSegmentInputAttributes},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"before-input",fn:function(scope){return [_vm._t("before-data-segment-input",null,null,scope)]}},{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
   var inputValue = ref.inputValue;
 return [_vm._t("view-token",function(){return [_c('gl-token',_vm._g({staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value","view-only":_vm.viewOnly}},_vm.eventListeners),[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",function(){return [_vm._v(_vm._s(inputValue))]},null,{ inputValue: inputValue })],2)])]},null,{
           inputValue: inputValue,

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -384,7 +384,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-filtered-search-token-segment",class:{
     'gl-filtered-search-token-segment-active': _vm.active,
-    'gl-cursor-text!': _vm.viewOnly,
+    '!gl-cursor-text': _vm.viewOnly,
   },attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[_vm._t("before-input",null,null,{ submitValue: _vm.applySuggestion }),_vm._v(" "),(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",function(){return [(option.component)?[_c(option.component,{tag:"component",attrs:{"option":option}})]:[_vm._v("\n                "+_vm._s(option[_vm.optionTextField])+"\n              ")]]},null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ label: _vm.label, inputValue: _vm.inputValue })],2)};
 var __vue_staticRenderFns__ = [];
 

package/dist/components/base/form/form_combobox/form_combobox.js

@@ -195,7 +195,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-combobox dropdown",attrs:{"role":"combobox","aria-owns":_vm.suggestionsId,"aria-expanded":_vm.ariaExpanded}},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"searchbox","autocomplete":_vm.showAutocomplete,"aria-autocomplete":"list","aria-controls":_vm.suggestionsId,"aria-haspopup":"listbox","autofocus":_vm.autofocus,"placeholder":_vm.placeholder},on:{"input":_vm.onEntry,"focus":_vm.resetCounter,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions.apply(null, arguments)}]}})],1),_vm._v(" "),_c('ul',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSuggestions && !_vm.userDismissedResults),expression:"showSuggestions && !userDismissedResults"}],ref:"suggestionsMenu",staticClass:"dropdown-menu gl-w-full gl-form-combobox-inner gl-list-style-none gl-pl-0 gl-mb-0 gl-display-flex gl-flex-direction-column",attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown"},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)}]}},[_c('li',{staticClass:"gl-overflow-y-auto show-dropdown"},[_c('ul',{staticClass:"gl-list-style-none gl-pl-0 gl-mb-0"},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,ref:"results",refInFor:true,attrs:{"role":"option","aria-selected":i === _vm.arrowCounter,"tabindex":"-1"},on:{"click":function($event){return _vm.selectToken(result)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectToken(result)}}},[_vm._t("result",function(){return [_vm._v(_vm._s(result))]},{"item":result})],2)}),1)]),_vm._v(" "),(_vm.resultsLength > 0 && _vm.actionList.length > 0)?_c('gl-dropdown-divider'):_vm._e(),_vm._v(" "),_c('li',[_c('ul',{staticClass:"gl-list-style-none gl-pl-0 gl-mb-0"},_vm._l((_vm.actionList),function(action,i){return _c('gl-dropdown-item',{key:i + _vm.resultsLength,attrs:{"role":"option","aria-selected":i + _vm.resultsLength === _vm.arrowCounter,"tabindex":"-1","data-testid":"combobox-action"},on:{"click":function($event){return _vm.selectAction(action)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectAction(action)}}},[_vm._t("action",function(){return [_vm._v(_vm._s(action.label))]},{"item":action})],2)}),1)])],1)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-combobox dropdown",attrs:{"role":"combobox","aria-owns":_vm.suggestionsId,"aria-expanded":_vm.ariaExpanded}},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"searchbox","autocomplete":_vm.showAutocomplete,"aria-autocomplete":"list","aria-controls":_vm.suggestionsId,"aria-haspopup":"listbox","autofocus":_vm.autofocus,"placeholder":_vm.placeholder},on:{"input":_vm.onEntry,"focus":_vm.resetCounter,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions.apply(null, arguments)}]}})],1),_vm._v(" "),_c('ul',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSuggestions && !_vm.userDismissedResults),expression:"showSuggestions && !userDismissedResults"}],ref:"suggestionsMenu",staticClass:"dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-pl-0",attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown"},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)}]}},[_c('li',{staticClass:"show-dropdown gl-overflow-y-auto"},[_c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0"},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,ref:"results",refInFor:true,attrs:{"role":"option","aria-selected":i === _vm.arrowCounter,"tabindex":"-1"},on:{"click":function($event){return _vm.selectToken(result)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectToken(result)}}},[_vm._t("result",function(){return [_vm._v(_vm._s(result))]},{"item":result})],2)}),1)]),_vm._v(" "),(_vm.resultsLength > 0 && _vm.actionList.length > 0)?_c('gl-dropdown-divider'):_vm._e(),_vm._v(" "),_c('li',[_c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0"},_vm._l((_vm.actionList),function(action,i){return _c('gl-dropdown-item',{key:i + _vm.resultsLength,attrs:{"role":"option","aria-selected":i + _vm.resultsLength === _vm.arrowCounter,"tabindex":"-1","data-testid":"combobox-action"},on:{"click":function($event){return _vm.selectAction(action)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectAction(action)}}},[_vm._t("action",function(){return [_vm._v(_vm._s(action.label))]},{"item":action})],2)}),1)])],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/keyset_pagination/keyset_pagination.js

@@ -117,7 +117,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1):_vm._e()};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-align-center gl-flex"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-align-center gl-flex"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/label/label.js

@@ -121,7 +121,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",class:{ 'gl-label-link-underline': _vm.target },attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('gl-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"category":"tertiary","size":"small","variant":"reset","aria-label":"Remove label","disabled":_vm.disabled},on:{"click":_vm.onClose}},[_c('gl-icon',{attrs:{"name":"close-xs","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",class:{ 'gl-label-link-underline': _vm.target },attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('gl-button',{staticClass:"gl-label-close !gl-p-0",attrs:{"category":"tertiary","size":"small","variant":"reset","aria-label":"Remove label","disabled":_vm.disabled},on:{"click":_vm.onClose}},[_c('gl-icon',{attrs:{"name":"close-xs","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/loading_icon/loading_icon.js

@@ -76,7 +76,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.variant === 'spinner')?_c(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"aria-label":_vm.label,"role":"status"}},[_c('span',{staticClass:"gl-vertical-align-text-bottom!",class:_vm.spinnerCssClasses})]):_c(_vm.rootElementType,{tag:"component",class:_vm.dotsCssClasses,attrs:{"role":"status","aria-label":_vm.label}},[_c('span')])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.variant === 'spinner')?_c(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"aria-label":_vm.label,"role":"status"}},[_c('span',{staticClass:"!gl-align-text-bottom",class:_vm.spinnerCssClasses})]):_c(_vm.rootElementType,{tag:"component",class:_vm.dotsCssClasses,attrs:{"role":"status","aria-label":_vm.label}},[_c('span')])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -246,7 +246,7 @@ var script = {
     },
     panelClasses() {
       return {
-        'gl-display-block!': this.visible,
+        '!gl-block': this.visible,
         [FIXED_WIDTH_CLASS]: !this.fluidWidth,
         'gl-fixed': this.openedYet && this.isFixed,
         'gl-absolute': this.openedYet && !this.isFixed
@@ -442,7 +442,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.wrapperComponent,{tag:"component",class:[_vm.$options.BASE_DROPDOWN_CLASS, { 'gl-display-block!': _vm.block }],on:{"close":_vm.close}},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.close.apply(null, arguments)}}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.wrapperComponent,{tag:"component",class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }],on:{"close":_vm.close}},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.close.apply(null, arguments)}}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/base_dropdown/constants.js

@@ -1,4 +1,4 @@
-const FIXED_WIDTH_CLASS = 'gl-w-31!';
+const FIXED_WIDTH_CLASS = '!gl-w-31';
 const DEFAULT_OFFSET = 4;
 
 export { DEFAULT_OFFSET, FIXED_WIDTH_CLASS };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -74,7 +74,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:_vm.borderClass},[(_vm.showHeader)?_c('div',{staticClass:"gl-pl-4 gl-py-2 gl-font-sm gl-font-weight-bold",attrs:{"id":_vm.nameId,"aria-hidden":"true"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.group.name))]})],2):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"gl-mb-0 gl-pl-0 gl-list-style-none",attrs:{"aria-labelledby":_vm.groupLabeledBy}},[_vm._t("default",function(){return _vm._l((_vm.group.items),function(item){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})})})],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:_vm.borderClass},[(_vm.showHeader)?_c('div',{staticClass:"gl-py-2 gl-pl-4 gl-text-sm gl-font-bold",attrs:{"id":_vm.nameId,"aria-hidden":"true"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.group.name))]})],2):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0",attrs:{"aria-labelledby":_vm.groupLabeledBy}},[_vm._t("default",function(){return _vm._l((_vm.group.items),function(item){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})})})],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/mock_data.js

@@ -26,7 +26,7 @@ const mockItems = [{
     console.log('CLOSED');
   },
   extraAttrs: {
-    class: 'gl-text-red-500!',
+    class: '!gl-text-red-500',
     rel: 'nofollow',
     'data-method': 'put'
   }
@@ -60,7 +60,7 @@ const mockItemsCustomItem = [{
     // eslint-disable-next-line no-console
     console.log('clicked!');
   },
-  wrapperClass: 'gl-sm-display-none!'
+  wrapperClass: 'sm:!gl-hidden'
 }];
 const mockGroupsCustomItem = [{
   name: 'Merge requests',