@gitlab/ui 91.6.0 → 91.8.0

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

@@ -1,13 +1,15 @@
 <script>
 import { translate } from '../../../../../../../utils/i18n';
 import GlCard from '../../../../../../base/card/card.vue';
-import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.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: {
@@ -60,6 +62,7 @@ export default {
   },
   data() {
     return {
+      activeIndex: 0,
       selectedCategory: null,
     };
   },
@@ -78,6 +81,7 @@ export default {
   methods: {
     selectCategory(category) {
       this.selectedCategory = category;
+      this.activeIndex = 0;
 
       /**
        * Emitted when a search should be performed.
@@ -119,6 +123,7 @@ export default {
     },
     resetSelection() {
       this.selectedCategory = null;
+      this.activeIndex = 0;
     },
   },
   i18n: {
@@ -147,12 +152,13 @@ export default {
       body-class="!gl-p-2"
       data-testid="context-item-menu"
     >
-      <ul v-if="showCategorySelection" data-testid="context-menu-category-items">
-        <!-- Placeholder for GlDuoChatContextItemMenuCategoryItems component coming in a future iteration -->
-        <li v-for="category of categories" :key="category.value" @click="selectCategory(category)">
-          {{ category.label }}
-        </li>
-      </ul>
+      <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>

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/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. */
@@ -506,6 +506,8 @@
   --gl-popover-background-color: var(--gl-color-neutral-0); /* Used for the background color of popover. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-100); /* Used for the mention link background when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-100); /* Used for the mention link default background. */
+  --gl-link-mention-text-color-current: var(--gl-color-orange-800); /* Used for the mention link text color when referencing the current user. */
+  --gl-link-mention-text-color-default: var(--gl-color-blue-700); /* Used for the mention link text color. */
   --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-0); /* Used for the scoped label remove button icon in the hover state. */
   --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-950); /* Used for the scoped label remove button icon in the default state. */
   --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the scoped label remove button background in the hover state. */

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. */
@@ -506,6 +506,8 @@
   --gl-popover-background-color: var(--gl-color-neutral-900); /* Used for the background color of popover. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-800); /* Used for the mention link background when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-800); /* Used for the mention link default background. */
+  --gl-link-mention-text-color-current: var(--gl-color-orange-100); /* Used for the mention link text color when referencing the current user. */
+  --gl-link-mention-text-color-default: var(--gl-color-blue-200); /* Used for the mention link text color. */
   --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-950); /* Used for the scoped label remove button icon in the hover state. */
   --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-0); /* Used for the scoped label remove button icon in the default state. */
   --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-0); /* Used for the scoped label remove button background in the hover state. */

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

@@ -596,6 +596,8 @@ export const GL_LABEL_SCOPED_TEXT_COLOR = '#fff'; // Used for the scoped label t
 export const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#fff'; // Used for the scoped label remove button background in the hover state.
 export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#fff'; // Used for the scoped label remove button icon in the default state.
 export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#18171d'; // Used for the scoped label remove button icon in the hover state.
+export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the mention link text color.
+export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8'; // Used for the mention link text color when referencing the current user.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the mention link default background.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#703800'; // Used for the mention link background when referencing the current user.
 export const GL_POPOVER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of popover.
@@ -611,7 +613,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

@@ -596,6 +596,8 @@ export const GL_LABEL_SCOPED_TEXT_COLOR = '#18171d'; // Used for the scoped labe
 export const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the scoped label remove button background in the hover state.
 export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#18171d'; // Used for the scoped label remove button icon in the default state.
 export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#fff'; // Used for the scoped label remove button icon in the hover state.
+export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#0b5cad'; // Used for the mention link text color.
+export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#703800'; // Used for the mention link text color when referencing the current user.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the mention link default background.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#f5d9a8'; // Used for the mention link background when referencing the current user.
 export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
@@ -611,7 +613,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

