@gitlab/ui 111.1.0 → 111.2.0

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -2,93 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-$gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
-$gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
-$gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
-$gl-action-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default);
-$gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover);
-$gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus);
-$gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active);
-$gl-action-selected-background-color-default: var(--gl-action-selected-background-color-default);
-$gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
-$gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
-$gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
-$gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
-$gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
-$gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);
-$gl-action-selected-border-color-active: var(--gl-action-selected-border-color-active);
-$gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
-$gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
-$gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);
-$gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-active);
-$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
-$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
-$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
-$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
-$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
-$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
-$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
-$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
-$gl-action-confirm-foreground-color-default: var(--gl-action-confirm-foreground-color-default);
-$gl-action-confirm-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover);
-$gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus);
-$gl-action-confirm-foreground-color-active: var(--gl-action-confirm-foreground-color-active);
-$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
-$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
-$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
-$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
-$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
-$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
-$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
-$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
-$gl-action-danger-foreground-color-default: var(--gl-action-danger-foreground-color-default);
-$gl-action-danger-foreground-color-hover: var(--gl-action-danger-foreground-color-hover);
-$gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-focus);
-$gl-action-danger-foreground-color-active: var(--gl-action-danger-foreground-color-active);
-$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
-$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
-$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
-$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
-$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
-$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
-$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
-$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
-$gl-action-strong-confirm-background-color-default: var(--gl-action-strong-confirm-background-color-default);
-$gl-action-strong-confirm-background-color-hover: var(--gl-action-strong-confirm-background-color-hover);
-$gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-focus);
-$gl-action-strong-confirm-background-color-active: var(--gl-action-strong-confirm-background-color-active);
-$gl-action-strong-confirm-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default);
-$gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover);
-$gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus);
-$gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active);
-$gl-action-strong-confirm-border-color-default: var(--gl-action-strong-confirm-border-color-default);
-$gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-hover);
-$gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-focus);
-$gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-active);
-$gl-action-strong-neutral-background-color-default: var(--gl-action-strong-neutral-background-color-default);
-$gl-action-strong-neutral-background-color-hover: var(--gl-action-strong-neutral-background-color-hover);
-$gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-focus);
-$gl-action-strong-neutral-background-color-active: var(--gl-action-strong-neutral-background-color-active);
-$gl-action-strong-neutral-foreground-color-default: var(--gl-action-strong-neutral-foreground-color-default);
-$gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-hover);
-$gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-focus);
-$gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-active);
-$gl-action-strong-neutral-border-color-default: var(--gl-action-strong-neutral-border-color-default);
-$gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-hover);
-$gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-focus);
-$gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-active);
-$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);
 $gl-color-alpha-dark-4: var(--gl-color-alpha-dark-4);
@@ -315,6 +228,16 @@ $gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
 $gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
 $gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
 $gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
+$gl-line-height-12: var(--gl-line-height-12);
+$gl-line-height-16: var(--gl-line-height-16);
+$gl-line-height-20: var(--gl-line-height-20);
+$gl-line-height-24: var(--gl-line-height-24);
+$gl-line-height-28: var(--gl-line-height-28);
+$gl-line-height-32: var(--gl-line-height-32);
+$gl-line-height-36: var(--gl-line-height-36);
+$gl-line-height-42: var(--gl-line-height-42);
+$gl-line-height-44: var(--gl-line-height-44);
+$gl-line-height-52: var(--gl-line-height-52);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
 $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);
@@ -734,26 +657,6 @@ $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disable
 $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);
-$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
-$gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
-$gl-control-background-color-readonly: var(--gl-control-background-color-readonly);
-$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
-$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
-$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
-$gl-control-border-color-default: var(--gl-control-border-color-default);
-$gl-control-border-color-hover: var(--gl-control-border-color-hover);
-$gl-control-border-color-focus: var(--gl-control-border-color-focus);
-$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
-$gl-control-border-color-error: var(--gl-control-border-color-error);
-$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
-$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
-$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
-$gl-control-text-color-error: var(--gl-control-text-color-error);
-$gl-control-text-color-valid: var(--gl-control-text-color-valid);
-$gl-control-placeholder-color: var(--gl-control-placeholder-color);
-$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
-$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $data-viz-green-50: var(--data-viz-green-50);
 $data-viz-green-100: var(--data-viz-green-100);
 $data-viz-green-200: var(--data-viz-green-200);
