@editora/ui-core 0.1.9 → 0.1.12

package/dist/selection-popup.cjs.js

@@ -0,0 +1,203 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("./ElementBase-1b301e7f.js"),S=`
+  :host {
+    --ui-selection-popup-z: 1280;
+    --ui-selection-popup-offset: 10px;
+    --ui-selection-popup-radius: 12px;
+    --ui-selection-popup-padding: 8px;
+    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-selection-popup-color: var(--ui-color-text, #0f172a);
+    --ui-selection-popup-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-selection-popup-border: 1px solid var(--ui-selection-popup-border-color);
+    --ui-selection-popup-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-selection-popup-accent: var(--ui-color-primary, #2563eb);
+    --ui-selection-popup-shadow:
+      none;
+    color-scheme: light dark;
+    position: fixed;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+    z-index: var(--ui-selection-popup-z);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  :host([open]) {
+    display: block;
+  }
+
+  .popup {
+    position: fixed;
+    left: 0;
+    top: 0;
+    pointer-events: auto;
+    min-inline-size: min(180px, calc(100vw - 16px));
+    max-inline-size: min(420px, calc(100vw - 16px));
+    border: var(--ui-selection-popup-border);
+    border-radius: var(--ui-selection-popup-radius);
+    background: var(--ui-selection-popup-bg);
+    color: var(--ui-selection-popup-color);
+    box-shadow: var(--ui-selection-popup-shadow);
+    padding: var(--ui-selection-popup-padding);
+    transform:
+      translate3d(var(--ui-selection-popup-x, 0px), var(--ui-selection-popup-y, 0px), 0)
+      scale(0.96);
+    transform-origin: var(--ui-selection-popup-origin-x, 50%) var(--ui-selection-popup-origin-y, 50%);
+    opacity: 0;
+    transition: transform 150ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 140ms ease;
+    backdrop-filter: saturate(1.08) blur(12px);
+  }
+
+  :host([open]) .popup {
+    opacity: 1;
+    transform:
+      translate3d(var(--ui-selection-popup-x, 0px), var(--ui-selection-popup-y, 0px), 0)
+      scale(1);
+  }
+
+  .content {
+    display: grid;
+    gap: 6px;
+  }
+
+  .arrow {
+    position: absolute;
+    inline-size: 10px;
+    block-size: 10px;
+    background: inherit;
+    border-left: var(--ui-selection-popup-border);
+    border-top: var(--ui-selection-popup-border);
+    display: none;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  :host([arrow]) .arrow {
+    display: block;
+  }
+
+  .popup[data-placement="top"] .arrow {
+    left: var(--ui-selection-popup-arrow-x, 50%);
+    top: calc(100% - 1px);
+    transform: translate(-50%, -50%) rotate(225deg);
+  }
+
+  .popup[data-placement="bottom"] .arrow {
+    left: var(--ui-selection-popup-arrow-x, 50%);
+    top: 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  .popup[data-placement="left"] .arrow {
+    left: calc(100% - 1px);
+    top: var(--ui-selection-popup-arrow-y, 50%);
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+
+  .popup[data-placement="right"] .arrow {
+    left: 0;
+    top: var(--ui-selection-popup-arrow-y, 50%);
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+
+  :host([strategy="absolute"]) .popup {
+    position: absolute;
+  }
+
+  :host([size="sm"]) {
+    --ui-selection-popup-padding: 6px;
+    --ui-selection-popup-radius: 10px;
+  }
+
+  :host([size="lg"]) {
+    --ui-selection-popup-padding: 10px;
+    --ui-selection-popup-radius: 14px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-selection-popup-bg: var(--ui-color-surface, #ffffff);
+    --ui-selection-popup-shadow:
+      0 8px 20px rgba(2, 6, 23, 0.14),
+      0 20px 42px rgba(2, 6, 23, 0.1);
+  }
+
+  :host([variant="soft"]) {
+    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-selection-popup-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-selection-popup-border-color: color-mix(in srgb, var(--ui-selection-popup-accent) 28%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="glass"]) {
+    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 70%, transparent);
+    --ui-selection-popup-shadow:
+      0 14px 36px rgba(2, 6, 23, 0.2),
+      0 34px 62px rgba(2, 6, 23, 0.16);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-selection-popup-bg: #0f172a;
+    --ui-selection-popup-color: #e2e8f0;
+    --ui-selection-popup-border-color: #334155;
+    --ui-selection-popup-focus: #93c5fd;
+    --ui-selection-popup-shadow:
+      0 16px 42px rgba(2, 6, 23, 0.42),
+      0 34px 72px rgba(2, 6, 23, 0.38);
+  }
+
+  :host([tone="success"]) {
+    --ui-selection-popup-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-selection-popup-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-selection-popup-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([radius="none"]) {
+    --ui-selection-popup-radius: 0px;
+  }
+
+  :host([radius="large"]) {
+    --ui-selection-popup-radius: 18px;
+  }
+
+  :host([radius="full"]) {
+    --ui-selection-popup-radius: 999px;
+  }
+
+  :host([headless]) .popup {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .popup {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-selection-popup-border: 2px solid var(--ui-selection-popup-border-color);
+      --ui-selection-popup-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-selection-popup-bg: Canvas;
+      --ui-selection-popup-color: CanvasText;
+      --ui-selection-popup-border-color: CanvasText;
+      --ui-selection-popup-focus: Highlight;
+      --ui-selection-popup-shadow: none;
+    }
+  }
+`;function M(p,e){if(p==null||p==="")return e;const t=Number(p);return Number.isFinite(t)?t:e}function y(p,e=!1){if(p==null)return e;const t=String(p).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function f(p,e,t){return Math.min(t,Math.max(e,p))}class C extends E.ElementBase{constructor(){super(),this._anchor=null,this._popup=null,this._raf=null,this._previousFocused=null,this._resizeObserver=null,this._mutationObserver=null,this._globalListenersBound=!1,this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onWindowChange=this._onWindowChange.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","anchor-id","headless","placement","offset","strategy","arrow","variant","tone","radius","size","close-on-outside","close-on-escape"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._syncAnchorFromAttribute(),this._syncOpenLifecycle(!1),this._schedulePosition()}disconnectedCallback(){this._unbindGlobalListeners(),this._teardownObservers(),this.root.removeEventListener("slotchange",this._onSlotChange),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null),super.disconnectedCallback()}attributeChangedCallback(e,t,o){t!==o&&(e==="anchor-id"&&this._syncAnchorFromAttribute(),e==="open"&&(this._syncOpenLifecycle(t!=null),this.dispatchEvent(new CustomEvent(o!=null?"open":"close",{bubbles:!0,composed:!0}))),this.isConnected&&this.requestRender(),this._schedulePosition())}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}openFor(e){if(!e)return;const t=document.getElementById(e);t&&(this._anchor=t,this.setAttribute("anchor-id",e),this.setAttribute("open",""),this._schedulePosition())}close(){this.removeAttribute("open")}_syncAnchorFromAttribute(){const e=this.getAttribute("anchor-id");if(!e){this._anchor=null;return}this._anchor=document.getElementById(e)}_syncOpenLifecycle(e){const t=this.open;if(!e&&t&&(this._previousFocused=document.activeElement||null,this._bindGlobalListeners(),this._ensureObservers(),this._schedulePosition()),e&&!t){this._unbindGlobalListeners(),this._teardownObservers(),this._raf!=null&&(cancelAnimationFrame(this._raf),this._raf=null);const o=this._anchor||this._previousFocused;if(o&&typeof o.focus=="function")try{o.focus({preventScroll:!0})}catch{o.focus()}this._previousFocused=null}}_onWindowChange(){this.open&&this._schedulePosition()}_onSlotChange(){this.open&&this._schedulePosition()}_onDocumentPointerDown(e){if(!this.open||!y(this.getAttribute("close-on-outside"),!0))return;const t=e.composedPath();t.includes(this)||this._anchor&&t.includes(this._anchor)||this.close()}_onDocumentKeyDown(e){this.open&&y(this.getAttribute("close-on-escape"),!0)&&e.key==="Escape"&&(e.stopPropagation(),this.close())}_schedulePosition(){this.open&&(this._raf!=null&&cancelAnimationFrame(this._raf),this._raf=requestAnimationFrame(()=>{this._raf=null,this._position()}))}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),document.addEventListener("keydown",this._onDocumentKeyDown,!0),window.addEventListener("scroll",this._onWindowChange,!0),window.addEventListener("resize",this._onWindowChange),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),document.removeEventListener("keydown",this._onDocumentKeyDown,!0),window.removeEventListener("scroll",this._onWindowChange,!0),window.removeEventListener("resize",this._onWindowChange),this._globalListenersBound=!1)}_ensureObservers(){this._resizeObserver==null&&typeof ResizeObserver<"u"&&(this._resizeObserver=new ResizeObserver(()=>this._schedulePosition()),this._resizeObserver.observe(this)),this._mutationObserver==null&&typeof MutationObserver<"u"&&(this._mutationObserver=new MutationObserver(()=>this._schedulePosition()),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0}))}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_candidateFor(e,t,o,s){return e==="top"?{placement:e,x:t.left+t.width/2-o.width/2,y:t.top-o.height-s}:e==="bottom"?{placement:e,x:t.left+t.width/2-o.width/2,y:t.bottom+s}:e==="left"?{placement:e,x:t.left-o.width-s,y:t.top+t.height/2-o.height/2}:{placement:e,x:t.right+s,y:t.top+t.height/2-o.height/2}}_overflowScore(e,t,o,s,u){const r=window.innerWidth-u,a=window.innerHeight-u,i=e+o,n=t+s,h=Math.max(0,u-e),b=Math.max(0,u-t),m=Math.max(0,i-r),l=Math.max(0,n-a);return h+b+m+l}_position(){const e=this._popup;if(!e||!this.open||!this._anchor)return;if(!document.body.contains(this._anchor)){this.close();return}const t=this._anchor.getBoundingClientRect();if(t.width===0&&t.height===0)return;const o=e.getBoundingClientRect();if(o.width===0||o.height===0)return;const s=this.getAttribute("placement")||"top",u=M(this.getAttribute("offset"),10),r=8,a=[],i=c=>{a.includes(c)||a.push(c)};s==="auto"?(i("top"),i("bottom"),i("right"),i("left")):(i(s),i({top:"bottom",bottom:"top",left:"right",right:"left"}[s]),i("top"),i("bottom"),i("right"),i("left"));let n=this._candidateFor(a[0],t,o,u),h=this._overflowScore(n.x,n.y,o.width,o.height,r);for(const c of a){const v=this._candidateFor(c,t,o,u),_=this._overflowScore(v.x,v.y,o.width,o.height,r);if(_<h&&(n=v,h=_,_===0))break}const b=Math.max(r,window.innerWidth-o.width-r),m=Math.max(r,window.innerHeight-o.height-r);let l=f(n.x,r,b),d=f(n.y,r,m);const g=(this.getAttribute("strategy")||"fixed")==="absolute";g&&(l+=window.scrollX||0,d+=window.scrollY||0),e.style.setProperty("--ui-selection-popup-x",`${Math.round(l)}px`),e.style.setProperty("--ui-selection-popup-y",`${Math.round(d)}px`),e.dataset.placement=n.placement;const O=t.left+t.width/2,P=t.top+t.height/2,L=g?l-(window.scrollX||0):l,A=g?d-(window.scrollY||0):d,w=f(O-L,12,o.width-12),x=f(P-A,12,o.height-12);e.style.setProperty("--ui-selection-popup-arrow-x",`${Math.round(w)}px`),e.style.setProperty("--ui-selection-popup-arrow-y",`${Math.round(x)}px`);const z=n.placement==="left"?"100%":n.placement==="right"?"0%":`${Math.round(w)}px`,D=n.placement==="top"?"100%":n.placement==="bottom"?"0%":`${Math.round(x)}px`;e.style.setProperty("--ui-selection-popup-origin-x",z),e.style.setProperty("--ui-selection-popup-origin-y",D)}render(){this.setContent(`
+      <style>${S}</style>
+      <div class="popup" part="popup" role="dialog" aria-label="Selection popup">
+        <span class="arrow" part="arrow" aria-hidden="true"></span>
+        <div class="content" part="content">
+          <slot name="content"></slot>
+          <slot></slot>
+        </div>
+      </div>
+    `),this._popup=this.root.querySelector(".popup"),this._schedulePosition()}}typeof customElements<"u"&&!customElements.get("ui-selection-popup")&&customElements.define("ui-selection-popup",C);exports.UISelectionPopup=C;

package/dist/selection-popup.esm.js

@@ -0,0 +1,392 @@
+import { E as D } from "./ElementBase-909688f3.mjs";
+const E = `
+  :host {
+    --ui-selection-popup-z: 1280;
+    --ui-selection-popup-offset: 10px;
+    --ui-selection-popup-radius: 12px;
+    --ui-selection-popup-padding: 8px;
+    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-selection-popup-color: var(--ui-color-text, #0f172a);
+    --ui-selection-popup-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-selection-popup-border: 1px solid var(--ui-selection-popup-border-color);
+    --ui-selection-popup-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-selection-popup-accent: var(--ui-color-primary, #2563eb);
+    --ui-selection-popup-shadow:
+      none;
+    color-scheme: light dark;
+    position: fixed;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+    z-index: var(--ui-selection-popup-z);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  :host([open]) {
+    display: block;
+  }
+
+  .popup {
+    position: fixed;
+    left: 0;
+    top: 0;
+    pointer-events: auto;
+    min-inline-size: min(180px, calc(100vw - 16px));
+    max-inline-size: min(420px, calc(100vw - 16px));
+    border: var(--ui-selection-popup-border);
+    border-radius: var(--ui-selection-popup-radius);
+    background: var(--ui-selection-popup-bg);
+    color: var(--ui-selection-popup-color);
+    box-shadow: var(--ui-selection-popup-shadow);
+    padding: var(--ui-selection-popup-padding);
+    transform:
+      translate3d(var(--ui-selection-popup-x, 0px), var(--ui-selection-popup-y, 0px), 0)
+      scale(0.96);
+    transform-origin: var(--ui-selection-popup-origin-x, 50%) var(--ui-selection-popup-origin-y, 50%);
+    opacity: 0;
+    transition: transform 150ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 140ms ease;
+    backdrop-filter: saturate(1.08) blur(12px);
+  }
+
+  :host([open]) .popup {
+    opacity: 1;
+    transform:
+      translate3d(var(--ui-selection-popup-x, 0px), var(--ui-selection-popup-y, 0px), 0)
+      scale(1);
+  }
+
+  .content {
+    display: grid;
+    gap: 6px;
+  }
+
+  .arrow {
+    position: absolute;
+    inline-size: 10px;
+    block-size: 10px;
+    background: inherit;
+    border-left: var(--ui-selection-popup-border);
+    border-top: var(--ui-selection-popup-border);
+    display: none;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  :host([arrow]) .arrow {
+    display: block;
+  }
+
+  .popup[data-placement="top"] .arrow {
+    left: var(--ui-selection-popup-arrow-x, 50%);
+    top: calc(100% - 1px);
+    transform: translate(-50%, -50%) rotate(225deg);
+  }
+
+  .popup[data-placement="bottom"] .arrow {
+    left: var(--ui-selection-popup-arrow-x, 50%);
+    top: 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  .popup[data-placement="left"] .arrow {
+    left: calc(100% - 1px);
+    top: var(--ui-selection-popup-arrow-y, 50%);
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+
+  .popup[data-placement="right"] .arrow {
+    left: 0;
+    top: var(--ui-selection-popup-arrow-y, 50%);
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+
+  :host([strategy="absolute"]) .popup {
+    position: absolute;
+  }
+
+  :host([size="sm"]) {
+    --ui-selection-popup-padding: 6px;
+    --ui-selection-popup-radius: 10px;
+  }
+
+  :host([size="lg"]) {
+    --ui-selection-popup-padding: 10px;
+    --ui-selection-popup-radius: 14px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-selection-popup-bg: var(--ui-color-surface, #ffffff);
+    --ui-selection-popup-shadow:
+      0 8px 20px rgba(2, 6, 23, 0.14),
+      0 20px 42px rgba(2, 6, 23, 0.1);
+  }
+
+  :host([variant="soft"]) {
+    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-selection-popup-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-selection-popup-border-color: color-mix(in srgb, var(--ui-selection-popup-accent) 28%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="glass"]) {
+    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 70%, transparent);
+    --ui-selection-popup-shadow:
+      0 14px 36px rgba(2, 6, 23, 0.2),
+      0 34px 62px rgba(2, 6, 23, 0.16);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-selection-popup-bg: #0f172a;
+    --ui-selection-popup-color: #e2e8f0;
+    --ui-selection-popup-border-color: #334155;
+    --ui-selection-popup-focus: #93c5fd;
+    --ui-selection-popup-shadow:
+      0 16px 42px rgba(2, 6, 23, 0.42),
+      0 34px 72px rgba(2, 6, 23, 0.38);
+  }
+
+  :host([tone="success"]) {
+    --ui-selection-popup-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-selection-popup-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-selection-popup-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([radius="none"]) {
+    --ui-selection-popup-radius: 0px;
+  }
+
+  :host([radius="large"]) {
+    --ui-selection-popup-radius: 18px;
+  }
+
+  :host([radius="full"]) {
+    --ui-selection-popup-radius: 999px;
+  }
+
+  :host([headless]) .popup {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .popup {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-selection-popup-border: 2px solid var(--ui-selection-popup-border-color);
+      --ui-selection-popup-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-selection-popup-bg: Canvas;
+      --ui-selection-popup-color: CanvasText;
+      --ui-selection-popup-border-color: CanvasText;
+      --ui-selection-popup-focus: Highlight;
+      --ui-selection-popup-shadow: none;
+    }
+  }
+`;
+function M(p, e) {
+  if (p == null || p === "")
+    return e;
+  const t = Number(p);
+  return Number.isFinite(t) ? t : e;
+}
+function y(p, e = !1) {
+  if (p == null)
+    return e;
+  const t = String(p).toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
+}
+function f(p, e, t) {
+  return Math.min(t, Math.max(e, p));
+}
+class S extends D {
+  constructor() {
+    super(), this._anchor = null, this._popup = null, this._raf = null, this._previousFocused = null, this._resizeObserver = null, this._mutationObserver = null, this._globalListenersBound = !1, this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this), this._onWindowChange = this._onWindowChange.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "anchor-id",
+      "headless",
+      "placement",
+      "offset",
+      "strategy",
+      "arrow",
+      "variant",
+      "tone",
+      "radius",
+      "size",
+      "close-on-outside",
+      "close-on-escape"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("slotchange", this._onSlotChange), this._syncAnchorFromAttribute(), this._syncOpenLifecycle(!1), this._schedulePosition();
+  }
+  disconnectedCallback() {
+    this._unbindGlobalListeners(), this._teardownObservers(), this.root.removeEventListener("slotchange", this._onSlotChange), this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, o) {
+    t !== o && (e === "anchor-id" && this._syncAnchorFromAttribute(), e === "open" && (this._syncOpenLifecycle(t != null), this.dispatchEvent(
+      new CustomEvent(o != null ? "open" : "close", {
+        bubbles: !0,
+        composed: !0
+      })
+    )), this.isConnected && this.requestRender(), this._schedulePosition());
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(e) {
+    e ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  openFor(e) {
+    if (!e)
+      return;
+    const t = document.getElementById(e);
+    t && (this._anchor = t, this.setAttribute("anchor-id", e), this.setAttribute("open", ""), this._schedulePosition());
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  _syncAnchorFromAttribute() {
+    const e = this.getAttribute("anchor-id");
+    if (!e) {
+      this._anchor = null;
+      return;
+    }
+    this._anchor = document.getElementById(e);
+  }
+  _syncOpenLifecycle(e) {
+    const t = this.open;
+    if (!e && t && (this._previousFocused = document.activeElement || null, this._bindGlobalListeners(), this._ensureObservers(), this._schedulePosition()), e && !t) {
+      this._unbindGlobalListeners(), this._teardownObservers(), this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null);
+      const o = this._anchor || this._previousFocused;
+      if (o && typeof o.focus == "function")
+        try {
+          o.focus({ preventScroll: !0 });
+        } catch {
+          o.focus();
+        }
+      this._previousFocused = null;
+    }
+  }
+  _onWindowChange() {
+    this.open && this._schedulePosition();
+  }
+  _onSlotChange() {
+    this.open && this._schedulePosition();
+  }
+  _onDocumentPointerDown(e) {
+    if (!this.open || !y(this.getAttribute("close-on-outside"), !0))
+      return;
+    const t = e.composedPath();
+    t.includes(this) || this._anchor && t.includes(this._anchor) || this.close();
+  }
+  _onDocumentKeyDown(e) {
+    this.open && y(this.getAttribute("close-on-escape"), !0) && e.key === "Escape" && (e.stopPropagation(), this.close());
+  }
+  _schedulePosition() {
+    this.open && (this._raf != null && cancelAnimationFrame(this._raf), this._raf = requestAnimationFrame(() => {
+      this._raf = null, this._position();
+    }));
+  }
+  _bindGlobalListeners() {
+    this._globalListenersBound || (document.addEventListener("pointerdown", this._onDocumentPointerDown, !0), document.addEventListener("keydown", this._onDocumentKeyDown, !0), window.addEventListener("scroll", this._onWindowChange, !0), window.addEventListener("resize", this._onWindowChange), this._globalListenersBound = !0);
+  }
+  _unbindGlobalListeners() {
+    this._globalListenersBound && (document.removeEventListener("pointerdown", this._onDocumentPointerDown, !0), document.removeEventListener("keydown", this._onDocumentKeyDown, !0), window.removeEventListener("scroll", this._onWindowChange, !0), window.removeEventListener("resize", this._onWindowChange), this._globalListenersBound = !1);
+  }
+  _ensureObservers() {
+    this._resizeObserver == null && typeof ResizeObserver < "u" && (this._resizeObserver = new ResizeObserver(() => this._schedulePosition()), this._resizeObserver.observe(this)), this._mutationObserver == null && typeof MutationObserver < "u" && (this._mutationObserver = new MutationObserver(() => this._schedulePosition()), this._mutationObserver.observe(this, { childList: !0, subtree: !0, characterData: !0 }));
+  }
+  _teardownObservers() {
+    this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null), this._mutationObserver && (this._mutationObserver.disconnect(), this._mutationObserver = null);
+  }
+  _candidateFor(e, t, o, s) {
+    return e === "top" ? {
+      placement: e,
+      x: t.left + t.width / 2 - o.width / 2,
+      y: t.top - o.height - s
+    } : e === "bottom" ? {
+      placement: e,
+      x: t.left + t.width / 2 - o.width / 2,
+      y: t.bottom + s
+    } : e === "left" ? {
+      placement: e,
+      x: t.left - o.width - s,
+      y: t.top + t.height / 2 - o.height / 2
+    } : {
+      placement: e,
+      x: t.right + s,
+      y: t.top + t.height / 2 - o.height / 2
+    };
+  }
+  _overflowScore(e, t, o, s, u) {
+    const r = window.innerWidth - u, a = window.innerHeight - u, i = e + o, n = t + s, h = Math.max(0, u - e), b = Math.max(0, u - t), m = Math.max(0, i - r), l = Math.max(0, n - a);
+    return h + b + m + l;
+  }
+  _position() {
+    const e = this._popup;
+    if (!e || !this.open || !this._anchor)
+      return;
+    if (!document.body.contains(this._anchor)) {
+      this.close();
+      return;
+    }
+    const t = this._anchor.getBoundingClientRect();
+    if (t.width === 0 && t.height === 0)
+      return;
+    const o = e.getBoundingClientRect();
+    if (o.width === 0 || o.height === 0)
+      return;
+    const s = this.getAttribute("placement") || "top", u = M(this.getAttribute("offset"), 10), r = 8, a = [], i = (c) => {
+      a.includes(c) || a.push(c);
+    };
+    s === "auto" ? (i("top"), i("bottom"), i("right"), i("left")) : (i(s), i({
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    }[s]), i("top"), i("bottom"), i("right"), i("left"));
+    let n = this._candidateFor(a[0], t, o, u), h = this._overflowScore(n.x, n.y, o.width, o.height, r);
+    for (const c of a) {
+      const v = this._candidateFor(c, t, o, u), _ = this._overflowScore(v.x, v.y, o.width, o.height, r);
+      if (_ < h && (n = v, h = _, _ === 0))
+        break;
+    }
+    const b = Math.max(r, window.innerWidth - o.width - r), m = Math.max(r, window.innerHeight - o.height - r);
+    let l = f(n.x, r, b), d = f(n.y, r, m);
+    const g = (this.getAttribute("strategy") || "fixed") === "absolute";
+    g && (l += window.scrollX || 0, d += window.scrollY || 0), e.style.setProperty("--ui-selection-popup-x", `${Math.round(l)}px`), e.style.setProperty("--ui-selection-popup-y", `${Math.round(d)}px`), e.dataset.placement = n.placement;
+    const C = t.left + t.width / 2, L = t.top + t.height / 2, O = g ? l - (window.scrollX || 0) : l, P = g ? d - (window.scrollY || 0) : d, w = f(C - O, 12, o.width - 12), x = f(L - P, 12, o.height - 12);
+    e.style.setProperty("--ui-selection-popup-arrow-x", `${Math.round(w)}px`), e.style.setProperty("--ui-selection-popup-arrow-y", `${Math.round(x)}px`);
+    const A = n.placement === "left" ? "100%" : n.placement === "right" ? "0%" : `${Math.round(w)}px`, z = n.placement === "top" ? "100%" : n.placement === "bottom" ? "0%" : `${Math.round(x)}px`;
+    e.style.setProperty("--ui-selection-popup-origin-x", A), e.style.setProperty("--ui-selection-popup-origin-y", z);
+  }
+  render() {
+    this.setContent(`
+      <style>${E}</style>
+      <div class="popup" part="popup" role="dialog" aria-label="Selection popup">
+        <span class="arrow" part="arrow" aria-hidden="true"></span>
+        <div class="content" part="content">
+          <slot name="content"></slot>
+          <slot></slot>
+        </div>
+      </div>
+    `), this._popup = this.root.querySelector(".popup"), this._schedulePosition();
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-selection-popup") && customElements.define("ui-selection-popup", S);
+export {
+  S as UISelectionPopup
+};