@webority/ui-elements 0.34.0 → 0.35.0

package/dist/WuiTimePicker-C7n-VFGt.js

@@ -0,0 +1,370 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t, r as n, t as r } from "./anchorOverlay-DluGZ8ef.js";
+import { t as i } from "./formMirror-jGf5M4gk.js";
+import { t as a } from "./iconGlyphs.g-Cpg1BUHm.js";
+//#region src/WuiTimePicker.js
+var o = (e) => String(e).padStart(2, "0"), s = (e, t) => `${o(e)}:${o(t)}`, c = (e) => {
+	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
+	return t ? {
+		h: +t[1],
+		m: +t[2]
+	} : null;
+}, l = (e, t = "24") => {
+	if (!e) return "";
+	if (t === "24") return s(e.h, e.m);
+	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
+	return `${n}:${o(e.m)} ${r}`;
+}, u = (e) => {
+	let t = String(e || "").trim().toLowerCase(), n = /^(\d{1,2})(?:[:.](\d{2})|(\d{2}))?\s*(?:([ap])\.?\s*(?:m\.?)?)?$/.exec(t);
+	if (!n) return null;
+	let r = +n[1], i = +(n[2] ?? n[3] ?? "0");
+	if (i > 59) return null;
+	if (n[4]) {
+		if (r < 1 || r > 12) return null;
+		r = r % 12 + (n[4] === "p" ? 12 : 0);
+	} else if (r > 23) return null;
+	return {
+		h: r,
+		m: i
+	};
+}, d = 0, f = class extends e {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"value",
+			"min",
+			"max",
+			"step",
+			"format",
+			"placeholder",
+			"disabled",
+			"required",
+			"size",
+			"aria-label",
+			"aria-describedby",
+			"aria-invalid"
+		];
+	}
+	constructor() {
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+		this._value = "", this._uid = `wui-tp-${++d}`, this._typedError = "", this._typeahead = "", this._typeaheadTimer = null, this.addEventListener("focusout", (e) => {
+			this._isOpen?.() && e.relatedTarget && !this.contains(e.relatedTarget) && this._close({ commit: !0 });
+		});
+	}
+	connectedCallback() {
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._bindGlobal?.();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (this._rendered) switch (e) {
+			case "value":
+				this._value = n || "", this._typedError = "", this._syncFormValue(), this._syncText(), this._syncInvalid();
+				return;
+			case "aria-invalid":
+			case "aria-describedby":
+				this._syncInvalid();
+				return;
+			case "aria-label":
+			case "placeholder":
+			case "disabled":
+			case "required":
+				this._syncAttrs();
+				return;
+			default: this.render();
+		}
+	}
+	formResetCallback() {
+		this.value = this._defaultValue || "";
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		this._value = e || "", this._typedError = "", i(this, this._value), this._syncText(), this._syncInvalid();
+	}
+	_format() {
+		return this.getAttribute("format") || "24";
+	}
+	_step() {
+		return Math.max(1, parseInt(this.getAttribute("step") || "30", 10) || 30);
+	}
+	_bounds() {
+		let e = c(this.getAttribute("min")) || {
+			h: 0,
+			m: 0
+		}, t = c(this.getAttribute("max")) || {
+			h: 23,
+			m: 59
+		};
+		return {
+			min: e.h * 60 + e.m,
+			max: t.h * 60 + t.m
+		};
+	}
+	_allowed(e, t) {
+		let n = e * 60 + t, { min: r, max: i } = this._bounds();
+		return n >= r && n <= i && n % this._step() === 0;
+	}
+	_times() {
+		let e = [];
+		for (let t = 0; t < 1440; t += this._step()) {
+			let n = Math.floor(t / 60), r = t % 60;
+			this._allowed(n, r) && e.push({
+				h: n,
+				m: r
+			});
+		}
+		return e;
+	}
+	_refusal(e) {
+		if (this._allowed(e.h, e.m)) return "";
+		let t = this._format(), { min: n, max: r } = this._bounds(), i = e.h * 60 + e.m, a = (e) => l({
+			h: Math.floor(e / 60),
+			m: e % 60
+		}, t);
+		if (i < n || i > r) {
+			let e = !!c(this.getAttribute("min")), t = !!c(this.getAttribute("max"));
+			return e && t ? `Enter a time between ${a(n)} and ${a(r)}.` : e ? `Enter a time at or after ${a(n)}.` : `Enter a time at or before ${a(r)}.`;
+		}
+		return `Enter a time in ${this._step()}-minute steps.`;
+	}
+	render() {
+		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value), this._isOpen = null;
+		let e = this.getAttribute("size"), t = e === "sm" ? " input-sm" : e === "lg" ? " input-lg" : "", n = this._uid;
+		this.innerHTML = `
+      <div class="timepicker">
+        <div class="wui-timepicker-field">
+          <input type="text" class="input timepicker-trigger${t}" id="${n}-input" role="combobox" aria-haspopup="dialog" aria-expanded="false" aria-controls="${n}-pop" aria-autocomplete="none" autocomplete="off" spellcheck="false">
+          <button type="button" class="wui-timepicker-toggle" tabindex="-1" aria-label="Choose time" aria-haspopup="dialog" aria-expanded="false" aria-controls="${n}-pop">${a("clock")}</button>
+        </div>
+        <div class="timepicker-pop" id="${n}-pop" role="dialog" aria-label="Choose time" hidden></div>
+        <div class="field-error wui-timepicker-error" id="${n}-error" hidden></div>
+      </div>`, this._rendered = !0, this._syncAttrs(), this._syncText(), this._syncInvalid(), i(this, this._value), this._wire();
+	}
+	_input() {
+		return this.querySelector(".timepicker-trigger");
+	}
+	_pop() {
+		return this.querySelector(".timepicker-pop");
+	}
+	_syncFormValue() {
+		i(this, this._value);
+	}
+	_syncAttrs() {
+		let e = this._input(), t = this.querySelector(".wui-timepicker-toggle");
+		if (!e) return;
+		let n = this.hasAttribute("disabled");
+		e.disabled = n, t && (t.disabled = n), e.placeholder = this.getAttribute("placeholder") || "Select time", this.hasAttribute("required") ? e.setAttribute("aria-required", "true") : e.removeAttribute("aria-required");
+		let r = this.getAttribute("aria-label");
+		r ? e.setAttribute("aria-label", r) : e.removeAttribute("aria-label"), i(this, this._value), n && this._isOpen?.() && this._close({ commit: !1 });
+	}
+	_syncText() {
+		let e = this._input();
+		e && (e.value = l(c(this._value), this._format()), this._isOpen?.() && this._syncColumns());
+	}
+	_syncInvalid() {
+		let e = this._input(), t = this.querySelector(".wui-timepicker-error");
+		if (!e || !t) return;
+		let n = this._typedError;
+		t.textContent = n, t.hidden = !n, this.hasAttribute("aria-invalid") || n ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid");
+		let r = [this.getAttribute("aria-describedby"), n ? t.id : null].filter(Boolean).join(" ");
+		r ? e.setAttribute("aria-describedby", r) : e.removeAttribute("aria-describedby"), e.setCustomValidity?.(n);
+	}
+	_commitText() {
+		let e = this._input();
+		if (!e || e.value === l(c(this._value), this._format())) return !0;
+		let t = e.value.trim(), n = "";
+		if (t) {
+			let e = u(t), r = e ? this._refusal(e) : `Enter a time like ${this._format() === "12" ? "7:45 PM" : "19:45"}.`;
+			if (r) return this._typedError = r, this._syncInvalid(), !1;
+			n = s(e.h, e.m);
+		}
+		let r = n !== this._value;
+		return this.value = n, r && this.dispatchEvent(new Event("change", { bubbles: !0 })), !0;
+	}
+	_pending() {
+		let e = u(this._input()?.value);
+		return e && this._allowed(e.h, e.m) ? e : null;
+	}
+	_columnsHtml() {
+		let e = this._format(), t = this._times(), n = (e, t, n) => `<div class="wui-timepicker-col" role="listbox" aria-label="${t}" data-col="${e}">${n.map((e) => `<button type="button" class="timepicker-option" role="option" tabindex="-1" aria-selected="false" data-v="${e.v}">${e.text}</button>`).join("")}</div>`, r = [...new Set(t.map((e) => e.h))], i = [...new Set(t.map((e) => e.m))].sort((e, t) => e - t), a;
+		if (e === "12") {
+			let e = [...new Set(r.map((e) => e % 12))].sort((e, t) => e - t), t = [...new Set(r.map((e) => e >= 12 ? "pm" : "am"))].sort();
+			a = n("hour", "Hour", e.map((e) => ({
+				v: e,
+				text: String(e || 12)
+			}))) + n("minute", "Minute", i.map((e) => ({
+				v: e,
+				text: o(e)
+			}))) + n("period", "AM or PM", t.map((e) => ({
+				v: e,
+				text: e.toUpperCase()
+			})));
+		} else a = n("hour", "Hour", r.map((e) => ({
+			v: e,
+			text: o(e)
+		}))) + n("minute", "Minute", i.map((e) => ({
+			v: e,
+			text: o(e)
+		})));
+		return `<div class="wui-timepicker-cols">${a}</div>`;
+	}
+	_selectedIn(e, t) {
+		return t ? e === "minute" ? String(t.m) : e === "period" ? t.h >= 12 ? "pm" : "am" : String(this._format() === "12" ? t.h % 12 : t.h) : null;
+	}
+	_optionEnabled(e, t, n) {
+		if (!n) return !0;
+		let r = this._format() === "12", i = n.h >= 12, a = (e) => r ? [e + (i ? 12 : 0)] : [e], o = Array.from({ length: 60 }, (e, t) => t);
+		if (e === "hour") return a(+t).some((e) => o.some((t) => this._allowed(e, t)));
+		if (e === "minute") return this._allowed(n.h, +t);
+		let s = t === "pm" ? 12 : 0;
+		return Array.from({ length: 12 }, (e, t) => s + t).some((e) => o.some((t) => this._allowed(e, t)));
+	}
+	_syncColumns({ scroll: e = !1 } = {}) {
+		let t = this._pop();
+		if (!t) return;
+		let n = this._pending();
+		for (let r of t.querySelectorAll(".wui-timepicker-col")) {
+			let t = r.dataset.col, i = this._selectedIn(t, n), a = [...r.querySelectorAll(".timepicker-option")], o = null;
+			for (let e of a) {
+				let r = e.dataset.v === i;
+				e.classList.toggle("is-selected", r), e.setAttribute("aria-selected", r ? "true" : "false"), e.disabled = !r && !this._optionEnabled(t, e.dataset.v, n), r && (o = e);
+			}
+			o = o || a.find((e) => !e.disabled) || null;
+			for (let e of a) e.tabIndex = e === o ? 0 : -1;
+			e && o && (r.scrollTop = o.offsetTop - (r.clientHeight - o.offsetHeight) / 2);
+		}
+	}
+	_pick(e, t) {
+		let n = this._times();
+		if (!n.length) return;
+		let r = this._pending() || n[0], i = this._format() === "12", a = r.h, o = r.m;
+		if (e === "minute" ? o = +t : a = e === "period" ? a % 12 + (t === "pm" ? 12 : 0) : i ? +t + (r.h >= 12 ? 12 : 0) : +t, !this._allowed(a, o)) {
+			let t = a * 60 + o, r = n.filter((t) => e === "minute" ? t.m === o : e === "period" ? t.h >= 12 == a >= 12 : i ? t.h % 12 == a % 12 && t.h >= 12 == a >= 12 : t.h === a).sort((e, n) => Math.abs(e.h * 60 + e.m - t) - Math.abs(n.h * 60 + n.m - t))[0];
+			if (!r) return;
+			a = r.h, o = r.m;
+		}
+		let s = this._input();
+		s.value = l({
+			h: a,
+			m: o
+		}, this._format()), this._typedError = "", this._syncInvalid(), this._syncColumns();
+	}
+	_position() {
+		r(this.querySelector(".wui-timepicker-field"), this._pop());
+	}
+	_onColumnKey(e) {
+		let t = e.target.closest?.(".timepicker-option"), n = t?.closest(".wui-timepicker-col");
+		if (!t || !n) return;
+		let r = [...n.querySelectorAll(".timepicker-option")].filter((e) => !e.disabled), i = r.indexOf(t), a = [...this._pop().querySelectorAll(".wui-timepicker-col")], o = (e) => {
+			e && (this._pick(n.dataset.col, e.dataset.v), (n.querySelector(".timepicker-option.is-selected") || e).focus());
+		};
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), o(r[Math.min(i + 1, r.length - 1)]);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), o(r[Math.max(i - 1, 0)]);
+				return;
+			case "Home":
+				e.preventDefault(), o(r[0]);
+				return;
+			case "End":
+				e.preventDefault(), o(r[r.length - 1]);
+				return;
+			case "PageDown":
+				e.preventDefault(), o(r[Math.min(i + 8, r.length - 1)]);
+				return;
+			case "PageUp":
+				e.preventDefault(), o(r[Math.max(i - 8, 0)]);
+				return;
+			case "ArrowRight":
+			case "ArrowLeft":
+				e.preventDefault(), a[a.indexOf(n) + (e.key === "ArrowRight" ? 1 : -1)]?.querySelector(".timepicker-option[tabindex=\"0\"]")?.focus();
+				return;
+			case "Enter":
+				e.preventDefault(), this._close({
+					commit: !0,
+					refocus: !0
+				});
+				return;
+			case " ":
+				e.preventDefault(), o(t);
+				return;
+			case "Escape":
+				e.preventDefault(), this._close({
+					commit: !1,
+					refocus: !0
+				});
+				return;
+			default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), clearTimeout(this._typeaheadTimer), this._typeahead += e.key.toLowerCase(), this._typeaheadTimer = setTimeout(() => {
+				this._typeahead = "", this._typeaheadTimer = null;
+			}, 500), o(r.find((e) => e.textContent.trim().toLowerCase().startsWith(this._typeahead))));
+		}
+	}
+	_wire() {
+		this._teardown();
+		let e = this._input(), r = this.querySelector(".wui-timepicker-toggle"), i = this._pop(), a = this.querySelector(".timepicker");
+		if (!e || !i) return;
+		let o = () => !i.hidden;
+		this._isOpen = o;
+		let s = () => {
+			o() && this._position();
+		}, c = () => i.querySelector(".wui-timepicker-col .timepicker-option[tabindex=\"0\"]")?.focus();
+		this._open = ({ focus: n = !1 } = {}) => {
+			this.hasAttribute("disabled") || (o() || (i.innerHTML = this._columnsHtml(), i.hidden = !1, a?.classList.add("open"), e.setAttribute("aria-expanded", "true"), r?.setAttribute("aria-expanded", "true"), this._position(), t(this, s), this._syncColumns({ scroll: !0 })), n && c());
+		}, this._close = ({ commit: t = !0, refocus: s = !1 } = {}) => {
+			if (!o()) return;
+			let c = i.contains(document.activeElement);
+			i.hidden = !0, i.innerHTML = "", a?.classList.remove("open"), e.setAttribute("aria-expanded", "false"), r?.setAttribute("aria-expanded", "false"), n(this), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "", t ? this._commitText() : (this._typedError = "", this._syncText(), this._syncInvalid()), (s || c) && e.focus();
+		}, e.addEventListener("pointerdown", (e) => {
+			this._lastPointer = e.pointerType;
+		}), e.addEventListener("click", () => {
+			this._lastPointer !== "touch" && !o() && this._open(), this._lastPointer = null;
+		}), r?.addEventListener("click", () => {
+			o() ? this._close({
+				commit: !0,
+				refocus: !0
+			}) : this._open({ focus: !0 });
+		}), e.addEventListener("keydown", (e) => {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), this._open({ focus: !0 });
+			else if (e.key === "Enter") {
+				let t = o(), n = this._commitText();
+				t && n && this._close({ commit: !1 }), (!n || t) && e.preventDefault();
+			} else e.key === "Escape" && o() ? (e.preventDefault(), this._close({ commit: !1 })) : e.key === "Tab" && o() && this._close({ commit: !0 });
+		}), e.addEventListener("input", (e) => {
+			e.stopPropagation(), this._typedError && (this._typedError = "", this._syncInvalid()), o() && this._syncColumns({ scroll: !0 });
+		}), e.addEventListener("change", (e) => {
+			e.stopPropagation(), o() || this._commitText();
+		}), i.addEventListener("click", (e) => {
+			this._popClick = !0;
+			let t = e.target.closest(".timepicker-option"), n = t?.closest(".wui-timepicker-col");
+			t && n && !t.disabled && this._pick(n.dataset.col, t.dataset.v);
+		}), i.addEventListener("keydown", (e) => {
+			o() && this._onColumnKey(e);
+		}), this._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				let t = this._popClick;
+				this._popClick = !1, o() && !t && !this.contains(e.target) && this._close({ commit: !0 });
+			}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
+				o() && e.key === "Escape" && this._close({ commit: !1 });
+			}, document.addEventListener("keydown", this._onDocKey), o() && t(this, s);
+		}, this._bindGlobal();
+	}
+	_teardown() {
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), n(this), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+};
+//#endregion
+export { f as t };