@@ -974,6 +877,113 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
+$gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
+$gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
+$gl-action-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default);
+$gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover);
+$gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus);
+$gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active);
+$gl-action-selected-background-color-default: var(--gl-action-selected-background-color-default);
+$gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
+$gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
+$gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
+$gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
+$gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
+$gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);
+$gl-action-selected-border-color-active: var(--gl-action-selected-border-color-active);
+$gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
+$gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
+$gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);
+$gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-active);
+$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
+$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
+$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
+$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
+$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
+$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
+$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
+$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
+$gl-action-confirm-foreground-color-default: var(--gl-action-confirm-foreground-color-default);
+$gl-action-confirm-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover);
+$gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus);
+$gl-action-confirm-foreground-color-active: var(--gl-action-confirm-foreground-color-active);
+$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
+$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
+$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
+$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
+$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
+$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
+$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
+$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
+$gl-action-danger-foreground-color-default: var(--gl-action-danger-foreground-color-default);
+$gl-action-danger-foreground-color-hover: var(--gl-action-danger-foreground-color-hover);
+$gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-focus);
+$gl-action-danger-foreground-color-active: var(--gl-action-danger-foreground-color-active);
+$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
+$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
+$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
+$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
+$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
+$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
+$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
+$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
+$gl-action-strong-confirm-background-color-default: var(--gl-action-strong-confirm-background-color-default);
+$gl-action-strong-confirm-background-color-hover: var(--gl-action-strong-confirm-background-color-hover);
+$gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-focus);
+$gl-action-strong-confirm-background-color-active: var(--gl-action-strong-confirm-background-color-active);
+$gl-action-strong-confirm-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default);
+$gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover);
+$gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus);
+$gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active);
+$gl-action-strong-confirm-border-color-default: var(--gl-action-strong-confirm-border-color-default);
+$gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-hover);
+$gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-focus);
+$gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-active);
+$gl-action-strong-neutral-background-color-default: var(--gl-action-strong-neutral-background-color-default);
+$gl-action-strong-neutral-background-color-hover: var(--gl-action-strong-neutral-background-color-hover);
+$gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-focus);
+$gl-action-strong-neutral-background-color-active: var(--gl-action-strong-neutral-background-color-active);
+$gl-action-strong-neutral-foreground-color-default: var(--gl-action-strong-neutral-foreground-color-default);
+$gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-hover);
+$gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-focus);
+$gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-active);
+$gl-action-strong-neutral-border-color-default: var(--gl-action-strong-neutral-border-color-default);
+$gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-hover);
+$gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-focus);
+$gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-active);
+$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-control-background-color-default: var(--gl-control-background-color-default);
+$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
+$gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
+$gl-control-background-color-readonly: var(--gl-control-background-color-readonly);
+$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
+$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
+$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
+$gl-control-border-color-default: var(--gl-control-border-color-default);
+$gl-control-border-color-hover: var(--gl-control-border-color-hover);
+$gl-control-border-color-focus: var(--gl-control-border-color-focus);
+$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
+$gl-control-border-color-error: var(--gl-control-border-color-error);
+$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
+$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
+$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
+$gl-control-text-color-error: var(--gl-control-text-color-error);
+$gl-control-text-color-valid: var(--gl-control-text-color-valid);
+$gl-control-placeholder-color: var(--gl-control-placeholder-color);
+$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
+$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color);
 $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
 $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);
@@ -1004,16 +1014,6 @@ $gl-icon-color-info: var(--gl-icon-color-info);
 $gl-icon-color-warning: var(--gl-icon-color-warning);
 $gl-icon-color-danger: var(--gl-icon-color-danger);
 $gl-icon-color-success: var(--gl-icon-color-success);
-$gl-line-height-12: var(--gl-line-height-12);
-$gl-line-height-16: var(--gl-line-height-16);
-$gl-line-height-20: var(--gl-line-height-20);
-$gl-line-height-24: var(--gl-line-height-24);
-$gl-line-height-28: var(--gl-line-height-28);
-$gl-line-height-32: var(--gl-line-height-32);
-$gl-line-height-36: var(--gl-line-height-36);
-$gl-line-height-42: var(--gl-line-height-42);
-$gl-line-height-44: var(--gl-line-height-44);
-$gl-line-height-52: var(--gl-line-height-52);
 $gl-shadow-color-default: var(--gl-shadow-color-default);
 $gl-status-neutral-background-color: var(--gl-status-neutral-background-color);
 $gl-status-neutral-text-color: var(--gl-status-neutral-text-color);

package/dist/utils/is_slot_empty.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import { isVue3 } from './constants';
 
 // Fragment will be available only in Vue.js 3
 const {
@@ -7,9 +6,6 @@ const {
   Comment,
   Text
 } = Vue;
-function callIfNeeded(fnOrResult, args) {
-  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
-}
 function isVnodeEmpty(vnode) {
   if (!vnode || Comment && vnode.type === Comment) {
     return true;
@@ -31,10 +27,7 @@ function isVnodeEmpty(vnode) {
 }
 function isSlotEmpty(vueInstance, slot, slotArgs) {
   var _vueInstance$$scopedS, _vueInstance$$scopedS2;
-  const slotContent = isVue3 ?
-  // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
-  // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
-  callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs) : (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
+  const slotContent = (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
 
   // eslint-disable-next-line unicorn/no-array-callback-reference
   return isVnodeEmpty(slotContent);

package/package.json

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

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

@@ -131,11 +131,12 @@ export default {
   <div class="gl-flex gl-w-full gl-flex-nowrap gl-items-start">
     <div
       ref="tokenContainer"
-      class="-gl-mx-1 -gl-my-1 gl-flex gl-w-full gl-flex-wrap gl-items-center"
+      class="-gl-mx-1 -gl-my-1 gl-flex gl-w-auto gl-list-none gl-flex-wrap gl-items-center gl-p-0"
       role="listbox"
       aria-multiselectable="false"
       aria-orientation="horizontal"
       :aria-invalid="state === false && 'true'"
+      aria-label="token list"
       @keydown.left="handleLeftArrow"
       @keydown.right="handleRightArrow"
       @keydown.home="handleHome"
@@ -168,8 +169,8 @@ export default {
           </slot>
         </gl-token>
       </div>
-      <slot name="text-input"></slot>
     </div>
+    <slot name="text-input"></slot>
     <div v-if="showClearAllButton" class="gl-ml-3 gl-p-1">
       <gl-button
         size="small"

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

@@ -16,6 +16,7 @@
 
 .gl-token-selector-token-container:focus .gl-token {
   background-color: var(--gl-token-selector-token-container-token-background-color-focus);
+  @apply gl-focus;
 }
 
 .gl-token-selector-input {

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

@@ -330,6 +330,8 @@ export default {
        * @property {object} token
        */
       this.$emit('token-add', dropdownItem);
+
+      this.focusTextInput();
     },
     removeToken(token) {
       /**
@@ -425,6 +427,7 @@ export default {
           <input
             ref="textInput"
             type="text"
+            aria-label="token selector"
             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"