@gitlab/ui 91.5.0 → 91.7.0

package/dist/tokens/build/js/tokens.dark.js

@@ -611,7 +611,7 @@ const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for the selec
 const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
 const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.
-const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#28272d'; // Used for the background of static content that prepends or appends a text input.
+const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)'; // Used for the background of static content that prepends or appends a text input.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/dist/tokens/build/js/tokens.js

@@ -611,7 +611,7 @@ const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for the selec
 const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
-const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
+const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(05, 05, 06, 0.02)'; // Used for the background of static content that prepends or appends a text input.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/dist/tokens/css/tokens.css

@@ -492,7 +492,7 @@
   --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-readonly: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-readonly: var(--gl-color-alpha-dark-2); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
   --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. */

package/dist/tokens/css/tokens.dark.css

@@ -492,7 +492,7 @@
   --gl-control-background-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-hover: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-default: var(--gl-color-blue-300); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-readonly: var(--gl-color-neutral-900); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-readonly: var(--gl-color-alpha-light-8); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */

package/dist/tokens/js/tokens.dark.js

@@ -611,7 +611,7 @@ export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for th
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.
-export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#28272d'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/dist/tokens/js/tokens.js

@@ -611,7 +611,7 @@ export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for th
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
-export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(05, 05, 06, 0.02)'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/dist/tokens/json/tokens.dark.json

@@ -13516,15 +13516,15 @@
           ]
         },
         "readonly": {
-          "value": "#28272d",
+          "value": "rgba(255, 255, 255, 0.08)",
           "$type": "color",
           "comment": "Used for the background of static content that prepends or appends a text input.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.light.8}"
             },
             "$type": "color",
             "comment": "Used for the background of static content that prepends or appends a text input."

package/dist/tokens/json/tokens.json

@@ -13516,15 +13516,15 @@
           ]
         },
         "readonly": {
-          "value": "#fbfafd",
+          "value": "rgba(05, 05, 06, 0.02)",
           "$type": "color",
           "comment": "Used for the background of static content that prepends or appends a text input.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.light.8}"
             },
             "$type": "color",
             "comment": "Used for the background of static content that prepends or appends a text input."

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

@@ -490,7 +490,7 @@ $gl-control-border-color-default: $gl-color-neutral-500; // Used for form contro
 $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-300; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
-$gl-control-background-color-readonly: $gl-color-neutral-900; // Used for the background of static content that prepends or appends a text input.
+$gl-control-background-color-readonly: $gl-color-alpha-light-8; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.

package/dist/tokens/scss/_tokens.scss

@@ -490,7 +490,7 @@ $gl-control-border-color-default: $gl-color-neutral-400; // Used for form contro
 $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-readonly: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
+$gl-control-background-color-readonly: $gl-color-alpha-dark-2; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $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.

package/package.json

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

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue

