@gitlab/ui 126.5.0 → 127.1.0

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

@@ -5,8 +5,6 @@ import GlButton from '../button/button';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlAlert',
   components: {

package/dist/components/base/avatar/avatar.js

@@ -4,8 +4,6 @@ import { getAvatarChar } from '../../../utils/string_utils';
 import { avatarSizeValidator } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const IDENTICON_BG_COUNT = 7;
 var script = {
   name: 'GlAvatar',

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

@@ -4,8 +4,6 @@ import GlIcon from '../icon/icon';
 import { logWarning } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const variantClass = {
   [badgeVariantOptions.neutral]: 'badge-neutral',
   [badgeVariantOptions.info]: 'badge-info',

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

@@ -8,8 +8,6 @@ import ClipboardButton from '../../shared_components/clipboard_button/clipboard_
 import GlBreadcrumbItem from './breadcrumb_item';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlBreadcrumb',
   components: {
@@ -36,7 +34,7 @@ var script = {
       validator: items => {
         return items.every(item => {
           const keys = Object.keys(item);
-          return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
+          return keys.includes('text') && item.text && (keys.includes('href') || keys.includes('to'));
         });
       }
     },
@@ -230,12 +228,6 @@ var script = {
         this.resizeObserver = null;
       }
       this.resetItems();
-    },
-    hideItemClass(item) {
-      // TODO once https://gitlab.com/gitlab-org/gitlab/-/issues/520089 is addressed:
-      // - Remove this hiding of empty breadcrumbs.
-      // - Tighten `items` validator to require non-empty `text`.
-      return !item.text ? 'gl-hidden' : '';
     }
   }
 };
@@ -244,7 +236,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('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:[_vm.hideItemClass(item), _vm.itemClass],attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({ref:"clipboardButton",staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
+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('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:_vm.itemClass,attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({ref:"clipboardButton",staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/button/button.js

@@ -10,8 +10,6 @@ import { SPACE, ENTER } from '../new_dropdowns/constants';
 import { glButtonConfig } from '../../../config';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlButton',
   components: {

package/dist/components/base/card/card.js

@@ -1,7 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlCard',
   props: {

package/dist/components/base/collapse/collapse.js

@@ -1,7 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlCollapse',
   model: {

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

@@ -9,8 +9,6 @@ import GlIcon from '../icon/icon';
 import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const pad = function (val) {
   let len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   return `0${val}`.slice(-len);

package/dist/components/base/drawer/drawer.js

@@ -3,8 +3,6 @@ import { maxZIndex, drawerVariants } from '../../../utils/constants';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlDrawer',
   components: {

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

@@ -1,7 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlForm'
 };

package/dist/components/base/icon/icon.js

@@ -4,8 +4,6 @@ import { logWarning } from '../../../utils/utils';
 import { iconSizeOptions, iconVariantOptions } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const knownIcons = new Set(iconsInfo.icons);
 
 /** This is a re-usable vue component for rendering a svg sprite icon

package/dist/components/base/illustration/illustration.js

@@ -3,8 +3,6 @@ import illustrationsInfo from '@gitlab/svgs/dist/illustrations.json';
 import { logWarning } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const knownIllustrations = illustrationsInfo.icons;
 
 /** This is a re-usable vue component for rendering a svg sprite icon

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

@@ -6,8 +6,6 @@ import GlLink from '../link/link';
 import GlTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlLabel',
   components: {

package/dist/components/base/link/link.js

@@ -13,8 +13,6 @@ import { attemptFocus, attemptBlur } from '../../../vendor/bootstrap-vue/src/uti
 import { linkVariantOptions, isVue3, linkVariantUnstyled, linkVariantInline, linkVariantMeta } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const ANCHOR_TAG = 'a';
 const NUXT_LINK_TAG = 'nuxt-link';
 const VUE_ROUTER_LINK_TAG = 'router-link';

package/dist/components/base/markdown/markdown.js

@@ -1,7 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlMarkdown',
   props: {

package/dist/components/base/modal/modal.js

@@ -6,8 +6,6 @@ import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 function validatorHelper(obj) {
   return Object.keys(obj).every(val => val === 'text' || val === 'attributes');
 }

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

@@ -9,8 +9,6 @@ import GlDisclosureDropdownGroup from './disclosure_dropdown_group';
 import { itemsValidator, hasOnlyListItems, isItem } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const ITEM_SELECTOR = `.${ITEM_CLASS}`;
 var script = {
   name: 'GlDisclosureDropdown',

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

@@ -15,8 +15,6 @@ import GlListboxGroup from './listbox_group';
 import { itemsValidator, isOption, flattenedOptions } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const ITEM_SELECTOR = '[role="option"]';
 const ITEM_NULL_KEY = Symbol('null-key');
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-dropdown-divider'];

package/dist/components/base/pagination/pagination.js

@@ -8,11 +8,9 @@ import GlIcon from '../icon/icon';
 import GlLink from '../link/link';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const pageRange = (from, to) => range(from, to + 1, 1);
 var script = {
-  name: 'Pagination',
+  name: 'GlPagination',
   components: {
     GlLink,
     GlIcon

package/dist/components/base/path/path.js

@@ -5,8 +5,6 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const BOUNDARY_WIDTH = 40;
 const PATH_ITEM_CLASS = 'gl-path-button';
 const PATH_ACTIVE_ITEM_CLASS = 'gl-path-active-item';

package/dist/components/base/popover/popover.js

@@ -4,8 +4,6 @@ import CloseButton from '../../shared_components/close_button/close_button';
 import { popoverPlacements } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const popoverRefName = 'bPopover';
 var script = {
   name: 'GlPopover',

package/dist/components/base/table/table.js

@@ -3,8 +3,6 @@ import { isDev, logWarning } from '../../../utils/utils';
 import { glTableLiteWarning, tableFullProps, tableFullSlots } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const shouldUseFullTable = _ref => {
   let {
     $attrs,

package/dist/components/base/tabs/tab/tab.js

@@ -5,8 +5,6 @@ import { logWarning } from '../../../../utils/utils';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlTab',
   components: {

package/dist/components/base/tabs/tabs/tabs.js

@@ -3,8 +3,6 @@ import { tabsButtonDefaults } from '../../../../utils/constants';
 import GlButton from '../../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const validatorHelper = obj => Object.keys(obj).every(val => val === 'text' || val === 'attributes');
 var script = {
   name: 'GlTabs',

package/dist/components/base/toggle/toggle.js

@@ -4,8 +4,6 @@ import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 let uuid = 0;
 var script = {
   name: 'GlToggle',

package/dist/components/base/token/token.js

@@ -3,8 +3,6 @@ import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlToken',
   components: {

package/dist/components/base/tooltip/tooltip.js

@@ -4,8 +4,6 @@ import tooltipMixin from '../../mixins/tooltip_mixin';
 import { getGlTooltipDefaultContainer } from '../../../directives/tooltip/container';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const tooltipRefName = 'bvTooltip';
 var script = {
   name: 'GlTooltip',

package/dist/components/charts/area/area.js

@@ -8,7 +8,21 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
+/**
+ * Area charts as of %12.10 support annotations.
+ * Annotations is composed of a dotted line and an arrow
+ * at the bottom. The dotted line is constructed
+ * with markLine and arrows with markPoint.
+ *
+ * Similar to how custom tooltips are displayed when area chart
+ * is hovered, a tooltip should be displayed when the annotation
+ * arrow is hovered. This component adds event listeners
+ * to figure out if mouse is hovered on charts to show tooltips.
+ * While that works for data points inside the grid, for arrows
+ * that live right under the chart, we use eCharts inbuilt
+ * event listeners to detect hover. Given this limitation,
+ * we use a separate tooltip for data point and arrow.
+ */
 
 var script = {
   name: 'GlAreaChart',

package/dist/components/charts/bar/bar.js

@@ -10,9 +10,6 @@ import ChartTooltip from '../shared/tooltip/tooltip';
 import { stackedPresentationOptions } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
-
 /**
  * `nameGap` in charts/config is set to 50 but it is not
  * used for bar charts as the axes are flipped. That is why

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

@@ -6,9 +6,6 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import { debounceByAnimationFrame } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
-
 /**
  * Allowed values by eCharts
  * https://echarts.apache.org/en/api.html#echartsInstance.resize

package/dist/components/charts/column/column.js

@@ -6,8 +6,6 @@ import Chart from '../chart/chart';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const yAxisDefaults = {
   ...yAxis,
   nameLocation: 'center',

package/dist/components/charts/gauge/gauge.js

@@ -5,8 +5,6 @@ import { gaugeSafeHues, gaugeWarningHue, gaugeNeutralHues } from '../../../utils
 import Chart from '../chart/chart';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const AXIS_LABEL_FONT_SIZE_PX = 14;
 const ARC_RADIUS = '80%';
 const DETAIL_FONT_SIZE_PX = 30;

package/dist/components/charts/heatmap/heatmap.js

@@ -10,8 +10,6 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const defaultOptions = {
   visualMap: {
     show: false,

package/dist/components/charts/legend/legend.js

@@ -6,8 +6,6 @@ import GlTruncate from '../../utilities/truncate/truncate';
 import GlChartSeriesLabel from '../series_label/series_label';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlChartLegend',
   components: {

package/dist/components/charts/line/line.js

@@ -8,7 +8,23 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
+/**
+ * Line charts as of %12.10 support annotations.
+ * Annotations is composed of a dotted line and an arrow
+ * at the bottom. The dotted line is constructed
+ * with markLine and arrows with markPoint. Most of this
+ * logic is in GitLab and should be eventually moved to
+ * GitLab UI https://gitlab.com/gitlab-org/gitlab/-/issues/213390.
+ *
+ * Similar to how custom tooltips are displayed when line chart
+ * is hovered, a tooltip should be displayed when the annotation
+ * arrow is hovered. This component adds event listeners
+ * to figure out if mouse is hovered on charts to show tooltips.
+ * While that works for data points inside the grid, for arrows
+ * that live right under the chart, we use eCharts inbuilt
+ * event listeners to detect hover. Given this limitation,
+ * we use a separate tooltip for data point and arrow.
+ */
 
 var script = {
   name: 'GlLineChart',

package/dist/components/charts/shared/tooltip/tooltip.js

@@ -7,8 +7,6 @@ import { getTooltipAxisConfig, getTooltipTitle, getTooltipContent, getTooltipPar
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlChartTooltip',
   components: {

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

@@ -8,9 +8,6 @@ import Chart from '../chart/chart';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
-
 // the padding is needed so the mark points don't overflow when visible
 const gridPadding = symbolSize / 2;
 const generateGradient = colors => {

package/dist/components/dashboards/dashboard_layout/validators.js

@@ -2,6 +2,11 @@ const dashboardConfigValidator = config => {
   if (config.panels) {
     if (!Array.isArray(config.panels)) return false;
     if (!config.panels.every(panel => panel.id && panel.gridAttributes)) return false;
+
+    // Validate that all panel IDs are unique
+    const panelIds = config.panels.map(panel => panel.id);
+    const uniquePanelIds = new Set(panelIds);
+    if (panelIds.length !== uniquePanelIds.size) return false;
   }
   return true;
 };

package/dist/components/utilities/intersperse/intersperse.js

@@ -6,8 +6,6 @@ import { insert, intersperse } from '../../../utils/data_utils';
 import { isVnodeEmpty } from '../../../utils/is_slot_empty';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const filterEmptyNodesVue2 = filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
 const {
   Fragment

package/dist/components/utilities/sprintf/sprintf.js

@@ -2,8 +2,7 @@ import has from 'lodash/has';
 import isString from 'lodash/isString';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
+/* eslint-disable no-continue */
 const PREFIX = '%{';
 const SUFFIX = '}';
 const START_SUFFIX = 'Start';

package/dist/components/utilities/truncate/truncate.js

@@ -3,8 +3,6 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import { POSITION, ZERO_WIDTH_SPACE } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlTruncate',
   POSITION,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "126.5.0",
+  "version": "127.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -131,7 +131,7 @@
     "autoprefixer": "10.4.23",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.8.1",
+    "cypress": "15.8.2",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -165,7 +165,7 @@
     "start-server-and-test": "^2.1.3",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.1.1",
+    "style-dictionary": "^5.1.3",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { translate } from '../../../utils/i18n';
 import {

package/src/components/base/avatar/avatar.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isNumber from 'lodash/isNumber';
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';

package/src/components/base/badge/badge.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import GlLink from '../link/link.vue';
 import {

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import debounce from 'lodash/debounce';
 import { translate } from '../../../utils/i18n';
@@ -32,7 +31,9 @@ export default {
       validator: (items) => {
         return items.every((item) => {
           const keys = Object.keys(item);
-          return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
+          return (
+            keys.includes('text') && item.text && (keys.includes('href') || keys.includes('to'))
+          );
         });
       },
     },
@@ -233,12 +234,6 @@ export default {
       }
       this.resetItems();
     },
-    hideItemClass(item) {
-      // TODO once https://gitlab.com/gitlab-org/gitlab/-/issues/520089 is addressed:
-      // - Remove this hiding of empty breadcrumbs.
-      // - Tighten `items` validator to require non-empty `text`.
-      return !item.text ? 'gl-hidden' : '';
-    },
   },
 };
 </script>
@@ -270,7 +265,7 @@ export default {
         :to="item.to"
         :size="size"
         :aria-current="getAriaCurrentAttr(index)"
-        :class="[hideItemClass(item), itemClass]"
+        :class="itemClass"
         ><template #default>
           <gl-avatar
             v-if="item.avatarPath"

package/src/components/base/button/button.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import GlLink from '../link/link.vue';
 import {

package/src/components/base/card/card.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   name: 'GlCard',

package/src/components/base/collapse/collapse.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   name: 'GlCollapse',

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';

package/src/components/base/drawer/drawer.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isEmpty from 'lodash/isEmpty';
 import { maxZIndex, drawerVariants } from '../../../utils/constants';

package/src/components/base/dropdown/dropdown.vue

@@ -1,4 +1,4 @@
-<!-- eslint-disable vue/multi-word-component-names vue/one-component-per-file -->
+<!-- eslint-disable vue/one-component-per-file -->
 <script>
 import Vue from 'vue';
 import merge from 'lodash/merge';

package/src/components/base/form/form.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   name: 'GlForm',

package/src/components/base/icon/icon.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import iconsPath from '@gitlab/svgs/dist/icons.svg';
 import iconsInfo from '@gitlab/svgs/dist/icons.json';

package/src/components/base/illustration/illustration.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import illustrationsPath from '@gitlab/svgs/dist/illustrations.svg';
 import illustrationsInfo from '@gitlab/svgs/dist/illustrations.json';

package/src/components/base/label/label.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { labelColorOptions } from '../../../utils/constants';
 import { colorFromBackground } from '../../../utils/utils';

package/src/components/base/link/link.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';

package/src/components/base/markdown/markdown.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   name: 'GlMarkdown',

package/src/components/base/modal/modal.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BModal } from '../../../vendor/bootstrap-vue/src/components/modal/modal';
 import { translate } from '../../../utils/i18n';

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';

package/src/components/base/pagination/pagination.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import debounce from 'lodash/debounce';
 import isFunction from 'lodash/isFunction';
@@ -12,7 +11,7 @@ import GlLink from '../link/link.vue';
 const pageRange = (from, to) => range(from, to + 1, 1);
 
 export default {
-  name: 'Pagination',
+  name: 'GlPagination',
   components: {
     GlLink,
     GlIcon,

package/src/components/base/path/path.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import uniqueId from 'lodash/uniqueId';

package/src/components/base/popover/popover.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BPopover } from '../../../vendor/bootstrap-vue/src/components/popover/popover';
 import tooltipMixin from '../../mixins/tooltip_mixin';

package/src/components/base/table/table.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTable } from '../../../vendor/bootstrap-vue/src/components/table/table';
 import { logWarning, isDev } from '../../../utils/utils';

package/src/components/base/tabs/tab/tab.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isPlainObject from 'lodash/isPlainObject';
 import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';

package/src/components/base/tabs/tabs/tabs.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTabs } from '../../../../vendor/bootstrap-vue/src/components/tabs/tabs';
 import { tabsButtonDefaults } from '../../../../utils/constants';

package/src/components/base/toggle/toggle.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import uniqueId from 'lodash/uniqueId';
 

package/src/components/base/token/token.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { tokenVariants } from '../../../utils/constants';
 import { translate } from '../../../utils/i18n';

package/src/components/base/tooltip/tooltip.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTooltip } from '../../../vendor/bootstrap-vue/src/components/tooltip/tooltip';
 import { tooltipDelay } from '../../../utils/constants';

package/src/components/charts/area/area.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /**
  * Area charts as of %12.10 support annotations.

package/src/components/charts/bar/bar.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import merge from 'lodash/merge';

package/src/components/charts/column/column.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import {

package/src/components/charts/gauge/gauge.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import uniq from 'lodash/uniq';

package/src/components/charts/heatmap/heatmap.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import { GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_100 } from '../../../tokens/build/js/tokens';

package/src/components/charts/legend/legend.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import { defaultFontSize } from '../../../utils/charts/config';

package/src/components/charts/line/line.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /**
  * Line charts as of %12.10 support annotations.

package/src/components/charts/shared/tooltip/tooltip.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import { uid, debounceByAnimationFrame } from '../../../../utils/utils';

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import isNil from 'lodash/isNil';

package/src/components/dashboards/dashboard_layout/validators.js

@@ -2,6 +2,11 @@ export const dashboardConfigValidator = (config) => {
   if (config.panels) {
     if (!Array.isArray(config.panels)) return false;
     if (!config.panels.every((panel) => panel.id && panel.gridAttributes)) return false;
+
+    // Validate that all panel IDs are unique
+    const panelIds = config.panels.map((panel) => panel.id);
+    const uniquePanelIds = new Set(panelIds);
+    if (panelIds.length !== uniquePanelIds.size) return false;
   }
 
   return true;

package/src/components/utilities/intersperse/intersperse.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import Vue from 'vue';
 import compose from 'lodash/fp/compose';

package/src/components/utilities/sprintf/sprintf.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /* eslint-disable no-continue */
 import has from 'lodash/has';

package/src/components/utilities/truncate/truncate.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';

package/tailwind.defaults.js

@@ -44,6 +44,18 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
         'border-color': 'var(--gl-action-neutral-border-color-active)',
       },
     },
+    '.bg-action-neutral': {
+      'background-color': 'var(--gl-action-neutral-background-color-default)',
+      '&:hover': {
+        'background-color': 'var(--gl-action-neutral-background-color-hover)',
+      },
+      '&:focus': {
+        'background-color': 'var(--gl-action-neutral-background-color-focus)',
+      },
+      '&:active': {
+        'background-color': 'var(--gl-action-neutral-background-color-active)',
+      },
+    },
     '.animate-skeleton-loader': {
       overflow: 'hidden',
       'max-width': '32rem',