package/dist/WuiTour-R5O9l--J.js

@@ -0,0 +1,205 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t, r as n, t as r } from "./anchorOverlay-DluGZ8ef.js";
+//#region src/WuiTour.js
+var i = "wui-tour-step", a = "wui-tour-seen:", o = {
+	back: "Back",
+	next: "Next",
+	skip: "Skip",
+	done: "Done"
+}, s = {
+	back: "back-label",
+	next: "next-label",
+	skip: "skip-label",
+	done: "done-label"
+}, c = 4, l = 0;
+function u(e = a, t = globalThis.localStorage) {
+	return {
+		isSeen: async (n) => t.getItem(e + n) === "1",
+		markSeen: async (n) => {
+			t.setItem(e + n, "1");
+		}
+	};
+}
+var d = (e) => !e?.isConnected || getComputedStyle(e).visibility === "hidden" ? !1 : e.getClientRects().length > 0, f = class extends e {
+	static get observedAttributes() {
+		return ["open"];
+	}
+	constructor() {
+		super(), this.seenStore = null, this.onBeforeStep = null, this._run = 0, this._running = !1, this._layer = null;
+	}
+	connectedCallback() {
+		this.hasAttribute("open") && this.start();
+	}
+	disconnectedCallback() {
+		this.stop();
+	}
+	attributeChangedCallback(e, t, n) {
+		e !== "open" || !this.isConnected || (n === null ? this.stop() : this.start());
+	}
+	get tourId() {
+		return this.getAttribute("tour-id") || "";
+	}
+	set tourId(e) {
+		e == null || e === "" ? this.removeAttribute("tour-id") : this.setAttribute("tour-id", String(e));
+	}
+	_stepList() {
+		return Array.from(this.querySelectorAll(`:scope > ${i}`), (e) => ({
+			target: e.getAttribute("target") || "",
+			title: e.getAttribute("title") || void 0,
+			description: e.textContent.trim()
+		}));
+	}
+	_store() {
+		return this.seenStore ? this.seenStore : this.getAttribute("seen-store") === "local" ? u() : globalThis.window?.WUI?.tour?.seenStore || null;
+	}
+	_label(e) {
+		return this.getAttribute(s[e]) || o[e];
+	}
+	async start() {
+		if (this._running) return;
+		this._running = !0;
+		let e = ++this._run;
+		this.hasAttribute("open") || this.setAttribute("open", "");
+		try {
+			await this._start(e);
+		} catch (t) {
+			throw e === this._run && (this._running = !1), t;
+		}
+	}
+	async _start(e) {
+		this._steps = this._stepList();
+		let t = this._store();
+		if (t && !this.tourId) throw Error("<wui-tour> needs a tour-id to use a seen store.");
+		if (t && await t.isSeen(this.tourId)) {
+			e === this._run && this._finish("alreadySeen");
+			return;
+		}
+		this._returnFocus = document.activeElement;
+		let n = await this._locate(0, 1, e);
+		if (e === this._run) {
+			if (!n) {
+				this._finish("noTargets");
+				return;
+			}
+			this._firstIndex = n.index, this._build(), this._show(n);
+		}
+	}
+	stop() {
+		this._running && (this._run++, this._teardown(), this._running = !1, this.hasAttribute("open") && this.removeAttribute("open"));
+	}
+	async _locate(e, t, n) {
+		let r = this._steps;
+		for (let i = e; i >= 0 && i < r.length; i += t) {
+			let e = r[i];
+			if (await this._beforeStep(e, i), n !== this._run) return null;
+			let t = document.querySelector(e.target);
+			if (d(t)) return {
+				index: i,
+				target: t
+			};
+		}
+		return null;
+	}
+	async _beforeStep(e, t) {
+		let n = [];
+		this.dispatchEvent(new CustomEvent("wui-tour:beforestep", {
+			bubbles: !0,
+			detail: {
+				step: e,
+				index: t,
+				wait: (e) => n.push(e)
+			}
+		})), await Promise.all(n), typeof this.onBeforeStep == "function" && await this.onBeforeStep(e, t);
+	}
+	_build() {
+		let e = `wui-tour-${++l}`, n = document.createElement("div");
+		n.className = "wui-tour-layer", n.innerHTML = `
+            <div class="wui-tour-spot" aria-hidden="true"></div>
+            <div class="wui-tour-card" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="${e}-title" aria-describedby="${e}-text">
+                <p class="wui-tour-position"></p>
+                <h2 class="wui-tour-title" id="${e}-title"></h2>
+                <p class="wui-tour-text" id="${e}-text"></p>
+                <div class="wui-tour-actions">
+                    <button type="button" class="btn btn-sm btn-link wui-tour-skip"></button>
+                    <div class="wui-tour-nav">
+                        <button type="button" class="btn btn-sm btn-outline-secondary wui-tour-back"></button>
+                        <button type="button" class="btn btn-sm btn-primary wui-tour-next"></button>
+                    </div>
+                </div>
+            </div>
+            <div class="visually-hidden" role="status" aria-live="polite"></div>`, document.body.appendChild(n), this._layer = n, this._spot = n.querySelector(".wui-tour-spot"), this._card = n.querySelector(".wui-tour-card"), this._live = n.querySelector("[role=status]"), this._card.querySelector(".wui-tour-skip").addEventListener("click", () => this._close("skipped")), this._card.querySelector(".wui-tour-back").addEventListener("click", () => this._move(-1)), this._card.querySelector(".wui-tour-next").addEventListener("click", () => this._move(1)), this._onKey = (e) => this._key(e), this._onFocusIn = (e) => {
+			this._layer && !this._layer.contains(e.target) && this._card.focus();
+		}, document.addEventListener("keydown", this._onKey, !0), document.addEventListener("focusin", this._onFocusIn), t(n, () => this._place());
+	}
+	_show(e) {
+		this._current = e;
+		let { index: t, target: n } = e, r = this._steps[t], i = this._steps, a = t === i.length - 1, o = this._card;
+		o.querySelector(".wui-tour-position").textContent = `Step ${t + 1} of ${i.length}`;
+		let s = o.querySelector(".wui-tour-title");
+		s.textContent = r.title || "", s.hidden = !r.title, o.querySelector(".wui-tour-text").textContent = r.description || "", o.querySelector(".wui-tour-skip").textContent = this._label("skip"), o.querySelector(".wui-tour-back").textContent = this._label("back"), o.querySelector(".wui-tour-back").hidden = t <= this._firstIndex, o.querySelector(".wui-tour-next").textContent = this._label(a ? "done" : "next"), this._live.textContent = [
+			`Step ${t + 1} of ${i.length}`,
+			r.title,
+			r.description
+		].filter(Boolean).join(". "), n.scrollIntoView?.({
+			block: "center",
+			inline: "nearest"
+		}), this._place(), (!o.contains(document.activeElement) || document.activeElement.hidden) && o.focus(), this.dispatchEvent(new CustomEvent("wui-tour:step", {
+			bubbles: !0,
+			detail: {
+				step: r,
+				index: t
+			}
+		}));
+	}
+	_place() {
+		if (!this._current || !this._layer) return;
+		let e = this._current.target.getBoundingClientRect(), t = this._spot.style;
+		t.top = `${e.top - c}px`, t.left = `${e.left - c}px`, t.width = `${e.width + c * 2}px`, t.height = `${e.height + c * 2}px`, r(this._spot, this._card, { clampHeight: !0 });
+	}
+	async _move(e) {
+		if (!this._current || this._moving) return;
+		this._moving = !0;
+		let t = this._run;
+		try {
+			let n = await this._locate(this._current.index + e, e, t);
+			if (t !== this._run) return;
+			n ? this._show(n) : e > 0 && await this._close("finished");
+		} finally {
+			this._moving = !1;
+		}
+	}
+	_key(e) {
+		if (!(!this._layer || e.altKey || e.ctrlKey || e.metaKey)) {
+			if (e.key === "Escape") e.preventDefault(), e.stopPropagation(), this._close("skipped");
+			else if (e.key === "ArrowRight" || e.key === "ArrowLeft") e.preventDefault(), e.key === "ArrowRight" ? this._move(1) : this._current.index > this._firstIndex && this._move(-1);
+			else if (e.key === "Tab") {
+				let t = Array.from(this._card.querySelectorAll("button")).filter((e) => !e.hidden), n = t[0], r = t[t.length - 1], i = document.activeElement;
+				!this._card.contains(i) || e.shiftKey && (i === n || i === this._card) ? (e.preventDefault(), (e.shiftKey ? r : n).focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
+			}
+		}
+	}
+	_teardown() {
+		if (!this._layer) return;
+		document.removeEventListener("keydown", this._onKey, !0), document.removeEventListener("focusin", this._onFocusIn), n(this._layer), this._layer.remove(), this._layer = null, this._current = null;
+		let e = this._returnFocus;
+		this._returnFocus = null, e?.isConnected && e.focus?.();
+	}
+	async _close(e) {
+		let t = this._run;
+		this._teardown();
+		let n = this._store();
+		try {
+			n && t === this._run && await n.markSeen(this.tourId);
+		} finally {
+			this._finish(e);
+		}
+	}
+	_finish(e) {
+		this._run++, this._running = !1, this.hasAttribute("open") && this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("wui-tour:close", {
+			bubbles: !0,
+			detail: { reason: e }
+		}));
+	}
+};
+//#endregion
+export { u as n, f as t };