@gitlab/ui 91.12.0 → 91.14.0

package/dist/tokens/json/tokens.json

@@ -1868,6 +1868,47 @@
           "disabled"
         ]
       },
+      "overlap": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
+        },
+        "name": "BACKGROUND_COLOR_OVERLAP",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "overlap"
+        ]
+      },
+      "section": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{background.color.overlap}",
+          "$type": "color",
+          "comment": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes."
+        },
+        "name": "BACKGROUND_COLOR_SECTION",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "section"
+        ]
+      },
       "overlay": {
         "value": "rgba(05, 05, 06, 0.24)",
         "$type": "color",
@@ -1960,6 +2001,28 @@
           "strong"
         ]
       },
+      "section": {
+        "value": "#dcdcde",
+        "$type": "color",
+        "comment": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
+        "filePath": "src/tokens/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{border.color.default}",
+            "dark": "{background.color.default}"
+          },
+          "$type": "color",
+          "comment": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page."
+        },
+        "name": "BORDER_COLOR_SECTION",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "section"
+        ]
+      },
       "transparent": {
         "value": "transparent",
         "$type": "color",

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

@@ -721,6 +721,7 @@ $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border th
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
+$gl-background-color-overlap: $gl-color-neutral-800; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
@@ -834,6 +835,8 @@ $gl-alert-info-background-color: $gl-background-color-subtle; // Used for the ba
 $gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
+$gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-background-color-section: $gl-background-color-overlap; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

package/dist/tokens/scss/_tokens.scss

@@ -721,6 +721,7 @@ $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border th
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
+$gl-background-color-overlap: $gl-color-neutral-0; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
@@ -834,6 +835,8 @@ $gl-alert-info-background-color: $gl-feedback-info-background-color; // Used for
 $gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
+$gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-background-color-section: $gl-background-color-overlap; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -82,10 +82,13 @@ $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
 $gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-background-color-overlap: var(--gl-background-color-overlap);
+$gl-background-color-section: var(--gl-background-color-section);
 $gl-background-color-overlay: var(--gl-background-color-overlay);
 $gl-border-color-default: var(--gl-border-color-default);
 $gl-border-color-subtle: var(--gl-border-color-subtle);
 $gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-section: var(--gl-border-color-section);
 $gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);

package/dist/tokens/tailwind/tokens.cjs

