diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001434-9c6ea57daf-7c9d2641e8.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001434-9c6ea57daf-7c9d2641e8.zip
deleted file mode 100644
index daa4e7488..000000000
Binary files a/.yarn/cache/caniuse-lite-npm-1.0.30001434-9c6ea57daf-7c9d2641e8.zip and /dev/null differ
diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001445-535a3ade2b-f98ca67829.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001445-535a3ade2b-f98ca67829.zip
deleted file mode 100644
index 52a99f342..000000000
Binary files a/.yarn/cache/caniuse-lite-npm-1.0.30001445-535a3ade2b-f98ca67829.zip and /dev/null differ
diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001489-94fce279d5-94585a351f.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001489-94fce279d5-94585a351f.zip
new file mode 100644
index 000000000..f19a66fe9
Binary files /dev/null and b/.yarn/cache/caniuse-lite-npm-1.0.30001489-94fce279d5-94585a351f.zip differ
diff --git a/src/components/CvDropdown/CvDropdown.stories.mdx b/src/components/CvDropdown/CvDropdown.stories.mdx
new file mode 100644
index 000000000..17d86c3ee
--- /dev/null
+++ b/src/components/CvDropdown/CvDropdown.stories.mdx
@@ -0,0 +1,342 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import CvDropdown from './CvDropdown.vue';
+import CvDropdownItem from './CvDropdownItem.vue'
+import { action } from '@storybook/addon-actions';
+import { ref } from "vue";
+const myValue = ref('baby-yoda');
+
+<Meta title={`${sbCompPrefix}/CvDropdown`} component={CvDropdown} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvDropdown,CvDropdownItem
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      ...args,
+      props: args.props,
+      light: args.light,
+      placeholder: args.placeholder,
+      value: args.value,
+      label: args.label,
+      up: args.up,
+      inline: args.inline,
+      helperText: args.helperText,
+      hideSelected: args.hideSelected,
+      warnText: args.warnText,
+      invalidMessage: args.invalidMessage,
+      disabled: args.disabled,
+      size: args.size,
+      items: args.items,
+      onChange: action('change'),
+      myValue: myValue,
+      slotInvalidText: args.slotInvalidText,
+      slotWarningText: args.slotWarningText,
+      slotHelperText: args.slotHelperText
+    };
+  },
+  template: args.template,
+});
+const defaultTemplate = `
+<div :style="{width: '300px', paddingTop: up ? '90px' : undefined}">
+<cv-dropdown
+  :light="light"
+  :placeholder="placeholder"
+  :value="value"
+  :up="up"
+  :inline="inline"
+  :helper-text="helperText"
+  :warn-text="warnText"
+  :hide-selected="hideSelected"
+  :invalid-message="invalidMessage"
+  :label="label"
+  :disabled="disabled"
+  :size="size"
+  @change="onChange">
+          <cv-dropdown-item value="mando"><span>Din Djarin</span></cv-dropdown-item>
+          <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
+          <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
+          <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
+          <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
+ </cv-dropdown>
+</div>
+`;
+const slotsTemplate = `
+<div :style="{width: '300px'}">
+<cv-dropdown
+  :light="light"
+  :placeholder="placeholder"
+  :value="value"
+  :up="up"
+  :inline="inline"
+  :helper-text="helperText"
+  :warn-text="warnText"
+  :hide-selected="hideSelected"
+  :invalid-message="invalidMessage"
+  :label="label"
+  :disabled="disabled"
+  :size="size"
+  @change="onChange">
+    <template v-if="slotInvalidText"v-slot:invalid-message>Do not go to the dark side</template>
+    <template v-if="slotWarningText" v-slot:warning-message>Can this ally be trusted?</template>
+    <template v-if="slotHelperText" v-slot:helper-text>Choose ally strong with the force</template>
+    <cv-dropdown-item value="mando"><span>Din Djarin</span></cv-dropdown-item>
+    <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
+    <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
+    <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
+    <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
+ </cv-dropdown>
+</div>
+`;
+const itemsTemplate = `
+<div :style="{width: '300px'}">
+<cv-dropdown
+  :light="light"
+  :placeholder="placeholder"
+  :value="value"
+  :up="up"
+  :inline="inline"
+  :helper-text="helperText"
+  :warn-text="warnText"
+  :hide-selected="hideSelected"
+  :invalid-message="invalidMessage"
+  :label="label"
+  :disabled="disabled"
+  :size="size"
+  :items="items"
+  @change="onChange">
+ </cv-dropdown>
+</div>
+`;
+const vmodelTemplate = `
+<div :style="{width: '300px'}">
+<cv-dropdown
+  v-model:value="myValue"
+  :label="label"
+  :placeholder="placeholder"
+  @change="onChange">
+    <cv-dropdown-item value="mando"><span>Din Djarin</span></cv-dropdown-item>
+    <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
+    <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
+    <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
+    <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
+ </cv-dropdown>
+ <div>V-Model value: {{ myValue }}</div>
+  <select v-model="myValue">
+    <option value="mando">Mandalorian</option>
+    <option value="nite-owl">Bo-Katan</option>
+    <option value="baby-yoda">Grogu</option>
+    <option value="mysterious">Armorer</option>
+    <option value="bounty-hunter">Karga</option>
+  </select>
+</div>
+`;
+
+
+
+# CvDropdown
+Notes:
+- You can place a Dropdown inline with other content by using the inline variant
+Migration notes:
+
+- The `v-model` is different in Vue 3 than Vue 2. You can still specify the `v-model=something` to control the visibility but
+  if you specify it like this you will see a deprecation message in the log. Please use `v-model:value=something` instead.
+- Add the `size` option to match Carbon React
+- Add the `warnText` option to match Carbon React
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'props',
+          'default',
+          'template',
+          'change',
+          'update:modelValue',
+          'update:value',
+          'helper-text',
+          'invalid-message',
+          'warning-message',
+          'modelValue'
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      props: {
+        modelValue: undefined,
+      },
+      label: "Characters",
+      placeholder: "Choose an ally",
+      helperText: "May the force be with you",
+      light: false
+    }}
+    argTypes={{
+      light: {type: String, description: "`true` to use the light version",  table: {category: 'props'}},
+      size: {
+        control: 'select',
+        default: 'md',
+        options: ['sm', 'md', 'lg'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+  # Use slots with helper, invalid, and warning text
+
+<Canvas>
+  <Story
+    name="Slots"
+    parameters={{
+      controls: {
+        exclude: [
+          'props',
+          'default',
+          'template',
+          'change',
+          'update:modelValue',
+          'update:value',
+          'helper-text',
+          'invalid-message',
+          'warning-message',
+          'modelValue',
+          'ariaLabel',
+          'disabled',
+          'formItem',
+          'helperText',
+          'hideSelected',
+          'inline',
+          'invalidMessage',
+          'items',
+          'label',
+          'placeholder',
+          'size',
+          'up',
+          'value',
+          'warnText'
+        ],
+      },
+      docs: { source: { code: slotsTemplate } },
+    }}
+    args={{
+      template: slotsTemplate,
+      label: "Characters",
+      placeholder: "Choose an ally",
+      slotInvalidText: false,
+      slotWarningText: false,
+      slotHelperText: true
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+# Use an array of strings as the dropdown options
+- Notes: this version does not seem very useful. Please comment in the slack channel if you are using this.
+Curious to know how it might be currently used.
+
+<Canvas>
+  <Story
+    name="Items"
+    parameters={{
+      controls: {
+        exclude: [
+          'props',
+          'default',
+          'template',
+          'change',
+          'update:modelValue',
+          'update:value',
+          'helper-text',
+          'invalid-message',
+          'warning-message',
+          'modelValue',
+          'ariaLabel',
+          'disabled',
+          'formItem',
+          'helperText',
+          'hideSelected',
+          'inline',
+          'invalidMessage',
+          'items',
+          'label',
+          'placeholder',
+          'size',
+          'up',
+          'value',
+          'warnText'
+        ],
+      },
+      docs: { source: { code: itemsTemplate } },
+    }}
+    args={{
+      template: itemsTemplate,
+      label: "Planets",
+      placeholder: "Where will you visit",
+      items: ["Coruscant", "Tatooine", "Naboo", "Hoth", "Kamino", "Mandalore"],
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Use with v-model
+
+<Canvas>
+  <Story
+    name="v-model"
+    parameters={{
+      controls: {
+        exclude: [
+          'props',
+          'default',
+          'template',
+          'change',
+          'update:modelValue',
+          'update:value',
+          'helper-text',
+          'invalid-message',
+          'warning-message',
+          'modelValue',
+          'ariaLabel',
+          'disabled',
+          'formItem',
+          'helperText',
+          'hideSelected',
+          'inline',
+          'invalidMessage',
+          'items',
+          'label',
+          'placeholder',
+          'size',
+          'up',
+          'value',
+          'warnText'
+        ],
+      },
+      docs: { source: { code: vmodelTemplate } },
+    }}
+    args={{
+      template: vmodelTemplate,
+      label: "Characters",
+      placeholder: "Choose an ally",
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/CvDropdown/CvDropdown.vue b/src/components/CvDropdown/CvDropdown.vue
new file mode 100644
index 000000000..566da2ab8
--- /dev/null
+++ b/src/components/CvDropdown/CvDropdown.vue
@@ -0,0 +1,413 @@
+<!--
+  Carbon Style Dropdown
+
+  Attributes:
+    placeholder: Placeholder text displayed before any  selection is made.
+
+  Usage:
+    <cv-dropdown placeholder="Choose an option">
+      <cv-dropdown-item value="10">Option 1</cv-dropdown-item>
+      <cv-dropdown-item value="20">Option 2</cv-dropdown-item>
+      <cv-dropdown-item value="30">Option 3</cv-dropdown-item>
+      <cv-dropdown-item value="40">Option 4</cv-dropdown-item>
+      <cv-dropdown-item value="50">Option 5</cv-dropdown-item>
+    </cv-dropdown>
+
+-->
+
+<template>
+  <div :id="uid" ref="el" :class="{ [`${carbonPrefix}--form-item`]: formItem }">
+    <div
+      :class="[
+        `${carbonPrefix}--dropdown__wrapper`,
+        `${carbonPrefix}--list-box__wrapper`,
+        {
+          [`${carbonPrefix}--dropdown__wrapper--inline`]: inline,
+          [`${carbonPrefix}--list-box__wrapper--inline`]: inline,
+          'cv-dropdown': !formItem,
+        },
+      ]"
+      :style="wrapperStyleOverride"
+    >
+      <label
+        v-if="label"
+        :id="`${uid}-label`"
+        :class="[
+          `${carbonPrefix}--label`,
+          { [`${carbonPrefix}--label--disabled`]: disabled },
+        ]"
+        >{{ label }}</label
+      >
+
+      <div
+        ref="listBox"
+        :aria-label="ariaLabel"
+        :class="[
+          `${carbonPrefix}--dropdown`,
+          `${carbonPrefix}--dropdown--${size}`,
+          {
+            [`${carbonPrefix}--dropdown--show-selected`]: !hideSelected,
+            [`${carbonPrefix}--dropdown--warning`]: isWarning,
+            [`${carbonPrefix}--list-box--warning`]: isWarning,
+            [`${carbonPrefix}--dropdown--invalid`]: data.isInvalid,
+            [`${carbonPrefix}--list-box`]: true,
+            [`${carbonPrefix}--dropdown--light`]: isLight,
+            [`${carbonPrefix}--list-box--up`]: up,
+            [`${carbonPrefix}--dropdown--open`]: open,
+            [`${carbonPrefix}--list-box--expanded`]: open,
+            [`${carbonPrefix}--dropdown--disabled`]: disabled,
+            [`${carbonPrefix}--dropdown--inline`]: inline,
+          },
+        ]"
+        :data-invalid="data.isInvalid"
+        :data-value="dataValue"
+        data-dropdown
+        v-bind="$attrs"
+        @click="onClick"
+        @keydown.down.prevent="onDown"
+        @keydown.up.prevent="onUp"
+        @keydown.enter.prevent="onClick"
+        @keydown.esc.prevent="onEsc"
+        @keydown.tab="onTab"
+      >
+        <button
+          ref="button"
+          :aria-controls="`${uid}-menu`"
+          :aria-disabled="disabled"
+          :aria-expanded="open ? 'true' : 'false'"
+          :aria-labelledby="ariaLabeledBy"
+          :class="`${carbonPrefix}--list-box__field`"
+          :disabled="disabled"
+          aria-haspopup="true"
+          type="button"
+        >
+          <warning-alt-filled
+            v-if="isWarning"
+            :class="`${carbonPrefix}--list-box__invalid-icon ${carbonPrefix}--list-box__invalid-icon--warning`"
+          />
+          <warning-filled
+            v-else-if="data.isInvalid"
+            :class="`${carbonPrefix}--list-box__invalid-icon`"
+          />
+          <span
+            :id="`${uid}-value`"
+            :class="`${carbonPrefix}--list-box__label`"
+            data-test="internalCaption"
+            v-html="internalCaption"
+          />
+          <div
+            :class="[
+              `${carbonPrefix}--list-box__menu-icon`,
+              { [`${carbonPrefix}--list-box__menu-icon--open`]: open },
+            ]"
+          >
+            <chevron-down :aria-label="open ? 'Close menu' : 'Open menu'" />
+          </div>
+        </button>
+        <ul
+          :id="`${uid}-menu`"
+          ref="dropList"
+          :aria-hidden="!open ? 'true' : 'false'"
+          :aria-labelledby="`${uid}-label`"
+          :class="`${carbonPrefix}--list-box__menu`"
+          role="menu"
+          tabindex="-1"
+        >
+          <slot>
+            <cv-dropdown-item
+              v-for="item in items"
+              v-bind:key="item"
+              :value="item"
+              >{{ item }}</cv-dropdown-item
+            >
+          </slot>
+        </ul>
+      </div>
+      <div v-if="data.isInvalid" :class="`${carbonPrefix}--form-requirement`">
+        <slot name="invalid-message">{{ invalidMessage }}</slot>
+      </div>
+      <div v-else-if="isWarning" :class="`${carbonPrefix}--form-requirement`">
+        <slot name="warning-message">{{ warnText }}</slot>
+      </div>
+      <div
+        v-else-if="data.isHelper"
+        :aria-disabled="disabled"
+        :class="[
+          `${carbonPrefix}--form__helper-text`,
+          { [`${carbonPrefix}--form__helper-text--disabled`]: disabled },
+        ]"
+      >
+        <slot name="helper-text">{{ helperText }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import { props as propsCvTheme, useIsLight } from '../../use/cvTheme';
+import CvDropdownItem from './CvDropdownItem.vue';
+import ChevronDown from '@carbon/icons-vue/es/chevron--down/16';
+import WarningFilled from '@carbon/icons-vue/es/warning--filled/16';
+import WarningAltFilled from '@carbon/icons-vue/es/warning--alt--filled/16';
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUpdated,
+  provide,
+  reactive,
+  ref,
+  useSlots,
+  watch,
+} from 'vue';
+import { onClickOutside } from '@vueuse/core';
+
+const props = defineProps({
+  /**
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: { type: String, default: 'Dropdown' },
+  /**
+   * Disable the control
+   */
+  disabled: { type: Boolean, default: false },
+  /**
+   * Add carbon form classes to the dropdown list
+   */
+  formItem: { type: Boolean, default: true },
+  /**
+   * Provide helper text that is used alongside the control label for additional help
+   */
+  helperText: { type: String, default: undefined },
+  /**
+   * Not documented in react. Removes `dropdown--show-selected` class from component.
+   */
+  hideSelected: { type: Boolean, default: false },
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  inline: { type: Boolean, default: false },
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidMessage: { type: String, default: undefined },
+  /**
+   * an array of strings to display as choices.
+   */
+  items: {
+    type: Array,
+    validator(arr) {
+      if (!Array.isArray(arr)) {
+        console.warn('CvDropdown - items must be in array');
+      }
+      return arr;
+    },
+  },
+  /**
+   * Generic label that will be used as the textual representation of what this field is for
+   */
+  label: String,
+  /**
+   * Value shown when nothing has been selected
+   */
+  placeholder: {
+    type: String,
+    default: 'Choose an option',
+  },
+  /**
+   * Specify the size of the ListBox. Currently, supports either `sm`, `md` or `lg` as an option.
+   * @values sm,md,lg
+   */
+  size: { type: String, default: 'md' },
+  /**
+   * Specify the direction of the dropdown. Can be either true (top) or (false) bottom.
+   */
+  up: { type: Boolean, default: false },
+  /**
+   * Render with a value already selected. Available as `v-model:value`.
+   */
+  value: String,
+  /**
+   * Provide the text that is displayed and put the control in warning state
+   */
+  warnText: { type: String, default: undefined },
+  /**
+   * @deprecated - use v-model:value
+   */
+  modelValue: {
+    type: String,
+    validator: val => {
+      console.warn(
+        `v-model for cv-dropdown is deprecated. Specify "v-model:value" instead [${val}]`
+      );
+      return true;
+    },
+    default: undefined,
+  },
+
+  ...propsCvId,
+  ...propsCvTheme,
+});
+const uid = useCvId(props, true);
+const isLight = useIsLight(props);
+const dataValue = ref(props.value);
+provide('dropdown-selected', dataValue);
+const focusItem = ref(undefined);
+provide('dropdown-focus', focusItem);
+const dataCaption = ref(undefined);
+provide('dropdown-caption', dataCaption);
+/**
+ * List of children values
+ * @type {Ref<UnwrapRef<[{value:string}]>>}
+ */
+const itemsList = ref([]);
+provide('dropdown-items', itemsList);
+const open = ref(false);
+const data = reactive({
+  isHelper: false,
+  isInvalid: undefined,
+  isWarning: false,
+});
+const slots = useSlots();
+function checkSlots() {
+  // NOTE: slots is not reactive so needs to be managed on updated
+  data.isInvalid =
+    !!(slots['invalid-message'] || props.invalidMessage?.length) || undefined;
+  data.isWarning = !!(slots['warning-message'] || props.warnText?.length);
+  data.isHelper = !!(slots['helper-text'] || props.helperText?.length);
+}
+const isWarning = computed(() => {
+  if (data.isInvalid) return false;
+  else return !!data.isWarning;
+});
+onMounted(checkSlots);
+onUpdated(checkSlots);
+const emit = defineEmits(['update:value', 'update:modelValue', 'change']);
+watch(
+  () => props.value,
+  () => {
+    dataValue.value = props.value;
+  }
+);
+watch(dataValue, () => {
+  emit('change', dataValue.value);
+  emit('update:value', dataValue.value);
+  emit('update:modelValue', dataValue.value);
+});
+watch(open, () => {
+  focusItem.value = '';
+});
+const ariaLabeledBy = computed(() => {
+  if (props.label) {
+    return `${uid}-label ${uid}-value`;
+  } else {
+    return `${uid}-value`;
+  }
+});
+const internalCaption = computed(() => {
+  if (dataCaption.value) {
+    return dataCaption.value;
+  } else {
+    return props.placeholder;
+  }
+});
+
+const wrapperStyleOverride = computed(() => {
+  // ensures correct width when used inside tabs component
+  return { width: '100%' };
+});
+const el = ref(null);
+function onClickOut() {
+  // eslint-disable-next-line no-console
+  console.log('onClickOut');
+  open.value = false;
+}
+onClickOutside(el, onClickOut);
+
+/**
+ * Set the focus on one of the items in the dropdown list
+ * @param {boolean} up - Direction to move focus
+ */
+function doMove(up) {
+  // re-query could have changed
+  const currentFocusEl = el.value?.querySelector('.cv-dropdown-item :focus');
+  const numChildren = itemsList.value.length || 0;
+
+  const currentFocusValue =
+    currentFocusEl?.parentNode?.getAttribute('data-value');
+
+  const currentFocusIndex = itemsList.value?.findIndex(
+    child => child.value === currentFocusValue
+  );
+
+  const direction = up ? -1 : 1;
+  let nextFocusIndex = currentFocusIndex + direction;
+  if (nextFocusIndex >= numChildren) nextFocusIndex = 0;
+  else if (nextFocusIndex < 0) nextFocusIndex = numChildren - 1;
+  focusItem.value = itemsList.value[nextFocusIndex]?.value;
+}
+const dropList = ref(null);
+function doFocus() {
+  nextTick(() => {
+    if (open.value) {
+      dropList.value?.focus();
+    } else {
+      focus();
+    }
+  });
+}
+function onDown() {
+  if (!open.value) {
+    open.value = true;
+  } else {
+    doMove(false);
+  }
+}
+function onUp() {
+  if (open.value) {
+    doMove(true);
+  }
+}
+function onEsc() {
+  open.value = false;
+  doFocus();
+}
+const button = ref(null);
+const listBox = ref(null);
+function onTab(ev) {
+  if (open.value) {
+    if (button.value === ev.target) {
+      // button has focus ensure we are closed
+      open.value = false;
+    } else if (ev.target === null || listBox.value?.contains(ev.target)) {
+      // list has focus, close and return focus to dropdown
+      open.value = false;
+      doFocus();
+      ev.preventDefault();
+    }
+  }
+}
+function onClick(ev) {
+  if (props.disabled) {
+    ev.preventDefault();
+  } else {
+    open.value = !open.value;
+    doFocus(); // open or close (Some browsers do not focus on button when clicked)
+
+    let target = ev.target;
+    while (
+      !target.classList.contains(`${carbonPrefix}--dropdown-link`) &&
+      dropList.value?.contains(target)
+    ) {
+      target = target.parentNode; // try next one up
+    }
+
+    if (target.classList.contains(`${carbonPrefix}--dropdown-link`)) {
+      const targetItemEl = target.parentNode;
+      dataValue.value = targetItemEl.getAttribute('data-value');
+    }
+  }
+}
+</script>
diff --git a/src/components/CvDropdown/CvDropdownItem.vue b/src/components/CvDropdown/CvDropdownItem.vue
new file mode 100644
index 000000000..940e67edd
--- /dev/null
+++ b/src/components/CvDropdown/CvDropdownItem.vue
@@ -0,0 +1,86 @@
+<!--
+  Carbon dropdown item
+
+  Attributes:
+    value: The value for the item. Optional.
+
+  Usage:
+  See dropdown.vue
+
+-->
+
+<template>
+  <li
+    data-option
+    :data-value="value"
+    :class="[
+      `cv-dropdown-item ${carbonPrefix}--dropdown-item`,
+      { [`${carbonPrefix}--dropdown--selected`]: dataSelected },
+    ]"
+    role="menuitem"
+  >
+    <a
+      :aria-checked="dataSelected"
+      :class="`${carbonPrefix}--dropdown-link`"
+      href="javascript:void(0)"
+      ref="link"
+      role="menuitemradio"
+      tabindex="-1"
+    >
+      <slot></slot>
+    </a>
+  </li>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  selected: { type: Boolean, default: false },
+});
+const dataSelected = ref(props.selected);
+/**
+ * @type {Ref<string>}
+ */
+const parentSelected = inject('dropdown-selected');
+/**
+ * @type {Ref<string>}
+ */
+const parentFocus = inject('dropdown-focus');
+const parentCaption = inject('dropdown-caption');
+watch(
+  () => props.selected,
+  () => {
+    dataSelected.value = props.selected;
+  }
+);
+watch(parentSelected, () => {
+  dataSelected.value = props.value === parentSelected.value;
+});
+const link = ref(null);
+watch(parentFocus, () => {
+  if (props.value === parentFocus.value) link.value?.focus();
+});
+watch(dataSelected, val => {
+  if (val) {
+    parentSelected.value = props.value;
+    parentCaption.value = link.value?.innerHTML || props.value;
+  }
+});
+const parentList = inject('dropdown-items');
+onMounted(() => {
+  dataSelected.value = props.value === parentSelected.value;
+  parentList.value?.push({
+    value: props.value,
+    selected: props.selected,
+  });
+});
+onBeforeUnmount(() => {
+  const index = parentList.value?.findIndex(item => item.value === props.value);
+  if (index > -1) parentList.value?.splice(index, 1);
+});
+</script>
diff --git a/src/components/CvDropdown/CvDropdownSkeleton.vue b/src/components/CvDropdown/CvDropdownSkeleton.vue
new file mode 100644
index 000000000..f191b1c57
--- /dev/null
+++ b/src/components/CvDropdown/CvDropdownSkeleton.vue
@@ -0,0 +1,17 @@
+<template>
+  <div
+    disabled
+    :class="[
+      `${carbonPrefix}--list-box ${carbonPrefix}--dropdown ${carbonPrefix}--skeleton`,
+      { [`${carbonPrefix}--list-box--inline`]: inline },
+    ]"
+  ></div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+
+defineProps({
+  inline: { type: Boolean, default: false },
+});
+</script>
diff --git a/src/components/CvDropdown/index.js b/src/components/CvDropdown/index.js
new file mode 100644
index 000000000..2cccfcfb6
--- /dev/null
+++ b/src/components/CvDropdown/index.js
@@ -0,0 +1,5 @@
+import CvDropdown from './CvDropdown.vue';
+import CvDropdownItem from './CvDropdownItem.vue';
+import CvDropdownSkeleton from './CvDropdownSkeleton.vue';
+
+export { CvDropdown, CvDropdownItem, CvDropdownSkeleton };
diff --git a/yarn.lock b/yarn.lock
index e8a7bad33..51be6252a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8868,17 +8868,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001332":
-  version: 1.0.30001434
-  resolution: "caniuse-lite@npm:1.0.30001434"
-  checksum: 7c9d2641e8e8f3ddf9af14c4ce47266a9d8fd1fc0243626049ff1b2eca4bf02938ff440813cc3feae3fa8d851ec8d1b9718044340c8d09bb4372d92d4f6b519c
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001400":
-  version: 1.0.30001445
-  resolution: "caniuse-lite@npm:1.0.30001445"
-  checksum: f98ca67829c3c52af5af0a62b8510432b2ad9594437d24ad460a6eb1a23d93e7a31631b1f550fbbe482ad05c467aa00da710a41699eb13d1f246d7db4147ab79
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001400":
+  version: 1.0.30001489
+  resolution: "caniuse-lite@npm:1.0.30001489"
+  checksum: 94585a351fd7661b855c83eace474db0ee5a617159b46f2eff1f6fe4b85d7a205418471fdec8cf5cd647a7f79958706d5e664c0bbf3c7c09118b35db9bb95a1b
   languageName: node
   linkType: hard