@@ -13132,6 +13132,58 @@
   },
   "link": {
     "mention": {
+      "text": {
+        "color": {
+          "default": {
+            "value": "#9dc7f1",
+            "$type": "color",
+            "comment": "Used for the mention link text color.",
+            "filePath": "src/tokens/contextual/link.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for the mention link text color."
+            },
+            "name": "LINK_MENTION_TEXT_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "link",
+              "mention",
+              "text",
+              "color",
+              "default"
+            ]
+          },
+          "current": {
+            "value": "#f5d9a8",
+            "$type": "color",
+            "comment": "Used for the mention link text color when referencing the current user.",
+            "filePath": "src/tokens/contextual/link.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.orange.800}",
+                "dark": "{color.orange.100}"
+              },
+              "$type": "color",
+              "comment": "Used for the mention link text color when referencing the current user."
+            },
+            "name": "LINK_MENTION_TEXT_COLOR_CURRENT",
+            "attributes": {},
+            "path": [
+              "link",
+              "mention",
+              "text",
+              "color",
+              "current"
+            ]
+          }
+        }
+      },
       "background": {
         "color": {
           "default": {
@@ -13516,15 +13568,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/src/tokens/build/json/tokens.json

@@ -13132,6 +13132,58 @@
   },
   "link": {
     "mention": {
+      "text": {
+        "color": {
+          "default": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for the mention link text color.",
+            "filePath": "src/tokens/contextual/link.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for the mention link text color."
+            },
+            "name": "LINK_MENTION_TEXT_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "link",
+              "mention",
+              "text",
+              "color",
+              "default"
+            ]
+          },
+          "current": {
+            "value": "#703800",
+            "$type": "color",
+            "comment": "Used for the mention link text color when referencing the current user.",
+            "filePath": "src/tokens/contextual/link.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.orange.800}",
+                "dark": "{color.orange.100}"
+              },
+              "$type": "color",
+              "comment": "Used for the mention link text color when referencing the current user."
+            },
+            "name": "LINK_MENTION_TEXT_COLOR_CURRENT",
+            "attributes": {},
+            "path": [
+              "link",
+              "mention",
+              "text",
+              "color",
+              "current"
+            ]
+          }
+        }
+      },
       "background": {
         "color": {
           "default": {
@@ -13516,15 +13568,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/src/tokens/build/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.
@@ -504,6 +504,8 @@ $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the ske
 $gl-popover-background-color: $gl-color-neutral-900; // Used for the background color of popover.
 $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
+$gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.
+$gl-link-mention-text-color-default: $gl-color-blue-200; // Used for the mention link text color.
 $gl-label-scoped-button-icon-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button icon in the hover state.
 $gl-label-scoped-button-icon-color-default: $gl-color-neutral-0; // Used for the scoped label remove button icon in the default state.
 $gl-label-scoped-button-background-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button background in the hover state.

package/src/tokens/build/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.
@@ -504,6 +504,8 @@ $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the ske
 $gl-popover-background-color: $gl-color-neutral-0; // Used for the background color of popover.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
+$gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
+$gl-link-mention-text-color-default: $gl-color-blue-700; // Used for the mention link text color.
 $gl-label-scoped-button-icon-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button icon in the hover state.
 $gl-label-scoped-button-icon-color-default: $gl-color-neutral-950; // Used for the scoped label remove button icon in the default state.
 $gl-label-scoped-button-background-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button background in the hover state.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -596,6 +596,8 @@ $gl-label-scoped-text-color: var(--gl-label-scoped-text-color);
 $gl-label-scoped-button-background-color-hover: var(--gl-label-scoped-button-background-color-hover);
 $gl-label-scoped-button-icon-color-default: var(--gl-label-scoped-button-icon-color-default);
 $gl-label-scoped-button-icon-color-hover: var(--gl-label-scoped-button-icon-color-hover);
+$gl-link-mention-text-color-default: var(--gl-link-mention-text-color-default);
+$gl-link-mention-text-color-current: var(--gl-link-mention-text-color-current);
 $gl-link-mention-background-color-default: var(--gl-link-mention-background-color-default);
 $gl-link-mention-background-color-current: var(--gl-link-mention-background-color-current);
 $gl-popover-background-color: var(--gl-popover-background-color);

package/src/tokens/contextual/link.tokens.json

@@ -1,6 +1,26 @@
 {
   "link": {
     "mention": {
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the mention link text color."
+          },
+          "current": {
+            "$value": {
+              "default": "{color.orange.800}",
+              "dark": "{color.orange.100}"
+            },
+            "$type": "color",
+            "$description": "Used for the mention link text color when referencing the current user."
+          }
+        }
+      },
       "background": {
         "color": {
           "default": {

package/src/tokens/control.tokens.json

@@ -28,8 +28,8 @@
         },
         "readonly": {
           "$value": {
-            "default": "{color.neutral.10}",
-            "dark": "{color.neutral.900}"
+            "default": "{color.alpha.dark.2}",
+            "dark": "{color.alpha.light.8}"
           },
           "$type": "color",
           "$description": "Used for the background of static content that prepends or appends a text input."