@gitlab/ui 85.2.1 → 85.3.0

package/dist/tokens/json/tokens.json

@@ -8969,6 +8969,375 @@
       }
     }
   },
+  "control": {
+    "background": {
+      "color": {
+        "default": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for form control (input, radio button, checkbox, textarea) default background.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "comment": "Used for form control (input, radio button, checkbox, textarea) default background."
+          },
+          "name": "CONTROL_BACKGROUND_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "control",
+            "background",
+            "color",
+            "default"
+          ]
+        },
+        "disabled": {
+          "value": "#fbfafd",
+          "$type": "color",
+          "comment": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.10}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "comment": "Used for disabled form control (checkbox, input, radio button, textarea) background."
+          },
+          "name": "CONTROL_BACKGROUND_COLOR_DISABLED",
+          "attributes": {},
+          "path": [
+            "control",
+            "background",
+            "color",
+            "disabled"
+          ]
+        },
+        "selected": {
+          "default": {
+            "value": "#1f75cb",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background."
+            },
+            "name": "CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT",
+            "attributes": {},
+            "path": [
+              "control",
+              "background",
+              "color",
+              "selected",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover."
+            },
+            "name": "CONTROL_BACKGROUND_COLOR_SELECTED_HOVER",
+            "attributes": {},
+            "path": [
+              "control",
+              "background",
+              "color",
+              "selected",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover."
+            },
+            "name": "CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS",
+            "attributes": {},
+            "path": [
+              "control",
+              "background",
+              "color",
+              "selected",
+              "focus"
+            ]
+          }
+        }
+      }
+    },
+    "border": {
+      "color": {
+        "default": {
+          "value": "#89888d",
+          "$type": "color",
+          "comment": "Used for form control (input, radio button, checkbox, textarea) default border.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.400}",
+              "dark": "{color.neutral.500}"
+            },
+            "$type": "color",
+            "comment": "Used for form control (input, radio button, checkbox, textarea) default border."
+          },
+          "name": "CONTROL_BORDER_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "default"
+          ]
+        },
+        "hover": {
+          "value": "#626168",
+          "$type": "color",
+          "comment": "Used for form control (input, radio button, checkbox, textarea) border on hover.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.600}",
+              "dark": "{color.neutral.300}"
+            },
+            "$type": "color",
+            "comment": "Used for form control (input, radio button, checkbox, textarea) border on hover."
+          },
+          "name": "CONTROL_BORDER_COLOR_HOVER",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "hover"
+          ]
+        },
+        "focus": {
+          "value": "#333238",
+          "$type": "color",
+          "comment": "Used for form control (input, radio button, checkbox, textarea) border on focus.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.900}",
+              "dark": "{color.neutral.50}"
+            },
+            "$type": "color",
+            "comment": "Used for form control (input, radio button, checkbox, textarea) border on focus."
+          },
+          "name": "CONTROL_BORDER_COLOR_FOCUS",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "focus"
+          ]
+        },
+        "disabled": {
+          "value": "#dcdcde",
+          "$type": "color",
+          "comment": "Used for disabled form control (input, radio button, checkbox, textarea) border.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.100}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "comment": "Used for disabled form control (input, radio button, checkbox, textarea) border."
+          },
+          "name": "CONTROL_BORDER_COLOR_DISABLED",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "disabled"
+          ]
+        },
+        "error": {
+          "value": "#dd2b0e",
+          "$type": "color",
+          "comment": "Used for invalid form control (input, textarea) border.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "comment": "Used for invalid form control (input, textarea) border."
+          },
+          "name": "CONTROL_BORDER_COLOR_ERROR",
+          "attributes": {},
+          "path": [
+            "control",
+            "border",
+            "color",
+            "error"
+          ]
+        }
+      }
+    },
+    "text": {
+      "color": {
+        "error": {
+          "value": "#dd2b0e",
+          "$type": "color",
+          "comment": "Used for the helper text when the input is invalid.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "comment": "Used for the helper text when the input is invalid."
+          },
+          "name": "CONTROL_TEXT_COLOR_ERROR",
+          "attributes": {},
+          "path": [
+            "control",
+            "text",
+            "color",
+            "error"
+          ]
+        },
+        "valid": {
+          "value": "#108548",
+          "$type": "color",
+          "comment": "Used for the helper text when the input is valid.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.green.500}",
+              "dark": "{color.green.400}"
+            },
+            "$type": "color",
+            "comment": "Used for the helper text when the input is valid."
+          },
+          "name": "CONTROL_TEXT_COLOR_VALID",
+          "attributes": {},
+          "path": [
+            "control",
+            "text",
+            "color",
+            "valid"
+          ]
+        }
+      }
+    },
+    "placeholder": {
+      "color": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for placeholder text within inputs.",
+        "filePath": "src/tokens/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.400}",
+            "dark": "{color.neutral.500}"
+          },
+          "$type": "color",
+          "comment": "Used for placeholder text within inputs."
+        },
+        "name": "CONTROL_PLACEHOLDER_COLOR",
+        "attributes": {},
+        "path": [
+          "control",
+          "placeholder",
+          "color"
+        ]
+      }
+    },
+    "indicator": {
+      "color": {
+        "selected": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for checkbox and radio button state indicators.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "comment": "Used for checkbox and radio button state indicators."
+          },
+          "name": "CONTROL_INDICATOR_COLOR_SELECTED",
+          "attributes": {},
+          "path": [
+            "control",
+            "indicator",
+            "color",
+            "selected"
+          ]
+        },
+        "disabled": {
+          "value": "#737278",
+          "$type": "color",
+          "comment": "Used for disabled checkbox and radio button state indicators.",
+          "filePath": "src/tokens/control.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.500}",
+              "dark": "{color.neutral.400}"
+            },
+            "$type": "color",
+            "comment": "Used for disabled checkbox and radio button state indicators."
+          },
+          "name": "CONTROL_INDICATOR_COLOR_DISABLED",
+          "attributes": {},
+          "path": [
+            "control",
+            "indicator",
+            "color",
+            "disabled"
+          ]
+        }
+      }
+    }
+  },
   "feedback": {
     "background": {
       "color": {
@@ -9339,6 +9708,53 @@
       }
     }
   },
