@corndev/ui-overlays 0.0.0-reserved.0 → 1.0.0-beta.1

package/dist/index.js

@@ -0,0 +1,1089 @@
+// ../../src/lib/styles-check.js
+var PACKAGES = {
+  "@corndev/ui-overlays": "--corn-styles-ui-overlays",
+  "@corndev/ui-notifications": "--corn-styles-ui-notifications",
+  "@corndev/ui-markdown": "--corn-styles-ui-markdown",
+  "@corndev/ui-icons": "--corn-styles-ui-icons"
+};
+function checkStylesLoaded(pkg, component) {
+  if (typeof document === "undefined" || typeof window === "undefined")
+    return;
+  if (typeof process !== "undefined" && false)
+    return;
+  const marker = PACKAGES[pkg];
+  if (!marker)
+    return;
+  const checked = globalThis.__cornStylesChecked ??= /* @__PURE__ */ new Set();
+  if (checked.has(pkg))
+    return;
+  checked.add(pkg);
+  const check = () => {
+    const value = getComputedStyle(document.documentElement).getPropertyValue(marker).trim();
+    if (value)
+      return;
+    console.warn(
+      `[corn-ui] ${component} rendered, but the ${pkg} stylesheet is not loaded, so its components render unstyled. Add this once, beside '@corndev/ui/theme':
+
+  import '${pkg}/styles';`
+    );
+  };
+  if (document.readyState === "complete")
+    setTimeout(check, 0);
+  else
+    window.addEventListener("load", check, { once: true });
+}
+
+// ../../src/lib/inert.js
+var LAYER = "data-corn-layer";
+var MARK = "data-corn-inert";
+function refreshInert(doc = document) {
+  for (const el of doc.querySelectorAll(`[${MARK}]`)) {
+    el.removeAttribute("inert");
+    el.removeAttribute(MARK);
+  }
+  const layers = doc.querySelectorAll(`[${LAYER}]`);
+  const top = layers[layers.length - 1];
+  if (!top?.parentElement)
+    return;
+  for (const sibling of top.parentElement.children) {
+    if (sibling === top || sibling.hasAttribute("inert"))
+      continue;
+    sibling.setAttribute("inert", "");
+    sibling.setAttribute(MARK, "");
+  }
+}
+function openLayer(el) {
+  if (!el)
+    return;
+  el.setAttribute(LAYER, "");
+  refreshInert(el.ownerDocument);
+}
+function closeLayer(el) {
+  if (!el)
+    return;
+  const doc = el.ownerDocument || document;
+  el.removeAttribute(LAYER);
+  refreshInert(doc);
+}
+function isTopLayer(el) {
+  const doc = el?.ownerDocument;
+  if (!doc)
+    return false;
+  const layers = doc.querySelectorAll(`[${LAYER}]`);
+  return layers[layers.length - 1] === el;
+}
+function hasOpenLayer(doc, selector) {
+  return !!doc.querySelector(`[${LAYER}]${selector}`);
+}
+
+// ../../src/lib/dialog-focus.js
+var CLOSE_ATTR = "data-dialog-close";
+var FOCUSABLE = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  '[contenteditable=""]',
+  '[contenteditable="true"]',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function focusableIn(root) {
+  return [...root.querySelectorAll(FOCUSABLE)].filter((el) => !el.closest("[hidden], [inert]"));
+}
+function chooseInitialFocus(root) {
+  const marked = root.querySelector("[data-autofocus]");
+  const fromMark = marked && (marked.matches(FOCUSABLE) ? marked : focusableIn(marked)[0]);
+  if (fromMark)
+    return fromMark;
+  const active = root.ownerDocument.activeElement;
+  if (active && active !== root && root.contains(active) && !active.hasAttribute(CLOSE_ATTR))
+    return active;
+  const attributed = [...root.querySelectorAll("[autofocus]")].find((el) => el.matches(FOCUSABLE));
+  if (attributed)
+    return attributed;
+  const all = focusableIn(root);
+  return all.find((el) => !el.hasAttribute(CLOSE_ATTR)) ?? all[0] ?? root;
+}
+function wrapTab(event, root) {
+  if (event.key !== "Tab")
+    return;
+  const els = focusableIn(root);
+  const active = root.ownerDocument.activeElement;
+  if (!els.length) {
+    event.preventDefault();
+    root.focus();
+    return;
+  }
+  const first = els[0];
+  const last = els[els.length - 1];
+  if (!root.contains(active)) {
+    event.preventDefault();
+    (event.shiftKey ? last : first).focus();
+  } else if (event.shiftKey && (active === first || active === root)) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && active === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+
+// ../../src/lib/after-transition.js
+function afterTransition(el, done, fallbackMs = 500) {
+  let settled = false;
+  const onEnd = (event) => {
+    if (event.target === el)
+      finish();
+  };
+  const timer = setTimeout(() => finish(), fallbackMs);
+  el.addEventListener("transitionend", onEnd);
+  function cancel() {
+    settled = true;
+    clearTimeout(timer);
+    el.removeEventListener("transitionend", onEnd);
+  }
+  function finish() {
+    if (settled)
+      return;
+    cancel();
+    done();
+  }
+  return cancel;
+}
+
+// ../../src/components/modal/modal.js
+var BASE = "corn-modal";
+function createModal(options = {}) {
+  checkStylesLoaded("@corndev/ui-overlays", "createModal()");
+  const {
+    title,
+    content,
+    footer,
+    size = "md",
+    closeable = true,
+    onOpen,
+    onClose
+  } = options;
+  let isOpen = false;
+  let previouslyFocused = null;
+  const backdrop = document.createElement("div");
+  backdrop.className = `${BASE}-backdrop`;
+  const dialog = document.createElement("div");
+  dialog.className = BASE;
+  dialog.setAttribute("data-size", size);
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  const titleId = `${BASE}-title-${Math.random().toString(36).slice(2, 9)}`;
+  if (title)
+    dialog.setAttribute("aria-labelledby", titleId);
+  dialog.tabIndex = -1;
+  const header = document.createElement("div");
+  header.className = `${BASE}-header`;
+  if (title) {
+    const titleEl = document.createElement("h2");
+    titleEl.className = `${BASE}-title`;
+    titleEl.id = titleId;
+    titleEl.textContent = title;
+    header.appendChild(titleEl);
+  }
+  if (closeable) {
+    const closeBtn = document.createElement("button");
+    closeBtn.className = `${BASE}-close`;
+    closeBtn.setAttribute("aria-label", "Close modal");
+    closeBtn.setAttribute(CLOSE_ATTR, "");
+    closeBtn.innerHTML = "✕";
+    closeBtn.addEventListener("click", close);
+    header.appendChild(closeBtn);
+  }
+  const body = document.createElement("div");
+  body.className = `${BASE}-body`;
+  if (content instanceof Node) {
+    body.appendChild(content);
+  } else if (content != null) {
+    body.textContent = String(content);
+  }
+  if (footer) {
+    const footerEl = document.createElement("div");
+    footerEl.className = `${BASE}-footer`;
+    footerEl.appendChild(footer);
+    dialog.appendChild(header);
+    dialog.appendChild(body);
+    dialog.appendChild(footerEl);
+  } else {
+    dialog.appendChild(header);
+    dialog.appendChild(body);
+  }
+  backdrop.appendChild(dialog);
+  function trapFocus(e) {
+    if (!isTopLayer(backdrop))
+      return;
+    if (e.key === "Escape") {
+      if (closeable)
+        close();
+      return;
+    }
+    wrapTab(e, dialog);
+  }
+  function onBackdropClick(e) {
+    if (closeable && e.target === backdrop)
+      close();
+  }
+  let cancelTeardown = null;
+  function open() {
+    if (isOpen)
+      return;
+    cancelTeardown?.();
+    cancelTeardown = null;
+    isOpen = true;
+    previouslyFocused = document.activeElement;
+    document.body.appendChild(backdrop);
+    document.body.classList.add(`${BASE}-open`);
+    openLayer(backdrop);
+    requestAnimationFrame(() => {
+      backdrop.setAttribute("data-visible", "");
+      dialog.setAttribute("data-visible", "");
+    });
+    backdrop.addEventListener("click", onBackdropClick);
+    document.addEventListener("keydown", trapFocus);
+    chooseInitialFocus(dialog).focus();
+    onOpen?.();
+  }
+  function teardown() {
+    cancelTeardown = null;
+    if (backdrop.parentNode)
+      backdrop.parentNode.removeChild(backdrop);
+    if (!hasOpenLayer(document, `.${BASE}-backdrop`))
+      document.body.classList.remove(`${BASE}-open`);
+  }
+  function close() {
+    if (!isOpen)
+      return;
+    isOpen = false;
+    backdrop.removeAttribute("data-visible");
+    dialog.removeAttribute("data-visible");
+    closeLayer(backdrop);
+    cancelTeardown = afterTransition(backdrop, teardown);
+    backdrop.removeEventListener("click", onBackdropClick);
+    document.removeEventListener("keydown", trapFocus);
+    previouslyFocused?.focus();
+    onClose?.();
+  }
+  function destroy() {
+    close();
+    closeLayer(backdrop);
+    backdrop.removeEventListener("click", onBackdropClick);
+    document.removeEventListener("keydown", trapFocus);
+    cancelTeardown?.();
+    teardown();
+  }
+  return { open, close, destroy, el: dialog };
+}
+
+// ../../src/components/drawer/drawer.js
+var BASE2 = "corn-drawer";
+function createDrawer(options = {}) {
+  checkStylesLoaded("@corndev/ui-overlays", "createDrawer()");
+  const {
+    title,
+    content,
+    footer,
+    side = "right",
+    size = "md",
+    closeable = true,
+    onOpen,
+    onClose
+  } = options;
+  let isOpen = false;
+  let previouslyFocused = null;
+  const backdrop = document.createElement("div");
+  backdrop.className = `${BASE2}-backdrop`;
+  const panel = document.createElement("div");
+  panel.className = BASE2;
+  panel.setAttribute("data-side", side);
+  panel.setAttribute("data-size", size);
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-modal", "true");
+  const titleId = `${BASE2}-title-${Math.random().toString(36).slice(2, 9)}`;
+  if (title)
+    panel.setAttribute("aria-labelledby", titleId);
+  panel.tabIndex = -1;
+  const header = document.createElement("div");
+  header.className = `${BASE2}-header`;
+  if (title) {
+    const titleEl = document.createElement("h2");
+    titleEl.className = `${BASE2}-title`;
+    titleEl.id = titleId;
+    titleEl.textContent = title;
+    header.appendChild(titleEl);
+  }
+  if (closeable) {
+    const closeBtn = document.createElement("button");
+    closeBtn.className = `${BASE2}-close`;
+    closeBtn.setAttribute("aria-label", "Close drawer");
+    closeBtn.setAttribute(CLOSE_ATTR, "");
+    closeBtn.innerHTML = "✕";
+    closeBtn.addEventListener("click", close);
+    header.appendChild(closeBtn);
+  }
+  const body = document.createElement("div");
+  body.className = `${BASE2}-body`;
+  if (content instanceof Node) {
+    body.appendChild(content);
+  } else if (content != null) {
+    body.textContent = String(content);
+  }
+  panel.appendChild(header);
+  panel.appendChild(body);
+  if (footer) {
+    const footerEl = document.createElement("div");
+    footerEl.className = `${BASE2}-footer`;
+    footerEl.appendChild(footer);
+    panel.appendChild(footerEl);
+  }
+  backdrop.appendChild(panel);
+  function trapFocus(e) {
+    if (!isTopLayer(backdrop))
+      return;
+    if (e.key === "Escape") {
+      if (closeable)
+        close();
+      return;
+    }
+    wrapTab(e, panel);
+  }
+  function onBackdropClick(e) {
+    if (closeable && e.target === backdrop)
+      close();
+  }
+  let cancelTeardown = null;
+  function open() {
+    if (isOpen)
+      return;
+    cancelTeardown?.();
+    cancelTeardown = null;
+    isOpen = true;
+    previouslyFocused = document.activeElement;
+    document.body.appendChild(backdrop);
+    document.body.classList.add(`${BASE2}-open`);
+    openLayer(backdrop);
+    requestAnimationFrame(() => {
+      backdrop.setAttribute("data-visible", "");
+      panel.setAttribute("data-open", "");
+    });
+    backdrop.addEventListener("click", onBackdropClick);
+    document.addEventListener("keydown", trapFocus);
+    chooseInitialFocus(panel).focus();
+    onOpen?.();
+  }
+  function teardown() {
+    cancelTeardown = null;
+    if (backdrop.parentNode)
+      backdrop.parentNode.removeChild(backdrop);
+    if (!hasOpenLayer(document, `.${BASE2}-backdrop`))
+      document.body.classList.remove(`${BASE2}-open`);
+  }
+  function close() {
+    if (!isOpen)
+      return;
+    isOpen = false;
+    backdrop.removeAttribute("data-visible");
+    panel.removeAttribute("data-open");
+    closeLayer(backdrop);
+    cancelTeardown = afterTransition(backdrop, teardown);
+    backdrop.removeEventListener("click", onBackdropClick);
+    document.removeEventListener("keydown", trapFocus);
+    previouslyFocused?.focus();
+    onClose?.();
+  }
+  function destroy() {
+    close();
+    closeLayer(backdrop);
+    backdrop.removeEventListener("click", onBackdropClick);
+    document.removeEventListener("keydown", trapFocus);
+    cancelTeardown?.();
+    teardown();
+  }
+  return { open, close, destroy, el: panel };
+}
+
+// ../../src/components/accordion/accordion.js
+var BASE3 = "corn-accordion";
+function createAccordion(containerEl, options = {}) {
+  checkStylesLoaded("@corndev/ui-overlays", "createAccordion()");
+  const { multiple = false, defaultOpen, onChange, onExpand } = options;
+  const expanded = /* @__PURE__ */ new Set();
+  containerEl.classList.add(BASE3);
+  const uid4 = `${BASE3}-${Math.random().toString(36).slice(2, 9)}`;
+  const ownsItem = (el) => el.closest(`.${BASE3}`) === containerEl;
+  const items = Array.from(containerEl.querySelectorAll("[data-accordion-item]")).filter(ownsItem);
+  const itemMap = /* @__PURE__ */ new Map();
+  items.forEach((el) => {
+    const key = el.getAttribute("data-accordion-item");
+    if (!itemMap.has(key))
+      itemMap.set(key, {});
+    if (el.hasAttribute("data-accordion-trigger")) {
+      itemMap.get(key).trigger = el;
+    }
+    if (el.hasAttribute("data-accordion-panel")) {
+      itemMap.get(key).panel = el;
+    }
+  });
+  const triggerId = (key) => `${uid4}-trigger-${key}`;
+  const panelId = (key) => `${uid4}-panel-${key}`;
+  const wrappers = [];
+  itemMap.forEach(({ trigger, panel }) => {
+    const parent = trigger?.parentElement;
+    if (!parent || parent === containerEl || parent !== panel?.parentElement)
+      return;
+    if (parent.querySelectorAll("[data-accordion-trigger]").length !== 1)
+      return;
+    if (!parent.classList.contains(`${BASE3}-item`)) {
+      parent.classList.add(`${BASE3}-item`);
+      wrappers.push(parent);
+    }
+  });
+  itemMap.forEach(({ trigger, panel }, key) => {
+    if (trigger) {
+      trigger.classList.add(`${BASE3}-trigger`);
+      trigger.setAttribute("aria-expanded", "false");
+      panelId(key);
+      trigger.setAttribute("aria-controls", panelId(key));
+      trigger.id = triggerId(key);
+    }
+    if (panel) {
+      panel.classList.add(`${BASE3}-panel`);
+      panel.id = panelId(key);
+      panel.setAttribute("role", "region");
+      panel.setAttribute("aria-labelledby", triggerId(key));
+      panel.hidden = true;
+    }
+  });
+  function open(key) {
+    const item = itemMap.get(key);
+    if (!item || !item.panel || !item.trigger)
+      return;
+    if (item.trigger.getAttribute("aria-expanded") === "true")
+      return;
+    if (!multiple) {
+      itemMap.forEach((other, otherKey) => {
+        if (otherKey !== key)
+          _close(otherKey);
+      });
+    }
+    item.trigger.setAttribute("aria-expanded", "true");
+    item.trigger.setAttribute("data-open", "");
+    item.panel.hidden = false;
+    item.panel.setAttribute("data-open", "");
+    if (!expanded.has(key)) {
+      expanded.add(key);
+      onExpand?.(item.panel, key);
+    }
+    onChange?.(key, true);
+  }
+  function _close(key) {
+    const item = itemMap.get(key);
+    if (!item || !item.panel || !item.trigger)
+      return;
+    if (item.trigger.getAttribute("aria-expanded") === "false")
+      return;
+    item.trigger.setAttribute("aria-expanded", "false");
+    item.trigger.removeAttribute("data-open");
+    item.panel.hidden = true;
+    item.panel.removeAttribute("data-open");
+    onChange?.(key, false);
+  }
+  function close(key) {
+    _close(key);
+  }
+  function toggle(key) {
+    const item = itemMap.get(key);
+    if (!item)
+      return;
+    if (item.trigger?.getAttribute("aria-expanded") === "true") {
+      _close(key);
+    } else {
+      open(key);
+    }
+  }
+  function handleClick(e) {
+    const trigger = e.target.closest("[data-accordion-trigger]");
+    if (!trigger || !ownsItem(trigger))
+      return;
+    toggle(trigger.getAttribute("data-accordion-item"));
+  }
+  function handleKeydown(e) {
+    const trigger = e.target.closest("[data-accordion-trigger]");
+    if (!trigger || !ownsItem(trigger))
+      return;
+    const keys = Array.from(itemMap.keys());
+    const key = trigger.getAttribute("data-accordion-item");
+    const idx = keys.indexOf(key);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = itemMap.get(keys[(idx + 1) % keys.length]);
+      next?.trigger?.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prev = itemMap.get(keys[(idx - 1 + keys.length) % keys.length]);
+      prev?.trigger?.focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      itemMap.get(keys[0])?.trigger?.focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      itemMap.get(keys[keys.length - 1])?.trigger?.focus();
+    }
+  }
+  containerEl.addEventListener("click", handleClick);
+  containerEl.addEventListener("keydown", handleKeydown);
+  const defaults = defaultOpen ? Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen] : [];
+  defaults.forEach((key) => open(key));
+  function destroy() {
+    containerEl.removeEventListener("click", handleClick);
+    containerEl.removeEventListener("keydown", handleKeydown);
+    containerEl.classList.remove(BASE3);
+    for (const wrapper of wrappers)
+      wrapper.classList.remove(`${BASE3}-item`);
+    itemMap.forEach(({ trigger, panel }) => {
+      trigger?.classList.remove(`${BASE3}-trigger`);
+      trigger?.removeAttribute("data-open");
+      trigger?.removeAttribute("aria-expanded");
+      trigger?.removeAttribute("aria-controls");
+      panel?.classList.remove(`${BASE3}-panel`);
+      panel?.removeAttribute("data-open");
+      panel?.removeAttribute("role");
+      panel?.removeAttribute("aria-labelledby");
+      if (panel)
+        panel.hidden = false;
+    });
+  }
+  return { open, close, toggle, destroy };
+}
+
+// ../../src/lib/described-by.js
+var tokens = (value) => (value ?? "").split(/\s+/).filter(Boolean);
+function mergeIds(...lists) {
+  const ids = [...new Set(lists.flatMap(tokens))];
+  return ids.length ? ids.join(" ") : void 0;
+}
+function addDescribedBy(el, ...ids) {
+  const merged = mergeIds(el.getAttribute("aria-describedby"), ...ids);
+  if (merged)
+    el.setAttribute("aria-describedby", merged);
+}
+function removeDescribedBy(el, ...ids) {
+  const gone = new Set(ids.flatMap(tokens));
+  const left = tokens(el.getAttribute("aria-describedby")).filter((id) => !gone.has(id));
+  if (left.length)
+    el.setAttribute("aria-describedby", left.join(" "));
+  else
+    el.removeAttribute("aria-describedby");
+}
+
+// ../../src/components/tooltip/tooltip.js
+var BASE4 = "corn-tooltip";
+var uid = 0;
+function getPosition(trigger, tooltip, placement) {
+  const tRect = trigger.getBoundingClientRect();
+  const ttRect = tooltip.getBoundingClientRect();
+  const gap = 8;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const positions = {
+    top: { top: tRect.top - ttRect.height - gap, left: tRect.left + tRect.width / 2 - ttRect.width / 2 },
+    bottom: { top: tRect.bottom + gap, left: tRect.left + tRect.width / 2 - ttRect.width / 2 },
+    left: { top: tRect.top + tRect.height / 2 - ttRect.height / 2, left: tRect.left - ttRect.width - gap },
+    right: { top: tRect.top + tRect.height / 2 - ttRect.height / 2, left: tRect.right + gap }
+  };
+  let actual = placement;
+  if (placement === "top" && tRect.top < ttRect.height + gap)
+    actual = "bottom";
+  else if (placement === "bottom" && tRect.bottom + ttRect.height + gap > vh)
+    actual = "top";
+  else if (placement === "left" && tRect.left < ttRect.width + gap)
+    actual = "right";
+  else if (placement === "right" && tRect.right + ttRect.width + gap > vw)
+    actual = "left";
+  const pos = positions[actual];
+  pos.left = Math.max(gap, Math.min(pos.left, vw - ttRect.width - gap));
+  return { ...pos, actualPlacement: actual };
+}
+function createTooltip(triggerEl, options = {}) {
+  checkStylesLoaded("@corndev/ui-overlays", "createTooltip()");
+  const {
+    content,
+    placement = "top",
+    delay = 0
+  } = options;
+  if (!content)
+    throw new Error("createTooltip: content is required");
+  const id = `${BASE4}-${++uid}`;
+  let tooltipEl = null;
+  let showTimer = null;
+  let visible = false;
+  function buildTooltip() {
+    tooltipEl = document.createElement("div");
+    tooltipEl.id = id;
+    tooltipEl.className = BASE4;
+    tooltipEl.setAttribute("role", "tooltip");
+    tooltipEl.textContent = content;
+    tooltipEl.style.position = "fixed";
+    document.body.appendChild(tooltipEl);
+  }
+  function position() {
+    if (!tooltipEl)
+      return;
+    const { top, left, actualPlacement } = getPosition(triggerEl, tooltipEl, placement);
+    tooltipEl.style.top = `${top}px`;
+    tooltipEl.style.left = `${left}px`;
+    tooltipEl.className = BASE4;
+    tooltipEl.setAttribute("data-placement", actualPlacement);
+  }
+  function show() {
+    if (visible)
+      return;
+    clearTimeout(showTimer);
+    const doShow = () => {
+      if (!tooltipEl)
+        buildTooltip();
+      position();
+      requestAnimationFrame(() => {
+        if (tooltipEl)
+          tooltipEl.setAttribute("data-visible", "");
+      });
+      visible = true;
+    };
+    if (delay) {
+      showTimer = setTimeout(doShow, delay);
+    } else {
+      doShow();
+    }
+  }
+  function hide() {
+    clearTimeout(showTimer);
+    if (!visible || !tooltipEl)
+      return;
+    tooltipEl.removeAttribute("data-visible");
+    visible = false;
+  }
+  function onTransitionEnd() {
+    if (!visible && tooltipEl) {
+      tooltipEl.remove();
+      tooltipEl = null;
+    }
+  }
+  addDescribedBy(triggerEl, id);
+  triggerEl.addEventListener("mouseenter", show);
+  triggerEl.addEventListener("mouseleave", hide);
+  triggerEl.addEventListener("focusin", show);
+  triggerEl.addEventListener("focusout", hide);
+  function handleTransitionEnd(e) {
+    if (e.target === tooltipEl)
+      onTransitionEnd();
+  }
+  document.addEventListener("transitionend", handleTransitionEnd);
+  function destroy() {
+    clearTimeout(showTimer);
+    triggerEl.removeEventListener("mouseenter", show);
+    triggerEl.removeEventListener("mouseleave", hide);
+    triggerEl.removeEventListener("focusin", show);
+    triggerEl.removeEventListener("focusout", hide);
+    document.removeEventListener("transitionend", handleTransitionEnd);
+    removeDescribedBy(triggerEl, id);
+    if (tooltipEl) {
+      tooltipEl.remove();
+      tooltipEl = null;
+    }
+  }
+  return { show, hide, destroy };
+}
+
+// ../../src/components/popover/popover.js
+var BASE5 = "corn-popover";
+var uid2 = 0;
+function getPosition2(trigger, popover, placement) {
+  const tRect = trigger.getBoundingClientRect();
+  const pRect = popover.getBoundingClientRect();
+  const gap = 8;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const positions = {
+    top: { top: tRect.top - pRect.height - gap, left: tRect.left + tRect.width / 2 - pRect.width / 2 },
+    bottom: { top: tRect.bottom + gap, left: tRect.left + tRect.width / 2 - pRect.width / 2 },
+    left: { top: tRect.top + tRect.height / 2 - pRect.height / 2, left: tRect.left - pRect.width - gap },
+    right: { top: tRect.top + tRect.height / 2 - pRect.height / 2, left: tRect.right + gap }
+  };
+  let actual = placement;
+  if (placement === "top" && tRect.top < pRect.height + gap)
+    actual = "bottom";
+  else if (placement === "bottom" && tRect.bottom + pRect.height + gap > vh)
+    actual = "top";
+  else if (placement === "left" && tRect.left < pRect.width + gap)
+    actual = "right";
+  else if (placement === "right" && tRect.right + pRect.width + gap > vw)
+    actual = "left";
+  const pos = positions[actual];
+  pos.left = Math.max(gap, Math.min(pos.left, scrollX + vw - pRect.width - gap));
+  return { ...pos, actualPlacement: actual };
+}
+function createPopover(triggerEl, options = {}) {
+  checkStylesLoaded("@corndev/ui-overlays", "createPopover()");
+  const {
+    content,
+    title,
+    placement = "bottom",
+    defaultOpen = false,
+    onChange,
+    trapFocus = false,
+    closeOnOutsideClick = true,
+    onOpen,
+    onClose
+  } = options;
+  if (!content)
+    throw new Error("createPopover: content is required");
+  const id = `${BASE5}-${++uid2}`;
+  let popoverEl = null;
+  let isOpen = false;
+  let opener = null;
+  triggerEl.setAttribute("aria-expanded", "false");
+  triggerEl.setAttribute("aria-controls", id);
+  function buildPopover() {
+    popoverEl = document.createElement("div");
+    popoverEl.id = id;
+    popoverEl.className = BASE5;
+    popoverEl.setAttribute("role", "dialog");
+    popoverEl.setAttribute("aria-modal", trapFocus ? "true" : "false");
+    if (trapFocus)
+      popoverEl.tabIndex = -1;
+    if (title) {
+      const titleId = `${id}-title`;
+      const h = document.createElement("div");
+      h.className = `${BASE5}-header`;
+      const t = document.createElement("div");
+      t.id = titleId;
+      t.className = `${BASE5}-title`;
+      t.textContent = title;
+      const closeBtn = document.createElement("button");
+      closeBtn.type = "button";
+      closeBtn.className = `${BASE5}-close`;
+      closeBtn.setAttribute("aria-label", "Close");
+      closeBtn.setAttribute(CLOSE_ATTR, "");
+      closeBtn.innerHTML = "&times;";
+      closeBtn.addEventListener("click", close);
+      h.appendChild(t);
+      h.appendChild(closeBtn);
+      popoverEl.appendChild(h);
+      popoverEl.setAttribute("aria-labelledby", titleId);
+    }
+    const body = document.createElement("div");
+    body.className = `${BASE5}-body`;
+    if (content instanceof Node) {
+      body.appendChild(content);
+    } else if (content != null) {
+      body.textContent = String(content);
+    }
+    popoverEl.appendChild(body);
+    popoverEl.style.position = "fixed";
+    document.body.appendChild(popoverEl);
+  }
+  function reposition() {
+    if (!popoverEl)
+      return;
+    const { top, left, actualPlacement } = getPosition2(triggerEl, popoverEl, placement);
+    popoverEl.style.top = `${top}px`;
+    popoverEl.style.left = `${left}px`;
+    popoverEl.dataset.placement = actualPlacement;
+    popoverEl.className = BASE5;
+    popoverEl.setAttribute("data-placement", actualPlacement);
+    popoverEl.toggleAttribute("data-visible", isOpen);
+  }
+  function open() {
+    if (isOpen)
+      return;
+    if (!popoverEl)
+      buildPopover();
+    reposition();
+    if (trapFocus) {
+      opener = document.activeElement;
+      openLayer(popoverEl);
+    }
+    requestAnimationFrame(() => {
+      if (!popoverEl || !isOpen)
+        return;
+      popoverEl.setAttribute("data-visible", "");
+      if (trapFocus)
+        chooseInitialFocus(popoverEl).focus();
+    });
+    triggerEl.setAttribute("aria-expanded", "true");
+    isOpen = true;
+    onChange?.(true);
+    onOpen?.();
+  }
+  function close() {
+    if (!isOpen || !popoverEl)
+      return;
+    popoverEl.removeAttribute("data-visible");
+    triggerEl.setAttribute("aria-expanded", "false");
+    isOpen = false;
+    if (trapFocus) {
+      closeLayer(popoverEl);
+      const back = opener;
+      opener = null;
+      if (back?.isConnected && typeof back.focus === "function")
+        back.focus();
+    }
+    onChange?.(false);
+    onClose?.();
+  }
+  function toggle() {
+    isOpen ? close() : open();
+  }
+  triggerEl.addEventListener("click", toggle);
+  function handleOutsideClick(e) {
+    if (!closeOnOutsideClick || !isOpen)
+      return;
+    if (popoverEl && !popoverEl.contains(e.target) && !triggerEl.contains(e.target)) {
+      if (trapFocus)
+        e.preventDefault();
+      close();
+    }
+  }
+  document.addEventListener("mousedown", handleOutsideClick);
+  function handleKeydown(e) {
+    if (!isOpen)
+      return;
+    if (trapFocus) {
+      if (!isTopLayer(popoverEl))
+        return;
+      if (e.key === "Escape")
+        close();
+      else
+        wrapTab(e, popoverEl);
+      return;
+    }
+    if (e.key === "Escape")
+      close();
+  }
+  document.addEventListener("keydown", handleKeydown);
+  function destroy() {
+    if (trapFocus && popoverEl)
+      closeLayer(popoverEl);
+    triggerEl.removeEventListener("click", toggle);
+    document.removeEventListener("mousedown", handleOutsideClick);
+    document.removeEventListener("keydown", handleKeydown);
+    triggerEl.removeAttribute("aria-expanded");
+    triggerEl.removeAttribute("aria-controls");
+    if (popoverEl) {
+      popoverEl.remove();
+      popoverEl = null;
+    }
+  }
+  if (defaultOpen)
+    open();
+  return { open, close, toggle, destroy };
+}
+
+// ../../src/components/menu/menu.js
+var BASE6 = "corn-menu";
+var uid3 = 0;
+function getPosition3(trigger, menu, placement) {
+  const t = trigger.getBoundingClientRect();
+  const m = menu.getBoundingClientRect();
+  const gap = 4;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let actual = placement;
+  if (placement === "bottom" && t.bottom + m.height + gap > vh && t.top - m.height - gap > 0)
+    actual = "top";
+  else if (placement === "top" && t.top - m.height - gap < 0 && t.bottom + m.height + gap < vh)
+    actual = "bottom";
+  const top = actual === "bottom" ? t.bottom + gap : t.top - m.height - gap;
+  const left = Math.max(gap, Math.min(t.left, vw - m.width - gap));
+  return { top, left, actualPlacement: actual };
+}
+function createMenu(triggerEl, options = {}) {
+  checkStylesLoaded("@corndev/ui-overlays", "createMenu()");
+  const { items = [], placement = "bottom", closeOnSelect = true, onSelect } = options;
+  const id = `${BASE6}-${++uid3}`;
+  let menuEl = null;
+  let isOpen = false;
+  triggerEl.setAttribute("aria-haspopup", "menu");
+  triggerEl.setAttribute("aria-expanded", "false");
+  triggerEl.setAttribute("aria-controls", id);
+  function enabledItems() {
+    return Array.from(menuEl.querySelectorAll(`.${BASE6}-item:not([disabled])`));
+  }
+  function selectItem(item) {
+    item.onSelect?.(item.value, item);
+    onSelect?.(item.value, item);
+    if (closeOnSelect)
+      close();
+  }
+  function buildMenu() {
+    menuEl = document.createElement("div");
+    menuEl.id = id;
+    menuEl.className = BASE6;
+    menuEl.setAttribute("role", "menu");
+    menuEl.style.position = "fixed";
+    let groups = 0;
+    const entry = (item, parent) => {
+      if (item.separator) {
+        const sep = document.createElement("div");
+        sep.className = `${BASE6}-separator`;
+        sep.setAttribute("role", "separator");
+        parent.appendChild(sep);
+        return;
+      }
+      if (Array.isArray(item.items)) {
+        const group = document.createElement("div");
+        group.className = `${BASE6}-group`;
+        group.setAttribute("role", "group");
+        const label = document.createElement("div");
+        label.className = `${BASE6}-label`;
+        label.id = `${id}-group-${++groups}`;
+        label.textContent = item.group;
+        group.setAttribute("aria-labelledby", label.id);
+        group.appendChild(label);
+        for (const child of item.items)
+          entry(child, group);
+        parent.appendChild(group);
+        return;
+      }
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = `${BASE6}-item`;
+      btn.setAttribute("role", "menuitem");
+      btn.tabIndex = -1;
+      btn.textContent = item.label;
+      if (item.danger)
+        btn.setAttribute("data-danger", "");
+      if (item.disabled) {
+        btn.disabled = true;
+        btn.setAttribute("aria-disabled", "true");
+      } else {
+        btn.addEventListener("click", () => selectItem(item));
+      }
+      parent.appendChild(btn);
+    };
+    for (const item of items)
+      entry(item, menuEl);
+    menuEl.addEventListener("keydown", handleMenuKeydown);
+    document.body.appendChild(menuEl);
+  }
+  function reposition() {
+    if (!menuEl)
+      return;
+    const { top, left, actualPlacement } = getPosition3(triggerEl, menuEl, placement);
+    menuEl.style.top = `${top}px`;
+    menuEl.style.left = `${left}px`;
+    menuEl.className = BASE6;
+    menuEl.setAttribute("data-placement", actualPlacement);
+    menuEl.toggleAttribute("data-visible", isOpen);
+  }
+  function focusItem(index) {
+    const list = enabledItems();
+    if (!list.length)
+      return;
+    const i = (index + list.length) % list.length;
+    list[i].focus();
+  }
+  function handleMenuKeydown(e) {
+    const list = enabledItems();
+    const idx = list.indexOf(document.activeElement);
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusItem(idx + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusItem(idx - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusItem(0);
+        break;
+      case "End":
+        e.preventDefault();
+        focusItem(list.length - 1);
+        break;
+      case "Escape":
+        e.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+      default:
+        break;
+    }
+  }
+  function open() {
+    if (isOpen)
+      return;
+    if (!menuEl)
+      buildMenu();
+    reposition();
+    requestAnimationFrame(() => menuEl && menuEl.setAttribute("data-visible", ""));
+    triggerEl.setAttribute("aria-expanded", "true");
+    isOpen = true;
+    focusItem(0);
+  }
+  function close() {
+    if (!isOpen || !menuEl)
+      return;
+    menuEl.removeAttribute("data-visible");
+    triggerEl.setAttribute("aria-expanded", "false");
+    isOpen = false;
+    triggerEl.focus?.();
+  }
+  function toggle() {
+    isOpen ? close() : open();
+  }
+  function handleTriggerKeydown(e) {
+    if (!isOpen && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      open();
+    }
+  }
+  function handleOutsideClick(e) {
+    if (!isOpen)
+      return;
+    if (menuEl && !menuEl.contains(e.target) && !triggerEl.contains(e.target)) {
+      menuEl.removeAttribute("data-visible");
+      triggerEl.setAttribute("aria-expanded", "false");
+      isOpen = false;
+    }
+  }
+  triggerEl.addEventListener("click", toggle);
+  triggerEl.addEventListener("keydown", handleTriggerKeydown);
+  document.addEventListener("mousedown", handleOutsideClick);
+  function destroy() {
+    triggerEl.removeEventListener("click", toggle);
+    triggerEl.removeEventListener("keydown", handleTriggerKeydown);
+    document.removeEventListener("mousedown", handleOutsideClick);
+    triggerEl.removeAttribute("aria-haspopup");
+    triggerEl.removeAttribute("aria-expanded");
+    triggerEl.removeAttribute("aria-controls");
+    if (menuEl) {
+      menuEl.remove();
+      menuEl = null;
+    }
+  }
+  return { open, close, toggle, destroy };
+}
+
+// ../../src/overlays.js
+var version = "1.0.0-beta.1";
+export {
+  createAccordion,
+  createDrawer,
+  createMenu,
+  createModal,
+  createPopover,
+  createTooltip,
+  version
+};