@xplortech/apollo-core 2.6.0 → 2.7.1

package/dist/collection/components/xpl-spotlight/xpl-spotlight.js

@@ -0,0 +1,1085 @@
+import { Host, forceUpdate, h, } from "@stencil/core";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+const SPOTLIGHT_FOCUS_BUTTON_SELECTOR = '.xpl-spotlight__dismiss button, .xpl-spotlight__actions button';
+const SPOTLIGHT_FOCUS_FALLBACK_MAX_TICKS = 120;
+const SPOTLIGHT_FOCUS_OBSERVER_MAX_MS = 2500;
+function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
+    return new Promise((resolve) => {
+        var _a, _b;
+        if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+            resolve(null);
+            return;
+        }
+        let ticks = 0;
+        let rafId;
+        let timeoutId;
+        const finish = (value) => {
+            if (rafId !== undefined && typeof cancelAnimationFrame !== 'undefined') {
+                cancelAnimationFrame(rafId);
+            }
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+            }
+            resolve(value);
+        };
+        const onAbort = () => finish(null);
+        (_b = options === null || options === void 0 ? void 0 : options.signal) === null || _b === void 0 ? void 0 : _b.addEventListener('abort', onAbort, { once: true });
+        const schedule = (fn) => {
+            if (typeof requestAnimationFrame !== 'undefined') {
+                rafId = requestAnimationFrame(() => {
+                    rafId = undefined;
+                    fn();
+                });
+            }
+            else {
+                timeoutId = setTimeout(() => {
+                    timeoutId = undefined;
+                    fn();
+                }, 0);
+            }
+        };
+        const tick = () => {
+            var _a, _b, _c;
+            if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+                finish(null);
+                return;
+            }
+            const el = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
+            if (el) {
+                (_b = options === null || options === void 0 ? void 0 : options.signal) === null || _b === void 0 ? void 0 : _b.removeEventListener('abort', onAbort);
+                finish(el);
+                return;
+            }
+            ticks += 1;
+            if (ticks >= SPOTLIGHT_FOCUS_FALLBACK_MAX_TICKS) {
+                (_c = options === null || options === void 0 ? void 0 : options.signal) === null || _c === void 0 ? void 0 : _c.removeEventListener('abort', onAbort);
+                finish(null);
+                return;
+            }
+            schedule(tick);
+        };
+        schedule(tick);
+    });
+}
+function waitForSpotlightFocusButton(root, options) {
+    var _a;
+    const existing = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
+    if (existing) {
+        return Promise.resolve(existing);
+    }
+    if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+        return Promise.resolve(null);
+    }
+    if (typeof MutationObserver === 'undefined') {
+        return waitForSpotlightFocusButtonWithoutMutationObserver(root, options);
+    }
+    return new Promise((resolve) => {
+        var _a;
+        let settled = false;
+        let timeoutId;
+        let observer;
+        function finish(value) {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            observer.disconnect();
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+            }
+            resolve(value);
+        }
+        observer = new MutationObserver(() => {
+            const el = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
+            if (el) {
+                finish(el);
+            }
+        });
+        observer.observe(root instanceof Node ? root : document, {
+            childList: true,
+            subtree: true,
+        });
+        timeoutId = setTimeout(() => finish(null), SPOTLIGHT_FOCUS_OBSERVER_MAX_MS);
+        (_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', () => {
+            finish(null);
+        }, { once: true });
+    });
+}
+let spotlightHeadingSeq = 0;
+const ANCHOR_TO_PLACEMENT = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+};
+const PLACEMENT_TO_CORNER = {
+    top: 'bottom-left',
+    'top-start': 'bottom-left',
+    'top-end': 'bottom-right',
+    bottom: 'top-left',
+    'bottom-start': 'top-left',
+    'bottom-end': 'top-right',
+    left: 'top-right',
+    'left-start': 'top-right',
+    'left-end': 'bottom-right',
+    right: 'top-left',
+    'right-start': 'top-left',
+    'right-end': 'bottom-left',
+};
+const FLOATING_UI_OFFSET_PX = 12;
+const FLOATING_UI_SHIFT_PADDING_PX = 8;
+export class Spotlight {
+    constructor() {
+        this.cleanupAutoUpdate = null;
+        this.enterVisibleFrameId = null;
+        this.focusFrameId = null;
+        this.hasCompletedInitialLoad = false;
+        this.headingId = (() => {
+            spotlightHeadingSeq += 1;
+            return `xpl-spotlight-heading-${spotlightHeadingSeq}`;
+        })();
+        this.pendingEnterTransitionAfterAnchor = false;
+        this.pendingEnterVisible = false;
+        this.positioningGeneration = 0;
+        this.previousFocus = null;
+        this.referenceEl = null;
+        this.shouldMoveFocusOnRender = false;
+        this.shouldReinitializeAfterReconnect = false;
+        this.slotContentObserver = null;
+        this.hasBodySlotContent = false;
+        this.hasFloatingPosition = false;
+        this.hasImageSlotContent = false;
+        this.hasTitleSlotContent = false;
+        this.isVisible = false;
+        this.resolvedAnchorPosition = 'top-left';
+        this.actionLayout = 'default';
+        this.anchorPosition = 'top-left';
+        this.currentStep = 1;
+        this.isDismissible = true;
+        this.isOpen = true;
+        this.primaryActionLabel = 'Next';
+        this.secondaryActionLabel = 'Back';
+        this.showActions = true;
+        this.showImage = true;
+        this.showSteps = true;
+        this.totalSteps = 1;
+        this.emitDismiss = () => {
+            this.dismiss.emit();
+        };
+        this.handleDismissClick = () => {
+            this.emitDismiss();
+        };
+        this.handlePrimaryClick = () => {
+            this.primaryAction.emit();
+        };
+        this.handleSecondaryClick = () => {
+            this.secondaryAction.emit();
+        };
+        this.handleTargetClick = () => {
+            this.targetClick.emit();
+        };
+        this.syncTitleSlotIds = () => {
+            const first = this.getFirstTitleSlottedElement();
+            if (first && !first.id) {
+                first.id = this.headingId;
+            }
+        };
+        this.handleBodySlotChange = () => {
+            this.refreshBodySlotState();
+        };
+        this.handleTitleSlotChange = () => {
+            this.refreshTitleSlotState();
+            this.syncTitleSlotIds();
+        };
+        this.handleImageSlotChange = () => {
+            this.refreshImageSlotState();
+        };
+        this.handleSlotContentMutation = () => {
+            this.refreshBodySlotState();
+            this.refreshImageSlotState();
+            this.refreshTitleSlotState();
+            this.syncTitleSlotIds();
+        };
+        this.updatePosition = async (referenceEl) => {
+            var _a, _b, _c, _d, _e, _f;
+            const generation = this.positioningGeneration;
+            try {
+                const initialPlacement = ANCHOR_TO_PLACEMENT[this.anchorPosition];
+                const { x, y, placement, middlewareData } = await computePosition(referenceEl, this.el, {
+                    strategy: 'fixed',
+                    placement: initialPlacement,
+                    middleware: [
+                        offset(FLOATING_UI_OFFSET_PX),
+                        flip({ crossAxis: false }),
+                        shift({ padding: FLOATING_UI_SHIFT_PADDING_PX }),
+                    ],
+                });
+                if (generation !== this.positioningGeneration) {
+                    return;
+                }
+                this.el.style.left = `${x}px`;
+                this.el.style.top = `${y}px`;
+                const shiftX = (_b = (_a = middlewareData.shift) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
+                const shiftY = (_d = (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0;
+                this.el.style.setProperty('--xpl-spotlight-shift-x', `${-shiftX}px`);
+                this.el.style.setProperty('--xpl-spotlight-shift-y', `${-shiftY}px`);
+                this.hasFloatingPosition = true;
+                const corner = (_e = PLACEMENT_TO_CORNER[placement]) !== null && _e !== void 0 ? _e : PLACEMENT_TO_CORNER[(_f = placement.split('-')[0]) !== null && _f !== void 0 ? _f : ''];
+                this.resolvedAnchorPosition = corner !== null && corner !== void 0 ? corner : this.anchorPosition;
+                if (this.pendingEnterTransitionAfterAnchor) {
+                    this.scheduleEnterTransition();
+                }
+            }
+            catch (_g) {
+                if (generation !== this.positioningGeneration) {
+                    return;
+                }
+                this.clearFloatingHostCoordinates();
+                if (this.isOpenEnabled) {
+                    this.scheduleEnterTransition({ skipAnchorWait: true });
+                    await forceUpdate(this);
+                }
+            }
+        };
+    }
+    onAnchorPositionChange() {
+        if (!this.target) {
+            this.resolvedAnchorPosition = this.anchorPosition;
+        }
+        else if (this.referenceEl) {
+            this.updatePosition(this.referenceEl).catch(() => { });
+        }
+        else {
+            this.resolvedAnchorPosition = this.anchorPosition;
+        }
+    }
+    onIsOpenChange(isOpen) {
+        if (Spotlight.coerceBoolean(isOpen)) {
+            this.previousFocus =
+                document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            this.shouldMoveFocusOnRender = true;
+            this.isVisible = false;
+            this.refreshBodySlotState();
+            this.refreshTitleSlotState();
+            this.refreshImageSlotState();
+            if (this.target) {
+                if (this.cleanupAutoUpdate &&
+                    this.referenceEl &&
+                    this.el.ownerDocument.contains(this.referenceEl)) {
+                    this.hasFloatingPosition = false;
+                }
+                else {
+                    this.startPositioning();
+                }
+            }
+            this.scheduleEnterTransition();
+            return;
+        }
+        this.cancelEnterTransition();
+        this.cancelPendingFocusWait();
+        this.isVisible = false;
+        if (!this.target) {
+            this.stopPositioning();
+        }
+        this.restoreFocus();
+    }
+    onTargetChange() {
+        if (!this.target) {
+            this.stopPositioning();
+            this.resolvedAnchorPosition = this.anchorPosition;
+            return;
+        }
+        this.startPositioning();
+    }
+    connectedCallback() {
+        if (!this.shouldReinitializeAfterReconnect) {
+            return;
+        }
+        this.shouldReinitializeAfterReconnect = false;
+        this.startSlotContentObserver();
+        if (this.target) {
+            this.startPositioning();
+        }
+        if (!this.isOpenEnabled) {
+            this.isVisible = false;
+            return;
+        }
+        this.previousFocus =
+            document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        this.shouldMoveFocusOnRender = true;
+        this.scheduleEnterTransition();
+        if (this.pendingEnterVisible) {
+            Promise.resolve(forceUpdate(this)).catch(() => { });
+        }
+    }
+    disconnectedCallback() {
+        this.cancelEnterTransition();
+        this.cancelPendingFocusWait();
+        this.stopSlotContentObserver();
+        this.stopPositioning();
+        if (this.hasCompletedInitialLoad) {
+            this.shouldReinitializeAfterReconnect = true;
+        }
+    }
+    componentWillLoad() {
+        this.resolvedAnchorPosition = this.anchorPosition;
+        this.hasBodySlotContent = this.hasSlottedContent('body');
+        this.hasImageSlotContent = this.hasSlottedContent('image');
+        this.hasTitleSlotContent = this.hasSlottedContent('title');
+        if (this.isOpenEnabled) {
+            this.previousFocus =
+                document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            if (!this.target) {
+                this.pendingEnterVisible = true;
+            }
+        }
+        this.shouldMoveFocusOnRender = this.isOpenEnabled;
+    }
+    componentDidLoad() {
+        this.hasCompletedInitialLoad = true;
+        this.startSlotContentObserver();
+        if (this.target) {
+            this.startPositioning();
+        }
+        if (!this.isOpenEnabled) {
+            this.isVisible = false;
+            return;
+        }
+        if (this.target) {
+            this.scheduleEnterTransition();
+            if (this.pendingEnterVisible) {
+                Promise.resolve(forceUpdate(this)).catch(() => { });
+            }
+        }
+    }
+    componentDidRender() {
+        if (this.isOpenEnabled) {
+            this.syncTitleSlotIds();
+        }
+        if (this.pendingEnterVisible && this.isOpenEnabled) {
+            this.pendingEnterVisible = false;
+            this.enterVisibleFrameId = requestAnimationFrame(() => {
+                this.enterVisibleFrameId = null;
+                if (this.isOpenEnabled) {
+                    this.isVisible = true;
+                }
+            });
+        }
+        if (!this.shouldMoveFocusOnRender || !this.isOpenEnabled) {
+            return;
+        }
+        this.shouldMoveFocusOnRender = false;
+        this.focusInitial();
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape' && this.shouldHandleDismissKeyboardEvent()) {
+            ev.preventDefault();
+            this.emitDismiss();
+        }
+    }
+    get effectiveTotalSteps() {
+        return Math.max(1, this.totalSteps);
+    }
+    get effectiveCurrentStep() {
+        return Math.min(this.effectiveTotalSteps, Math.max(1, this.currentStep));
+    }
+    get isDismissibleEnabled() {
+        return Spotlight.coerceBoolean(this.isDismissible);
+    }
+    get isOpenEnabled() {
+        return Spotlight.coerceBoolean(this.isOpen);
+    }
+    get isSingleActionLayout() {
+        return this.actionLayout === 'single';
+    }
+    get usesHiddenEdgeActions() {
+        return this.actionLayout === 'dual';
+    }
+    get isPrimaryStepActionDisabled() {
+        return (!this.usesHiddenEdgeActions &&
+            this.showStepsEnabled &&
+            this.effectiveCurrentStep >= this.effectiveTotalSteps);
+    }
+    get isSecondaryStepActionDisabled() {
+        return (!this.usesHiddenEdgeActions && this.showStepsEnabled && this.effectiveCurrentStep <= 1);
+    }
+    get shouldShowPrimaryAction() {
+        if (this.isSingleActionLayout) {
+            return true;
+        }
+        if (!this.usesHiddenEdgeActions) {
+            return true;
+        }
+        if (!this.showStepsEnabled) {
+            return true;
+        }
+        return this.effectiveCurrentStep < this.effectiveTotalSteps;
+    }
+    get shouldShowSecondaryAction() {
+        if (this.isSingleActionLayout) {
+            return false;
+        }
+        if (!this.usesHiddenEdgeActions) {
+            return true;
+        }
+        if (!this.showStepsEnabled) {
+            return true;
+        }
+        return this.effectiveCurrentStep > 1;
+    }
+    get hasRenderableFocusChrome() {
+        if (this.isDismissibleEnabled) {
+            return true;
+        }
+        if (!this.showActionsEnabled) {
+            return false;
+        }
+        return this.shouldShowPrimaryAction || this.shouldShowSecondaryAction;
+    }
+    get showActionsEnabled() {
+        return Spotlight.coerceBoolean(this.showActions);
+    }
+    get showImageEnabled() {
+        return Spotlight.coerceBoolean(this.showImage);
+    }
+    get showStepsEnabled() {
+        return Spotlight.coerceBoolean(this.showSteps);
+    }
+    get headingPropHasText() {
+        var _a;
+        return Boolean((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim());
+    }
+    get bodyPropHasText() {
+        var _a;
+        return Boolean((_a = this.body) === null || _a === void 0 ? void 0 : _a.trim());
+    }
+    async focusInitial() {
+        var _a;
+        (_a = this.focusAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.focusAbort = new AbortController();
+        if (!this.hasRenderableFocusChrome && this.isOpenEnabled) {
+            this.focusFrameId = requestAnimationFrame(() => {
+                this.focusFrameId = null;
+                if (!this.isOpenEnabled) {
+                    return;
+                }
+                this.el.focus();
+            });
+            return;
+        }
+        const target = await waitForSpotlightFocusButton(this.el, {
+            signal: this.focusAbort.signal,
+        });
+        if (target) {
+            target.focus();
+        }
+        else if (this.isOpenEnabled) {
+            this.el.focus();
+        }
+    }
+    shouldHandleDismissKeyboardEvent() {
+        if (!this.isDismissibleEnabled || !this.isOpenEnabled || !this.isVisible) {
+            return false;
+        }
+        const { activeElement } = document;
+        return (Boolean(activeElement) && (activeElement === this.el || this.el.contains(activeElement)));
+    }
+    restoreFocus() {
+        var _a;
+        if ((_a = this.previousFocus) === null || _a === void 0 ? void 0 : _a.isConnected) {
+            this.previousFocus.focus();
+        }
+    }
+    cancelPendingFocusWait() {
+        var _a;
+        (_a = this.focusAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        if (this.focusFrameId != null) {
+            cancelAnimationFrame(this.focusFrameId);
+            this.focusFrameId = null;
+        }
+    }
+    cancelEnterTransition() {
+        if (this.enterVisibleFrameId !== null) {
+            cancelAnimationFrame(this.enterVisibleFrameId);
+            this.enterVisibleFrameId = null;
+        }
+        this.pendingEnterVisible = false;
+    }
+    scheduleEnterTransition(options) {
+        this.cancelEnterTransition();
+        const shouldDeferUntilAnchored = !(options === null || options === void 0 ? void 0 : options.skipAnchorWait) &&
+            Boolean(this.target && this.referenceEl) &&
+            !this.hasFloatingPosition;
+        if (shouldDeferUntilAnchored) {
+            this.pendingEnterTransitionAfterAnchor = true;
+            return;
+        }
+        this.pendingEnterTransitionAfterAnchor = false;
+        this.pendingEnterVisible = true;
+    }
+    getFirstTitleSlottedElement() {
+        var _a;
+        const fromHost = Array.from(this.el.children).find((node) => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'title');
+        if (fromHost) {
+            return fromHost;
+        }
+        const slot = this.el.querySelector('slot[name="title"]');
+        if (!slot) {
+            return null;
+        }
+        return ((_a = Array.from(slot.assignedNodes({ flatten: true })).find((node) => node.nodeType === Node.ELEMENT_NODE)) !== null && _a !== void 0 ? _a : null);
+    }
+    getDialogLabelId() {
+        if (this.hasTitleSlotContent) {
+            const first = this.getFirstTitleSlottedElement();
+            if (first === null || first === void 0 ? void 0 : first.id) {
+                return first.id;
+            }
+            return this.headingId;
+        }
+        if (this.headingPropHasText) {
+            return this.headingId;
+        }
+        return undefined;
+    }
+    refreshBodySlotState() {
+        const next = this.hasSlottedContent('body');
+        if (this.hasBodySlotContent === next) {
+            return;
+        }
+        this.hasBodySlotContent = next;
+    }
+    refreshTitleSlotState() {
+        const next = this.hasSlottedContent('title');
+        if (this.hasTitleSlotContent === next) {
+            return;
+        }
+        this.hasTitleSlotContent = next;
+    }
+    static coerceBoolean(value) {
+        if (typeof value === 'string') {
+            const normalized = value.trim().toLowerCase();
+            return normalized !== 'false';
+        }
+        return Boolean(value);
+    }
+    refreshImageSlotState() {
+        const next = this.hasSlottedContent('image');
+        if (this.hasImageSlotContent === next) {
+            return;
+        }
+        this.hasImageSlotContent = next;
+    }
+    startSlotContentObserver() {
+        if (typeof MutationObserver === 'undefined' || this.slotContentObserver) {
+            return;
+        }
+        this.slotContentObserver = new MutationObserver(this.handleSlotContentMutation);
+        this.slotContentObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: ['slot'],
+            childList: true,
+            subtree: true,
+        });
+    }
+    stopSlotContentObserver() {
+        var _a;
+        (_a = this.slotContentObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.slotContentObserver = null;
+    }
+    hasSlottedContent(slotName) {
+        const slot = this.el.querySelector(`slot[name="${slotName}"]`);
+        const fromQuery = this.el.querySelector(`[slot="${slotName}"]`);
+        const fromHostChildren = Array.from(this.el.children).some((el) => el.getAttribute('slot') === slotName);
+        const hasAssigned = slot
+            ? slot
+                .assignedNodes({ flatten: true })
+                .some((n) => {
+                var _a;
+                return n.nodeType === Node.ELEMENT_NODE ||
+                    (n.nodeType === Node.TEXT_NODE && ((_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim()));
+            })
+            : false;
+        return Boolean(fromQuery || fromHostChildren) || hasAssigned;
+    }
+    startPositioning() {
+        if (!this.target) {
+            return;
+        }
+        let el = null;
+        try {
+            el = this.el.ownerDocument.querySelector(this.target);
+        }
+        catch (_a) {
+            this.stopPositioning();
+            this.resolvedAnchorPosition = this.anchorPosition;
+            return;
+        }
+        if (!el) {
+            this.stopPositioning();
+            this.resolvedAnchorPosition = this.anchorPosition;
+            return;
+        }
+        this.detachFloatingUiListeners();
+        this.referenceEl = el;
+        this.cleanupAutoUpdate = autoUpdate(el, this.el, () => {
+            this.updatePosition(el).catch(() => { });
+        });
+    }
+    detachFloatingUiListeners() {
+        this.positioningGeneration += 1;
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = null;
+        }
+    }
+    resetFloatingHostPosition() {
+        this.el.style.left = '';
+        this.el.style.top = '';
+        this.el.style.removeProperty('--xpl-spotlight-shift-x');
+        this.el.style.removeProperty('--xpl-spotlight-shift-y');
+        this.hasFloatingPosition = false;
+        this.pendingEnterTransitionAfterAnchor = false;
+        this.referenceEl = null;
+    }
+    clearFloatingHostCoordinates() {
+        this.el.style.left = '';
+        this.el.style.top = '';
+        this.el.style.removeProperty('--xpl-spotlight-shift-x');
+        this.el.style.removeProperty('--xpl-spotlight-shift-y');
+        this.hasFloatingPosition = false;
+        this.pendingEnterTransitionAfterAnchor = false;
+        this.resolvedAnchorPosition = this.anchorPosition;
+    }
+    stopPositioning() {
+        this.detachFloatingUiListeners();
+        this.resetFloatingHostPosition();
+    }
+    render() {
+        if (!this.isOpenEnabled) {
+            if (this.target) {
+                return (h(Host, { class: {
+                        'xpl-spotlight': true,
+                        'xpl-spotlight--target-only': true,
+                        [`xpl-spotlight--${this.resolvedAnchorPosition}`]: true,
+                        'xpl-spotlight--anchored': this.hasFloatingPosition,
+                    } }, h("button", { type: "button", class: "xpl-spotlight__target", "aria-label": "Spotlight indicator", onClick: this.handleTargetClick }, h("div", { class: "xpl-spotlight__target-outer" }), h("div", { class: "xpl-spotlight__target-inner" }))));
+            }
+            return (h(Host, { "aria-hidden": "true", class: {
+                    'xpl-spotlight': true,
+                    'xpl-spotlight--closed': true,
+                } }));
+        }
+        const { isSingleActionLayout, shouldShowPrimaryAction: showPrimaryAction, shouldShowSecondaryAction: showSecondaryAction, showActionsEnabled: showActions, showImageEnabled: showImage, showStepsEnabled: showSteps, } = this;
+        return (h(Host, { class: {
+                [`xpl-spotlight--action-layout-${this.actionLayout}`]: showActions,
+                'xpl-spotlight': true,
+                [`xpl-spotlight--${this.resolvedAnchorPosition}`]: true,
+                'xpl-spotlight--anchored': this.hasFloatingPosition,
+                'xpl-spotlight--no-image': !showImage,
+                'xpl-spotlight--only-primary-action': showActions && showPrimaryAction && !showSecondaryAction,
+                'xpl-spotlight--only-secondary-action': showActions && showSecondaryAction && !showPrimaryAction,
+                'xpl-spotlight--visible': this.isVisible,
+            }, role: "dialog", "aria-modal": "false", "aria-label": this.getDialogLabelId() ? undefined : 'Tour step', "aria-labelledby": this.getDialogLabelId(), tabindex: -1 }, h("button", { type: "button", class: "xpl-spotlight__target", "aria-label": "Spotlight indicator", onClick: this.handleTargetClick }, h("div", { class: "xpl-spotlight__target-outer" }), h("div", { class: "xpl-spotlight__target-inner" })), this.isDismissibleEnabled && (h("div", { class: "xpl-spotlight__dismiss" }, h("xpl-button", { variant: "secondary", size: "sm", iconOnly: true, "aria-label": "Dismiss tour step", onClick: this.handleDismissClick }, h("xpl-icon", { icon: "xmark", size: 16 })))), h("div", { class: "xpl-spotlight__frame" }, h("div", { class: {
+                'xpl-spotlight__image-container': true,
+                'xpl-spotlight__image-container--empty': !this.hasImageSlotContent,
+                'xpl-spotlight__image-container--hidden': !showImage,
+            } }, !this.hasImageSlotContent && showImage && (h("div", { class: "xpl-spotlight__image-placeholder", "aria-hidden": "true" }, h("xpl-icon", { icon: "photo", size: 24 }), h("xpl-icon", { icon: "video", size: 24 }))), h("slot", { name: "image", onSlotchange: this.handleImageSlotChange })), h("div", { class: "xpl-spotlight__content" }, h("div", { class: "xpl-spotlight__header" }, h("slot", { name: "title", onSlotchange: this.handleTitleSlotChange }, !this.hasTitleSlotContent && this.headingPropHasText && (h("span", { class: "xpl-spotlight__title", id: this.headingId }, this.heading))), h("slot", { name: "body", onSlotchange: this.handleBodySlotChange }, !this.hasBodySlotContent && this.bodyPropHasText && (h("p", { class: "xpl-spotlight__body" }, this.body)))), showActions && (h("div", { class: {
+                'xpl-spotlight__actions': true,
+                'xpl-spotlight__actions--dual': !isSingleActionLayout,
+                'xpl-spotlight__actions--single': isSingleActionLayout,
+                'xpl-spotlight__actions--with-steps': showSteps,
+                'xpl-spotlight__actions--only-primary': showPrimaryAction && !showSecondaryAction,
+                'xpl-spotlight__actions--only-secondary': showSecondaryAction && !showPrimaryAction,
+            } }, h("div", { class: "xpl-spotlight__action-slot xpl-spotlight__action-slot--secondary" }, showSecondaryAction && (h("xpl-button", { class: "xpl-spotlight__secondary-action", variant: "secondary", size: "default", disabled: this.isSecondaryStepActionDisabled, onClick: this.handleSecondaryClick }, this.secondaryActionLabel))), showSteps && (h("span", { class: "xpl-spotlight__step-text" }, this.effectiveCurrentStep, " of ", this.effectiveTotalSteps)), h("div", { class: "xpl-spotlight__action-slot xpl-spotlight__action-slot--primary" }, showPrimaryAction && (h("xpl-button", { class: "xpl-spotlight__primary-action", variant: "primary", size: "default", disabled: this.isPrimaryStepActionDisabled, onClick: this.handlePrimaryClick }, this.primaryActionLabel)))))))));
+    }
+    static get is() { return "xpl-spotlight"; }
+    static get properties() {
+        return {
+            "actionLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpotlightActionLayout",
+                    "resolved": "\"default\" | \"dual\" | \"single\"",
+                    "references": {
+                        "SpotlightActionLayout": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-spotlight/xpl-spotlight.tsx",
+                            "id": "src/components/components/xpl-spotlight/xpl-spotlight.tsx::SpotlightActionLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer action layout. `default` and `dual` both render the standard Back/Next layout, while\n`single` renders a single acknowledgement CTA (e.g. \"Got it!\").\nOnly applies when `showActions` is `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-layout",
+                "defaultValue": "'default'"
+            },
+            "anchorPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpotlightAnchorPosition",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "SpotlightAnchorPosition": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-spotlight/xpl-spotlight.tsx",
+                            "id": "src/components/components/xpl-spotlight/xpl-spotlight.tsx::SpotlightAnchorPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which corner of the card the anchor dot uses when not using `target`, or as the preferred side for Floating UI."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor-position",
+                "defaultValue": "'top-left'"
+            },
+            "body": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Body copy when the `body` slot has no slotted content. Whitespace-only values are treated as empty (no fallback paragraph)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "body"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current step index (1-based). Used with `totalSteps` for the step label and for disabling\ndefault Back/Next when `showSteps` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "1"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading when the `title` slot has no slotted content. Whitespace-only values are treated as empty (no fallback title span)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "isDismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the dismiss (close) control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-dismissible",
+                "defaultValue": "true"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the spotlight is rendered. When false, the host remains in the DOM but the spotlight UI is hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "true"
+            },
+            "primaryActionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label used for the default primary action button. Only applies when `showActions` is `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-action-label",
+                "defaultValue": "'Next'"
+            },
+            "secondaryActionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label used for the default secondary action button. Only applies when `showActions` is `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-action-label",
+                "defaultValue": "'Back'"
+            },
+            "showActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the actions row (primary / secondary and optional step counter).\nWhen `false`, the spotlight has no action buttons \u2014 useful for single-step\ninformational callouts that rely solely on the dismiss control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-actions",
+                "defaultValue": "true"
+            },
+            "showImage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the media region is shown. Slotted `image` content is rendered when present;\notherwise the built-in placeholder UI is shown. When false, the entire media block is hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-image",
+                "defaultValue": "true"
+            },
+            "showSteps": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the step counter between actions (`currentStep` of `totalSteps`) and whether\ndefault Back/Next use step-based disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-steps",
+                "defaultValue": "true"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS selector for the element this spotlight anchors to. When set, placement uses Floating UI\n(`computePosition` with `strategy: 'fixed'`, plus `flip`, `shift`, `offset`) and `autoUpdate`\nfor scroll/resize. The host receives `left` / `top` and the `xpl-spotlight--anchored` class.\nInvalid selectors are ignored; layout falls back to `anchor-position`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "totalSteps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of steps (1-based upper bound). Used with `currentStep` for the step label and\nfor disabling default Back/Next when `showSteps` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-steps",
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasBodySlotContent": {},
+            "hasFloatingPosition": {},
+            "hasImageSlotContent": {},
+            "hasTitleSlotContent": {},
+            "isVisible": {},
+            "resolvedAnchorPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dismiss",
+                "name": "dismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dismiss control is activated or Escape is pressed (when dismissible)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "primaryAction",
+                "name": "primaryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the primary action control is activated (default: Next)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "secondaryAction",
+                "name": "secondaryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the secondary action control is activated (default: Back)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "targetClick",
+                "name": "targetClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the target indicator is clicked. Consumers typically toggle `isOpen` in response."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "anchorPosition",
+                "methodName": "onAnchorPositionChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "onIsOpenChange"
+            }, {
+                "propName": "target",
+                "methodName": "onTargetChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}