@@ -218,6 +218,8 @@ const backgroundColors = {
   subtle: 'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
   strong: 'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
   disabled: 'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+  overlap: 'var(--gl-background-color-overlap, var(--gl-color-neutral-0, #fff))',
+  section: 'var(--gl-background-color-section, var(--gl-background-color-overlap, #fff))',
   overlay:
     'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24)))',
 };
@@ -225,6 +227,7 @@ const borderColors = {
   default: 'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
   subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
   strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
+  section: 'var(--gl-border-color-section, var(--gl-border-color-default, #dcdcde))',
   transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "91.12.0",
+  "version": "91.14.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -111,7 +111,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "20.1.0",
+    "@gitlab/eslint-plugin": "20.2.1",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.1",
     "@gitlab/svgs": "3.114.0",
@@ -148,7 +148,7 @@
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
     "cobertura-merge": "^1.0.4",
-    "cypress": "13.14.1",
+    "cypress": "13.14.2",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",
@@ -172,8 +172,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.46.1",
-    "playwright-core": "^1.46.1",
+    "playwright": "^1.47.0",
+    "playwright-core": "^1.47.0",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

package/src/components/base/form/form_character_count/form_character_count.md

@@ -23,10 +23,10 @@ count separate from the input, use `GlFormCharacterCount`.
     },
     methods: {
       remainingCountText(count) {
-        return  n__('%d character remaining', '%d characters remaining', count)
+        return  n__('%d character remaining.', '%d characters remaining.', count)
       },
       overLimitText(count) {
-        return n__('%d character over limit', '%d characters over limit', count);
+        return n__('%d character over limit.', '%d characters over limit.', count);
       },
     },
   }

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

@@ -73,12 +73,12 @@ export default {
   <div>
     <small :class="['form-text', countTextClass]" aria-hidden="true">
       <!--
-      @slot Internationalized over limit text. Example: `<template #over-limit-text="{ count }">{{ n__('%d character over limit', '%d characters over limit', count) }}</template>`
+      @slot Internationalized over limit text. Example: `<template #over-limit-text="{ count }">{{ n__('%d character over limit.', '%d characters over limit.', count) }}</template>`
       @binding {number} count
       -->
       <slot v-if="isOverLimit" name="over-limit-text" :count="Math.abs(remainingCount)"></slot>
       <!--
-      @slot Internationalized character count text. Example: `<template #remaining-count-text="{ count }">{{ n__('%d character remaining', '%d characters remaining', count) }}</template>`
+      @slot Internationalized character count text. Example: `<template #remaining-count-text="{ count }">{{ n__('%d character remaining.', '%d characters remaining.', count) }}</template>`
       @binding {number} count
       -->
 

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

@@ -31,12 +31,12 @@ export default {
     minInvalidFeedback: {
       type: String,
       required: false,
-      default: 'Must be after minimum date',
+      default: 'Must be after minimum date.',
     },
     maxInvalidFeedback: {
       type: String,
       required: false,
-      default: 'Must be before maximum date',
+      default: 'Must be before maximum date.',
     },
     value: {
       type: String,

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

@@ -116,7 +116,7 @@ export default {
     >
       <template #over-limit-text="{ count }">
         <!--
-        @slot Internationalized over character count text. Example: `<template #character-count-over-limit-text="{ count }">{{ n__('%d character over limit', '%d characters over limit', count) }}</template>`
+        @slot Internationalized over character count text. Example: `<template #character-count-over-limit-text="{ count }">{{ n__('%d character over limit.', '%d characters over limit.', count) }}</template>`
         @binding {number} count
         -->
         <slot name="character-count-over-limit-text" :count="count"></slot>
@@ -124,7 +124,7 @@ export default {
 
       <template #remaining-count-text="{ count }">
         <!--
-        @slot Internationalized character count text. Example: `<template #remaining-character-count-text="{ count }">{{ n__('%d character remaining', '%d characters remaining', count) }}</template>`
+        @slot Internationalized character count text. Example: `<template #remaining-character-count-text="{ count }">{{ n__('%d character remaining.', '%d characters remaining.', count) }}</template>`
         @binding {number} count
         -->
 

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

@@ -0,0 +1,71 @@
+<script>
+import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import {
+  categoryValidator,
+  contextItemValidator,
+  formatIssueId,
+  formatMergeRequestId,
+} from '../utils';
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from '../constants';
+
+export default {
+  name: 'GlDuoChatContextItemMenuSearchItem',
+  components: { GlIcon, GlDuoChatContextItemPopover },
+  props: {
+    category: {
+      type: Object,
+      required: true,
+      validator: categoryValidator,
+    },
+    contextItem: {
+      type: Object,
+      required: true,
+      validator: contextItemValidator,
+    },
+  },
+  computed: {
+    title() {
+      return this.contextItem.metadata?.name || '';
+    },
+    secondaryText() {
+      switch (this.category.value) {
+        case CONTEXT_ITEM_TYPE_PROJECT_FILE:
+          return this.contextItem.metadata.info.relFilePath;
+        case CONTEXT_ITEM_TYPE_ISSUE:
+          return formatIssueId(this.contextItem.metadata.info.iid);
+        case CONTEXT_ITEM_TYPE_MERGE_REQUEST:
+          return formatMergeRequestId(this.contextItem.metadata.info.iid);
+        default:
+          return '';
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-flex gl-flex-col">
+    <div class="gl-flex gl-items-center">
+      <gl-icon :name="category.icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
+      <span>{{ title }}</span>
+      <gl-icon
+        :id="`info-icon-${contextItem.id}`"
+        name="information-o"
+        class="gl-ml-2 gl-shrink-0 gl-cursor-pointer gl-text-secondary"
+        :size="12"
+      />
+      <gl-duo-chat-context-item-popover
+        :context-item="contextItem"
+        :target="`info-icon-${contextItem.id}`"
+        placement="left"
+      />
+    </div>
+    <div class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary">
+      {{ secondaryText }}
+    </div>
+  </div>
+</template>

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

@@ -5,14 +5,16 @@ import GlAlert from '../../../../../../base/alert/alert.vue';
 import { sprintf, translate } from '../../../../../../../utils/i18n';
 import { categoryValidator, contextItemsValidator } from '../utils';
 import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading.vue';
+import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item.vue';
 
 export default {
   name: 'GlDuoChatContextItemMenuSearchItems',
   components: {
     GlAlert,
-    GlFormInput,
     GlDropdownItem,
+    GlDuoChatContextItemMenuSearchItem,
     GlDuoChatContextItemMenuSearchItemsLoading,
+    GlFormInput,
   },
   model: {
     prop: 'searchQuery',
@@ -77,8 +79,8 @@ export default {
     },
   },
   methods: {
-    selectItem(item) {
-      this.$emit('select', item);
+    selectItem(contextItem) {
+      this.$emit('select', contextItem);
       this.userInitiatedSearch = false;
     },
     setActiveIndex(index) {
@@ -114,20 +116,25 @@ export default {
       </div>
       <ul v-else class="gl-mb-1 gl-list-none gl-flex-row gl-pl-0">
         <gl-dropdown-item
-          v-for="(item, index) in results"
+          v-for="(contextItem, index) in results"
           :id="`dropdown-item-${index}`"
-          :key="item.id"
-          :class="[{ 'active-command': index === activeIndex, disabled: !item.isEnabled }]"
-          :tabindex="!item.isEnabled ? -1 : undefined"
+          :key="contextItem.id"
+          :class="{
+            'active-command': index === activeIndex,
+            'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none': !contextItem.isEnabled,
+          }"
+          :tabindex="!contextItem.isEnabled ? -1 : undefined"
           class="duo-chat-context-search-result-item"
           data-testid="search-result-item"
-          @click="selectItem(item)"
+          @click="selectItem(contextItem)"
         >
           <div @mouseenter="setActiveIndex(index)">
-            <div data-testid="search-result-item-details">
-              <!-- Placeholder for upcoming GlDuoChatContextItemMenuSearchItem component -->
-              {{ item.metadata.name }} {{ item.isEnabled ? '' : '(disabled)' }}
-            </div>
+            <gl-duo-chat-context-item-menu-search-item
+              :context-item="contextItem"
+              :category="category"
+              :class="{ 'gl-text-secondary': !contextItem.isEnabled }"
+              data-testid="search-result-item-details"
+            />
           </div>
         </gl-dropdown-item>
       </ul>

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

@@ -6,11 +6,7 @@ import {
   CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   CONTEXT_ITEM_TYPE_PROJECT_FILE,
 } from '../constants';
-
-const ID_PREFIXES = {
-  issue: '#',
-  merge_request: '!',
-};
+import { formatIssueId, formatMergeRequestId } from '../utils';
 
 export default {
   name: 'DuoChatContextItemPopover',
@@ -19,9 +15,9 @@ export default {
   },
   props: {
     /**
-     * The context item to display in the popover.
+     * The context contextItem to display in the popover.
      */
-    item: {
+    contextItem: {
       type: Object,
       required: true,
     },
@@ -43,28 +39,36 @@ export default {
   },
   computed: {
     itemInfo() {
-      return this.item.metadata?.info || {};
+      return this.contextItem.metadata?.info || {};
     },
     id() {
       const isIssuable =
-        this.item.type === CONTEXT_ITEM_TYPE_ISSUE ||
-        this.item.type === CONTEXT_ITEM_TYPE_MERGE_REQUEST;
+        this.contextItem.type === CONTEXT_ITEM_TYPE_ISSUE ||
+        this.contextItem.type === CONTEXT_ITEM_TYPE_MERGE_REQUEST;
       return isIssuable ? this.itemInfo.iid || '' : null;
     },
-    idPrefix() {
-      return ID_PREFIXES[this.item.type] || '';
+    formattedId() {
+      switch (this.contextItem.type) {
+        case CONTEXT_ITEM_TYPE_ISSUE:
+          return formatIssueId(this.id);
+        case CONTEXT_ITEM_TYPE_MERGE_REQUEST:
+          return formatMergeRequestId(this.id);
+        default:
+          return '';
+      }
     },
     filePath() {
-      return this.item.type === CONTEXT_ITEM_TYPE_PROJECT_FILE
+      return this.contextItem.type === CONTEXT_ITEM_TYPE_PROJECT_FILE
         ? this.itemInfo.relFilePath || ''
         : null;
     },
     isEnabled() {
-      return this.item.isEnabled !== false;
+      return this.contextItem.isEnabled !== false;
     },
     disabledMessage() {
-      return Array.isArray(this.item.disabledReasons) && this.item.disabledReasons.length > 0
-        ? this.item.disabledReasons.join(', ')
+      return Array.isArray(this.contextItem.disabledReasons) &&
+        this.contextItem.disabledReasons.length > 0
+        ? this.contextItem.disabledReasons.join(', ')
         : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
     },
   },
@@ -78,12 +82,12 @@ export default {
     :target="target"
     triggers="hover focus"
     :placement="placement"
-    :title="item.metadata.name"
+    :title="contextItem.metadata.name"
     custom-class="gl-duo-chat-item-popover"
   >
     <template #title>
       <span class="gl-text-sm gl-text-gray-500" data-testid="chat-context-popover-title">{{
-        item.metadata.name
+        contextItem.metadata.name
       }}</span>
     </template>
     <div class="gl-p-3">
@@ -101,13 +105,13 @@ export default {
       </div>
       <div v-if="id !== null" class="gl-mb-2">
         <strong class="gl-mr-1">{{ translate('DuoChatContextItemPopover.IdLabel', 'ID:') }}</strong>
-        <span>{{ idPrefix }}{{ id }}</span>
+        <span>{{ formattedId }}</span>
       </div>
       <div class="gl-mb-2">
         <strong class="gl-mr-1">{{
           translate('DuoChatContextItemPopover.TypeLabel', 'Type:')
         }}</strong>
-        <span>{{ item.type }}</span>
+        <span>{{ contextItem.type }}</span>
       </div>
       <div v-if="!isEnabled" class="gl-text-red-500" data-testid="chat-context-popover-disabled">
         <strong class="gl-mr-1">{{

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

@@ -72,12 +72,12 @@ export default {
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
     },
-    onRemoveItem(item) {
+    onRemoveItem(contextItem) {
       /**
-       * Emitted when a context item should be removed.
-       * @property {Object} item - The context item to be removed
+       * Emitted when a context contextItem should be removed.
+       * @property {Object} item - The context contextItem to be removed
        */
-      this.$emit('remove', item);
+      this.$emit('remove', contextItem);
     },
   },
 };
@@ -99,20 +99,20 @@ export default {
       data-testid="chat-context-tokens-wrapper"
     >
       <gl-token
-        v-for="item in selections"
-        :key="item.id"
+        v-for="contextItem in selections"
+        :key="contextItem.id"
         :view-only="!removable"
         variant="default"
         class="gl-mb-2 gl-mr-2"
-        @close="onRemoveItem(item)"
+        @close="onRemoveItem(contextItem)"
       >
-        <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" />
-          {{ item.metadata.name }}
+        <div :id="`context-item-${contextItem.id}-${selectionsId}`" class="gl-flex gl-items-center">
+          <gl-icon :name="getIconName(contextItem.type)" :size="12" class="gl-mr-1" />
+          {{ contextItem.metadata.name }}
         </div>
         <gl-duo-chat-context-item-popover
-          :item="item"
-          :target="`context-item-${item.id}-${selectionsId}`"
+          :context-item="contextItem"
+          :target="`context-item-${contextItem.id}-${selectionsId}`"
           placement="bottom"
         />
       </gl-token>

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

@@ -10,6 +10,10 @@ export const MOCK_CATEGORIES = [
   { label: 'Merge Requests', value: CONTEXT_ITEM_TYPE_MERGE_REQUEST, icon: 'merge-request' },
 ];
 
+export function getMockCategory(categoryValue) {
+  return MOCK_CATEGORIES.find((cat) => cat.value === categoryValue);
+}
+
 export const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
   isEnabled: true,

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

@@ -27,3 +27,15 @@ export function contextItemValidator(item) {
 export function contextItemsValidator(items) {
   return Array.isArray(items) && items.every((item) => contextItemValidator(item));
 }
+
+export function formatIssueId(iid) {
+  if (!iid) return '';
+
+  return `#${iid}`;
+}
+
+export function formatMergeRequestId(iid) {
+  if (!iid) return '';
+
+  return `!${iid}`;
+}

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss

@@ -27,7 +27,7 @@
     position: absolute;
     @include gl-transition-medium;
     @include gl-opacity-0;
-    right: $gl-spacing-scale-4;
+    right: $gl-spacing-scale-3;
     top: $gl-spacing-scale-3;
   }
 
@@ -62,4 +62,4 @@
   copy-code {
     margin-right: 0;
   }
-}
+}

package/src/tokens/background.tokens.json

@@ -33,6 +33,19 @@
         "$type": "color",
         "$description": "Used to identify a disabled section."
       },
+      "overlap": {
+        "$value": {
+          "default": "{color.neutral.0}",
+          "dark": "{color.neutral.800}"
+        },
+        "$type": "color",
+        "$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
+      },
+      "section": {
+        "$value": "{background.color.overlap}",
+        "$type": "color",
+        "$description": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes."
+      },
       "overlay": {
         "$value": {
           "default": "{color.alpha.dark.24}",

package/src/tokens/border.tokens.json

@@ -25,6 +25,14 @@
         "$type": "color",
         "$description": "Used for a distinct border that emphasizes an edge or boundaries."
       },
+      "section": {
+        "$value": {
+          "default": "{border.color.default}",
+          "dark": "{background.color.default}"
+        },
+        "$type": "color",
+        "$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page."
+      },
       "transparent": {
         "$value": "{color.alpha.0}",
         "$type": "color",

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

@@ -723,6 +723,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
   --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */
+  --gl-background-color-overlap: var(--gl-color-neutral-0); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
@@ -836,6 +837,8 @@
   --gl-alert-info-title-color: var(--gl-text-color-heading); /* Used for the title color of an info alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
+  --gl-border-color-section: var(--gl-border-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-background-color-section: var(--gl-background-color-overlap); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */