@gitlab/ui 118.1.0 → 118.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "118.1.0",
+  "version": "118.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -70,7 +70,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.7.3",
     "echarts": "^5.6.0",
-    "gridstack": "^12.3.0",
+    "gridstack": "^12.3.3",
     "iframe-resizer": "^4.4.5",
     "lodash": "^4.17.21",
     "popper.js": "^1.16.1",
@@ -95,10 +95,10 @@
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
+    "@babel/core": "^7.28.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.0",
@@ -138,7 +138,7 @@
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
-    "esbuild": "^0.25.8",
+    "esbuild": "^0.25.9",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",
     "globby": "^14.1.0",

package/src/components/base/pagination/pagination.scss

@@ -29,7 +29,7 @@
   @apply gl-text-center;
   @apply gl-border-1;
   @apply gl-border-solid;
-  @include gl-action-neutral-colors;
+  @apply gl-action-neutral-colors;
   @include gl-prefers-reduced-motion-transition;
 
   &:hover {

package/src/components/base/tabs/tabs/tabs.scss

@@ -16,7 +16,7 @@
   @apply gl-justify-center;
   @apply gl-border;
   @apply gl-h-full;
-  @include gl-action-neutral-colors;
+  @apply gl-action-neutral-colors;
   transition:
     box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
     background-color $gl-transition-duration-medium $gl-easing-out-cubic,
@@ -158,7 +158,7 @@
 
 .gl-tabs-fade-icon-button {
   @apply gl-border;
-  @include gl-action-neutral-colors;
+  @apply gl-action-neutral-colors;
   @apply gl-p-0;
   @apply gl-h-full;
 }

package/src/components/regions/empty_state/empty_state.vue

@@ -15,6 +15,19 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The header tag used in the empty state component (h1/h2/h3/h4/h5/h6).
+     * For accessibility this should be set to an appropriate value in the context where the component is used.
+     * Defaults to `h2`
+     */
+    headerLevel: {
+      type: Number,
+      required: false,
+      default: 2,
+      validator(value) {
+        return value > 0 && value <= 6;
+      },
+    },
     /**
      * The illustration's URL.
      */
@@ -94,6 +107,10 @@ export default {
     },
   },
   computed: {
+    headerComponent() {
+      const level = this.headerLevel;
+      return `h${level}`;
+    },
     height() {
       return this.shouldPreventImageReflow ? this.svgHeight : null;
     },
@@ -141,12 +158,13 @@ export default {
           Overrides the `title` prop.
         -->
       <slot ref="title" name="title">
-        <h1
+        <component
+          :is="headerComponent"
           class="gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-36"
           :class="compact ? 'h5' : 'h4'"
         >
           {{ title }}
-        </h1>
+        </component>
       </slot>
       <p
         v-if="description || $scopedSlots.description"

package/src/scss/mixins.scss

@@ -170,30 +170,6 @@
   }
 }
 
-@mixin gl-action-neutral-colors {
-  color: var(--gl-action-neutral-foreground-color-default);
-  background-color: var(--gl-action-neutral-background-color-default);
-  border-color: var(--gl-action-neutral-border-color-default);
-
-  &:hover {
-    color: var(--gl-action-neutral-foreground-color-hover);
-    background-color: var(--gl-action-neutral-background-color-hover);
-    border-color: var(--gl-action-neutral-border-color-hover);
-  }
-
-  &:focus {
-    color: var(--gl-action-neutral-foreground-color-focus);
-    background-color: var(--gl-action-neutral-background-color-focus);
-    border-color: var(--gl-action-neutral-border-color-focus);
-  }
-
-  &:active {
-    color: var(--gl-action-neutral-foreground-color-active);
-    background-color: var(--gl-action-neutral-background-color-active);
-    border-color: var(--gl-action-neutral-border-color-active);
-  }
-}
-
 @mixin gl-prefers-reduced-motion-transition {
   @media (prefers-reduced-motion) {
     transition-duration: .01ms !important;

package/tailwind.defaults.js

@@ -49,6 +49,26 @@ const spacing = {
 
 function addCustomDefinitions({ addComponents, addUtilities }) {
   addComponents({
+    '.action-neutral-colors': {
+      color: 'var(--gl-action-neutral-foreground-color-default)',
+      'background-color': 'var(--gl-action-neutral-background-color-default)',
+      'border-color': 'var(--gl-action-neutral-border-color-default)',
+      '&:hover': {
+        color: 'var(--gl-action-neutral-foreground-color-hover)',
+        'background-color': 'var(--gl-action-neutral-background-color-hover)',
+        'border-color': 'var(--gl-action-neutral-border-color-hover)',
+      },
+      '&:focus': {
+        color: 'var(--gl-action-neutral-foreground-color-focus)',
+        'background-color': 'var(--gl-action-neutral-background-color-focus)',
+        'border-color': 'var(--gl-action-neutral-border-color-focus)',
+      },
+      '&:active': {
+        color: 'var(--gl-action-neutral-foreground-color-active)',
+        'background-color': 'var(--gl-action-neutral-background-color-active)',
+        'border-color': 'var(--gl-action-neutral-border-color-active)',
+      },
+    },
     '.animate-skeleton-loader': {
       overflow: 'hidden',
       'max-width': '32rem',