@tabler/core 1.6.0 → 1.6.1

package/dist/js/tabler.js

@@ -1,5 +1,5 @@
 /*!
-* Tabler v1.6.0 (https://tabler.io)
+* Tabler v1.6.1 (https://tabler.io)
 * Copyright 2018-2026 The Tabler Authors
 * Copyright 2018-2026 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -79,11 +79,17 @@
 	var triggerTransitionEnd = (element) => {
 		element.dispatchEvent(new Event(TRANSITION_END));
 	};
+	var unwrapJQuery = (object) => {
+		if (object && typeof object === "object" && typeof object.jquery !== "undefined") return object[0];
+		return object;
+	};
 	var isElement$1 = (object) => {
+		object = unwrapJQuery(object);
 		if (!object || typeof object !== "object") return false;
 		return typeof object.nodeType !== "undefined";
 	};
 	var getElement = (object) => {
+		object = unwrapJQuery(object);
 		if (isElement$1(object)) return object;
 		if (typeof object === "string" && object.length > 0) return document.querySelector(parseSelector(object));
 		return null;
@@ -127,7 +133,7 @@
 	};
 	var isRTL = () => document.documentElement.dir === "rtl";
 	var getjQuery = () => {
-		if (window.jQuery && !document.body.hasAttribute("data-bs-no-jquery")) return window.jQuery;
+		if (window.jQuery && !document.body.hasAttribute("data-bs-no-jquery") && !document.body.hasAttribute("data-tblr-no-jquery")) return window.jQuery;
 		return null;
 	};
 	var DOMContentLoadedCallbacks = [];
@@ -414,7 +420,7 @@
 	var PREFIXES = ["tblr", "bs"];
 	var Manipulator = {
 		setDataAttribute(element, key, value) {
-			element.setAttribute(`data-tblr-${normalizeDataKey(key)}`, value);
+			element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value);
 		},
 		removeDataAttribute(element, key) {
 			for (const prefix of PREFIXES) element.removeAttribute(`data-${prefix}-${normalizeDataKey(key)}`);
@@ -554,12 +560,14 @@
 	var VERSION = "5.3.8";
 	var BaseComponent = class extends Config {
 		constructor(element, config) {
+			var _Data$get;
 			super();
 			const resolved = getElement(element);
 			if (!resolved) return;
+			const ctor = this.constructor;
+			(_Data$get = Data.get(resolved, ctor.DATA_KEY)) === null || _Data$get === void 0 || _Data$get.dispose();
 			this._element = resolved;
 			this._config = this._getConfig(config);
-			const ctor = this.constructor;
 			Data.set(this._element, ctor.DATA_KEY, this);
 		}
 		dispose() {
@@ -569,7 +577,9 @@
 			for (const propertyName of Object.getOwnPropertyNames(this)) this[propertyName] = null;
 		}
 		_queueCallback(callback, element, isAnimated = true) {
-			executeAfterTransition(callback, element, isAnimated);
+			executeAfterTransition(() => {
+				if (this._element) callback();
+			}, element, isAnimated);
 		}
 		_getConfig(config) {
 			config = this._mergeConfigObj(config, this._element);
@@ -771,13 +781,14 @@
 		}
 		update() {
 			const element = this._element;
-			if (!element.isConnected || element.offsetParent === null) return;
+			if (!element.isConnected || element.getClientRects().length === 0) return;
 			const { scrollTop } = document.documentElement;
 			const style = getComputedStyle(element);
-			const border = style.boxSizing === "border-box" ? Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth) : 0;
+			const extra = style.boxSizing === "border-box" ? Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth) : -(Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom));
 			const before = element.style.height;
+			element.style.overflowY = "hidden";
 			element.style.height = "auto";
-			const height = `${element.scrollHeight + border}px`;
+			const height = `${element.scrollHeight + extra}px`;
 			element.style.height = height;
 			element.style.overflowY = element.scrollHeight > element.clientHeight ? "auto" : "hidden";
 			document.documentElement.scrollTop = scrollTop;
@@ -841,6 +852,8 @@
 	var SELECTOR_DATA_TOGGLE$11 = `[data-bs-toggle="${NAME$25}"], [data-tblr-toggle="${NAME$25}"]`;
 	var SELECTOR_LABEL = `.${NAME$25}-label`;
 	var SELECTOR_FEEDBACK = `.${NAME$25}-feedback`;
+	var ATTRIBUTE_TEXT = "data-bs-text";
+	var ATTRIBUTE_TEXT_ALIAS = "data-tblr-text";
 	var Default$22 = {
 		target: null,
 		text: null,
@@ -900,9 +913,10 @@
 			var _source$textContent;
 			const { text, target } = this._config;
 			if (text !== null && text !== "") return String(text);
-			const source = target ? SelectorEngine.findOne(target) : null;
+			const source = target ? getElement(target) : null;
 			if (!source) return "";
-			return source instanceof HTMLInputElement || source instanceof HTMLTextAreaElement ? source.value : ((_source$textContent = source.textContent) !== null && _source$textContent !== void 0 ? _source$textContent : "").trim();
+			if (source instanceof HTMLInputElement || source instanceof HTMLTextAreaElement) return source.value;
+			return (source instanceof HTMLElement ? source.innerText : (_source$textContent = source.textContent) !== null && _source$textContent !== void 0 ? _source$textContent : "").trim();
 		}
 		copy() {
 			var _this = this;
@@ -922,10 +936,21 @@
 				EventHandler.trigger(_this._element, EVENT_COPIED);
 			})();
 		}
+		/** Ends the copied state, for a `delay` of 0 or an early reset. */
+		reset() {
+			window.clearTimeout(this._timeout);
+			this._toggleCopied(false);
+		}
 		dispose() {
 			window.clearTimeout(this._timeout);
 			super.dispose();
 		}
+		_mergeConfigObj(config, element) {
+			var _element$getAttribute;
+			const raw = (_element$getAttribute = element === null || element === void 0 ? void 0 : element.getAttribute(ATTRIBUTE_TEXT)) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : element === null || element === void 0 ? void 0 : element.getAttribute(ATTRIBUTE_TEXT_ALIAS);
+			const dataOptions = raw === null || raw === void 0 ? {} : { text: raw };
+			return super._mergeConfigObj(_objectSpread2(_objectSpread2({}, dataOptions), config), element);
+		}
 		_showCopied() {
 			window.clearTimeout(this._timeout);
 			this._toggleCopied(true);
@@ -1007,12 +1032,14 @@
 		frame: 0,
 		lastTick: 0,
 		add(emitter) {
-			this.emitters.push(emitter);
 			this._mount();
+			if (!this.context) return false;
+			this.emitters.push(emitter);
 			if (!this.frame) {
 				this.lastTick = performance.now();
 				this.frame = requestAnimationFrame((now) => this._tick(now));
 			}
+			return true;
 		},
 		_mount() {
 			if (this.canvas) return;
@@ -1028,9 +1055,11 @@
 				pointerEvents: "none",
 				display: "block"
 			});
