@gitlab/ui 136.3.2 → 137.0.0

package/dist/components/base/alert/alert.js

@@ -192,19 +192,19 @@ var script = {
       /**
        * Emitted when the primary action button is clicked.
        *
-       * @event primaryAction
+       * @event primary-action
        * @type {object}
        */
-      this.$emit('primaryAction', event);
+      this.$emit('primary-action', event);
     },
     secondaryButtonClicked(event) {
       /**
        * Emitted when the secondary action button is clicked.
        *
-       * @event secondaryAction
+       * @event secondary-action
        * @type {object}
        */
-      this.$emit('secondaryAction', event);
+      this.$emit('secondary-action', event);
     },
     onDismiss() {
       /**

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

@@ -417,7 +417,7 @@ var script = {
       /**
        * Emitted when the datepicker draws a new month.
        */
-      this.$emit('monthChange');
+      this.$emit('month-change');
     },
     onKeydown() {
       if (this.textInput === '') {

package/dist/components/base/infinite_scroll/infinite_scroll.js

@@ -77,9 +77,18 @@ var script = {
     }
   },
   async mounted() {
+    var _this = this;
     // Scroll to bottom for reverse effect
     await this.$nextTick();
-    if (this.$listeners.topReached && !this.$listeners.bottomReached) {
+
+    // Check both kebab-case (Vue 2) and camelCase (@vue/compat) $listeners.
+    const listening = function () {
+      for (var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++) {
+        names[_key] = arguments[_key];
+      }
+      return names.some(name => _this.$listeners[name]);
+    };
+    if (listening('top-reached', 'topReached') && !listening('bottom-reached', 'bottomReached')) {
       this.scrollDown();
     }
   },
@@ -124,13 +133,13 @@ var script = {
       /**
        * Emitted when item container is scrolled to the top
        */
-      this.$emit('topReached');
+      this.$emit('top-reached');
     }, throttleDuration),
     bottomReached: throttle(function bottomReachedThrottled() {
       /**
        * Emitted when item container is scrolled to the bottom
        */
-      this.$emit('bottomReached');
+      this.$emit('bottom-reached');
     }, throttleDuration),
     itemsListHeight() {
       return this.$refs.infiniteContainer.scrollHeight;

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

@@ -1,8 +1,8 @@
 // base dropdown events
 const GL_DROPDOWN_SHOWN = 'shown';
 const GL_DROPDOWN_HIDDEN = 'hidden';
-const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
-const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
+const GL_DROPDOWN_BEFORE_CLOSE = 'before-close';
+const GL_DROPDOWN_FOCUS_CONTENT = 'focus-content';
 
 // KeyboardEvent.code values
 const ARROW_DOWN = 'ArrowDown';

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

@@ -270,7 +270,7 @@ var script = {
       /**
        * Emitted when dropdown is about to be closed
        *
-       * @event beforeClose
+       * @event before-close
        */
       this.$emit(GL_DROPDOWN_BEFORE_CLOSE, event);
     },

package/dist/components/base/sorting/sorting.js

@@ -145,7 +145,7 @@ var script = {
        *
        * @property {boolean} isAscending
        */
-      this.$emit('sortDirectionChange', newDirection);
+      this.$emit('sort-direction-change', newDirection);
     },
     onSortByChanged(event) {
       /**
@@ -157,7 +157,7 @@ var script = {
        *
        * @property {string|number} value
        */
-      this.$emit('sortByChange', event);
+      this.$emit('sort-by-change', event);
     }
   }
 };

package/dist/components/charts/chart/chart.js

