Create "Token Selector" component

## Objective

- Create a token selector that can be used for this feature: https://gitlab.com/gitlab-org/gitlab/-/issues/33143 (Thread discussing design: https://gitlab.com/gitlab-org/gitlab/-/issues/33143#note_333784563)
- Make it flexible enough to be able to replace the "Invite user dropdown" (used to add users to projects/groups) in the future
![Screen_Shot_2020-05-22_at_10.24.27_AM](/uploads/31f185ec08f4a3dc1ebbf9dc2d09db39/Screen_Shot_2020-05-22_at_10.24.27_AM.png)

## Examples

See !1460 

## Proposed API

### Props
| Name | Description | Type | Required? | Default Value |
| ------ | ------ | ------ | ------ | ------ |
| `dropdown-items` | Items to display in dropdown | `Array` | `false` | `[]` |
| `selected-tokens` | Tokens that are selected. This prop will automatically be added when using `v-model`. | `Array` | `true` | `[]` |
| `allow-user-defined-tokens` | Should users be allowed to add tokens that are not in the `dropdown-items` | `Function` or `Boolean` | `false` | `true` |
| `loading` | Dropdown options are loading, can be used when requesting new dropdown options | `Boolean` | `false` | `false` |
| `hide-dropdown-with-no-items` | Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false` | `Boolean` | `false` | `false` |

### Slots
| Name | Description | Default | Scoped Props |
| ------ | ------ | ------ | ------ |
| `no-results-content` | Content to display when `dropdown-items` is empty and `allow-user-defined-tokens` is `false` | `No matches found` | N/A |
| `user-defined-token-content` | Content to display when adding a user defined token | `Add "{{ inputText }}"` | `inputText` |
| `token-content` | Content to pass to the token component slot. Can be used to add an avatar to the token | `token.name` | `token` |
| `dropdown-item-content` | Dropdown item content | `dropdownItem.name` | `dropdownItem` |
| `loading-content` | Loading content | `Searching...` | N/A

### Events
| Name | Description | Arguments |
| ------ | ------ | ------ |
| `text-input` | Fired when user types in the text input | `inputText` |
| `input` | Fired when a token is add or removed | `selectedTokens` |
| `focus` | Input focus event | `event` |
| `blur` | Input blur event | `event` |
| `token-add` | Fired when a token is added | `token` |
| `token-remove` | Fired when a token is removed | `token` |

`v-model` will return array of selected tokens

### Keyboard navigation
Based on [Material Chips](https://material.angular.io/components/chips/overview#keyboard-interaction)

| Key | Action |
| ------ | ------ |
| `enter` | Adds selected dropdown as token |
| `escape` | Closes dropdown and clears text input |
| `backspace` | Select last token. `backspace` again to delete |
| `left/right arrows` | Move between selected tokens |
| `up/down arrows` | Move between dropdown options |
| `home` | When token is selected, move focus to first token. When dropdown item is selected, move to first dropdown item |
| `end` | When token is selected, move focus to last token. When dropdown item is selected, move to last dropdown item |

### A11y

References: 

- [`ARIA: listbox role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role)
- [Material Chips](https://material.angular.io/components/chips/overview#keyboard-interaction)

#### Token container attributes

| Attribute |
| ------ |
| `role="listbox"` |
| `aria-multiselectable="false"` |
| `aria-orientation="horizontal"` |

#### Token 

| Attribute |
| ------ |
| `role="option"` |

Story points: 5.0