@gitlab/ui 96.3.0 → 97.1.0

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -691,6 +691,7 @@ $gl-toggle-switch-icon-color-checked-hover: var(--gl-toggle-switch-icon-color-ch
 $gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-checked-focus);
 $gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
 $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
+$gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $gl-control-background-color-default: var(--gl-control-background-color-default);

package/dist/utils/number_utils.js

@@ -121,4 +121,12 @@ const formatNumberToLocale = function (value) {
   return new Intl.NumberFormat(locales, options).format(value);
 };
 
-export { addition, average, engineeringNotation, formatNumberToLocale, modulo, sum };
+// Converts a value (string, number, etc.) to a number
+// Taken from bootstrap-vue
+const toFloat = function (value) {
+  let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : NaN;
+  const float = parseFloat(value);
+  return Number.isNaN(float) ? defaultValue : float;
+};
+
+export { addition, average, engineeringNotation, formatNumberToLocale, modulo, sum, toFloat };

package/dist/vendor/bootstrap-vue/src/constants/components.js

@@ -44,8 +44,6 @@ const NAME_NAVBAR_BRAND = 'BNavbarBrand';
 const NAME_NAV_ITEM = 'BNavItem';
 const NAME_NAV_ITEM_DROPDOWN = 'BNavItemDropdown';
 const NAME_POPOVER = 'BPopover';
-const NAME_PROGRESS = 'BProgress';
-const NAME_PROGRESS_BAR = 'BProgressBar';
 const NAME_TAB = 'BTab';
 const NAME_TABLE = 'BTable';
 const NAME_TABLE_CELL = 'BTableCell';
@@ -76,4 +74,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAVBAR, NAME_NAVBAR_BRAND, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_PROGRESS, NAME_PROGRESS_BAR, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };
+export { NAME_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAVBAR, NAME_NAVBAR_BRAND, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };

package/dist/vendor/bootstrap-vue/src/index.js

@@ -46,8 +46,6 @@ export { BNavItemDropdown } from './components/nav/nav-item-dropdown';
 export { BNavbar } from './components/navbar/navbar';
 export { BNavbarBrand } from './components/navbar/navbar-brand';
 export { BPopover } from './components/popover/popover';
-export { BProgress } from './components/progress/progress';
-export { BProgressBar } from './components/progress/progress-bar';
 export { BTable } from './components/table/table';
 export { BTableLite } from './components/table/table-lite';
 export { BTableSimple } from './components/table/table-simple';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "96.3.0",
+  "version": "97.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,13 +107,13 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.25.7",
+    "@babel/core": "^7.25.8",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-env": "^7.25.8",
     "@babel/preset-react": "^7.25.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "20.3.0",
+    "@gitlab/eslint-plugin": "20.4.1",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
     "@gitlab/svgs": "3.117.0",
@@ -157,7 +157,7 @@
     "esbuild": "^0.18.0",
     "eslint": "8.57.1",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.5.0",
+    "eslint-plugin-cypress": "3.6.0",
     "eslint-plugin-storybook": "0.9.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",
@@ -174,8 +174,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.47.2",
-    "playwright-core": "^1.47.2",
+    "playwright": "^1.48.0",
+    "playwright-core": "^1.48.0",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

package/src/components/base/alert/alert.vue

@@ -156,7 +156,7 @@ export default {
       }, []);
     },
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-alert-${this.variant}`;
     },
   },

package/src/components/base/avatar/avatar.vue

@@ -72,17 +72,17 @@ export default {
   computed: {
     sizeClasses() {
       if (isNumber(this.size)) {
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         return `gl-avatar-s${this.size}`;
       }
 
       const { default: defaultSize, ...nonDefaultSizes } = this.size;
 
       return [
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         `gl-avatar-s${defaultSize || avatarSizeOptions[1]}`,
         ...Object.entries(nonDefaultSizes).map(
-          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+          // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
           ([breakpoint, size]) => `gl-${breakpoint}-avatar-s${size}`
         ),
       ];
@@ -96,7 +96,7 @@ export default {
        * Gets the remainder after dividing the 'entityId' by the number of available backgrounds.
        */
       const type = (this.entityId % IDENTICON_BG_COUNT) + 1;
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-avatar-identicon-bg${type}`;
     },
     identiconText() {

package/src/components/base/datepicker/datepicker.vue

@@ -245,7 +245,7 @@ export default {
         'gl-datepicker',
         'd-inline-block',
         'gl-w-full',
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         `gl-form-input-${this.computedWidth}`,
       ];
     },

package/src/components/base/drawer/drawer.vue

