@gitlab/ui 134.1.2 → 134.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "134.1.2",
+  "version": "134.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -92,7 +92,7 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.3.6",
-    "postcss": "8.5.14",
+    "postcss": "8.5.15",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -146,17 +146,18 @@
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.3.0",
-    "jest-circus": "30.3.0",
-    "jest-environment-jsdom": "30.3.0",
+    "jest": "30.4.2",
+    "jest-circus": "30.4.2",
+    "jest-environment-jsdom": "30.4.1",
+    "jest-environment-node": "30.4.1",
     "jest-image-snapshot": "^6.5.2",
-    "merge-cobertura": "^1.0.8",
+    "merge-cobertura": "^1.0.9",
     "mockdate": "^3.0.5",
     "module-alias": "^2.3.4",
     "pikaday": "^1.8.0",
     "playwright": "^1.60.0",
     "playwright-core": "^1.60.0",
-    "postcss": "8.5.14",
+    "postcss": "8.5.15",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",
@@ -167,13 +168,13 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.99.0",
+    "sass": "^1.100.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",
     "storybook": "^7.6.24",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.4.0",
+    "style-dictionary": "^5.4.1",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

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

@@ -101,6 +101,22 @@ export default {
       this.updateValueAsDate();
       this.$emit('change', $event);
     },
+    onKeydown($event) {
+      /**
+       * Emitted when a key is pressed inside the date input.
+       *
+       * @event keydown
+       */
+      this.$emit('keydown', $event);
+    },
+    onBlur($event) {
+      /**
+       * Emitted when the date input loses focus.
+       *
+       * @event blur
+       */
+      this.$emit('blur', $event);
+    },
   },
 };
 </script>
@@ -119,6 +135,8 @@ export default {
       :state="state"
       type="date"
       @change="onChange"
+      @keydown="onKeydown"
+      @blur="onBlur"
     />
     <output v-if="outputValue" :id="outputId" ref="output" :for="inputId" class="gl-sr-only">
       {{ outputValue }}

package/src/components/base/token_selector/token_selector.scss

@@ -20,6 +20,8 @@
 }
 
 .gl-token-selector-input {
-  padding-bottom: $gl-spacing-scale-1 + $gl-spacing-scale-2;
-  padding-top: $gl-spacing-scale-1 + $gl-spacing-scale-2;
+  padding-top: $input-padding-y;
+  padding-bottom: $input-padding-y;
+  padding-left: $input-padding-x-sm;
+  padding-right: $input-padding-x-sm;
 }

package/src/components/base/token_selector/token_selector.vue

@@ -465,7 +465,7 @@ export default {
           <input
             ref="textInput"
             type="text"
-            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
+            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
             :value="inputText"
             :aria-activedescendant="handleAriaActiveDescendent(focusedDropdownItem)"
             :autocomplete="autocomplete"