@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/esm/xpl-spotlight.entry.js

@@ -0,0 +1,720 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { i as isBrowser } from './lifecycle-Dqb1pIRo.js';
+import { c as computePosition, a as autoUpdate, o as offset, f as flip, s as shift } from './floating-ui.dom-1M1pu0C2.js';
+
+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) => {
+        if (options?.signal?.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);
+        options?.signal?.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 = () => {
+            if (options?.signal?.aborted) {
+                finish(null);
+                return;
+            }
+            const el = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
+            if (el) {
+                options?.signal?.removeEventListener('abort', onAbort);
+                finish(el);
+                return;
+            }
+            ticks += 1;
+            if (ticks >= SPOTLIGHT_FOCUS_FALLBACK_MAX_TICKS) {
+                options?.signal?.removeEventListener('abort', onAbort);
+                finish(null);
+                return;
+            }
+            schedule(tick);
+        };
+        schedule(tick);
+    });
+}
+function waitForSpotlightFocusButton(root, options) {
+    const existing = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
+    if (existing) {
+        return Promise.resolve(existing);
+    }
+    if (options?.signal?.aborted) {
+        return Promise.resolve(null);
+    }
+    if (typeof MutationObserver === 'undefined') {
+        return waitForSpotlightFocusButtonWithoutMutationObserver(root, options);
+    }
+    return new Promise((resolve) => {
+        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);
+        options?.signal?.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;
+const Spotlight = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dismiss = createEvent(this, "dismiss", 7);
+        this.primaryAction = createEvent(this, "primaryAction", 7);
+        this.secondaryAction = createEvent(this, "secondaryAction", 7);
+        this.targetClick = createEvent(this, "targetClick", 7);
+        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.dialogLabelId = undefined;
+        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) => {
+            if (!isBrowser()) {
+                return;
+            }
+            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 = middlewareData.shift?.x ?? 0;
+                const shiftY = middlewareData.shift?.y ?? 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 = PLACEMENT_TO_CORNER[placement] ??
+                    PLACEMENT_TO_CORNER[placement.split('-')[0] ?? ''];
+                this.resolvedAnchorPosition = corner ?? this.anchorPosition;
+                if (this.pendingEnterTransitionAfterAnchor) {
+                    this.scheduleEnterTransition();
+                }
+            }
+            catch {
+                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.capturePreviousFocus();
+            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.capturePreviousFocus();
+        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');
+        this.dialogLabelId = this.getDialogLabelId();
+        if (this.isOpenEnabled && !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();
+        }
+        const nextLabelId = this.getDialogLabelId();
+        if (this.dialogLabelId !== nextLabelId) {
+            this.dialogLabelId = nextLabelId;
+        }
+        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.capturePreviousFocus();
+        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() {
+        return Boolean(this.heading?.trim());
+    }
+    get bodyPropHasText() {
+        return Boolean(this.body?.trim());
+    }
+    async focusInitial() {
+        this.focusAbort?.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)));
+    }
+    capturePreviousFocus() {
+        if (!isBrowser()) {
+            return;
+        }
+        this.previousFocus =
+            document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
+    restoreFocus() {
+        if (this.previousFocus?.isConnected) {
+            this.previousFocus.focus();
+        }
+    }
+    cancelPendingFocusWait() {
+        this.focusAbort?.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?.skipAnchorWait &&
+            Boolean(this.target && this.referenceEl) &&
+            !this.hasFloatingPosition;
+        if (shouldDeferUntilAnchored) {
+            this.pendingEnterTransitionAfterAnchor = true;
+            return;
+        }
+        this.pendingEnterTransitionAfterAnchor = false;
+        this.pendingEnterVisible = true;
+    }
+    getFirstTitleSlottedElement() {
+        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 && typeof slot.assignedNodes === 'function') {
+            const assigned = Array.from(slot.assignedNodes({ flatten: true })).find((node) => node.nodeType === Node.ELEMENT_NODE);
+            if (assigned) {
+                return assigned;
+            }
+        }
+        return this.el.querySelector('[slot="title"]') ?? null;
+    }
+    getDialogLabelId() {
+        if (this.hasTitleSlotContent) {
+            const first = this.getFirstTitleSlottedElement();
+            if (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() {
+        this.slotContentObserver?.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) => n.nodeType === Node.ELEMENT_NODE ||
+                (n.nodeType === Node.TEXT_NODE && n.textContent?.trim()))
+            : false;
+        return Boolean(fromQuery || fromHostChildren) || hasAssigned;
+    }
+    startPositioning() {
+        if (!isBrowser()) {
+            return;
+        }
+        if (!this.target) {
+            return;
+        }
+        let el = null;
+        try {
+            el = this.el.ownerDocument.querySelector(this.target);
+        }
+        catch {
+            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.dialogLabelId ? undefined : 'Tour step', "aria-labelledby": this.dialogLabelId, 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)))))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "anchorPosition": [{
+                "onAnchorPositionChange": 0
+            }],
+        "isOpen": [{
+                "onIsOpenChange": 0
+            }],
+        "target": [{
+                "onTargetChange": 0
+            }]
+    }; }
+};
+
+export { Spotlight as xpl_spotlight };