@editora/ui-core 0.1.8 → 0.1.10

package/dist/portal.esm.js

@@ -0,0 +1,187 @@
+import { E as n } from "./ElementBase-909688f3.mjs";
+const o = `
+  :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 l(r) {
+  return r === "prepend" ? "prepend" : "append";
+}
+function a(r) {
+  var t;
+  return r.nodeType === Node.ELEMENT_NODE ? !0 : r.nodeType === Node.TEXT_NODE ? !!((t = r.textContent) != null && t.trim()) : !1;
+}
+function h(r) {
+  return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE;
+}
+class u extends n {
+  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 = l(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 || !h(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) => a(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>${o}</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", u);
+export {
+  u as UIPortal
+};

package/dist/positioner-accc6e5f.js

@@ -0,0 +1 @@
+"use strict";function w(e){return e instanceof HTMLElement}function v(e){return!!e&&typeof e.top=="number"&&typeof e.left=="number"}function g(e){return w(e)?e.getBoundingClientRect():v(e)?e:e.getBoundingClientRect()}function M(e){if(e instanceof HTMLElement){const i=e.getBoundingClientRect();return{top:i.top,left:i.left,right:i.right,bottom:i.bottom,width:i.width,height:i.height}}const n=window.innerWidth||document.documentElement.clientWidth||0,t=window.innerHeight||document.documentElement.clientHeight||0;return{top:0,left:0,right:n,bottom:t,width:n,height:t}}function h(e){const[n,t]=e.split("-");return{side:n,align:t||"center"}}function E(e){const{side:n,align:t}=h(e);return`${n==="top"?"bottom":n==="bottom"?"top":n==="left"?"right":"left"}${t==="center"?"":`-${t}`}`}function b(e,n,t,i,o){const{side:r,align:s}=h(t);let c=0,l=0;return r==="top"||r==="bottom"?(s==="start"?c=e.left:s==="end"?c=e.right-n.width:c=e.left+(e.width-n.width)/2,l=r==="top"?e.top-n.height-i:e.bottom+i,c+=o):(s==="start"?l=e.top:s==="end"?l=e.bottom-n.height:l=e.top+(e.height-n.height)/2,c=r==="left"?e.left-n.width-i:e.right+i,l+=o),{x:c,y:l}}function x(e,n,t,i){const{side:o}=h(e);return o==="top"?n.y<i.top+4:o==="bottom"?n.y+t.height>i.bottom-4:o==="left"?n.x<i.left+4:n.x+t.width>i.right-4}function m(e,n,t){return Math.min(t,Math.max(n,e))}function D(e,n,t,i){const{side:o}=h(n.placement),r=t.left+t.width/2,s=t.top+t.height/2;if(o==="top"||o==="bottom"){const l=Math.max(8,i.width-8),d=m(r-n.x,8,l);e.style.left=`${Math.round(d)}px`,e.style.top=""}else{const l=Math.max(8,i.height-8),d=m(s-n.y,8,l);e.style.top=`${Math.round(d)}px`,e.style.left=""}}function y(e,n,t={}){const i=g(e),o=w(n)?n.getBoundingClientRect():n,r=M(t.boundary??null),s=t.placement||"bottom",c=typeof t.offset=="number"?t.offset:8,l=typeof t.crossOffset=="number"?t.crossOffset:0;let d=s,f=b(i,o,d,c,l);if(t.flip&&x(d,f,o,r)){const u=E(d),a=b(i,o,u,c,l);x(u,a,o,r)||(d=u,f=a)}if(t.shift||t.fitViewport){const u=r.left+4,a=r.top+4,P=Math.max(u,r.right-o.width-4),p=Math.max(a,r.bottom-o.height-4);f.x=m(f.x,u,P),f.y=m(f.y,a,p)}return{x:f.x,y:f.y,placement:d,availableWidth:Math.max(0,r.right-f.x-4),availableHeight:Math.max(0,r.bottom-f.y-4)}}function W(e,n){return n!=="absolute"?e:{...e,x:e.x+window.scrollX,y:e.y+window.scrollY}}function A(e,n,t,i){let o=0,r=null,s=null;const c=()=>{o||(o=requestAnimationFrame(()=>{o=0,t()}))},l=()=>c();return i.observeWindowResize&&window.addEventListener("resize",l),i.observeScroll&&window.addEventListener("scroll",l,!0),typeof ResizeObserver<"u"&&(i.observeAnchorResize&&w(e)&&(r=new ResizeObserver(c),r.observe(e)),i.observeFloatingResize&&(s=new ResizeObserver(c),s.observe(n))),()=>{i.observeWindowResize&&window.removeEventListener("resize",l),i.observeScroll&&window.removeEventListener("scroll",l,!0),r&&r.disconnect(),s&&s.disconnect(),o&&cancelAnimationFrame(o)}}function I(e){if(!(e.floating instanceof HTMLElement))throw new Error("createPositioner requires a valid floating HTMLElement");const n=e.strategy||"fixed",t=e.floating,i=A(e.anchor,t,o,{observeWindowResize:e.observeWindowResize??!0,observeScroll:e.observeScroll??!0,observeAnchorResize:e.observeAnchorResize??!0,observeFloatingResize:e.observeFloatingResize??!(e.fitViewport||e.matchWidth)});function o(){var c;const r=y(e.anchor,t,e),s=W(r,n);if(t.style.position=n,t.style.left=`${Math.round(s.x)}px`,t.style.top=`${Math.round(s.y)}px`,t.style.setProperty("--ui-positioner-x",`${Math.round(s.x)}px`),t.style.setProperty("--ui-positioner-y",`${Math.round(s.y)}px`),e.matchWidth){const l=g(e.anchor);t.style.width=`${Math.round(l.width)}px`}return e.fitViewport&&(t.style.maxWidth=`${Math.round(r.availableWidth)}px`,t.style.maxHeight=`${Math.round(r.availableHeight)}px`),t.setAttribute("data-placement",r.placement),e.arrow instanceof HTMLElement&&D(e.arrow,r,g(e.anchor),t.getBoundingClientRect()),(c=e.onUpdate)==null||c.call(e,r),r}return o(),{update:o,destroy(){i()}}}exports.computePositionState=y;exports.createPositioner=I;

package/dist/positioner-fbd61bf1.mjs

@@ -0,0 +1,132 @@
+function w(e) {
+  return e instanceof HTMLElement;
+}
+function P(e) {
+  return !!e && typeof e.top == "number" && typeof e.left == "number";
+}
+function g(e) {
+  return w(e) ? e.getBoundingClientRect() : P(e) ? e : e.getBoundingClientRect();
+}
+function v(e) {
+  if (e instanceof HTMLElement) {
+    const i = e.getBoundingClientRect();
+    return {
+      top: i.top,
+      left: i.left,
+      right: i.right,
+      bottom: i.bottom,
+      width: i.width,
+      height: i.height
+    };
+  }
+  const n = window.innerWidth || document.documentElement.clientWidth || 0, t = window.innerHeight || document.documentElement.clientHeight || 0;
+  return {
+    top: 0,
+    left: 0,
+    right: n,
+    bottom: t,
+    width: n,
+    height: t
+  };
+}
+function h(e) {
+  const [n, t] = e.split("-");
+  return {
+    side: n,
+    align: t || "center"
+  };
+}
+function M(e) {
+  const { side: n, align: t } = h(e);
+  return `${n === "top" ? "bottom" : n === "bottom" ? "top" : n === "left" ? "right" : "left"}${t === "center" ? "" : `-${t}`}`;
+}
+function b(e, n, t, i, o) {
+  const { side: r, align: s } = h(t);
+  let c = 0, l = 0;
+  return r === "top" || r === "bottom" ? (s === "start" ? c = e.left : s === "end" ? c = e.right - n.width : c = e.left + (e.width - n.width) / 2, l = r === "top" ? e.top - n.height - i : e.bottom + i, c += o) : (s === "start" ? l = e.top : s === "end" ? l = e.bottom - n.height : l = e.top + (e.height - n.height) / 2, c = r === "left" ? e.left - n.width - i : e.right + i, l += o), { x: c, y: l };
+}
+function x(e, n, t, i) {
+  const { side: o } = h(e);
+  return o === "top" ? n.y < i.top + 4 : o === "bottom" ? n.y + t.height > i.bottom - 4 : o === "left" ? n.x < i.left + 4 : n.x + t.width > i.right - 4;
+}
+function m(e, n, t) {
+  return Math.min(t, Math.max(n, e));
+}
+function E(e, n, t, i) {
+  const { side: o } = h(n.placement), r = t.left + t.width / 2, s = t.top + t.height / 2;
+  if (o === "top" || o === "bottom") {
+    const l = Math.max(8, i.width - 8), d = m(r - n.x, 8, l);
+    e.style.left = `${Math.round(d)}px`, e.style.top = "";
+  } else {
+    const l = Math.max(8, i.height - 8), d = m(s - n.y, 8, l);
+    e.style.top = `${Math.round(d)}px`, e.style.left = "";
+  }
+}
+function D(e, n, t = {}) {
+  const i = g(e), o = w(n) ? n.getBoundingClientRect() : n, r = v(t.boundary ?? null), s = t.placement || "bottom", c = typeof t.offset == "number" ? t.offset : 8, l = typeof t.crossOffset == "number" ? t.crossOffset : 0;
+  let d = s, f = b(i, o, d, c, l);
+  if (t.flip && x(d, f, o, r)) {
+    const a = M(d), u = b(i, o, a, c, l);
+    x(a, u, o, r) || (d = a, f = u);
+  }
+  if (t.shift || t.fitViewport) {
+    const a = r.left + 4, u = r.top + 4, y = Math.max(a, r.right - o.width - 4), p = Math.max(u, r.bottom - o.height - 4);
+    f.x = m(f.x, a, y), f.y = m(f.y, u, p);
+  }
+  return {
+    x: f.x,
+    y: f.y,
+    placement: d,
+    availableWidth: Math.max(0, r.right - f.x - 4),
+    availableHeight: Math.max(0, r.bottom - f.y - 4)
+  };
+}
+function W(e, n) {
+  return n !== "absolute" ? e : {
+    ...e,
+    x: e.x + window.scrollX,
+    y: e.y + window.scrollY
+  };
+}
+function A(e, n, t, i) {
+  let o = 0, r = null, s = null;
+  const c = () => {
+    o || (o = requestAnimationFrame(() => {
+      o = 0, t();
+    }));
+  }, l = () => c();
+  return i.observeWindowResize && window.addEventListener("resize", l), i.observeScroll && window.addEventListener("scroll", l, !0), typeof ResizeObserver < "u" && (i.observeAnchorResize && w(e) && (r = new ResizeObserver(c), r.observe(e)), i.observeFloatingResize && (s = new ResizeObserver(c), s.observe(n))), () => {
+    i.observeWindowResize && window.removeEventListener("resize", l), i.observeScroll && window.removeEventListener("scroll", l, !0), r && r.disconnect(), s && s.disconnect(), o && cancelAnimationFrame(o);
+  };
+}
+function I(e) {
+  if (!(e.floating instanceof HTMLElement))
+    throw new Error("createPositioner requires a valid floating HTMLElement");
+  const n = e.strategy || "fixed", t = e.floating, i = A(e.anchor, t, o, {
+    observeWindowResize: e.observeWindowResize ?? !0,
+    observeScroll: e.observeScroll ?? !0,
+    observeAnchorResize: e.observeAnchorResize ?? !0,
+    // When the positioner constrains the floating box, observing that same box
+    // can create resize feedback loops in real browsers.
+    observeFloatingResize: e.observeFloatingResize ?? !(e.fitViewport || e.matchWidth)
+  });
+  function o() {
+    var c;
+    const r = D(e.anchor, t, e), s = W(r, n);
+    if (t.style.position = n, t.style.left = `${Math.round(s.x)}px`, t.style.top = `${Math.round(s.y)}px`, t.style.setProperty("--ui-positioner-x", `${Math.round(s.x)}px`), t.style.setProperty("--ui-positioner-y", `${Math.round(s.y)}px`), e.matchWidth) {
+      const l = g(e.anchor);
+      t.style.width = `${Math.round(l.width)}px`;
+    }
+    return e.fitViewport && (t.style.maxWidth = `${Math.round(r.availableWidth)}px`, t.style.maxHeight = `${Math.round(r.availableHeight)}px`), t.setAttribute("data-placement", r.placement), e.arrow instanceof HTMLElement && E(e.arrow, r, g(e.anchor), t.getBoundingClientRect()), (c = e.onUpdate) == null || c.call(e, r), r;
+  }
+  return o(), {
+    update: o,
+    destroy() {
+      i();
+    }
+  };
+}
+export {
+  I as a,
+  D as c
+};

package/dist/positioner.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.js"),a=require("./positioner-accc6e5f.js"),h=`
+  :host {
+    display: contents;
+    color-scheme: light dark;
+  }
+`;function l(s,t=0){const e=Number(s);return Number.isFinite(e)?e:t}function i(s){if(s==null)return!1;const t=s.toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function f(s){return new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]).has(s)?s:"bottom"}function d(s){return s==="absolute"?"absolute":"fixed"}class c extends u.ElementBase{constructor(){super(...arguments),this._positioner=null,this._observer=null}static get observedAttributes(){return["open","placement","strategy","offset","cross-offset","flip","shift","match-width","fit-viewport","anchor","headless"]}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>this._syncPositioner()),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot","id"]}),this._syncPositioner()}disconnectedCallback(){var t;(t=this._observer)==null||t.disconnect(),this._observer=null,this._destroyPositioner(),super.disconnectedCallback()}attributeChangedCallback(t,e,o){e!==o&&this._syncPositioner()}open(){this.setAttribute("open","")}close(){this.removeAttribute("open")}updatePosition(){var t;(t=this._positioner)==null||t.update()}_destroyPositioner(){var t;(t=this._positioner)==null||t.destroy(),this._positioner=null}_resolveAnchor(){const t=this.getAttribute("anchor");if(t){const o=this.getRootNode(),r=o instanceof ShadowRoot||o instanceof Document?o.querySelector(t):null;if(r instanceof HTMLElement)return r;const n=document.querySelector(t);if(n instanceof HTMLElement)return n}const e=this.querySelector('[slot="anchor"]');return e instanceof HTMLElement?e:null}_resolveFloating(){const t=this.querySelector('[slot="content"]');return t instanceof HTMLElement?t:Array.from(this.children).find(e=>e.getAttribute("slot")!=="anchor")}_syncPositioner(){if(!this.isConnected)return;if(this.hasAttribute("headless")||!this.hasAttribute("open")){this._destroyPositioner();return}const t=this._resolveAnchor(),e=this._resolveFloating();if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement)){this._destroyPositioner();return}this._destroyPositioner(),this._positioner=a.createPositioner({anchor:t,floating:e,placement:f(this.getAttribute("placement")),strategy:d(this.getAttribute("strategy")),offset:l(this.getAttribute("offset"),8),crossOffset:l(this.getAttribute("cross-offset"),0),flip:!this.hasAttribute("flip")||i(this.getAttribute("flip")),shift:!this.hasAttribute("shift")||i(this.getAttribute("shift")),matchWidth:i(this.getAttribute("match-width")),fitViewport:i(this.getAttribute("fit-viewport")),arrow:this.querySelector('[slot="arrow"], .arrow'),onUpdate:o=>{this.dispatchEvent(new CustomEvent("position-change",{detail:o,bubbles:!0,composed:!0}))}})}render(){this.setContent(`<style>${h}</style><slot name="anchor"></slot><slot name="content"></slot><slot></slot>`)}shouldRenderOnAttributeChange(){return!1}}typeof customElements<"u"&&!customElements.get("ui-positioner")&&customElements.define("ui-positioner",c);exports.UIPositioner=c;

package/dist/positioner.esm.js

@@ -0,0 +1,137 @@
+import { E as c } from "./ElementBase-909688f3.mjs";
+import { a } from "./positioner-fbd61bf1.mjs";
+const h = `
+  :host {
+    display: contents;
+    color-scheme: light dark;
+  }
+`;
+function l(s, t = 0) {
+  const e = Number(s);
+  return Number.isFinite(e) ? e : t;
+}
+function i(s) {
+  if (s == null)
+    return !1;
+  const t = s.toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
+}
+function u(s) {
+  return (/* @__PURE__ */ new Set([
+    "top",
+    "top-start",
+    "top-end",
+    "right",
+    "right-start",
+    "right-end",
+    "bottom",
+    "bottom-start",
+    "bottom-end",
+    "left",
+    "left-start",
+    "left-end"
+  ])).has(s) ? s : "bottom";
+}
+function f(s) {
+  return s === "absolute" ? "absolute" : "fixed";
+}
+class d extends c {
+  constructor() {
+    super(...arguments), this._positioner = null, this._observer = null;
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "placement",
+      "strategy",
+      "offset",
+      "cross-offset",
+      "flip",
+      "shift",
+      "match-width",
+      "fit-viewport",
+      "anchor",
+      "headless"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._observer = new MutationObserver(() => this._syncPositioner()), this._observer.observe(this, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["slot", "id"] }), this._syncPositioner();
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this._observer) == null || t.disconnect(), this._observer = null, this._destroyPositioner(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, o) {
+    e !== o && this._syncPositioner();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  updatePosition() {
+    var t;
+    (t = this._positioner) == null || t.update();
+  }
+  _destroyPositioner() {
+    var t;
+    (t = this._positioner) == null || t.destroy(), this._positioner = null;
+  }
+  _resolveAnchor() {
+    const t = this.getAttribute("anchor");
+    if (t) {
+      const o = this.getRootNode(), r = o instanceof ShadowRoot || o instanceof Document ? o.querySelector(t) : null;
+      if (r instanceof HTMLElement)
+        return r;
+      const n = document.querySelector(t);
+      if (n instanceof HTMLElement)
+        return n;
+    }
+    const e = this.querySelector('[slot="anchor"]');
+    return e instanceof HTMLElement ? e : null;
+  }
+  _resolveFloating() {
+    const t = this.querySelector('[slot="content"]');
+    return t instanceof HTMLElement ? t : Array.from(this.children).find((e) => e.getAttribute("slot") !== "anchor");
+  }
+  _syncPositioner() {
+    if (!this.isConnected)
+      return;
+    if (this.hasAttribute("headless") || !this.hasAttribute("open")) {
+      this._destroyPositioner();
+      return;
+    }
+    const t = this._resolveAnchor(), e = this._resolveFloating();
+    if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement)) {
+      this._destroyPositioner();
+      return;
+    }
+    this._destroyPositioner(), this._positioner = a({
+      anchor: t,
+      floating: e,
+      placement: u(this.getAttribute("placement")),
+      strategy: f(this.getAttribute("strategy")),
+      offset: l(this.getAttribute("offset"), 8),
+      crossOffset: l(this.getAttribute("cross-offset"), 0),
+      flip: !this.hasAttribute("flip") || i(this.getAttribute("flip")),
+      shift: !this.hasAttribute("shift") || i(this.getAttribute("shift")),
+      matchWidth: i(this.getAttribute("match-width")),
+      fitViewport: i(this.getAttribute("fit-viewport")),
+      arrow: this.querySelector('[slot="arrow"], .arrow'),
+      onUpdate: (o) => {
+        this.dispatchEvent(new CustomEvent("position-change", { detail: o, bubbles: !0, composed: !0 }));
+      }
+    });
+  }
+  render() {
+    this.setContent(`<style>${h}</style><slot name="anchor"></slot><slot name="content"></slot><slot></slot>`);
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-positioner") && customElements.define("ui-positioner", d);
+export {
+  d as UIPositioner
+};

package/dist/presence.cjs.js

@@ -0,0 +1,164 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./ElementBase-1b301e7f.js"),l=`
+  :host {
+    --ui-presence-duration-enter: 180ms;
+    --ui-presence-duration-exit: 150ms;
+    --ui-presence-ease-enter: cubic-bezier(0.2, 0.9, 0.24, 1);
+    --ui-presence-ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
+    --ui-presence-scale-enter: 1;
+    --ui-presence-scale-exit: 0.96;
+    --ui-presence-slide-distance: 14px;
+    --ui-presence-filter-enter: none;
+    --ui-presence-filter-exit: none;
+    --ui-presence-perspective: 860px;
+    --ui-presence-color: var(--ui-color-text, inherit);
+    display: contents;
+    color: var(--ui-presence-color);
+    color-scheme: light dark;
+  }
+
+  .presence {
+    display: block;
+    transform-origin: center;
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(var(--ui-presence-scale-exit));
+    filter: var(--ui-presence-filter-exit);
+    pointer-events: none;
+    transition:
+      opacity var(--ui-presence-duration-enter) var(--ui-presence-ease-enter),
+      transform var(--ui-presence-duration-enter) var(--ui-presence-ease-enter),
+      filter var(--ui-presence-duration-enter) var(--ui-presence-ease-enter);
+    will-change: opacity, transform, filter;
+    perspective: var(--ui-presence-perspective);
+  }
+
+  .presence[data-state="entering"],
+  .presence[data-state="present"] {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(var(--ui-presence-scale-enter));
+    filter: var(--ui-presence-filter-enter);
+    pointer-events: auto;
+  }
+
+  .presence[data-state="exiting"] {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(var(--ui-presence-scale-exit));
+    filter: var(--ui-presence-filter-exit);
+    pointer-events: none;
+    transition-duration: var(--ui-presence-duration-exit);
+    transition-timing-function: var(--ui-presence-ease-exit);
+  }
+
+  :host([mode="fade"]) {
+    --ui-presence-scale-enter: 1;
+    --ui-presence-scale-exit: 1;
+  }
+
+  :host([mode="scale"]) {
+    --ui-presence-scale-enter: 1;
+    --ui-presence-scale-exit: 0.96;
+  }
+
+  :host([mode="slide-up"]) .presence[data-state="hidden"],
+  :host([mode="slide-up"]) .presence[data-state="exiting"] {
+    transform: translate3d(0, var(--ui-presence-slide-distance), 0) scale(var(--ui-presence-scale-exit));
+  }
+
+  :host([mode="slide-down"]) .presence[data-state="hidden"],
+  :host([mode="slide-down"]) .presence[data-state="exiting"] {
+    transform: translate3d(0, calc(var(--ui-presence-slide-distance) * -1), 0) scale(var(--ui-presence-scale-exit));
+  }
+
+  :host([mode="slide-left"]) .presence[data-state="hidden"],
+  :host([mode="slide-left"]) .presence[data-state="exiting"] {
+    transform: translate3d(var(--ui-presence-slide-distance), 0, 0) scale(var(--ui-presence-scale-exit));
+  }
+
+  :host([mode="slide-right"]) .presence[data-state="hidden"],
+  :host([mode="slide-right"]) .presence[data-state="exiting"] {
+    transform: translate3d(calc(var(--ui-presence-slide-distance) * -1), 0, 0) scale(var(--ui-presence-scale-exit));
+  }
+
+  :host([mode="blur"]) {
+    --ui-presence-filter-enter: none;
+    --ui-presence-filter-exit: blur(10px);
+    --ui-presence-scale-exit: 0.985;
+  }
+
+  :host([mode="flip"]) .presence {
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+  }
+
+  :host([mode="flip"]) .presence[data-state="hidden"],
+  :host([mode="flip"]) .presence[data-state="exiting"] {
+    transform: rotateX(-12deg) scale(0.985);
+  }
+
+  :host([size="sm"]) {
+    --ui-presence-slide-distance: 8px;
+    --ui-presence-duration-enter: 140ms;
+    --ui-presence-duration-exit: 120ms;
+  }
+
+  :host([size="lg"]) {
+    --ui-presence-slide-distance: 22px;
+    --ui-presence-duration-enter: 240ms;
+    --ui-presence-duration-exit: 200ms;
+  }
+
+  :host([variant="soft"]) {
+    --ui-presence-scale-exit: 0.98;
+  }
+
+  :host([variant="glass"]) {
+    --ui-presence-filter-enter: none;
+    --ui-presence-filter-exit: blur(8px);
+    --ui-presence-scale-exit: 0.99;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-presence-duration-enter: 150ms;
+    --ui-presence-duration-exit: 120ms;
+    --ui-presence-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+    --ui-presence-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  }
+
+  :host([headless]) .presence {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .presence {
+      transition: none !important;
+      transform: none !important;
+      filter: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .presence {
+      filter: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-presence-color: CanvasText;
+    }
+
+    .presence {
+      forced-color-adjust: none;
+      color: CanvasText;
+    }
+  }
+`;function a(e,t){if(e==null)return t;const s=String(e).toLowerCase();return s!=="false"&&s!=="0"}function r(e,t){if(e==null||e==="")return t;const s=Number(e);return Number.isFinite(s)?s:t}function u(e){return e==="scale"||e==="slide-up"||e==="slide-down"||e==="slide-left"||e==="slide-right"||e==="blur"||e==="flip"?e:"fade"}function p(e){return e==="sm"||e==="lg"?e:"md"}function h(e){return e==="soft"||e==="glass"||e==="contrast"?e:"default"}class c extends d.ElementBase{constructor(){super(),this._state="hidden",this._present=!1,this._headless=!1,this._hasEntered=!1,this._delayTimer=null,this._presenceEl=null,this._onTransitionEnd=this._onTransitionEnd.bind(this)}static get observedAttributes(){return["present","headless","mode","size","variant","keep-mounted","lazy","enter-duration","exit-duration","delay"]}connectedCallback(){super.connectedCallback(),this._syncFromAttributes(),this._syncStateWithPresence()}disconnectedCallback(){this._delayTimer!=null&&(window.clearTimeout(this._delayTimer),this._delayTimer=null),this._presenceEl&&(this._presenceEl.removeEventListener("transitionend",this._onTransitionEnd),this._presenceEl=null),super.disconnectedCallback()}attributeChangedCallback(t,s,i){s!==i&&(this._syncFromAttributes(),this._syncStateWithPresence(),this._syncNodePresentation())}show(){this.setAttribute("present","")}hide(){this.removeAttribute("present")}toggle(){this._present?this.hide():this.show()}_syncFromAttributes(){this._present=this.hasAttribute("present"),this._headless=this.hasAttribute("headless"),u(this.getAttribute("mode")),p(this.getAttribute("size")),h(this.getAttribute("variant"))}_syncStateWithPresence(){if(this._headless){this._setState("hidden");return}this._present?this._enter():this._exit()}_clearDelay(){this._delayTimer!=null&&(window.clearTimeout(this._delayTimer),this._delayTimer=null)}_enter(){if(this._clearDelay(),a(this.getAttribute("lazy"),!1)&&this._hasEntered){this._setState("present"),this._dispatch("after-enter");return}const s=Math.max(0,r(this.getAttribute("delay"),0));this._dispatch("before-enter");const i=()=>{this._setState("entering"),this._dispatch("enter"),requestAnimationFrame(()=>{this._setState("present"),this._hasEntered=!0})};if(s>0){this._setState("hidden"),this._delayTimer=window.setTimeout(()=>{this._delayTimer=null,i()},s);return}i()}_exit(){this._clearDelay(),this._state!=="hidden"&&(this._dispatch("before-exit"),this._setState("exiting"),this._dispatch("exit"))}_setState(t){if(this._state===t)return;this._state=t;const s=this._presenceEl||this.root.querySelector(".presence");this._presenceEl=s,s&&s.setAttribute("data-state",t),this._syncNodePresentation(),this.setAttribute("data-state",t)}_syncNodePresentation(){const t=this._presenceEl||this.root.querySelector(".presence");if(!t)return;this._presenceEl=t;const s=a(this.getAttribute("keep-mounted"),!1),i=Math.max(0,r(this.getAttribute("enter-duration"),180)),o=Math.max(0,r(this.getAttribute("exit-duration"),150)),n=this._state!=="hidden"||s;t.style.setProperty("--ui-presence-duration-enter",`${i}ms`),t.style.setProperty("--ui-presence-duration-exit",`${o}ms`),t.style.display=n?"block":"none"}_onTransitionEnd(t){if(t.target!==t.currentTarget)return;if(this._state==="entering"||this._state==="present"){this._setState("present"),this._dispatch("after-enter");return}if(this._state!=="exiting")return;a(this.getAttribute("keep-mounted"),!1)||this._setState("hidden"),this._dispatch("after-exit")}_dispatch(t){this.dispatchEvent(new CustomEvent(t,{detail:{state:this._state},bubbles:!0}))}render(){const t=a(this.getAttribute("keep-mounted"),!1),s=Math.max(0,r(this.getAttribute("enter-duration"),180)),i=Math.max(0,r(this.getAttribute("exit-duration"),150)),o=this._state!=="hidden"||t;this.setContent(`
+      <style>${l}</style>
+      <div
+        class="presence"
+        part="presence"
+        data-state="${this._state}"
+        style="display:${o?"block":"none"};--ui-presence-duration-enter:${s}ms;--ui-presence-duration-exit:${i}ms;"
+      >
+        <slot></slot>
+      </div>
+    `);const n=this.root.querySelector(".presence");n&&(this._presenceEl=n,n.removeEventListener("transitionend",this._onTransitionEnd),n.addEventListener("transitionend",this._onTransitionEnd),this._syncNodePresentation())}shouldRenderOnAttributeChange(t,s,i){return!1}}typeof customElements<"u"&&!customElements.get("ui-presence")&&customElements.define("ui-presence",c);exports.UIPresence=c;