@editora/ui-core 0.1.9 → 0.1.12

package/dist/popover.esm.js

@@ -0,0 +1,483 @@
+import { E as v } from "./ElementBase-909688f3.mjs";
+import { c as h } from "./portal-1cf392ca.mjs";
+import { c as f } from "./dismissable-layer-9c7e6b58.mjs";
+import { a as b } from "./positioner-fbd61bf1.mjs";
+const g = `
+  .popover-shell {
+    --ui-popover-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-popover-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 0%,
+        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 24%, var(--ui-color-surface, #ffffff)) 100%
+      );
+    --ui-popover-text: var(--ui-color-text, #0f172a);
+    --ui-popover-muted: var(--ui-color-muted, #64748b);
+    --ui-popover-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-popover-border: 1px solid var(--ui-popover-border-color);
+    --ui-popover-shadow:
+      0 14px 34px rgba(15, 23, 42, 0.12),
+      0 28px 64px rgba(15, 23, 42, 0.08);
+    --ui-popover-radius: 14px;
+    --ui-popover-padding: 14px;
+    --ui-popover-backdrop: none;
+    --ui-popover-font-size: var(--ui-default-font-size, var(--font-size-2, var(--ui-font-size-md, 14px)));
+    --ui-popover-line-height: var(--ui-default-line-height, var(--line-height-2, 20px));
+    --ui-popover-letter-spacing: var(--ui-default-letter-spacing, var(--letter-spacing-2, 0em));
+  }
+
+  .popover-shell[data-size="sm"],
+  .popover-shell[data-size="1"] {
+    --ui-popover-radius: 12px;
+    --ui-popover-padding: 10px;
+    --ui-popover-font-size: 13px;
+    --ui-popover-line-height: 18px;
+  }
+
+  .popover-shell[data-size="md"],
+  .popover-shell[data-size="2"] {
+    --ui-popover-radius: 14px;
+    --ui-popover-padding: 14px;
+  }
+
+  .popover-shell[data-size="lg"],
+  .popover-shell[data-size="3"] {
+    --ui-popover-radius: 18px;
+    --ui-popover-padding: 18px;
+    --ui-popover-font-size: 15px;
+    --ui-popover-line-height: 22px;
+  }
+
+  .popover-shell[data-tone="neutral"] {
+    --ui-popover-accent: var(--ui-color-muted, #64748b);
+  }
+
+  .popover-shell[data-tone="brand"],
+  .popover-shell[data-tone="info"] {
+    --ui-popover-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+  }
+
+  .popover-shell[data-tone="success"] {
+    --ui-popover-accent: var(--ui-color-success, #16a34a);
+  }
+
+  .popover-shell[data-tone="warning"] {
+    --ui-popover-accent: var(--ui-color-warning, #d97706);
+  }
+
+  .popover-shell[data-tone="danger"] {
+    --ui-popover-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  .popover-shell[data-variant="soft"] {
+    --ui-popover-bg: color-mix(in srgb, var(--ui-popover-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-popover-border-color: color-mix(in srgb, var(--ui-popover-accent) 24%, var(--ui-color-border, #cbd5e1));
+    --ui-popover-shadow:
+      0 10px 24px color-mix(in srgb, var(--ui-popover-accent) 12%, rgba(15, 23, 42, 0.08)),
+      0 24px 48px rgba(15, 23, 42, 0.06);
+  }
+
+  .popover-shell[data-variant="solid"] {
+    --ui-popover-bg: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-popover-accent) 16%, var(--ui-color-surface, #ffffff)) 0%,
+      color-mix(in srgb, var(--ui-popover-accent) 12%, var(--ui-color-surface-elevated, #f8fafc)) 100%
+    );
+    --ui-popover-border-color: color-mix(in srgb, var(--ui-popover-accent) 30%, var(--ui-color-border, #cbd5e1));
+    --ui-popover-shadow:
+      0 14px 32px color-mix(in srgb, var(--ui-popover-accent) 14%, rgba(15, 23, 42, 0.08)),
+      0 28px 60px rgba(15, 23, 42, 0.08);
+  }
+
+  .popover-shell[data-variant="glass"] {
+    --ui-popover-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, #ffffff 12%),
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 72%, transparent)
+      );
+    --ui-popover-border-color: color-mix(in srgb, var(--ui-popover-accent) 12%, rgba(255, 255, 255, 0.38));
+    --ui-popover-backdrop: var(--base-panel-backdrop, var(--backdrop-filter-panel, blur(18px) saturate(1.08)));
+    --ui-popover-shadow:
+      0 18px 38px rgba(15, 23, 42, 0.14),
+      0 34px 72px rgba(15, 23, 42, 0.1);
+  }
+
+  .popover-shell[data-variant="contrast"] {
+    --ui-popover-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-popover-accent) 22%, #0f172a 78%) 0%,
+        color-mix(in srgb, var(--ui-popover-accent) 12%, #020617 88%) 100%
+      );
+    --ui-popover-text: #e2e8f0;
+    --ui-popover-muted: color-mix(in srgb, #e2e8f0 72%, transparent);
+    --ui-popover-border-color: color-mix(in srgb, var(--ui-popover-accent) 26%, rgba(248, 250, 252, 0.28));
+    --ui-popover-shadow:
+      0 20px 42px rgba(2, 6, 23, 0.42),
+      0 36px 80px rgba(2, 6, 23, 0.34);
+  }
+
+  .popover-shell[data-variant="minimal"] {
+    --ui-popover-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    --ui-popover-border-color: color-mix(in srgb, var(--ui-popover-accent) 10%, transparent);
+    --ui-popover-shadow: none;
+  }
+
+  .popover-shell[data-elevation="none"] {
+    --ui-popover-shadow: none;
+  }
+
+  .popover-shell[data-elevation="low"] {
+    --ui-popover-shadow:
+      0 8px 18px rgba(15, 23, 42, 0.08),
+      0 18px 40px rgba(15, 23, 42, 0.06);
+  }
+
+  .popover-shell[data-elevation="high"] {
+    --ui-popover-shadow:
+      0 18px 38px rgba(15, 23, 42, 0.16),
+      0 32px 72px rgba(15, 23, 42, 0.12);
+  }
+
+  .panel {
+    color-scheme: light dark;
+    --ui-popover-focus: var(--ui-color-focus-ring, #2563eb);
+    background: var(--ui-popover-bg);
+    color: var(--ui-popover-text);
+    border: var(--ui-popover-border);
+    border-radius: var(--ui-popover-radius);
+    padding: var(--ui-popover-padding);
+    box-shadow: var(--ui-popover-shadow);
+    backdrop-filter: var(--ui-popover-backdrop);
+    font: 500 var(--ui-popover-font-size)/var(--ui-popover-line-height) var(--ui-font-family, system-ui, sans-serif);
+    letter-spacing: var(--ui-popover-letter-spacing);
+    opacity: 0;
+    transform: translateY(6px) scale(0.99);
+    transition: opacity var(--ui-motion-base, 200ms) var(--ui-motion-easing, ease), transform var(--ui-motion-base, 200ms) var(--ui-motion-easing, ease);
+    position: relative;
+    min-inline-size: min(180px, calc(100vw - 24px));
+    max-inline-size: min(360px, calc(100vw - 24px));
+  }
+  .panel.show { opacity: 1; transform: translateY(0) scale(1); }
+
+  .content {
+    display: grid;
+    gap: 10px;
+    min-inline-size: 0;
+  }
+
+  .content > :first-child {
+    margin-top: 0;
+  }
+
+  .content > :last-child {
+    margin-bottom: 0;
+  }
+
+  /* arrow (positioned from portal.ts when present) */
+  .arrow {
+    position: absolute;
+    width: 14px;
+    height: 8px;
+    background: transparent;
+    transform-origin: center;
+    left: 50%;
+    top: -8px;
+    margin-left: -7px;
+    transition:
+      left var(--ui-motion-base, 200ms) var(--ui-motion-easing, ease),
+      top var(--ui-motion-base, 200ms) var(--ui-motion-easing, ease),
+      opacity 120ms ease,
+      transform var(--ui-motion-base, 200ms) var(--ui-motion-easing, ease);
+    will-change: left, top;
+  }
+
+  .arrow::before,
+  .arrow::after {
+    content: "";
+    position: absolute;
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  }
+
+  .arrow::before {
+    inset: 0;
+    background: var(--ui-popover-border-color);
+  }
+
+  .arrow::after {
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 0;
+    background: var(--ui-popover-bg);
+  }
+
+  [data-placement^="bottom"] .arrow {
+    top: -8px;
+    bottom: auto;
+    left: 50%;
+    right: auto;
+    margin-left: -7px;
+    margin-top: 0;
+    transform: rotate(0deg);
+  }
+
+  [data-placement^="top"] .arrow {
+    top: auto;
+    bottom: -8px;
+    left: 50%;
+    right: auto;
+    margin-left: -7px;
+    margin-top: 0;
+    transform: rotate(180deg);
+  }
+
+  [data-placement^="left"] .arrow {
+    top: 50%;
+    bottom: auto;
+    left: auto;
+    right: -11px;
+    margin-left: 0;
+    margin-top: -4px;
+    transform: rotate(90deg);
+  }
+
+  [data-placement^="right"] .arrow {
+    top: 50%;
+    bottom: auto;
+    left: -11px;
+    right: auto;
+    margin-left: 0;
+    margin-top: -4px;
+    transform: rotate(-90deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel { transition: none !important; transform: none !important; }
+  }
+
+  @media (prefers-contrast: more) {
+    .panel {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .popover-shell {
+      --ui-popover-bg: Canvas;
+      --ui-popover-text: CanvasText;
+      --ui-popover-border-color: CanvasText;
+      --ui-popover-border: 1px solid CanvasText;
+      --ui-popover-focus: Highlight;
+      --ui-popover-shadow: none;
+    }
+
+    .panel {
+      backdrop-filter: none;
+    }
+
+    .panel,
+    .arrow {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+class m extends v {
+  constructor() {
+    super(), this._portalEl = null, this._panelEl = null, this._positioner = null, this._layer = null, this._isOpen = !1, this._restoreFocusEl = null, this._contentObserver = null, this._hostObserver = null, this._syncPortalScheduled = !1, this._onHostClick = this._handleHostClick.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "placement",
+      "offset",
+      "flip",
+      "shift",
+      "close-on-escape",
+      "close-on-outside",
+      "variant",
+      "tone",
+      "size",
+      "radius",
+      "elevation"
+    ];
+  }
+  attributeChangedCallback(e, t, r) {
+    var o;
+    if (t !== r) {
+      if (e === "open") {
+        this._syncOpenState();
+        return;
+      }
+      this._isOpen && ((o = this._portalEl) != null && o.isConnected) && (e === "placement" || e === "offset" || e === "flip" || e === "shift" || e === "variant" || e === "tone" || e === "size" || e === "radius" || e === "elevation" ? this._mountPortal() : (e === "close-on-escape" || e === "close-on-outside") && this._syncDismissableLayer());
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this._onHostClick), this._observeHost(), this._syncOpenState();
+  }
+  disconnectedCallback() {
+    var e;
+    this.removeEventListener("click", this._onHostClick), (e = this._hostObserver) == null || e.disconnect(), this._hostObserver = null, this._teardownPortal(), super.disconnectedCallback();
+  }
+  _handleHostClick(e) {
+    const t = this._getTrigger();
+    if (!t)
+      return;
+    const r = typeof e.composedPath == "function" ? e.composedPath() : [], o = e.target instanceof Node ? e.target : null;
+    (r.includes(t) || !!o && (t === o || t.contains(o))) && this.toggle();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  toggle() {
+    this.hasAttribute("open") ? this.close() : this.open();
+  }
+  updatePosition() {
+    var e;
+    (e = this._positioner) == null || e.update();
+  }
+  _getTrigger() {
+    return this.querySelector('[slot="trigger"]');
+  }
+  _buildPortalContent() {
+    const e = document.createElement("div");
+    e.className = "popover-shell", e.style.pointerEvents = "auto";
+    const t = this.getAttribute("variant");
+    t && (e.dataset.variant = t);
+    const r = this.getAttribute("tone");
+    r && (e.dataset.tone = r);
+    const o = this.getAttribute("size");
+    o && (e.dataset.size = o);
+    const i = this.getAttribute("elevation");
+    i && (e.dataset.elevation = i);
+    const s = this.getAttribute("radius");
+    if (s && s.trim()) {
+      const p = s.trim(), d = /^-?\d+(\.\d+)?$/.test(p) ? `${p}px` : p;
+      e.style.setProperty("--ui-popover-radius", d);
+    }
+    const l = document.createElement("style");
+    l.textContent = g, e.appendChild(l);
+    const a = document.createElement("div");
+    a.className = "panel show", this._panelEl = a;
+    const c = document.createElement("div");
+    c.className = "arrow", a.appendChild(c);
+    const u = this.querySelector('[slot="content"]'), n = document.createElement("div");
+    return n.className = "content", u && n.appendChild(u.cloneNode(!0)), a.appendChild(n), e.appendChild(a), e;
+  }
+  _getContentSource() {
+    return this.querySelector('[slot="content"]');
+  }
+  _placement() {
+    const e = this.getAttribute("placement");
+    return e || "bottom";
+  }
+  _offset() {
+    const e = Number(this.getAttribute("offset"));
+    return Number.isFinite(e) ? e : 8;
+  }
+  _closeOnEscape() {
+    return this.getAttribute("close-on-escape") !== "false";
+  }
+  _closeOnOutside() {
+    return this.getAttribute("close-on-outside") !== "false";
+  }
+  _syncDismissableLayer() {
+    var t;
+    const e = this._getTrigger();
+    !e || !this._panelEl || ((t = this._layer) == null || t.destroy(), this._layer = f({
+      node: this._panelEl,
+      trigger: e,
+      closeOnEscape: this._closeOnEscape(),
+      closeOnPointerOutside: this._closeOnOutside(),
+      onDismiss: () => this.close()
+    }));
+  }
+  _teardownPortal() {
+    var e, t, r, o;
+    if ((e = this._contentObserver) == null || e.disconnect(), this._contentObserver = null, (t = this._layer) == null || t.destroy(), this._layer = null, (r = this._positioner) == null || r.destroy(), this._positioner = null, this._panelEl = null, (o = this._portalEl) != null && o.parentElement)
+      try {
+        this._portalEl.parentElement.removeChild(this._portalEl);
+      } catch {
+      }
+    this._portalEl = null;
+  }
+  _schedulePortalSync() {
+    this._syncPortalScheduled || !this._isOpen || (this._syncPortalScheduled = !0, queueMicrotask(() => {
+      this._syncPortalScheduled = !1, this._isOpen && this._mountPortal();
+    }));
+  }
+  _observeContent() {
+    var t;
+    (t = this._contentObserver) == null || t.disconnect(), this._contentObserver = null;
+    const e = this._getContentSource();
+    !e || typeof MutationObserver > "u" || (this._contentObserver = new MutationObserver(() => this._schedulePortalSync()), this._contentObserver.observe(e, {
+      attributes: !0,
+      childList: !0,
+      characterData: !0,
+      subtree: !0
+    }));
+  }
+  _observeHost() {
+    var e;
+    (e = this._hostObserver) == null || e.disconnect(), this._hostObserver = null, !(typeof MutationObserver > "u") && (this._hostObserver = new MutationObserver(() => this._schedulePortalSync()), this._hostObserver.observe(this, {
+      childList: !0,
+      subtree: !1
+    }));
+  }
+  _mountPortal() {
+    const e = this._getTrigger();
+    if (!e)
+      return;
+    this._teardownPortal(), this._portalEl = this._buildPortalContent();
+    const t = h();
+    t && (t.appendChild(this._portalEl), this._observeContent(), this._positioner = b({
+      anchor: e,
+      floating: this._portalEl,
+      placement: this._placement(),
+      offset: this._offset(),
+      shift: this.getAttribute("shift") !== "false",
+      flip: this.getAttribute("flip") !== "false",
+      arrow: this._portalEl.querySelector(".arrow")
+    }), this._syncDismissableLayer());
+  }
+  _syncOpenState() {
+    var i;
+    const e = this.hasAttribute("open");
+    if (e === this._isOpen) {
+      e && (!this._portalEl || !this._portalEl.isConnected ? this._mountPortal() : (i = this._positioner) == null || i.update());
+      return;
+    }
+    if (this._isOpen = e, e) {
+      this._restoreFocusEl = document.activeElement instanceof HTMLElement ? document.activeElement : null, this._mountPortal(), this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("open-change", { detail: { open: !0 }, bubbles: !0, composed: !0 }));
+      return;
+    }
+    this._teardownPortal(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("open-change", { detail: { open: !1 }, bubbles: !0, composed: !0 }));
+    const t = this._getTrigger(), r = this._restoreFocusEl;
+    this._restoreFocusEl = null;
+    const o = (t && t.isConnected ? t : r) || null;
+    if (o && o.isConnected)
+      try {
+        o.focus();
+      } catch {
+      }
+  }
+  render() {
+    this.setContent('<slot name="trigger"></slot>');
+  }
+  shouldRenderOnAttributeChange(e, t, r) {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-popover") && customElements.define("ui-popover", m);
+export {
+  m as UIPopover
+};

package/dist/portal-1cf392ca.mjs

@@ -0,0 +1,114 @@
+function z(r = "ui-portal-root") {
+  if (typeof document > "u")
+    return null;
+  let t = document.getElementById(r);
+  return t || (t = document.createElement("div"), t.id = r, t.style.position = "fixed", t.style.top = "0", t.style.left = "0", t.style.width = "100%", t.style.height = "0", t.style.pointerEvents = "none", t.style.zIndex = "var(--ui-portal-z, 1600)", document.body.appendChild(t)), t.style.zIndex || (t.style.zIndex = "var(--ui-portal-z, 1600)"), t;
+}
+function C(r, t, p = "top") {
+  const f = typeof p == "string" ? { placement: p } : p, s = f.placement || "top", c = typeof f.offset == "number" ? f.offset : 8, h = !!f.shift, e = r.getBoundingClientRect(), l = t.getBoundingClientRect();
+  let o = 0, i = 0;
+  s === "top" ? (o = e.top - l.height - c, i = e.left + (e.width - l.width) / 2) : s === "bottom" ? (o = e.bottom + c, i = e.left + (e.width - l.width) / 2) : s === "left" ? (o = e.top + (e.height - l.height) / 2, i = e.left - l.width - c) : (o = e.top + (e.height - l.height) / 2, i = e.right + c);
+  const v = e.left + e.width / 2, m = e.top + e.height / 2, g = Math.round(v - i), y = Math.round(m - o);
+  if (h) {
+    const n = window.innerWidth || document.documentElement.clientWidth, u = window.innerHeight || document.documentElement.clientHeight;
+    if (s === "top" || s === "bottom") {
+      const a = n - l.width - 4;
+      i < 4 && (i = Math.min(a, i + (4 - i))), i > a && (i = Math.max(4, i - (i - a)));
+    } else {
+      const a = u - l.height - 4;
+      o < 4 && (o = Math.min(a, o + (4 - o))), o > a && (o = Math.max(4, o - (o - a)));
+    }
+  }
+  return { top: o, left: i, placement: s, x: g, y };
+}
+function L(r, t, p) {
+  let f = null, s = null, c = null, h = 0;
+  const e = [], l = () => {
+    h || (h = requestAnimationFrame(() => {
+      h = 0, p();
+    }));
+  }, o = () => l();
+  if (typeof ResizeObserver < "u") {
+    f = new ResizeObserver(l), s = new ResizeObserver(l);
+    try {
+      f.observe(r);
+    } catch {
+    }
+    try {
+      s.observe(t);
+    } catch {
+    }
+  }
+  if (typeof MutationObserver < "u") {
+    c = new MutationObserver(l);
+    try {
+      c.observe(r, { attributes: !0, childList: !1, subtree: !1 });
+    } catch {
+    }
+  }
+  return window.addEventListener("scroll", o, !0), window.addEventListener("resize", o), e.push(() => window.removeEventListener("scroll", o, !0)), e.push(() => window.removeEventListener("resize", o)), e.push(() => {
+    f && f.disconnect(), f = null;
+  }), e.push(() => {
+    s && s.disconnect(), s = null;
+  }), e.push(() => {
+    c && c.disconnect(), c = null;
+  }), e.push(() => {
+    h && (cancelAnimationFrame(h), h = 0);
+  }), () => e.forEach((i) => {
+    try {
+      i();
+    } catch {
+    }
+  });
+}
+function H(r, t, p = "top") {
+  const f = typeof p == "string" ? { placement: p } : p, s = f.placement || "top", c = typeof f.offset == "number" ? f.offset : 8, h = f.flip !== !1, e = !!f.shift, l = z();
+  if (!l)
+    return;
+  t.style.position = "absolute", t.style.pointerEvents = "auto", l.appendChild(t);
+  let o = () => {
+  };
+  function i(m, g, y) {
+    const n = t.querySelector(".arrow");
+    if (!n)
+      return;
+    const u = r.getBoundingClientRect(), d = u.left + u.width / 2, a = u.top + u.height / 2;
+    if (y === "top" || y === "bottom") {
+      const b = d - g, x = 8, w = t.offsetWidth - 8, M = Math.max(x, Math.min(w, b));
+      n.style.left = `${Math.round(M)}px`, n.style.top = "";
+    } else {
+      const b = a - m, x = 8, w = t.offsetHeight - 8, M = Math.max(x, Math.min(w, b));
+      n.style.top = `${Math.round(M)}px`, n.style.left = "";
+    }
+  }
+  function v() {
+    var u;
+    if (r && typeof r.getBoundingClientRect == "function" && r instanceof HTMLElement) {
+      const d = r, a = (u = d.getRootNode) == null ? void 0 : u.call(d), b = a instanceof ShadowRoot ? a.host : null, x = d.isConnected || document.body.contains(d) || (b ? document.body.contains(b) : !1), w = window.getComputedStyle(d), M = w.display !== "none" && w.visibility !== "hidden" && parseFloat(w.opacity || "1") > 0;
+      if (!x || !M) {
+        try {
+          t.parentElement && t.parentElement.removeChild(t);
+        } catch {
+        }
+        o();
+        return;
+      }
+    }
+    const m = C(r, t, { placement: s, offset: c, shift: e }), g = window.innerWidth || document.documentElement.clientWidth, y = window.innerHeight || document.documentElement.clientHeight;
+    let n = m;
+    h && (m.top < 0 && s === "top" || m.top + t.offsetHeight > y && s === "bottom") && (n = C(r, t, { placement: s === "top" ? "bottom" : "top", offset: c, shift: e })), n.left < 4 && (n.left = 4), n.left + t.offsetWidth > g - 4 && (n.left = g - t.offsetWidth - 4), n.top < 4 && (n.top = 4), n.top + t.offsetHeight > y - 4 && (n.top = y - t.offsetHeight - 4), t.style.top = `${Math.round(n.top)}px`, t.style.left = `${Math.round(n.left)}px`, i(n.top, n.left, n.placement), t.setAttribute("data-placement", n.placement);
+  }
+  return v(), o = L(r, t, v), () => {
+    try {
+      t.parentElement && t.parentElement.removeChild(t);
+    } catch {
+    }
+    o();
+  };
+}
+export {
+  C as a,
+  L as b,
+  z as c,
+  H as s
+};

package/dist/portal-d8d7fbca.js

@@ -0,0 +1 @@
+"use strict";function z(r="ui-portal-root"){if(typeof document>"u")return null;let t=document.getElementById(r);return t||(t=document.createElement("div"),t.id=r,t.style.position="fixed",t.style.top="0",t.style.left="0",t.style.width="100%",t.style.height="0",t.style.pointerEvents="none",t.style.zIndex="var(--ui-portal-z, 1600)",document.body.appendChild(t)),t.style.zIndex||(t.style.zIndex="var(--ui-portal-z, 1600)"),t}function C(r,t,p="top"){const f=typeof p=="string"?{placement:p}:p,s=f.placement||"top",c=typeof f.offset=="number"?f.offset:8,h=!!f.shift,e=r.getBoundingClientRect(),l=t.getBoundingClientRect();let o=0,i=0;s==="top"?(o=e.top-l.height-c,i=e.left+(e.width-l.width)/2):s==="bottom"?(o=e.bottom+c,i=e.left+(e.width-l.width)/2):s==="left"?(o=e.top+(e.height-l.height)/2,i=e.left-l.width-c):(o=e.top+(e.height-l.height)/2,i=e.right+c);const b=e.left+e.width/2,m=e.top+e.height/2,g=Math.round(b-i),y=Math.round(m-o);if(h){const n=window.innerWidth||document.documentElement.clientWidth,u=window.innerHeight||document.documentElement.clientHeight;if(s==="top"||s==="bottom"){const a=n-l.width-4;i<4&&(i=Math.min(a,i+(4-i))),i>a&&(i=Math.max(4,i-(i-a)))}else{const a=u-l.height-4;o<4&&(o=Math.min(a,o+(4-o))),o>a&&(o=Math.max(4,o-(o-a)))}}return{top:o,left:i,placement:s,x:g,y}}function L(r,t,p){let f=null,s=null,c=null,h=0;const e=[],l=()=>{h||(h=requestAnimationFrame(()=>{h=0,p()}))},o=()=>l();if(typeof ResizeObserver<"u"){f=new ResizeObserver(l),s=new ResizeObserver(l);try{f.observe(r)}catch{}try{s.observe(t)}catch{}}if(typeof MutationObserver<"u"){c=new MutationObserver(l);try{c.observe(r,{attributes:!0,childList:!1,subtree:!1})}catch{}}return window.addEventListener("scroll",o,!0),window.addEventListener("resize",o),e.push(()=>window.removeEventListener("scroll",o,!0)),e.push(()=>window.removeEventListener("resize",o)),e.push(()=>{f&&f.disconnect(),f=null}),e.push(()=>{s&&s.disconnect(),s=null}),e.push(()=>{c&&c.disconnect(),c=null}),e.push(()=>{h&&(cancelAnimationFrame(h),h=0)}),()=>e.forEach(i=>{try{i()}catch{}})}function R(r,t,p="top"){const f=typeof p=="string"?{placement:p}:p,s=f.placement||"top",c=typeof f.offset=="number"?f.offset:8,h=f.flip!==!1,e=!!f.shift,l=z();if(!l)return;t.style.position="absolute",t.style.pointerEvents="auto",l.appendChild(t);let o=()=>{};function i(m,g,y){const n=t.querySelector(".arrow");if(!n)return;const u=r.getBoundingClientRect(),d=u.left+u.width/2,a=u.top+u.height/2;if(y==="top"||y==="bottom"){const v=d-g,M=8,w=t.offsetWidth-8,x=Math.max(M,Math.min(w,v));n.style.left=`${Math.round(x)}px`,n.style.top=""}else{const v=a-m,M=8,w=t.offsetHeight-8,x=Math.max(M,Math.min(w,v));n.style.top=`${Math.round(x)}px`,n.style.left=""}}function b(){var u;if(r&&typeof r.getBoundingClientRect=="function"&&r instanceof HTMLElement){const d=r,a=(u=d.getRootNode)==null?void 0:u.call(d),v=a instanceof ShadowRoot?a.host:null,M=d.isConnected||document.body.contains(d)||(v?document.body.contains(v):!1),w=window.getComputedStyle(d),x=w.display!=="none"&&w.visibility!=="hidden"&&parseFloat(w.opacity||"1")>0;if(!M||!x){try{t.parentElement&&t.parentElement.removeChild(t)}catch{}o();return}}const m=C(r,t,{placement:s,offset:c,shift:e}),g=window.innerWidth||document.documentElement.clientWidth,y=window.innerHeight||document.documentElement.clientHeight;let n=m;h&&(m.top<0&&s==="top"||m.top+t.offsetHeight>y&&s==="bottom")&&(n=C(r,t,{placement:s==="top"?"bottom":"top",offset:c,shift:e})),n.left<4&&(n.left=4),n.left+t.offsetWidth>g-4&&(n.left=g-t.offsetWidth-4),n.top<4&&(n.top=4),n.top+t.offsetHeight>y-4&&(n.top=y-t.offsetHeight-4),t.style.top=`${Math.round(n.top)}px`,t.style.left=`${Math.round(n.left)}px`,i(n.top,n.left,n.placement),t.setAttribute("data-placement",n.placement)}return b(),o=L(r,t,b),()=>{try{t.parentElement&&t.parentElement.removeChild(t)}catch{}o()}}exports.autoUpdatePosition=L;exports.computePosition=C;exports.createPortalContainer=z;exports.showPortalFor=R;

package/dist/portal.cjs.js

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./ElementBase-1b301e7f.js"),l=`
+  :host {
+    display: contents;
+    color-scheme: light dark;
+    --ui-portal-color: var(--ui-color-text, inherit);
+    color: var(--ui-portal-color);
+  }
+
+  .source {
+    display: contents;
+  }
+
+  :host([headless]) .source {
+    display: block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .source {
+      scroll-behavior: auto;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-portal-color: var(--ui-color-text, inherit);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-portal-color: CanvasText;
+    }
+  }
+`;function a(r){return r==="prepend"?"prepend":"append"}function h(r){var t;return r.nodeType===Node.ELEMENT_NODE?!0:r.nodeType===Node.TEXT_NODE?!!((t=r.textContent)!=null&&t.trim()):!1}function u(r){return r.nodeType===Node.ELEMENT_NODE||r.nodeType===Node.TEXT_NODE}class n extends o.ElementBase{constructor(){super(),this._headless=!1,this._strategy="append",this._target=null,this._slot=null,this._entries=[],this._syncing=!1,this._guardTimer=null,this._targetObserver=null,this._pendingSlotSync=!1,this._onSlotChange=this._onSlotChange.bind(this),this._onTargetMutations=this._onTargetMutations.bind(this)}static get observedAttributes(){return["target","headless","strategy","disabled"]}connectedCallback(){super.connectedCallback(),this._syncConfig(),this._mountAllFromSlot()}disconnectedCallback(){this._guardTimer!=null&&(window.clearTimeout(this._guardTimer),this._guardTimer=null),this._slot&&(this._slot.removeEventListener("slotchange",this._onSlotChange),this._slot=null),this._disconnectTargetObserver(),this._restoreAll(),super.disconnectedCallback()}attributeChangedCallback(t,e,s){if(e!==s){if(this._syncConfig(),this._headless){this._restoreAll();return}(t==="target"||t==="strategy"||t==="disabled"||t==="headless")&&this._moveAllToTarget()}}_syncConfig(){this._headless=this.hasAttribute("headless")||this.hasAttribute("disabled"),this._strategy=a(this.getAttribute("strategy")),this._target=this._resolveTarget(),this._connectTargetObserver()}_resolveTarget(){const t=this.getAttribute("target");if(t){const e=document.querySelector(t);if(e instanceof HTMLElement)return e;this.dispatchEvent(new CustomEvent("target-missing",{detail:{target:t},bubbles:!0}))}return document.body}_connectTargetObserver(){this._disconnectTargetObserver(),!(!this._target||typeof MutationObserver>"u")&&(this._targetObserver=new MutationObserver(this._onTargetMutations),this._targetObserver.observe(this._target,{childList:!0,subtree:!0}))}_disconnectTargetObserver(){this._targetObserver&&(this._targetObserver.disconnect(),this._targetObserver=null)}_onTargetMutations(){if(this._syncing)return;let t=!1;this._entries=this._entries.filter(e=>{if(e.node.isConnected)return!0;try{e.anchor.parentNode&&e.anchor.parentNode.removeChild(e.anchor)}catch{}return t=!0,!1}),t&&this.dispatchEvent(new CustomEvent("sync",{detail:{count:this._entries.length},bubbles:!0}))}_beginSync(){this._syncing=!0,this._guardTimer!=null&&window.clearTimeout(this._guardTimer),this._guardTimer=window.setTimeout(()=>{this._syncing=!1,this._guardTimer=null,this._pendingSlotSync&&(this._pendingSlotSync=!1,this._mountAllFromSlot())},0)}_findEntry(t){return this._entries.find(e=>e.node===t)}_portalNode(t){if(!this._target||this._headless||!u(t)||this._findEntry(t)||!this.contains(t))return;const e=document.createComment("ui-portal-anchor"),s=t.parentNode;s&&(this._beginSync(),s.insertBefore(e,t),this._strategy==="prepend"?this._target.insertBefore(t,this._target.firstChild):this._target.appendChild(t),this._entries.push({node:t,anchor:e}))}_restoreEntry(t){const{node:e,anchor:s}=t;this._beginSync(),s.parentNode&&(s.parentNode.insertBefore(e,s),s.parentNode.removeChild(s))}_restoreAll(){if(!this._entries.length)return;const t=[...this._entries];this._entries=[],t.forEach(e=>this._restoreEntry(e)),this.dispatchEvent(new CustomEvent("unmount",{detail:{count:t.length},bubbles:!0}))}_moveAllToTarget(){if(this._headless){this._restoreAll();return}const t=[...this._entries];this._entries=[],t.forEach(e=>{const s=e.anchor,i=e.node;s.parentNode&&(this._beginSync(),this._strategy==="prepend"?this._target.insertBefore(i,this._target.firstChild):this._target.appendChild(i),this._entries.push({node:i,anchor:s}))}),this.dispatchEvent(new CustomEvent("mount",{detail:{count:this._entries.length},bubbles:!0}))}_mountAllFromSlot(){if(this._headless)return;const t=this._slot||this.root.querySelector("slot");if(!t)return;const e=t.assignedNodes({flatten:!0}).filter(s=>h(s));e.forEach(s=>this._portalNode(s)),e.length&&this.dispatchEvent(new CustomEvent("mount",{detail:{count:this._entries.length},bubbles:!0}))}_pruneDetachedEntries(){this._entries.length&&(this._entries=this._entries.filter(t=>{if(t.node.isConnected)return!0;try{t.anchor.parentNode&&t.anchor.parentNode.removeChild(t.anchor)}catch{}return!1}))}_onSlotChange(){if(!this._headless){if(this._syncing){this._pendingSlotSync=!0;return}this._pruneDetachedEntries(),this._mountAllFromSlot()}}render(){this.setContent(`
+      <style>${l}</style>
+      <div class="source" part="source">
+        <slot></slot>
+      </div>
+    `),this._slot&&(this._slot.removeEventListener("slotchange",this._onSlotChange),this._slot=null);const t=this.root.querySelector("slot");t&&(this._slot=t,this._slot.addEventListener("slotchange",this._onSlotChange),this._mountAllFromSlot())}shouldRenderOnAttributeChange(t,e,s){return!1}}typeof customElements<"u"&&!customElements.get("ui-portal")&&customElements.define("ui-portal",n);exports.UIPortal=n;