@gitlab/ui 114.7.1 → 114.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "114.7.1",
+  "version": "114.8.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -79,10 +79,10 @@
     "tailwind-config-viewer:export": "tailwind-config-viewer export ./tailwind-config-viewer-static"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.7.0",
+    "@floating-ui/dom": "1.7.1",
     "echarts": "^5.6.0",
     "iframe-resizer": "^4.3.2",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
     "vue-functional-data-merge": "^3.1.0",
@@ -97,7 +97,7 @@
     "vue": "^2.7.16"
   },
   "resolutions": {
-    "chokidar": "^3.5.2",
+    "chokidar": "^3.6.0",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1",
     "postcss": "8.5.3",
@@ -106,22 +106,22 @@
     "eslint-plugin-import": "2.31.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
+    "@babel/core": "^7.27.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.0.1",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.28.0",
+    "@eslint/js": "^9.29.0",
     "@gitlab/eslint-plugin": "20.7.1",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
     "@gitlab/svgs": "3.131.0",
-    "@jest/test-sequencer": "^29.7.0",
-    "@rollup/plugin-commonjs": "^11.1.0",
+    "@jest/test-sequencer": "^30.0.2",
+    "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
-    "@rollup/plugin-replace": "^2.3.2",
+    "@rollup/plugin-replace": "^2.4.2",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
     "@storybook/addon-essentials": "^7.6.20",
@@ -137,81 +137,81 @@
     "@storybook/vue3-webpack5": "^7.6.20",
     "@studiometa/stylelint-formatter-gitlab": "^0.0.1",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@vue/compat": "^3.5.13",
-    "@vue/compiler-sfc": "^3.5.13",
-    "@vue/server-renderer": "^3.5.13",
-    "@vue/test-utils": "1.3.0",
+    "@vue/compat": "^3.5.17",
+    "@vue/compiler-sfc": "^3.5.17",
+    "@vue/server-renderer": "^3.5.17",
+    "@vue/test-utils": "1.3.6",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
-    "@vue/vue2-jest": "29.0.0",
-    "@vue/vue3-jest": "^29.1.1",
+    "@vue/vue2-jest": "29.2.6",
+    "@vue/vue3-jest": "^29.2.6",
     "@yarnpkg/lockfile": "^1.1.0",
-    "acorn": "^8.11.3",
-    "acorn-walk": "^8.3.2",
+    "acorn": "^8.15.0",
+    "acorn-walk": "^8.3.4",
     "autoprefixer": "10.4.21",
     "axe-playwright": "^2.1.0",
-    "babel-jest": "29.0.1",
-    "babel-loader": "^8.0.5",
-    "cypress": "14.3.3",
-    "cypress-real-events": "^1.11.0",
+    "babel-jest": "29.7.0",
+    "babel-loader": "^8.4.1",
+    "cypress": "14.5.0",
+    "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
-    "emoji-regex": "^10.0.0",
+    "emoji-regex": "^10.4.0",
     "entities": "^4.5.0",
     "esbuild": "^0.18.0",
-    "eslint": "9.28.0",
-    "eslint-formatter-gitlab": "^6.0.0",
+    "eslint": "9.29.0",
+    "eslint-formatter-gitlab": "^6.0.1",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "5.0.1",
+    "eslint-plugin-cypress": "5.1.0",
     "eslint-plugin-storybook": "0.12.0",
-    "fuse.js": "^7.0.0",
+    "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
-    "glob": "10.3.3",
+    "glob": "10.4.5",
     "globby": "^11.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-circus": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "jest-image-snapshot": "^6.4.0",
-    "lefthook": "^1.10.1",
+    "jest-image-snapshot": "^6.5.1",
+    "lefthook": "^1.11.14",
     "markdownlint-cli": "^0.29.0",
-    "merge-cobertura": "^1.0.2",
+    "merge-cobertura": "^1.0.4",
     "mockdate": "^2.0.5",
-    "module-alias": "^2.2.2",
+    "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "pikaday": "^1.8.0",
-    "playwright": "^1.52.0",
-    "playwright-core": "^1.52.0",
+    "playwright": "^1.53.1",
+    "playwright-core": "^1.53.1",
     "postcss": "8.5.3",
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
-    "prettier": "3.3.2",
+    "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^2.53.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^2.79.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
-    "rollup-plugin-vue": "^5.1.6",
+    "rollup-plugin-vue": "^5.1.9",
     "sass": "^1.49.9",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "^10.5.2",
     "sass-true": "^6.1.0",
-    "start-server-and-test": "^1.10.6",
+    "start-server-and-test": "^1.15.4",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^4.3.3",
-    "stylelint": "16.8.1",
+    "style-dictionary": "^5.0.0",
+    "stylelint": "16.20.0",
     "tailwind-config-viewer": "2.0.4",
-    "tailwindcss": "3.4.4",
+    "tailwindcss": "3.4.17",
     "vue": "2.7.16",
-    "vue-loader": "^15.8.3",
-    "vue-loader-vue3": "npm:vue-loader@17",
+    "vue-loader": "^15.11.1",
+    "vue-loader-vue3": "npm:vue-loader@17.4.2",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "2.7.16",
     "vue-test-utils-compat": "^0.0.15",
-    "webpack": "^5.9.0",
-    "yargs": "^17.3.1",
+    "webpack": "^5.99.9",
+    "yargs": "^17.7.2",
     "yarn-deduplicate": "^6.0.2"
   }
 }

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -86,7 +86,7 @@
 
       @media (forced-colors: active) {
         background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-        border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+        border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
       }
     }
 
@@ -135,7 +135,7 @@
       &::before {
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+          border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
         }
       }
     }
@@ -147,7 +147,7 @@
 
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+          border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
         }
       }
 
@@ -165,7 +165,7 @@
       .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+          border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
         }
       }
     }

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

@@ -175,6 +175,11 @@ export default {
     },
     onFieldValidationUpdate(fieldName, invalidFeedback) {
       this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
+
+      this.$emit('field-validation', {
+        fieldName,
+        ...this.fieldValidationProps[fieldName],
+      });
     },
     onFieldBlur(fieldName) {
       this.setFieldDirty(fieldName);

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

@@ -14,6 +14,7 @@ $clear-button-size: 24px;
     padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
     @apply gl-py-4;
     @apply gl-text-base;
+    @apply gl-text-default;
     background-color: var(--gl-dropdown-search-background-color);
 
     &:focus {