@@ -62,7 +62,7 @@ export default {
       return Boolean(this.$slots.footer);
     },
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-drawer-${this.variant}`;
     },
   },

package/src/components/base/form/form_input/form_input.scss

@@ -21,8 +21,7 @@
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
   }
 
-  &:read-only,
-  &:not(:disabled):not(.form-control-plaintext):not([type='color']):read-only {
+  &:not(.gl-form-input-not-readonly):not(:disabled):not(.form-control-plaintext):not([type='color']):read-only {
     background: var(--gl-control-background-color-readonly);
     box-shadow: none;
   }

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

@@ -42,16 +42,16 @@ export default {
         const { default: defaultWidth, ...nonDefaultWidths } = this.width;
 
         return [
-          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+          // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
           ...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []),
           ...Object.entries(nonDefaultWidths).map(
-            // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+            // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
             ([breakpoint, width]) => `gl-${breakpoint}-form-input-${width}`
           ),
         ];
       }
 
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return [`gl-form-input-${this.width}`];
     },
     listeners() {

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

@@ -34,16 +34,16 @@ export default {
         const { default: defaultWidth, ...nonDefaultWidths } = this.width;
 
         return [
-          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+          // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
           ...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []),
           ...Object.entries(nonDefaultWidths).map(
-            // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+            // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
             ([breakpoint, width]) => `gl-${breakpoint}-form-select-${width}`
           ),
         ];
       }
 
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return [`gl-form-select-${this.width}`];
     },
   },

package/src/components/base/modal/modal.scss

@@ -1,7 +1,6 @@
 // variables
 $modal-body-height: 80px;
 $modal-body-line-height: 1.5;
-$modal-box-shadow: 0 4px 16px $t-gray-a-24;
 
 // mixins
 @mixin gl-tmp-modal-btn-group-ml {
@@ -38,7 +37,7 @@ body.modal-open {
   .modal-content {
     @apply gl-rounded-base;
     @apply gl-border-0;
-    box-shadow: $modal-box-shadow;
+    @apply gl-shadow-lg;
     background-color: var(--gl-background-color-overlap);
     color: var(--gl-text-color-default);
 

package/src/components/base/progress_bar/progress_bar.md

@@ -0,0 +1,25 @@
+The progress bar component can be used to show an amount of progress.
+It comes in 4 variants and supports setting a custom maximum and height.
+
+## Value
+
+The `value` prop can be a Number or String. If not given, it will default to `0`.
+
+## Variants
+
+The following variants are available:
+
+1. 'primary' (default)
+2. 'success'
+3. 'warning'
+4. 'danger'
+
+## Maximum
+
+A custom maximum can be set with the `max` prop. If not given, it will default to `100`.
+
+## Width and Height
+
+The `GlProgressBar` will always expand to the maximum width of its parent container.
+The height can be controlled with the `height` prop. The value should be a standard
+CSS dimension (`px`, `rem`, `em`, etc.) and given as a String, e.g. `'20px'`.

package/src/components/base/progress_bar/progress_bar.scss

@@ -1,5 +1,16 @@
 .gl-progress-bar {
   background-color: var(--gl-progress-bar-track-color);
+  
+  .gl-progress {
+    @apply gl-flex-col;
+    @apply gl-justify-center;
+    @apply gl-w-full;
+    @apply gl-overflow-hidden;
+    @apply gl-text-center;
+    @apply gl-whitespace-nowrap;
+    transition: transform 0.6s $gl-easing-out-cubic;
+    transform-origin: left;
+  }
 
   .bg-primary {
     background-color: var(--gl-progress-bar-indicator-color-default) !important;

package/src/components/base/progress_bar/progress_bar.vue

@@ -1,15 +1,64 @@
 <script>
-import { BProgress } from '../../../vendor/bootstrap-vue/src/components/progress/progress';
+import { progressBarVariantOptions } from '../../../utils/constants';
+import { toFloat } from '../../../utils/number_utils';
 
 export default {
   name: 'GlProgressBar',
-  components: {
-    BProgress,
+  props: {
+    value: {
+      type: [Number, String],
+      required: false,
+      default: 0,
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: (value) => Object.keys(progressBarVariantOptions).includes(value),
+    },
+    max: {
+      type: [Number, String],
+      required: false,
+      default: 100,
+    },
+    height: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    progressHeight() {
+      return { height: this.height };
+    },
+    computedValue() {
+      return toFloat(this.value, 0);
+    },
+    computedMax() {
+      const max = toFloat(this.max, 100);
+      return max > 0 ? max : 100;
+    },
+    progressBarStyles() {
+      return {
+        transform: `scaleX(${this.computedValue / this.computedMax})`,
+      };
+    },
+    classes() {
+      return ['gl-progress', `bg-${this.variant}`];
+    },
   },
-  inheritAttrs: false,
 };
 </script>
 
 <template>
-  <b-progress v-bind="$attrs" class="gl-progress-bar" />
+  <div class="gl-progress-bar progress" :style="progressHeight">
+    <div
+      :class="classes"
+      :style="progressBarStyles"
+      role="progressbar"
+      aria-valuemin="0"
+      :aria-valuemax="String(computedMax)"
+      :aria-valuenow="computedValue"
+    ></div>
+  </div>
 </template>

package/src/components/base/toast/toast.js

@@ -44,7 +44,7 @@ function renderTitle(h, toast, options) {
 }
 
 function showToast(message, options = {}) {
-  // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+  // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
   const id = `gl-toast-${toastsCount}`;
   toastsCount += 1;
   const hide = () => {

package/src/components/base/toggle/toggle.scss

@@ -70,12 +70,16 @@ $toggle-height: 2.5 * $grid-size;
   position: relative;
   width: $toggle-width;
   height: $toggle-height;
-  @apply gl-outline-none;
   user-select: none;
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-neutral-border-color-default);
   @apply gl-rounded-pill;
   @apply gl-duration-slow;
   @apply gl-leading-normal;
 
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+
   &::selection,
   &::before::selection,
   &::after::selection {
@@ -85,22 +89,22 @@ $toggle-height: 2.5 * $grid-size;
   &:hover {
     color: var(--gl-toggle-switch-icon-color-unchecked-hover);
     background-color: var(--gl-action-strong-neutral-background-color-hover);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-neutral-border-color-hover);
   }
 
   &:focus {
     color: var(--gl-toggle-switch-icon-color-unchecked-focus);
     background-color: var(--gl-action-strong-neutral-background-color-focus);
+    @include gl-focus($color: var(--gl-action-strong-neutral-border-color-focus), $important: true);
   }
 
   &:active {
     color: var(--gl-toggle-switch-icon-color-unchecked-active);
     background-color: var(--gl-action-strong-neutral-background-color-active);
-  }
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    @apply gl-focus;
+    @include gl-focus(
+      $color: var(--gl-action-strong-neutral-border-color-active),
+      $important: true
+    );
   }
 
   .toggle-loading {
@@ -141,20 +145,30 @@ $toggle-height: 2.5 * $grid-size;
   &.is-checked {
     color: var(--gl-toggle-switch-icon-color-checked-default);
     background-color: var(--gl-action-strong-confirm-background-color-default);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-confirm-border-color-default);
 
     &:hover {
       color: var(--gl-toggle-switch-icon-color-checked-hover);
       background-color: var(--gl-action-strong-confirm-background-color-hover);
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-confirm-border-color-hover);
     }
 
     &:focus {
       color: var(--gl-toggle-switch-icon-color-checked-focus);
       background-color: var(--gl-action-strong-confirm-background-color-focus);
+      @include gl-focus(
+        $color: var(--gl-action-strong-confirm-border-color-focus),
+        $important: true
+      );
     }
 
     &:active {
       color: var(--gl-toggle-switch-icon-color-checked-active);
       background-color: var(--gl-action-strong-confirm-background-color-active);
+      @include gl-focus(
+        $color: var(--gl-action-strong-confirm-border-color-active),
+        $important: true
+      );
     }
 
     .toggle-icon {
@@ -168,10 +182,17 @@ $toggle-height: 2.5 * $grid-size;
     @apply gl-cursor-not-allowed;
     color: var(--gl-action-disabled-background-color);
     background-color: var(--gl-action-disabled-background-color);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-disabled-border-color);
 
     .toggle-icon {
       color: var(--gl-action-disabled-background-color);
       background-color: var(--gl-action-disabled-foreground-color);
     }
+
+    &:active,
+    &:focus,
+    &:focus:active {
+      @include gl-focus($color: var(--gl-action-disabled-border-color), $important: true);
+    }
   }
 }

package/src/components/base/toggle/toggle.vue

@@ -179,6 +179,7 @@ export default {
       }"
       class="gl-toggle gl-shrink-0"
       type="button"
+      :disabled="disabled"
       @click.prevent="toggleFeature"
     >
       <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />

package/src/components/base/token/token.vue

@@ -35,7 +35,7 @@ export default {
   },
   computed: {
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-token-${this.variant}-variant`;
     },
     viewOnlyClass() {

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

@@ -1,16 +1,21 @@
 // This is overridden in the `gitlab-org/gitlab` codebase so we need to increase specificity using `gl-token-selector`
 .gl-token-selector {
   &.gl-token-selector-focus-glow {
-    @include gl-focus($color: $gray-900, $important: true);
+    @include gl-focus($color: var(--gl-control-border-color-focus), $important: true);
 
     &.is-invalid {
-      @include gl-focus($color: $red-500, $important: true);
+      @include gl-focus($color: var(--gl-control-border-color-error), $important: true);
     }
   }
+
+  &.gl-token-selector-view-only {
+    background: var(--gl-control-background-color-readonly) !important;
+    box-shadow: none !important;
+  }
 }
 
 .gl-token-selector-token-container:focus .gl-token {
-  @apply gl-bg-gray-300;
+  background-color: var(--gl-token-selector-token-container-token-background-color-focus);
 }
 
 .gl-token-selector-input {

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

@@ -187,13 +187,14 @@ export default {
       return false;
     },
     stateClass() {
-      if (this.state === null) {
-        return '!gl-shadow-inner-1-gray-400';
+      switch (this.state) {
+        case true:
+          return 'is-valid';
+        case false:
+          return 'is-invalid';
+        default:
+          return '';
       }
-
-      return this.state
-        ? 'is-valid !gl-shadow-inner-1-gray-400'
-        : 'is-invalid !gl-shadow-inner-1-red-500';
     },
     hasSelectedTokens() {
       return this.selectedTokens.length > 0;
@@ -387,8 +388,15 @@ export default {
   <div>
     <div
       ref="container"
-      class="gl-token-selector gl-form-input form-control form-control-plaintext gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2"
-      :class="[inputFocused ? 'gl-token-selector-focus-glow' : '', containerClass, stateClass]"
+      class="gl-token-selector gl-form-input gl-form-input-not-readonly form-control gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2"
+      :class="[
+        {
+          'gl-token-selector-focus-glow': inputFocused,
+          'gl-token-selector-view-only': viewOnly,
+        },
+        containerClass,
+        stateClass,
+      ]"
       @click="handleContainerClick"
     >
       <!-- @slot Optional content to display a placeholder when tokens list is empty
@@ -417,7 +425,7 @@ export default {
           <input
             ref="textInput"
             type="text"
-            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-gray-900 gl-outline-none"
+            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
             :value="inputText"
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"

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

@@ -498,6 +498,7 @@
   --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-token-background-color: var(--gl-color-neutral-100); /* Used for the token background color. */
+  --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-300); /* Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
   --gl-tab-selected-indicator-color-default: var(--gl-color-blue-500); /* Used for the selected indicator of a tab. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-700); /* Used for the animated segment of a loading spinner. */

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

@@ -498,6 +498,7 @@
   --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. */
   --gl-token-background-color: var(--gl-color-neutral-800); /* Used for the token background color. */
+  --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-600); /* Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
   --gl-tab-selected-indicator-color-default: var(--gl-color-blue-400); /* Used for the selected indicator of a tab. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner. */

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

@@ -691,6 +691,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#63a6e9'; // Used for
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#63a6e9'; // Used for the icon color of a checked toggle switch in the focus state.
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#9dc7f1'; // Used for the icon color of a checked toggle switch in the active state.
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d'; // Used for the icon color of a disabled toggle switch.
+export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#626168'; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 export const GL_TOKEN_FOREGROUND_COLOR = '#ececef'; // Used for the token foreground color.
 export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f'; // Used for the token background color.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.

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

@@ -691,6 +691,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#1068bf'; // Used for
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#1068bf'; // Used for the icon color of a checked toggle switch in the focus state.
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#0b5cad'; // Used for the icon color of a checked toggle switch in the active state.
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#ececef'; // Used for the icon color of a disabled toggle switch.
+export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#a4a3a8'; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f'; // Used for the token foreground color.
 export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde'; // Used for the token background color.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.

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

@@ -15349,6 +15349,41 @@
       }
     }
   },
+  "token-selector": {
+    "token-container": {
+      "token": {
+        "background": {
+          "color": {
+            "focus": {
+              "value": "#626168",
+              "$type": "color",
+              "comment": "Used for the background color of a token in a token-selector when it's token-container is in the focus state.",
+              "filePath": "src/tokens/contextual/token-selector.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.300}",
+                  "dark": "{color.neutral.600}"
+                },
+                "$type": "color",
+                "comment": "Used for the background color of a token in a token-selector when it's token-container is in the focus state."
+              },
+              "name": "TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS",
+              "attributes": {},
+              "path": [
+                "token-selector",
+                "token-container",
+                "token",
+                "background",
+                "color",
+                "focus"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "token": {
     "foreground": {
       "color": {