@gitlab/ui 136.3.2 → 137.0.1

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.1",
   "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/base/toggle/toggle.scss

@@ -82,7 +82,9 @@ $toggle-height: 2.5 * $grid-size;
   @include gl-prefers-reduced-motion-transition;
 
   @media (forced-colors: active) {
-    border: 1px solid;
+    outline: 1px solid CanvasText !important; // stylelint-disable-line scale-unlimited/declaration-strict-value
+    outline-offset: -1px;
+    transition: none;
   }
 
   &::selection,
@@ -136,6 +138,10 @@ $toggle-height: 2.5 * $grid-size;
     transition: transform $gl-transition-duration-medium $gl-easing-out-cubic;
     @include gl-prefers-reduced-motion-transition;
 
+    @media (forced-colors: active) {
+      transition: none;
+    }
+
     &::before {
       content: "";
       @apply gl-absolute;
@@ -147,6 +153,11 @@ $toggle-height: 2.5 * $grid-size;
         transform $gl-transition-duration-medium $gl-easing-out-cubic,
         background-color $gl-transition-duration-medium $gl-easing-out-cubic;
       @include gl-prefers-reduced-motion-transition;
+
+      @media (forced-colors: active) {
+        background-color: CanvasText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+        transition: none;
+      }
     }
 
     > svg {
@@ -162,6 +173,7 @@ $toggle-height: 2.5 * $grid-size;
       display: none;
 
       @media (forced-colors: active) {
+        color: Canvas; // stylelint-disable-line scale-unlimited/declaration-strict-value
         display: block;
       }
     }
@@ -198,6 +210,14 @@ $toggle-height: 2.5 * $grid-size;
       );
     }
 
+    @media (forced-colors: active) {
+      background-color: CanvasText !important; // stylelint-disable-line scale-unlimited/declaration-strict-value
+
+      svg {
+        color: CanvasText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+      }
+    }
+
     .toggle-icon {
       transform: translateX($toggle-translate-width);
     }
@@ -223,6 +243,10 @@ $toggle-height: 2.5 * $grid-size;
 
     .toggle-icon::before {
       background-color: var(--gl-toggle-switch-background-color-unchecked-disabled);
+
+      @media (forced-colors: active) {
+        background-color: GrayText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+      }
     }
 
     &:hover .toggle-icon::before,
@@ -263,6 +287,10 @@ $toggle-height: 2.5 * $grid-size;
         $important: true
       );
     }
+
+    @media (forced-colors: active) {
+      background-color: GrayText !important; // stylelint-disable-line scale-unlimited/declaration-strict-value
+    }
   }
 
   // A loading toggle renders a spinner in place of the thumb, so the track is

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