@@ -172,7 +172,7 @@ var script = {
        * @property {object} chart The chart instance
        * @property {object} params A params object, see also https://echarts.apache.org/en/api.html#events.Mouse%20events
        */
-      this.$emit('chartItemClicked', {
+      this.$emit('chart-item-clicked', {
         chart: this.chart,
         params
       });

package/dist/components/charts/sparkline/sparkline.js

@@ -261,10 +261,10 @@ var script = {
       /**
        * Emitted when the chart is created.
        * The payload contains the echarts instance.
-       * @event chartCreated
+       * @event chart-created
        * @type {object}
        */
-      this.$emit('chartCreated', chartInstance);
+      this.$emit('chart-created', chartInstance);
     },
     handleResize() {
       this.chartInstance.resize();

package/dist/components/dashboards/dashboard_panel/dashboard_panel.js

@@ -201,7 +201,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',{staticClass:"gl-border gl-h-full gl-rounded-lg gl-bg-default gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-mb-3 gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[(_vm.loading)?_c('gl-skeleton-loader',{attrs:{"lines":1}}):_c('div',{staticClass:"gl-flex gl-items-center gl-gap-2 gl-overflow-hidden"},[(_vm.hasTitleIcon)?_c('gl-icon',{class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-min-w-0"},[_c('div',{staticClass:"gl-flex gl-items-center gl-gap-2"},[(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-min-w-0 gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-min-w-5",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId,"css-classes":_vm.titlePopoverClasses},scopedSlots:_vm._u([(_vm.hasInfoPopoverTitleSlot)?{key:"title",fn:function(){return [_vm._t("info-popover-title")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.hasInfoPopoverContentSlot)?[_vm._t("info-popover-content")]:_vm._e(),_vm._v(" "),(!_vm.hasInfoPopoverContentSlot)?[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
 var content = ref.content;
-return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v(" "+_vm._s(_vm.titlePopover.description)+" ")]]:_vm._e()],2)]:_vm._e()],2),_vm._v(" "),(_vm.subtitle)?_c('p',{staticClass:"gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle",attrs:{"data-testid":"panel-subtitle"}},[_vm._v("\n            "+_vm._s(_vm.subtitle)+"\n          ")]):_vm._e()])],1),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
+return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v(" "+_vm._s(_vm.titlePopover.description)+" ")]]:_vm._e()],2)]:_vm._e()],2),_vm._v(" "),(_vm.subtitle)?_c('p',{staticClass:"gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle",attrs:{"data-testid":"panel-subtitle"}},[_vm._v("\n            "+_vm._s(_vm.subtitle)+"\n          ")]):_vm._e()])],1),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdown-open')},"hidden":function($event){return _vm.$emit('dropdown-closed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
 var item = ref.item;
 return [_c('span',[_vm._v(_vm._s(item.text))])]}}],null,false,3418607560)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()],1),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n          "+_vm._s(_vm.loadingDelayedText)+"\n        ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],2)])};
 var __vue_staticRenderFns__ = [];

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