@@ -0,0 +1,174 @@
+<script>
+import { translate } from '../../../../../../../utils/i18n';
+import GlCard from '../../../../../../base/card/card.vue';
+import { categoriesValidator, contextItemsValidator } from '../utils';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
+
+export default {
+  name: 'GlDuoChatContextItemMenu',
+  components: {
+    GlCard,
+    GlDuoChatContextItemMenuCategoryItems,
+    GlDuoChatContextItemSelections,
+  },
+  props: {
+    /**
+     * Whether the menu is open.
+     */
+    open: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * Array of selected context items.
+     */
+    selections: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+    /**
+     * Whether the menu is in a loading state.
+     */
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * Error message to display, if any.
+     */
+    error: {
+      type: [String, null],
+      required: false,
+      default: null,
+    },
+    /**
+     * Array of available categories for context items.
+     */
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator,
+    },
+    /**
+     * Array of search results for context items.
+     */
+    results: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+  },
+  data() {
+    return {
+      activeIndex: 0,
+      selectedCategory: null,
+    };
+  },
+  computed: {
+    showCategorySelection() {
+      return this.open && !this.selectedCategory;
+    },
+  },
+  watch: {
+    open(isOpen) {
+      if (!isOpen) {
+        this.resetSelection();
+      }
+    },
+  },
+  methods: {
+    selectCategory(category) {
+      this.selectedCategory = category;
+      this.activeIndex = 0;
+
+      /**
+       * Emitted when a search should be performed.
+       * @property {Object} filter
+       * @property {string} filter.category - The value of the selected category
+       * @property {string} filter.query - The search query
+       */
+      this.$emit('search', {
+        category: category.value,
+        query: '',
+      });
+    },
+    selectItem(item) {
+      if (!item.isEnabled) {
+        return;
+      }
+
+      /**
+       * Emitted when a context item is selected.
+       * @property {Object} item - The selected context item
+       */
+      this.$emit(
+        'select',
+        this.results.find((result) => result.id === item.id)
+      );
+
+      /**
+       * Emitted when the menu should be closed.
+       */
+      this.$emit('close');
+      this.resetSelection();
+    },
+    removeItem(item) {
+      /**
+       * Emitted when a context item should be removed.
+       * @property {Object} item - The context item to be removed
+       */
+      this.$emit('remove', item);
+    },
+    resetSelection() {
+      this.selectedCategory = null;
+      this.activeIndex = 0;
+    },
+  },
+  i18n: {
+    selectedContextItemsTitle: translate(
+      'GlDuoChatContextItemMenu.selectedContextItemsTitle',
+      'Included references'
+    ),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-duo-chat-context-item-selections
+      v-if="selections.length"
+      :selections="selections"
+      :removable="true"
+      :title="$options.i18n.selectedContextItemsTitle"
+      :default-collapsed="false"
+      class="gl-mb-3"
+      @remove="removeItem"
+    />
+    <gl-card
+      v-if="open"
+      class="slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md"
+      body-class="!gl-p-2"
+      data-testid="context-item-menu"
+    >
+      <gl-duo-chat-context-item-menu-category-items
+        v-if="showCategorySelection"
+        :active-index="activeIndex"
+        :categories="categories"
+        @select="selectCategory"
+        @active-index-change="activeIndex = $event"
+      />
+      <div v-else data-testid="context-menu-search-items">
+        <!-- Placeholder for GlDuoChatContextItemMenuSearchItem component coming in a future iteration -->
+        <template v-if="loading">Loading...</template>
+        <template v-else-if="error">Error: {{ error }}</template>
+        <ul v-else>
+          <li v-for="result of results" :key="result.id" @click="selectItem(result)">
+            {{ result.metadata.name }} {{ result.isEnabled ? '' : '(disabled)' }}
+          </li>
+        </ul>
+      </div>
+    </gl-card>
+  </div>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue

@@ -0,0 +1,45 @@
+<script>
+import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import { categoriesValidator } from '../utils';
+
+export default {
+  name: 'GlDuoChatContextItemMenuCategoryItems',
+  components: { GlIcon, GlDropdownItem },
+  props: {
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator,
+    },
+    activeIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    selectCategory(category) {
+      this.$emit('select', category);
+    },
+    setActiveIndex(index) {
+      this.$emit('active-index-change', index);
+    },
+  },
+};
+</script>
+<template>
+  <ul class="gl-mb-0 gl-list-none gl-pl-0">
+    <gl-dropdown-item
+      v-for="(category, index) in categories"
+      :key="category.value"
+      :class="{ 'active-command': index === activeIndex }"
+      data-testid="category-item"
+      @click="selectCategory(category)"
+    >
+      <div class="gl-flex gl-items-center" @mouseenter="setActiveIndex(index)">
+        <gl-icon :name="category.icon" class="gl-mr-2" />
+        {{ category.label }}
+      </div>
+    </gl-dropdown-item>
+  </ul>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue

@@ -18,14 +18,23 @@ export default {
     GlPopover,
   },
   props: {
+    /**
+     * The context item to display in the popover.
+     */
     item: {
       type: Object,
       required: true,
     },
+    /**
+     * The target element ID for the popover.
+     */
     target: {
       type: String,
       required: true,
     },
+    /**
+     * The placement of the popover relative to the target.
+     */
     placement: {
       type: String,
       default: 'bottom',

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -8,6 +8,7 @@ import {
   CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   CONTEXT_ITEM_TYPE_PROJECT_FILE,
 } from '../constants';
+import { contextItemsValidator } from '../utils';
 
 export default {
   name: 'GlDuoChatContextItemSelections',
@@ -17,18 +18,36 @@ export default {
     GlToken,
   },
   props: {
+    /**
+     * Array of selected context items.
+     */
     selections: {
       type: Array,
       required: true,
+      validator: contextItemsValidator,
     },
+    /**
+     * The title to display for the selections.
+     */
     title: {
       type: String,
       required: true,
     },
+    /**
+     * Whether the selections should be collapsed by default.
+     */
     defaultCollapsed: {
       type: Boolean,
       required: true,
     },
+    /**
+     * Whether the selections can be removed.
+     */
+    removable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -53,6 +72,13 @@ export default {
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
     },
+    onRemoveItem(item) {
+      /**
+       * Emitted when a context item should be removed.
+       * @property {Object} item - The context item to be removed
+       */
+      this.$emit('remove', item);
+    },
   },
 };
 </script>
@@ -75,9 +101,10 @@ export default {
       <gl-token
         v-for="item in selections"
         :key="item.id"
-        :view-only="true"
+        :view-only="!removable"
         variant="default"
         class="gl-mb-2 gl-mr-2"
+        @close="onRemoveItem(item)"
       >
         <div :id="`context-item-${item.id}-${selectionsId}`" class="gl-flex gl-items-center">
           <gl-icon :name="getIconName(item.type)" :size="12" class="gl-mr-1" />

package/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js

@@ -1,3 +1,15 @@
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from './constants';
+
+export const MOCK_CATEGORIES = [
+  { label: 'Files', value: CONTEXT_ITEM_TYPE_PROJECT_FILE, icon: 'document' },
+  { label: 'Issues', value: CONTEXT_ITEM_TYPE_ISSUE, icon: 'issues' },
+  { label: 'Merge Requests', value: CONTEXT_ITEM_TYPE_MERGE_REQUEST, icon: 'merge-request' },
+];
+
 export const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
   isEnabled: true,
@@ -8,7 +20,7 @@ export const MOCK_CONTEXT_ITEM_FILE = {
       relFilePath: 'src/plants/strawberry.ts',
     },
   },
-  type: 'project_file',
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 
 export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
@@ -21,7 +33,7 @@ export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
       relFilePath: '/src/VehicleFoo/motorbike.cs',
     },
   },
