@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/elements/tooltip.js

@@ -1,527 +0,0 @@
-import { getFloatingPosition } from "./floating-position.js";
-import { getDirectionFromLanguage } from "./shared.js";
-const nextId = (() => { let value = 0; return () => `spui-tooltip-${++value}`; })();
-let activeTooltip;
-function rectEdges(rect) {
-    const left = "left" in rect ? rect.left : rect.x;
-    const top = "top" in rect ? rect.top : rect.y;
-    return { left, top, right: left + rect.width, bottom: top + rect.height };
-}
-function parentElement(element) {
-    if (element.parentElement)
-        return element.parentElement;
-    const root = element.getRootNode();
-    return root instanceof ShadowRoot ? root.host : null;
-}
-function getLayoutDirection(element) {
-    let explicitDirection;
-    let language;
-    for (let current = element; current; current = parentElement(current)) {
-        if (!explicitDirection && current.hasAttribute("dir"))
-            explicitDirection = current;
-        if (!language && (current.hasAttribute("lang") || current.hasAttribute("xml:lang")))
-            language = current;
-    }
-    if (explicitDirection)
-        return explicitDirection.ownerDocument.defaultView?.getComputedStyle(explicitDirection).direction === "rtl" ? "rtl" : "ltr";
-    const derived = getDirectionFromLanguage(language?.getAttribute("lang") ?? language?.getAttribute("xml:lang"));
-    if (derived)
-        return derived;
-    return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
-}
-function intersectRects(rects) {
-    if (!rects.length)
-        return undefined;
-    const left = Math.max(...rects.map(rect => rect.left));
-    const top = Math.max(...rects.map(rect => rect.top));
-    return { left, top, right: Math.max(left, Math.min(...rects.map(rect => rect.right))), bottom: Math.max(top, Math.min(...rects.map(rect => rect.bottom))) };
-}
-function getPositioningBoundary(boundary, context) {
-    if (!boundary || boundary === "window")
-        return undefined;
-    if (Array.isArray(boundary))
-        return intersectRects(boundary.map(element => rectEdges(element.getBoundingClientRect())));
-    if (typeof boundary === "object" && "getBoundingClientRect" in boundary)
-        return rectEdges(boundary.getBoundingClientRect());
-    if (typeof boundary === "object" && "width" in boundary)
-        return rectEdges(boundary);
-    if ((boundary === "clippingParents" || boundary === "scrollParent") && context) {
-        const win = context.ownerDocument.defaultView;
-        if (!win)
-            return undefined;
-        const viewport = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
-        const rects = boundary === "clippingParents" ? [viewport] : [];
-        let current = parentElement(context);
-        while (current) {
-            const style = win.getComputedStyle(current);
-            const clipsX = /^(auto|scroll|hidden|clip|overlay)$/.test(style.overflowX);
-            const clipsY = /^(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 (boundary === "clippingParents" ? clipsX || clipsY : isScrollParent) {
-                const bounds = current.getBoundingClientRect();
-                const left = bounds.left + current.clientLeft;
-                const top = bounds.top + current.clientTop;
-                const rect = { left: clipsX ? left : 0, right: clipsX ? left + current.clientWidth : win.innerWidth, top: clipsY ? top : 0, bottom: clipsY ? top + current.clientHeight : win.innerHeight };
-                if (boundary === "scrollParent")
-                    return rect;
-                rects.push(rect);
-            }
-            current = parentElement(current);
-        }
-        return boundary === "clippingParents" ? intersectRects(rects) : undefined;
-    }
-    return undefined;
-}
-function normalizePosition(position, direction) {
-    if (position === "above")
-        return "top";
-    if (position === "below")
-        return "bottom";
-    if (position === "before")
-        return direction === "rtl" ? "right" : "left";
-    if (position === "after")
-        return direction === "rtl" ? "left" : "right";
-    return position;
-}
-export function defineTooltip() {
-    if (customElements.get("spui-tooltip"))
-        return;
-    class SpuiTooltip extends HTMLElement {
-        static observedAttributes = ["content", "placement", "positioning", "align", "offset", "disabled", "open", "delay", "show-delay", "hide-delay", "relationship", "appearance", "with-arrow"];
-        observer;
-        sizeObserver;
-        events;
-        timer;
-        trigger;
-        ariaBefore;
-        tooltip;
-        isOpen = false;
-        inTopLayer = false;
-        positioningValue;
-        positioningRef;
-        tooltipElementValue;
-        positioningHandle = { updatePosition: () => this.position(), setTarget: target => this.setPositioningTarget(target) };
-        connectedCallback() {
-            this.style.display ||= "contents";
-            this.events?.abort();
-            this.events = new AbortController();
-            const options = { signal: this.events.signal };
-            this.addEventListener("pointerenter", this.onPointerEnter, options);
-            this.addEventListener("pointerleave", this.onPointerLeave, options);
-            this.addEventListener("focusin", this.onFocusIn, options);
-            this.addEventListener("focusout", this.onFocusOut, options);
-            this.ownerDocument.addEventListener("keydown", this.onDocumentKeyDown, { ...options, capture: true });
-            this.ownerDocument.addEventListener("visibilitychange", this.onVisibilityChange, options);
-            window.addEventListener("resize", this.position, options);
-            window.addEventListener("scroll", this.position, { ...options, capture: true });
-            this.observer = new MutationObserver(() => this.sync());
-            this.observer.observe(this, { childList: true });
-            this.isOpen = this.hasAttribute("open");
-            const positioningOptions = typeof this.positioningValue === "object" && this.positioningValue !== null ? this.positioningValue : undefined;
-            this.setPositioningRef(positioningOptions?.positioningRef);
-            this.sync();
-            this.observeSize();
-        }
-        disconnectedCallback() {
-            this.observer?.disconnect();
-            this.sizeObserver?.disconnect();
-            this.events?.abort();
-            this.clearTimer();
-            if (activeTooltip?.element === this)
-                activeTooltip = undefined;
-            this.tooltip?.hidePopover?.();
-            this.restoreAria();
-            this.setPositioningRef(undefined);
-        }
-        get positioning() { return this.positioningValue; }
-        set positioning(value) {
-            this.positioningValue = value;
-            const options = typeof value === "object" && value !== null ? value : undefined;
-            this.setPositioningRef(options?.positioningRef);
-            this.observeSize();
-            this.position();
-        }
-        get tooltipElement() { return this.tooltipElementValue; }
-        set tooltipElement(value) {
-            const next = value ?? undefined;
-            if (this.tooltipElementValue === next)
-                return;
-            this.tooltipElementValue = next;
-            if (this.isConnected)
-                this.sync();
-        }
-        setPositioningRef(ref) {
-            if (this.positioningRef === ref)
-                return;
-            if (typeof this.positioningRef === "function")
-                this.positioningRef(null);
-            else if (this.positioningRef)
-                this.positioningRef.current = null;
-            this.positioningRef = ref;
-            if (typeof ref === "function")
-                ref(this.positioningHandle);
-            else if (ref)
-                ref.current = this.positioningHandle;
-        }
-        setPositioningTarget(target) {
-            const current = typeof this.positioningValue === "object" && this.positioningValue !== null ? this.positioningValue : {};
-            this.positioningValue = { ...current, target };
-            this.observeSize();
-            this.position();
-        }
-        attributeChangedCallback(name) {
-            if (name === "open") {
-                const next = this.hasAttribute("open");
-                if (next !== this.isOpen) {
-                    if (next)
-                        this.claimActiveTooltip();
-                    else if (activeTooltip?.element === this)
-                        activeTooltip = undefined;
-                    this.isOpen = next;
-                    this.syncVisibility();
-                    this.emitOpenChange();
-                }
-            }
-            else if (this.isConnected) {
-                if (name === "disabled" && this.hasAttribute("disabled"))
-                    this.setOpen(false);
-                else
-                    this.sync();
-            }
-        }
-        get open() { return this.isOpen; }
-        set open(value) { this.setOpen(Boolean(value)); }
-        sync() {
-            const content = this.tooltipElementValue ?? [...this.querySelectorAll("[slot=tooltip]")].find(element => element.dataset.spuiTooltipGenerated === undefined);
-            const generated = this.querySelector("[data-spui-tooltip-generated]");
-            if (content) {
-                generated?.remove();
-                this.tooltip = content;
-            }
-            else if (this.hasAttribute("content")) {
-                this.tooltip = generated ?? document.createElement("span");
-                this.tooltip.setAttribute("slot", "tooltip");
-                this.tooltip.dataset.spuiTooltipGenerated = "";
-                this.tooltip.textContent = this.getAttribute("content") ?? "";
-                if (!generated)
-                    this.append(this.tooltip);
-            }
-            else {
-                generated?.remove();
-                this.tooltip = undefined;
-            }
-            if (this.tooltip) {
-                if (!this.tooltip.id)
-                    this.tooltip.id = nextId();
-                this.tooltip.setAttribute("role", "tooltip");
-                this.styleTooltip();
-            }
-            const trigger = [...this.children].find((child) => child instanceof HTMLElement && child !== this.tooltip && child.getAttribute("slot") !== "tooltip");
-            if (trigger !== this.trigger) {
-                this.restoreAria();
-                this.trigger = trigger;
-                this.ariaBefore = trigger ? new Map(["aria-label", "aria-labelledby", "aria-describedby", "aria-description"].map(name => [name, trigger.getAttribute(name)])) : undefined;
-            }
-            this.applyRelationship();
-            this.observeSize();
-            this.syncVisibility();
-        }
-        styleTooltip() {
-            if (!this.tooltip)
-                return;
-            this.tooltip.setAttribute("popover", "manual");
-            Object.assign(this.tooltip.style, {
-                position: "fixed",
-                zIndex: "10000",
-                boxSizing: "border-box",
-                maxWidth: "min(320px, calc(100vw - 16px))",
-                maxHeight: "calc(100vh - 16px)",
-                padding: "6px 10px",
-                border: "1px solid var(--spui-tooltip-border, var(--colorNeutralStroke1, #666))",
-                borderRadius: "var(--spui-tooltip-radius, var(--spui-control-radius, 4px))",
-                background: this.appearance === "inverted" ? "var(--spui-tooltip-background, var(--colorNeutralBackgroundInverted, #292929))" : "var(--spui-tooltip-background, var(--colorNeutralBackground1, #fff))",
-                color: this.appearance === "inverted" ? "var(--spui-tooltip-color, var(--colorNeutralForegroundInverted, #fff))" : "var(--spui-tooltip-color, var(--colorNeutralForeground1, #242424))",
-                boxShadow: "0 2px 8px rgb(0 0 0 / 18%)",
-                font: "500 12px/1.4 var(--spui-font-family, inherit)",
-                overflowWrap: "anywhere",
-                overflowY: "auto",
-                pointerEvents: "none",
-                margin: "0"
-            });
-            this.tooltip.dataset.appearance = this.appearance;
-            let arrow = this.tooltip.querySelector(":scope > [data-spui-tooltip-arrow]");
-            if (this.hasAttribute("with-arrow")) {
-                if (!arrow) {
-                    arrow = document.createElement("span");
-                    arrow.dataset.spuiTooltipArrow = "";
-                    arrow.setAttribute("aria-hidden", "true");
-                    Object.assign(arrow.style, { position: "absolute", width: "8px", height: "8px", transform: "rotate(45deg)", background: "inherit", border: "inherit", pointerEvents: "none" });
-                    this.tooltip.append(arrow);
-                }
-            }
-            else
-                arrow?.remove();
-        }
-        syncVisibility() {
-            if (!this.tooltip)
-                return;
-            const visible = this.isOpen && !this.hasAttribute("disabled");
-            const surface = this.tooltip;
-            if (visible) {
-                surface.hidden = false;
-                try {
-                    surface.showPopover?.();
-                    this.inTopLayer = typeof surface.showPopover === "function";
-                }
-                catch {
-                    this.inTopLayer = false;
-                }
-                requestAnimationFrame(this.position);
-            }
-            else {
-                this.inTopLayer = false;
-                surface.hidePopover?.();
-                surface.hidden = true;
-            }
-        }
-        position = () => {
-            const trigger = this.trigger;
-            const tooltip = this.tooltip;
-            const options = this.positioningOptions;
-            const target = options?.target;
-            if (!this.isOpen || !tooltip || tooltip.hidden || (!trigger && !target))
-                return;
-            const targetContext = target && "contextElement" in target ? target.contextElement : target && "nodeType" in target ? target : undefined;
-            const targetRect = target?.getBoundingClientRect();
-            const anchor = targetRect ?? trigger.getBoundingClientRect();
-            const direction = getLayoutDirection(targetContext ?? trigger ?? this);
-            const rtl = direction === "rtl";
-            const [requested, align, rawPosition] = this.getRequestedPosition(rtl ? "rtl" : "ltr");
-            const configuredOffset = options?.offset;
-            const functionOffset = typeof configuredOffset === "function" ? configuredOffset({
-                positionedRect: { x: 0, y: 0, width: tooltip.offsetWidth, height: tooltip.offsetHeight },
-                targetRect: { x: anchor.x, y: anchor.y, width: anchor.width, height: anchor.height },
-                position: (rawPosition === "above" || rawPosition === "below" || rawPosition === "before" || rawPosition === "after" ? rawPosition : "above"),
-                alignment: align,
-            }) : configuredOffset;
-            const offset = typeof functionOffset === "number" ? functionOffset : functionOffset?.mainAxis ?? 0;
-            const crossAxisOffset = typeof functionOffset === "object" ? functionOffset.crossAxis ?? 0 : 0;
-            const gap = configuredOffset === undefined ? this.hasAttribute("offset") ? Math.max(0, Number(this.getAttribute("offset")) || 0) : this.hasAttribute("with-arrow") ? 12 : 8 : Math.max(0, offset);
-            const boundaryContext = targetContext ?? trigger ?? this;
-            const flipBoundary = getPositioningBoundary(options?.flipBoundary, boundaryContext);
-            const overflowBoundary = getPositioningBoundary(options?.overflowBoundary, boundaryContext);
-            const rawPadding = options?.overflowBoundaryPadding;
-            const padding = typeof rawPadding === "number" ? { top: rawPadding, right: rawPadding, bottom: rawPadding, left: rawPadding } : {
-                top: rawPadding?.top ?? 0,
-                bottom: rawPadding?.bottom ?? 0,
-                left: rtl ? rawPadding?.end ?? 0 : rawPadding?.start ?? 0,
-                right: rtl ? rawPadding?.start ?? 0 : rawPadding?.end ?? 0,
-            };
-            const strategy = options?.strategy ?? (options?.positionFixed === true ? "fixed" : options?.positionFixed === false ? "absolute" : this.inTopLayer ? "absolute" : "fixed");
-            tooltip.style.position = strategy;
-            tooltip.style.transform = "";
-            tooltip.style.maxWidth = "min(320px, calc(100vw - 16px))";
-            tooltip.style.maxHeight = "calc(100vh - 16px)";
-            tooltip.style.width = options?.matchTargetSize === "width" ? `${anchor.width}px` : "";
-            tooltip.style.height = "";
-            tooltip.style.overflowX = "";
-            tooltip.style.overflowY = "auto";
-            const surface = { width: tooltip.offsetWidth, height: tooltip.offsetHeight };
-            const viewport = { width: window.innerWidth, height: window.innerHeight };
-            const fallback = (options?.fallbackPositions ?? []).map(value => {
-                const [side, fallbackAlign] = this.parsePosition(value, rtl ? "rtl" : "ltr");
-                return { placement: side, align: fallbackAlign };
-            });
-            const pinned = options?.pinned === true;
-            const coverTarget = options?.coverTarget === true;
-            const modifiers = { crossAxisOffset, coverTarget, overflowBoundaryPadding: padding };
-            let position = getFloatingPosition(anchor, surface, requested, rtl ? "rtl" : "ltr", gap, viewport, align, fallback, pinned, flipBoundary, overflowBoundary, modifiers);
-            const flipBounds = flipBoundary ?? { left: 0, top: 0, right: viewport.width, bottom: viewport.height };
-            const overflows = position.left < flipBounds.left || position.top < flipBounds.top || position.left + surface.width > flipBounds.right || position.top + surface.height > flipBounds.bottom;
-            if (options?.shiftToCoverTarget && overflows && !coverTarget)
-                position = getFloatingPosition(anchor, surface, requested, rtl ? "rtl" : "ltr", gap, viewport, align, fallback, pinned, flipBoundary, overflowBoundary, { ...modifiers, coverTarget: true });
-            const autoSize = options?.autoSize;
-            const applyMaxWidth = autoSize === true || autoSize === "always" || autoSize === "width" || autoSize === "width-always";
-            const applyMaxHeight = autoSize === true || autoSize === "always" || autoSize === "height" || autoSize === "height-always";
-            const bounds = overflowBoundary ?? { left: 0, top: 0, right: viewport.width, bottom: viewport.height };
-            const availableWidth = Math.max(0, (position.placement === "left" ? anchor.left - bounds.left - padding.left - gap : position.placement === "right" ? bounds.right - padding.right - anchor.right - gap : bounds.right - padding.right - bounds.left - padding.left - gap * 2));
-            const availableHeight = Math.max(0, (position.placement === "top" ? anchor.top - bounds.top - padding.top - gap : position.placement === "bottom" ? bounds.bottom - padding.bottom - anchor.bottom - gap : bounds.bottom - padding.bottom - bounds.top - padding.top - gap * 2));
-            if (applyMaxWidth)
-                tooltip.style.maxWidth = `${availableWidth}px`;
-            if (applyMaxHeight)
-                tooltip.style.maxHeight = `${availableHeight}px`;
-            const pageOffset = strategy === "absolute" ? { x: window.scrollX, y: window.scrollY } : { x: 0, y: 0 };
-            const useTransform = options?.useTransform !== false;
-            tooltip.style.left = useTransform ? "0px" : `${position.left + pageOffset.x}px`;
-            tooltip.style.top = useTransform ? "0px" : `${position.top + pageOffset.y}px`;
-            if (useTransform)
-                tooltip.style.transform = `translate3d(${position.left + pageOffset.x}px, ${position.top + pageOffset.y}px, 0)`;
-            tooltip.dataset.placement = position.placement;
-            const arrow = tooltip.querySelector("[data-spui-tooltip-arrow]");
-            if (arrow) {
-                Object.assign(arrow.style, { insetInlineStart: "", insetInlineEnd: "", top: "", right: "", bottom: "", left: "" });
-                const surfaceRect = tooltip.getBoundingClientRect();
-                const anchorCenterX = anchor.left + anchor.width / 2 - surfaceRect.left - 4;
-                const anchorCenterY = anchor.top + anchor.height / 2 - surfaceRect.top - 4;
-                const arrowPadding = Math.max(0, options?.arrowPadding ?? 4);
-                const arrowLeft = `${Math.max(arrowPadding, Math.min(anchorCenterX, surfaceRect.width - arrowPadding - 8))}px`;
-                const arrowTop = `${Math.max(arrowPadding, Math.min(anchorCenterY, surfaceRect.height - arrowPadding - 8))}px`;
-                if (position.placement === "top")
-                    Object.assign(arrow.style, { bottom: "-4px", left: arrowLeft, borderTop: "0", borderLeft: "0" });
-                else if (position.placement === "bottom")
-                    Object.assign(arrow.style, { top: "-4px", left: arrowLeft, borderRight: "0", borderBottom: "0" });
-                else if (position.placement === "left")
-                    Object.assign(arrow.style, { right: "-4px", top: arrowTop, borderLeft: "0", borderBottom: "0" });
-                else
-                    Object.assign(arrow.style, { left: "-4px", top: arrowTop, borderTop: "0", borderRight: "0" });
-            }
-            const inlinePlacement = position.placement === "top" || position.placement === "bottom" ? position.align === "start" || position.align === "end" ? `-${position.align}` : "" : position.align === "top" ? "-start" : position.align === "bottom" ? "-end" : "";
-            const detail = {
-                placement: `${position.placement}${inlinePlacement}`,
-                escaped: position.left < bounds.left || position.top < bounds.top || position.left + tooltip.offsetWidth > bounds.right || position.top + tooltip.offsetHeight > bounds.bottom,
-                referenceHidden: anchor.bottom <= 0 || anchor.top >= window.innerHeight || anchor.right <= 0 || anchor.left >= window.innerWidth,
-            };
-            options?.onPositioningEnd?.(new CustomEvent("fui-positioningend", { detail }));
-            tooltip.dispatchEvent(new CustomEvent("fui-positioningend", { bubbles: true, detail }));
-        };
-        onPointerEnter = (event) => {
-            if (event.pointerType === "touch")
-                return;
-            if (this.hasAttribute("disabled"))
-                return;
-            this.clearTimer();
-            this.timer = setTimeout(() => this.setOpen(true, event), this.showDelay);
-        };
-        onPointerLeave = (event) => {
-            if (event.pointerType === "touch")
-                return;
-            if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget))
-                return;
-            this.clearTimer();
-            this.timer = setTimeout(() => this.setOpen(false, event), this.hideDelay);
-        };
-        onFocusIn = (event) => { if (!this.hasAttribute("disabled")) {
-            this.clearTimer();
-            this.timer = setTimeout(() => this.setOpen(true, event), this.showDelay);
-        } };
-        onFocusOut = (event) => {
-            if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget))
-                return;
-            this.clearTimer();
-            this.timer = setTimeout(() => this.setOpen(false, event), this.hideDelay);
-        };
-        onDocumentKeyDown = (event) => {
-            if (event.key === "Escape" && this.isOpen && !event.defaultPrevented) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.setOpen(false, event);
-            }
-        };
-        onVisibilityChange = () => { if (this.ownerDocument.visibilityState === "hidden")
-            this.setOpen(false); };
-        observeSize() {
-            if (!this.isConnected || typeof ResizeObserver === "undefined")
-                return;
-            this.sizeObserver ??= new ResizeObserver(this.position);
-            this.sizeObserver.disconnect();
-            if (this.positioningOptions?.disableUpdateOnResize)
-                return;
-            if (this.trigger)
-                this.sizeObserver.observe(this.trigger);
-            if (this.tooltip)
-                this.sizeObserver.observe(this.tooltip);
-            const target = this.positioningOptions?.target;
-            const targetContext = target && "contextElement" in target ? target.contextElement : target && "nodeType" in target ? target : undefined;
-            if (targetContext)
-                this.sizeObserver.observe(targetContext);
-        }
-        claimActiveTooltip() {
-            if (activeTooltip && activeTooltip.element !== this)
-                activeTooltip.close();
-            activeTooltip = { element: this, close: () => this.setOpen(false) };
-        }
-        setOpen(value, sourceEvent) {
-            const next = Boolean(value) && !this.hasAttribute("disabled");
-            if (next === this.isOpen)
-                return;
-            if (next)
-                this.claimActiveTooltip();
-            else if (activeTooltip?.element === this)
-                activeTooltip = undefined;
-            this.isOpen = next;
-            if (this.hasAttribute("open") !== next)
-                this.toggleAttribute("open", next);
-            this.syncVisibility();
-            this.emitOpenChange(sourceEvent);
-        }
-        emitOpenChange(sourceEvent) {
-            const documentKeyboardEvent = sourceEvent instanceof KeyboardEvent ? sourceEvent : undefined;
-            const event = documentKeyboardEvent ? undefined : sourceEvent;
-            this.dispatchEvent(new CustomEvent("spui-open-change", { bubbles: true, composed: true, detail: { open: this.isOpen, visible: this.isOpen, event, documentKeyboardEvent } }));
-        }
-        clearTimer() { if (this.timer !== undefined)
-            clearTimeout(this.timer); this.timer = undefined; }
-        get appearance() { return this.getAttribute("appearance") === "inverted" ? "inverted" : "normal"; }
-        get positioningOptions() { return typeof this.positioningValue === "object" && this.positioningValue !== null ? this.positioningValue : undefined; }
-        parsePosition(raw, direction) {
-            const parts = raw.split("-");
-            const placement = normalizePosition(parts[0], direction);
-            const suffix = parts[1];
-            const requestedAlign = suffix === "start" || suffix === "end" || suffix === "top" || suffix === "bottom" ? suffix : "center";
-            const vertical = placement === "top" || placement === "bottom";
-            const align = vertical ? requestedAlign === "start" || requestedAlign === "end" ? requestedAlign : "center" : requestedAlign === "top" || requestedAlign === "bottom" ? requestedAlign : "center";
-            return [placement, align];
-        }
-        getRequestedPosition(direction) {
-            const configured = this.positioningValue;
-            const raw = typeof configured === "string" ? configured : configured?.position ?? this.getAttribute("positioning") ?? this.getAttribute("placement") ?? "above";
-            const [placement, suffixAlign] = this.parsePosition(raw, direction);
-            const configuredAlign = typeof configured === "object" && configured !== null ? configured.align : undefined;
-            const attributeAlign = this.getAttribute("align");
-            const requestedAlign = configuredAlign ?? attributeAlign ?? suffixAlign;
-            const vertical = placement === "top" || placement === "bottom";
-            const align = vertical ? requestedAlign === "start" || requestedAlign === "end" ? requestedAlign : "center" : requestedAlign === "top" || requestedAlign === "bottom" ? requestedAlign : "center";
-            return [placement, align, raw];
-        }
-        get relationship() {
-            const value = this.getAttribute("relationship");
-            return value === "label" || value === "inaccessible" ? value : "description";
-        }
-        get showDelay() { return this.parseDelay(this.getAttribute("show-delay") ?? this.getAttribute("delay"), 250); }
-        get hideDelay() { return this.parseDelay(this.getAttribute("hide-delay"), 250); }
-        parseDelay(value, fallback) { if (value === null || value.trim() === "")
-            return fallback; const delay = Number(value); return Number.isFinite(delay) && delay >= 0 ? delay : fallback; }
-        applyRelationship() {
-            const trigger = this.trigger;
-            if (!trigger || !this.ariaBefore)
-                return;
-            this.restoreAriaValues();
-            if (!this.tooltip || this.relationship === "inaccessible")
-                return;
-            if ((trigger.shadowRoot || trigger.localName.includes("-")) && this.tooltip.getRootNode() !== trigger.shadowRoot && this.relationship === "description") {
-                const values = [this.ariaBefore.get("aria-description"), this.tooltip.textContent?.trim()].filter(Boolean);
-                if (values.length)
-                    trigger.setAttribute("aria-description", values.join(" "));
-                return;
-            }
-            const attribute = this.relationship === "label" ? "aria-labelledby" : "aria-describedby";
-            const values = new Set((this.ariaBefore.get(attribute) ?? "").split(/\s+/).filter(Boolean));
-            values.add(this.tooltip.id);
-            trigger.setAttribute(attribute, [...values].join(" "));
-        }
-        restoreAriaValues() {
-            if (!this.trigger || !this.ariaBefore)
-                return;
-            for (const [name, value] of this.ariaBefore)
-                value === null ? this.trigger.removeAttribute(name) : this.trigger.setAttribute(name, value);
-        }
-        restoreAria() {
-            if (!this.trigger)
-                return;
-            this.restoreAriaValues();
-            this.trigger = undefined;
-            this.ariaBefore = undefined;
-        }
-    }
-    customElements.define("spui-tooltip", SpuiTooltip);
-}

