As a DS designer and developer, I want to have a new popover component available, because it is needed in the Simple Query Builder.
**ACs**
[] The popover component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=4270%3A124 | Figma specs ]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.gb58b70b70c_1_1 | component documentation ]].
[] The popover's component-level tokens ([[ https://github.com/wmde/wikit/pull/366 | available in this PR ]]) are created according to the naming convention used to style the component and provide all the needed styling values
[] The popover is documented in Storybook according to the specifications (see below)
**Position**
Popovers do not have states, but we need to make it possible for implementers to define their position in relation to the element that triggers them (see notes):
[] Top: right, center, left
[] Bottom: right, center, left
[] Left: bottom, center, top
[] Right: bottom, center, top
**Storybook:**
This component has its own pages in Storybook, included by alphabetical order ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]):
[] A //Popover// page including controls: they allow users to enter custom text to replace the default content and to change the popover position
**behavioral ACs**
[ ] can be closed/opened programmatically
** has prop: `isShown` or `isVisible`
** emits event `update:isShown` or `update:isVisible` so that it can be used with the `.sync` modifier
[ ] is closed on click outside
[ ] is closed on hover-out
**technical ACs**
[ ] note in Changelog
[ ] is exported in [main.ts](https://github.com/wmde/wikit/blob/master/vue-components/src/main.ts)
**Notes:**
* It would be ideal if the position of the popover could be defined via prop
* Regarding the popover triggering event: Ideally, the component should be revealed on `click` as a baseline, but implementers should be allowed to expand it (e.g. via prop) so mouse users can also see the popover on hover if needed.
*The closing event should also be controlled by the implenenters, and ideally follow the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.gafe759320e_0_32 | component documentation ]] recommendations (unless we want to enforce this behavior in the component – or components): popovers that open on hover, should close when hover is removed from the trigger. Otherwise, only clicking outside the popover should dismiss it.
* A very similar (but slightly more complex) version of this component was implemented by the Tainted References team ([[ https://doc.wikimedia.org/Wikibase/master/js/tainted-ref-storybook/?path=/story/popper--popper-component | see component in Storybook ]])