+			const context = canvas.getContext("2d");
+			if (!context) return;
 			document.body.append(canvas);
 			this.canvas = canvas;
-			this.context = canvas.getContext("2d");
+			this.context = context;
 			this._resize();
 			window.addEventListener("resize", this._onResize);
 		},
@@ -1051,7 +1080,7 @@
 		_resize() {
 			if (!this.canvas || !this.context) return;
 			const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
-			this.canvas.width = window.innerWidth * dpr;
+			this.canvas.width = document.documentElement.clientWidth * dpr;
 			this.canvas.height = window.innerHeight * dpr;
 			this.context.setTransform(dpr, 0, 0, dpr, 0, 0);
 		},
@@ -1135,7 +1164,7 @@
 				if (pouring || airborne) continue;
 				this.emitters.splice(i, 1);
 				emitter.done = true;
-				EventHandler.trigger(emitter.element, EVENT_END);
+				if (!emitter.detached) EventHandler.trigger(emitter.element, EVENT_END);
 			}
 		}
 	};
@@ -1175,15 +1204,20 @@
 				startedAt: performance.now(),
 				emitted: 0,
 				stopped: false,
-				done: false
+				done: false,
+				detached: false
 			};
-			stage.add(this._emitter);
+			if (!stage.add(this._emitter)) {
+				this._emitter = null;
+				EventHandler.trigger(this._element, EVENT_END);
+			}
 		}
 		stop() {
 			if (this._emitter && !this._emitter.done) this._emitter.stopped = true;
 			this._emitter = null;
 		}
 		dispose() {
+			if (this._emitter) this._emitter.detached = true;
 			this.stop();
 			super.dispose();
 		}
@@ -1208,7 +1242,10 @@
 		if (["A", "AREA"].includes(this.tagName)) event.preventDefault();
 		if (isDisabled(this)) return;
 		const target = SelectorEngine.getElementFromSelector(this) || this;
-		Confetti.getOrCreateInstance(target).burst();
+		const config = Manipulator.getDataAttributes(this);
+		const instance = Confetti.getOrCreateInstance(target, config);
+		if (target !== this) instance._config = instance._getConfig(config);
+		instance.burst();
 	});
 	//#endregion
 	//#region js/src/countup.ts
@@ -1298,6 +1335,7 @@
 			this._elapsed = 0;
 			this._running = false;
 			this._paused = false;
+			this._started = false;
 			if (!this._element) return;
 			const value = parseValue((_this$_element$textCo = this._element.textContent) !== null && _this$_element$textCo !== void 0 ? _this$_element$textCo : "", this._config.format);
 			if (Number.isNaN(value)) return;
@@ -1312,14 +1350,7 @@
 				this.start();
 				return;
 			}
-			this._observer = new IntersectionObserver((entries) => {
-				if (entries.some((entry) => entry.isIntersecting)) {
-					var _this$_observer;
-					(_this$_observer = this._observer) === null || _this$_observer === void 0 || _this$_observer.disconnect();
-					this._observer = null;
-					this.start();
-				}
-			});
+			this._observer = new IntersectionObserver((entries) => this._observerCallback(entries));
 			this._observer.observe(this._element);
 		}
 		static get Default() {
@@ -1336,6 +1367,7 @@
 		}
 		reset() {
 			this._stop();
+			this._started = false;
 			this._value = this._config.startVal;
 			this._print(this._value);
 		}
@@ -1355,9 +1387,9 @@
 			}
 		}
 		dispose() {
-			var _this$_observer2;
+			var _this$_observer;
 			this._stop();
-			(_this$_observer2 = this._observer) === null || _this$_observer2 === void 0 || _this$_observer2.disconnect();
+			(_this$_observer = this._observer) === null || _this$_observer === void 0 || _this$_observer.disconnect();
 			super.dispose();
 		}
 		_mergeConfigObj(config, element) {
@@ -1365,12 +1397,22 @@
 			let dataOptions = {};
 			const raw = (_element$getAttribute = element === null || element === void 0 ? void 0 : element.getAttribute(DATA_ATTRIBUTE$1)) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : element === null || element === void 0 ? void 0 : element.getAttribute(DATA_ATTRIBUTE_ALIAS);
 			if (raw) try {
-				dataOptions = JSON.parse(raw);
+				const parsed = JSON.parse(raw);
+				if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) dataOptions = parsed;
 			} catch (_unused) {}
 			return super._mergeConfigObj(_objectSpread2(_objectSpread2({}, coerceOptions(dataOptions)), config), element);
 		}
