@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/overflow.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1,218 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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("div");
-            layout.className = "layout";
-            layout.part.add("root");
-            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

@@ -1,77 +0,0 @@
-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;