next-flow-design 1.3.0 → 1.4.0

package/dist/index.js

@@ -1,13 +1,13 @@
-import { css as A, LitElement as R, html as p } from "lit";
-const O = (t) => (e, o) => {
+import { css as E, LitElement as R, html as f } from "lit";
+const T = (t) => (e, o) => {
   o !== void 0 ? o.addInitializer(() => {
     customElements.define(t, e);
   }) : customElements.define(t, e);
 };
-const X = globalThis, se = X.ShadowRoot && (X.ShadyCSS === void 0 || X.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ye = /* @__PURE__ */ Symbol(), ce = /* @__PURE__ */ new WeakMap();
+const Y = globalThis, se = Y.ShadowRoot && (Y.ShadyCSS === void 0 || Y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, we = /* @__PURE__ */ Symbol(), ce = /* @__PURE__ */ new WeakMap();
 let Se = class {
   constructor(e, o, s) {
-    if (this._$cssResult$ = !0, s !== ye) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, s !== we) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = o;
   }
   get styleSheet() {
@@ -23,10 +23,10 @@ let Se = class {
     return this.cssText;
   }
 };
-const Ce = (t) => new Se(typeof t == "string" ? t : t + "", void 0, ye), Pe = (t, e) => {
+const Ce = (t) => new Se(typeof t == "string" ? t : t + "", void 0, we), Pe = (t, e) => {
   if (se) t.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
   else for (const o of e) {
-    const s = document.createElement("style"), r = X.litNonce;
+    const s = document.createElement("style"), r = Y.litNonce;
     r !== void 0 && s.setAttribute("nonce", r), s.textContent = o.cssText, t.appendChild(s);
   }
 }, de = se ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
@@ -34,7 +34,7 @@ const Ce = (t) => new Se(typeof t == "string" ? t : t + "", void 0, ye), Pe = (t
   for (const s of e.cssRules) o += s.cssText;
   return Ce(o);
 })(t) : t;
-const { is: De, defineProperty: Me, getOwnPropertyDescriptor: Oe, getOwnPropertyNames: Ve, getOwnPropertySymbols: Be, getPrototypeOf: Te } = Object, Q = globalThis, ue = Q.trustedTypes, He = ue ? ue.emptyScript : "", Ue = Q.reactiveElementPolyfillSupport, L = (t, e) => t, Z = { toAttribute(t, e) {
+const { is: De, defineProperty: Me, getOwnPropertyDescriptor: Te, getOwnPropertyNames: Oe, getOwnPropertySymbols: Be, getPrototypeOf: Ve } = Object, Q = globalThis, ue = Q.trustedTypes, He = ue ? ue.emptyScript : "", Ne = Q.reactiveElementPolyfillSupport, U = (t, e) => t, X = { toAttribute(t, e) {
   switch (e) {
     case Boolean:
       t = t ? He : null;
@@ -62,7 +62,7 @@ const { is: De, defineProperty: Me, getOwnPropertyDescriptor: Oe, getOwnProperty
       }
   }
   return o;
-} }, re = (t, e) => !De(t, e), pe = { attribute: !0, type: String, converter: Z, reflect: !1, useDefault: !1, hasChanged: re };
+} }, re = (t, e) => !De(t, e), pe = { attribute: !0, type: String, converter: X, reflect: !1, useDefault: !1, hasChanged: re };
 Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Q.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let B = class extends HTMLElement {
   static addInitializer(e) {
@@ -78,7 +78,7 @@ let B = class extends HTMLElement {
     }
   }
   static getPropertyDescriptor(e, o, s) {
-    const { get: r, set: i } = Oe(this.prototype, e) ?? { get() {
+    const { get: r, set: i } = Te(this.prototype, e) ?? { get() {
       return this[o];
     }, set(n) {
       this[o] = n;
@@ -92,14 +92,14 @@ let B = class extends HTMLElement {
     return this.elementProperties.get(e) ?? pe;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(L("elementProperties"))) return;
-    const e = Te(this);
+    if (this.hasOwnProperty(U("elementProperties"))) return;
+    const e = Ve(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(L("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(L("properties"))) {
-      const o = this.properties, s = [...Ve(o), ...Be(o)];
+    if (this.hasOwnProperty(U("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(U("properties"))) {
+      const o = this.properties, s = [...Oe(o), ...Be(o)];
       for (const r of s) this.createProperty(r, o[r]);
     }
     const e = this[Symbol.metadata];
@@ -161,14 +161,14 @@ let B = class extends HTMLElement {
   _$ET(e, o) {
     const s = this.constructor.elementProperties.get(e), r = this.constructor._$Eu(e, s);
     if (r !== void 0 && s.reflect === !0) {
-      const i = (s.converter?.toAttribute !== void 0 ? s.converter : Z).toAttribute(o, s.type);
+      const i = (s.converter?.toAttribute !== void 0 ? s.converter : X).toAttribute(o, s.type);
       this._$Em = e, i == null ? this.removeAttribute(r) : this.setAttribute(r, i), this._$Em = null;
     }
   }
   _$AK(e, o) {
     const s = this.constructor, r = s._$Eh.get(e);
     if (r !== void 0 && this._$Em !== r) {
-      const i = s.getPropertyOptions(r), n = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : Z;
+      const i = s.getPropertyOptions(r), n = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : X;
       this._$Em = r;
       const l = n.fromAttribute(o, i.type);
       this[r] = l ?? this._$Ej?.get(r) ?? l, this._$Em = null;
@@ -245,8 +245,8 @@ let B = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-B.elementStyles = [], B.shadowRootOptions = { mode: "open" }, B[L("elementProperties")] = /* @__PURE__ */ new Map(), B[L("finalized")] = /* @__PURE__ */ new Map(), Ue?.({ ReactiveElement: B }), (Q.reactiveElementVersions ??= []).push("2.1.2");
-const Le = { attribute: !0, type: String, converter: Z, reflect: !1, hasChanged: re }, Ne = (t = Le, e, o) => {
+B.elementStyles = [], B.shadowRootOptions = { mode: "open" }, B[U("elementProperties")] = /* @__PURE__ */ new Map(), B[U("finalized")] = /* @__PURE__ */ new Map(), Ne?.({ ReactiveElement: B }), (Q.reactiveElementVersions ??= []).push("2.1.2");
+const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged: re }, Le = (t = Ue, e, o) => {
   const { kind: s, metadata: r } = o;
   let i = globalThis.litPropertyMetadata.get(r);
   if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), s === "setter" && ((t = Object.create(t)).wrapped = !0), i.set(o.name, t), s === "accessor") {
@@ -268,61 +268,61 @@ const Le = { attribute: !0, type: String, converter: Z, reflect: !1, hasChanged:
   throw Error("Unsupported decorator location: " + s);
 };
 function h(t) {
-  return (e, o) => typeof o == "object" ? Ne(t, e, o) : ((s, r, i) => {
+  return (e, o) => typeof o == "object" ? Le(t, e, o) : ((s, r, i) => {
     const n = r.hasOwnProperty(i);
     return r.constructor.createProperty(i, s), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
   })(t, e, o);
 }
-function y(t) {
+function w(t) {
   return h({ ...t, state: !0, attribute: !1 });
 }
-const ie = globalThis, fe = (t) => t, G = ie.trustedTypes, be = G ? G.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, $e = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, xe = "?" + E, Ie = `<${xe}>`, P = document, N = () => P.createComment(""), I = (t) => t === null || typeof t != "object" && typeof t != "function", ne = Array.isArray, Fe = (t) => ne(t) || typeof t?.[Symbol.iterator] == "function", te = `[ 	
-\f\r]`, U = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, me = /-->/g, ge = />/g, S = RegExp(`>|${te}(?:([^\\s"'>=/]+)(${te}*=${te}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ve = /'/g, _e = /"/g, ke = /^(?:script|style|textarea|title)$/i, ze = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), oe = ze(1), D = /* @__PURE__ */ Symbol.for("lit-noChange"), f = /* @__PURE__ */ Symbol.for("lit-nothing"), we = /* @__PURE__ */ new WeakMap(), C = P.createTreeWalker(P, 129);
-function Ee(t, e) {
+const ie = globalThis, fe = (t) => t, G = ie.trustedTypes, be = G ? G.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, $e = "$lit$", A = `lit$${Math.random().toFixed(9).slice(2)}$`, xe = "?" + A, Fe = `<${xe}>`, P = document, L = () => P.createComment(""), F = (t) => t === null || typeof t != "object" && typeof t != "function", ne = Array.isArray, je = (t) => ne(t) || typeof t?.[Symbol.iterator] == "function", te = `[ 	
+\f\r]`, N = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, me = /-->/g, ve = />/g, S = RegExp(`>|${te}(?:([^\\s"'>=/]+)(${te}*=${te}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ge = /'/g, _e = /"/g, ke = /^(?:script|style|textarea|title)$/i, ze = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), oe = ze(1), D = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), ye = /* @__PURE__ */ new WeakMap(), C = P.createTreeWalker(P, 129);
+function Ae(t, e) {
   if (!ne(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return be !== void 0 ? be.createHTML(e) : e;
 }
-const je = (t, e) => {
+const Ie = (t, e) => {
   const o = t.length - 1, s = [];
-  let r, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = U;
+  let r, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = N;
   for (let l = 0; l < o; l++) {
     const a = t[l];
     let c, u, d = -1, $ = 0;
-    for (; $ < a.length && (n.lastIndex = $, u = n.exec(a), u !== null); ) $ = n.lastIndex, n === U ? u[1] === "!--" ? n = me : u[1] !== void 0 ? n = ge : u[2] !== void 0 ? (ke.test(u[2]) && (r = RegExp("</" + u[2], "g")), n = S) : u[3] !== void 0 && (n = S) : n === S ? u[0] === ">" ? (n = r ?? U, d = -1) : u[1] === void 0 ? d = -2 : (d = n.lastIndex - u[2].length, c = u[1], n = u[3] === void 0 ? S : u[3] === '"' ? _e : ve) : n === _e || n === ve ? n = S : n === me || n === ge ? n = U : (n = S, r = void 0);
+    for (; $ < a.length && (n.lastIndex = $, u = n.exec(a), u !== null); ) $ = n.lastIndex, n === N ? u[1] === "!--" ? n = me : u[1] !== void 0 ? n = ve : u[2] !== void 0 ? (ke.test(u[2]) && (r = RegExp("</" + u[2], "g")), n = S) : u[3] !== void 0 && (n = S) : n === S ? u[0] === ">" ? (n = r ?? N, d = -1) : u[1] === void 0 ? d = -2 : (d = n.lastIndex - u[2].length, c = u[1], n = u[3] === void 0 ? S : u[3] === '"' ? _e : ge) : n === _e || n === ge ? n = S : n === me || n === ve ? n = N : (n = S, r = void 0);
     const k = n === S && t[l + 1].startsWith("/>") ? " " : "";
-    i += n === U ? a + Ie : d >= 0 ? (s.push(c), a.slice(0, d) + $e + a.slice(d) + E + k) : a + E + (d === -2 ? l : k);
+    i += n === N ? a + Fe : d >= 0 ? (s.push(c), a.slice(0, d) + $e + a.slice(d) + A + k) : a + A + (d === -2 ? l : k);
   }
-  return [Ee(t, i + (t[o] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
+  return [Ae(t, i + (t[o] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
 };
-class F {
+class j {
   constructor({ strings: e, _$litType$: o }, s) {
     let r;
     this.parts = [];
     let i = 0, n = 0;
-    const l = e.length - 1, a = this.parts, [c, u] = je(e, o);
-    if (this.el = F.createElement(c, s), C.currentNode = this.el.content, o === 2 || o === 3) {
+    const l = e.length - 1, a = this.parts, [c, u] = Ie(e, o);
+    if (this.el = j.createElement(c, s), C.currentNode = this.el.content, o === 2 || o === 3) {
       const d = this.el.content.firstChild;
       d.replaceWith(...d.childNodes);
     }
     for (; (r = C.nextNode()) !== null && a.length < l; ) {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const d of r.getAttributeNames()) if (d.endsWith($e)) {
-          const $ = u[n++], k = r.getAttribute(d).split(E), Y = /([.?@])?(.*)/.exec($);
-          a.push({ type: 1, index: i, name: Y[2], strings: k, ctor: Y[1] === "." ? We : Y[1] === "?" ? qe : Y[1] === "@" ? Ke : ee }), r.removeAttribute(d);
-        } else d.startsWith(E) && (a.push({ type: 6, index: i }), r.removeAttribute(d));
+          const $ = u[n++], k = r.getAttribute(d).split(A), Z = /([.?@])?(.*)/.exec($);
+          a.push({ type: 1, index: i, name: Z[2], strings: k, ctor: Z[1] === "." ? qe : Z[1] === "?" ? We : Z[1] === "@" ? Ke : ee }), r.removeAttribute(d);
+        } else d.startsWith(A) && (a.push({ type: 6, index: i }), r.removeAttribute(d));
         if (ke.test(r.tagName)) {
-          const d = r.textContent.split(E), $ = d.length - 1;
+          const d = r.textContent.split(A), $ = d.length - 1;
           if ($ > 0) {
             r.textContent = G ? G.emptyScript : "";
-            for (let k = 0; k < $; k++) r.append(d[k], N()), C.nextNode(), a.push({ type: 2, index: ++i });
-            r.append(d[$], N());
+            for (let k = 0; k < $; k++) r.append(d[k], L()), C.nextNode(), a.push({ type: 2, index: ++i });
+            r.append(d[$], L());
           }
         }
       } else if (r.nodeType === 8) if (r.data === xe) a.push({ type: 2, index: i });
       else {
         let d = -1;
-        for (; (d = r.data.indexOf(E, d + 1)) !== -1; ) a.push({ type: 7, index: i }), d += E.length - 1;
+        for (; (d = r.data.indexOf(A, d + 1)) !== -1; ) a.push({ type: 7, index: i }), d += A.length - 1;
       }
       i++;
     }
@@ -335,7 +335,7 @@ class F {
 function H(t, e, o = t, s) {
   if (e === D) return e;
   let r = s !== void 0 ? o._$Co?.[s] : o._$Cl;
-  const i = I(e) ? void 0 : e._$litDirective$;
+  const i = F(e) ? void 0 : e._$litDirective$;
   return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(t), r._$AT(t, o, s)), s !== void 0 ? (o._$Co ??= [])[s] = r : o._$Cl = r), r !== void 0 && (e = H(t, r._$AS(t, e.values), r, s)), e;
 }
 class Re {
@@ -355,7 +355,7 @@ class Re {
     for (; a !== void 0; ) {
       if (n === a.index) {
         let c;
-        a.type === 2 ? c = new W(i, i.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (c = new Ye(i, this, e)), this._$AV.push(c), a = s[++l];
+        a.type === 2 ? c = new q(i, i.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (c = new Ze(i, this, e)), this._$AV.push(c), a = s[++l];
       }
       n !== a?.index && (i = C.nextNode(), n++);
     }
@@ -366,12 +366,12 @@ class Re {
     for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, o), o += s.strings.length - 2) : s._$AI(e[o])), o++;
   }
 }
-class W {
+class q {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
   constructor(e, o, s, r) {
-    this.type = 2, this._$AH = f, this._$AN = void 0, this._$AA = e, this._$AB = o, this._$AM = s, this.options = r, this._$Cv = r?.isConnected ?? !0;
+    this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB = o, this._$AM = s, this.options = r, this._$Cv = r?.isConnected ?? !0;
   }
   get parentNode() {
     let e = this._$AA.parentNode;
@@ -385,7 +385,7 @@ class W {
     return this._$AB;
   }
   _$AI(e, o = this) {
-    e = H(this, e, o), I(e) ? e === f || e == null || e === "" ? (this._$AH !== f && this._$AR(), this._$AH = f) : e !== this._$AH && e !== D && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Fe(e) ? this.k(e) : this._(e);
+    e = H(this, e, o), F(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== D && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : je(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -394,10 +394,10 @@ class W {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== f && I(this._$AH) ? this._$AA.nextSibling.data = e : this.T(P.createTextNode(e)), this._$AH = e;
+    this._$AH !== b && F(this._$AH) ? this._$AA.nextSibling.data = e : this.T(P.createTextNode(e)), this._$AH = e;
   }
   $(e) {
-    const { values: o, _$litType$: s } = e, r = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = F.createElement(Ee(s.h, s.h[0]), this.options)), s);
+    const { values: o, _$litType$: s } = e, r = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = j.createElement(Ae(s.h, s.h[0]), this.options)), s);
     if (this._$AH?._$AD === r) this._$AH.p(o);
     else {
       const i = new Re(r, this), n = i.u(this.options);
@@ -405,14 +405,14 @@ class W {
     }
   }
   _$AC(e) {
-    let o = we.get(e.strings);
-    return o === void 0 && we.set(e.strings, o = new F(e)), o;
+    let o = ye.get(e.strings);
+    return o === void 0 && ye.set(e.strings, o = new j(e)), o;
   }
   k(e) {
     ne(this._$AH) || (this._$AH = [], this._$AR());
     const o = this._$AH;
     let s, r = 0;
-    for (const i of e) r === o.length ? o.push(s = new W(this.O(N()), this.O(N()), this, this.options)) : s = o[r], s._$AI(i), r++;
+    for (const i of e) r === o.length ? o.push(s = new q(this.O(L()), this.O(L()), this, this.options)) : s = o[r], s._$AI(i), r++;
     r < o.length && (this._$AR(s && s._$AB.nextSibling, r), o.length = r);
   }
   _$AR(e = this._$AA.nextSibling, o) {
@@ -433,37 +433,37 @@ class ee {
     return this._$AM._$AU;
   }
   constructor(e, o, s, r, i) {
-    this.type = 1, this._$AH = f, this._$AN = void 0, this.element = e, this.name = o, this._$AM = r, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = f;
+    this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name = o, this._$AM = r, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = b;
   }
   _$AI(e, o = this, s, r) {
     const i = this.strings;
     let n = !1;
-    if (i === void 0) e = H(this, e, o, 0), n = !I(e) || e !== this._$AH && e !== D, n && (this._$AH = e);
+    if (i === void 0) e = H(this, e, o, 0), n = !F(e) || e !== this._$AH && e !== D, n && (this._$AH = e);
     else {
       const l = e;
       let a, c;
-      for (e = i[0], a = 0; a < i.length - 1; a++) c = H(this, l[s + a], o, a), c === D && (c = this._$AH[a]), n ||= !I(c) || c !== this._$AH[a], c === f ? e = f : e !== f && (e += (c ?? "") + i[a + 1]), this._$AH[a] = c;
+      for (e = i[0], a = 0; a < i.length - 1; a++) c = H(this, l[s + a], o, a), c === D && (c = this._$AH[a]), n ||= !F(c) || c !== this._$AH[a], c === b ? e = b : e !== b && (e += (c ?? "") + i[a + 1]), this._$AH[a] = c;
     }
     n && !r && this.j(e);
   }
   j(e) {
-    e === f ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class We extends ee {
+class qe extends ee {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === f ? void 0 : e;
+    this.element[this.name] = e === b ? void 0 : e;
   }
 }
-class qe extends ee {
+class We extends ee {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== f);
+    this.element.toggleAttribute(this.name, !!e && e !== b);
   }
 }
 class Ke extends ee {
@@ -471,15 +471,15 @@ class Ke extends ee {
     super(e, o, s, r, i), this.type = 5;
   }
   _$AI(e, o = this) {
-    if ((e = H(this, e, o, 0) ?? f) === D) return;
-    const s = this._$AH, r = e === f && s !== f || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== f && (s === f || r);
+    if ((e = H(this, e, o, 0) ?? b) === D) return;
+    const s = this._$AH, r = e === b && s !== b || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== b && (s === b || r);
     r && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
     typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
   }
 }
-class Ye {
+class Ze {
   constructor(e, o, s) {
     this.element = e, this.type = 6, this._$AN = void 0, this._$AM = o, this.options = s;
   }
@@ -490,19 +490,19 @@ class Ye {
     H(this, e);
   }
 }
-const Xe = ie.litHtmlPolyfillSupport;
-Xe?.(F, W), (ie.litHtmlVersions ??= []).push("3.3.2");
-const Ze = (t, e, o) => {
+const Ye = ie.litHtmlPolyfillSupport;
+Ye?.(j, q), (ie.litHtmlVersions ??= []).push("3.3.2");
+const Xe = (t, e, o) => {
   const s = o?.renderBefore ?? e;
   let r = s._$litPart$;
   if (r === void 0) {
     const i = o?.renderBefore ?? null;
-    s._$litPart$ = r = new W(e.insertBefore(N(), i), i, void 0, o ?? {});
+    s._$litPart$ = r = new q(e.insertBefore(L(), i), i, void 0, o ?? {});
   }
   return r._$AI(t), r;
 };
 const ae = globalThis;
-let T = class extends B {
+let V = class extends B {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -512,7 +512,7 @@ let T = class extends B {
   }
   update(e) {
     const o = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Ze(o, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Xe(o, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(!0);
@@ -524,17 +524,17 @@ let T = class extends B {
     return D;
   }
 };
-T._$litElement$ = !0, T.finalized = !0, ae.litElementHydrateSupport?.({ LitElement: T });
+V._$litElement$ = !0, V.finalized = !0, ae.litElementHydrateSupport?.({ LitElement: V });
 const Ge = ae.litElementPolyfillSupport;
-Ge?.({ LitElement: T });
+Ge?.({ LitElement: V });
 (ae.litElementVersions ??= []).push("4.2.2");
-const Je = A`:host{cursor:pointer;-webkit-user-select:none;user-select:none;width:calc(1rem + 2px);height:calc(1rem + 2px)}:host([disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{position:relative;transition:opacity .2s ease}.checkbox-box{width:1rem;height:1rem;border-radius:.25rem;background-color:var(--nf-background-color);border:1px solid var(--nf-border-color);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}:host(:hover:not([checked]):not([disabled])) .checkbox-box{border-color:var(--nf-primary-color,var(--primary-color))}:host([checked]) .checkbox-box{background-color:var(--nf-primary-color,var(--primary-color));border-color:var(--nf-primary-color,var(--primary-color))}:host([disabled]) .checkbox-box{border-color:#ccc;background:#ccc;cursor:not-allowed;pointer-events:none}:host([disabled][checked]) .checkbox-box{background-color:#ccc;border-color:#ccc}.checkbox-icon{color:#fff;font-size:.75rem;line-height:1;font-weight:700;transition:transform .2s ease;display:flex;align-items:center}:host([checked]) .checkbox-icon{transform:scale(1)}:host(:focus) .checkbox-container{outline:.125rem solid var(--nf-primary-color,var(--primary-color));outline-offset:.125rem}`;
+const Je = E`:host{cursor:pointer;-webkit-user-select:none;user-select:none;width:calc(1rem + 2px);height:calc(1rem + 2px)}:host([disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{position:relative;transition:opacity .2s ease}.checkbox-box{width:1rem;height:1rem;border-radius:.25rem;background-color:var(--nf-background-color);border:1px solid var(--nf-border-color);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}:host(:hover:not([checked]):not([disabled])) .checkbox-box{border-color:var(--nf-primary-color,var(--nf-primary-color))}:host([checked]) .checkbox-box{background-color:var(--nf-primary-color,var(--nf-primary-color));border-color:var(--nf-primary-color,var(--nf-primary-color))}:host([disabled]) .checkbox-box{border-color:#fffc;background:#fffc;cursor:not-allowed;pointer-events:none}:host([disabled][checked]) .checkbox-box{background-color:#fffc;border-color:#fffc}.checkbox-icon{color:#fff;font-size:.75rem;line-height:1;font-weight:700;transition:transform .2s ease;display:flex;align-items:center}:host([checked]) .checkbox-icon{transform:scale(1)}:host(:focus) .checkbox-container{outline:.125rem solid var(--nf-primary-color,var(--nf-primary-color));outline-offset:.125rem}`;
 var Qe = Object.defineProperty, et = Object.getOwnPropertyDescriptor, le = (t, e, o, s) => {
   for (var r = s > 1 ? void 0 : s ? et(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
   return s && r && Qe(e, o, r), r;
 };
-let z = class extends T {
+let z = class extends V {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1;
   }
@@ -552,6 +552,11 @@ let z = class extends T {
   render() {
     return oe`<div class=checkbox-container @click=${this.toggleCheckbox} aria-checked=${this.checked} aria-disabled=${this.disabled} role=checkbox><div class=checkbox-box>${this.checked ? oe`<div class=checkbox-icon><svg aria-hidden=true data-icon=check fill=currentColor focusable=false height=0.625rem viewBox="64 64 896 896"width=0.625rem><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></div>` : ""}</div></div>`;
   }
+  connectedCallback() {
+    this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
+      this.style.transition = "";
+    });
+  }
 };
 z.styles = [Je];
 le([
@@ -561,7 +566,7 @@ le([
   h({ type: Boolean, reflect: !0 })
 ], z.prototype, "disabled", 2);
 z = le([
-  O("nf-checkbox")
+  T("nf-checkbox")
 ], z);
 const tt = { ATTRIBUTE: 1 }, ot = (t) => (...e) => ({ _$litDirective$: t, values: e });
 let st = class {
@@ -580,7 +585,7 @@ let st = class {
     return this.render(...o);
   }
 };
-const Ae = "important", rt = " !" + Ae, J = ot(class extends st {
+const Ee = "important", rt = " !" + Ee, J = ot(class extends st {
   constructor(t) {
     if (super(t), t.type !== tt.ATTRIBUTE || t.name !== "style" || t.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
   }
@@ -599,18 +604,18 @@ const Ae = "important", rt = " !" + Ae, J = ot(class extends st {
       if (r != null) {
         this.ft.add(s);
         const i = typeof r == "string" && r.endsWith(rt);
-        s.includes("-") || i ? o.setProperty(s, i ? r.slice(0, -11) : r, i ? Ae : "") : o[s] = r;
+        s.includes("-") || i ? o.setProperty(s, i ? r.slice(0, -11) : r, i ? Ee : "") : o[s] = r;
       }
     }
     return D;
   }
-}), q = A`:host{display:inline-flex;align-items:center;position:relative;width:var(--nf-width);height:var(--nf-height);padding:var(--nf-padding);margin:var(--nf-margin);font-size:var(--nf-text-font-size);font-weight:var(--nf-font-weight);color:var(--nf-color);background:var(--nf-background-color);border-radius:var(--nf-border-radius);border:1px solid var(--nf-border-color);outline:0;background-clip:padding-box;box-shadow:0 0 0 .15rem var(--nf-box-shadow-color);transition:color var(--nf-transition) ease-in-out,background-color var(--nf-transition) ease-in-out,border-color var(--nf-transition) ease-in-out,box-shadow var(--nf-transition) ease-in-out}:host(:focus){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus);background:var(--nf-background-color-hover)}:host(:hover:not([disabled])){border-color:var(--nf-border-color-hover);background:var(--nf-background-color-hover)}:host([disabled]){cursor:not-allowed;opacity:.6;pointer-events:auto}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}`, it = A`:host{display:inline-block;position:relative}:host([disabled]){cursor:not-allowed;opacity:.6}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}:host([open]){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus)}.trigger{width:calc(100% + 1.5rem);height:calc(100% + 2px);margin:-1px -.75rem;padding:1px .75rem;box-sizing:border-box;display:flex;align-items:center;cursor:pointer;transition:all .2s;font-size:.875rem;position:relative}:host(:not([disabled])) .trigger:hover{border-color:var(--nf-color-primary)}.trigger[disabled]{cursor:not-allowed;opacity:.6}:host([disabled]) .trigger{cursor:not-allowed;color:var(--nf-color-disabled)}.color-block{width:1.25rem;height:1.25rem;border-radius:.125rem;margin-left:calc((var(--nf-height) - 1.25rem)/ 2 - .75rem);margin-right:.4rem}:host([show-text=false]) .color-block{margin-right:calc((var(--nf-height) - 1.25rem)/ 2 - .75rem)}.color-text{flex:1}.panel{position:absolute;z-index:1000;background:var(--nf-color-picker-card-background,var(--nf-dropdown-background));border-radius:var(--nf-border-radius);box-shadow:0 6px 16px 0 var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow)),0 3px 6px -4px var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow)),0 9px 28px 8px var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow));-webkit-user-select:none;user-select:none}.panel-content{padding:.75rem;width:15rem}.color-selector{height:9.375rem;position:relative;margin-bottom:.75rem;border-radius:var(--nf-border-radius);overflow:hidden}.color-sb{width:100%;height:100%;position:relative;cursor:pointer}.sb-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,#fff0)}.sb-black{position:absolute;inset:0;background:linear-gradient(to top,#000,#0000)}.selector{position:absolute;width:.625rem;height:.625rem;border:.125rem solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 .125rem #00000080;pointer-events:none}.slider-container{margin-bottom:.5rem}.slider-container:last-child{margin-bottom:0}.sliders-row{display:flex;align-items:center;gap:.75rem}.sliders{flex:1}.slider{position:relative;height:.75rem;border-radius:.375rem}.hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.alpha-slider{position:relative;background-image:linear-gradient(45deg,var(--nf-color-picker-card-checker,#ccc) 25%,transparent 25%),linear-gradient(-45deg,var(--nf-color-picker-card-checker,#ccc) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--nf-color-picker-card-checker,#ccc) 75%),linear-gradient(-45deg,transparent 75%,var(--nf-color-picker-card-checker,#ccc) 75%);background-size:.375rem .375rem;background-position:0 0,0 .1875rem,.1875rem -.1875rem,-.1875rem 0;background-color:var(--nf-color-picker-card-checker-bg,#fff);border-radius:.375rem}.alpha-slider-input{position:relative;z-index:2}.alpha-gradient{position:absolute;inset:0;border-radius:.375rem}input[type=range]{-webkit-appearance:none;width:100%;height:100%;background:0 0;outline:0;position:absolute;top:0;left:0;margin:0;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--nf-color-border);cursor:pointer;box-shadow:0 0 .125rem #00000080;position:relative;z-index:1}input[type=range]::-moz-range-thumb{width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--nf-color-border);cursor:pointer;box-shadow:0 0 .125rem #00000080}.current-color-container{display:flex}.current-color{width:2rem;height:2rem;border-radius:var(--nf-border-radius);border:.0625rem solid var(--nf-color-border)}:host(:not([disabled-alpha])) .current-color{width:2.5rem;height:2.5rem}`;
-var nt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, v = (t, e, o, s) => {
+}), W = E`:host{display:inline-flex;align-items:center;position:relative;width:var(--nf-width);height:var(--nf-height);padding:var(--nf-padding);margin:var(--nf-margin);font-size:var(--nf-text-font-size);font-weight:var(--nf-font-weight);color:var(--nf-color);background:var(--nf-background-color);border-radius:var(--nf-border-radius);border:1px solid var(--nf-border-color);outline:0;background-clip:padding-box;box-shadow:0 0 0 .15rem var(--nf-box-shadow-color);transition:color var(--nf-transition) ease-in-out,background-color var(--nf-transition) ease-in-out,border-color var(--nf-transition) ease-in-out,box-shadow var(--nf-transition) ease-in-out}:host(:focus){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus);background:var(--nf-background-color-hover)}:host(:hover:not([disabled])){border-color:var(--nf-border-color-hover);background:var(--nf-background-color-hover)}:host([disabled]){cursor:not-allowed;opacity:.6;pointer-events:auto}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}`, it = E`:host{display:inline-block;position:relative}:host([disabled]){cursor:not-allowed;opacity:.6}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}:host([open]){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus)}.trigger{width:calc(100% + 1.5rem + 2px);height:calc(100% + 2px);margin:-1px -.75rem;padding:1px .75rem;box-sizing:border-box;display:flex;align-items:center;cursor:pointer;transition:all .2s;font-size:.875rem;position:relative}:host(:not([disabled])) .trigger:hover{border-color:var(--nf-color-primary)}.trigger[disabled]{cursor:not-allowed;opacity:.6}:host([disabled]) .trigger{cursor:not-allowed;color:var(--nf-color-disabled)}.color-block{width:1.25rem;height:1.25rem;border-radius:.125rem;margin-left:calc((var(--nf-height) - 1.25rem)/ 2 - .75rem);margin-right:.4rem}:host(.hide-text) .color-block{margin-right:calc((var(--nf-height) - 1.25rem)/ 2 - .75rem)}.color-text{flex:1}.panel{position:absolute;z-index:1000;background:var(--nf-color-picker-card-background,var(--nf-dropdown-background));-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);border-radius:var(--nf-border-radius);box-shadow:0 6px 16px 0 var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow)),0 3px 6px -4px var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow)),0 9px 28px 8px var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow));-webkit-user-select:none;user-select:none}.panel-content{padding:.75rem;width:15rem}.color-selector{height:9.375rem;position:relative;margin-bottom:.75rem;border-radius:var(--nf-border-radius);overflow:hidden}.color-sb{width:100%;height:100%;position:relative;cursor:pointer}.sb-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,#fff0)}.sb-black{position:absolute;inset:0;background:linear-gradient(to top,#000,#0000)}.selector{position:absolute;width:.625rem;height:.625rem;border:.125rem solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 .125rem #00000080;pointer-events:none}.slider-container{margin-bottom:.5rem}.slider-container:last-child{margin-bottom:0}.sliders-row{display:flex;align-items:center;gap:.75rem}.sliders{flex:1}.slider{position:relative;height:.75rem;border-radius:.375rem}.hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.alpha-slider{position:relative;background-image:linear-gradient(45deg,var(--nf-color-picker-card-checker,#ccc) 25%,transparent 25%),linear-gradient(-45deg,var(--nf-color-picker-card-checker,#ccc) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--nf-color-picker-card-checker,#ccc) 75%),linear-gradient(-45deg,transparent 75%,var(--nf-color-picker-card-checker,#ccc) 75%);background-size:.375rem .375rem;background-position:0 0,0 .1875rem,.1875rem -.1875rem,-.1875rem 0;background-color:var(--nf-color-picker-card-checker-bg,#fff);border-radius:.375rem}.alpha-slider-input{position:relative;z-index:2}.alpha-gradient{position:absolute;inset:0;border-radius:.375rem}input[type=range]{-webkit-appearance:none;width:100%;height:100%;background:0 0;outline:0;position:absolute;top:0;left:0;margin:0;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--nf-color-border);cursor:pointer;box-shadow:0 0 .125rem #00000080;position:relative;z-index:1}input[type=range]::-moz-range-thumb{width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--nf-color-border);cursor:pointer;box-shadow:0 0 .125rem #00000080}.current-color-container{display:flex}.current-color{width:2rem;height:2rem;border-radius:var(--nf-border-radius);border:.0625rem solid var(--nf-color-border)}:host(:not([disabled-alpha])) .current-color{width:2.5rem;height:2.5rem}`;
+var nt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, _ = (t, e, o, s) => {
   for (var r = s > 1 ? void 0 : s ? at(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
   return s && r && nt(e, o, r), r;
 };
-let b = class extends R {
+let v = class extends R {
   constructor() {
     super(...arguments), this.value = "#FF0000", this.disabled = !1, this.disabledAlpha = !1, this.open = !1, this.showText = !0, this.placement = "bottom", this.align = "left", this.autoAdjust = !0, this._panelVisible = !1, this._internalValue = "#FF0000FF", this._hsb = { h: 0, s: 100, b: 100 }, this._panelPosition = { top: 0, left: 0 }, this._handleGlobalClick = (t) => {
       this._panelVisible && !this.contains(t.target) && this._closePanel();
@@ -627,16 +632,18 @@ let b = class extends R {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._handleGlobalClick), document.addEventListener("keydown", this._handleKeyDown);
+    this.style.transition = "none", super.connectedCallback(), document.addEventListener("click", this._handleGlobalClick), document.addEventListener("keydown", this._handleKeyDown), requestAnimationFrame(() => {
+      this.style.transition = "";
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("click", this._handleGlobalClick), document.removeEventListener("keydown", this._handleKeyDown), document.removeEventListener("mousemove", this._handleSBMouseMove), document.removeEventListener("mouseup", this._handleSBMouseUp);
   }
   firstUpdated() {
-    this._updateInternalValue(this.value), this._updateHSBFromHex(this._internalValue);
+    this._updateInternalValue(this.value), this._updateHSBFromHex(this._internalValue), this.classList.toggle("hide-text", !this.showText);
   }
   updated(t) {
-    t.has("value") && (this._updateInternalValue(this.value), this._updateHSBFromHex(this._internalValue)), t.has("open") && (this._panelVisible = this.open, this.open && this._updatePanelPosition());
+    t.has("value") && (this._updateInternalValue(this.value), this._updateHSBFromHex(this._internalValue)), t.has("open") && (this._panelVisible = this.open, this.open && this._updatePanelPosition()), t.has("showText") && this.classList.toggle("hide-text", !this.showText);
   }
   // 更新内部颜色值
   _updateInternalValue(t) {
@@ -741,7 +748,7 @@ let b = class extends R {
   // 渲染触发器
   _renderTrigger() {
     const t = "#" + this._internalValue.slice(1, 7), e = this._internalValue.slice(7);
-    return p`
+    return f`
       <div 
         class="trigger"
         @click="${this._togglePanel}"
@@ -751,14 +758,14 @@ let b = class extends R {
           class="color-block"
           style="background-color: ${this.disabledAlpha ? t : this._internalValue}"
         ></div>
-        ${this.showText ? p`<div class="color-text">${this.disabledAlpha || e === "FF" ? t : this._internalValue}</div>` : ""}
+        ${this.showText ? f`<div class="color-text">${this.disabledAlpha || e === "FF" ? t : this._internalValue}</div>` : ""}
       </div>
     `;
   }
   // 渲染颜色选择区域
   _renderColorSelector() {
     const t = this._generateHexFromHSB(this._hsb.h, 100, 100, "FF"), e = this._hsb.s / 100 * 100, o = (1 - this._hsb.b / 100) * 100;
-    return p`
+    return f`
       <div class="color-selector">
         <div
           class="color-sb"
@@ -784,7 +791,7 @@ let b = class extends R {
   }
   // 渲染色相选择条
   _renderHueSlider() {
-    return p`
+    return f`
       <div class="slider-container">
         <div class="slider hue-slider">
           <input
@@ -803,7 +810,7 @@ let b = class extends R {
   _renderAlphaSlider() {
     if (this.disabledAlpha) return null;
     const t = parseInt(this._internalValue.slice(7), 16) / 255 * 100, e = "#" + this._internalValue.slice(1, 7);
-    return p`
+    return f`
       <div class="slider-container">
         <div class="slider alpha-slider">
           <div
@@ -824,7 +831,7 @@ let b = class extends R {
   }
   // 渲染当前颜色显示
   _renderCurrentColor() {
-    return p`
+    return f`
       <div class="current-color-container">
         <div 
           class="current-color"
@@ -835,7 +842,7 @@ let b = class extends R {
   }
   // 渲染颜色面板
   _renderPanel() {
-    return this._panelVisible ? p`
+    return this._panelVisible ? f`
       <div
         class="panel"
         style="top: ${this._panelPosition.top}px; left: ${this._panelPosition.left}px;"
@@ -854,41 +861,42 @@ let b = class extends R {
     ` : null;
   }
   render() {
-    return p`
+    return f`
       ${this._renderTrigger()}
       ${this._renderPanel()}
     `;
   }
 };
-b.styles = [q, it];
-v([
+v.styles = [W, it];
+_([
   h({ type: String })
-], b.prototype, "value", 2);
-v([
+], v.prototype, "value", 2);
+_([
   h({ type: Boolean, reflect: !0 })
-], b.prototype, "disabled", 2);
-v([
+], v.prototype, "disabled", 2);
+_([
   h({ type: Boolean, reflect: !0, attribute: "disabled-alpha" })
-], b.prototype, "disabledAlpha", 2);
-v([
+], v.prototype, "disabledAlpha", 2);
+_([
   h({ type: Boolean, reflect: !0 })
-], b.prototype, "open", 2);
-v([
+], v.prototype, "open", 2);
+_([
   h({
     attribute: "show-text",
+    reflect: !0,
     converter: {
       fromAttribute: (t) => t !== "false",
       toAttribute: (t) => t ? null : "false"
     }
   })
-], b.prototype, "showText", 2);
-v([
+], v.prototype, "showText", 2);
+_([
   h({ type: String })
-], b.prototype, "placement", 2);
-v([
+], v.prototype, "placement", 2);
+_([
   h({ type: String })
-], b.prototype, "align", 2);
-v([
+], v.prototype, "align", 2);
+_([
   h({
     attribute: "auto-adjust",
     converter: {
@@ -896,24 +904,24 @@ v([
       toAttribute: (t) => t ? null : "false"
     }
   })
-], b.prototype, "autoAdjust", 2);
-v([
-  y()
-], b.prototype, "_panelVisible", 2);
-v([
-  y()
-], b.prototype, "_internalValue", 2);
-v([
-  y()
-], b.prototype, "_hsb", 2);
-v([
-  y()
-], b.prototype, "_panelPosition", 2);
-b = v([
-  O("nf-color-picker")
-], b);
-const lt = A`:host{min-width:10rem;position:relative;display:inline-block}:host([disabled]) .input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .toggle-password{cursor:not-allowed;pointer-events:none;opacity:.5}::slotted(*){position:absolute;top:50%;left:.75rem;transform:translateY(-50%);color:var(--nf-color)}:host([disabled]) ::slotted(*){color:var(--nf-color-disabled)}.input{position:absolute;inset:0;padding:var(--nf-input-padding);outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-color);font-size:var(--nf-font-size);font-weight:var(--nf-font-weight);font-family:var(--nf-font-family),sans-serif}.input:has(.toggle-password){padding-right:2.5rem}.input .toggle-password{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);background:0 0;border:none;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;color:var(--nf-select-icon-color);transition:color var(--nf-transition-fast) ease;outline:0}.input .toggle-password:hover{color:var(--nf-icon-color-hover)}.input .toggle-password:active{color:var(--nf-icon-color-active)}.input .toggle-password svg{display:block}`;
-var ht = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, V = (t, e, o, s) => {
+], v.prototype, "autoAdjust", 2);
+_([
+  w()
+], v.prototype, "_panelVisible", 2);
+_([
+  w()
+], v.prototype, "_internalValue", 2);
+_([
+  w()
+], v.prototype, "_hsb", 2);
+_([
+  w()
+], v.prototype, "_panelPosition", 2);
+v = _([
+  T("nf-color-picker")
+], v);
+const lt = E`:host{width:var(--nf-width);position:relative;display:inline-block}:host([disabled]) .input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .toggle-password{cursor:not-allowed;pointer-events:none;opacity:.5}::slotted(*){position:absolute;top:50%;left:.75rem;transform:translateY(-50%);color:var(--nf-color)}:host([disabled]) ::slotted(*){color:var(--nf-color-disabled)}.input{position:absolute;inset:0;padding:var(--nf-input-padding);outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-color);font-size:var(--nf-font-size);font-weight:var(--nf-font-weight);font-family:var(--nf-font-family),sans-serif}.input:has(.toggle-password){padding-right:2.5rem}.input .toggle-password{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);background:0 0;border:none;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;color:var(--nf-select-icon-color);transition:color var(--nf-transition-fast) ease;outline:0}.input .toggle-password:hover{color:var(--nf-icon-color-hover)}.input .toggle-password:active{color:var(--nf-icon-color-active)}.input .toggle-password svg{display:block}`;
+var ht = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, O = (t, e, o, s) => {
   for (var r = s > 1 ? void 0 : s ? ct(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
   return s && r && ht(e, o, r), r;
@@ -964,13 +972,13 @@ let x = class extends R {
   }
   render() {
     const t = this.type === "password" && !this.showPassword ? "password" : "text", e = this.type === "password";
-    return p`<slot></slot><input .value=${t} ?disabled=${this.value} @change=${this.placeholder} @input=${this.maxLength ?? ""} @keydown=${this.disabled} class=input maxlength=${this.onInput} placeholder=${this.onChange} type=${this.onKeyDown}> ${e ? p`<button @click=${this.togglePasswordVisibility} aria-label=${this.showPassword ? "Hide password" : "Show password"} class=toggle-password tabindex=-1 type=button>${this.showPassword ? this.renderEyeOffIcon() : this.renderEyeIcon()}</button>` : ""}`;
+    return f`<slot></slot><input .value=${t} ?disabled=${this.value} @change=${this.placeholder} @input=${this.maxLength ?? ""} @keydown=${this.disabled} class=input maxlength=${this.onInput} placeholder=${this.onChange} type=${this.onKeyDown}> ${e ? f`<button @click=${this.togglePasswordVisibility} aria-label=${this.showPassword ? "Hide password" : "Show password"} class=toggle-password tabindex=-1 type=button>${this.showPassword ? this.renderEyeOffIcon() : this.renderEyeIcon()}</button>` : ""}`;
   }
   renderEyeIcon() {
-    return p`<svg height=16 stroke=currentColor stroke-width=2 viewBox="0 0 24 24"width=16><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx=12 cy=12 r=3 /></svg>`;
+    return f`<svg height=16 stroke=currentColor stroke-width=2 viewBox="0 0 24 24"width=16><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx=12 cy=12 r=3 /></svg>`;
   }
   renderEyeOffIcon() {
-    return p`<svg height=16 stroke=currentColor stroke-width=2 viewBox="0 0 24 24"width=16><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1=1 x2=23 y1=1 y2=23 /></svg>`;
+    return f`<svg height=16 stroke=currentColor stroke-width=2 viewBox="0 0 24 24"width=16><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1=1 x2=23 y1=1 y2=23 /></svg>`;
   }
   connectedCallback() {
     this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
@@ -978,158 +986,192 @@ let x = class extends R {
     });
   }
 };
-x.styles = [q, lt];
-V([
+x.styles = [W, lt];
+O([
   h({ type: String })
 ], x.prototype, "value", 2);
-V([
+O([
   h({ type: String })
 ], x.prototype, "placeholder", 2);
-V([
+O([
   h({ type: String })
 ], x.prototype, "type", 2);
-V([
+O([
   h({ type: Number })
 ], x.prototype, "maxLength", 2);
-V([
+O([
   h({ type: Boolean, reflect: !0 })
 ], x.prototype, "disabled", 2);
-V([
-  y()
+O([
+  w()
 ], x.prototype, "showPassword", 2);
-x = V([
-  O("nf-input")
+x = O([
+  T("nf-input")
 ], x);
-const dt = A`:host{min-width:10rem;position:relative;display:inline-block;box-sizing:border-box;padding:0;overflow:hidden}.input-number-container{position:relative;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}.input-number{position:relative;flex:1;height:100%;outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-color);font-weight:var(--nf-font-weight);text-align:left}.input-number .input-number-input-wrapper{height:100%}.input-number .input-number-input-wrapper .input-number-input{background:0 0;width:100%;height:100%;text-align:start;border:0;outline:0;padding:0;box-sizing:border-box;color:var(--nf-color);font-size:var(--nf-font-size);font-weight:var(--nf-font-weight);font-family:var(--nf-font-family),sans-serif}.input-number::-webkit-inner-spin-button,.input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number[type=number]{appearance:textfield}.input-number:hover .controls{width:1.5rem}.input-prefix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-inline-start:.6125rem;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-prefix:not(:empty){padding-inline-end:.25rem}.input-suffix{display:flex;align-items:center;justify-content:center;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-suffix:not(:empty){padding-inline-end:.6125rem;padding-inline-start:.5rem}.controls{position:absolute;top:0;right:0;height:100%;width:0;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;transition:width var(--nf-transition-fast) ease}.controls:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}:host([suffix]) .controls:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}.control-btn{flex:1;display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;transition:background-color var(--nf-transition-fast) ease;outline:0;-webkit-user-select:none;user-select:none}.control-btn:hover{background-color:var(--nf-control-btn-background-hover)}.control-btn:active{background-color:var(--nf-control-btn-background-active)}.control-btn:focus-visible{background-color:var(--nf-control-btn-background-hover)}.control-btn svg{display:block;pointer-events:none;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round}.control-btn-up{border-bottom:.67px solid var(--nf-control-divider-color)}:host(:not([suffix])) .control-btn-up{border-top-right-radius:var(--nf-border-radius)}:host(:not([suffix])) .control-btn-down{border-bottom-right-radius:var(--nf-border-radius)}:host([disabled]) .input-number-input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .input-prefix,:host([disabled]) .input-suffix{color:var(--nf-color-disabled)}:host([disabled]) .controls{display:none}:host([disabled]) .control-btn{cursor:not-allowed;pointer-events:none;opacity:.5}`;
-var ut = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, _ = (t, e, o, s) => {
+const dt = E`:host{width:var(--nf-width);position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0;overflow:hidden}.input-number{position:relative;flex:1;height:100%;outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-color);font-weight:var(--nf-font-weight);text-align:left}.input-number .input-number-input-wrapper{height:100%}.input-number .input-number-input-wrapper .input-number-input{background:0 0;width:100%;height:100%;text-align:start;border:0;outline:0;padding:0;box-sizing:border-box;color:var(--nf-color);font-size:var(--nf-font-size);font-weight:var(--nf-font-weight);font-family:var(--nf-font-family),sans-serif}.input-number::-webkit-inner-spin-button,.input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number[type=number]{appearance:textfield}.input-number:hover .controls{width:1.5rem}.input-prefix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-inline-start:.6125rem;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-prefix:not(:empty){padding-inline-end:.25rem}.input-suffix{display:flex;align-items:center;justify-content:center;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-suffix:not(:empty){padding-inline-end:.6125rem;padding-inline-start:.5rem}.controls{position:absolute;top:0;right:0;height:100%;width:0;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;transition:width var(--nf-transition-fast) ease}.controls:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}:host([suffix]) .controls:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}.control-btn{flex:1;display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;transition:background-color var(--nf-transition-fast) ease;outline:0;-webkit-user-select:none;user-select:none}.control-btn:hover{background-color:var(--nf-control-btn-background-hover)}.control-btn:active{background-color:var(--nf-control-btn-background-active)}.control-btn:focus-visible{background-color:var(--nf-control-btn-background-hover)}.control-btn svg{display:block;pointer-events:none;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round}.control-btn-up{border-bottom:.67px solid var(--nf-control-divider-color)}:host(:not([suffix])) .control-btn-up{border-top-right-radius:var(--nf-border-radius)}:host(:not([suffix])) .control-btn-down{border-bottom-right-radius:var(--nf-border-radius)}:host([disabled]) .input-number-input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .input-prefix,:host([disabled]) .input-suffix{color:var(--nf-color-disabled)}:host([disabled]) .controls{display:none}:host([disabled]) .control-btn{cursor:not-allowed;pointer-events:none;opacity:.5}`;
+var ut = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, m = (t, e, o, s) => {
   for (var r = s > 1 ? void 0 : s ? pt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
   return s && r && ut(e, o, r), r;
 };
-let m = class extends R {
+let p = class extends R {
   constructor() {
-    super(...arguments), this.value = 0, this.controls = !0, this.changeOnWheel = !0, this.step = 1, this.decimalSeparator = ".", this.prefix = "", this.suffix = "", this.disabled = !1, this.isInputFocused = !1, this.handleInput = (t) => {
-      t.stopPropagation();
-      const o = t.target.value;
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: o,
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }, this.handleChange = (t) => {
-      t.stopPropagation();
-      const e = t.target, o = this.parseInputValue(e.value);
-      if (o !== null) {
-        const s = this.clampValue(o);
-        s !== this.value && (this.value = s, this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: s,
-            bubbles: !0,
-            composed: !0
-          })
-        ));
-      }
-    }, this.handleKeyDown = (t) => {
-      t.key === "Enter" ? (t.stopPropagation(), this.dispatchEvent(
-        new CustomEvent("pressEnter", {
-          detail: this.value,
-          bubbles: !0,
-          composed: !0
-        })
-      )) : t.key === "ArrowUp" ? (t.preventDefault(), this.handleStepChange(1)) : t.key === "ArrowDown" && (t.preventDefault(), this.handleStepChange(-1));
-    }, this.handleWheel = (t) => {
-      if (this.disabled || !this.changeOnWheel || !this.isInputFocused) return;
-      t.preventDefault();
-      const e = t.deltaY < 0 ? 1 : -1;
-      this.handleStepChange(e);
-    }, this.handleFocus = () => {
-      this.isInputFocused = !0;
-    }, this.handleBlur = () => {
-      this.isInputFocused = !1;
-    };
+    super(...arguments), this.value = 0, this.formatter = (t) => t === void 0 ? "" : String(t), this.parser = (t) => {
+      if (t.trim().length == 0 || t.endsWith("."))
+        return;
+      const e = Number(t);
+      if (!Number.isNaN(e))
+        return this.clampValue(e);
+    }, this.prefix = "", this.suffix = "", this.controls = !0, this.step = 1, this.changeOnWheel = !0, this.disabled = !1, this.noDecimal = !1, this.noZero = !1, this.noNegative = !1, this.text = "", this.isTyping = !1, this.isFocused = !1;
+  }
+  // 对解析结果进行额外验证
+  validateParsed(t) {
+    if (t !== void 0 && !(this.noDecimal && !Number.isInteger(t)) && !(this.noZero && t === 0) && !(this.noNegative && t < 0))
+      return t;
+  }
+  /* ================== 文本设置 ================== */
+  // 验证并设置 text，过滤不合规字符
+  setText(t) {
+    let e = t;
+    if (e = e.replace(/[^0-9+.\-]/g, ""), this.noNegative && (e = e.replace(/[+\-]/g, "")), this.noDecimal && e.includes(".")) {
+      const o = Number(e);
+      Number.isNaN(o) ? e = e.replace(/\./g, "") : e = String(Math.round(o));
+    }
+    return this.text = e, e === t;
+  }
+  /* ================== 生命周期 ================== */
+  willUpdate(t) {
+    t.has("value") && !this.isTyping && this.setText(this.formatter(this.value));
+  }
+  /* ================== 事件处理 ================== */
+  onInput(t) {
+    this.isTyping = !0;
+    const e = t.target.value;
+    this.setText(e) || (t.target.value = this.text);
+  }
+  onBlur() {
+    this.isTyping = !1, this.isFocused = !1;
+    const t = this.validateParsed(this.parser(this.text));
+    t !== void 0 ? (this.value = t, this.setText(this.formatter(t)), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: t }
+      })
+    )) : this.setText(this.formatter(this.value));
   }
-  render() {
-    return p`<div class=input-number-container><div class=input-prefix>${this.prefix}</div><div class=input-number><div class=input-number-input-wrapper><input .value=${this.formatDisplayValue(this.value)} ?disabled=${this.disabled} @blur=${this.handleInput} @change=${this.handleChange} @focus=${this.handleKeyDown} @input=${this.handleFocus} @keydown=${this.handleBlur} @wheel=${this.handleWheel} class=input-number-input></div>${this.controls ? p`<div class=controls><button ?disabled=${this.disabled} @click=${() => {
-      this.handleStepChange(1);
-    }} aria-label="Increase value"class="control-btn control-btn-up"type=button><svg height=12 viewBox="0 0 24 24"width=12><path d="M6 14.6l6-6.6 6 6.6"/></svg></button><button ?disabled=${this.disabled} @click=${() => {
-      this.handleStepChange(-1);
-    }} aria-label="Decrease value"class="control-btn control-btn-down"type=button><svg height=12 viewBox="0 0 24 24"width=12><path d="M18 9.4l-6 6.6-6-6.6"/></svg></button></div>` : ""}</div>${this.suffix ? p`<div class=input-suffix>${this.suffix}</div>` : ""}</div>`;
+  onFocus() {
+    this.isFocused = !0;
   }
-  formatDisplayValue(t) {
-    return t === null || isNaN(t) ? "" : t.toString().replace(".", this.decimalSeparator);
+  onWheel(t) {
+    if (this.disabled || !this.changeOnWheel || !this.isFocused) return;
+    t.preventDefault();
+    const e = t.deltaY < 0 ? 1 : -1;
+    this.handleStepChange(e);
   }
-  parseInputValue(t) {
-    if (!t) return null;
-    const e = t.replace(this.decimalSeparator, "."), o = parseFloat(e);
-    return isNaN(o) ? null : o;
+  onKeyDown(t) {
+    t.key === "Enter" && t.target.blur();
   }
+  /* ================== 提交逻辑 ================== */
+  // 限制值在 min/max 范围内
   clampValue(t) {
     let e = t;
     return this.min !== void 0 && (e = Math.max(e, this.min)), this.max !== void 0 && (e = Math.min(e, this.max)), e;
   }
+  // 步进按钮处理
   handleStepChange(t) {
     if (this.disabled) return;
-    const e = this.value ?? 0, o = this.clampValue(e + t * this.step);
-    o !== this.value && (this.value = o, this.dispatchEvent(
-      new CustomEvent("step", {
-        detail: o,
-        bubbles: !0,
-        composed: !0
-      })
-    ), this.dispatchEvent(
+    const e = this.validateParsed(this.parser(this.text));
+    if (e === void 0)
+      return;
+    this.value = e;
+    let o = this.clampValue(this.value + t * this.step);
+    const s = this.validateParsed(o);
+    s !== void 0 && (o = s, o !== this.value && (this.value = o, this.setText(this.formatter(o)), this.dispatchEvent(
       new CustomEvent("change", {
-        detail: o,
-        bubbles: !0,
-        composed: !0
+        detail: { value: o }
       })
-    ));
+    )));
+  }
+  connectedCallback() {
+    this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
+      this.style.transition = "";
+    });
+  }
+  /* ================== Render ================== */
+  render() {
+    return f`<div class=input-prefix>${this.prefix}</div><div class=input-number><div class=input-number-input-wrapper><input .value=${this.text} ?disabled=${this.disabled} @blur=${this.onInput} @focus=${this.onBlur} @input=${this.onFocus} @keydown=${this.onWheel} @wheel=${this.onKeyDown} class=input-number-input></div>${this.controls ? f`<div class=controls><button ?disabled=${this.disabled} @click=${() => this.handleStepChange(1)} aria-label="Increase value"class="control-btn control-btn-up"type=button><svg height=12 viewBox="0 0 24 24"width=12><path d="M6 14.6l6-6.6 6 6.6"/></svg></button><button ?disabled=${this.disabled} @click=${() => this.handleStepChange(-1)} aria-label="Decrease value"class="control-btn control-btn-down"type=button><svg height=12 viewBox="0 0 24 24"width=12><path d="M18 9.4l-6 6.6-6-6.6"/></svg></button></div>` : ""}</div>${this.suffix ? f`<div class=input-suffix>${this.suffix}</div>` : ""}`;
   }
 };
-m.styles = [q, dt];
-_([
+p.styles = [W, dt];
+m([
   h({ type: Number })
-], m.prototype, "value", 2);
-_([
-  h({ type: Boolean })
-], m.prototype, "controls", 2);
-_([
-  h({ type: Boolean })
-], m.prototype, "changeOnWheel", 2);
-_([
+], p.prototype, "value", 2);
+m([
+  h({ attribute: !1 })
+], p.prototype, "formatter", 2);
+m([
+  h({ attribute: !1 })
+], p.prototype, "parser", 2);
+m([
+  h({ type: String, reflect: !0 })
+], p.prototype, "prefix", 2);
+m([
+  h({ type: String, reflect: !0 })
+], p.prototype, "suffix", 2);
+m([
+  h({
+    type: Boolean,
+    converter: {
+      fromAttribute: (t) => t !== "false" && t !== null,
+      toAttribute: (t) => t ? "" : null
+    }
+  })
+], p.prototype, "controls", 2);
+m([
   h({ type: Number })
-], m.prototype, "min", 2);
-_([
+], p.prototype, "step", 2);
+m([
   h({ type: Number })
-], m.prototype, "max", 2);
-_([
+], p.prototype, "min", 2);
+m([
   h({ type: Number })
-], m.prototype, "step", 2);
-_([
-  h({ type: String })
-], m.prototype, "decimalSeparator", 2);
-_([
-  h({ type: String })
-], m.prototype, "prefix", 2);
-_([
-  h({ type: String })
-], m.prototype, "suffix", 2);
-_([
+], p.prototype, "max", 2);
+m([
+  h({
+    type: Boolean,
+    attribute: "change-on-wheel",
+    converter: {
+      fromAttribute: (t) => t !== "false" && t !== null,
+      toAttribute: (t) => t ? "" : null
+    }
+  })
+], p.prototype, "changeOnWheel", 2);
+m([
   h({ type: Boolean, reflect: !0 })
-], m.prototype, "disabled", 2);
-_([
-  y()
-], m.prototype, "isInputFocused", 2);
-m = _([
-  O("nf-input-number")
-], m);
+], p.prototype, "disabled", 2);
+m([
+  h({ type: Boolean, attribute: "no-decimal" })
+], p.prototype, "noDecimal", 2);
+m([
+  h({ type: Boolean, attribute: "no-zero" })
+], p.prototype, "noZero", 2);
+m([
+  h({ type: Boolean, attribute: "no-negative" })
+], p.prototype, "noNegative", 2);
+m([
+  w()
+], p.prototype, "text", 2);
+m([
+  w()
+], p.prototype, "isFocused", 2);
+p = m([
+  T("nf-input-number")
+], p);
 async function ft(t) {
   return new Promise((e) => setTimeout(e, t));
 }
-const bt = A`:host{min-width:5rem;-webkit-user-select:none;user-select:none;cursor:pointer}:host .text{flex-grow:1;display:inline-block;outline:0;white-space:nowrap}:host .icon{width:1.5rem;height:1.5rem;display:inline-block;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round;margin:0 -.3rem 0 .5rem}:host .dropdown{position:absolute;top:2rem;right:0;left:0;padding:.3rem;background:var(--nf-dropdown-background);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);border-radius:.5rem;opacity:0;pointer-events:none;color:var(--nf-color);box-shadow:0 0 1rem 0 var(--nf-dropdown-shadow);z-index:1000;transition:opacity var(--nf-transition) ease-out,transform var(--nf-transition) ease-out}:host .dropdown .item{white-space:nowrap;padding:.4rem .7rem;overflow:hidden;text-overflow:ellipsis;border-radius:.3rem;cursor:pointer}:host .dropdown .item-unselected:hover{background:var(--nf-item-background-hover);transition:background-color var(--nf-transition) ease-in-out}:host .dropdown .item-unselected:active{background:var(--nf-item-background-active)}:host .dropdown .item-selected{background-color:color-mix(in srgb,var(--nf-primary-color) 30%,transparent)}:host([disabled]){cursor:not-allowed}:host([disabled]) .text{color:var(--nf-color-disabled)}:host([disabled]) .icon{stroke:var(--nf-color-disabled)}:host([disabled]) .dropdown{display:none}:host(:focus:not([disabled])){color:var(--nf-focus-text-color)}:host(:focus:not([disabled])) .dropdown{transform:translateY(.5rem);opacity:1;pointer-events:auto}:host(:focus:not([disabled])) .cover{pointer-events:auto}`;
-var mt = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, K = (t, e, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? gt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+const bt = E`:host{width:var(--nf-width);-webkit-user-select:none;user-select:none;cursor:pointer}:host .text{flex-grow:1;display:inline-block;outline:0;white-space:nowrap}:host .icon{width:1.5rem;height:1.5rem;display:inline-block;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round;margin:0 -.3rem 0 .5rem}:host .dropdown{position:absolute;top:2rem;right:0;left:0;padding:.3rem;background:var(--nf-dropdown-background);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);border-radius:.5rem;opacity:0;pointer-events:none;color:var(--nf-color);box-shadow:0 0 1rem 0 var(--nf-dropdown-shadow);z-index:1000;transition:opacity var(--nf-transition) ease-out,transform var(--nf-transition) ease-out}:host .dropdown .item{white-space:nowrap;padding:.4rem .7rem;overflow:hidden;text-overflow:ellipsis;border-radius:.3rem;cursor:pointer}:host .dropdown .item-unselected:hover{background:var(--nf-item-background-hover);transition:background-color var(--nf-transition) ease-in-out}:host .dropdown .item-unselected:active{background:var(--nf-item-background-active)}:host .dropdown .item-selected{background-color:color-mix(in srgb,var(--nf-primary-color) 30%,transparent)}:host([disabled]){cursor:not-allowed}:host([disabled]) .text{color:var(--nf-color-disabled)}:host([disabled]) .icon{stroke:var(--nf-color-disabled)}:host([disabled]) .dropdown{display:none}:host(:focus:not([disabled])){color:var(--nf-focus-text-color)}:host(:focus:not([disabled])) .dropdown{transform:translateY(.5rem);opacity:1;pointer-events:auto}:host(:focus:not([disabled])) .cover{pointer-events:auto}`;
+var mt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, K = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? vt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
   return s && r && mt(e, o, r), r;
 };
@@ -1156,8 +1198,8 @@ let M = class extends R {
   }
   render() {
     const t = this.options.findIndex((o) => o.value == this.value), e = t > -1 ? this.options[t]?.label : this.value;
-    return p`<div class=dropdown>${(this.showDropdown ? this.options : []).map(
-      (o) => p`<div @click=${() => this.set(o.value)} class="${this.value == o.value ? "item-selected" : "item-unselected"} item">${o.label}</div>`
+    return f`<div class=dropdown>${(this.showDropdown ? this.options : []).map(
+      (o) => f`<div @click=${() => this.set(o.value)} class="${this.value == o.value ? "item-selected" : "item-unselected"} item">${o.label}</div>`
     )}</div><slot></slot><div class=text>${e}</div><svg class=icon height=24 viewBox="0 0 24 24"width=24><path d="M17 10l-5 5.5-5-5.5"/></svg>`;
   }
   connectedCallback() {
@@ -1169,7 +1211,7 @@ let M = class extends R {
     super.disconnectedCallback(), this.removeEventListener("focus", this.onFocus), this.removeEventListener("blur", this.onBlur), this.removeEventListener("click", this.onClick);
   }
 };
-M.styles = [q, bt];
+M.styles = [W, bt];
 K([
   h({ type: String })
 ], M.prototype, "value", 2);
@@ -1193,18 +1235,18 @@ K([
   h({ type: Boolean, reflect: !0 })
 ], M.prototype, "disabled", 2);
 K([
-  y()
+  w()
 ], M.prototype, "showDropdown", 2);
 M = K([
-  O("nf-select")
+  T("nf-select")
 ], M);
-const vt = A`:host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0}:host[disabled]{cursor:not-allowed;opacity:.6}.switch-wrapper{position:relative;display:inline-block}.switch-container{position:relative;z-index:1;width:3.1rem;height:1.5rem;background-color:var(--nf-background-color);border-radius:.75rem;transition:background-color .2s ease;overflow:hidden}:host(:not([disabled]):not([checked])) .switch-container:hover{background:var(--nf-background-color-hover)}:host([checked]) .switch-container{background-color:var(--nf-primary-color,var(--primary-color))}:host([disabled]) .switch-container{opacity:.5}.ripple{position:absolute;border-radius:.875rem;inset:-.2rem;background-color:#6464641a;animation:ripple-animation 1s ease-out forwards;pointer-events:none;opacity:1}@keyframes ripple-animation{0%{opacity:0}20%{opacity:1}to{opacity:0}}.switch-thumb{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;transition:transform .2s ease-in-out}.switch-thumb:before{content:\"\";position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;background-color:#fff;border-radius:.625rem;box-shadow:0 .125rem .25rem #0003;transition:width .2s ease-in-out,transform .2s ease-in-out}:host(:not([checked])) .switch-thumb{transform:translate(.125rem)}:host(:not([checked])) .switch-container:active .switch-thumb:before{width:1.625rem;border-radius:.625rem}:host([checked]) .switch-thumb{transform:translate(1.725rem)}:host([checked]) .switch-container:active .switch-thumb:before{width:1.625rem;border-radius:.625rem;transform:translate(-.375rem)}:host(:focus) .switch-container{outline:.125rem solid var(--nf-primary-color,var(--primary-color));outline-offset:.125rem}`;
-var _t = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, he = (t, e, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? wt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+const gt = E`:host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0}:host[disabled]{cursor:not-allowed;opacity:.6}.switch-wrapper{position:relative;display:inline-block}.switch-container{position:relative;z-index:1;width:3.1rem;height:1.5rem;background-color:var(--nf-background-color);border-radius:.75rem;transition:background-color .2s ease;overflow:hidden}:host(:not([disabled]):not([checked])) .switch-container:hover{background:var(--nf-background-color-hover)}:host([checked]) .switch-container{background-color:var(--nf-primary-color,var(--nf-primary-color))}:host([disabled]) .switch-container{opacity:.5}.ripple{position:absolute;border-radius:.875rem;inset:-.2rem;background-color:#6464641a;animation:ripple-animation 1s ease-out forwards;pointer-events:none;opacity:1}@keyframes ripple-animation{0%{opacity:0}20%{opacity:1}to{opacity:0}}.switch-thumb{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;transition:transform .2s ease-in-out}.switch-thumb:before{content:\"\";position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;background-color:#fff;border-radius:.625rem;box-shadow:0 .125rem .25rem #0003;transition:width .2s ease-in-out,transform .2s ease-in-out}:host(:not([checked])) .switch-thumb{transform:translate(.125rem)}:host(:not([checked])) .switch-container:active .switch-thumb:before{width:1.625rem;border-radius:.625rem}:host([checked]) .switch-thumb{transform:translate(1.725rem)}:host([checked]) .switch-container:active .switch-thumb:before{width:1.625rem;border-radius:.625rem;transform:translate(-.375rem)}:host(:focus) .switch-container{outline:.125rem solid var(--nf-primary-color,var(--nf-primary-color));outline-offset:.125rem}`;
+var _t = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, he = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? yt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
   return s && r && _t(e, o, r), r;
 };
-let j = class extends T {
+let I = class extends V {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.rippleElement = null;
   }
@@ -1232,19 +1274,24 @@ let j = class extends T {
   render() {
     return oe`<div class=switch-wrapper><div class=switch-container @click=${this.toggleSwitch} aria-checked=${this.checked} aria-disabled=${this.disabled} role=switch><div class=switch-thumb></div></div></div>`;
   }
+  connectedCallback() {
+    this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
+      this.style.transition = "";
+    });
+  }
 };
-j.styles = [vt];
+I.styles = [gt];
 he([
   h({ type: Boolean, reflect: !0 })
-], j.prototype, "checked", 2);
+], I.prototype, "checked", 2);
 he([
   h({ type: Boolean, reflect: !0 })
-], j.prototype, "disabled", 2);
-j = he([
-  O("nf-switch")
-], j);
-const yt = A`:host{display:inline-flex;align-items:center;position:relative;min-width:10rem;width:var(--nf-width,100%);height:1.25rem;background-color:var(--nf-border-color,#e0e0e0);border-radius:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;box-shadow:none;padding:0}:host:hover{background-color:var(--nf-border-color,#e0e0e0);border:none}:host:focus{box-shadow:none;outline:0}:host([disabled]){cursor:not-allowed;opacity:.6}.slider-fill{position:absolute;left:0;top:0;height:100%;background-color:var(--nf-primary-color,#5e72f9);border-radius:.625rem 0 0 .625rem;pointer-events:none}.slider-handle{position:absolute;width:1.25rem;height:1.25rem;background-color:#fff;border-radius:50%;top:50%;transform:translate(-50%,-50%);cursor:grab;outline:0;box-shadow:0 1px 3px #0000004d;transition:transform .15s ease,box-shadow .15s ease;z-index:1}:host([disabled]) .slider-handle{cursor:not-allowed}:host(:not([disabled])) .slider-handle:hover{transform:translate(-50%,-50%) scale(1.05)}:host(:not([disabled])) .slider-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 3px 8px #0006}.slider-handle:focus{box-shadow:0 0 0 3px #5e72f94d}.slider-tooltip{position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);background-color:var(--nf-slider-tooltip-background);color:var(--nf-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none;box-shadow:0 0 .4rem .1rem #0000001a}.slider-tooltip.visible{opacity:1}`;
-var $t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, w = (t, e, o, s) => {
+], I.prototype, "disabled", 2);
+I = he([
+  T("nf-switch")
+], I);
+const wt = E`:host{display:inline-flex;align-items:center;position:relative;width:100%;height:1.25rem;background-color:var(--nf-border-color,#e0e0e0);border-radius:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;box-shadow:none;padding:0}:host:hover{background-color:var(--nf-border-color,#e0e0e0);border:none}:host:focus{box-shadow:none;outline:0}:host([disabled]){cursor:not-allowed;opacity:.6}.slider-fill{position:absolute;left:0;top:0;height:100%;background-color:var(--nf-primary-color,#5e72f9);border-radius:.625rem 0 0 .625rem;pointer-events:none}.slider-handle{position:absolute;width:1.25rem;height:1.25rem;background-color:#fff;border-radius:50%;top:50%;transform:translate(-50%,-50%);cursor:grab;outline:0;box-shadow:0 1px 3px #0000004d;transition:transform .15s ease,box-shadow .15s ease;z-index:1}:host([disabled]) .slider-handle{cursor:not-allowed}:host(:not([disabled])) .slider-handle:hover{transform:translate(-50%,-50%) scale(1.05)}:host(:not([disabled])) .slider-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 3px 8px #0006}.slider-handle:focus{box-shadow:0 0 0 3px #5e72f94d}.slider-tooltip{position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);background-color:var(--nf-slider-tooltip-background);color:var(--nf-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none;box-shadow:0 0 .4rem .1rem #0000001a}.slider-tooltip.visible{opacity:1}`;
+var $t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, y = (t, e, o, s) => {
   for (var r = s > 1 ? void 0 : s ? xt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
   return s && r && $t(e, o, r), r;
@@ -1268,7 +1315,9 @@ let g = class extends R {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this._currentValue = this.value || this.defaultValue, this.addEventListener("mousedown", this._handleHostMouseDown), this.addEventListener("touchstart", this._handleHostTouchStart);
+    this.style.transition = "none", super.connectedCallback(), this._currentValue = this.value || this.defaultValue, this.addEventListener("mousedown", this._handleHostMouseDown), this.addEventListener("touchstart", this._handleHostTouchStart), requestAnimationFrame(() => {
+      this.style.transition = "";
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("mousedown", this._handleHostMouseDown), this.removeEventListener("touchstart", this._handleHostTouchStart), document.removeEventListener("mousemove", this._handleDrag), document.removeEventListener("touchmove", this._handleDrag), document.removeEventListener("mouseup", this._stopDrag), document.removeEventListener("touchend", this._stopDrag);
@@ -1327,52 +1376,52 @@ let g = class extends R {
   }
   render() {
     const t = this._getValuePercentage(), e = `${t}%`, o = `${t}%`, s = `slider-tooltip ${this._showTooltip || this.tooltip ? "visible" : ""}`;
-    return p`<div class=slider-fill style=${J({ width: o })}></div><div class=slider-handle style=${J({ left: e })} @keydown=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} tabindex=${this._handleKeyDown}><div class=${s}>${this._currentValue}</div></div>`;
+    return f`<div class=slider-fill style=${J({ width: o })}></div><div class=slider-handle style=${J({ left: e })} @keydown=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} tabindex=${this._handleKeyDown}><div class=${s}>${this._currentValue}</div></div>`;
   }
 };
-g.styles = [q, yt];
-w([
+g.styles = [W, wt];
+y([
   h({ type: Number })
 ], g.prototype, "value", 2);
-w([
+y([
   h({ type: Number })
 ], g.prototype, "defaultValue", 2);
-w([
+y([
   h({ type: Number })
 ], g.prototype, "min", 2);
-w([
+y([
   h({ type: Number })
 ], g.prototype, "max", 2);
-w([
+y([
   h({ type: Number })
 ], g.prototype, "step", 2);
-w([
+y([
   h({ type: Boolean, reflect: !0 })
 ], g.prototype, "disabled", 2);
-w([
+y([
   h({ type: Boolean })
 ], g.prototype, "range", 2);
-w([
+y([
   h({ type: Boolean })
 ], g.prototype, "tooltip", 2);
-w([
-  y()
+y([
+  w()
 ], g.prototype, "_currentValue", 2);
-w([
-  y()
+y([
+  w()
 ], g.prototype, "_isDragging", 2);
-w([
-  y()
+y([
+  w()
 ], g.prototype, "_showTooltip", 2);
-g = w([
-  O("nf-slider")
+g = y([
+  T("nf-slider")
 ], g);
 export {
   z as NfCheckboxElement,
-  b as NfColorPickerElement,
+  v as NfColorPickerElement,
   x as NfInputElement,
-  m as NfInputNumberElement,
+  p as NfInputNumberElement,
   M as NfSelectElement,
   g as NfSliderElement,
-  j as NfSwitchElement
+  I as NfSwitchElement
 };