@haiyue/ui 0.1.1 → 0.2.1

package/dist/toast.js

@@ -0,0 +1,224 @@
+const TYPES = ['success', 'info', 'warning', 'error', 'loading'];
+const PLACEMENTS = ['top', 'center', 'bottom'];
+const DEFAULT_DURATION = 3;
+const EXIT_DURATION = 150;
+function isType(value) {
+    return typeof value === 'string' && TYPES.includes(value);
+}
+function isPlacement(value) {
+    return typeof value === 'string' && PLACEMENTS.includes(value);
+}
+function finiteNonNegative(value, fallback) {
+    const number = Number(value);
+    return Number.isFinite(number) && number >= 0 ? number : fallback;
+}
+/** Lightweight imperative feedback center for short, transient messages. */
+export class HYToast extends HTMLElement {
+    _containers = new Map();
+    _toasts = new Map();
+    _sequence = 0;
+    static get observedAttributes() { return ['placement', 'duration', 'max-count']; }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { position: fixed; z-index: var(--hy-toast-z-index, 1200); inset: 0; display: block; pointer-events: none; }
+      .container { position: fixed; left: 50%; display: flex; width: min(var(--hy-toast-width, 420px), calc(100vw - 32px)); flex-direction: column; align-items: center; gap: var(--hy-toast-gap, 9px); pointer-events: none; transform: translateX(-50%); }
+      .container[data-placement="top"] { top: var(--hy-toast-offset, 24px); }
+      .container[data-placement="center"] { top: 50%; transform: translate(-50%, -50%); }
+      .container[data-placement="bottom"] { bottom: var(--hy-toast-offset, 24px); flex-direction: column-reverse; }
+      .toast {
+        --_tone: var(--hy-info-color, var(--hy-accent-color, #79a8ff));
+        display: grid;
+        grid-template-columns: 20px minmax(0, 1fr) auto;
+        gap: 9px;
+        min-width: min(240px, calc(100vw - 32px));
+        max-width: 100%;
+        box-sizing: border-box;
+        align-items: center;
+        padding: 10px 12px;
+        border: 1px solid color-mix(in srgb, var(--_tone) 28%, var(--hy-border-color, #303746));
+        border-radius: var(--hy-toast-radius, 8px);
+        color: var(--hy-text-color, #e8effa);
+        background: var(--hy-toast-bg-color, var(--hy-surface-elevated-color, #171e2a));
+        box-shadow: 0 10px 30px var(--hy-toast-shadow-color, rgba(0, 0, 0, .3));
+        pointer-events: auto;
+        font: 12px/1.45 system-ui, sans-serif;
+        animation: hy-toast-enter 160ms cubic-bezier(.22, 1, .36, 1);
+        transition: opacity 140ms ease, transform 140ms ease;
+      }
+      .toast[data-type="success"] { --_tone: var(--hy-success-color, #55c98a); }
+      .toast[data-type="warning"] { --_tone: var(--hy-warning-color, #e7b75a); }
+      .toast[data-type="error"] { --_tone: var(--hy-error-color, #ef6b78); }
+      .toast[data-type="loading"] { --_tone: var(--hy-accent-color, #79a8ff); }
+      .toast.closing { opacity: 0; transform: translateY(-6px) scale(.97); }
+      .container[data-placement="bottom"] .toast.closing { transform: translateY(6px) scale(.97); }
+      .icon { display: grid; width: 20px; height: 20px; place-items: center; color: var(--_tone); font-weight: 800; }
+      .toast[data-type="loading"] .icon { width: 15px; height: 15px; margin: 2px; border: 2px solid color-mix(in srgb, var(--_tone) 25%, transparent); border-top-color: var(--_tone); border-radius: 50%; animation: hy-toast-spin .75s linear infinite; font-size: 0; }
+      .message { min-width: 0; overflow-wrap: anywhere; }
+      .close { display: grid; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; place-items: center; color: var(--hy-secondary-text-color, #9aa8ba); background: transparent; cursor: pointer; font: 16px/1 system-ui, sans-serif; }
+      .close:hover { color: inherit; background: var(--hy-hover-bg-color, #242d3b); }
+      .close:focus-visible { outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: 1px; }
+      @keyframes hy-toast-enter { from { opacity: 0; transform: translateY(-7px) scale(.97); } }
+      @keyframes hy-toast-spin { to { transform: rotate(360deg); } }
+      @media (prefers-reduced-motion: reduce) { .toast { animation-duration: 1ms; transition-duration: 1ms; } .toast[data-type="loading"] .icon { animation-duration: 1.5s; } }
+    `;
+        root.append(style);
+        for (const placement of PLACEMENTS) {
+            const container = document.createElement('div');
+            container.className = 'container';
+            container.dataset.placement = placement;
+            root.append(container);
+            this._containers.set(placement, container);
+        }
+    }
+    connectedCallback() { this._syncAttributes(); }
+    disconnectedCallback() {
+        for (const toast of this._toasts.values())
+            this._removeToast(toast, false);
+        this._toasts.clear();
+        for (const container of this._containers.values())
+            container.replaceChildren();
+    }
+    attributeChangedCallback() { this._syncAttributes(); }
+    get placement() { return isPlacement(this.getAttribute('placement')) ? this.getAttribute('placement') : 'top'; }
+    set placement(value) { this.setAttribute('placement', isPlacement(value) ? value : 'top'); }
+    get duration() { return finiteNonNegative(this.getAttribute('duration'), DEFAULT_DURATION); }
+    set duration(value) { this.setAttribute('duration', String(finiteNonNegative(value, DEFAULT_DURATION))); }
+    get maxCount() {
+        const value = Math.floor(Number(this.getAttribute('max-count')));
+        return Number.isFinite(value) ? Math.min(20, Math.max(1, value)) : 5;
+    }
+    set maxCount(value) {
+        const normalized = Number.isFinite(Number(value)) ? Math.min(20, Math.max(1, Math.floor(Number(value)))) : 5;
+        this.setAttribute('max-count', String(normalized));
+    }
+    get closable() { return this.hasAttribute('closable'); }
+    set closable(value) { this.toggleAttribute('closable', Boolean(value)); }
+    get size() { return this._toasts.size; }
+    open(options) {
+        const normalized = typeof options === 'string' ? { message: options } : options;
+        const type = isType(normalized.type) ? normalized.type : 'info';
+        const placement = isPlacement(normalized.placement) ? normalized.placement : this.placement;
+        const fallbackDuration = type === 'loading' ? 0 : this.duration;
+        const duration = finiteNonNegative(normalized.duration, fallbackDuration);
+        const key = normalized.key ? String(normalized.key) : `hy-toast-${++this._sequence}`;
+        const existing = this._toasts.get(key);
+        if (existing)
+            this._removeToast(existing, false);
+        const element = this._createToast(key, type, String(normalized.message ?? ''), normalized.closable ?? this.closable);
+        const toast = { key, type, placement, element, timer: null, exitTimer: null, closing: false };
+        this._toasts.set(key, toast);
+        this._containers.get(placement)?.append(element);
+        while (this._toasts.size > this.maxCount) {
+            const oldest = this._toasts.values().next().value;
+            if (!oldest)
+                break;
+            this._removeToast(oldest, true, 'overflow');
+        }
+        if (duration > 0)
+            toast.timer = window.setTimeout(() => this._closeToast(toast, 'timeout'), duration * 1000);
+        this.dispatchEvent(new CustomEvent('toast-open', {
+            detail: { key, type, placement },
+            bubbles: true,
+            composed: true,
+        }));
+        return key;
+    }
+    success(options) { return this._openTyped('success', options); }
+    info(options) { return this._openTyped('info', options); }
+    warning(options) { return this._openTyped('warning', options); }
+    error(options) { return this._openTyped('error', options); }
+    loading(options) { return this._openTyped('loading', options); }
+    close(key) {
+        const toast = this._toasts.get(String(key));
+        if (toast)
+            this._closeToast(toast, 'programmatic');
+    }
+    clear() {
+        for (const toast of [...this._toasts.values()])
+            this._closeToast(toast, 'programmatic');
+    }
+    _openTyped(type, options) {
+        return this.open(typeof options === 'string' ? { type, message: options } : { ...options, type });
+    }
+    _createToast(key, type, message, closable) {
+        const toast = document.createElement('div');
+        toast.className = 'toast';
+        toast.dataset.key = key;
+        toast.dataset.type = type;
+        toast.part.add('toast');
+        toast.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
+        toast.setAttribute('aria-live', type === 'error' || type === 'warning' ? 'assertive' : 'polite');
+        const icon = document.createElement('span');
+        icon.className = 'icon';
+        icon.part.add('icon');
+        icon.setAttribute('aria-hidden', 'true');
+        icon.textContent = { success: '✓', info: 'i', warning: '!', error: '×', loading: '' }[type];
+        const text = document.createElement('span');
+        text.className = 'message';
+        text.part.add('message');
+        text.textContent = message;
+        toast.append(icon, text);
+        if (closable) {
+            const close = document.createElement('button');
+            close.className = 'close';
+            close.part.add('close-button');
+            close.type = 'button';
+            close.textContent = '×';
+            close.setAttribute('aria-label', `Close ${type} toast`);
+            close.addEventListener('click', () => {
+                const record = this._toasts.get(key);
+                if (record)
+                    this._closeToast(record, 'action');
+            });
+            toast.append(close);
+        }
+        return toast;
+    }
+    _closeToast(toast, reason) {
+        if (toast.closing || this._toasts.get(toast.key) !== toast)
+            return;
+        toast.closing = true;
+        if (toast.timer !== null)
+            window.clearTimeout(toast.timer);
+        toast.timer = null;
+        toast.element.classList.add('closing');
+        toast.exitTimer = window.setTimeout(() => this._removeToast(toast, true, reason), EXIT_DURATION);
+    }
+    _removeToast(toast, emit, reason = 'programmatic') {
+        if (toast.timer !== null)
+            window.clearTimeout(toast.timer);
+        if (toast.exitTimer !== null)
+            window.clearTimeout(toast.exitTimer);
+        toast.timer = null;
+        toast.exitTimer = null;
+        toast.element.remove();
+        if (this._toasts.get(toast.key) === toast)
+            this._toasts.delete(toast.key);
+        if (!emit)
+            return;
+        this.dispatchEvent(new CustomEvent('toast-close', {
+            detail: { key: toast.key, type: toast.type, placement: toast.placement, reason },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _syncAttributes() {
+        const placement = this.getAttribute('placement');
+        if (placement !== null && !isPlacement(placement))
+            this.setAttribute('placement', 'top');
+        const duration = this.getAttribute('duration');
+        if (duration !== null && finiteNonNegative(duration, -1) < 0)
+            this.setAttribute('duration', String(DEFAULT_DURATION));
+        const maxCount = this.getAttribute('max-count');
+        if (maxCount !== null && String(this.maxCount) !== maxCount)
+            this.setAttribute('max-count', String(this.maxCount));
+    }
+}
+export function defineToastComponents() {
+    if (!customElements.get('hy-toast'))
+        customElements.define('hy-toast', HYToast);
+}
+//# sourceMappingURL=toast.js.map

package/dist/tour.d.ts

@@ -0,0 +1,89 @@
+export type HYTourPlacement = 'top' | 'right' | 'bottom' | 'left' | 'center';
+export type HYTourCloseReason = 'close' | 'mask' | 'escape' | 'finish' | 'programmatic';
+export type HYTourTarget = string | Element | (() => Element | null);
+export interface HYTourStep {
+    readonly target?: HYTourTarget;
+    readonly title: string;
+    readonly description?: string;
+    readonly placement?: HYTourPlacement;
+    readonly nextText?: string;
+    readonly previousText?: string;
+    readonly mask?: boolean;
+}
+export interface HYTourChangeDetail {
+    readonly current: number;
+    readonly previous: number;
+    readonly step: HYTourStep;
+}
+export interface HYTourCloseDetail {
+    readonly current: number;
+    readonly reason: HYTourCloseReason;
+}
+export interface HYTourOpenChangeDetail {
+    readonly open: boolean;
+}
+export interface HYTourFinishDetail {
+    readonly current: number;
+    readonly step: HYTourStep;
+}
+/** Multi-step spotlight tour for introducing controls and workflows. */
+export declare class HYTour extends HTMLElement {
+    private readonly _masks;
+    private readonly _highlight;
+    private readonly _popover;
+    private readonly _title;
+    private readonly _description;
+    private readonly _counter;
+    private readonly _previous;
+    private readonly _next;
+    private readonly _close;
+    private _steps;
+    private _stepsAssigned;
+    private _current;
+    private _documentAbort;
+    private _resizeObserver;
+    private _target;
+    private _returnFocus;
+    private _scrolledStep;
+    private _frame;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get steps(): readonly HYTourStep[];
+    set steps(value: readonly HYTourStep[]);
+    get open(): boolean;
+    set open(value: boolean);
+    get current(): number;
+    set current(value: number);
+    get placement(): HYTourPlacement;
+    set placement(value: HYTourPlacement);
+    get mask(): boolean;
+    set mask(value: boolean);
+    get closeOnMask(): boolean;
+    set closeOnMask(value: boolean);
+    get closeOnEscape(): boolean;
+    set closeOnEscape(value: boolean);
+    get autoScroll(): boolean;
+    set autoScroll(value: boolean);
+    get gap(): number;
+    set gap(value: number);
+    get zIndex(): number;
+    set zIndex(value: number);
+    start(current?: number): void;
+    next(): void;
+    previous(): void;
+    close(reason?: HYTourCloseReason): void;
+    private _readStepsAttribute;
+    private _resolvedCurrent;
+    private _goTo;
+    private _syncOpen;
+    private _teardown;
+    private _renderStep;
+    private _resolveTarget;
+    private _schedulePosition;
+    private _position;
+    private _setBox;
+}
+export declare function defineTourComponents(): void;

package/dist/tour.js

@@ -0,0 +1,306 @@
+function normalizeSteps(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.flatMap(step => {
+        if (!step || typeof step !== 'object')
+            return [];
+        const record = step;
+        if (record.title == null)
+            return [];
+        const placement = ['top', 'right', 'bottom', 'left', 'center'].includes(String(record.placement)) ? String(record.placement) : undefined;
+        return [{
+                title: String(record.title),
+                ...(record.description != null ? { description: String(record.description) } : {}),
+                ...(typeof record.target === 'string' ? { target: record.target } : {}),
+                ...(placement ? { placement } : {}),
+                ...(record.nextText != null ? { nextText: String(record.nextText) } : {}),
+                ...(record.previousText != null ? { previousText: String(record.previousText) } : {}),
+                ...(typeof record.mask === 'boolean' ? { mask: record.mask } : {}),
+            }];
+    });
+}
+/** Multi-step spotlight tour for introducing controls and workflows. */
+export class HYTour extends HTMLElement {
+    _masks = [document.createElement('div'), document.createElement('div'), document.createElement('div'), document.createElement('div')];
+    _highlight = document.createElement('div');
+    _popover = document.createElement('section');
+    _title = document.createElement('h2');
+    _description = document.createElement('div');
+    _counter = document.createElement('span');
+    _previous = document.createElement('button');
+    _next = document.createElement('button');
+    _close = document.createElement('button');
+    _steps = [];
+    _stepsAssigned = false;
+    _current = 0;
+    _documentAbort = null;
+    _resizeObserver = null;
+    _target = null;
+    _returnFocus = null;
+    _scrolledStep = -1;
+    _frame = 0;
+    static get observedAttributes() { return ['steps', 'open', 'current', 'placement', 'mask', 'close-on-mask', 'close-on-escape', 'scroll-into-view', 'gap', 'z-index']; }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        const header = document.createElement('header');
+        const footer = document.createElement('footer');
+        style.textContent = `
+      :host { position: fixed; z-index: var(--_hy-tour-z-index, 1000); inset: 0; display: block; visibility: hidden; pointer-events: none; color: var(--hy-text-color, #eef3ff); font: 12px/1.5 system-ui, sans-serif; }
+      :host([open]) { visibility: visible; }
+      .mask { position: absolute; background: var(--hy-tour-mask-color, rgba(3, 7, 18, .68)); pointer-events: auto; }
+      .mask[hidden], .highlight[hidden] { display: none; }
+      .highlight { position: absolute; box-sizing: border-box; border: 1px solid var(--hy-tour-highlight-color, var(--hy-accent-color, #79a8ff)); border-radius: var(--hy-tour-highlight-radius, 8px); box-shadow: 0 0 0 3px var(--hy-focus-ring-color, rgba(121, 168, 255, .22)); pointer-events: none; }
+      .popover { position: absolute; width: min(var(--hy-tour-width, 310px), calc(100vw - 24px)); box-sizing: border-box; padding: 15px; border: 1px solid var(--hy-border-color, #3d4654); border-radius: var(--hy-tour-radius, 10px); outline: none; background: var(--hy-surface-elevated-color, #171d27); box-shadow: 0 18px 48px var(--hy-menu-shadow-color, rgba(0, 0, 0, .4)); pointer-events: auto; }
+      header { display: flex; align-items: flex-start; gap: 12px; }
+      h2 { flex: 1; margin: 0; color: var(--hy-text-color, #eef3ff); font: 650 14px/1.4 system-ui, sans-serif; }
+      .close { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; color: var(--hy-muted-color, #788697); background: transparent; cursor: pointer; font: 17px/1 system-ui, sans-serif; }
+      .close:hover { color: var(--hy-text-color, #eef3ff); background: var(--hy-hover-bg-color, #273241); }
+      .description { margin-top: 8px; color: var(--hy-secondary-text-color, #aebbd0); }
+      footer { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
+      .counter { flex: 1; color: var(--hy-muted-color, #788697); font: 10px/1 ui-monospace, monospace; }
+      footer button { min-width: 58px; height: 29px; padding: 0 10px; border: 1px solid var(--hy-border-color, #3d4654); border-radius: 5px; color: var(--hy-secondary-text-color, #aebbd0); background: transparent; cursor: pointer; font: inherit; }
+      footer button:hover:not(:disabled) { color: var(--hy-text-color, #eef3ff); border-color: var(--hy-hover-border-color, #596779); background: var(--hy-hover-bg-color, #273241); }
+      footer .next { color: var(--hy-selected-text-color, #fff); border-color: var(--hy-selected-bg-color, #554cc6); background: var(--hy-selected-bg-color, #554cc6); }
+      footer button:disabled { visibility: hidden; }
+      button:focus-visible { outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: 1px; }
+    `;
+        this._masks.forEach(mask => { mask.className = 'mask'; mask.part.add('mask'); mask.addEventListener('click', () => { if (this.closeOnMask)
+            this.close('mask'); }); });
+        this._highlight.className = 'highlight';
+        this._highlight.part.add('highlight');
+        this._popover.className = 'popover';
+        this._popover.part.add('popover');
+        this._popover.tabIndex = -1;
+        this._popover.setAttribute('role', 'dialog');
+        this._title.part.add('title');
+        this._description.className = 'description';
+        this._description.part.add('description');
+        this._counter.className = 'counter';
+        this._counter.part.add('counter');
+        this._close.type = 'button';
+        this._close.className = 'close';
+        this._close.part.add('close');
+        this._close.setAttribute('aria-label', 'Close tour');
+        this._close.textContent = '×';
+        this._close.addEventListener('click', () => this.close('close'));
+        header.append(this._title, this._close);
+        this._previous.type = this._next.type = 'button';
+        this._previous.className = 'previous';
+        this._previous.part.add('previous');
+        this._next.className = 'next';
+        this._next.part.add('next');
+        this._previous.addEventListener('click', () => this.previous());
+        this._next.addEventListener('click', () => this.next());
+        footer.append(this._counter, this._previous, this._next);
+        this._popover.append(header, this._description, footer);
+        root.append(style, ...this._masks, this._highlight, this._popover);
+    }
+    connectedCallback() { if (!this._stepsAssigned && this.hasAttribute('steps'))
+        this._readStepsAttribute(); this._current = Math.max(0, Number(this.getAttribute('current')) || 0); this._syncOpen(); }
+    disconnectedCallback() { this._teardown(); }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'steps' && !this._stepsAssigned)
+            this._readStepsAttribute();
+        if (name === 'current')
+            this._current = Math.max(0, Number(newValue) || 0);
+        if (name === 'open')
+            this._syncOpen();
+        else if (this.open)
+            this._renderStep();
+    }
+    get steps() { return this._steps; }
+    set steps(value) { this._stepsAssigned = true; this._steps = Array.isArray(value) ? value.filter(step => step && typeof step.title === 'string') : []; if (this.open)
+        this._renderStep(); }
+    get open() { return this.hasAttribute('open'); }
+    set open(value) { this.toggleAttribute('open', Boolean(value)); }
+    get current() { return this._resolvedCurrent(); }
+    set current(value) { this._current = Math.max(0, Math.floor(Number(value) || 0)); this.setAttribute('current', String(this._current)); }
+    get placement() { const value = this.getAttribute('placement'); return ['top', 'right', 'left', 'center'].includes(String(value)) ? value : 'bottom'; }
+    set placement(value) { this.setAttribute('placement', ['top', 'right', 'bottom', 'left', 'center'].includes(value) ? value : 'bottom'); }
+    get mask() { return this.getAttribute('mask') !== 'false'; }
+    set mask(value) { this.setAttribute('mask', String(Boolean(value))); }
+    get closeOnMask() { return this.hasAttribute('close-on-mask'); }
+    set closeOnMask(value) { this.toggleAttribute('close-on-mask', Boolean(value)); }
+    get closeOnEscape() { return this.getAttribute('close-on-escape') !== 'false'; }
+    set closeOnEscape(value) { this.setAttribute('close-on-escape', String(Boolean(value))); }
+    get autoScroll() { return this.getAttribute('scroll-into-view') !== 'false'; }
+    set autoScroll(value) { this.setAttribute('scroll-into-view', String(Boolean(value))); }
+    get gap() { const number = Number(this.getAttribute('gap')); return Number.isFinite(number) ? Math.min(80, Math.max(0, number)) : 8; }
+    set gap(value) { const number = Number(value); this.setAttribute('gap', String(Number.isFinite(number) ? Math.min(80, Math.max(0, number)) : 8)); }
+    get zIndex() { const number = Number(this.getAttribute('z-index')); return Number.isFinite(number) ? Math.round(number) : 1000; }
+    set zIndex(value) { this.setAttribute('z-index', String(Math.round(Number(value) || 1000))); }
+    start(current = 0) { if (!this._steps.length)
+        return; this.current = current; this.open = true; }
+    next() {
+        if (!this._steps.length)
+            return;
+        if (this.current >= this._steps.length - 1) {
+            const step = this._steps[this.current];
+            this.dispatchEvent(new CustomEvent('tour-finish', { bubbles: true, composed: true, detail: { current: this.current, step } }));
+            this.close('finish');
+            return;
+        }
+        this._goTo(this.current + 1);
+    }
+    previous() { if (this.current > 0)
+        this._goTo(this.current - 1); }
+    close(reason = 'programmatic') { if (!this.open)
+        return; const current = this.current; this.open = false; this.dispatchEvent(new CustomEvent('tour-close', { bubbles: true, composed: true, detail: { current, reason } })); }
+    _readStepsAttribute() { try {
+        this._steps = normalizeSteps(JSON.parse(this.getAttribute('steps') ?? '[]'));
+    }
+    catch {
+        this._steps = [];
+    } }
+    _resolvedCurrent() { return this._steps.length ? Math.min(this._steps.length - 1, this._current) : 0; }
+    _goTo(current) { const previous = this.current; this.current = current; const step = this._steps[this.current]; if (step)
+        this.dispatchEvent(new CustomEvent('tour-change', { bubbles: true, composed: true, detail: { current: this.current, previous, step } })); }
+    _syncOpen() {
+        if (!this.isConnected)
+            return;
+        this.style.setProperty('--_hy-tour-z-index', String(this.zIndex));
+        if (!this.open || !this._steps.length) {
+            this._teardown();
+            this._returnFocus?.focus({ preventScroll: true });
+            this._returnFocus = null;
+            this.dispatchEvent(new CustomEvent('tour-open-change', { bubbles: true, composed: true, detail: { open: false } }));
+            return;
+        }
+        if (!this._documentAbort) {
+            this._returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            const abort = new AbortController();
+            this._documentAbort = abort;
+            document.addEventListener('keydown', event => { if (event.key === 'Escape' && this.closeOnEscape) {
+                event.preventDefault();
+                this.close('escape');
+            } }, { signal: abort.signal });
+            window.addEventListener('resize', () => this._schedulePosition(), { passive: true, signal: abort.signal });
+            window.addEventListener('scroll', () => this._schedulePosition(), { passive: true, capture: true, signal: abort.signal });
+            this.dispatchEvent(new CustomEvent('tour-open-change', { bubbles: true, composed: true, detail: { open: true } }));
+        }
+        this._renderStep();
+    }
+    _teardown() { this._documentAbort?.abort(); this._documentAbort = null; this._resizeObserver?.disconnect(); this._resizeObserver = null; cancelAnimationFrame(this._frame); this._frame = 0; this._target = null; this._scrolledStep = -1; }
+    _renderStep() {
+        const step = this._steps[this.current];
+        if (!step)
+            return;
+        this._title.textContent = step.title;
+        this._description.textContent = step.description ?? '';
+        this._description.hidden = !step.description;
+        this._counter.textContent = `${this.current + 1} / ${this._steps.length}`;
+        this._previous.textContent = step.previousText ?? 'Previous';
+        this._previous.disabled = this.current === 0;
+        this._next.textContent = step.nextText ?? (this.current === this._steps.length - 1 ? 'Finish' : 'Next');
+        this._popover.setAttribute('aria-label', step.title);
+        this.style.setProperty('--_hy-tour-z-index', String(this.zIndex));
+        this._target = this._resolveTarget(step.target);
+        if (this._target && this.autoScroll && this._scrolledStep !== this.current) {
+            this._target.scrollIntoView({ block: 'center', inline: 'center' });
+            this._scrolledStep = this.current;
+        }
+        this._resizeObserver?.disconnect();
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this._schedulePosition());
+            this._resizeObserver.observe(this._popover);
+            if (this._target instanceof Element)
+                this._resizeObserver.observe(this._target);
+        }
+        this._schedulePosition();
+        queueMicrotask(() => this._popover.focus({ preventScroll: true }));
+    }
+    _resolveTarget(target) { if (typeof target === 'function')
+        return target(); if (typeof target === 'string') {
+        try {
+            return document.querySelector(target);
+        }
+        catch {
+            return null;
+        }
+    } return target instanceof Element ? target : null; }
+    _schedulePosition() { cancelAnimationFrame(this._frame); this._frame = requestAnimationFrame(() => this._position()); }
+    _position() {
+        if (!this.open)
+            return;
+        const step = this._steps[this.current];
+        if (!step)
+            return;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const margin = 12;
+        const gap = this.gap;
+        const mask = step.mask ?? this.mask;
+        this._popover.setAttribute('aria-modal', String(mask));
+        if (!this._target) {
+            this._masks.forEach(piece => { piece.hidden = !mask; piece.style.cssText = mask ? 'inset:0' : ''; });
+            this._highlight.hidden = true;
+            const rect = this._popover.getBoundingClientRect();
+            this._popover.style.left = `${Math.max(margin, (viewportWidth - rect.width) / 2)}px`;
+            this._popover.style.top = `${Math.max(margin, (viewportHeight - rect.height) / 2)}px`;
+            this._popover.dataset.placement = 'center';
+            return;
+        }
+        const targetRect = this._target.getBoundingClientRect();
+        const left = Math.max(0, targetRect.left - gap);
+        const top = Math.max(0, targetRect.top - gap);
+        const right = Math.min(viewportWidth, targetRect.right + gap);
+        const bottom = Math.min(viewportHeight, targetRect.bottom + gap);
+        this._setBox(this._highlight, left, top, right - left, bottom - top);
+        this._highlight.hidden = !mask;
+        const maskTop = this._masks[0];
+        const maskLeft = this._masks[1];
+        const maskRight = this._masks[2];
+        const maskBottom = this._masks[3];
+        this._masks.forEach(piece => { piece.hidden = !mask; });
+        this._setBox(maskTop, 0, 0, viewportWidth, top);
+        this._setBox(maskBottom, 0, bottom, viewportWidth, Math.max(0, viewportHeight - bottom));
+        this._setBox(maskLeft, 0, top, left, Math.max(0, bottom - top));
+        this._setBox(maskRight, right, top, Math.max(0, viewportWidth - right), Math.max(0, bottom - top));
+        const popoverRect = this._popover.getBoundingClientRect();
+        let placement = step.placement ?? this.placement;
+        if (placement === 'center')
+            placement = 'bottom';
+        const distance = 12;
+        let x = left + (right - left - popoverRect.width) / 2;
+        let y = bottom + distance;
+        if (placement === 'top')
+            y = top - popoverRect.height - distance;
+        else if (placement === 'left') {
+            x = left - popoverRect.width - distance;
+            y = top + (bottom - top - popoverRect.height) / 2;
+        }
+        else if (placement === 'right') {
+            x = right + distance;
+            y = top + (bottom - top - popoverRect.height) / 2;
+        }
+        if (placement === 'top' && y < margin) {
+            placement = 'bottom';
+            y = bottom + distance;
+        }
+        else if (placement === 'bottom' && y + popoverRect.height > viewportHeight - margin) {
+            placement = 'top';
+            y = top - popoverRect.height - distance;
+        }
+        else if (placement === 'left' && x < margin) {
+            placement = 'right';
+            x = right + distance;
+        }
+        else if (placement === 'right' && x + popoverRect.width > viewportWidth - margin) {
+            placement = 'left';
+            x = left - popoverRect.width - distance;
+        }
+        this._popover.style.left = `${Math.min(viewportWidth - popoverRect.width - margin, Math.max(margin, x))}px`;
+        this._popover.style.top = `${Math.min(viewportHeight - popoverRect.height - margin, Math.max(margin, y))}px`;
+        this._popover.dataset.placement = placement;
+    }
+    _setBox(element, left, top, width, height) { element.style.cssText = `left:${left}px;top:${top}px;width:${Math.max(0, width)}px;height:${Math.max(0, height)}px`; }
+}
+export function defineTourComponents() {
+    if (!customElements.get('hy-tour'))
+        customElements.define('hy-tour', HYTour);
+}
+//# sourceMappingURL=tour.js.map