next-flow-design 1.5.3 → 1.5.5

package/dist/components/nf-input-number/nf-input-number.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-type Formatter = (value?: number) => string;
+type Formatter = (value: number | null) => string;
 type Parser = (text: string) => number | null;
 export declare class NfInputNumberElement extends LitElement {
     static styles: CSSStyleSheet[];
@@ -18,6 +18,7 @@ export declare class NfInputNumberElement extends LitElement {
     noDecimal: boolean;
     noZero: boolean;
     noNegative: boolean;
+    center: boolean;
     private text;
     private setText;
     private isTyping;

package/dist/index.js

@@ -241,7 +241,7 @@ let B = class extends HTMLElement {
   }
 };
 B.elementStyles = [], B.shadowRootOptions = { mode: "open" }, B[U("elementProperties")] = /* @__PURE__ */ new Map(), B[U("finalized")] = /* @__PURE__ */ new Map(), Ne?.({ ReactiveElement: B }), (Q.reactiveElementVersions ??= []).push("2.1.2");
-const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged: re }, Le = (t = Ue, e, o) => {
+const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged: re }, Fe = (t = Ue, e, o) => {
   const { kind: s, metadata: r } = o;
   let i = globalThis.litPropertyMetadata.get(r);
   if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), s === "setter" && ((t = Object.create(t)).wrapped = !0), i.set(o.name, t), s === "accessor") {
@@ -263,7 +263,7 @@ const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged:
   throw Error("Unsupported decorator location: " + s);
 };
 function h(t) {
-  return (e, o) => typeof o == "object" ? Le(t, e, o) : ((s, r, i) => {
+  return (e, o) => typeof o == "object" ? Fe(t, e, o) : ((s, r, i) => {
     const n = r.hasOwnProperty(i);
     return r.constructor.createProperty(i, s), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
   })(t, e, o);
@@ -271,9 +271,9 @@ 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, Fe = `<${xe}>`, P = document, L = () => P.createComment(""), F = (t) => t === null || typeof t != "object" && typeof t != "function", ne = Array.isArray, je = (t) => ne(t) || typeof t?.[Symbol.iterator] == "function", te = `[ 	
+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, ze = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), oe = ze(1), M = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), ye = /* @__PURE__ */ new WeakMap(), C = P.createTreeWalker(P, 129);
+\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);
 function Ae(t, e) {
   if (!ne(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return be !== void 0 ? be.createHTML(e) : e;
@@ -286,17 +286,17 @@ const Ie = (t, e) => {
     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]) && (r = RegExp("</" + u[2], "g")), n = S) : u[3] !== void 0 && (n = S) : n === S ? u[0] === ">" ? (n = r ?? N, d = -1) : u[1] === void 0 ? d = -2 : (d = n.lastIndex - u[2].length, c = u[1], n = u[3] === void 0 ? S : u[3] === '"' ? _e : ve) : n === _e || n === ve ? n = S : n === me || n === ge ? n = N : (n = S, r = void 0);
     const k = n === S && t[l + 1].startsWith("/>") ? " " : "";
-    i += n === N ? a + Fe : d >= 0 ? (s.push(c), a.slice(0, d) + $e + a.slice(d) + A + k) : a + A + (d === -2 ? l : k);
+    i += n === N ? a + Le : d >= 0 ? (s.push(c), a.slice(0, d) + $e + a.slice(d) + A + k) : a + A + (d === -2 ? l : k);
   }
   return [Ae(t, i + (t[o] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
 };
-class j {
+class z {
   constructor({ strings: e, _$litType$: o }, s) {
     let r;
     this.parts = [];
     let i = 0, n = 0;
     const l = e.length - 1, a = this.parts, [c, u] = Ie(e, o);
-    if (this.el = j.createElement(c, s), C.currentNode = this.el.content, o === 2 || o === 3) {
+    if (this.el = z.createElement(c, s), C.currentNode = this.el.content, o === 2 || o === 3) {
       const d = this.el.content.firstChild;
       d.replaceWith(...d.childNodes);
     }
@@ -310,8 +310,8 @@ class j {
           const d = r.textContent.split(A), $ = d.length - 1;
           if ($ > 0) {
             r.textContent = G ? G.emptyScript : "";
-            for (let k = 0; k < $; k++) r.append(d[k], L()), C.nextNode(), a.push({ type: 2, index: ++i });
-            r.append(d[$], L());
+            for (let k = 0; k < $; k++) r.append(d[k], F()), C.nextNode(), a.push({ type: 2, index: ++i });
+            r.append(d[$], F());
           }
         }
       } else if (r.nodeType === 8) if (r.data === xe) a.push({ type: 2, index: i });
@@ -330,7 +330,7 @@ class j {
 function H(t, e, o = t, s) {
   if (e === M) return e;
   let r = s !== void 0 ? o._$Co?.[s] : o._$Cl;
-  const i = F(e) ? void 0 : e._$litDirective$;
+  const i = L(e) ? void 0 : e._$litDirective$;
   return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(t), r._$AT(t, o, s)), s !== void 0 ? (o._$Co ??= [])[s] = r : o._$Cl = r), r !== void 0 && (e = H(t, r._$AS(t, e.values), r, s)), e;
 }
 class Re {
@@ -380,7 +380,7 @@ class q {
     return this._$AB;
   }
   _$AI(e, o = this) {
-    e = H(this, e, o), F(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== M && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : je(e) ? this.k(e) : this._(e);
+    e = H(this, e, o), L(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== M && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ze(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -389,10 +389,10 @@ class q {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== b && F(this._$AH) ? this._$AA.nextSibling.data = e : this.T(P.createTextNode(e)), this._$AH = e;
+    this._$AH !== b && L(this._$AH) ? this._$AA.nextSibling.data = e : this.T(P.createTextNode(e)), this._$AH = e;
   }
   $(e) {
-    const { values: o, _$litType$: s } = e, r = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = j.createElement(Ae(s.h, s.h[0]), this.options)), s);
+    const { values: o, _$litType$: s } = e, r = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = z.createElement(Ae(s.h, s.h[0]), this.options)), s);
     if (this._$AH?._$AD === r) this._$AH.p(o);
     else {
       const i = new Re(r, this), n = i.u(this.options);
@@ -401,13 +401,13 @@ class q {
   }
   _$AC(e) {
     let o = ye.get(e.strings);
-    return o === void 0 && ye.set(e.strings, o = new j(e)), o;
+    return o === void 0 && ye.set(e.strings, o = new z(e)), o;
   }
   k(e) {
     ne(this._$AH) || (this._$AH = [], this._$AR());
     const o = this._$AH;
     let s, r = 0;
-    for (const i of e) r === o.length ? o.push(s = new q(this.O(L()), this.O(L()), this, this.options)) : s = o[r], s._$AI(i), r++;
+    for (const i of e) r === o.length ? o.push(s = new q(this.O(F()), this.O(F()), this, this.options)) : s = o[r], s._$AI(i), r++;
     r < o.length && (this._$AR(s && s._$AB.nextSibling, r), o.length = r);
   }
   _$AR(e = this._$AA.nextSibling, o) {
@@ -433,11 +433,11 @@ class ee {
   _$AI(e, o = this, s, r) {
     const i = this.strings;
     let n = !1;
-    if (i === void 0) e = H(this, e, o, 0), n = !F(e) || e !== this._$AH && e !== M, n && (this._$AH = e);
+    if (i === void 0) e = H(this, e, o, 0), n = !L(e) || e !== this._$AH && e !== M, n && (this._$AH = e);
     else {
       const l = e;
       let a, c;
-      for (e = i[0], a = 0; a < i.length - 1; a++) c = H(this, l[s + a], o, a), c === M && (c = this._$AH[a]), n ||= !F(c) || c !== this._$AH[a], c === b ? e = b : e !== b && (e += (c ?? "") + i[a + 1]), this._$AH[a] = c;
+      for (e = i[0], a = 0; a < i.length - 1; a++) c = H(this, l[s + a], o, a), c === M && (c = this._$AH[a]), n ||= !L(c) || c !== this._$AH[a], c === b ? e = b : e !== b && (e += (c ?? "") + i[a + 1]), this._$AH[a] = c;
     }
     n && !r && this.j(e);
   }
@@ -486,13 +486,13 @@ class Ze {
   }
 }
 const Ye = ie.litHtmlPolyfillSupport;
-Ye?.(j, q), (ie.litHtmlVersions ??= []).push("3.3.2");
+Ye?.(z, q), (ie.litHtmlVersions ??= []).push("3.3.2");
 const Xe = (t, e, o) => {
   const s = o?.renderBefore ?? e;
   let r = s._$litPart$;
   if (r === void 0) {
     const i = o?.renderBefore ?? null;
-    s._$litPart$ = r = new q(e.insertBefore(L(), i), i, void 0, o ?? {});
+    s._$litPart$ = r = new q(e.insertBefore(F(), i), i, void 0, o ?? {});
   }
   return r._$AI(t), r;
 };
@@ -529,7 +529,7 @@ var Qe = Object.defineProperty, et = Object.getOwnPropertyDescriptor, le = (t, e
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
   return s && r && Qe(e, o, r), r;
 };
-let z = class extends V {
+let j = class extends V {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1;
   }
@@ -553,16 +553,16 @@ let z = class extends V {
     });
   }
 };
-z.styles = [Je];
+j.styles = [Je];
 le([
   h({ type: Boolean, reflect: !0 })
-], z.prototype, "checked", 2);
+], j.prototype, "checked", 2);
 le([
   h({ type: Boolean, reflect: !0 })
-], z.prototype, "disabled", 2);
-z = le([
+], j.prototype, "disabled", 2);
+j = le([
   T("nf-checkbox")
-], z);
+], j);
 const tt = { ATTRIBUTE: 1 }, ot = (t) => (...e) => ({ _$litDirective$: t, values: e });
 let st = class {
   constructor(e) {
@@ -1003,7 +1003,7 @@ O([
 x = O([
   T("nf-input")
 ], x);
-const dt = E`:host{width:var(--nf-width);position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0;overflow:hidden}.input-number{position:relative;padding-right:.6125rem;flex:1;height:100%;outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-color);font-weight:var(--nf-font-weight);text-align:left}.input-number .input-number-input-wrapper{height:100%}.input-number .input-number-input-wrapper .input-number-input{background:0 0;width:100%;height:100%;text-align:start;border:0;outline:0;padding:0;box-sizing:border-box;color:var(--nf-color);font-size:var(--nf-font-size);font-weight:var(--nf-font-weight);font-family:var(--nf-font-family),sans-serif}.input-number::-webkit-inner-spin-button,.input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number[type=number]{appearance:textfield}.input-number:hover .controls{width:1.5rem}.input-prefix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-inline-start:.6125rem;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-prefix:not(:empty){padding-inline-end:.25rem}.input-suffix{display:flex;align-items:center;justify-content:center;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-suffix:not(:empty){padding-inline-end:.6125rem;padding-inline-start:.5rem}.controls{position:absolute;top:0;right:0;height:100%;width:0;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;transition:width var(--nf-transition-fast) ease}.controls:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}:host([suffix]) .controls:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}.control-btn{flex:1;display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;transition:background-color var(--nf-transition-fast) ease;outline:0;-webkit-user-select:none;user-select:none}.control-btn:hover{background-color:var(--nf-control-btn-background-hover)}.control-btn:active{background-color:var(--nf-control-btn-background-active)}.control-btn:focus-visible{background-color:var(--nf-control-btn-background-hover)}.control-btn svg{display:block;pointer-events:none;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round}.control-btn-up{border-bottom:.67px solid var(--nf-control-divider-color)}:host(:not([suffix])) .control-btn-up{border-top-right-radius:var(--nf-border-radius)}:host(:not([suffix])) .control-btn-down{border-bottom-right-radius:var(--nf-border-radius)}:host([disabled]) .input-number-input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .input-prefix,:host([disabled]) .input-suffix{color:var(--nf-color-disabled)}:host([disabled]) .controls{display:none}:host([disabled]) .control-btn{cursor:not-allowed;pointer-events:none;opacity:.5}`;
+const dt = E`:host{width:10rem;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0;overflow:hidden}.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-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-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-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-prefix:not(:empty){padding-inline-end:.25rem}.input-suffix{display:flex;align-items:center;justify-content:center;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-suffix:not(:empty){padding-inline-end:.6125rem;padding-inline-start:.5rem}.controls{position:absolute;top:0;right:0;height:100%;width:0;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;transition:width var(--nf-transition-fast) ease}.controls:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}:host([suffix]) .controls:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}.control-btn{flex:1;display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;transition:background-color var(--nf-transition-fast) ease;outline:0;-webkit-user-select:none;user-select:none}.control-btn:hover{background-color:var(--nf-control-btn-background-hover)}.control-btn:active{background-color:var(--nf-control-btn-background-active)}.control-btn:focus-visible{background-color:var(--nf-control-btn-background-hover)}.control-btn svg{display:block;pointer-events:none;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round}.control-btn-up{border-bottom:.67px solid var(--nf-control-divider-color)}:host(:not([suffix])) .control-btn-up{border-top-right-radius:var(--nf-border-radius)}:host(:not([suffix])) .control-btn-down{border-bottom-right-radius:var(--nf-border-radius)}:host([disabled]) .input-number-input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .input-prefix,:host([disabled]) .input-suffix{color:var(--nf-color-disabled)}:host([disabled]) .controls{display:none}:host([disabled]) .control-btn{cursor:not-allowed;pointer-events:none;opacity:.5}`;
 var ut = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, m = (t, e, o, s) => {
   for (var r = s > 1 ? void 0 : s ? pt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
@@ -1011,12 +1011,20 @@ var ut = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, m = (t, e,
 };
 let p = class extends R {
   constructor() {
-    super(...arguments), this.value = 0, this.formatter = (t) => t === null ? "" : String(t), this.parser = (t) => {
+    super(...arguments), this.value = 0, this.formatter = (t) => {
+      if (t === null) return "";
+      const e = String(t);
+      return e.includes("e") ? t.toLocaleString("en", {
+        useGrouping: !1,
+        maximumFractionDigits: 20,
+        minimumFractionDigits: 0
+      }) : e;
+    }, this.parser = (t) => {
       if (t.trim().length == 0 || t.endsWith("."))
         return null;
       const e = Number(t);
       return Number.isNaN(e) ? null : this.clampValue(e);
-    }, this.prefix = "", this.suffix = "", this.controls = !0, this.step = 1, this.min = null, this.max = null, this.changeOnWheel = !0, this.disabled = !1, this.noDecimal = !1, this.noZero = !1, this.noNegative = !1, this.text = "", this.isTyping = !1, this.isFocused = !1;
+    }, this.prefix = "", this.suffix = "", this.controls = !0, this.step = 1, this.min = null, this.max = null, this.changeOnWheel = !0, this.disabled = !1, this.noDecimal = !1, this.noZero = !1, this.noNegative = !1, this.center = !1, this.text = "", this.isTyping = !1, this.isFocused = !1;
   }
   // 对解析结果进行额外验证
   validateParsed(t) {
@@ -1034,6 +1042,10 @@ let p = class extends R {
   }
   /* ================== 生命周期 ================== */
   willUpdate(t) {
+    if (this.center && this.suffix && this.controls)
+      throw new Error(
+        "[nf-input-number] center 模式下不允许同时开启 suffix 和 controls，请关闭其中一个。"
+      );
     t.has("value") && !this.isTyping && this.setText(this.formatter(this.value));
   }
   /* ================== 事件处理 ================== */
@@ -1099,7 +1111,7 @@ let p = class extends R {
   }
   /* ================== Render ================== */
   render() {
-    return f`<div class=input-prefix>${this.prefix}</div><div class=input-number><div class=input-number-input-wrapper><input 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>` : ""}`;
+    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];
@@ -1121,6 +1133,7 @@ m([
 m([
   h({
     type: Boolean,
+    reflect: !0,
     converter: {
       fromAttribute: (t) => t !== "false" && t !== null,
       toAttribute: (t) => t ? "" : null
@@ -1158,6 +1171,9 @@ m([
 m([
   h({ type: Boolean, attribute: "no-negative" })
 ], p.prototype, "noNegative", 2);
+m([
+  h({ type: Boolean, reflect: !0 })
+], p.prototype, "center", 2);
 m([
   w()
 ], p.prototype, "text", 2);
@@ -1418,7 +1434,7 @@ v = y([
   T("nf-slider")
 ], v);
 export {
-  z as NfCheckboxElement,
+  j as NfCheckboxElement,
   g as NfColorPickerElement,
   x as NfInputElement,
   p as NfInputNumberElement,