@webority/ui-elements 0.7.9 → 0.8.0

package/dist/ui-elements.js

@@ -915,6 +915,58 @@ var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&am
 		this._teardown();
 	}
 }, E = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"static",
+			"max-scale",
+			"radius"
+		];
+	}
+	constructor() {
+		super(), this._pointerMoveListener = null, this._pointerLeaveListener = null, this._frame = 0, this._pointerX = 0;
+	}
+	connectedCallback() {
+		this._wire();
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+	attributeChangedCallback(e, t, n) {
+		e === "static" && this.isConnected && this._wire();
+	}
+	_maxScale() {
+		return D(this.getAttribute("max-scale"), 1.6);
+	}
+	_radius() {
+		return D(this.getAttribute("radius"), 100);
+	}
+	_magnifyEnabled() {
+		return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
+	}
+	_applyMagnification() {
+		this._frame = 0;
+		let e = this._maxScale(), t = this._radius();
+		for (let n of this.querySelectorAll(".dock-item")) {
+			let r = n.getBoundingClientRect(), i = Math.abs(this._pointerX - (r.left + r.width / 2)), a = Math.max(0, 1 - i / t), o = 1 + (e - 1) * a;
+			n.style.setProperty("--wui-dock-mag", o.toFixed(3));
+		}
+	}
+	_resetMagnification() {
+		this._frame &&= (cancelAnimationFrame(this._frame), 0);
+		for (let e of this.querySelectorAll(".dock-item")) e.style.removeProperty("--wui-dock-mag");
+	}
+	_wire() {
+		this._teardown(), this._magnifyEnabled() && (this._pointerMoveListener = (e) => {
+			this._pointerX = e.clientX, this._frame ||= requestAnimationFrame(() => this._applyMagnification());
+		}, this._pointerLeaveListener = () => this._resetMagnification(), this.addEventListener("pointermove", this._pointerMoveListener), this.addEventListener("pointerleave", this._pointerLeaveListener));
+	}
+	_teardown() {
+		this._pointerMoveListener &&= (this.removeEventListener("pointermove", this._pointerMoveListener), null), this._pointerLeaveListener &&= (this.removeEventListener("pointerleave", this._pointerLeaveListener), null), this._resetMagnification();
+	}
+}, D = (e, t) => {
+	let n = Number.parseFloat(e);
+	return Number.isFinite(n) ? n : t;
+}, te = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -1005,13 +1057,13 @@ var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&am
 		let a = `${this.id}-listbox`;
 		this._listboxId = a, this.innerHTML = `
       <div class="search-select${i}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${D(a)}" aria-label="${D(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
-          ${n ? `<i class="bi bi-${D(n)} search-select-icon" aria-hidden="true"></i>` : ""}
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${O(a)}" aria-label="${O(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
+          ${n ? `<i class="bi bi-${O(n)} search-select-icon" aria-hidden="true"></i>` : ""}
           <div class="ms-chips" data-chips></div>
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${D(a)}" aria-multiselectable="true" tabindex="-1" hidden>
-          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${D(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${O(a)}" aria-multiselectable="true" tabindex="-1" hidden>
+          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${O(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -1025,7 +1077,7 @@ var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&am
 			e.innerHTML = `<span class="search-select-placeholder">${d(t)}</span>`;
 			return;
 		}
-		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${D(e)}" aria-label="Remove ${D(O(this._labelFor(e)))}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
+		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${O(e)}" aria-label="Remove ${O(k(this._labelFor(e)))}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
 	}
 	_collapseChips() {
 		let e = this.querySelector("[data-chips]");
@@ -1049,11 +1101,11 @@ var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&am
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
 		if (!t) return;
 		let r = (e || "").trim().toLowerCase(), i = this._readOptions();
-		r && (i = i.filter((e) => O(e.label).toLowerCase().includes(r)));
+		r && (i = i.filter((e) => k(e.label).toLowerCase().includes(r)));
 		let a = this._listboxId || `${this.id || "wui-multiselect"}-listbox`;
 		t.innerHTML = i.map((e, t) => {
 			let n = this._values.includes(String(e.value));
-			return `<button type="button" role="option" id="${D(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${D(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${p(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
+			return `<button type="button" role="option" id="${O(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${O(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${p(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
 		}).join(""), n && (n.hidden = i.length > 0), this._active = -1, this.querySelector(".search-select-control")?.removeAttribute("aria-activedescendant");
 	}
 	_wire() {
@@ -1133,7 +1185,7 @@ var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), O = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), te = /[^0-9]/g, ne = /[^0-9a-zA-Z]/g, k = class extends HTMLElement {
+}, O = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), k = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ne = /[^0-9]/g, re = /[^0-9a-zA-Z]/g, ie = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1164,7 +1216,7 @@ var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&am
 		this._value = this._clean(e), c(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? ne : te, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? re : ne, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -1244,7 +1296,7 @@ var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, re = [
+}, ae = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2470,12 +2522,12 @@ var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], A = (e) => (re.find((t) => t[0] === e) || [
+], A = (e) => (ae.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
 ])[2], j = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, M = null, N = null;
-function ie() {
+function oe() {
 	return M ? Promise.resolve(M) : (N ||= Promise.all([import("./libphonenumber-js-BcNT8oq0.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (M = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
@@ -2499,7 +2551,7 @@ function F(e) {
 		return null;
 	}
 }
-function ae(e) {
+function I(e) {
 	if (!M || !e) return null;
 	try {
 		return M.isValidPhoneNumber(e);
@@ -2507,7 +2559,7 @@ function ae(e) {
 		return null;
 	}
 }
-function oe(e) {
+function se(e) {
 	if (!M) return null;
 	try {
 		let t = M.getExampleNumber(e, M.examples);
@@ -2516,7 +2568,7 @@ function oe(e) {
 		return null;
 	}
 }
-function I(e) {
+function L(e) {
 	if (!M || !e?.trim().startsWith("+")) return null;
 	try {
 		let t = new M.AsYouType();
@@ -2530,7 +2582,7 @@ function I(e) {
 		return null;
 	}
 }
-var L = class extends HTMLElement {
+var R = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2573,7 +2625,7 @@ var L = class extends HTMLElement {
 		return this._national ? `+${A(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = I(t);
+		let t = String(e ?? "").trim(), n = L(t);
 		if (n) this._country = n.country, this._national = n.national.replace(/[^0-9]/g, "");
 		else if (t.startsWith("+")) {
 			let e = t.replace(/[^0-9]/g, ""), n = String(A(this._country));
@@ -2596,21 +2648,21 @@ var L = class extends HTMLElement {
 		this.id ||= `wui-phone-${Math.random().toString(36).slice(2, 9)}`;
 		let t = `${this.id}-listbox`;
 		this._listboxId = t;
-		let n = re.map(([e, n, r], i) => `<button type="button" role="option" id="${R(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${j(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
+		let n = ae.map(([e, n, r], i) => `<button type="button" role="option" id="${z(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${j(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
 		this.innerHTML = `
       <div class="phone-input-wrap">
         <div class="phone-country-adornment">
-          <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false" aria-controls="${R(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false" aria-controls="${z(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
             <span class="${j(this._country)}" data-flag aria-hidden="true"></span>
             <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
             <span class="phone-dial" data-dial>+${A(this._country)}</span>
           </button>
-          <div class="country-dropdown-menu" role="listbox" id="${R(t)}" tabindex="-1" hidden>
-            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${R(t)}" aria-autocomplete="list" /></div>
+          <div class="country-dropdown-menu" role="listbox" id="${z(t)}" tabindex="-1" hidden>
+            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${z(t)}" aria-autocomplete="list" /></div>
             <div class="country-list-scroll">${n}<div class="country-empty" hidden>No countries found</div></div>
           </div>
         </div>
-        <input type="tel" class="input" placeholder="${R(e)}" value="${R(P(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${R(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${R(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <input type="tel" class="input" placeholder="${z(e)}" value="${z(P(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${z(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${z(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
       </div>
       <div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, c(this, this.value), this._wire();
 	}
@@ -2688,14 +2740,14 @@ var L = class extends HTMLElement {
 		};
 		l.addEventListener("input", (e) => {
 			e.stopPropagation();
-			let t = l.value.replace(/[^0-9]/g, ""), n = oe(this._country);
+			let t = l.value.replace(/[^0-9]/g, ""), n = se(this._country);
 			n && t.length > n && (t = t.slice(0, n)), this._national = t;
 			let r = P(this._country, this._national);
-			l.value !== r && (l.value = r), this._syncMirror(), this._emitInput(), l.classList.contains("is-invalid") && (!this._national || ae(this.value) === !0) && x(!1);
+			l.value !== r && (l.value = r), this._syncMirror(), this._emitInput(), l.classList.contains("is-invalid") && (!this._national || I(this.value) === !0) && x(!1);
 		}), l.addEventListener("change", (e) => e.stopPropagation()), l.addEventListener("blur", () => {
-			x(this._national.length > 0 && ae(this.value) === !1), this.value !== this._committedValue && this._emitChange();
+			x(this._national.length > 0 && I(this.value) === !1), this.value !== this._committedValue && this._emitChange();
 		}), l.addEventListener("paste", (e) => {
-			let t = I(e.clipboardData?.getData("text"));
+			let t = L(e.clipboardData?.getData("text"));
 			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? l.value = P(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
 		}), this._bindGlobal = () => {
 			this._teardownGlobals?.(), this._onDocClick = (e) => {
@@ -2705,7 +2757,7 @@ var L = class extends HTMLElement {
 			});
 		}, this._teardownGlobals = () => {
 			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this);
-		}, this._bindGlobal(), ie().then((e) => {
+		}, this._bindGlobal(), oe().then((e) => {
 			if (!(!e || !l.isConnected) && (this._national && (l.value = P(this._country, this._national)), !this.getAttribute("placeholder"))) {
 				let e = F(this._country);
 				e && (l.placeholder = e);
@@ -2718,7 +2770,7 @@ var L = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, R = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), z = class extends HTMLElement {
+}, z = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), B = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2798,19 +2850,19 @@ var L = class extends HTMLElement {
 		this._listboxId = f;
 		let m = e.map((e, t) => {
 			let n = String(e.value) === String(this._value);
-			return `<button type="button" role="option" id="${B(`${f}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${B(e.value)}" aria-selected="${n}">${p(e)}</button>`;
+			return `<button type="button" role="option" id="${V(`${f}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${V(e.value)}" aria-selected="${n}">${p(e)}</button>`;
 		}).join("");
 		this.innerHTML = `
       <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
-        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${B(f)}" aria-label="${B(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          ${a ? `<i class="bi bi-${B(a)} search-select-icon" aria-hidden="true"></i>` : ""}
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${V(f)}" aria-label="${V(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          ${a ? `<i class="bi bi-${V(a)} search-select-icon" aria-hidden="true"></i>` : ""}
           ${o ? `<span class="search-select-prefix">${d(o)}</span>` : ""}
           <span class="${u ? "" : "search-select-placeholder"}" data-label>${u ? p(u) : d(s)}</span>
           ${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </button>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${B(f)}" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${B(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${V(f)}" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${V(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
           <div class="search-select-options">${m}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
       </div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncReset();
@@ -2915,7 +2967,7 @@ var L = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, B = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), V = class extends HTMLElement {
+}, V = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), H = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2955,19 +3007,19 @@ var L = class extends HTMLElement {
 		return this._value;
 	}
 	set value(e) {
-		this._value = this._snapToStep(this._clamp(H(e, this._value))), this._syncValue(), this._syncMirrors();
+		this._value = this._snapToStep(this._clamp(U(e, this._value))), this._syncValue(), this._syncMirrors();
 	}
 	get start() {
 		return this._start;
 	}
 	set start(e) {
-		this._start = Math.min(this._snapToStep(this._clamp(H(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
+		this._start = Math.min(this._snapToStep(this._clamp(U(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
 	}
 	get end() {
 		return this._end;
 	}
 	set end(e) {
-		this._end = Math.max(this._snapToStep(this._clamp(H(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
+		this._end = Math.max(this._snapToStep(this._clamp(U(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
 	}
 	attributeChangedCallback(e, t, n) {
 		if (e === "value" || e === "start" || e === "end" || e === "min" || e === "max" || e === "step") {
@@ -2980,19 +3032,19 @@ var L = class extends HTMLElement {
 		this._isRange() ? this._resetRange() : this._resetSingle();
 	}
 	_updateFromAttribute(e) {
-		e === "value" ? this._value = this._snapToStep(this._clamp(H(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(H(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(H(this.getAttribute("end"), this._end))));
+		e === "value" ? this._value = this._snapToStep(this._clamp(U(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(U(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(U(this.getAttribute("end"), this._end))));
 	}
 	_isRange() {
 		return this.hasAttribute("range");
 	}
 	_min() {
-		return H(this.getAttribute("min"), 0);
+		return U(this.getAttribute("min"), 0);
 	}
 	_max() {
-		return H(this.getAttribute("max"), 100);
+		return U(this.getAttribute("max"), 100);
 	}
 	_step() {
-		return H(this.getAttribute("step"), 1);
+		return U(this.getAttribute("step"), 1);
 	}
 	_clamp(e) {
 		return Math.max(this._min(), Math.min(e, this._max()));
@@ -3057,7 +3109,7 @@ var L = class extends HTMLElement {
             aria-valuenow="${this._value}"
             aria-valuetext="${this._formatValue(this._value)}"
             ${a ? "disabled" : ""}
-            aria-label="${se(this.getAttribute("aria-label") || "Value")}"
+            aria-label="${ce(this.getAttribute("aria-label") || "Value")}"
           ></button>
         `}
         ${this.hasAttribute("show-value") ? n ? `<span class="slider-value">${this._formatValue(this._start)} – ${this._formatValue(this._end)}</span>` : `<span class="slider-value">${this._formatValue(this._value)}</span>` : ""}
@@ -3157,10 +3209,10 @@ var L = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, H = (e, t) => {
+}, U = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, se = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), U = class extends HTMLElement {
+}, ce = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), W = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -3224,7 +3276,7 @@ var L = class extends HTMLElement {
 		c(this, this._values.join(",")), this.innerHTML = `
       <div class="search-select${t}">
         <div class="input search-select-control search-select-multi"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
-          <input type="text" class="ms-input" data-input aria-label="${W(this._accessibleName())}" placeholder="${W(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
+          <input type="text" class="ms-input" data-input aria-label="${G(this._accessibleName())}" placeholder="${G(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
           <div class="ms-chips" data-chips></div>
         </div>
       </div>`, this._rendered = !0, c(this, this._values.join(",")), this._renderControl(), this._wire();
@@ -3236,7 +3288,7 @@ var L = class extends HTMLElement {
 				e.innerHTML = "";
 				return;
 			}
-			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${ce(e)}</span><button type="button" class="chip-remove" data-remove="${W(e)}" aria-label="Remove ${W(e)}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
+			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${le(e)}</span><button type="button" class="chip-remove" data-remove="${G(e)}" aria-label="Remove ${G(e)}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
 		}
 	}
 	_wire() {
@@ -3307,18 +3359,18 @@ var L = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, ce = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), G = (e) => String(e).padStart(2, "0"), K = (e, t) => `${G(e)}:${G(t)}`, q = (e) => {
+}, le = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), G = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), K = (e) => String(e).padStart(2, "0"), q = (e, t) => `${K(e)}:${K(t)}`, J = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
 		m: +t[2]
 	} : null;
-}, J = (e, t = "24") => {
+}, Y = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return K(e.h, e.m);
+	if (t === "24") return q(e.h, e.m);
 	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
-	return `${n}:${G(e.m)} ${r}`;
-}, Y = class extends HTMLElement {
+	return `${n}:${K(e.m)} ${r}`;
+}, X = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3365,11 +3417,11 @@ var L = class extends HTMLElement {
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
-		let e = this.getAttribute("placeholder") || "Select time", t = q(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
+		let e = this.getAttribute("placeholder") || "Select time", t = J(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="timepicker">
         <button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${d(a)}"` : ""}${o ? ` aria-describedby="${d(o)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? J(t, n) : d(e)}</span>
+          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? Y(t, n) : d(e)}</span>
           <i class="bi bi-clock" aria-hidden="true"></i>
         </button>
         <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
@@ -3381,14 +3433,14 @@ var L = class extends HTMLElement {
 	_syncTrigger() {
 		let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		let n = q(this._value), r = this.getAttribute("format") || "24";
-		t.textContent = n ? J(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = J(this._value), r = this.getAttribute("format") || "24";
+		t.textContent = n ? Y(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
 	}
 	_buildTimes() {
-		let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = q(t) || {
+		let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = J(t) || {
 			h: 0,
 			m: 0
-		}, i = q(n) || {
+		}, i = J(n) || {
 			h: 23,
 			m: 59
 		}, a = [], o = r.h, s = r.m;
@@ -3401,10 +3453,10 @@ var L = class extends HTMLElement {
 	_renderOptions() {
 		let e = this.querySelector(".timepicker-pop");
 		if (!e) return;
-		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = q(this._value), i = this._focus, a = "";
+		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = J(this._value), i = this._focus, a = "";
 		for (let e = 0; e < n.length; e++) {
-			let o = n[e], s = K(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
-			a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${J(o, t)}</button>`;
+			let o = n[e], s = q(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
+			a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${Y(o, t)}</button>`;
 		}
 		e.innerHTML = a, this._focusActive();
 	}
@@ -3502,7 +3554,7 @@ var L = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, le = "wui-wizard-step", X = class extends HTMLElement {
+}, ue = "wui-wizard-step", de = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"active",
@@ -3511,6 +3563,7 @@ var L = class extends HTMLElement {
 			"non-linear",
 			"hide-stepper",
 			"disabled",
+			"skippable",
 			"label",
 			"back-label",
 			"next-label",
@@ -3535,7 +3588,7 @@ var L = class extends HTMLElement {
 		this._beforeNext = typeof e == "function" ? e : null;
 	}
 	get _steps() {
-		return [...this.querySelectorAll(`:scope > ${le}`)];
+		return [...this.querySelectorAll(`:scope > ${ue}`)];
 	}
 	refresh() {
 		this._rendered && this._renderChrome();
@@ -3593,13 +3646,13 @@ var L = class extends HTMLElement {
 		let i = this.hasAttribute("non-linear");
 		return e.map((e, r) => {
 			let a = this._stepStatus(e, r), o = e.getAttribute("label") || "", s = e.getAttribute("description") || "", c = e.getAttribute("icon") || "", l = r + 1, u;
-			u = a === "done" ? "<i class=\"bi bi-check-lg\" aria-hidden=\"true\"></i>" : a === "error" ? "<i class=\"bi bi-exclamation-triangle\" aria-hidden=\"true\"></i>" : a === "skipped" ? "<i class=\"bi bi-dash-lg\" aria-hidden=\"true\"></i>" : c ? `<i class="bi bi-${ue(c)}" aria-hidden="true"></i>` : String(l);
+			u = a === "done" ? "<i class=\"bi bi-check-lg\" aria-hidden=\"true\"></i>" : a === "error" ? "<i class=\"bi bi-exclamation-triangle\" aria-hidden=\"true\"></i>" : a === "skipped" ? "<i class=\"bi bi-dash-lg\" aria-hidden=\"true\"></i>" : c ? `<i class="bi bi-${fe(c)}" aria-hidden="true"></i>` : String(l);
 			let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", p = i || r < this._active, m = s ? `<span class="step-desc">${Z(s)}</span>` : "", h;
 			return h = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Z(o)}</span>${m}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Z(o)}</span>${m}` : `<span class="step-circle">${u}</span><span class="step-label">${Z(o)}</span>${m}`, p ? `<button type="button" class="${d}" data-step="${r}"${f}>${h}</button>` : `<div class="${d}"${f}>${h}</div>`;
 		}).join("");
 	}
 	_footerHtml(e) {
-		let t = this._active, n = e.length - 1, r = this.hasAttribute("disabled") ? " disabled" : "", i = e[t]?.hasAttribute("optional"), a = this.getAttribute("back-label") || "Back", o = this.getAttribute("next-label") || "Next", s = this.getAttribute("skip-label") || "Skip", c = this.getAttribute("finish-label") || "Finish";
+		let t = this._active, n = e.length - 1, r = this.hasAttribute("disabled") ? " disabled" : "", i = e[t]?.hasAttribute("optional") || this.hasAttribute("skippable"), a = this.getAttribute("back-label") || "Back", o = this.getAttribute("next-label") || "Next", s = this.getAttribute("skip-label") || "Skip", c = this.getAttribute("finish-label") || "Finish";
 		return `${t > 0 ? `<button type="button" class="btn btn-ghost" data-nav="back"${r}>${Z(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Z(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${Z(o)}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Z(c)}</button>`}</span>`;
 	}
 	_wire() {
@@ -3646,7 +3699,7 @@ var L = class extends HTMLElement {
 	}
 	_skip() {
 		let e = this._active, t = this._steps;
-		if (t[e]?.hasAttribute("optional")) {
+		if (!(!t[e]?.hasAttribute("optional") && !this.hasAttribute("skippable"))) {
 			if (this._invalid.delete(e), this._skipped.add(e), this.dispatchEvent(new CustomEvent("wui-wizard:skip", { detail: { index: e } })), e >= t.length - 1) return this._finish();
 			this._go(e + 1, "skip");
 		}
@@ -3668,7 +3721,7 @@ var L = class extends HTMLElement {
 	_reflectActive(e) {
 		this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
 	}
-}, Z = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ue = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), de = class extends HTMLElement {
+}, Z = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), fe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), pe = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"label",
@@ -3682,14 +3735,14 @@ var L = class extends HTMLElement {
 		let e = this.closest("wui-wizard");
 		e && typeof e.refresh == "function" && e.refresh();
 	}
-}, fe = "image/png,image/jpeg,image/webp", pe = 5, me = {
+}, me = "image/png,image/jpeg,image/webp", he = 5, ge = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, he = {
+}, _e = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -3703,7 +3756,7 @@ var L = class extends HTMLElement {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, Q = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), ge = [
+}, Q = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), ve = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -3714,44 +3767,44 @@ var L = class extends HTMLElement {
 	".avif",
 	".heic"
 ];
-function _e(e) {
+function ye(e) {
 	if (!e) return !1;
 	let t = typeof e == "object" && e.type ? String(e.type).toLowerCase() : "";
 	if (t) return t.startsWith("image/");
 	let n = typeof e == "string" ? e : e.name || e.url || "", r = String(n).toLowerCase();
-	return ge.some((e) => r.endsWith(e));
+	return ve.some((e) => r.endsWith(e));
 }
-function ve(e) {
+function be(e) {
 	let t = Q(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? ge.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+	return t.length ? t.every((e) => e.startsWith(".") ? ve.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function ye(e) {
+function xe(e) {
 	let t = [];
 	for (let n of Q(e)) {
-		let e = he[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+		let e = _e[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
 		t.includes(e) || t.push(e);
 	}
 	return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
 }
-function be(e, t) {
+function Se(e, t) {
 	let n = Q(t);
 	if (!n.length) return !0;
 	let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
-	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (me[e] || []).some((e) => i.endsWith(e)));
+	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (ge[e] || []).some((e) => i.endsWith(e)));
 }
-function xe(e, t = {}) {
+function Ce(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? fe : t.accept, r = t.maxSizeMb || 5;
-	return be(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${ye(n)} file.`;
+	let n = t.accept === void 0 ? me : t.accept, r = t.maxSizeMb || 5;
+	return Se(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${xe(n)} file.`;
 }
 //#endregion
 //#region src/index.js
 var $ = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function Se() {
-	$("wui-select", z), $("wui-phone", L), $("wui-datepicker", T), $("wui-date-range", ee), $("wui-slider", V), $("wui-timepicker", Y), $("wui-autocomplete", m), $("wui-multiselect", E), $("wui-taginput", U), $("wui-otp", k), $("wui-status-icon", n), $("wui-wizard-step", de), $("wui-wizard", X);
+function we() {
+	$("wui-select", B), $("wui-phone", R), $("wui-datepicker", T), $("wui-date-range", ee), $("wui-dock", E), $("wui-slider", H), $("wui-timepicker", X), $("wui-autocomplete", m), $("wui-multiselect", te), $("wui-taginput", W), $("wui-otp", ie), $("wui-status-icon", n), $("wui-wizard-step", pe), $("wui-wizard", de);
 }
-Se();
+we();
 //#endregion
-export { fe as DEFAULT_IMAGE_ACCEPT, pe as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, m as WuiAutocomplete, T as WuiDatePicker, ee as WuiDateRange, E as WuiMultiSelect, k as WuiOtp, L as WuiPhone, z as WuiSelect, V as WuiSlider, n as WuiStatusIcon, U as WuiTagInput, Y as WuiTimePicker, X as WuiWizard, de as WuiWizardStep, ye as acceptLabel, Se as defineWeborityElements, _e as isImageFile, ve as isImageOnlyAccept, be as matchesAccept, xe as validateFile };
+export { me as DEFAULT_IMAGE_ACCEPT, he as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, m as WuiAutocomplete, T as WuiDatePicker, ee as WuiDateRange, E as WuiDock, te as WuiMultiSelect, ie as WuiOtp, R as WuiPhone, B as WuiSelect, H as WuiSlider, n as WuiStatusIcon, W as WuiTagInput, X as WuiTimePicker, de as WuiWizard, pe as WuiWizardStep, xe as acceptLabel, we as defineWeborityElements, ye as isImageFile, be as isImageOnlyAccept, Se as matchesAccept, Ce as validateFile };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.7.9",
+  "version": "0.8.0",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",