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

package/dist/elements/overflow.d.ts

@@ -0,0 +1,9 @@
+export type OverflowState = {
+    hasOverflow: boolean;
+    itemVisibility: Record<string, boolean>;
+    groupVisibility: Record<string, "visible" | "hidden" | "overflow">;
+};
+export type OverflowAxis = "horizontal" | "vertical";
+export declare function defineOverflowItem(): void;
+export declare function defineOverflowDivider(): void;
+export declare function defineOverflow(): void;

package/dist/elements/overflow.js

@@ -0,0 +1,218 @@
+import { base } from "./shared.js";
+export function defineOverflowItem() {
+    if (customElements.get("spui-overflow-item"))
+        return;
+    class SpuiOverflowItem extends HTMLElement {
+        static observedAttributes = ["priority", "pinned", "group-id", "id"];
+        connectedCallback() { if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-flex;flex:none;min-width:0;max-width:100%}:host([hidden]){display:none!important}slot{display:contents}::slotted(*){flex:none}@media(forced-colors:active){:host{forced-color-adjust:auto}}`;
+            shadow.append(style, document.createElement("slot"));
+        } }
+    }
+    customElements.define("spui-overflow-item", SpuiOverflowItem);
+}
+export function defineOverflowDivider() {
+    if (customElements.get("spui-overflow-divider"))
+        return;
+    class SpuiOverflowDivider extends HTMLElement {
+        connectedCallback() { if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;align-self:stretch;flex:none;inline-size:1px;min-block-size:24px;background:var(--spui-ui-stroke,var(--colorNeutralStroke2,#e1dfdd))}:host([has-child]){inline-size:auto;min-block-size:0;background:transparent}:host([hidden]){display:none!important}slot{display:contents}`;
+            const slot = document.createElement("slot");
+            slot.addEventListener("slotchange", () => this.toggleAttribute("has-child", slot.assignedNodes({ flatten: true }).length > 0));
+            shadow.append(style, slot);
+        } }
+    }
+    customElements.define("spui-overflow-divider", SpuiOverflowDivider);
+}
+export function defineOverflow() {
+    if (customElements.get("spui-overflow"))
+        return;
+    defineOverflowItem();
+    defineOverflowDivider();
+    class SpuiOverflow extends HTMLElement {
+        static observedAttributes = ["aria-label", "minimum-visible", "overflow-direction", "overflow-axis", "has-hidden-items", "padding"];
+        itemSlot;
+        triggerSlot;
+        row;
+        resizeObserver;
+        mutationObserver;
+        events;
+        state;
+        frame = 0;
+        transaction = false;
+        refresh() { this.schedule(); }
+        forceRefresh() { if (this.frame)
+            cancelAnimationFrame(this.frame); this.frame = 0; this.recompute(); }
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.events?.abort();
+            this.events = new AbortController();
+            this.itemSlot.addEventListener("slotchange", this.schedule, { signal: this.events.signal });
+            this.triggerSlot.addEventListener("slotchange", this.schedule, { signal: this.events.signal });
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = new ResizeObserver(this.schedule);
+            this.resizeObserver.observe(this);
+            this.mutationObserver?.disconnect();
+            this.mutationObserver = new MutationObserver(this.schedule);
+            this.mutationObserver.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["id", "priority", "pinned", "group-id", "data-overflow-id", "data-overflow-item", "data-overflow-divider", "style", "class"] });
+            window.addEventListener("resize", this.schedule, { signal: this.events.signal, passive: true });
+            document.fonts?.addEventListener("loadingdone", this.schedule, { signal: this.events.signal });
+            this.syncLabel();
+            this.schedule();
+        }
+        disconnectedCallback() {
+            this.events?.abort();
+            this.events = undefined;
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = undefined;
+            this.mutationObserver?.disconnect();
+            this.mutationObserver = undefined;
+            if (this.frame)
+                cancelAnimationFrame(this.frame);
+            this.frame = 0;
+            this.transaction = false;
+        }
+        attributeChangedCallback() { if (this.isConnected) {
+            this.syncLabel();
+            this.schedule();
+        } }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0;max-width:100%}.row{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--spui-overflow-gap,var(--spui-toolbar-gap,6px));min-width:0;max-width:100%;overflow:hidden}.row:dir(rtl){direction:rtl}:host([overflow-axis=vertical]) .row{height:100%;flex-direction:column;align-items:stretch}:host([overflow-axis=vertical]) ::slotted([slot=overflow-trigger]){margin-inline-start:0;margin-block-start:auto;align-self:flex-end}::slotted([slot=overflow-trigger]){display:inline-flex;flex:none;margin-inline-start:auto}::slotted([slot=overflow-trigger][hidden]){display:none!important}::slotted(spui-overflow-divider[hidden]){display:none!important}@media(forced-colors:active){.row{forced-color-adjust:auto}}`;
+            this.row = document.createElement("div");
+            this.row.className = "row";
+            this.row.setAttribute("part", "control");
+            this.itemSlot = document.createElement("slot");
+            this.triggerSlot = document.createElement("slot");
+            this.triggerSlot.name = "overflow-trigger";
+            this.row.append(this.itemSlot, this.triggerSlot);
+            shadow.append(style, this.row);
+            this.syncLabel();
+        }
+        syncLabel() {
+            if (!this.hasAttribute("role"))
+                this.setAttribute("role", "group");
+            if (!this.hasAttribute("aria-label"))
+                this.setAttribute("aria-label", "Overflow actions");
+        }
+        schedule = () => {
+            if (!this.isConnected || this.frame)
+                return;
+            this.frame = requestAnimationFrame(() => { this.frame = 0; this.recompute(); });
+        };
+        recompute() {
+            if (this.transaction || !this.row)
+                return;
+            const assigned = this.itemSlot.assignedElements({ flatten: true }).filter((item) => item instanceof HTMLElement);
+            const items = assigned.flatMap(root => [root, ...root.querySelectorAll("[data-overflow-item], [data-overflow-divider]")]).filter(item => item.localName === "spui-overflow-item" || item.localName === "spui-overflow-divider" || item.hasAttribute("data-overflow-item") || item.hasAttribute("data-overflow-divider"));
+            const overflowItems = items.filter(item => item.localName === "spui-overflow-item" || item.hasAttribute("data-overflow-item"));
+            const dividers = items.filter(item => item.localName === "spui-overflow-divider" || item.hasAttribute("data-overflow-divider"));
+            const trigger = this.triggerSlot.assignedElements({ flatten: true }).find((item) => item instanceof HTMLElement);
+            const vertical = this.getAttribute("overflow-axis") === "vertical";
+            const available = vertical ? this.row.clientHeight : this.row.clientWidth;
+            if (!overflowItems.length || available <= 0)
+                return;
+            this.transaction = true;
+            try {
+                for (const item of [...overflowItems, ...dividers, ...(trigger ? [trigger] : [])])
+                    item.hidden = false;
+                const sizes = new Map([...overflowItems, ...dividers].map(item => [item, vertical ? item.getBoundingClientRect().height : item.getBoundingClientRect().width]));
+                const triggerSize = trigger ? (vertical ? trigger.getBoundingClientRect().height : trigger.getBoundingClientRect().width) : 0;
+                const gap = parseFloat(getComputedStyle(this.row)[vertical ? "rowGap" : "columnGap"]) || 0;
+                const minVisible = Math.max(0, Math.min(overflowItems.length, Number(this.getAttribute("minimum-visible")) || 0));
+                const direction = this.getAttribute("overflow-direction") === "start" ? "start" : "end";
+                const candidates = overflowItems.filter(item => !item.hasAttribute("pinned")).sort((a, b) => {
+                    const priority = (Number(a.getAttribute("priority")) || 0) - (Number(b.getAttribute("priority")) || 0);
+                    return priority || (direction === "end" ? overflowItems.indexOf(b) - overflowItems.indexOf(a) : overflowItems.indexOf(a) - overflowItems.indexOf(b));
+                });
+                const hidden = new Set();
+                let visible = overflowItems.slice();
+                const visibleDividers = () => dividers.filter(divider => visible.some(item => item.getAttribute("group-id") === divider.getAttribute("group-id")));
+                const rowWidth = () => {
+                    const shown = items.filter(item => overflowItems.includes(item) ? !hidden.has(item) : visibleDividers().includes(item));
+                    const parent = shown[0]?.parentElement;
+                    const itemGap = parent === this ? gap : parent ? (parseFloat(getComputedStyle(parent)[vertical ? "rowGap" : "columnGap"]) || 0) : gap;
+                    return shown.reduce((sum, item) => sum + (sizes.get(item) ?? 0), 0) + itemGap * Math.max(0, shown.length - 1);
+                };
+                const reserveMenu = hidden.size > 0 || this.hasAttribute("has-hidden-items");
+                const needsSpace = () => rowWidth() + (reserveMenu ? gap + triggerSize + Math.max(0, Number(this.getAttribute("padding")) || 0) : 0) > available;
+                for (const candidate of candidates) {
+                    if (!needsSpace() || visible.length <= minVisible)
+                        break;
+                    hidden.add(candidate);
+                    visible = visible.filter(item => item !== candidate);
+                }
+                for (const item of overflowItems) {
+                    item.hidden = hidden.has(item);
+                    if (hidden.has(item))
+                        item.setAttribute("aria-hidden", "true");
+                    else
+                        item.removeAttribute("aria-hidden");
+                    item.dataset.overflowed = String(hidden.has(item));
+                }
+                const visibleGroups = new Set(visible.map(item => item.getAttribute("group-id")).filter((id) => Boolean(id)));
+                const hiddenGroups = new Set([...hidden].map(item => item.getAttribute("group-id")).filter((id) => Boolean(id)));
+                for (const divider of dividers) {
+                    const group = divider.getAttribute("group-id");
+                    divider.hidden = !group || !visibleGroups.has(group);
+                }
+                if (trigger)
+                    trigger.hidden = !reserveMenu;
+                const groupVisibility = {};
+                for (const group of new Set([...visibleGroups, ...hiddenGroups])) {
+                    const groupItems = overflowItems.filter(item => item.getAttribute("group-id") === group);
+                    const visibleCount = groupItems.filter(item => !hidden.has(item)).length;
+                    groupVisibility[group] = visibleCount === 0 ? "hidden" : visibleCount === groupItems.length ? "visible" : "overflow";
+                }
+                const itemId = (item) => item.getAttribute("data-overflow-id") || item.id || "";
+                const itemVisibility = Object.fromEntries(overflowItems.map(item => [itemId(item), !hidden.has(item)]).filter(([id]) => Boolean(id)));
+                const state = {
+                    visibleIds: visible.map(itemId).filter(Boolean),
+                    overflowIds: [...hidden].map(itemId).filter(Boolean),
+                    hasOverflow: hidden.size > 0 || this.hasAttribute("has-hidden-items"),
+                    itemVisibility,
+                    groupVisibility
+                };
+                const changed = !this.state || JSON.stringify(this.state) !== JSON.stringify(state);
+                this.state = state;
+                this.dataset.visibleCount = String(state.visibleIds.length);
+                this.dataset.overflowCount = String(state.overflowIds.length);
+                this.dataset.overflowIds = state.overflowIds.join(",");
+                if (changed) {
+                    let active = this.ownerDocument.activeElement;
+                    while (active?.shadowRoot?.activeElement)
+                        active = active.shadowRoot.activeElement;
+                    if (trigger && active instanceof HTMLElement && [...hidden].some(item => item === active || item.contains(active)))
+                        this.focusTrigger(trigger);
+                    this.dispatchEvent(new CustomEvent("spui-overflow-change", { bubbles: true, composed: true, detail: state }));
+                }
+            }
+            finally {
+                this.transaction = false;
+            }
+        }
+        focusTrigger(trigger) {
+            const visit = (node) => {
+                if (node instanceof HTMLSlotElement)
+                    return node.assignedNodes({ flatten: true }).map(visit).find(Boolean);
+                if (node instanceof HTMLElement) {
+                    if (node.matches("button:not(:disabled),a[href],[tabindex]:not([tabindex='-1'])"))
+                        return node;
+                    const root = node.shadowRoot;
+                    const target = root ? [...root.childNodes].map(visit).find(Boolean) : undefined;
+                    if (target)
+                        return target;
+                }
+                return [...node.childNodes].map(visit).find(Boolean);
+            };
+            visit(trigger)?.focus();
+        }
+    }
+    customElements.define("spui-overflow", SpuiOverflow);
+}

package/dist/elements/persona.d.ts

@@ -0,0 +1,3 @@
+export type PersonaSize = "extra-small" | "small" | "medium" | "large" | "extra-large" | "huge";
+export type PersonaPresence = "available" | "busy" | "do-not-disturb" | "away" | "offline" | "unknown";
+export declare function definePersona(): void;

package/dist/elements/persona.js

@@ -0,0 +1,124 @@
+import { base } from "./shared.js";
+import { defineAvatar } from "./avatar.js";
+const avatarSizes = { "extra-small": 20, small: 28, medium: 32, large: 36, "extra-large": 40, huge: 56 };
+const presenceNames = {
+    available: "Available", busy: "Busy", "do-not-disturb": "Do not disturb", away: "Away", offline: "Offline", unknown: "Presence unknown"
+};
+export function definePersona() {
+    if (customElements.get("spui-persona"))
+        return;
+    defineAvatar();
+    class SpuiPersona extends HTMLElement {
+        static observedAttributes = ["name", "image", "initials", "color", "size", "text-position", "text-alignment", "presence-only", "secondary-text", "tertiary-text", "presence", "presence-label"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render(); this.sync(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        sync() {
+            const name = this.getAttribute("name") ?? "";
+            const avatar = this.shadowRoot?.querySelector("spui-avatar");
+            if (avatar) {
+                avatar.setAttribute("name", name);
+                avatar.setAttribute("size", String(avatarSizes[this.getAttribute("size")] ?? avatarSizes.medium));
+                avatar.setAttribute("color", this.getAttribute("color") || "neutral");
+                avatar.setAttribute("decorative", "");
+                for (const attribute of ["image", "initials"]) {
+                    const value = this.getAttribute(attribute);
+                    if (value)
+                        avatar.setAttribute(attribute, value);
+                    else
+                        avatar.removeAttribute(attribute);
+                }
+            }
+            if (avatar)
+                avatar.hidden = this.hasAttribute("presence-only");
+            const primary = this.shadowRoot?.querySelector(".primary");
+            if (primary)
+                primary.textContent = name;
+            const secondary = this.shadowRoot?.querySelector(".secondary");
+            if (secondary) {
+                secondary.textContent = this.getAttribute("secondary-text") ?? "";
+                secondary.hidden = !secondary.textContent;
+            }
+            const tertiary = this.shadowRoot?.querySelector(".tertiary");
+            if (tertiary) {
+                tertiary.textContent = this.getAttribute("tertiary-text") ?? "";
+                tertiary.hidden = !tertiary.textContent;
+            }
+            const quaternary = this.shadowRoot?.querySelector(".quaternary");
+            if (quaternary)
+                quaternary.hidden = !quaternary.textContent;
+            const presence = this.getAttribute("presence");
+            const marker = this.shadowRoot?.querySelector(".presence");
+            const validPresence = presence && Object.hasOwn(presenceNames, presence) ? presence : undefined;
+            if (marker) {
+                marker.hidden = !validPresence;
+                if (validPresence) {
+                    marker.dataset.presence = validPresence;
+                    marker.setAttribute("aria-label", this.getAttribute("presence-label") || presenceNames[validPresence]);
+                    marker.title = this.getAttribute("presence-label") || presenceNames[validPresence];
+                }
+                else {
+                    marker.removeAttribute("aria-label");
+                    marker.removeAttribute("title");
+                }
+            }
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{--spui-persona-avatar-size:32px;--spui-persona-gap:10px;display:inline-flex;max-width:100%;min-width:0;color:var(--spui-ui-text,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#242424)));font:inherit;vertical-align:middle}.layout{display:flex;align-items:center;gap:var(--spui-persona-gap);min-width:0;max-width:100%}.avatar-wrap{position:relative;display:grid;place-items:center;flex:none;width:var(--spui-persona-avatar-size);height:var(--spui-persona-avatar-size)}.avatar-fallback{display:grid;width:100%;height:100%}.presence{position:absolute;inset-inline-end:-1px;bottom:-1px;box-sizing:border-box;width:12px;height:12px;border:2px solid var(--spui-base-surface,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff)));border-radius:50%;background:var(--spui-persona-presence-color,#808080)}.presence[data-presence=available]{--spui-persona-presence-color:var(--spui-persona-presence-available,var(--spui-presence-available,var(--spui-semantic-success-text,var(--colorPaletteGreenForeground1,var(--spui-ui-success,#13a10e)))))}.presence[data-presence=busy],.presence[data-presence=do-not-disturb]{--spui-persona-presence-color:var(--spui-persona-presence-busy,var(--spui-presence-busy,var(--spui-semantic-error-text,var(--colorPaletteRedForeground1,var(--spui-ui-danger,#c50f1f)))))}.presence[data-presence=away]{--spui-persona-presence-color:var(--spui-persona-presence-away,var(--spui-presence-away,var(--spui-semantic-warning-text,var(--colorPaletteMarigoldForeground1,var(--spui-ui-warning,#835b00)))))}.presence[data-presence=offline],.presence[data-presence=unknown]{--spui-persona-presence-color:var(--spui-persona-presence-offline,var(--spui-presence-offline,var(--spui-semantic-body-subtext,var(--colorNeutralForeground3,var(--spui-ui-muted,#8a8886)))))}.presence[data-presence=do-not-disturb]{box-shadow:inset 0 0 0 2px var(--spui-base-surface,var(--spui-ui-surface,#fff))}.details{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;max-width:100%;line-height:1.3}.primary,.secondary,.tertiary{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary{font-size:14px;font-weight:600;color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424))}.secondary,.tertiary{font-size:12px;color:var(--spui-ui-muted,var(--colorNeutralForeground2,#616161))}.tertiary{font-size:11px}:host([size=extra-small]){--spui-persona-avatar-size:20px;--spui-persona-gap:6px}:host([size=small]){--spui-persona-avatar-size:28px;--spui-persona-gap:8px}:host([size=large]){--spui-persona-avatar-size:36px}:host([size=extra-large]){--spui-persona-avatar-size:40px;--spui-persona-gap:12px}:host([size=huge]){--spui-persona-avatar-size:56px;--spui-persona-gap:14px}:host([size=huge]) .primary{font-size:var(--spui-persona-huge-primary-size,20px)}:host([size=huge]) .secondary{font-size:var(--spui-persona-huge-secondary-size,16px)}:host([text-position=before]) .layout{flex-direction:row-reverse}:host([text-position=below]) .layout{flex-direction:column;align-items:center;text-align:center}:host([text-position=below]) .details{align-items:center}:host([text-position=below]){max-width:12rem}:host([text-alignment=center]) .details{justify-content:center}:host([presence-only]) .avatar-wrap{width:auto;height:auto}:host([presence-only]) .avatar-fallback, :host([presence-only]) slot[name=avatar]{display:none}:host([presence-only]) .presence{position:static;inset:auto;width:16px;height:16px;border-width:0}::slotted([slot=avatar]){display:block;max-width:100%;max-height:100%}::slotted([slot=details]){min-width:0}@media(forced-colors:active){.presence{border-color:Canvas;background:Highlight}.presence[data-presence=offline],.presence[data-presence=unknown]{background:GrayText}}`;
+            style.textContent += `::slotted([slot=primary-text]),::slotted([slot=secondary-text]),::slotted([slot=tertiary-text]),::slotted([slot=quaternary-text]){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=primary-text]){font-size:14px;font-weight:600;color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424))}::slotted([slot=secondary-text]),::slotted([slot=quaternary-text]){font-size:12px;color:var(--spui-ui-muted,var(--colorNeutralForeground2,#616161))}::slotted([slot=tertiary-text]){font-size:11px;color:var(--spui-ui-muted,var(--colorNeutralForeground2,#616161))}:host([size=huge])::slotted([slot=primary-text]){font-size:var(--spui-persona-huge-primary-size,20px)}`;
+            const layout = document.createElement("span");
+            layout.className = "layout";
+            const avatarWrap = document.createElement("span");
+            avatarWrap.className = "avatar-wrap";
+            avatarWrap.part.add("avatar-wrap");
+            const avatarSlot = document.createElement("slot");
+            avatarSlot.name = "avatar";
+            const fallback = document.createElement("spui-avatar");
+            fallback.className = "avatar-fallback";
+            fallback.part.add("avatar");
+            avatarSlot.append(fallback);
+            const presence = document.createElement("span");
+            presence.className = "presence";
+            presence.part.add("presence");
+            presence.setAttribute("role", "img");
+            avatarWrap.append(avatarSlot, presence);
+            const details = document.createElement("span");
+            details.className = "details";
+            details.part.add("details");
+            const primary = document.createElement("span");
+            primary.className = "primary";
+            primary.part.add("primary");
+            const secondary = document.createElement("span");
+            secondary.className = "secondary";
+            secondary.part.add("secondary");
+            const tertiary = document.createElement("span");
+            tertiary.className = "tertiary";
+            tertiary.part.add("tertiary");
+            const primarySlot = document.createElement("slot");
+            primarySlot.name = "primary-text";
+            primarySlot.append(primary);
+            const secondarySlot = document.createElement("slot");
+            secondarySlot.name = "secondary-text";
+            secondarySlot.append(secondary);
+            const tertiarySlot = document.createElement("slot");
+            tertiarySlot.name = "tertiary-text";
+            tertiarySlot.append(tertiary);
+            const quaternary = document.createElement("span");
+            quaternary.className = "quaternary";
+            quaternary.part.add("quaternary");
+            quaternary.hidden = true;
+            const quaternarySlot = document.createElement("slot");
+            quaternarySlot.name = "quaternary-text";
+            quaternarySlot.append(quaternary);
+            const detailsSlot = document.createElement("slot");
+            detailsSlot.name = "details";
+            details.append(primarySlot, secondarySlot, tertiarySlot, quaternarySlot, detailsSlot);
+            layout.append(avatarWrap, details);
+            shadow.append(style, layout);
+        }
+    }
+    customElements.define("spui-persona", SpuiPersona);
+}

