next-flow-design 1.5.13 → 1.6.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { css as E, LitElement as R, html as f } from "lit";
-const Y = globalThis, re = Y.ShadowRoot && (Y.ShadyCSS === void 0 || Y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, we = /* @__PURE__ */ Symbol(), ce = /* @__PURE__ */ new WeakMap();
+const Y = globalThis, oe = Y.ShadowRoot && (Y.ShadyCSS === void 0 || Y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, we = /* @__PURE__ */ Symbol(), he = /* @__PURE__ */ new WeakMap();
 let Se = class {
   constructor(e, o, r) {
     if (this._$cssResult$ = !0, r !== we) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -8,9 +8,9 @@ let Se = class {
   get styleSheet() {
     let e = this.o;
     const o = this.t;
-    if (re && e === void 0) {
+    if (oe && e === void 0) {
       const r = o !== void 0 && o.length === 1;
-      r && (e = ce.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && ce.set(o, e));
+      r && (e = he.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && he.set(o, e));
     }
     return e;
   }
@@ -19,17 +19,17 @@ let Se = class {
   }
 };
 const Ce = (t) => new Se(typeof t == "string" ? t : t + "", void 0, we), Pe = (t, e) => {
-  if (re) t.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
+  if (oe) t.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
   else for (const o of e) {
     const r = document.createElement("style"), s = Y.litNonce;
     s !== void 0 && r.setAttribute("nonce", s), r.textContent = o.cssText, t.appendChild(r);
   }
-}, de = re ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
+}, ce = oe ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
   let o = "";
   for (const r of e.cssRules) o += r.cssText;
   return Ce(o);
 })(t) : t;
-const { is: Me, defineProperty: De, 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) {
+const { is: Me, defineProperty: De, getOwnPropertyDescriptor: Te, getOwnPropertyNames: Oe, getOwnPropertySymbols: Be, getPrototypeOf: Ve } = Object, J = globalThis, de = J.trustedTypes, He = de ? de.emptyScript : "", Ne = J.reactiveElementPolyfillSupport, U = (t, e) => t, X = { toAttribute(t, e) {
   switch (e) {
     case Boolean:
       t = t ? He : null;
@@ -57,8 +57,8 @@ const { is: Me, defineProperty: De, getOwnPropertyDescriptor: Te, getOwnProperty
       }
   }
   return o;
-} }, se = (t, e) => !Me(t, e), pe = { attribute: !0, type: String, converter: X, reflect: !1, useDefault: !1, hasChanged: se };
-Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Q.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+} }, re = (t, e) => !Me(t, e), ue = { attribute: !0, type: String, converter: X, reflect: !1, useDefault: !1, hasChanged: re };
+Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), J.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let B = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ??= []).push(e);
@@ -66,7 +66,7 @@ let B = class extends HTMLElement {
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e, o = pe) {
+  static createProperty(e, o = ue) {
     if (o.state && (o.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((o = Object.create(o)).wrapped = !0), this.elementProperties.set(e, o), !o.noAccessor) {
       const r = /* @__PURE__ */ Symbol(), s = this.getPropertyDescriptor(e, r, o);
       s !== void 0 && De(this.prototype, e, s);
@@ -84,7 +84,7 @@ let B = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? pe;
+    return this.elementProperties.get(e) ?? ue;
   }
   static _$Ei() {
     if (this.hasOwnProperty(U("elementProperties"))) return;
@@ -113,8 +113,8 @@ let B = class extends HTMLElement {
     const o = [];
     if (Array.isArray(e)) {
       const r = new Set(e.flat(1 / 0).reverse());
-      for (const s of r) o.unshift(de(s));
-    } else e !== void 0 && o.push(de(e));
+      for (const s of r) o.unshift(ce(s));
+    } else e !== void 0 && o.push(ce(e));
     return o;
   }
   static _$Eu(e, o) {
@@ -172,7 +172,7 @@ let B = class extends HTMLElement {
   requestUpdate(e, o, r, s = !1, i) {
     if (e !== void 0) {
       const n = this.constructor;
-      if (s === !1 && (i = this[e]), r ??= n.getPropertyOptions(e), !((r.hasChanged ?? se)(i, o) || r.useDefault && r.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(n._$Eu(e, r)))) return;
+      if (s === !1 && (i = this[e]), r ??= n.getPropertyOptions(e), !((r.hasChanged ?? re)(i, o) || r.useDefault && r.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(n._$Eu(e, r)))) return;
       this.C(e, o, r);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -240,8 +240,8 @@ let B = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-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: se }, Fe = (t = Ue, e, o) => {
+B.elementStyles = [], B.shadowRootOptions = { mode: "open" }, B[U("elementProperties")] = /* @__PURE__ */ new Map(), B[U("finalized")] = /* @__PURE__ */ new Map(), Ne?.({ ReactiveElement: B }), (J.reactiveElementVersions ??= []).push("2.1.2");
+const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged: re }, Fe = (t = Ue, e, o) => {
   const { kind: r, metadata: s } = o;
   let i = globalThis.litPropertyMetadata.get(s);
   if (i === void 0 && globalThis.litPropertyMetadata.set(s, i = /* @__PURE__ */ new Map()), r === "setter" && ((t = Object.create(t)).wrapped = !0), i.set(o.name, t), r === "accessor") {
@@ -271,12 +271,12 @@ function h(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$", A = `lit$${Math.random().toFixed(9).slice(2)}$`, xe = "?" + A, Le = `<${xe}>`, P = document, F = () => P.createComment(""), L = (t) => t === null || typeof t != "object" && typeof t != "function", ne = Array.isArray, ze = (t) => ne(t) || typeof t?.[Symbol.iterator] == "function", te = `[ 	
-\f\r]`, N = /<(?:(!--|\/[^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, je = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), oe = je(1), M = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), ye = /* @__PURE__ */ new WeakMap(), C = P.createTreeWalker(P, 129);
+const se = globalThis, pe = (t) => t, G = se.trustedTypes, fe = G ? G.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, $e = "$lit$", A = `lit$${Math.random().toFixed(9).slice(2)}$`, xe = "?" + A, Le = `<${xe}>`, P = document, F = () => P.createComment(""), L = (t) => t === null || typeof t != "object" && typeof t != "function", ie = Array.isArray, ze = (t) => ie(t) || typeof t?.[Symbol.iterator] == "function", ee = `[ 	
+\f\r]`, N = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, be = /-->/g, me = />/g, S = RegExp(`>|${ee}(?:([^\\s"'>=/]+)(${ee}*=${ee}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ge = /'/g, ve = /"/g, ke = /^(?:script|style|textarea|title)$/i, je = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), te = je(1), M = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), _e = /* @__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;
+  if (!ie(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return fe !== void 0 ? fe.createHTML(e) : e;
 }
 const Ie = (t, e) => {
   const o = t.length - 1, r = [];
@@ -284,7 +284,7 @@ const Ie = (t, e) => {
   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 === N ? u[1] === "!--" ? n = me : u[1] !== void 0 ? n = ge : u[2] !== void 0 ? (ke.test(u[2]) && (s = RegExp("</" + u[2], "g")), n = S) : u[3] !== void 0 && (n = S) : n === S ? u[0] === ">" ? (n = s ?? 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 : ve) : n === _e || n === ve ? n = S : n === me || n === ge ? n = N : (n = S, s = void 0);
+    for (; $ < a.length && (n.lastIndex = $, u = n.exec(a), u !== null); ) $ = n.lastIndex, n === N ? u[1] === "!--" ? n = be : u[1] !== void 0 ? n = me : u[2] !== void 0 ? (ke.test(u[2]) && (s = RegExp("</" + u[2], "g")), n = S) : u[3] !== void 0 && (n = S) : n === S ? u[0] === ">" ? (n = s ?? 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] === '"' ? ve : ge) : n === ve || n === ge ? n = S : n === be || n === me ? n = N : (n = S, s = void 0);
     const k = n === S && t[l + 1].startsWith("/>") ? " " : "";
     i += n === N ? a + Le : d >= 0 ? (r.push(c), a.slice(0, d) + $e + a.slice(d) + A + k) : a + A + (d === -2 ? l : k);
   }
@@ -304,7 +304,7 @@ class z {
       if (s.nodeType === 1) {
         if (s.hasAttributes()) for (const d of s.getAttributeNames()) if (d.endsWith($e)) {
           const $ = u[n++], k = s.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 }), s.removeAttribute(d);
+          a.push({ type: 1, index: i, name: Z[2], strings: k, ctor: Z[1] === "." ? qe : Z[1] === "?" ? We : Z[1] === "@" ? Ke : Q }), s.removeAttribute(d);
         } else d.startsWith(A) && (a.push({ type: 6, index: i }), s.removeAttribute(d));
         if (ke.test(s.tagName)) {
           const d = s.textContent.split(A), $ = d.length - 1;
@@ -400,11 +400,11 @@ class q {
     }
   }
   _$AC(e) {
-    let o = ye.get(e.strings);
-    return o === void 0 && ye.set(e.strings, o = new z(e)), o;
+    let o = _e.get(e.strings);
+    return o === void 0 && _e.set(e.strings, o = new z(e)), o;
   }
   k(e) {
-    ne(this._$AH) || (this._$AH = [], this._$AR());
+    ie(this._$AH) || (this._$AH = [], this._$AR());
     const o = this._$AH;
     let r, s = 0;
     for (const i of e) s === o.length ? o.push(r = new q(this.O(F()), this.O(F()), this, this.options)) : r = o[s], r._$AI(i), s++;
@@ -412,15 +412,15 @@ class q {
   }
   _$AR(e = this._$AA.nextSibling, o) {
     for (this._$AP?.(!1, !0, o); e !== this._$AB; ) {
-      const r = fe(e).nextSibling;
-      fe(e).remove(), e = r;
+      const r = pe(e).nextSibling;
+      pe(e).remove(), e = r;
     }
   }
   setConnected(e) {
     this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
   }
 }
-class ee {
+class Q {
   get tagName() {
     return this.element.tagName;
   }
@@ -445,7 +445,7 @@ class ee {
     e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class qe extends ee {
+class qe extends Q {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -453,7 +453,7 @@ class qe extends ee {
     this.element[this.name] = e === b ? void 0 : e;
   }
 }
-class We extends ee {
+class We extends Q {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -461,7 +461,7 @@ class We extends ee {
     this.element.toggleAttribute(this.name, !!e && e !== b);
   }
 }
-class Ke extends ee {
+class Ke extends Q {
   constructor(e, o, r, s, i) {
     super(e, o, r, s, i), this.type = 5;
   }
@@ -485,8 +485,8 @@ class Ze {
     H(this, e);
   }
 }
-const Ye = ie.litHtmlPolyfillSupport;
-Ye?.(z, q), (ie.litHtmlVersions ??= []).push("3.3.2");
+const Ye = se.litHtmlPolyfillSupport;
+Ye?.(z, q), (se.litHtmlVersions ??= []).push("3.3.2");
 const Xe = (t, e, o) => {
   const r = o?.renderBefore ?? e;
   let s = r._$litPart$;
@@ -496,7 +496,7 @@ const Xe = (t, e, o) => {
   }
   return s._$AI(t), s;
 };
-const ae = globalThis;
+const ne = globalThis;
 let V = class extends B {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
@@ -519,12 +519,12 @@ let V = class extends B {
     return M;
   }
 };
-V._$litElement$ = !0, V.finalized = !0, ae.litElementHydrateSupport?.({ LitElement: V });
-const Ge = ae.litElementPolyfillSupport;
+V._$litElement$ = !0, V.finalized = !0, ne.litElementHydrateSupport?.({ LitElement: V });
+const Ge = ne.litElementPolyfillSupport;
 Ge?.({ LitElement: V });
-(ae.litElementVersions ??= []).push("4.2.2");
+(ne.litElementVersions ??= []).push("4.2.2");
 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}`, T = (t) => (e) => (typeof window > "u" || customElements.get(t) || customElements.define(t, e), e);
-var Qe = Object.defineProperty, et = Object.getOwnPropertyDescriptor, le = (t, e, o, r) => {
+var Qe = Object.defineProperty, et = Object.getOwnPropertyDescriptor, ae = (t, e, o, r) => {
   for (var s = r > 1 ? void 0 : r ? et(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
   return r && s && Qe(e, o, s), s;
@@ -545,7 +545,7 @@ let j = class extends V {
   }
   // 渲染复选框组件
   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 viewBox="64 64 896 896"focusable=false data-icon=check width=0.625rem height=0.625rem fill=currentColor aria-hidden=true><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>`;
+    return te`<div class=checkbox-container @click=${this.toggleCheckbox} aria-checked=${this.checked} aria-disabled=${this.disabled} role=checkbox><div class=checkbox-box>${this.checked ? te`<div class=checkbox-icon><svg viewBox="64 64 896 896"focusable=false data-icon=check width=0.625rem height=0.625rem fill=currentColor aria-hidden=true><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(() => {
@@ -554,61 +554,20 @@ let j = class extends V {
   }
 };
 j.styles = [Je];
-le([
+ae([
   h({ type: Boolean, reflect: !0 })
 ], j.prototype, "checked", 2);
-le([
+ae([
   h({ type: Boolean, reflect: !0 })
 ], j.prototype, "disabled", 2);
-j = le([
+j = ae([
   T("nf-checkbox")
 ], j);
-const tt = { ATTRIBUTE: 1 }, ot = (t) => (...e) => ({ _$litDirective$: t, values: e });
-let rt = class {
-  constructor(e) {
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(e, o, r) {
-    this._$Ct = e, this._$AM = o, this._$Ci = r;
-  }
-  _$AS(e, o) {
-    return this.update(e, o);
-  }
-  update(e, o) {
-    return this.render(...o);
-  }
-};
-const Ee = "important", st = " !" + Ee, J = ot(class extends rt {
-  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.");
-  }
-  render(t) {
-    return Object.keys(t).reduce((e, o) => {
-      const r = t[o];
-      return r == null ? e : e + `${o = o.includes("-") ? o : o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
-    }, "");
-  }
-  update(t, [e]) {
-    const { style: o } = t.element;
-    if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
-    for (const r of this.ft) e[r] == null && (this.ft.delete(r), r.includes("-") ? o.removeProperty(r) : o[r] = null);
-    for (const r in e) {
-      const s = e[r];
-      if (s != null) {
-        this.ft.add(r);
-        const i = typeof s == "string" && s.endsWith(st);
-        r.includes("-") || i ? o.setProperty(r, i ? s.slice(0, -11) : s, i ? Ee : "") : o[r] = s;
-      }
-    }
-    return M;
-  }
-}), 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, r) => {
-  for (var s = r > 1 ? void 0 : r ? at(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+const 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)}`, tt = E`:host{display:inline-block;position:relative;width:calc(.9rem + (var(--nf-height) - 1.25rem)/ 2 + 7ch)}:host(:not([disabled-alpha])){width:calc(.9rem + (var(--nf-height) - 1.25rem)/ 2 + 9ch)}: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;text-align:center;text-transform:uppercase}.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 ot = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, _ = (t, e, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? rt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
-  return r && s && nt(e, o, s), s;
+  return r && s && ot(e, o, s), s;
 };
 let g = class extends R {
   constructor() {
@@ -764,9 +723,7 @@ let g = class extends R {
       <div class="color-selector">
         <div
           class="color-sb"
-          style=${J({
-      "background-color": t
-    })}
+          style="background-color: ${t};"
           @mousedown="${this._handleSBMouseDown}"
           @touchstart="${this._handleSBTouchMove}"
           @touchmove="${this._handleSBTouchMove}"
@@ -775,10 +732,7 @@ let g = class extends R {
           <div class="sb-black"></div>
           <div
             class="selector"
-            style=${J({
-      left: `${e}%`,
-      top: `${o}%`
-    })}
+            style="left: ${e}%; top: ${o}%;"
           ></div>
         </div>
       </div>
@@ -862,7 +816,7 @@ let g = class extends R {
     `;
   }
 };
-g.styles = [W, it];
+g.styles = [W, tt];
 _([
   h({ type: String })
 ], g.prototype, "value", 2);
@@ -915,11 +869,11 @@ _([
 g = _([
   T("nf-color-picker")
 ], g);
-const lt = E`:host{width:var(--nf-width);position:relative;display:inline-block;--nf-input-padding:0 .75rem}: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, r) => {
-  for (var s = r > 1 ? void 0 : r ? ct(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+const st = E`:host{width:var(--nf-width);position:relative;display:inline-block;--nf-input-padding:0 .75rem}: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 it = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, O = (t, e, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? nt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
-  return r && s && ht(e, o, s), s;
+  return r && s && it(e, o, s), s;
 };
 let x = class extends R {
   constructor() {
@@ -981,7 +935,7 @@ let x = class extends R {
     });
   }
 };
-x.styles = [W, lt];
+x.styles = [W, st];
 O([
   h({ type: String })
 ], x.prototype, "value", 2);
@@ -1003,11 +957,11 @@ O([
 x = O([
   T("nf-input")
 ], x);
-const dt = E`:host{width:10rem;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0;overflow:hidden;--nf-input-number-color:var(--nf-color);--nf-input-number-prefix-color:color-mix(in srgb, var(--nf-color), transparent 20%);--nf-input-number-surfix-color:color-mix(in srgb, var(--nf-color), transparent 20%)}.input-number{position:relative;padding-right:.6125rem;flex:1;height:100%;outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-input-number-color);font-weight:var(--nf-font-weight);text-align:left;transition:padding-right var(--nf-transition-fast) ease}.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-input-number-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}:host([controls]) .input-number:hover{padding-right:1.5rem}:host([controls]) .input-number:hover .controls{width:1.5rem}:host([center]) .input-number{padding-left:1.5rem!important;padding-right:1.5rem!important}:host([center]) .input-number .input-number-input{text-align:center}:host([center]) .input-number:hover{padding-left:1.5rem!important;padding-right:1.5rem!important}:host([center]) .input-prefix{position:absolute;left:0;top:0;bottom:0;z-index:1;pointer-events:none}:host([center]) .input-suffix{position:absolute;right:0;top:0;bottom:0;z-index:1;pointer-events:none}:host([center]) .input-number{flex:1;width:100%}.input-prefix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-inline-start:.6125rem;color:var(--nf-input-number-prefix-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-input-number-surfix-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, r) => {
-  for (var s = r > 1 ? void 0 : r ? pt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+const at = E`:host{width:10rem;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0;overflow:hidden;--nf-input-number-color:var(--nf-color);--nf-input-number-prefix-color:color-mix(in srgb, var(--nf-color), transparent 20%);--nf-input-number-surfix-color:color-mix(in srgb, var(--nf-color), transparent 20%)}.input-number{position:relative;padding-right:.6125rem;flex:1;height:100%;outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-input-number-color);font-weight:var(--nf-font-weight);text-align:left;transition:padding-right var(--nf-transition-fast) ease}.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-input-number-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}:host([controls]) .input-number:hover{padding-right:1.5rem}:host([controls]) .input-number:hover .controls{width:1.5rem}:host([center]) .input-number{padding-left:1.5rem!important;padding-right:1.5rem!important}:host([center]) .input-number .input-number-input{text-align:center}:host([center]) .input-number:hover{padding-left:1.5rem!important;padding-right:1.5rem!important}:host([center]) .input-prefix{position:absolute;left:0;top:0;bottom:0;z-index:1;pointer-events:none}:host([center]) .input-suffix{position:absolute;right:0;top:0;bottom:0;z-index:1;pointer-events:none}:host([center]) .input-number{flex:1;width:100%}.input-prefix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-inline-start:.6125rem;color:var(--nf-input-number-prefix-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-input-number-surfix-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 lt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, m = (t, e, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? ht(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
-  return r && s && ut(e, o, s), s;
+  return r && s && lt(e, o, s), s;
 };
 let p = class extends R {
   constructor() {
@@ -1114,7 +1068,7 @@ let p = class extends R {
     return f`<div class=input-prefix>${this.prefix}</div><div class=input-number><div class=input-number-input-wrapper><input inputmode=decimal class=input-number-input .value=${this.text} ?disabled=${this.disabled} @blur=${this.onBlur} @focus=${this.onFocus} @input=${this.onInput} @keydown=${this.onKeyDown} @wheel=${this.onWheel} @keyup=${this.onKeyUp}></div>${this.controls ? f`<div class=controls><button class="control-btn control-btn-up"type=button ?disabled=${this.disabled} @click=${() => this.handleStepChange(1)} aria-label="Increase value"><svg width=12 height=12 viewBox="0 0 24 24"><path d="M6 14.6l6-6.6 6 6.6"/></svg></button><button class="control-btn control-btn-down"type=button ?disabled=${this.disabled} @click=${() => this.handleStepChange(-1)} aria-label="Decrease value"><svg width=12 height=12 viewBox="0 0 24 24"><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>` : ""}`;
   }
 };
-p.styles = [W, dt];
+p.styles = [W, at];
 m([
   h({ type: Number })
 ], p.prototype, "value", 2);
@@ -1183,14 +1137,14 @@ m([
 p = m([
   T("nf-input-number")
 ], p);
-async function ft(t) {
+async function ct(t) {
   return new Promise((e) => setTimeout(e, t));
 }
-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, gt = Object.getOwnPropertyDescriptor, K = (t, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? gt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+const dt = 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 ut = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, K = (t, e, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? pt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
-  return r && s && mt(e, o, s), s;
+  return r && s && ut(e, o, s), s;
 };
 let D = class extends R {
   constructor() {
@@ -1211,7 +1165,7 @@ let D = class extends R {
     };
   }
   async set(t) {
-    this.dispatchEvent(new CustomEvent("input", { detail: t, bubbles: !0, composed: !0 })), this.value !== t && this.dispatchEvent(new CustomEvent("change", { detail: t, bubbles: !0, composed: !0 })), await ft(34), this.blur();
+    this.dispatchEvent(new CustomEvent("input", { detail: t, bubbles: !0, composed: !0 })), this.value !== t && this.dispatchEvent(new CustomEvent("change", { detail: t, bubbles: !0, composed: !0 })), await ct(34), this.blur();
   }
   render() {
     const t = this.options.findIndex((o) => o.value == this.value), e = t > -1 ? this.options[t]?.label : this.value;
@@ -1228,7 +1182,7 @@ let D = class extends R {
     super.disconnectedCallback(), this.removeEventListener("focus", this.onFocus), this.removeEventListener("blur", this.onBlur), this.removeEventListener("click", this.onClick);
   }
 };
-D.styles = [W, bt];
+D.styles = [W, dt];
 K([
   h({ type: String })
 ], D.prototype, "value", 2);
@@ -1257,11 +1211,11 @@ K([
 D = K([
   T("nf-select")
 ], D);
-const vt = E`:host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0;--nf-switch-padding:.1rem}: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, r) => {
-  for (var s = r > 1 ? void 0 : r ? yt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+const ft = E`:host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0;--nf-switch-padding:.1rem}: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 bt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, le = (t, e, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? mt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
-  return r && s && _t(e, o, s), s;
+  return r && s && bt(e, o, s), s;
 };
 let I = class extends V {
   constructor() {
@@ -1289,7 +1243,7 @@ let I = class extends V {
   }
   // 渲染开关组件
   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>`;
+    return te`<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(() => {
@@ -1297,17 +1251,58 @@ let I = class extends V {
     });
   }
 };
-I.styles = [vt];
-he([
+I.styles = [ft];
+le([
   h({ type: Boolean, reflect: !0 })
 ], I.prototype, "checked", 2);
-he([
+le([
   h({ type: Boolean, reflect: !0 })
 ], I.prototype, "disabled", 2);
-I = he([
+I = le([
   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}`;
+const gt = { ATTRIBUTE: 1 }, vt = (t) => (...e) => ({ _$litDirective$: t, values: e });
+let _t = class {
+  constructor(e) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(e, o, r) {
+    this._$Ct = e, this._$AM = o, this._$Ci = r;
+  }
+  _$AS(e, o) {
+    return this.update(e, o);
+  }
+  update(e, o) {
+    return this.render(...o);
+  }
+};
+const Ee = "important", yt = " !" + Ee, ye = vt(class extends _t {
+  constructor(t) {
+    if (super(t), t.type !== gt.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.");
+  }
+  render(t) {
+    return Object.keys(t).reduce((e, o) => {
+      const r = t[o];
+      return r == null ? e : e + `${o = o.includes("-") ? o : o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
+    }, "");
+  }
+  update(t, [e]) {
+    const { style: o } = t.element;
+    if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
+    for (const r of this.ft) e[r] == null && (this.ft.delete(r), r.includes("-") ? o.removeProperty(r) : o[r] = null);
+    for (const r in e) {
+      const s = e[r];
+      if (s != null) {
+        this.ft.add(r);
+        const i = typeof s == "string" && s.endsWith(yt);
+        r.includes("-") || i ? o.setProperty(r, i ? s.slice(0, -11) : s, i ? Ee : "") : o[r] = s;
+      }
+    }
+    return M;
+  }
+}), 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, r) => {
   for (var s = r > 1 ? void 0 : r ? xt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
@@ -1393,7 +1388,7 @@ let v = class extends R {
   }
   render() {
     const t = this._getValuePercentage(), e = `${t}%`, o = `${t}%`, r = `slider-tooltip ${this._showTooltip || this.tooltip ? "visible" : ""}`;
-    return f`<div class=slider-fill style=${J({ width: o })}></div><div class=slider-handle style=${J({ left: e })} tabindex=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} @keydown=${this._handleKeyDown}><div class=${r}>${this._currentValue}</div></div>`;
+    return f`<div class=slider-fill style=${ye({ width: o })}></div><div class=slider-handle style=${ye({ left: e })} tabindex=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} @keydown=${this._handleKeyDown}><div class=${r}>${this._currentValue}</div></div>`;
   }
 };
 v.styles = [W, wt];

package/dist/react/index.js

@@ -1,7 +1,7 @@
 import { createComponent as N } from "@lit/react";
 import T from "react";
 import { css as C, LitElement as W, html as f } from "lit";
-const G = globalThis, ie = G.ShadowRoot && (G.ShadyCSS === void 0 || G.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, xe = /* @__PURE__ */ Symbol(), ue = /* @__PURE__ */ new WeakMap();
+const G = globalThis, se = G.ShadowRoot && (G.ShadyCSS === void 0 || G.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, xe = /* @__PURE__ */ Symbol(), de = /* @__PURE__ */ new WeakMap();
 let Pe = class {
   constructor(e, o, r) {
     if (this._$cssResult$ = !0, r !== xe) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -10,9 +10,9 @@ let Pe = class {
   get styleSheet() {
     let e = this.o;
     const o = this.t;
-    if (ie && e === void 0) {
+    if (se && e === void 0) {
       const r = o !== void 0 && o.length === 1;
-      r && (e = ue.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && ue.set(o, e));
+      r && (e = de.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && de.set(o, e));
     }
     return e;
   }
@@ -21,17 +21,17 @@ let Pe = class {
   }
 };
 const Me = (t) => new Pe(typeof t == "string" ? t : t + "", void 0, xe), De = (t, e) => {
-  if (ie) t.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
+  if (se) t.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
   else for (const o of e) {
     const r = document.createElement("style"), s = G.litNonce;
     s !== void 0 && r.setAttribute("nonce", s), r.textContent = o.cssText, t.appendChild(r);
   }
-}, pe = ie ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
+}, ue = se ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
   let o = "";
   for (const r of e.cssRules) o += r.cssText;
   return Me(o);
 })(t) : t;
-const { is: Ne, defineProperty: Te, getOwnPropertyDescriptor: Oe, getOwnPropertyNames: Be, getOwnPropertySymbols: Ve, getPrototypeOf: He } = Object, te = globalThis, fe = te.trustedTypes, Ue = fe ? fe.emptyScript : "", Fe = te.reactiveElementPolyfillSupport, z = (t, e) => t, J = { toAttribute(t, e) {
+const { is: Ne, defineProperty: Te, getOwnPropertyDescriptor: Oe, getOwnPropertyNames: Be, getOwnPropertySymbols: Ve, getPrototypeOf: He } = Object, ee = globalThis, pe = ee.trustedTypes, Ue = pe ? pe.emptyScript : "", Fe = ee.reactiveElementPolyfillSupport, z = (t, e) => t, J = { toAttribute(t, e) {
   switch (e) {
     case Boolean:
       t = t ? Ue : null;
@@ -59,8 +59,8 @@ const { is: Ne, defineProperty: Te, getOwnPropertyDescriptor: Oe, getOwnProperty
       }
   }
   return o;
-} }, ne = (t, e) => !Ne(t, e), be = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: ne };
-Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), te.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+} }, ie = (t, e) => !Ne(t, e), fe = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: ie };
+Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), ee.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let V = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ??= []).push(e);
@@ -68,7 +68,7 @@ let V = class extends HTMLElement {
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e, o = be) {
+  static createProperty(e, o = fe) {
     if (o.state && (o.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((o = Object.create(o)).wrapped = !0), this.elementProperties.set(e, o), !o.noAccessor) {
       const r = /* @__PURE__ */ Symbol(), s = this.getPropertyDescriptor(e, r, o);
       s !== void 0 && Te(this.prototype, e, s);
@@ -86,7 +86,7 @@ let V = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? be;
+    return this.elementProperties.get(e) ?? fe;
   }
   static _$Ei() {
     if (this.hasOwnProperty(z("elementProperties"))) return;
@@ -115,8 +115,8 @@ let V = class extends HTMLElement {
     const o = [];
     if (Array.isArray(e)) {
       const r = new Set(e.flat(1 / 0).reverse());
-      for (const s of r) o.unshift(pe(s));
-    } else e !== void 0 && o.push(pe(e));
+      for (const s of r) o.unshift(ue(s));
+    } else e !== void 0 && o.push(ue(e));
     return o;
   }
   static _$Eu(e, o) {
@@ -174,7 +174,7 @@ let V = class extends HTMLElement {
   requestUpdate(e, o, r, s = !1, i) {
     if (e !== void 0) {
       const n = this.constructor;
-      if (s === !1 && (i = this[e]), r ??= n.getPropertyOptions(e), !((r.hasChanged ?? ne)(i, o) || r.useDefault && r.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(n._$Eu(e, r)))) return;
+      if (s === !1 && (i = this[e]), r ??= n.getPropertyOptions(e), !((r.hasChanged ?? ie)(i, o) || r.useDefault && r.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(n._$Eu(e, r)))) return;
       this.C(e, o, r);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -242,8 +242,8 @@ let V = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[z("elementProperties")] = /* @__PURE__ */ new Map(), V[z("finalized")] = /* @__PURE__ */ new Map(), Fe?.({ ReactiveElement: V }), (te.reactiveElementVersions ??= []).push("2.1.2");
-const Le = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: ne }, Ie = (t = Le, e, o) => {
+V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[z("elementProperties")] = /* @__PURE__ */ new Map(), V[z("finalized")] = /* @__PURE__ */ new Map(), Fe?.({ ReactiveElement: V }), (ee.reactiveElementVersions ??= []).push("2.1.2");
+const Le = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: ie }, Ie = (t = Le, e, o) => {
   const { kind: r, metadata: s } = o;
   let i = globalThis.litPropertyMetadata.get(s);
   if (i === void 0 && globalThis.litPropertyMetadata.set(s, i = /* @__PURE__ */ new Map()), r === "setter" && ((t = Object.create(t)).wrapped = !0), i.set(o.name, t), r === "accessor") {
@@ -454,12 +454,12 @@ const Tt = N({
     onChange: "change"
   }
 });
-const ae = globalThis, me = (t) => t, Q = ae.trustedTypes, ge = Q ? Q.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, ke = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ee = "?" + E, Ye = `<${Ee}>`, M = document, j = () => M.createComment(""), R = (t) => t === null || typeof t != "object" && typeof t != "function", le = Array.isArray, Xe = (t) => le(t) || typeof t?.[Symbol.iterator] == "function", re = `[ 	
-\f\r]`, I = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ve = /-->/g, _e = />/g, S = RegExp(`>|${re}(?:([^\\s"'>=/]+)(${re}*=${re}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ye = /'/g, we = /"/g, Ae = /^(?:script|style|textarea|title)$/i, Ge = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), se = Ge(1), D = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), $e = /* @__PURE__ */ new WeakMap(), P = M.createTreeWalker(M, 129);
+const ne = globalThis, be = (t) => t, Q = ne.trustedTypes, me = Q ? Q.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, ke = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ee = "?" + E, Ye = `<${Ee}>`, M = document, j = () => M.createComment(""), R = (t) => t === null || typeof t != "object" && typeof t != "function", ae = Array.isArray, Xe = (t) => ae(t) || typeof t?.[Symbol.iterator] == "function", oe = `[ 	
+\f\r]`, I = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ge = /-->/g, ve = />/g, S = RegExp(`>|${oe}(?:([^\\s"'>=/]+)(${oe}*=${oe}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), _e = /'/g, ye = /"/g, Ae = /^(?:script|style|textarea|title)$/i, Ge = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), re = Ge(1), D = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), we = /* @__PURE__ */ new WeakMap(), P = M.createTreeWalker(M, 129);
 function Ce(t, e) {
-  if (!le(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return ge !== void 0 ? ge.createHTML(e) : e;
+  if (!ae(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return me !== void 0 ? me.createHTML(e) : e;
 }
 const Je = (t, e) => {
   const o = t.length - 1, r = [];
@@ -467,7 +467,7 @@ const Je = (t, e) => {
   for (let l = 0; l < o; l++) {
     const a = t[l];
     let c, p, d = -1, x = 0;
-    for (; x < a.length && (n.lastIndex = x, p = n.exec(a), p !== null); ) x = n.lastIndex, n === I ? p[1] === "!--" ? n = ve : p[1] !== void 0 ? n = _e : p[2] !== void 0 ? (Ae.test(p[2]) && (s = RegExp("</" + p[2], "g")), n = S) : p[3] !== void 0 && (n = S) : n === S ? p[0] === ">" ? (n = s ?? I, d = -1) : p[1] === void 0 ? d = -2 : (d = n.lastIndex - p[2].length, c = p[1], n = p[3] === void 0 ? S : p[3] === '"' ? we : ye) : n === we || n === ye ? n = S : n === ve || n === _e ? n = I : (n = S, s = void 0);
+    for (; x < a.length && (n.lastIndex = x, p = n.exec(a), p !== null); ) x = n.lastIndex, n === I ? p[1] === "!--" ? n = ge : p[1] !== void 0 ? n = ve : p[2] !== void 0 ? (Ae.test(p[2]) && (s = RegExp("</" + p[2], "g")), n = S) : p[3] !== void 0 && (n = S) : n === S ? p[0] === ">" ? (n = s ?? I, d = -1) : p[1] === void 0 ? d = -2 : (d = n.lastIndex - p[2].length, c = p[1], n = p[3] === void 0 ? S : p[3] === '"' ? ye : _e) : n === ye || n === _e ? n = S : n === ge || n === ve ? n = I : (n = S, s = void 0);
     const k = n === S && t[l + 1].startsWith("/>") ? " " : "";
     i += n === I ? a + Ye : d >= 0 ? (r.push(c), a.slice(0, d) + ke + a.slice(d) + E + k) : a + E + (d === -2 ? l : k);
   }
@@ -487,7 +487,7 @@ class q {
       if (s.nodeType === 1) {
         if (s.hasAttributes()) for (const d of s.getAttributeNames()) if (d.endsWith(ke)) {
           const x = p[n++], k = s.getAttribute(d).split(E), X = /([.?@])?(.*)/.exec(x);
-          a.push({ type: 1, index: i, name: X[2], strings: k, ctor: X[1] === "." ? et : X[1] === "?" ? tt : X[1] === "@" ? ot : oe }), s.removeAttribute(d);
+          a.push({ type: 1, index: i, name: X[2], strings: k, ctor: X[1] === "." ? et : X[1] === "?" ? tt : X[1] === "@" ? ot : te }), s.removeAttribute(d);
         } else d.startsWith(E) && (a.push({ type: 6, index: i }), s.removeAttribute(d));
         if (Ae.test(s.tagName)) {
           const d = s.textContent.split(E), x = d.length - 1;
@@ -583,11 +583,11 @@ class Y {
     }
   }
   _$AC(e) {
-    let o = $e.get(e.strings);
-    return o === void 0 && $e.set(e.strings, o = new q(e)), o;
+    let o = we.get(e.strings);
+    return o === void 0 && we.set(e.strings, o = new q(e)), o;
   }
   k(e) {
-    le(this._$AH) || (this._$AH = [], this._$AR());
+    ae(this._$AH) || (this._$AH = [], this._$AR());
     const o = this._$AH;
     let r, s = 0;
     for (const i of e) s === o.length ? o.push(r = new Y(this.O(j()), this.O(j()), this, this.options)) : r = o[s], r._$AI(i), s++;
@@ -595,15 +595,15 @@ class Y {
   }
   _$AR(e = this._$AA.nextSibling, o) {
     for (this._$AP?.(!1, !0, o); e !== this._$AB; ) {
-      const r = me(e).nextSibling;
-      me(e).remove(), e = r;
+      const r = be(e).nextSibling;
+      be(e).remove(), e = r;
     }
   }
   setConnected(e) {
     this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
   }
 }
-class oe {
+class te {
   get tagName() {
     return this.element.tagName;
   }
@@ -628,7 +628,7 @@ class oe {
     e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class et extends oe {
+class et extends te {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -636,7 +636,7 @@ class et extends oe {
     this.element[this.name] = e === b ? void 0 : e;
   }
 }
-class tt extends oe {
+class tt extends te {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -644,7 +644,7 @@ class tt extends oe {
     this.element.toggleAttribute(this.name, !!e && e !== b);
   }
 }
-class ot extends oe {
+class ot extends te {
   constructor(e, o, r, s, i) {
     super(e, o, r, s, i), this.type = 5;
   }
@@ -668,8 +668,8 @@ class rt {
     U(this, e);
   }
 }
-const st = ae.litHtmlPolyfillSupport;
-st?.(q, Y), (ae.litHtmlVersions ??= []).push("3.3.2");
+const st = ne.litHtmlPolyfillSupport;
+st?.(q, Y), (ne.litHtmlVersions ??= []).push("3.3.2");
 const it = (t, e, o) => {
   const r = o?.renderBefore ?? e;
   let s = r._$litPart$;
@@ -679,7 +679,7 @@ const it = (t, e, o) => {
   }
   return s._$AI(t), s;
 };
-const he = globalThis;
+const le = globalThis;
 let H = class extends V {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
@@ -702,12 +702,12 @@ let H = class extends V {
     return D;
   }
 };
-H._$litElement$ = !0, H.finalized = !0, he.litElementHydrateSupport?.({ LitElement: H });
-const nt = he.litElementPolyfillSupport;
+H._$litElement$ = !0, H.finalized = !0, le.litElementHydrateSupport?.({ LitElement: H });
+const nt = le.litElementPolyfillSupport;
 nt?.({ LitElement: H });
-(he.litElementVersions ??= []).push("4.2.2");
+(le.litElementVersions ??= []).push("4.2.2");
 const at = C`:host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0;--nf-switch-padding:.1rem}: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 lt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, ce = (t, e, o, r) => {
+var lt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, he = (t, e, o, r) => {
   for (var s = r > 1 ? void 0 : r ? ht(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
   return r && s && lt(e, o, s), s;
@@ -738,7 +738,7 @@ let F = class extends H {
   }
   // 渲染开关组件
   render() {
-    return se`<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>`;
+    return re`<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(() => {
@@ -747,13 +747,13 @@ let F = class extends H {
   }
 };
 F.styles = [at];
-ce([
+he([
   h({ type: Boolean, reflect: !0 })
 ], F.prototype, "checked", 2);
-ce([
+he([
   h({ type: Boolean, reflect: !0 })
 ], F.prototype, "disabled", 2);
-F = ce([
+F = he([
   O("nf-switch")
 ], F);
 const Bt = N({
@@ -951,7 +951,7 @@ const pt = N({
     onChange: "change"
   }
 }), Vt = pt, ft = C`: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 bt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, de = (t, e, o, r) => {
+var bt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, ce = (t, e, o, r) => {
   for (var s = r > 1 ? void 0 : r ? mt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
   return r && s && bt(e, o, s), s;
@@ -972,7 +972,7 @@ let L = class extends H {
   }
   // 渲染复选框组件
   render() {
-    return se`<div class=checkbox-container @click=${this.toggleCheckbox} aria-checked=${this.checked} aria-disabled=${this.disabled} role=checkbox><div class=checkbox-box>${this.checked ? se`<div class=checkbox-icon><svg viewBox="64 64 896 896"focusable=false data-icon=check width=0.625rem height=0.625rem fill=currentColor aria-hidden=true><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>`;
+    return re`<div class=checkbox-container @click=${this.toggleCheckbox} aria-checked=${this.checked} aria-disabled=${this.disabled} role=checkbox><div class=checkbox-box>${this.checked ? re`<div class=checkbox-icon><svg viewBox="64 64 896 896"focusable=false data-icon=check width=0.625rem height=0.625rem fill=currentColor aria-hidden=true><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(() => {
@@ -981,13 +981,13 @@ let L = class extends H {
   }
 };
 L.styles = [ft];
-de([
+ce([
   h({ type: Boolean, reflect: !0 })
 ], L.prototype, "checked", 2);
-de([
+ce([
   h({ type: Boolean, reflect: !0 })
 ], L.prototype, "disabled", 2);
-L = de([
+L = ce([
   O("nf-checkbox")
 ], L);
 const Ht = N({
@@ -997,53 +997,11 @@ const Ht = N({
   events: {
     onChange: "change"
   }
-});
-const gt = { ATTRIBUTE: 1 }, vt = (t) => (...e) => ({ _$litDirective$: t, values: e });
-let _t = class {
-  constructor(e) {
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(e, o, r) {
-    this._$Ct = e, this._$AM = o, this._$Ci = r;
-  }
-  _$AS(e, o) {
-    return this.update(e, o);
-  }
-  update(e, o) {
-    return this.render(...o);
-  }
-};
-const Se = "important", yt = " !" + Se, ee = vt(class extends _t {
-  constructor(t) {
-    if (super(t), t.type !== gt.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.");
-  }
-  render(t) {
-    return Object.keys(t).reduce((e, o) => {
-      const r = t[o];
-      return r == null ? e : e + `${o = o.includes("-") ? o : o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
-    }, "");
-  }
-  update(t, [e]) {
-    const { style: o } = t.element;
-    if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
-    for (const r of this.ft) e[r] == null && (this.ft.delete(r), r.includes("-") ? o.removeProperty(r) : o[r] = null);
-    for (const r in e) {
-      const s = e[r];
-      if (s != null) {
-        this.ft.add(r);
-        const i = typeof s == "string" && s.endsWith(yt);
-        r.includes("-") || i ? o.setProperty(r, i ? s.slice(0, -11) : s, i ? Se : "") : o[r] = s;
-      }
-    }
-    return D;
-  }
-}), wt = C`: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 $t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, _ = (t, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? xt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+}), gt = C`:host{display:inline-block;position:relative;width:calc(.9rem + (var(--nf-height) - 1.25rem)/ 2 + 7ch)}:host(:not([disabled-alpha])){width:calc(.9rem + (var(--nf-height) - 1.25rem)/ 2 + 9ch)}: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;text-align:center;text-transform:uppercase}.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 vt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, _ = (t, e, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? _t(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (r ? n(e, o, s) : n(s)) || s);
-  return r && s && $t(e, o, s), s;
+  return r && s && vt(e, o, s), s;
 };
 let g = class extends W {
   constructor() {
@@ -1199,9 +1157,7 @@ let g = class extends W {
       <div class="color-selector">
         <div
           class="color-sb"
-          style=${ee({
-      "background-color": t
-    })}
+          style="background-color: ${t};"
           @mousedown="${this._handleSBMouseDown}"
           @touchstart="${this._handleSBTouchMove}"
           @touchmove="${this._handleSBTouchMove}"
@@ -1210,10 +1166,7 @@ let g = class extends W {
           <div class="sb-black"></div>
           <div
             class="selector"
-            style=${ee({
-      left: `${e}%`,
-      top: `${o}%`
-    })}
+            style="left: ${e}%; top: ${o}%;"
           ></div>
         </div>
       </div>
@@ -1297,7 +1250,7 @@ let g = class extends W {
     `;
   }
 };
-g.styles = [K, wt];
+g.styles = [K, gt];
 _([
   h({ type: String })
 ], g.prototype, "value", 2);
@@ -1350,7 +1303,7 @@ _([
 g = _([
   O("nf-color-picker")
 ], g);
-const Ft = N({
+const Ut = N({
   tagName: "nf-color-picker",
   elementClass: g,
   react: T,
@@ -1358,6 +1311,48 @@ const Ft = N({
     onChange: "change",
     onOpenChange: "openChange"
   }
+});
+const yt = { ATTRIBUTE: 1 }, wt = (t) => (...e) => ({ _$litDirective$: t, values: e });
+let $t = class {
+  constructor(e) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(e, o, r) {
+    this._$Ct = e, this._$AM = o, this._$Ci = r;
+  }
+  _$AS(e, o) {
+    return this.update(e, o);
+  }
+  update(e, o) {
+    return this.render(...o);
+  }
+};
+const Se = "important", xt = " !" + Se, $e = wt(class extends $t {
+  constructor(t) {
+    if (super(t), t.type !== yt.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.");
+  }
+  render(t) {
+    return Object.keys(t).reduce((e, o) => {
+      const r = t[o];
+      return r == null ? e : e + `${o = o.includes("-") ? o : o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
+    }, "");
+  }
+  update(t, [e]) {
+    const { style: o } = t.element;
+    if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
+    for (const r of this.ft) e[r] == null && (this.ft.delete(r), r.includes("-") ? o.removeProperty(r) : o[r] = null);
+    for (const r in e) {
+      const s = e[r];
+      if (s != null) {
+        this.ft.add(r);
+        const i = typeof s == "string" && s.endsWith(xt);
+        r.includes("-") || i ? o.setProperty(r, i ? s.slice(0, -11) : s, i ? Se : "") : o[r] = s;
+      }
+    }
+    return D;
+  }
 }), kt = C`: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 Et = Object.defineProperty, At = Object.getOwnPropertyDescriptor, y = (t, e, o, r) => {
   for (var s = r > 1 ? void 0 : r ? At(e, o) : e, i = t.length - 1, n; i >= 0; i--)
@@ -1444,7 +1439,7 @@ let v = class extends W {
   }
   render() {
     const t = this._getValuePercentage(), e = `${t}%`, o = `${t}%`, r = `slider-tooltip ${this._showTooltip || this.tooltip ? "visible" : ""}`;
-    return f`<div class=slider-fill style=${ee({ width: o })}></div><div class=slider-handle style=${ee({ left: e })} tabindex=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} @keydown=${this._handleKeyDown}><div class=${r}>${this._currentValue}</div></div>`;
+    return f`<div class=slider-fill style=${$e({ width: o })}></div><div class=slider-handle style=${$e({ left: e })} tabindex=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} @keydown=${this._handleKeyDown}><div class=${r}>${this._currentValue}</div></div>`;
   }
 };
 v.styles = [K, kt];
@@ -1498,7 +1493,7 @@ function It(t) {
 }
 export {
   Ht as NfCheckbox,
-  Ft as NfColorPicker,
+  Ut as NfColorPicker,
   Nt as NfInput,
   Vt as NfInputNumber,
   It as NfRoot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-flow-design",
-  "version": "1.5.13",
+  "version": "1.6.0",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",