Popover

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-popover> is the SAME shared custom element React and Vue consume.
     Put the anchor in slot="trigger"; add a `title` header + slotted (or `content`) body.
     placement = top | bottom | left | right (centred) OR edge-aligned top-start | top-end |
       bottom-start | bottom-end | left-start | left-end | right-start | right-end
       (same side, aligned to the trigger's start/end edge, arrow offset near it)
     · trigger = click | hover | focus · `arrow` toggles the pointer.
     A click trigger closes on outside-click and Escape (focus returns to the trigger); emits composed open / close. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-popover.js';   // registers <aha-popover>
</script>

<!-- bottom-end: anchored under the trigger, aligned to its right edge, arrow near that edge -->
<aha-popover id="pop" placement="bottom-end" trigger="click" arrow title="Share this deck">
  <button slot="trigger">Options</button>
  <div>
    <p style="margin:0 0 8px">Share, rename or export this deck.</p>
    <a href="#">Manage access</a>
  </div>
</aha-popover>

<script>
  document.getElementById('pop').addEventListener('open', () => console.log('opened'));
</script>

import '@ahaslides-product/design/aha-popover';   // registers <aha-popover>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper; React 19 can use <aha-popover> directly.
// placement: top | bottom | left | right (centred) OR edge-aligned top-start | top-end |
//   bottom-start | bottom-end | left-start | left-end | right-start | right-end
function AhaPopover({ placement = 'bottom', trigger = 'click', arrow = false, title, onOpenChange, anchor, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const o = () => onOpenChange?.(true);
    const c = () => onOpenChange?.(false);
    el.addEventListener('open', o);
    el.addEventListener('close', c);
    return () => { el.removeEventListener('open', o); el.removeEventListener('close', c); };
  });
  return (
    <aha-popover ref={ref} placement={placement} trigger={trigger} title={title} {...(arrow ? { arrow: '' } : {})}>
      <span slot="trigger">{anchor}</span>
      {children}
    </aha-popover>
  );
}

// usage — edge-aligned: aligned to the trigger's right edge, arrow near it
<AhaPopover anchor={<button>Options</button>} title="Share this deck" placement="bottom-end" arrow trigger="click">
  <a href="#">Manage access</a>
</AhaPopover>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-popover';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue — placement: top|bottom|left|right (centred) OR edge-aligned
//   top-start|top-end|bottom-start|bottom-end|left-start|left-end|right-start|right-end
<template>
  <aha-popover placement="bottom-end" trigger="click" arrow title="Share this deck" @open="onOpen" @close="onClose">
    <button slot="trigger">Options</button>
    <div>
      <p>Share, rename or export this deck.</p>
      <a href="#">Manage access</a>
    </div>
  </aha-popover>
</template>