+		_observerCallback(entries) {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				var _this$_observer2;
+				(_this$_observer2 = this._observer) === null || _this$_observer2 === void 0 || _this$_observer2.disconnect();
+				this._observer = null;
+				if (!this._started) this.start();
+			}
+		}
 		_animate(from, to) {
 			this._stop();
+			this._started = true;
 			if (from === to || this._config.duration <= 0 || reducedMotion()) {
 				this._finish(to);
 				return;
@@ -1415,12 +1457,14 @@
 			const { decimalPlaces, useGrouping, separator, decimal, prefix, suffix, format, formatter } = this._config;
 			if (formatter) return formatter(value);
 			if (format === "time") {
-				const minutes = Math.round(Math.abs(value));
-				return `${value < 0 ? "-" : ""}${prefix}${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, "0")}${suffix}`;
+				const rounded = Math.sign(value) * Math.round(Math.abs(value));
+				const minutes = Math.abs(rounded);
+				return `${rounded < 0 ? "-" : ""}${prefix}${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, "0")}${suffix}`;
 			}
-			const [integer, fraction] = Math.abs(value).toFixed(decimalPlaces).split(".");
+			const fixed = value.toFixed(decimalPlaces);
+			const [integer, fraction] = fixed.replace("-", "").split(".");
 			const grouped = useGrouping ? integer.replace(/\B(?=(\d{3})+(?!\d))/g, separator) : integer;
-			return `${value < 0 ? "-" : ""}${prefix}${grouped}${fraction ? decimal + fraction : ""}${suffix}`;
+			return `${Number(fixed) < 0 ? "-" : ""}${prefix}${grouped}${fraction ? decimal + fraction : ""}${suffix}`;
 		}
 	};
 	/**
@@ -1449,6 +1493,14 @@
 	var SELECTOR_BOUND_INPUT = "input[type=\"hidden\"], input[name]";
 	var HIDE_DELAY = 100;
 	var DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+	var EXTENSION_NAMES = [
+		"annotations",
+		"months",
+		"motion",
+		"time",
+		"weeks"
+	];
+	var writtenSelections = /* @__PURE__ */ new WeakMap();
 	var Default$19 = {
 		datepickerTheme: null,
 		dateMin: null,
@@ -1467,8 +1519,8 @@
 	};
 	var DefaultType$19 = {
 		datepickerTheme: "(null|string)",
-		dateMin: "(null|string|number|object)",
-		dateMax: "(null|string|number|object)",
+		dateMin: "(null|string|number|object|date)",
+		dateMax: "(null|string|number|object|date)",
 		dateFormat: "(null|object|function)",
 		displayElement: "(null|string|element|boolean)",
 		displayMonthsCount: "number",
@@ -1502,6 +1554,7 @@
 			this._isSilent = false;
 			this._skipPluginShow = false;
 			this._resolveShown = null;
+			this._hideTimeout = 0;
 			this._isInput = false;
 			this._isInline = false;
 			this._boundInput = null;
@@ -1509,6 +1562,7 @@
 			this._displayElement = null;
 			this._themeObserver = null;
 			this._onFocusIn = null;
+			this._onResize = () => this._alignToPositionElement();
 			this._selectedDates = [];
 			if (!this._element || !window.VanillaCalendarPro) return;
 			this._initCalendar();
@@ -1565,21 +1619,35 @@
 			})();
 		}
 		dispose() {
-			var _this$_themeObserver, _this$_calendar;
+			var _this$_themeObserver;
+			window.clearTimeout(this._hideTimeout);
 			(_this$_themeObserver = this._themeObserver) === null || _this$_themeObserver === void 0 || _this$_themeObserver.disconnect();
+			window.removeEventListener("resize", this._onResize);
 			if (this._onFocusIn) EventHandler.off(document, EVENT_FOCUSIN$3, this._onFocusIn);
-			(_this$_calendar = this._calendar) === null || _this$_calendar === void 0 || _this$_calendar.destroy();
+			if (this._calendar) {
+				this._calendar.destroy();
+				const clone = this._calendar.context.mainElement;
+				if (clone && clone !== this._element && clone.isConnected) {
+					if (this._isInput) clone.replaceWith(this._element);
+					else if (this._boundInput) {
+						const copy = SelectorEngine.findOne(SELECTOR_BOUND_INPUT, clone);
+						if (copy) copy.replaceWith(this._boundInput);
+						else clone.append(this._boundInput);
+					}
+				}
+			}
 			super.dispose();
 		}
 		getSelectedDates() {
-			var _this$_calendar2;
-			const dates = (_this$_calendar2 = this._calendar) === null || _this$_calendar2 === void 0 || (_this$_calendar2 = _this$_calendar2.context) === null || _this$_calendar2 === void 0 ? void 0 : _this$_calendar2.selectedDates;
+			var _this$_calendar;
+			const dates = (_this$_calendar = this._calendar) === null || _this$_calendar === void 0 || (_this$_calendar = _this$_calendar.context) === null || _this$_calendar === void 0 ? void 0 : _this$_calendar.selectedDates;
 			return dates && dates.length > 0 ? [...dates] : [...this._selectedDates];
 		}
 		setSelectedDates(dates) {
-			var _this$_calendar3;
-			this._selectedDates = dates.map(String);
-			(_this$_calendar3 = this._calendar) === null || _this$_calendar3 === void 0 || _this$_calendar3.set({ selectedDates: dates });
+			var _this$_calendar2;
+			this._selectedDates = dates.map((date) => this._toIsoDate(date));
+			(_this$_calendar2 = this._calendar) === null || _this$_calendar2 === void 0 || _this$_calendar2.set(_objectSpread2({ selectedDates: this._selectedDates }, this._monthOf(this._selectedDates[0])));
+			this._writeSelection(this._selectedDates);
 		}
 		_initCalendar() {
 			this._isInput = this._element.tagName === "INPUT";
@@ -1597,31 +1665,36 @@
 			this._updateDisplayWithSelectedDates();
 		}
 		_updateDisplayWithSelectedDates() {
-			const { selectedDates } = this._config;
-			if (!selectedDates || selectedDates.length === 0) return;
-			this._writeSelection(selectedDates);
+			if (this._selectedDates.length === 0) return;
+			this._writeSelection(this._selectedDates);
 		}
 		_writeSelection(selectedDates) {
 			const formattedDate = this._formatDateForInput(selectedDates);
-			if (this._isInput) this._element.value = formattedDate;
+			if (this._isInput) {
+				this._element.value = formattedDate;
+				writtenSelections.set(this._element, {
+					text: formattedDate,
+					dates: [...selectedDates]
+				});
+			}
 			if (this._boundInput) this._boundInput.value = selectedDates.join(",");
 			if (this._displayElement) this._displayElement.textContent = formattedDate;
 		}
 		_resolvePositionElement() {
 			let { positionElement } = this._config;
-			if (typeof positionElement === "string") positionElement = SelectorEngine.findOne(positionElement);
+			if (typeof positionElement === "string") positionElement = getElement(positionElement);
 			if (!positionElement && this._isInput && !this._isInline) positionElement = this._element.closest(SELECTOR_INPUT_WRAPPER);
 			return positionElement || this._element;
 		}
 		_resolveDisplayElement() {
 			const { displayElement } = this._config;
-			if (typeof displayElement === "string") return SelectorEngine.findOne(displayElement);
+			if (typeof displayElement === "string") return getElement(displayElement);
 			if (displayElement === true || displayElement === null && !this._isInput && !this._isInline) return SelectorEngine.findOne(SELECTOR_DISPLAY, this._element) || this._element;
 			return displayElement;
 		}
 		_alignToPositionElement() {
-			var _this$_calendar4;
-			const mainElement = (_this$_calendar4 = this._calendar) === null || _this$_calendar4 === void 0 || (_this$_calendar4 = _this$_calendar4.context) === null || _this$_calendar4 === void 0 ? void 0 : _this$_calendar4.mainElement;
+			var _this$_calendar3;
+			const mainElement = (_this$_calendar3 = this._calendar) === null || _this$_calendar3 === void 0 || (_this$_calendar3 = _this$_calendar3.context) === null || _this$_calendar3 === void 0 ? void 0 : _this$_calendar3.mainElement;
 			if (!mainElement || this._isInline || !this._positionElement || this._positionElement === this._element) return;
 			const anchor = this._positionElement.getBoundingClientRect();
 			const popup = mainElement.getBoundingClientRect();
@@ -1649,8 +1722,8 @@
 			const ancestor = this._getThemeAncestor();
 			if (!ancestor || this._config.datepickerTheme) return;
 			this._themeObserver = new MutationObserver(() => {
-				var _this$_calendar5;
-				this._syncThemeAttribute((_this$_calendar5 = this._calendar) === null || _this$_calendar5 === void 0 || (_this$_calendar5 = _this$_calendar5.context) === null || _this$_calendar5 === void 0 ? void 0 : _this$_calendar5.mainElement);
+				var _this$_calendar4;
+				this._syncThemeAttribute((_this$_calendar4 = this._calendar) === null || _this$_calendar4 === void 0 || (_this$_calendar4 = _this$_calendar4.context) === null || _this$_calendar4 === void 0 ? void 0 : _this$_calendar4.mainElement);
 			});
 			this._themeObserver.observe(ancestor, {
 				attributes: true,
@@ -1660,10 +1733,10 @@
 		_setupDismissOnFocus() {
 			if (this._isInline) return;
 			this._onFocusIn = (event) => {
-				var _this$_calendar6;
+				var _this$_calendar5;
 				if (!this._isShown) return;
 				const { target } = event;
-				const mainElement = (_this$_calendar6 = this._calendar) === null || _this$_calendar6 === void 0 || (_this$_calendar6 = _this$_calendar6.context) === null || _this$_calendar6 === void 0 ? void 0 : _this$_calendar6.mainElement;
+				const mainElement = (_this$_calendar5 = this._calendar) === null || _this$_calendar5 === void 0 || (_this$_calendar5 = _this$_calendar5.context) === null || _this$_calendar5 === void 0 ? void 0 : _this$_calendar5.mainElement;
 				if (target instanceof Node && (this._element.contains(target) || (mainElement === null || mainElement === void 0 ? void 0 : mainElement.contains(target)))) return;
 				this.hide();
 			};
@@ -1689,6 +1762,8 @@
 			this._isShown = true;
 			this._syncThemeAttribute(calendar.context.mainElement);
 			this._alignToPositionElement();
+			window.removeEventListener("resize", this._onResize);
+			window.addEventListener("resize", this._onResize);
 			if (!wasShown) EventHandler.trigger(this._element, EVENT_SHOWN$7);
 			(_this$_resolveShown = this._resolveShown) === null || _this$_resolveShown === void 0 || _this$_resolveShown.call(this);
 		}
@@ -1701,12 +1776,26 @@
 				return;
 			}
 			this._isShown = false;
+			window.removeEventListener("resize", this._onResize);
 			EventHandler.trigger(this._element, EVENT_HIDDEN$7);
 		}
+		/** @internal */
+		_calendarExtensions(own = []) {
+			const library = window.VanillaCalendarPro;
+			const extensions = [...own];
+			for (const name of EXTENSION_NAMES) {
+				const extension = library === null || library === void 0 ? void 0 : library[name];
+				if (extension && typeof extension === "object" && !extensions.includes(extension)) extensions.push(extension);
+			}
+			return extensions;
+		}
+		/** @internal */
 		_buildCalendarOptions() {
 			const theme = this._getEffectiveTheme();
 			const vcpTheme = !theme || theme === "auto" ? "system" : theme;
-			const calendarOptions = _objectSpread2(_objectSpread2({}, this._config.vcpOptions), {}, {
+			const vcpOptions = this._config.vcpOptions;
+			const extensions = this._calendarExtensions(vcpOptions.extensions);
+			const calendarOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, vcpOptions), extensions.length > 0 ? { extensions } : {}), {}, {
 				inputMode: !this._isInline,
 				positionToInput: this._config.placement,
 				firstWeekday: this._config.firstWeekday,
@@ -1734,10 +1823,11 @@
 			if (this._config.dateMax) calendarOptions.dateMax = this._config.dateMax;
 			return calendarOptions;
 		}
+		/** @internal */
 		_handleDateClick(self, event) {
 			const selectedDates = [...self.context.selectedDates];
 			this._selectedDates = selectedDates;
-			if (selectedDates.length > 0) this._writeSelection(selectedDates);
+			this._writeSelection(selectedDates);
 			const args = {
 				dates: selectedDates,
 				event
@@ -1747,7 +1837,10 @@
 		}
 		_maybeHideAfterSelection(selectedDates) {
 			if (this._isInline) return;
-			if (this._config.selectionMode === "single" && selectedDates.length > 0 || this._config.selectionMode === "multiple-ranged" && selectedDates.length >= 2) setTimeout(() => this.hide(), HIDE_DELAY);
+			if (this._config.selectionMode === "single" && selectedDates.length > 0 || this._config.selectionMode === "multiple-ranged" && selectedDates.length >= 2) {
+				window.clearTimeout(this._hideTimeout);
+				this._hideTimeout = window.setTimeout(() => this.hide(), HIDE_DELAY);
+			}
 		}
 		_parseDate(dateStr) {
 			const [year = 0, month = 1, day = 1] = dateStr.split("-").map(Number);
@@ -1771,13 +1864,32 @@
 			var _this$_calendar7;
 			const value = this._element.value.trim();
 			if (!value) return;
+			const written = writtenSelections.get(this._element);
+			if (written && written.text.trim() === value) {
+				var _this$_calendar6;
+				this._selectedDates = [...written.dates];
+				(_this$_calendar6 = this._calendar) === null || _this$_calendar6 === void 0 || _this$_calendar6.set(_objectSpread2({ selectedDates: this._selectedDates }, this._monthOf(this._selectedDates[0])));
+				return;
+			}
 			const date = DATE_PATTERN.test(value) ? this._parseDate(value) : new Date(value);
 			if (Number.isNaN(date.getTime())) return;
-			const year = date.getFullYear();
-			const month = String(date.getMonth() + 1).padStart(2, "0");
-			const day = String(date.getDate()).padStart(2, "0");
-			this._selectedDates = [`${year}-${month}-${day}`];
-			(_this$_calendar7 = this._calendar) === null || _this$_calendar7 === void 0 || _this$_calendar7.set({ selectedDates: this._selectedDates });
+			this._selectedDates = [this._toIsoDate(date)];
+			(_this$_calendar7 = this._calendar) === null || _this$_calendar7 === void 0 || _this$_calendar7.set(_objectSpread2({ selectedDates: this._selectedDates }, this._monthOf(this._selectedDates[0])));
+		}
+		_toIsoDate(value) {
+			if (typeof value === "string" && DATE_PATTERN.test(value)) return value;
+			const date = value instanceof Date ? value : typeof value === "string" && DATE_PATTERN.test(value) ? this._parseDate(value) : new Date(value);
+			if (Number.isNaN(date.getTime())) return String(value);
+			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+		}
+		/** @internal */
+		_monthOf(value) {
+			if (!value || !DATE_PATTERN.test(value)) return {};
+			const date = this._parseDate(value);
+			return {
+				selectedMonth: date.getMonth(),
+				selectedYear: date.getFullYear()
+			};
 		}
 	};
 	/**
@@ -1816,7 +1928,7 @@
 		lazy: true
 	};
 	var DefaultType$18 = {
-		mask: "string",
+		mask: "(string|function|regexp|object|array)",
 		lazy: "boolean"
 	};
 	/**
@@ -1830,10 +1942,7 @@
 			super(element, config);
 			this._mask = null;
 			if (!this._element || !this._config.mask || !window.IMask) return;
-			this._mask = new window.IMask(this._element, {
-				mask: this._config.mask,
-				lazy: this._config.lazy
-			});
+			this._mask = new window.IMask(this._element, _objectSpread2({}, this._config));
 		}
 		static get Default() {
 			return Default$18;
@@ -1861,7 +1970,7 @@
 			const dataOptions = {};
 			const mask = element === null || element === void 0 ? void 0 : element.getAttribute(ATTRIBUTE_MASK);
 			if (mask) dataOptions.mask = mask;
-			if (element === null || element === void 0 ? void 0 : element.hasAttribute(ATTRIBUTE_VISIBLE)) dataOptions.lazy = element.getAttribute(ATTRIBUTE_VISIBLE) !== "true";
+			if (element === null || element === void 0 ? void 0 : element.hasAttribute(ATTRIBUTE_VISIBLE)) dataOptions.lazy = element.getAttribute(ATTRIBUTE_VISIBLE) === "false";
 			return super._mergeConfigObj(_objectSpread2(_objectSpread2({}, dataOptions), config), element);
 		}
 	};
@@ -3852,7 +3961,7 @@
 	var CLASS_NAME_DROPUP_CENTER = "dropup-center";
 	var CLASS_NAME_DROPDOWN_CENTER = "dropdown-center";
 	var SELECTOR_DATA_TOGGLE$6 = "[data-bs-toggle=\"dropdown\"]:not(.disabled):not(:disabled), [data-tblr-toggle=\"dropdown\"]:not(.disabled):not(:disabled)";
-	var SELECTOR_DATA_TOGGLE_SHOWN = `.${CLASS_NAME_SHOW$6}[data-bs-toggle="dropdown"], .${CLASS_NAME_SHOW$6}[data-tblr-toggle="dropdown"]`;
+	var SELECTOR_DATA_TOGGLE_SHOWN = SELECTOR_DATA_TOGGLE$6.split(", ").map((selector) => `${selector}.${CLASS_NAME_SHOW$6}`).join(", ");
 	var SELECTOR_MENU = ".dropdown-menu";
 	var SELECTOR_NAVBAR = ".navbar";
 	var SELECTOR_NAVBAR_NAV = ".navbar-nav";
@@ -5843,13 +5952,18 @@
 	};
 	//#endregion
 	//#region js/src/dropdown.ts
-	[].slice.call(document.querySelectorAll("[data-bs-toggle=\"dropdown\"]")).map(function(dropdownTriggerEl) {
-		return new Dropdown(dropdownTriggerEl, { boundary: dropdownTriggerEl.getAttribute("data-bs-boundary") === "viewport" ? document.documentElement : "clippingParents" });
+	onDOMContentLoaded(() => {
+		for (const dropdownTriggerEl of document.querySelectorAll("[data-bs-toggle=\"dropdown\"], [data-tblr-toggle=\"dropdown\"]")) try {
+			const options = { boundary: Manipulator.getDataAttribute(dropdownTriggerEl, "boundary") === "viewport" ? document.documentElement : "clippingParents" };
+			Dropdown.getOrCreateInstance(dropdownTriggerEl, options);
+		} catch (error) {
+			console.error(error);
+		}
 	});
 	//#endregion
 	//#region js/src/sidebar.ts
 	var syncSidebarToggles = (folded) => {
-		for (const toggle of document.querySelectorAll("[data-bs-toggle=\"sidebar-folded\"]")) toggle.setAttribute("aria-pressed", String(folded));
+		for (const toggle of document.querySelectorAll("[data-bs-toggle=\"sidebar-folded\"], [data-tblr-toggle=\"sidebar-folded\"]")) toggle.setAttribute("aria-pressed", String(folded));
 	};
 	var sidebarIsFolded = () => {
 		var _document$documentEle;
@@ -5864,7 +5978,7 @@
 	document.addEventListener("click", (event) => {
 		if (!sidebarIsFolded()) return;
 		const target = event.target;
-		if (target.closest(".navbar-vertical .dropdown-menu")) return;
+		if (!(target instanceof Element) || target.closest(".navbar-vertical .dropdown-menu")) return;
 		hideSidebarDropdowns(target.closest(".navbar-vertical [data-bs-toggle=\"dropdown\"]"));
 	});
 	document.addEventListener("mouseleave", (event) => {
@@ -5872,7 +5986,7 @@
 		if (!(target instanceof Element) || !target.matches(".navbar-vertical")) return;
 		if (document.documentElement.getAttribute("data-bs-sidebar") === "folded-hover" || target.classList.contains("navbar-folded-hover")) hideSidebarDropdowns();
 	}, true);
-	document.addEventListener("DOMContentLoaded", () => {
+	onDOMContentLoaded(() => {
 		var _document$documentEle2;
 		const folded = ((_document$documentEle2 = document.documentElement.getAttribute("data-bs-sidebar")) !== null && _document$documentEle2 !== void 0 ? _document$documentEle2 : "").startsWith("folded");
 		syncSidebarToggles(folded);
@@ -5884,41 +5998,51 @@
 	});
 	document.addEventListener("click", (event) => {
 		var _html$getAttribute;
-		if (!event.target.closest("[data-bs-toggle=\"sidebar-folded\"]")) return;
+		if (!(event.target instanceof Element ? event.target.closest("[data-bs-toggle=\"sidebar-folded\"], [data-tblr-toggle=\"sidebar-folded\"]") : null)) return;
 		const html = document.documentElement;
 		const willFold = !((_html$getAttribute = html.getAttribute("data-bs-sidebar")) !== null && _html$getAttribute !== void 0 ? _html$getAttribute : "").startsWith("folded");
 		if (willFold) html.setAttribute("data-bs-sidebar", "folded-hover");
 		else html.removeAttribute("data-bs-sidebar");
-		localStorage.setItem("tabler-sidebar", willFold ? "folded-hover" : "default");
+		try {
+			localStorage.setItem("tabler-sidebar", willFold ? "folded-hover" : "default");
+		} catch (_unused) {}
 		syncSidebarToggles(willFold);
 		hideSidebarDropdowns();
 		document.dispatchEvent(new CustomEvent("tabler:sidebar-folded", { detail: { folded: willFold } }));
 	});
 	//#endregion
 	//#region js/src/tooltip.ts
-	[].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]")).map(function(tooltipTriggerEl) {
-		var _tooltipTriggerEl$get;
-		return new Tooltip(tooltipTriggerEl, {
-			delay: {
-				show: 50,
-				hide: 50
-			},
-			html: tooltipTriggerEl.getAttribute("data-bs-html") === "true",
-			placement: (_tooltipTriggerEl$get = tooltipTriggerEl.getAttribute("data-bs-placement")) !== null && _tooltipTriggerEl$get !== void 0 ? _tooltipTriggerEl$get : "auto"
-		});
+	onDOMContentLoaded(() => {
+		for (const tooltipTriggerEl of document.querySelectorAll("[data-bs-toggle=\"tooltip\"], [data-tblr-toggle=\"tooltip\"]")) try {
+			var _Manipulator$getDataA, _Manipulator$getDataA2;
+			const options = {
+				delay: (_Manipulator$getDataA = Manipulator.getDataAttribute(tooltipTriggerEl, "delay")) !== null && _Manipulator$getDataA !== void 0 ? _Manipulator$getDataA : {
+					show: 50,
+					hide: 50
+				},
+				placement: (_Manipulator$getDataA2 = Manipulator.getDataAttribute(tooltipTriggerEl, "placement")) !== null && _Manipulator$getDataA2 !== void 0 ? _Manipulator$getDataA2 : "auto"
+			};
+			Tooltip.getOrCreateInstance(tooltipTriggerEl, options);
+		} catch (error) {
+			console.error(error);
+		}
 	});
 	//#endregion
 	//#region js/src/popover.ts
-	[].slice.call(document.querySelectorAll("[data-bs-toggle=\"popover\"]")).map(function(popoverTriggerEl) {
-		var _popoverTriggerEl$get;
-		return new Popover(popoverTriggerEl, {
-			delay: {
-				show: 50,
-				hide: 50
-			},
-			html: popoverTriggerEl.getAttribute("data-bs-html") === "true",
-			placement: (_popoverTriggerEl$get = popoverTriggerEl.getAttribute("data-bs-placement")) !== null && _popoverTriggerEl$get !== void 0 ? _popoverTriggerEl$get : "auto"
-		});
+	onDOMContentLoaded(() => {
+		for (const popoverTriggerEl of document.querySelectorAll("[data-bs-toggle=\"popover\"], [data-tblr-toggle=\"popover\"]")) try {
+			var _Manipulator$getDataA, _Manipulator$getDataA2;
+			const options = {
+				delay: (_Manipulator$getDataA = Manipulator.getDataAttribute(popoverTriggerEl, "delay")) !== null && _Manipulator$getDataA !== void 0 ? _Manipulator$getDataA : {
+					show: 50,
+					hide: 50
+				},
+				placement: (_Manipulator$getDataA2 = Manipulator.getDataAttribute(popoverTriggerEl, "placement")) !== null && _Manipulator$getDataA2 !== void 0 ? _Manipulator$getDataA2 : "auto"
+			};
+			Popover.getOrCreateInstance(popoverTriggerEl, options);
+		} catch (error) {
+			console.error(error);
+		}
 	});
 	//#endregion
 	//#region \0@oxc-project+runtime@0.147.0/helpers/esm/checkPrivateRedeclaration.js
@@ -6032,13 +6156,19 @@
 			_assertClassBrand(_SwitchIcon_brand, this, _setLoading).call(this, true);
 			pending.then(() => _assertClassBrand(_SwitchIcon_brand, this, _setActive).call(this, active), () => void 0).finally(() => _assertClassBrand(_SwitchIcon_brand, this, _setLoading).call(this, false));
 		}
+		dispose() {
+			_assertClassBrand(_SwitchIcon_brand, this, _setLoading).call(this, false);
+			super.dispose();
+		}
 	};
 	function _setActive(active) {
+		if (!this._element) return;
 		_classPrivateFieldGet2(_iconElement, this).classList.toggle(CLASS_NAME_ACTIVE$1, active);
 		this._element.setAttribute("aria-pressed", String(active));
 		EventHandler.trigger(this._element, EVENT_CHANGE$1, { active });
 	}
 	function _setLoading(loading) {
+		if (!this._element) return;
 		_classPrivateFieldGet2(_iconElement, this).classList.toggle(CLASS_NAME_LOADING, loading);
 		if (loading) this._element.setAttribute("aria-busy", "true");
 		else this._element.removeAttribute("aria-busy");
@@ -6051,20 +6181,30 @@
 	//#region js/src/tab.ts
 	var EnableActivationTabsFromLocationHash = () => {
 		const locationHash = window.location.hash;
-		if (locationHash) [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tab\"]")).filter((tab) => tab.hash === locationHash).map((tab) => {
-			new Tab(tab).show();
-		});
+		if (!locationHash) return;
+		for (const tab of document.querySelectorAll("[data-bs-toggle=\"tab\"], [data-tblr-toggle=\"tab\"]")) {
+			if (tab.hash !== locationHash) continue;
+			try {
+				Tab.getOrCreateInstance(tab).show();
+			} catch (error) {
+				console.error(error);
+			}
+		}
 	};
-	EnableActivationTabsFromLocationHash();
+	onDOMContentLoaded(EnableActivationTabsFromLocationHash);
 	//#endregion
 	//#region js/src/toast.ts
-	[].slice.call(document.querySelectorAll("[data-bs-toggle=\"toast\"]")).map(function(toastTriggerEl) {
-		const target = toastTriggerEl.getAttribute("data-bs-target");
-		if (target === null) return;
-		const toastEl = new Toast(target);
-		toastTriggerEl.addEventListener("click", () => {
-			toastEl.show();
-		});
+	onDOMContentLoaded(() => {
+		for (const toastTriggerEl of document.querySelectorAll("[data-bs-toggle=\"toast\"], [data-tblr-toggle=\"toast\"]")) try {
+			const toastEl = SelectorEngine.getElementFromSelector(toastTriggerEl);
+			if (!toastEl) continue;
+			const toast = Toast.getOrCreateInstance(toastEl);
+			toastTriggerEl.addEventListener("click", () => {
+				toast.show();
+			});
+		} catch (error) {
+			console.error(error);
+		}
 	});
 	//#endregion
 	//#region js/src/sortable.ts
@@ -6127,7 +6267,8 @@
 			let dataOptions = {};
 			const raw = element === null || element === void 0 ? void 0 : element.getAttribute(DATA_ATTRIBUTE);
 			if (raw) try {
-				dataOptions = JSON.parse(raw);
+				const parsed = JSON.parse(raw);
+				if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) dataOptions = parsed;
 			} catch (_unused) {}
 			return super._mergeConfigObj(_objectSpread2(_objectSpread2({}, dataOptions), config), element);
 		}
@@ -6165,6 +6306,7 @@
 		"keyup",
 		"select"
 	];
+	var POINTER_END_EVENTS = ["click", "pointercancel"];
 	var MASK_CHARACTER = "•";
 	var TYPES = {
 		numeric: {
@@ -6183,6 +6325,7 @@
 			filter: /[^A-Za-z]/g
 		}
 	};
+	var MAX_LENGTH = 32;
 	var Default$2 = {
 		groups: null,
 		length: null,
@@ -6209,14 +6352,29 @@
 			var _TYPES$this$_config$t;
 			super(element, config);
 			this._length = 0;
+			this._wasComplete = false;
 			this._slots = [];
 			this._slotsContainer = null;
 			this._pointerActive = false;
 			this._pointerIndex = 0;
-			this._onInput = () => this._handleInput();
+			this._composedValue = null;
+			this._onInput = (event) => {
+				if (event.isComposing) return;
+				const composed = this._composedValue;
+				this._composedValue = null;
+				if (composed !== null && composed === this._input.value) return;
+				this._handleInput();
+			};
+			this._onCompositionEnd = () => {
+				this._handleInput();
+				this._composedValue = this._input.value;
+			};
 			this._onBeforeInput = (event) => this._handleBeforeInput(event);
 			this._onFocus = () => this._handleFocus();
 			this._onPointerDown = (event) => this._handlePointerDown(event);
+			this._onPointerEnd = () => {
+				this._pointerActive = false;
+			};
 			this._onSync = () => this._render();
 			this._onSelectionChange = () => {
 				if (document.activeElement === this._input) this._render();
@@ -6231,6 +6389,7 @@
 			this._renderSlots();
 			this._addEventListeners();
 			this._render();
+			this._wasComplete = this._input.value.length === this._length;
 		}
 		static get Default() {
 			return Default$2;
@@ -6255,6 +6414,7 @@
 			this._input.focus();
 		}
 		focus() {
+			this._pointerActive = false;
 			this._input.focus();
 			this._selectSlot(this._firstEmptyIndex());
 			this._render();
@@ -6269,6 +6429,8 @@
 			this._input.removeEventListener("beforeinput", this._onBeforeInput);
 			this._input.removeEventListener("focus", this._onFocus);
 			this._input.removeEventListener("pointerdown", this._onPointerDown);
+			this._input.removeEventListener("compositionend", this._onCompositionEnd);
+			for (const type of POINTER_END_EVENTS) this._input.removeEventListener(type, this._onPointerEnd);
 			for (const type of SYNC_EVENTS) this._input.removeEventListener(type, this._onSync);
 			document.removeEventListener("selectionchange", this._onSelectionChange);
 			(_this$_slotsContainer = this._slotsContainer) === null || _this$_slotsContainer === void 0 || _this$_slotsContainer.remove();
@@ -6277,13 +6439,15 @@
 		}
 		_resolveLength() {
 			var _this$_input$getAttri;
-			if (this._config.length) return this._config.length;
-			const maxLength = Number.parseInt((_this$_input$getAttri = this._input.getAttribute("maxlength")) !== null && _this$_input$getAttri !== void 0 ? _this$_input$getAttri : "", 10);
-			return Number.isNaN(maxLength) || maxLength < 1 ? 6 : maxLength;
+			const candidates = [this._config.length, Number.parseInt((_this$_input$getAttri = this._input.getAttribute("maxlength")) !== null && _this$_input$getAttri !== void 0 ? _this$_input$getAttri : "", 10)];
+			const { groups } = this._config;
+			if (Array.isArray(groups) && groups.length > 0) candidates.push(groups.reduce((sum, group) => sum + Number(group), 0));
+			for (const candidate of candidates) if (typeof candidate === "number" && Number.isInteger(candidate) && candidate > 0) return Math.min(candidate, MAX_LENGTH);
+			return 6;
 		}
 		_setupInput() {
 			const input = this._input;
-			if (input.type === "number" || input.type === "password") input.type = "text";
+			if (input.type !== "text" && input.type !== "tel") input.type = "text";
 			input.classList.add(CLASS_NAME_INPUT);
 			input.setAttribute("maxlength", String(this._length));
 			input.setAttribute("inputmode", this._type.inputmode);
@@ -6324,6 +6488,8 @@
 			this._input.addEventListener("beforeinput", this._onBeforeInput);
 			this._input.addEventListener("focus", this._onFocus);
 			this._input.addEventListener("pointerdown", this._onPointerDown);
+			this._input.addEventListener("compositionend", this._onCompositionEnd);
+			for (const type of POINTER_END_EVENTS) this._input.addEventListener(type, this._onPointerEnd);
 			document.addEventListener("selectionchange", this._onSelectionChange);
 			for (const type of SYNC_EVENTS) this._input.addEventListener(type, this._onSync);
 		}
@@ -6346,23 +6512,25 @@
 		_handleBeforeInput(event) {
 			const { inputType, data } = event;
 			if (inputType === "insertText" && data && data.length === 1) {
-				var _this$_input$selectio;
+				var _this$_input$selectio, _this$_input$selectio2;
 				event.preventDefault();
 				const char = this._sanitize(data);
 				if (!char) return;
 				const index = Math.min((_this$_input$selectio = this._input.selectionStart) !== null && _this$_input$selectio !== void 0 ? _this$_input$selectio : 0, this._length - 1);
+				const end = Math.max((_this$_input$selectio2 = this._input.selectionEnd) !== null && _this$_input$selectio2 !== void 0 ? _this$_input$selectio2 : index, index + 1);
 				const chars = [...this._input.value];
-				chars[index] = char;
+				chars.splice(index, end - index, char);
 				this._input.value = chars.join("").slice(0, this._length);
 				this._selectSlot(index + 1);
 				this._afterValueChange();
 				return;
 			}
 			if (inputType === "deleteContentBackward") {
-				var _this$_input$selectio2, _this$_input$selectio3;
+				var _this$_input$selectio3, _this$_input$selectio4;
 				event.preventDefault();
-				const start = (_this$_input$selectio2 = this._input.selectionStart) !== null && _this$_input$selectio2 !== void 0 ? _this$_input$selectio2 : 0;
-				const end = (_this$_input$selectio3 = this._input.selectionEnd) !== null && _this$_input$selectio3 !== void 0 ? _this$_input$selectio3 : start;
+				const before = this._input.value;
+				const start = (_this$_input$selectio3 = this._input.selectionStart) !== null && _this$_input$selectio3 !== void 0 ? _this$_input$selectio3 : 0;
+				const end = (_this$_input$selectio4 = this._input.selectionEnd) !== null && _this$_input$selectio4 !== void 0 ? _this$_input$selectio4 : start;
 				const chars = [...this._input.value];
 				if (end > start) {
 					chars.splice(start, end - start);
@@ -6373,7 +6541,25 @@
 					this._input.value = chars.join("");
 					this._selectSlot(start - 1);
 				}
-				this._afterValueChange();
+				this._afterValueChange(before);
+				return;
+			}
+			if (inputType === "deleteContentForward") {
+				var _this$_input$selectio5, _this$_input$selectio6;
+				event.preventDefault();
+				const before = this._input.value;
+				const start = (_this$_input$selectio5 = this._input.selectionStart) !== null && _this$_input$selectio5 !== void 0 ? _this$_input$selectio5 : 0;
+				const end = (_this$_input$selectio6 = this._input.selectionEnd) !== null && _this$_input$selectio6 !== void 0 ? _this$_input$selectio6 : start;
+				const chars = [...this._input.value];
+				if (end > start) {
+					chars.splice(start, end - start);
+					this._input.value = chars.join("");
+				} else if (start < chars.length) {
+					chars.splice(start, 1);
+					this._input.value = chars.join("");
+				}
+				this._selectSlot(start);
+				this._afterValueChange(before);
 			}
 		}
 		_handlePointerDown(event) {
@@ -6397,8 +6583,9 @@
 			}
 			return null;
 		}
-		_afterValueChange() {
+		_afterValueChange(before) {
 			this._render();
+			if (before !== void 0 && before === this._input.value) return;
 			EventHandler.trigger(this._element, EVENT_INPUT, { value: this._input.value });
 			this._checkComplete();
 		}
@@ -6414,10 +6601,10 @@
 			return value.replace(this._type.filter, "").slice(0, this._length);
 		}
 		_render() {
-			var _this$_input$selectio4;
+			var _this$_input$selectio7;
 			const { value } = this._input;
 			const isFocused = document.activeElement === this._input;
-			const caret = Math.min((_this$_input$selectio4 = this._input.selectionStart) !== null && _this$_input$selectio4 !== void 0 ? _this$_input$selectio4 : value.length, this._length - 1);
+			const caret = Math.min((_this$_input$selectio7 = this._input.selectionStart) !== null && _this$_input$selectio7 !== void 0 ? _this$_input$selectio7 : value.length, this._length - 1);
 			for (const [index, slot] of this._slots.entries()) {
 				var _value$index;
 				const char = (_value$index = value[index]) !== null && _value$index !== void 0 ? _value$index : "";
@@ -6428,7 +6615,9 @@
 		}
 		_checkComplete() {
 			const { value } = this._input;
-			if (value.length === this._length) EventHandler.trigger(this._element, EVENT_COMPLETE, { value });
+			const complete = value.length === this._length;
+			if (complete && !this._wasComplete) EventHandler.trigger(this._element, EVENT_COMPLETE, { value });
+			this._wasComplete = complete;
 		}
 	};
 	/**
@@ -6591,7 +6780,9 @@
 			const previous = this._element.querySelector("svg");
 			(_this$_element$queryS = this._element.querySelector(`.${CLASS_NAME_LABEL}`)) === null || _this$_element$queryS === void 0 || _this$_element$queryS.remove();
 			if (this._config.values.length === 0) {
-				this._element.innerHTML = "";
+				cancelAnimationFrame(this._frame);
+				previous === null || previous === void 0 || previous.remove();
+				EventHandler.trigger(this._element, EVENT_RENDERED);
 				return;
 			}
 			let svg;
@@ -6623,8 +6814,10 @@
 			EventHandler.trigger(this._element, EVENT_RENDERED);
 		}
 		dispose() {
+			var _this$_element$queryS2, _this$_element$queryS3;
 			cancelAnimationFrame(this._frame);
-			this._element.innerHTML = "";
+			(_this$_element$queryS2 = this._element.querySelector("svg")) === null || _this$_element$queryS2 === void 0 || _this$_element$queryS2.remove();
+			(_this$_element$queryS3 = this._element.querySelector(`.${CLASS_NAME_LABEL}`)) === null || _this$_element$queryS3 === void 0 || _this$_element$queryS3.remove();
 			super.dispose();
 		}
 		_configAfterMerge(config) {
@@ -6656,6 +6849,7 @@
 			const pairs = Array.from(to.children).map((target, i) => {
 				const source = from.children[i];
 				const tweens = [];
+				for (const { name } of Array.from(source.attributes)) if (!target.hasAttribute(name)) source.removeAttribute(name);
 				for (const { name, value } of Array.from(target.attributes)) {
 					const start = source.getAttribute(name);
 					if (start === null || start === value) source.setAttribute(name, value);
@@ -6711,8 +6905,8 @@
 			const svg = this._createSvg();
 			const { min, span } = rangeOf(cfg.values, cfg.min, cfg.max, ...cfg.threshold === null ? [] : [cfg.threshold]);
 			const yOf = (value) => cfg.pad + (1 - (value - min) / span) * (cfg.height - cfg.pad * 2);
-			const ys = cfg.values.map(yOf);
-			const step = ys.length > 1 ? cfg.width / (ys.length - 1) : cfg.width;
+			const ys = cfg.values.length === 1 ? [yOf(cfg.values[0]), yOf(cfg.values[0])] : cfg.values.map(yOf);
+			const step = cfg.width / (ys.length - 1);
 			if (cfg.threshold !== null) this._hairline(svg, yOf(cfg.threshold), "threshold", true);
 			if (cfg.fill === "auto") {
 				const area = svgEl("path");
@@ -6737,7 +6931,7 @@
 			if (spotIndex >= 0) {
 				const spot = svgEl("circle");
 				setAttr(spot, {
-					cx: spotIndex * step,
+					cx: cfg.values.length === 1 ? cfg.width / 2 : spotIndex * step,
 					cy: ys[spotIndex],
 					r: getCssNumber(this._element, "spot-size", 2),
 					fill: cssVar("spot")
@@ -6815,7 +7009,7 @@
 		_renderCircle() {
 			const cfg = this._config;
 			const svg = this._createSvg();
-			const strokeWidth = getCssNumber(this._element, "stroke-width", 3);
+			const strokeWidth = getCssNumber(this._element, "stroke-width", 2);
 			const radius = Math.max(0, Math.min(cfg.width, cfg.height) / 2 - strokeWidth / 2);
 			const cx = cfg.width / 2;
 			const cy = cfg.height / 2;
@@ -6967,13 +7161,20 @@
 			(_this$_input = this._input) === null || _this$_input === void 0 || _this$_input.removeEventListener("input", this._onInput);
 			super.dispose();
 		}
+		_configAfterMerge(config) {
+			return _objectSpread2(_objectSpread2({}, config), {}, {
+				messages: _objectSpread2(_objectSpread2({}, Default.messages), config.messages),
+				weights: _objectSpread2(_objectSpread2({}, Default.weights), config.weights)
+			});
+		}
 		_getInput() {
-			var _fields;
+			var _ref, _precedingFields;
 			const { input } = this._config;
-			if (input) return SelectorEngine.findOne(input);
+			if (input) return getElement(input);
 			const parent = this._element.parentElement;
 			const fields = parent ? SelectorEngine.find(SELECTOR_PASSWORD, parent) : [];
-			return (_fields = fields[fields.length - 1]) !== null && _fields !== void 0 ? _fields : null;
+			const precedingFields = fields.filter((field) => Boolean(field.compareDocumentPosition(this._element) & Node.DOCUMENT_POSITION_FOLLOWING));
+			return (_ref = (_precedingFields = precedingFields[precedingFields.length - 1]) !== null && _precedingFields !== void 0 ? _precedingFields : fields[0]) !== null && _ref !== void 0 ? _ref : null;
 		}
 		_getText() {
 			const parent = this._element.parentElement;