@@ -62,8 +62,10 @@ const BVTooltipTemplate = /*#__PURE__*/extend({
     templateAttributes() {
       const id = this.id;
       return {
-        // Apply attributes from root tooltip component
-        ...this.bvParent.bvParent.$attrs,
+        // Apply attributes from root tooltip component. A directive has no such component, so
+        // `bvParent.bvParent` is the component holding the target element, whose attributes
+        // must not leak onto the template.
+        ...(this.bvParent.isDirective ? {} : this.bvParent.bvParent.$attrs),
         id,
         role: 'tooltip',
         tabindex: '-1',

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

@@ -90,7 +90,9 @@ const templateData = {
   // ID to use for tooltip/popover
   id: null,
   // Flag used by directives only, for HTML content
-  html: false
+  html: false,
+  // Flag used by directives only, to suppress attribute forwarding
+  isDirective: false
 };
 
 // --- Main component ---

package/dist/vendor/bootstrap-vue/src/directives/tooltip/tooltip.js

@@ -217,7 +217,8 @@ const applyTooltip = (el, bindings, vnode) => {
     id: config.id,
     interactive: config.interactive,
     disabled: config.disabled,
-    html: config.html
+    html: config.html,
+    isDirective: true
   };
   const oldData = el[BV_TOOLTIP].__bv_prev_data__;
   el[BV_TOOLTIP].__bv_prev_data__ = data;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "136.3.2",
+  "version": "137.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/alert/alert.vue

@@ -203,19 +203,19 @@ export default {
       /**
        * Emitted when the primary action button is clicked.
        *
-       * @event primaryAction
+       * @event primary-action
        * @type {object}
        */
-      this.$emit('primaryAction', event);
+      this.$emit('primary-action', event);
     },
     secondaryButtonClicked(event) {
       /**
        * Emitted when the secondary action button is clicked.
        *
-       * @event secondaryAction
+       * @event secondary-action
        * @type {object}
        */
-      this.$emit('secondaryAction', event);
+      this.$emit('secondary-action', event);
     },
     onDismiss() {
       /**

package/src/components/base/datepicker/datepicker.vue

@@ -434,7 +434,7 @@ export default {
       /**
        * Emitted when the datepicker draws a new month.
        */
-      this.$emit('monthChange');
+      this.$emit('month-change');
     },
     onKeydown() {
       if (this.textInput === '') {

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -79,7 +79,11 @@ export default {
   async mounted() {
     // Scroll to bottom for reverse effect
     await this.$nextTick();
-    if (this.$listeners.topReached && !this.$listeners.bottomReached) {
+
+    // Check both kebab-case (Vue 2) and camelCase (@vue/compat) $listeners.
+    const listening = (...names) => names.some((name) => this.$listeners[name]);
+
+    if (listening('top-reached', 'topReached') && !listening('bottom-reached', 'bottomReached')) {
       this.scrollDown();
     }
   },
@@ -117,13 +121,13 @@ export default {
       /**
        * Emitted when item container is scrolled to the top
        */
-      this.$emit('topReached');
+      this.$emit('top-reached');
     }, throttleDuration),
     bottomReached: throttle(function bottomReachedThrottled() {
       /**
        * Emitted when item container is scrolled to the bottom
        */
-      this.$emit('bottomReached');
+      this.$emit('bottom-reached');
     }, throttleDuration),
     itemsListHeight() {
       return this.$refs.infiniteContainer.scrollHeight;

package/src/components/base/new_dropdowns/constants.js

@@ -1,8 +1,8 @@
 // base dropdown events
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
-export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
-export const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
+export const GL_DROPDOWN_BEFORE_CLOSE = 'before-close';
+export const GL_DROPDOWN_FOCUS_CONTENT = 'focus-content';
 
 // KeyboardEvent.code values
 export const ARROW_DOWN = 'ArrowDown';

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -296,7 +296,7 @@ export default {
       /**
        * Emitted when dropdown is about to be closed
        *
-       * @event beforeClose
+       * @event before-close
        */
       this.$emit(GL_DROPDOWN_BEFORE_CLOSE, event);
     },

package/src/components/base/sorting/sorting.vue

@@ -152,7 +152,7 @@ export default {
        *
        * @property {boolean} isAscending
        */
-      this.$emit('sortDirectionChange', newDirection);
+      this.$emit('sort-direction-change', newDirection);
     },
     onSortByChanged(event) {
       /**
@@ -164,7 +164,7 @@ export default {
        *
        * @property {string|number} value
        */
-      this.$emit('sortByChange', event);
+      this.$emit('sort-by-change', event);
     },
   },
 };

package/src/components/charts/chart/chart.vue

@@ -171,7 +171,7 @@ export default {
        * @property {object} chart The chart instance
        * @property {object} params A params object, see also https://echarts.apache.org/en/api.html#events.Mouse%20events
        */
-      this.$emit('chartItemClicked', { chart: this.chart, params });
+      this.$emit('chart-item-clicked', { chart: this.chart, params });
     },
     handleResize() {
       this.chart.resize();

package/src/components/charts/sparkline/sparkline.vue

@@ -210,10 +210,10 @@ export default {
       /**
        * Emitted when the chart is created.
        * The payload contains the echarts instance.
-       * @event chartCreated
+       * @event chart-created
        * @type {object}
        */
-      this.$emit('chartCreated', chartInstance);
+      this.$emit('chart-created', chartInstance);
     },
     handleResize() {
       this.chartInstance.resize();

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -290,8 +290,8 @@ export default {
             category="tertiary"
             positioning-strategy="fixed"
             size="small"
-            @shown="$emit('dropdownOpen')"
-            @hidden="$emit('dropdownClosed')"
+            @shown="$emit('dropdown-open')"
+            @hidden="$emit('dropdown-closed')"
           >
             <template #list-item="{ item }">
               <span>{{ item.text }}</span>

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -5795,6 +5795,40 @@
         "cssWithValue": "var(--gl-feedback-brand-background-color)"
       }
     },
+    "application-chrome": {
+      "key": "{application-chrome.background.color}",
+      "$value": "#050506",
+      "$type": "color",
+      "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
+      "$extensions": {
+        "com.figma.scopes": [
+          "FRAME_FILL",
+          "SHAPE_FILL"
+        ]
+      },
+      "filePath": "src/tokens/contextual/application-chrome.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "{color.neutral.1000}",
+        "$type": "color",
+        "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
+        "$extensions": {
+          "com.figma.scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "key": "{application-chrome.background.color}"
+      },
+      "name": "APPLICATION_CHROME_BACKGROUND_COLOR",
+      "attributes": {},
+      "path": [
+        "application-chrome",
+        "background",
+        "color"
+      ],
+      "cssWithValue": "var(--gl-application-chrome-background-color)"
+    },
     "dropdown": {
       "key": "{dropdown.background.color}",
       "$value": "#28272d",

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -5795,6 +5795,40 @@
         "cssWithValue": "var(--gl-feedback-brand-background-color)"
       }
     },
+    "application-chrome": {
+      "key": "{application-chrome.background.color}",
+      "$value": "#ececef",
+      "$type": "color",
+      "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
+      "$extensions": {
+        "com.figma.scopes": [
+          "FRAME_FILL",
+          "SHAPE_FILL"
+        ]
+      },
+      "filePath": "src/tokens/contextual/application-chrome.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "{color.neutral.50}",
+        "$type": "color",
+        "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
+        "$extensions": {
+          "com.figma.scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "key": "{application-chrome.background.color}"
+      },
+      "name": "APPLICATION_CHROME_BACKGROUND_COLOR",
+      "attributes": {},
+      "path": [
+        "application-chrome",
+        "background",
+        "color"
+      ],
+      "cssWithValue": "var(--gl-application-chrome-background-color)"
+    },
     "dropdown": {
       "key": "{dropdown.background.color}",
       "$value": "#fff",

package/src/tokens/build/tailwind/tokens.cjs

@@ -430,6 +430,7 @@ const backgroundColor = {
   ...backgroundColors,
   ...statusBackgroundColors,
   ...feedbackBackgroundColors,
+  'application-chrome': 'var(--gl-application-chrome-background-color)',
   dropdown: 'var(--gl-dropdown-background-color)',
   control: {
     default: 'var(--gl-control-background-color-default)',

package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip-template.js

@@ -70,8 +70,10 @@ export const BVTooltipTemplate = /*#__PURE__*/ extend({
       const { id } = this
 
       return {
-        // Apply attributes from root tooltip component
-        ...this.bvParent.bvParent.$attrs,
+        // Apply attributes from root tooltip component. A directive has no such component, so
+        // `bvParent.bvParent` is the component holding the target element, whose attributes
+        // must not leak onto the template.
+        ...(this.bvParent.isDirective ? {} : this.bvParent.bvParent.$attrs),
 
         id,
         role: 'tooltip',

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

@@ -130,7 +130,9 @@ const templateData = {
   // ID to use for tooltip/popover
   id: null,
   // Flag used by directives only, for HTML content
-  html: false
+  html: false,
+  // Flag used by directives only, to suppress attribute forwarding
+  isDirective: false
 }
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.js

@@ -225,7 +225,8 @@ const applyTooltip = (el, bindings, vnode) => {
     id: config.id,
     interactive: config.interactive,
     disabled: config.disabled,
-    html: config.html
+    html: config.html,
+    isDirective: true
   }
   const oldData = el[BV_TOOLTIP].__bv_prev_data__
   el[BV_TOOLTIP].__bv_prev_data__ = data