Element-anchored panels

Pass coordinateSpace: "element" with an anchorElement to position a panel relative to a DOM element. The panel stays attached as the anchor scrolls or resizes. The built-in collision avoidance (collisionStrategy: "flip") automatically flips the panel to the opposite side if it would overflow the viewport.

import panel from "../index.js";

const anchor = document.getElementById("my-button");

// ── basic ──────────────────────────────────────────────────────────────────────
panel.open("", "Options", {
  coordinateSpace: "element",
  anchorElement: anchor,   // or CSS selector "#my-button"
  placement: "bottom",     // "top"|"bottom"|"left"|"right"
                           // + "-start"/"-end" suffix for alignment
  offset: 8,               // gap between anchor and panel (px)
  collisionStrategy: "flip",  // "flip"|"shift"|"none"
  followAnchor: true,      // re-position when anchor moves (default true)
  width: 280, height: 200
});

// ── declarative ────────────────────────────────────────────────────────────────
// <button id="my-btn">Options</button>
// <section id="my-panel" panel
//          panel-coordinate-space="element"
//          panel-anchor="my-btn"
//          panel-placement="bottom"
//          panel-offset="8"
//          panel-title="Options"
//          panel-draggable panel-resizable panel-closable panel-titled panel-escapable>
//   ...
// </section>