package/dist/elements/popover.d.ts

@@ -0,0 +1,77 @@
+import { type FloatingAlign, type FloatingPlacement } from "./floating-position.js";
+export type PopoverPosition = FloatingPlacement | "above" | "below" | "before" | "after";
+export type PopoverOpenChangeData = {
+    open: boolean;
+};
+export type PopoverAlignment = FloatingAlign;
+export type PopoverAutoSize = boolean | "always" | "width" | "width-always" | "height" | "height-always";
+export type PopoverBoundaryRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type PopoverBoundary = Element | DOMRectReadOnly | PopoverBoundaryRect | readonly Element[] | "clippingParents" | "scrollParent" | "window" | null;
+export type PopoverPositioningTargetRect = PopoverBoundaryRect & Pick<DOMRectReadOnly, "top" | "left" | "bottom" | "right">;
+export type PopoverOffsetParams = {
+    positionedRect: PopoverBoundaryRect;
+    targetRect: PopoverBoundaryRect;
+    position: "above" | "below" | "before" | "after";
+    alignment?: PopoverAlignment;
+};
+export type PopoverOffset = number | {
+    mainAxis: number;
+    crossAxis?: number;
+} | ((params: PopoverOffsetParams) => number | {
+    mainAxis: number;
+    crossAxis?: number;
+});
+export type PopoverBoundaryPadding = number | Partial<Record<"top" | "end" | "bottom" | "start", number>>;
+export type PopoverTarget = Element | {
+    getBoundingClientRect: () => PopoverPositioningTargetRect;
+    contextElement?: Element;
+} | null;
+export type PopoverPositioningPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+export type PopoverPositioningEndData = {
+    placement: PopoverPositioningPlacement;
+    escaped: boolean;
+    referenceHidden: boolean;
+};
+export type PopoverPositioningImperativeRef = {
+    updatePosition: () => void;
+    setTarget: (target: PopoverTarget) => void;
+};
+export type PopoverPositioningRef = {
+    readonly current: PopoverPositioningImperativeRef | null;
+} | ((value: PopoverPositioningImperativeRef | null) => void) | null;
+export type PopoverPositioningOptions = {
+    position?: PopoverPosition;
+    align?: PopoverAlignment;
+    offset?: PopoverOffset;
+    fallbackPositions?: Array<PopoverPosition | `${"above" | "below" | "before" | "after"}-${"start" | "end" | "top" | "bottom"}`>;
+    autoSize?: PopoverAutoSize;
+    matchTargetSize?: boolean | "width";
+    pinned?: boolean;
+    flipBoundary?: PopoverBoundary;
+    overflowBoundary?: PopoverBoundary;
+    overflowBoundaryPadding?: PopoverBoundaryPadding;
+    positionFixed?: boolean;
+    strategy?: "absolute" | "fixed";
+    target?: PopoverTarget;
+    coverTarget?: boolean;
+    arrowPadding?: number;
+    positioningRef?: PopoverPositioningRef;
+    onPositioningEnd?: (event: CustomEvent<PopoverPositioningEndData>) => void;
+    disableUpdateOnResize?: boolean;
+    shiftToCoverTarget?: boolean;
+    useTransform?: boolean;
+};
+export type PopoverPositioning = PopoverPosition | `${"above" | "below" | "before" | "after"}-${"start" | "end" | "top" | "bottom"}` | PopoverPositioningOptions;
+export declare function definePopoverTrigger(): void;
+export declare function definePopoverSurface(): void;
+export declare function definePopover(): void;
+export declare function definePopoverVariant(tagName: string, defaults?: {
+    label?: string;
+    trapFocus?: boolean;
+    arrow?: boolean;
+}): void;