Popover

<div ui-popover ui-popover-open="false">
  <button ref="trigger">More</button>
  <div ref="panel" role="dialog" hidden>
    Extra actions and content.
  </div>
</div>

import { UI, Capsule } from "tiny-engine-core";

class Popover extends Capsule {
  constructor(el, options) {
    super(el, options);
    this.on(this.refs.trigger, "click", () => this.toggle());
    this.on(document, "click", (event) => {
      if (!this.el.contains(event.target) && this.props.open) this.close();
    });
    this.sync();
  }

  sync() {
    this.refs.panel.hidden = !this.props.open;
  }

  open() { this.props.open = true; this.sync(); }
  close() { this.props.open = false; this.sync(); }
  toggle() { this.props.open = !this.props.open; this.sync(); }
}

UI.register("popover", Popover);
UI.init();