-  type: 'project_file',
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 const mockFiles = [
   MOCK_CONTEXT_ITEM_FILE,
@@ -35,7 +47,7 @@ const mockFiles = [
         relFilePath: '/src/plants/potato.ts',
       },
     },
-    type: 'project_file',
+    type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
   },
   MOCK_CONTEXT_ITEM_FILE_DISABLED,
 ];
@@ -50,20 +62,20 @@ export const MOCK_CONTEXT_ITEM_ISSUE = {
       iid: 1234,
     },
   },
-  type: 'issue',
+  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 export const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
   id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
   isEnabled: false,
   metadata: {
-    name: 'Fix vehicle colours',
+    name: `Fix vehicle colours and make them look real nice and colourful won't that be wonderful wow this issue title is really long I sure hope it's gonna wrap OK`,
     info: {
       project: 'example/vehicle',
       iid: 91011,
     },
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'issue',
+  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 
 const mockIssues = [
@@ -78,7 +90,7 @@ const mockIssues = [
         iid: 5678,
       },
     },
-    type: 'issue',
+    type: CONTEXT_ITEM_TYPE_ISSUE,
   },
   MOCK_CONTEXT_ITEM_ISSUE_DISABLED,
 ];
@@ -93,7 +105,7 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
       iid: 1122,
     },
   },
-  type: 'merge_request',
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
   id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
@@ -106,7 +118,7 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
     },
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'merge_request',
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 
 const mockMergeRequests = [
@@ -122,7 +134,7 @@ const mockMergeRequests = [
       },
     },
     disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-    type: 'merge_request',
+    type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   },
   MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED,
 ];

package/src/components/experimental/duo/chat/components/duo_chat_context/utils.js

@@ -0,0 +1,29 @@
+function categoryValidator(category) {
+  return Boolean(category && category.value && category.label && category.icon);
+}
+
+export function categoriesValidator(categories) {
+  return Array.isArray(categories) && categories.every((category) => categoryValidator(category));
+}
+
+function disabledReasonsValidator(disabledReasons) {
+  return (
+    disabledReasons === undefined ||
+    (Array.isArray(disabledReasons) &&
+      disabledReasons.every((reason) => typeof reason === 'string'))
+  );
+}
+
+function contextItemValidator(item) {
+  return Boolean(
+    item &&
+      item.id &&
+      item.type &&
+      typeof item.isEnabled === 'boolean' &&
+      disabledReasonsValidator(item.disabledReasons)
+  );
+}
+
+export function contextItemsValidator(items) {
+  return Array.isArray(items) && items.every((item) => contextItemValidator(item));
+}

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

@@ -492,7 +492,7 @@
   --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-readonly: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-readonly: var(--gl-color-alpha-dark-2); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
   --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. */

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

@@ -492,7 +492,7 @@
   --gl-control-background-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-hover: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-default: var(--gl-color-blue-300); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-readonly: var(--gl-color-neutral-900); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-readonly: var(--gl-color-alpha-light-8); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */

package/src/tokens/build/js/tokens.dark.js

@@ -611,7 +611,7 @@ export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for th
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.
-export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#28272d'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/src/tokens/build/js/tokens.js

@@ -611,7 +611,7 @@ export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for th
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
-export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(05, 05, 06, 0.02)'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/src/tokens/build/json/tokens.dark.json

@@ -13516,15 +13516,15 @@
           ]
         },
         "readonly": {
-          "value": "#28272d",
+          "value": "rgba(255, 255, 255, 0.08)",
           "$type": "color",
           "comment": "Used for the background of static content that prepends or appends a text input.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.light.8}"
             },
             "$type": "color",
             "comment": "Used for the background of static content that prepends or appends a text input."