package/dist/elements/tree-model.d.ts

@@ -1,19 +0,0 @@
-export type TreeNode<T = unknown> = {
-    id: string | number;
-    label: string;
-    disabled?: boolean;
-    open?: boolean;
-    children?: readonly TreeNode<T>[];
-    value?: T;
-};
-export type VisibleTreeNode<T = unknown> = {
-    node: TreeNode<T>;
-    key: string;
-    parentKey?: string;
-    level: number;
-    position: number;
-    setSize: number;
-};
-export declare function treeNodeKey<T>(node: TreeNode<T>): string;
-export declare function flattenTree<T>(nodes: readonly TreeNode<T>[], expandedKeys: ReadonlySet<string>): VisibleTreeNode<T>[];
-export declare function flattenAllTree<T>(nodes: readonly TreeNode<T>[]): VisibleTreeNode<T>[];

package/dist/elements/tree-model.js

@@ -1,34 +0,0 @@
-export function treeNodeKey(node) { return String(node.id); }
-export function flattenTree(nodes, expandedKeys) {
-    const result = [];
-    const seenIds = new Set();
-    const stack = [];
-    for (let index = nodes.length - 1; index >= 0; index--)
-        stack.push({ node: nodes[index], level: 1, position: index + 1, setSize: nodes.length });
-    while (stack.length) {
-        const entry = stack.pop();
-        const key = treeNodeKey(entry.node);
-        if (seenIds.has(key))
-            continue;
-        seenIds.add(key);
-        result.push({ ...entry, key });
-        const children = entry.node.children ?? [];
-        if (children.length && expandedKeys.has(key)) {
-            for (let index = children.length - 1; index >= 0; index--)
-                stack.push({ node: children[index], parentKey: key, level: entry.level + 1, position: index + 1, setSize: children.length });
-        }
-    }
-    return result;
-}
-export function flattenAllTree(nodes) {
-    const expanded = new Set(), stack = [...nodes];
-    while (stack.length) {
-        const node = stack.pop(), key = treeNodeKey(node);
-        if (expanded.has(key))
-            continue;
-        expanded.add(key);
-        if (node.children)
-            stack.push(...node.children);
-    }
-    return flattenTree(nodes, expanded);
-}

package/dist/elements/tree.d.ts

@@ -1,5 +0,0 @@
-import { type TreeNode } from "./tree-model.js";
-export type TreeItemRenderer<T = unknown> = (node: TreeNode<T>, level: number) => Node | string | number | null;
-export type TreeCheckedItem = string | number | readonly [string | number, boolean | "mixed"];
-/** Accessible framework-neutral tree with nested data and roving focus. */
-export declare function defineTree(): void;