@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.1

package/dist/elements/popover.js

@@ -0,0 +1,840 @@
+import { base, findFocusable } from "./shared.js";
+import { getFloatingPosition } from "./floating-position.js";
+function intersectBoundaryRects(rects) {
+    if (!rects.length)
+        return undefined;
+    const left = Math.max(...rects.map(rect => rect.left));
+    const top = Math.max(...rects.map(rect => rect.top));
+    const right = Math.max(left, Math.min(...rects.map(rect => rect.right)));
+    const bottom = Math.max(top, Math.min(...rects.map(rect => rect.bottom)));
+    return { left, top, right, bottom };
+}
+function viewportBoundaryRect() { return { left: 0, top: 0, right: innerWidth, bottom: innerHeight }; }
+function parentElement(element) {
+    if (element.parentElement)
+        return element.parentElement;
+    const root = element.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+}
+function scrollBoundary(element, clippingOnly) {
+    const rects = clippingOnly ? [viewportBoundaryRect()] : [];
+    let current = parentElement(element);
+    while (current) {
+        const view = current.ownerDocument.defaultView ?? window;
+        const style = view.getComputedStyle(current);
+        const clipX = /^(auto|scroll|hidden|clip|overlay)$/.test(style.overflowX);
+        const clipY = /^(auto|scroll|hidden|clip|overlay)$/.test(style.overflowY);
+        const isScrollParent = /^(auto|scroll|hidden|overlay)$/.test(style.overflowX) || /^(auto|scroll|hidden|overlay)$/.test(style.overflowY);
+        if (clippingOnly ? clipX || clipY : isScrollParent) {
+            const bounds = current.getBoundingClientRect();
+            const left = bounds.left + current.clientLeft;
+            const top = bounds.top + current.clientTop;
+            if (!clippingOnly)
+                return { left, top, right: left + current.clientWidth, bottom: top + current.clientHeight };
+            rects.push({
+                left: clipX ? left : 0,
+                right: clipX ? left + current.clientWidth : innerWidth,
+                top: clipY ? top : 0,
+                bottom: clipY ? top + current.clientHeight : innerHeight
+            });
+        }
+        current = parentElement(current);
+    }
+    return clippingOnly ? intersectBoundaryRects(rects) : undefined;
+}
+function getBoundaryRect(boundary, contextElement) {
+    if (!boundary || boundary === "window")
+        return undefined;
+    if (boundary === "clippingParents" || boundary === "scrollParent")
+        return contextElement ? scrollBoundary(contextElement, boundary === "clippingParents") : undefined;
+    if (Array.isArray(boundary))
+        return intersectBoundaryRects(boundary.map(element => element.getBoundingClientRect()));
+    const element = boundary;
+    if (typeof element.getBoundingClientRect === "function")
+        return element.getBoundingClientRect();
+    const rect = boundary;
+    return { left: rect.x, top: rect.y, right: rect.x + rect.width, bottom: rect.y + rect.height };
+}
+const nextId = (() => { let value = 0; return () => `spui-popover-${++value}`; })();
+const inertFocusStates = new WeakMap();
+function syncInertFocusState(document, host, triggers, active, surface) {
+    let state = inertFocusStates.get(document);
+    if (active) {
+        if (!state) {
+            state = { overlays: new Map(), baseline: new Map(), applied: new Set() };
+            inertFocusStates.set(document, state);
+        }
+        state.overlays.set(host, { triggers, surface });
+    }
+    else if (state)
+        state.overlays.delete(host);
+    if (!state)
+        return;
+    for (const element of state.applied)
+        element.inert = state.baseline.get(element) ?? false;
+    state.applied.clear();
+    const hosts = new Set(state.overlays.keys());
+    const surfaces = new Set([...state.overlays.values()].flatMap(overlay => overlay.surface ? [overlay.surface] : []));
+    const inert = (element) => {
+        if (!state.baseline.has(element))
+            state.baseline.set(element, element.inert);
+        state.applied.add(element);
+        element.inert = true;
+    };
+    const visit = (element) => {
+        if (hosts.has(element) || surfaces.has(element))
+            return;
+        if ([...hosts, ...surfaces].some(overlayElement => element.contains(overlayElement))) {
+            for (const child of [...element.children])
+                if (child instanceof HTMLElement)
+                    visit(child);
+            return;
+        }
+        inert(element);
+    };
+    for (const child of [...document.body.children])
+        if (child instanceof HTMLElement)
+            visit(child);
+    for (const overlay of state.overlays.values())
+        for (const trigger of overlay.triggers)
+            inert(trigger);
+    if (!state.overlays.size) {
+        for (const [element, previous] of state.baseline)
+            element.inert = previous;
+        state.baseline.clear();
+        inertFocusStates.delete(document);
+    }
+}
+function definePopoverPart(tag, styles) {
+    if (customElements.get(tag))
+        return;
+    class SpuiPopoverPart extends HTMLElement {
+        connectedCallback() {
+            if (!this.hasAttribute("slot") && tag === "spui-popover-trigger")
+                this.slot = "trigger";
+            if (this.shadowRoot)
+                return;
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{${styles}}`;
+            shadow.append(style, document.createElement("slot"));
+        }
+    }
+    customElements.define(tag, SpuiPopoverPart);
+}
+export function definePopoverTrigger() { definePopoverPart("spui-popover-trigger", "display:contents"); }
+export function definePopoverSurface() { definePopoverPart("spui-popover-surface", "display:block;min-width:0;color:inherit"); }
+export function definePopover() {
+    definePopoverTrigger();
+    definePopoverSurface();
+    if (customElements.get("spui-popover"))
+        return;
+    class SpuiPopover extends HTMLElement {
+        static observedAttributes = ["open", "default-open", "motion", "placement", "positioning", "align", "offset", "label", "inline", "trap-focus", "inert-trap-focus", "legacy-trap-focus", "unstable-disable-auto-focus", "arrow", "appearance", "size", "close-on-scroll", "close-on-iframe-focus", "open-on-context", "open-on-hover", "mouse-leave-delay"];
+        events;
+        observer;
+        surfaceObserver;
+        resizeObserver;
+        panel;
+        internalPanel;
+        externalPanel;
+        surfaceEvents;
+        trigger;
+        triggerState;
+        isOpen = false;
+        focusEdge = "first";
+        positioningValue;
+        positioningTarget;
+        contextPoint;
+        hoverTimer;
+        iframeBlurTimer;
+        exitGeneration = 0;
+        get trapFocusEnabled() { return this.hasAttribute("trap-focus"); }
+        get inertTrapFocusEnabled() {
+            const inert = this.getAttribute("inert-trap-focus");
+            if (inert !== null)
+                return inert !== "false";
+            const legacy = this.getAttribute("legacy-trap-focus");
+            return legacy === "false";
+        }
+        get positioning() { return this.positioningValue ?? this.getAttribute("positioning") ?? this.getAttribute("placement") ?? (this.hasAttribute("open-on-context") ? "above" : "bottom"); }
+        set positioning(value) { this.positioningValue = value; this.syncPositionObserver(); this.position(); }
+        get open() { return this.isOpen; }
+        set open(value) { this.setOpen(Boolean(value)); }
+        get inline() { return this.hasAttribute("inline"); }
+        set inline(value) { this.toggleAttribute("inline", Boolean(value)); }
+        set popoverSurface(value) {
+            const previousPanel = this.panel;
+            this.surfaceEvents?.abort();
+            this.surfaceObserver?.disconnect();
+            this.externalPanel = value ?? undefined;
+            this.panel = this.externalPanel ?? this.internalPanel;
+            if (previousPanel && previousPanel !== this.panel) {
+                previousPanel.hidePopover?.();
+                previousPanel.hidden = true;
+            }
+            if (this.panel) {
+                this.panel.id ||= nextId();
+                this.panel.setAttribute("popover", "manual");
+                this.panel.tabIndex = -1;
+            }
+            if (this.isConnected && this.externalPanel) {
+                this.surfaceEvents = new AbortController();
+                const options = { signal: this.surfaceEvents.signal };
+                this.externalPanel.addEventListener("click", this.onClick, options);
+                this.externalPanel.addEventListener("spui-popover-request-close", this.onRequestClose, options);
+                this.externalPanel.addEventListener("keydown", this.onKeyDown, options);
+                this.externalPanel.addEventListener("focusout", this.onFocusOut, options);
+                this.externalPanel.addEventListener("pointerenter", this.onHoverEnter, options);
+                this.externalPanel.addEventListener("pointerleave", this.onHoverLeave, options);
+                this.surfaceObserver = new MutationObserver(() => this.syncLabel());
+                this.surfaceObserver.observe(this.externalPanel, { childList: true, subtree: true, attributes: true, attributeFilter: ["slot", "id"] });
+            }
+            if (this.isConnected) {
+                this.syncLabel();
+                this.syncPositionObserver();
+                this.syncVisibility();
+            }
+        }
+        get popoverSurface() { return this.externalPanel ?? null; }
+        syncOpen(value) { this.setOpen(Boolean(value), true, false); }
+        show() { this.setOpen(true); }
+        hide() { this.setOpen(false); }
+        connectedCallback() {
+            this.style.display ||= "contents";
+            if (!this.shadowRoot)
+                this.render();
+            this.events?.abort();
+            this.events = new AbortController();
+            const options = { signal: this.events.signal };
+            this.addEventListener("click", this.onClick, options);
+            this.addEventListener("spui-popover-request-close", this.onRequestClose, options);
+            this.addEventListener("contextmenu", this.onContextMenu, options);
+            this.addEventListener("keydown", this.onKeyDown, options);
+            this.addEventListener("focusout", this.onFocusOut, options);
+            document.addEventListener("pointerdown", this.onOutsidePointerDown, { ...options, capture: true });
+            window.addEventListener("blur", this.onWindowBlur, options);
+            window.addEventListener("resize", this.position, options);
+            window.addEventListener("scroll", this.onScroll, { ...options, capture: true });
+            this.shadowRoot?.querySelector("slot[name=trigger]")?.addEventListener("slotchange", this.syncTrigger, options);
+            this.shadowRoot?.querySelector("slot[name=title]")?.addEventListener("slotchange", this.syncLabel, options);
+            this.observer = new MutationObserver(() => { this.syncTrigger(); this.syncLabel(); });
+            this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["disable-button-enhancement"] });
+            this.internalPanel = this.shadowRoot?.querySelector(".surface");
+            this.panel = this.externalPanel ?? this.internalPanel;
+            this.panel?.addEventListener("pointerenter", this.onHoverEnter, options);
+            this.panel?.addEventListener("pointerleave", this.onHoverLeave, options);
+            this.resizeObserver = new ResizeObserver(() => { if (!this.positioningOptions?.disableUpdateOnResize)
+                this.position(); });
+            this.syncPositionObserver();
+            this.isOpen = this.hasAttribute("open") || this.hasAttribute("default-open");
+            this.syncTrigger();
+            this.syncLabel();
+            this.syncVisibility();
+        }
+        disconnectedCallback() {
+            this.observer?.disconnect();
+            this.surfaceObserver?.disconnect();
+            this.resizeObserver?.disconnect();
+            this.events?.abort();
+            this.surfaceEvents?.abort();
+            const positioningRef = this.positioningOptions?.positioningRef;
+            if (typeof positioningRef === "function")
+                positioningRef(null);
+            else if (positioningRef)
+                positioningRef.current = null;
+            if (this.hoverTimer !== undefined)
+                clearTimeout(this.hoverTimer);
+            if (this.iframeBlurTimer !== undefined)
+                clearTimeout(this.iframeBlurTimer);
+            this.restoreTrigger();
+            if (this.panel?.hasAttribute("popover"))
+                this.panel.hidePopover?.();
+            syncInertFocusState(this.ownerDocument, this, [], false);
+        }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if (name === "open") {
+                const next = this.hasAttribute("open");
+                if (next !== this.isOpen) {
+                    this.isOpen = next;
+                    this.syncVisibility();
+                    this.emitOpenChange();
+                }
+            }
+            else if (name === "default-open") {
+                if (this.hasAttribute(name) && !this.hasAttribute("open"))
+                    this.syncOpen(true);
+            }
+            else if (name === "trap-focus" || name === "inert-trap-focus" || name === "legacy-trap-focus") {
+                this.syncInertFocus();
+                this.syncModalSemantics();
+                if (this.isOpen && this.trapFocusEnabled && this.inertTrapFocusEnabled)
+                    requestAnimationFrame(this.focusFirst);
+            }
+            else if (name === "unstable-disable-auto-focus") {
+                if (this.isOpen && !this.hasAttribute(name))
+                    requestAnimationFrame(this.focusFirst);
+            }
+            else if (name === "label")
+                this.syncLabel();
+            else if (name === "inline") {
+                this.syncVisibility();
+                this.position();
+            }
+            else
+                this.position();
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:contents}.trigger{display:contents}.surface{position:fixed;inset:auto;margin:0;z-index:var(--spui-layer-popover,10000);box-sizing:border-box;width:max-content;max-width:var(--spui-popover-max-width,min(360px,calc(100vw - 16px)));max-height:var(--spui-popover-max-height,min(70vh,calc(100dvh - 24px)));overflow:auto;padding:16px;border:1px solid var(--spui-popover-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)));border-radius:var(--spui-popover-radius,var(--spui-card-radius,8px));background:var(--spui-popover-background,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff)));color:var(--spui-popover-color,var(--spui-ui-text,var(--colorNeutralForeground1,#242424)));box-shadow:var(--spui-popover-shadow,0 8px 24px rgb(0 0 0 / 18%));font-family:var(--spui-font-family,inherit);font-size:14px;line-height:1.45;opacity:1;transform:scale(1);transform-origin:center;transition:opacity var(--spui-motion-duration-normal,140ms) cubic-bezier(.16,1,.3,1),transform var(--spui-motion-duration-normal,140ms) cubic-bezier(.16,1,.3,1)}@starting-style{.surface:popover-open{opacity:0;transform:scale(.97)}}.surface:not(:popover-open){display:none}.surface[hidden]{display:none}h2{margin:0 0 8px;font:600 16px/1.35 var(--spui-font-family,inherit)}h2:empty{display:none}slot[name=trigger]{display:contents}slot[name=title]:not(:defined){display:none}:host([data-spui-appearance=glass]) .surface{backdrop-filter:blur(18px) saturate(1.35)}:host([appearance=brand]){--spui-popover-background:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4));--spui-popover-color:var(--spui-ui-accent-text,var(--spui-semantic-primary-button-text,#fff));--spui-popover-border:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4))}:host([appearance=inverted]){--spui-popover-background:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));--spui-popover-color:var(--spui-ui-surface,var(--spui-semantic-body-background,#fff));--spui-popover-border:var(--spui-ui-text,var(--spui-semantic-body-text,#242424))}:host([size=small]) .surface{padding:8px;font-size:12px}:host([size=large]) .surface{padding:20px;font-size:16px}@media(prefers-reduced-motion:reduce){.surface{transition:none}}@media(forced-colors:active){.surface{border-color:CanvasText;box-shadow:none}.surface:popover-open{outline:1px solid CanvasText}}`;
+            style.textContent += `:host([arrow]) .surface:before{content:"";position:absolute;z-index:1;width:8px;height:8px;border:1px solid var(--spui-popover-border,var(--spui-ui-stroke,#d1d1d1));background:var(--spui-popover-background,var(--spui-ui-surface,#fff));transform:rotate(45deg)}:host([arrow]) .surface[data-placement=bottom]:before{inset-block-start:-5px;inset-inline-start:var(--spui-popover-arrow-inline-offset,calc(50% - 5px));border-inline-end:0;border-block-end:0}:host([arrow]) .surface[data-placement=top]:before{inset-block-end:-5px;inset-inline-start:var(--spui-popover-arrow-inline-offset,calc(50% - 5px));border-inline-start:0;border-block-start:0}:host([arrow]) .surface[data-placement=left]:before{inset-inline-end:-5px;inset-block-start:var(--spui-popover-arrow-block-offset,calc(50% - 5px));border-inline-start:0;border-block-end:0}:host([arrow]) .surface[data-placement=right]:before{inset-inline-start:-5px;inset-block-start:var(--spui-popover-arrow-block-offset,calc(50% - 5px));border-inline-end:0;border-block-start:0}`;
+            const panel = document.createElement("div");
+            panel.className = "surface";
+            panel.part.add("surface");
+            panel.setAttribute("popover", "manual");
+            panel.setAttribute("role", "dialog");
+            panel.tabIndex = -1;
+            panel.id = nextId();
+            const heading = document.createElement("h2");
+            heading.id = `${panel.id}-title`;
+            const titleSlot = document.createElement("slot");
+            titleSlot.name = "title";
+            heading.append(titleSlot);
+            const contentSlot = document.createElement("slot");
+            contentSlot.name = "content";
+            panel.append(heading, contentSlot);
+            const triggerSlot = document.createElement("slot");
+            triggerSlot.name = "trigger";
+            shadow.append(style, triggerSlot, panel);
+            this.internalPanel = panel;
+            this.panel = this.externalPanel ?? panel;
+        }
+        assigned(slotName) {
+            if (slotName === "content" && this.externalPanel)
+                return [this.externalPanel];
+            return this.shadowRoot?.querySelector(`slot[name=${slotName}]`)?.assignedElements({ flatten: true }).filter((node) => node instanceof HTMLElement) ?? [];
+        }
+        syncTrigger = () => {
+            const slotted = this.assigned("trigger")[0];
+            const next = slotted ? findFocusable(slotted.shadowRoot ?? slotted) ?? slotted : undefined;
+            const disableButtonEnhancement = Boolean(slotted?.hasAttribute("disable-button-enhancement") || next?.hasAttribute("disable-button-enhancement"));
+            if (next !== this.trigger) {
+                this.trigger?.removeEventListener("pointerenter", this.onHoverEnter);
+                this.trigger?.removeEventListener("pointerleave", this.onHoverLeave);
+                if (this.trigger)
+                    this.resizeObserver?.unobserve(this.trigger);
+                this.restoreTrigger();
+                this.trigger = next;
+                if (next) {
+                    next.addEventListener("pointerenter", this.onHoverEnter, { signal: this.events?.signal });
+                    next.addEventListener("pointerleave", this.onHoverLeave, { signal: this.events?.signal });
+                }
+                if (next)
+                    this.resizeObserver?.observe(next);
+                this.triggerState = next ? { haspopup: next.getAttribute("aria-haspopup"), controls: next.getAttribute("aria-controls"), expanded: next.getAttribute("aria-expanded") } : undefined;
+            }
+            if (this.trigger && this.panel) {
+                if (disableButtonEnhancement)
+                    this.restoreTriggerAttributes();
+                else {
+                    if (this.trigger.getRootNode() === this.panel.getRootNode())
+                        this.trigger.setAttribute("aria-controls", this.panel.id);
+                    else
+                        this.trigger.removeAttribute("aria-controls");
+                    this.trigger.setAttribute("aria-haspopup", "dialog");
+                    this.trigger.setAttribute("aria-expanded", String(this.isOpen));
+                }
+            }
+            this.syncInertFocus();
+        };
+        syncLabel = () => {
+            if (!this.panel)
+                return;
+            const title = this.externalPanel ? [...this.externalPanel.querySelectorAll("h1,h2,h3,h4,h5,h6,[slot=title]")] : this.assigned("title");
+            const heading = this.panel.querySelector("h2") ?? title[0];
+            if (heading && this.externalPanel && !heading.id)
+                heading.id = `${this.panel.id}-title`;
+            if (heading && title.length) {
+                this.panel.setAttribute("aria-labelledby", heading.id || `${this.panel.id}-title`);
+                this.panel.removeAttribute("aria-label");
+            }
+            else {
+                this.panel.removeAttribute("aria-labelledby");
+                const label = this.getAttribute("label") || "More details";
+                this.panel.setAttribute("aria-label", label);
+            }
+        };
+        restoreTrigger() {
+            if (!this.trigger || !this.triggerState)
+                return;
+            this.restoreTriggerAttributes();
+            this.trigger = undefined;
+            this.triggerState = undefined;
+        }
+        restoreTriggerAttributes() {
+            if (!this.trigger || !this.triggerState)
+                return;
+            for (const [name, value] of [["aria-haspopup", this.triggerState.haspopup], ["aria-expanded", this.triggerState.expanded]]) {
+                if (value === null)
+                    this.trigger.removeAttribute(name);
+                else
+                    this.trigger.setAttribute(name, value);
+            }
+            if (this.triggerState.controls === null)
+                this.trigger.removeAttribute("aria-controls");
+            else
+                this.trigger.setAttribute("aria-controls", this.triggerState.controls);
+        }
+        syncVisibility() {
+            if (!this.panel)
+                return;
+            this.syncModalSemantics();
+            this.syncInertFocus();
+            this.panel.style.zIndex = this.inline ? "1" : "10000";
+            if (this.isOpen) {
+                this.exitGeneration++;
+                this.focusEdge = "first";
+                this.panel.hidden = false;
+                this.panel.inert = false;
+                this.panel.removeAttribute("aria-hidden");
+                try {
+                    this.panel.showPopover?.();
+                }
+                catch {
+                    this.panel.hidden = false;
+                }
+                this.position();
+                requestAnimationFrame(this.position);
+                if (!this.hasAttribute("unstable-disable-auto-focus"))
+                    requestAnimationFrame(() => {
+                        if (this.isOpen && !this.hasAttribute("unstable-disable-auto-focus"))
+                            this.focusFirst();
+                    });
+            }
+            else {
+                if (this.hasAttribute("motion")) {
+                    this.panel.inert = true;
+                    this.panel.setAttribute("aria-hidden", "true");
+                    if (!this.panel.matches(":popover-open")) {
+                        try {
+                            this.panel.showPopover?.();
+                        }
+                        catch { /* Keep the closed state if the browser cannot restore the top layer. */ }
+                    }
+                    const generation = ++this.exitGeneration;
+                    requestAnimationFrame(() => requestAnimationFrame(() => {
+                        const animations = new Set();
+                        const visit = (element) => {
+                            for (const animation of element.getAnimations())
+                                if (animation.playState === "running")
+                                    animations.add(animation);
+                            if (element.shadowRoot)
+                                for (const child of element.shadowRoot.children)
+                                    visit(child);
+                            for (const child of element.children)
+                                visit(child);
+                        };
+                        visit(this);
+                        const finish = () => {
+                            if (generation !== this.exitGeneration || this.isOpen || !this.panel)
+                                return;
+                            if (this.panel.hasAttribute("popover"))
+                                this.panel.hidePopover?.();
+                            this.panel.hidden = true;
+                        };
+                        if (animations.size)
+                            void Promise.allSettled([...animations].map(animation => animation.finished)).then(finish);
+                        else
+                            finish();
+                    }));
+                }
+                else {
+                    if (this.panel.hasAttribute("popover"))
+                        this.panel.hidePopover?.();
+                    this.panel.hidden = true;
+                }
+            }
+            this.syncTrigger();
+        }
+        syncModalSemantics() {
+            if (!this.panel)
+                return;
+            if (this.trapFocusEnabled) {
+                this.panel.setAttribute("role", "dialog");
+                this.panel.setAttribute("aria-modal", "true");
+            }
+            else {
+                this.panel.setAttribute("role", "group");
+                this.panel.removeAttribute("aria-modal");
+            }
+        }
+        syncInertFocus() {
+            syncInertFocusState(this.ownerDocument, this, this.assigned("trigger"), this.isOpen && this.trapFocusEnabled && this.inertTrapFocusEnabled, this.externalPanel);
+        }
+        get positioningOptions() { return typeof this.positioning === "object" && this.positioning !== null ? this.positioning : undefined; }
+        syncPositionObserver() {
+            if (!this.resizeObserver)
+                return;
+            this.resizeObserver.disconnect();
+            const options = this.positioningOptions;
+            const target = options?.target;
+            const context = target && "contextElement" in target ? target.contextElement : target && "nodeType" in target ? target : undefined;
+            this.positioningTarget = context;
+            if (!options?.disableUpdateOnResize) {
+                if (this.panel)
+                    this.resizeObserver.observe(this.panel);
+                if (this.trigger)
+                    this.resizeObserver.observe(this.trigger);
+                if (context && context !== this.trigger)
+                    this.resizeObserver.observe(context);
+            }
+            const ref = options?.positioningRef;
+            const value = {
+                updatePosition: this.position,
+                setTarget: targetValue => {
+                    this.positioningValue = { ...(this.positioningOptions ?? {}), target: targetValue };
+                    this.syncPositionObserver();
+                    this.position();
+                },
+            };
+            if (typeof ref === "function")
+                ref(value);
+            else if (ref)
+                ref.current = value;
+        }
+        position = () => {
+            const trigger = this.trigger;
+            const panel = this.panel;
+            if (panel)
+                panel.style.zIndex = this.inline ? "1" : "10000";
+            const point = this.contextPoint;
+            const configured = this.positioning;
+            const target = typeof configured === "object" ? configured.target : undefined;
+            const targetElement = target && "nodeType" in target && target.nodeType === 1 ? target : undefined;
+            const targetContext = targetElement ?? (target && "contextElement" in target ? target.contextElement : undefined);
+            if (targetContext !== this.positioningTarget) {
+                if (this.positioningTarget)
+                    this.resizeObserver?.unobserve(this.positioningTarget);
+                this.positioningTarget = targetContext;
+                if (targetContext && targetContext !== trigger)
+                    this.resizeObserver?.observe(targetContext);
+            }
+            if (!this.isOpen || !panel || panel.hidden || (!trigger && !point && !target))
+                return;
+            const targetRect = target && "getBoundingClientRect" in target ? target.getBoundingClientRect() : undefined;
+            const anchor = targetRect ?? (point ? new DOMRect(point.x, point.y, 0, 0) : trigger.getBoundingClientRect());
+            const direction = this.getAttribute("dir") || (targetContext && getComputedStyle(targetContext).direction) || (trigger && getComputedStyle(trigger).direction) || getComputedStyle(this).direction || "ltr";
+            const shorthand = typeof configured === "string" ? configured : configured.position ?? "bottom";
+            const [rawPosition, shorthandAlign] = shorthand.split(/-(?=(?:start|end|top|bottom)$)/);
+            const aliases = { above: "top", below: "bottom", before: "start", after: "end" };
+            const placement = aliases[rawPosition] ?? rawPosition;
+            const align = (typeof configured === "object" ? configured.align : undefined) ?? shorthandAlign ?? this.getAttribute("align") ?? "center";
+            const rawOffset = typeof configured === "object" ? configured.offset : undefined;
+            const computedOffset = typeof rawOffset === "function" ? rawOffset({
+                positionedRect: { x: 0, y: 0, width: panel.offsetWidth, height: panel.offsetHeight },
+                targetRect: { x: anchor.x, y: anchor.y, width: anchor.width, height: anchor.height },
+                position: rawPosition === "above" || rawPosition === "below" || rawPosition === "before" || rawPosition === "after" ? rawPosition : "below",
+                alignment: align,
+            }) : rawOffset;
+            const offset = typeof computedOffset === "number" ? computedOffset : computedOffset?.mainAxis ?? Number(this.getAttribute("offset") ?? 8);
+            const crossAxisOffset = typeof computedOffset === "object" ? computedOffset.crossAxis ?? 0 : 0;
+            const fallbackPlacements = typeof configured === "object" ? (configured.fallbackPositions ?? []).map(fallback => {
+                const [fallbackSide, fallbackAlign] = fallback.split(/-(?=(?:start|end|top|bottom)$)/);
+                return { placement: aliases[fallbackSide] ?? fallbackSide, align: fallbackAlign ?? align };
+            }) : [];
+            const autoSize = typeof configured === "object" ? configured.autoSize : false;
+            const matchTargetSize = typeof configured === "object" && (configured.matchTargetSize === true || configured.matchTargetSize === "width");
+            const pinned = typeof configured === "object" && configured.pinned === true;
+            const coverTarget = typeof configured === "object" && configured.coverTarget === true;
+            const arrowPadding = Math.max(0, typeof configured === "object" ? configured.arrowPadding ?? 8 : 8);
+            const boundaryContext = targetContext ?? trigger ?? this;
+            const flipBoundary = typeof configured === "object" ? getBoundaryRect(configured.flipBoundary, boundaryContext) : undefined;
+            const overflowBoundary = typeof configured === "object" ? getBoundaryRect(configured.overflowBoundary, boundaryContext) : undefined;
+            const rawBoundaryPadding = typeof configured === "object" ? configured.overflowBoundaryPadding : undefined;
+            const boundaryPadding = typeof rawBoundaryPadding === "number"
+                ? { top: rawBoundaryPadding, right: rawBoundaryPadding, bottom: rawBoundaryPadding, left: rawBoundaryPadding }
+                : { top: rawBoundaryPadding?.top ?? 0, bottom: rawBoundaryPadding?.bottom ?? 0, left: direction === "rtl" ? rawBoundaryPadding?.end ?? 0 : rawBoundaryPadding?.start ?? 0, right: direction === "rtl" ? rawBoundaryPadding?.start ?? 0 : rawBoundaryPadding?.end ?? 0 };
+            panel.style.position = typeof configured === "object" ? configured.strategy ?? (configured.positionFixed === true ? "fixed" : "absolute") : "absolute";
+            panel.style.maxWidth = "";
+            panel.style.maxHeight = "";
+            panel.style.height = "";
+            panel.style.overflowX = "";
+            panel.style.overflowY = "";
+            panel.style.width = matchTargetSize ? `${anchor.width}px` : "";
+            const modifiers = { crossAxisOffset, coverTarget, overflowBoundaryPadding: boundaryPadding };
+            let result = getFloatingPosition(anchor, { width: panel.offsetWidth, height: panel.offsetHeight }, placement, direction === "rtl" ? "rtl" : "ltr", offset, undefined, align, fallbackPlacements, pinned, flipBoundary, overflowBoundary, modifiers);
+            const flipBounds = flipBoundary ?? viewportBoundaryRect();
+            const overflowsFlipBoundary = result.left < flipBounds.left || result.top < flipBounds.top || result.left + panel.offsetWidth > flipBounds.right || result.top + panel.offsetHeight > flipBounds.bottom;
+            if (this.positioningOptions?.shiftToCoverTarget && overflowsFlipBoundary && !coverTarget)
+                result = getFloatingPosition(anchor, { width: panel.offsetWidth, height: panel.offsetHeight }, placement, direction === "rtl" ? "rtl" : "ltr", offset, undefined, align, fallbackPlacements, pinned, flipBoundary, overflowBoundary, { ...modifiers, coverTarget: true });
+            const clampArrow = (value, size) => Math.max(arrowPadding, Math.min(value, Math.max(arrowPadding, size - arrowPadding - 8)));
+            const arrowInline = direction === "rtl" ? result.left + panel.offsetWidth - anchor.left - anchor.width / 2 - 4 : anchor.left + anchor.width / 2 - result.left - 4;
+            const arrowBlock = anchor.top + anchor.height / 2 - result.top - 4;
+            panel.style.setProperty("--spui-popover-arrow-inline-offset", `${clampArrow(arrowInline, panel.offsetWidth)}px`);
+            panel.style.setProperty("--spui-popover-arrow-block-offset", `${clampArrow(arrowBlock, panel.offsetHeight)}px`);
+            const applyMaxWidth = autoSize === true || autoSize === "always" || autoSize === "width" || autoSize === "width-always";
+            const applyMaxHeight = autoSize === true || autoSize === "always" || autoSize === "height" || autoSize === "height-always";
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const availableWidth = Math.max(0, result.placement === "left" ? anchor.left - (overflowBoundary?.left ?? 0) - boundaryPadding.left - offset : result.placement === "right" ? (overflowBoundary?.right ?? viewportWidth) - boundaryPadding.right - anchor.right - offset : (overflowBoundary?.right ?? viewportWidth) - boundaryPadding.right - (overflowBoundary?.left ?? 0) - boundaryPadding.left - offset * 2);
+            const availableHeight = Math.max(0, result.placement === "top" ? anchor.top - (overflowBoundary?.top ?? 0) - boundaryPadding.top - offset : result.placement === "bottom" ? (overflowBoundary?.bottom ?? viewportHeight) - boundaryPadding.bottom - anchor.bottom - offset : (overflowBoundary?.bottom ?? viewportHeight) - boundaryPadding.bottom - (overflowBoundary?.top ?? 0) - boundaryPadding.top - offset * 2);
+            if (applyMaxWidth) {
+                panel.style.maxWidth = `${availableWidth}px`;
+                if (panel.offsetWidth > availableWidth) {
+                    panel.style.width = `${availableWidth}px`;
+                    panel.style.overflowX = "auto";
+                }
+            }
+            if (applyMaxHeight) {
+                panel.style.maxHeight = `${availableHeight}px`;
+                if (panel.offsetHeight > availableHeight) {
+                    panel.style.height = `${availableHeight}px`;
+                    panel.style.overflowY = "auto";
+                }
+            }
+            panel.dataset.placement = result.placement;
+            const strategy = this.positioningOptions?.strategy ?? (this.positioningOptions?.positionFixed === true ? "fixed" : "absolute");
+            panel.style.position = strategy;
+            const pageOffset = strategy === "absolute" ? { x: window.scrollX, y: window.scrollY } : { x: 0, y: 0 };
+            const left = result.left + pageOffset.x;
+            const top = result.top + pageOffset.y;
+            const useTransform = this.positioningOptions?.useTransform !== false;
+            panel.style.left = useTransform ? "0px" : `${left}px`;
+            panel.style.top = useTransform ? "0px" : `${top}px`;
+            panel.style.translate = useTransform ? `${left}px ${top}px` : "0px 0px";
+            const inlinePlacement = result.placement === "top" || result.placement === "bottom" ? result.align === "start" || result.align === "end" ? `-${result.align}` : "" : result.align === "top" ? "-start" : result.align === "bottom" ? "-end" : "";
+            const bounds = overflowBoundary ?? viewportBoundaryRect();
+            const detail = {
+                placement: `${result.placement}${inlinePlacement}`,
+                escaped: result.left < bounds.left || result.top < bounds.top || result.left + panel.offsetWidth > bounds.right || result.top + panel.offsetHeight > bounds.bottom,
+                referenceHidden: anchor.bottom <= 0 || anchor.top >= window.innerHeight || anchor.right <= 0 || anchor.left >= window.innerWidth,
+            };
+            this.positioningOptions?.onPositioningEnd?.(new CustomEvent("fui-positioningend", { detail }));
+            panel.dispatchEvent(new CustomEvent("fui-positioningend", { bubbles: true, detail }));
+        };
+        onScroll = (event) => {
+            if (!this.hasAttribute("close-on-scroll") && !this.hasAttribute("open-on-context")) {
+                this.position();
+                return;
+            }
+            const target = event.target;
+            if (!(target instanceof Node) || !this.contains(target) && !this.externalPanel?.contains(target))
+                this.setOpen(false, false, true, event);
+        };
+        onClick = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            const path = event.composedPath();
+            if (this.trigger && (this.trigger === target || this.trigger.contains(target) || path.includes(this.trigger))) {
+                if (!this.hasAttribute("open-on-context"))
+                    this.setOpen(!this.isOpen, false, true, event);
+                return;
+            }
+            if (!event.defaultPrevented && this.assigned("content").some(content => content === target || content.contains(target)) && path.some(node => node instanceof Element && node.matches("[data-spui-popover-close]"))) {
+                this.setOpen(false, false, true, event);
+                this.focusTrigger();
+            }
+        };
+        onRequestClose = (event) => {
+            if (event.defaultPrevented)
+                return;
+            this.setOpen(false, false, true, event);
+            this.focusTrigger();
+        };
+        onContextMenu = (event) => {
+            if (!this.hasAttribute("open-on-context"))
+                return;
+            const target = event.target;
+            if (this.trigger && target instanceof Node && !this.trigger.contains(target) && !event.composedPath().includes(this.trigger))
+                return;
+            event.preventDefault();
+            this.contextPoint = { x: event.clientX, y: event.clientY };
+            this.setOpen(true, false, true, event);
+            this.position();
+        };
+        onHoverEnter = (event) => {
+            if (!this.hasAttribute("open-on-hover") || this.hasAttribute("open-on-context"))
+                return;
+            if (this.hoverTimer !== undefined)
+                clearTimeout(this.hoverTimer);
+            this.hoverTimer = undefined;
+            this.setOpen(true, false, true, event);
+        };
+        onHoverLeave = (event) => {
+            if (!this.hasAttribute("open-on-hover") || this.hasAttribute("open-on-context"))
+                return;
+            if (this.hoverTimer !== undefined)
+                clearTimeout(this.hoverTimer);
+            const delay = Number(this.getAttribute("mouse-leave-delay") ?? 500);
+            this.hoverTimer = setTimeout(() => { this.hoverTimer = undefined; this.setOpen(false, false, true, event); }, Number.isFinite(delay) ? Math.max(0, delay) : 500);
+        };
+        onWindowBlur = (event) => {
+            if (!this.isOpen || this.getAttribute("close-on-iframe-focus") === "false")
+                return;
+            if (this.iframeBlurTimer !== undefined)
+                clearTimeout(this.iframeBlurTimer);
+            this.iframeBlurTimer = setTimeout(() => {
+                this.iframeBlurTimer = undefined;
+                const active = this.ownerDocument.activeElement;
+                if (this.isConnected && this.isOpen && active instanceof HTMLIFrameElement && !this.contains(active) && !this.externalPanel?.contains(active))
+                    this.setOpen(false, false, true, event);
+            }, 0);
+        };
+        onKeyDown = (event) => {
+            if (!this.isOpen)
+                return;
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.setOpen(false, false, true, event);
+                this.focusTrigger();
+            }
+            else if (event.key === "Tab" && this.trapFocusEnabled) {
+                this.focusEdge = event.shiftKey ? "last" : "first";
+                this.cycleFocus(event);
+            }
+        };
+        focusTrigger() {
+            const find = (root) => {
+                const selector = "button,a[href],input:not([type=hidden]),select,textarea,[tabindex],slot";
+                const candidates = [...(root instanceof HTMLElement && root.matches(selector) ? [root] : []), ...root.querySelectorAll(selector)];
+                for (const node of candidates) {
+                    if (!node.hasAttribute("disabled") && node.tabIndex >= 0 && node.getClientRects().length)
+                        return node;
+                    if (node.shadowRoot) {
+                        const nested = find(node.shadowRoot);
+                        if (nested)
+                            return nested;
+                    }
+                    if (node instanceof HTMLSlotElement)
+                        for (const assigned of node.assignedElements({ flatten: true })) {
+                            const nested = find(assigned);
+                            if (nested)
+                                return nested;
+                        }
+                }
+                return undefined;
+            };
+            const trigger = this.trigger;
+            const target = trigger && find(trigger.shadowRoot ?? trigger);
+            if (target)
+                target.focus();
+            else
+                trigger?.focus();
+        }
+        onFocusOut = (event) => {
+            if (event.relatedTarget instanceof Node && (this.contains(event.relatedTarget) || this.externalPanel?.contains(event.relatedTarget)))
+                return;
+            if (this.trapFocusEnabled && this.inertTrapFocusEnabled)
+                return;
+            queueMicrotask(() => {
+                if (!this.isOpen || this.focusIsInside())
+                    return;
+                if (!this.trapFocusEnabled)
+                    this.setOpen(false, false, true, event);
+                else if (!this.inertTrapFocusEnabled)
+                    this.focusEdge === "last" ? this.focusLast() : this.focusFirst();
+            });
+        };
+        focusables() {
+            const result = new Set();
+            const selector = "button,a[href],input:not([type=hidden]),select,textarea,[tabindex]";
+            const inspect = (node) => {
+                if (node instanceof HTMLElement && node.matches(selector) && !node.hasAttribute("disabled") && node.tabIndex >= 0 && node.getClientRects().length)
+                    result.add(node);
+                if (node.shadowRoot)
+                    visit(node.shadowRoot);
+                if (node instanceof HTMLSlotElement)
+                    for (const assigned of node.assignedElements({ flatten: true }))
+                        inspect(assigned);
+            };
+            const visit = (root) => {
+                for (const node of root.querySelectorAll("*"))
+                    inspect(node);
+            };
+            for (const content of this.assigned("content"))
+                visit(content);
+            return [...result];
+        }
+        focusFirst = () => { (this.focusables()[0] ?? this.panel)?.focus(); };
+        focusLast = () => { const items = this.focusables(); items[items.length - 1]?.focus(); };
+        cycleFocus(event) {
+            const items = this.focusables();
+            if (!items.length) {
+                event.preventDefault();
+                this.panel?.focus();
+                return;
+            }
+            let active = document.activeElement;
+            while (active?.shadowRoot?.activeElement)
+                active = active.shadowRoot.activeElement;
+            const target = event.composedPath().find((node) => node instanceof HTMLElement && items.includes(node));
+            const activeIndex = target ? items.indexOf(target) : items.findIndex(item => item === active || Boolean(active && item.contains(active)));
+            if (event.shiftKey && activeIndex === 0) {
+                event.preventDefault();
+                items[items.length - 1].focus();
+            }
+            else if (!event.shiftKey && activeIndex === items.length - 1) {
+                event.preventDefault();
+                items[0].focus();
+            }
+        }
+        focusIsInside() {
+            let active = document.activeElement;
+            while (active) {
+                if (active === this || this.contains(active) || this.externalPanel?.contains(active))
+                    return true;
+                active = active.shadowRoot?.activeElement ?? null;
+            }
+            return false;
+        }
+        onOutsidePointerDown = (event) => {
+            if (this.isOpen && event.target instanceof Node && !this.contains(event.target) && !this.externalPanel?.contains(event.target) && !event.composedPath().includes(this) && !event.composedPath().includes(this.externalPanel))
+                this.setOpen(false, false, true, event);
+        };
+        setOpen(value, force = false, notify = true, sourceEvent) {
+            const next = Boolean(value);
+            if (next === this.isOpen)
+                return;
+            if (!force && this.hasAttribute("data-spui-controlled-open")) {
+                this.emitOpenChange(next, sourceEvent);
+                return;
+            }
+            this.isOpen = next;
+            if (!next)
+                this.contextPoint = undefined;
+            if (this.hasAttribute("open") !== next)
+                this.toggleAttribute("open", next);
+            this.syncVisibility();
+            if (notify)
+                this.emitOpenChange(this.isOpen, sourceEvent);
+        }
+        emitOpenChange(open = this.isOpen, event) {
+            this.dispatchEvent(new CustomEvent("spui-open-change", { bubbles: true, composed: true, detail: { open, event } }));
+        }
+    }
+    customElements.define("spui-popover", SpuiPopover);
+}
+export function definePopoverVariant(tagName, defaults = {}) {
+    definePopover();
+    if (customElements.get(tagName))
+        return;
+    const BasePopover = customElements.get("spui-popover");
+    class SpuiPopoverVariant extends BasePopover {
+        static observedAttributes = BasePopover.observedAttributes;
+        connectedCallback() {
+            if (defaults.label && !this.hasAttribute("label"))
+                this.setAttribute("label", defaults.label);
+            if (defaults.trapFocus && !this.hasAttribute("trap-focus"))
+                this.setAttribute("trap-focus", "");
+            if (defaults.arrow && !this.hasAttribute("arrow"))
+                this.setAttribute("arrow", "");
+            super.connectedCallback();
+        }
+    }
+    customElements.define(tagName, SpuiPopoverVariant);
+}