+  "focus-ring": {
+    "outer": {
+      "color": {
+        "value": "#1f75cb",
+        "$type": "color",
+        "comment": "Used for the outer color portion of the focus ring.",
+        "filePath": "src/tokens/focus-ring.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.blue.500}",
+            "dark": "{color.blue.400}"
+          },
+          "$type": "color",
+          "comment": "Used for the outer color portion of the focus ring."
+        },
+        "name": "FOCUS_RING_OUTER_COLOR",
+        "attributes": {},
+        "path": [
+          "focus-ring",
+          "outer",
+          "color"
+        ]
+      }
+    },
+    "inner": {
+      "color": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for the inner neutral portion of the focus ring.",
+        "filePath": "src/tokens/focus-ring.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{background.color.default}",
+          "$type": "color",
+          "comment": "Used for the inner neutral portion of the focus ring."
+        },
+        "name": "FOCUS_RING_INNER_COLOR",
+        "attributes": {},
+        "path": [
+          "focus-ring",
+          "inner",
+          "color"
+        ]
+      }
+    }
+  },
   "icon": {
     "color": {
       "default": {

package/dist/tokens/scss/_tokens.dark.scss

@@ -484,6 +484,7 @@ $gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
+$gl-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
 $gl-feedback-danger-icon-color: $gl-color-red-300; // Used for an icon associated with danger or critical feedback.
 $gl-feedback-danger-background-color: $gl-color-red-900; // Used for a background associated with danger or critical feedback.
 $gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for an icon associated with warning feedback or confidential content.
@@ -498,6 +499,21 @@ $gl-feedback-link-color-strong: $gl-color-blue-700; // Used for a link on a stro
 $gl-feedback-icon-color-strong: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
 $gl-feedback-text-color-strong: $gl-color-neutral-900; // Used for text on a strong feedback background.
 $gl-feedback-background-color-strong: $gl-color-neutral-10; // Used for a background associated with feedback like a tooltip or toast message.
+$gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
+$gl-control-indicator-color-selected: $gl-color-neutral-900; // Used for checkbox and radio button state indicators.
+$gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
+$gl-control-text-color-valid: $gl-color-green-400; // Used for the helper text when the input is valid.
+$gl-control-text-color-error: $gl-color-red-400; // Used for the helper text when the input is invalid.
+$gl-control-border-color-error: $gl-color-red-400; // Used for invalid form control (input, textarea) border.
+$gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
+$gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (input, radio button, checkbox, textarea) border on focus.
+$gl-control-border-color-hover: $gl-color-neutral-300; // Used for form control (input, radio button, checkbox, textarea) border on hover.
+$gl-control-border-color-default: $gl-color-neutral-500; // Used for form control (input, radio button, checkbox, textarea) default border.
+$gl-control-background-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+$gl-control-background-color-disabled: $gl-color-neutral-950; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+$gl-control-background-color-default: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
@@ -541,4 +557,5 @@ $gl-action-icon-color-disabled: $gl-color-neutral-500; // Used for the icon of a
 $gl-action-text-color-disabled: $gl-color-neutral-400; // Used for the text of a disabled action.
 $gl-action-border-color-disabled: $gl-color-neutral-800; // Used for the border of a disabled action.
 $gl-action-background-color-disabled: $gl-color-neutral-900; // Used for the background of a disabled action.
+$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-action-neutral-background-color-default: $gl-background-color-default; // Used for the background of an outlined neutral action in the default state.

package/dist/tokens/scss/_tokens.scss

@@ -484,6 +484,7 @@ $gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
+$gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
 $gl-feedback-danger-icon-color: $gl-color-red-600; // Used for an icon associated with danger or critical feedback.
 $gl-feedback-danger-background-color: $gl-color-red-50; // Used for a background associated with danger or critical feedback.
 $gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for an icon associated with warning feedback or confidential content.
@@ -498,6 +499,21 @@ $gl-feedback-link-color-strong: $gl-color-blue-300; // Used for a link on a stro
 $gl-feedback-icon-color-strong: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
 $gl-feedback-text-color-strong: $gl-color-neutral-0; // Used for text on a strong feedback background.
 $gl-feedback-background-color-strong: $gl-color-neutral-950; // Used for a background associated with feedback like a tooltip or toast message.
+$gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
+$gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
+$gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
+$gl-control-text-color-valid: $gl-color-green-500; // Used for the helper text when the input is valid.
+$gl-control-text-color-error: $gl-color-red-500; // Used for the helper text when the input is invalid.
+$gl-control-border-color-error: $gl-color-red-500; // Used for invalid form control (input, textarea) border.
+$gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled form control (input, radio button, checkbox, textarea) border.
+$gl-control-border-color-focus: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) border on focus.
+$gl-control-border-color-hover: $gl-color-neutral-600; // Used for form control (input, radio button, checkbox, textarea) border on hover.
+$gl-control-border-color-default: $gl-color-neutral-400; // Used for form control (input, radio button, checkbox, textarea) default border.
+$gl-control-background-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+$gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+$gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+$gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
@@ -541,4 +557,5 @@ $gl-action-icon-color-disabled: $gl-color-neutral-400; // Used for the icon of a
 $gl-action-text-color-disabled: $gl-color-neutral-500; // Used for the text of a disabled action.
 $gl-action-border-color-disabled: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-background-color-disabled: $gl-color-neutral-50; // Used for the background of a disabled action.
+$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-action-neutral-background-color-default: $gl-background-color-default; // Used for the background of an outlined neutral action in the default state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -422,6 +422,21 @@ $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
+$gl-control-background-color-default: var(--gl-control-background-color-default);
+$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
+$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
+$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
+$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
+$gl-control-border-color-default: var(--gl-control-border-color-default);
+$gl-control-border-color-hover: var(--gl-control-border-color-hover);
+$gl-control-border-color-focus: var(--gl-control-border-color-focus);
+$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
+$gl-control-border-color-error: var(--gl-control-border-color-error);
+$gl-control-text-color-error: var(--gl-control-text-color-error);
+$gl-control-text-color-valid: var(--gl-control-text-color-valid);
+$gl-control-placeholder-color: var(--gl-control-placeholder-color);
+$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
+$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $gl-feedback-background-color-strong: var(--gl-feedback-background-color-strong);
 $gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
 $gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);
@@ -436,6 +451,8 @@ $gl-feedback-warning-background-color: var(--gl-feedback-warning-background-colo
 $gl-feedback-warning-icon-color: var(--gl-feedback-warning-icon-color);
 $gl-feedback-danger-background-color: var(--gl-feedback-danger-background-color);
 $gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color);
+$gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color);
+$gl-focus-ring-inner-color: var(--gl-focus-ring-inner-color);
 $gl-icon-color-default: var(--gl-icon-color-default);
 $gl-icon-color-subtle: var(--gl-icon-color-subtle);
 $gl-icon-color-strong: var(--gl-icon-color-strong);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "85.2.1",
+  "version": "85.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -195,6 +195,7 @@ export default {
       scrolledToBottom: true,
       activeCommandIndex: 0,
       displaySubmitButton: true,
+      compositionJustEnded: false,
     };
   },
   computed: {
@@ -280,6 +281,9 @@ export default {
     this.scrollToBottom();
   },
   methods: {
+    compositionEnd() {
+      this.compositionJustEnded = true;
+    },
     hideChat() {
       this.isHidden = true;
       /**
@@ -338,26 +342,34 @@ export default {
        */
       this.$emit('track-feedback', event);
     },
-    onInputKeyup(e) {
+    sendChatPromptOnEnter(e) {
       const { metaKey, ctrlKey, altKey, shiftKey, isComposing } = e;
+      const isModifierKey = metaKey || ctrlKey || altKey || shiftKey;
+
+      return !(isModifierKey || isComposing || this.compositionJustEnded);
+    },
+    onInputKeyup(e) {
+      const { key } = e;
 
       if (this.shouldShowSlashCommands) {
         e.preventDefault();
 
-        if (e.key === 'Enter') {
+        if (key === 'Enter') {
           this.selectSlashCommand(this.activeCommandIndex);
-        } else if (e.key === 'ArrowUp') {
+        } else if (key === 'ArrowUp') {
           this.prevCommand();
-        } else if (e.key === 'ArrowDown') {
+        } else if (key === 'ArrowDown') {
           this.nextCommand();
         } else {
           this.activeCommandIndex = 0;
         }
-      } else if (e.key === 'Enter' && !isComposing && !(metaKey || ctrlKey || altKey || shiftKey)) {
+      } else if (key === 'Enter' && this.sendChatPromptOnEnter(e)) {
         e.preventDefault();
 
         this.sendChatPrompt();
       }
+
+      this.compositionJustEnded = false;
     },
     prevCommand() {
       this.activeCommandIndex -= 1;
@@ -540,6 +552,7 @@ export default {
               autofocus
               @keydown.enter.exact.native.prevent
               @keyup.native="onInputKeyup"
+              @compositionend="compositionEnd"
             />
           </div>
           <template #append>

package/src/tokens/build/css/tokens.css

@@ -486,6 +486,7 @@
   --gl-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon with the highest contrast. */
   --gl-icon-color-subtle: var(--gl-color-neutral-500); /* Used for a static or decorational icon. Can be paired with subtle text. */
   --gl-icon-color-default: var(--gl-color-neutral-700); /* Used for the default icon color. Can be paired with default text. */
+  --gl-focus-ring-outer-color: var(--gl-color-blue-500); /* Used for the outer color portion of the focus ring. */
   --gl-feedback-danger-icon-color: var(--gl-color-red-600); /* Used for an icon associated with danger or critical feedback. */
   --gl-feedback-danger-background-color: var(--gl-color-red-50); /* Used for a background associated with danger or critical feedback. */
   --gl-feedback-warning-icon-color: var(--gl-color-orange-600); /* Used for an icon associated with warning feedback or confidential content. */
@@ -500,6 +501,21 @@
   --gl-feedback-icon-color-strong: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */
   --gl-feedback-text-color-strong: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */
   --gl-feedback-background-color-strong: var(--gl-color-neutral-950); /* Used for a background associated with feedback like a tooltip or toast message. */
+  --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /* Used for disabled checkbox and radio button state indicators. */
+  --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /* Used for checkbox and radio button state indicators. */
+  --gl-control-placeholder-color: var(--gl-color-neutral-400); /* Used for placeholder text within inputs. */
+  --gl-control-text-color-valid: var(--gl-color-green-500); /* Used for the helper text when the input is valid. */
+  --gl-control-text-color-error: var(--gl-color-red-500); /* Used for the helper text when the input is invalid. */
+  --gl-control-border-color-error: var(--gl-color-red-500); /* Used for invalid form control (input, textarea) border. */
+  --gl-control-border-color-disabled: var(--gl-color-neutral-100); /* Used for disabled form control (input, radio button, checkbox, textarea) border. */
+  --gl-control-border-color-focus: var(--gl-color-neutral-900); /* Used for form control (input, radio button, checkbox, textarea) border on focus. */
+  --gl-control-border-color-hover: var(--gl-color-neutral-600); /* Used for form control (input, radio button, checkbox, textarea) border on hover. */
+  --gl-control-border-color-default: var(--gl-color-neutral-400); /* Used for form control (input, radio button, checkbox, textarea) default border. */
+  --gl-control-background-color-selected-focus: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
+  --gl-control-background-color-selected-hover: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
+  --gl-control-background-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
+  --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
+  --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-200); /* Used for the breadcrumb level separator. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
@@ -543,5 +559,6 @@
   --gl-action-text-color-disabled: var(--gl-color-neutral-500); /* Used for the text of a disabled action. */
   --gl-action-border-color-disabled: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
   --gl-action-background-color-disabled: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
+  --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
   --gl-action-neutral-background-color-default: var(--gl-background-color-default); /* Used for the background of an outlined neutral action in the default state. */
 }