@editora/ui-core 0.1.9 → 0.1.10

package/dist/number-field.esm.js

@@ -0,0 +1,771 @@
+import { E as I } from "./ElementBase-909688f3.mjs";
+const D = `
+  :host {
+    --ui-number-field-padding: var(--ui-padding, 10px 12px);
+    --ui-number-field-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
+    --ui-number-field-border-width: 1px;
+    --ui-number-field-border-style: solid;
+    --ui-number-field-border:
+      var(--ui-number-field-border-width) var(--ui-number-field-border-style) var(--ui-number-field-border-color);
+    --ui-number-field-radius: var(--ui-radius, 10px);
+    --ui-number-field-min-height: var(--ui-min-height, 40px);
+    --ui-number-field-width: 100%;
+    --ui-number-field-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-number-field-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-number-field-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-number-field-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-number-field-danger: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-number-field-shadow: none;
+    --ui-number-field-gap: 8px;
+    --ui-number-field-shell-gap: 8px;
+    --ui-number-field-meta-gap: 4px;
+    --ui-number-field-placeholder: color-mix(in srgb, var(--ui-number-field-color) 40%, transparent);
+    color-scheme: light dark;
+    display: block;
+    inline-size: var(--ui-number-field-width);
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    inline-size: 100%;
+    min-inline-size: 0;
+    display: grid;
+    gap: var(--ui-number-field-gap);
+    color: var(--ui-number-field-color);
+  }
+
+  .meta {
+    min-inline-size: 0;
+    display: grid;
+    gap: var(--ui-number-field-meta-gap);
+  }
+
+  .label {
+    margin: 0;
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-number-field-muted);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .required {
+    color: var(--ui-number-field-danger);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-number-field-muted);
+  }
+
+  .error {
+    color: var(--ui-number-field-danger);
+  }
+
+  .meta[hidden],
+  .label[hidden],
+  .description[hidden],
+  .prefix[hidden],
+  .suffix[hidden],
+  .footer[hidden],
+  .error[hidden],
+  .steppers[hidden] {
+    display: none;
+  }
+
+  .shell {
+    position: relative;
+    inline-size: 100%;
+    min-inline-size: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--ui-number-field-shell-gap);
+    box-sizing: border-box;
+    min-block-size: var(--ui-number-field-min-height);
+    padding-inline: 10px;
+    border: var(--ui-number-field-border);
+    border-radius: var(--ui-number-field-radius);
+    background: var(--ui-number-field-bg);
+    box-shadow: var(--ui-number-field-shadow);
+    transition: border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease;
+  }
+
+  .shell[data-show-steppers="true"] {
+    padding-inline-end: 4px;
+  }
+
+  .shell:focus-within {
+    border-color: color-mix(in srgb, var(--ui-number-field-focus) 56%, var(--ui-number-field-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-number-field-focus) 24%, transparent);
+  }
+
+  .prefix,
+  .suffix {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: color-mix(in srgb, var(--ui-number-field-color) 62%, transparent);
+    white-space: nowrap;
+    line-height: 1;
+  }
+
+  .control {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    display: grid;
+    align-items: center;
+  }
+
+  input {
+    inline-size: 100%;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: 500 14px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: var(--ui-number-field-padding);
+    min-block-size: calc(var(--ui-number-field-min-height) - 2px);
+    margin: 0;
+    outline: none;
+    text-align: var(--ui-number-field-align, right);
+  }
+
+  input::placeholder {
+    color: var(--ui-number-field-placeholder);
+  }
+
+  .steppers {
+    flex: 0 0 auto;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    align-self: stretch;
+    align-items: stretch;
+    inline-size: 28px;
+    min-block-size: calc(var(--ui-number-field-min-height) - 6px);
+    margin-inline-start: auto;
+    border-inline-start: 1px solid color-mix(in srgb, var(--ui-number-field-border-color) 82%, transparent);
+    padding-inline-start: 4px;
+  }
+
+  .stepper-slot {
+    display: block;
+    min-block-size: 0;
+  }
+
+  .stepper-btn,
+  .steppers ::slotted([slot="increment-trigger"]),
+  .steppers ::slotted([slot="decrement-trigger"]) {
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: 100%;
+    min-block-size: 0;
+    border: none;
+    border-radius: 7px;
+    background: transparent;
+    color: color-mix(in srgb, var(--ui-number-field-color) 62%, transparent);
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    padding: 0;
+    font: 700 10px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    line-height: 1;
+    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
+  }
+
+  .stepper-btn:hover,
+  .steppers ::slotted([slot="increment-trigger"]:hover),
+  .steppers ::slotted([slot="decrement-trigger"]:hover) {
+    background: color-mix(in srgb, var(--ui-number-field-color) 8%, transparent);
+    color: var(--ui-number-field-color);
+  }
+
+  .stepper-btn:active,
+  .steppers ::slotted([slot="increment-trigger"]:active),
+  .steppers ::slotted([slot="decrement-trigger"]:active) {
+    background: color-mix(in srgb, var(--ui-number-field-color) 12%, transparent);
+    transform: scale(0.97);
+  }
+
+  .stepper-btn:focus-visible,
+  .steppers ::slotted([slot="increment-trigger"]:focus-visible),
+  .steppers ::slotted([slot="decrement-trigger"]:focus-visible) {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-number-field-focus) 28%, transparent);
+    outline: none;
+  }
+
+  .stepper-icon {
+    display: block;
+    width: 12px;
+    height: 12px;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  .stepper-icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .stepper-slot:last-child .stepper-icon {
+    transform: translateY(0.5px);
+  }
+
+  .footer {
+    min-inline-size: 0;
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.64;
+    filter: saturate(0.85);
+  }
+
+  :host([disabled]) input,
+  :host([disabled]) .stepper-btn {
+    pointer-events: none;
+  }
+
+  :host([invalid]),
+  :host([data-internal-invalid]) {
+    --ui-number-field-border-color: color-mix(in srgb, var(--ui-number-field-danger) 62%, transparent);
+  }
+
+  :host([invalid]) .shell,
+  :host([data-internal-invalid]) .shell {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-number-field-danger) 20%, transparent);
+  }
+
+  :host([size="sm"]) {
+    --ui-number-field-min-height: 34px;
+    --ui-number-field-padding: 7px 8px;
+    --ui-number-field-shell-gap: 6px;
+  }
+
+  :host([size="sm"]) .steppers {
+    inline-size: 24px;
+  }
+
+  :host([size="sm"]) .stepper-icon {
+    width: 8px;
+    height: 8px;
+  }
+
+  :host([size="lg"]) {
+    --ui-number-field-min-height: 46px;
+    --ui-number-field-padding: 11px 14px;
+    --ui-number-field-shell-gap: 10px;
+  }
+
+  :host([size="lg"]) .steppers {
+    inline-size: 32px;
+  }
+
+  :host([size="lg"]) .stepper-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-number-field-bg: var(--ui-color-surface-alt, var(--ui-surface-alt, #f8fafc));
+  }
+
+  :host([variant="soft"]) {
+    --ui-number-field-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, var(--ui-color-surface, #ffffff));
+    --ui-number-field-border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 28%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-number-field-bg: #0f172a;
+    --ui-number-field-color: #e2e8f0;
+    --ui-number-field-muted: #94a3b8;
+    --ui-number-field-border-color: #334155;
+    --ui-number-field-focus: #93c5fd;
+    --ui-number-field-placeholder: color-mix(in srgb, #e2e8f0 46%, transparent);
+    --ui-number-field-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .shell,
+    .stepper-btn {
+      transition: none !important;
+    }
+  }
+`;
+function f(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function d(s) {
+  if (!s)
+    return !1;
+  const e = s.assignedNodes({ flatten: !0 });
+  return e.length ? e.some((t) => {
+    var i;
+    return t.nodeType === Node.TEXT_NODE ? !!((i = t.textContent) != null && i.trim()) : t.nodeType === Node.ELEMENT_NODE;
+  }) : !1;
+}
+function p(s, e) {
+  const t = s.getAttribute(e);
+  if (t == null)
+    return !1;
+  const i = String(t).trim().toLowerCase();
+  return i !== "false" && i !== "0";
+}
+function g(s) {
+  if (s == null || s.trim() === "")
+    return null;
+  const e = Number(s);
+  return Number.isFinite(e) ? e : null;
+}
+function z(s) {
+  const e = String(s), t = e.match(/e-(\d+)$/i);
+  if (t)
+    return Number(t[1]);
+  const i = e.split(".")[1];
+  return i ? i.length : 0;
+}
+function m(s, e) {
+  if (e == null || e < 0)
+    return s;
+  const t = 10 ** e;
+  return Math.round((s + Number.EPSILON) * t) / t;
+}
+function A(s, e, t) {
+  return e != null && s < e ? e : t != null && s > t ? t : s;
+}
+function N(s) {
+  return s ?? 0;
+}
+function B(s, e, t, i) {
+  if (e == null || e <= 0)
+    return !0;
+  const r = m((s - t) / e, i != null ? i + 2 : 8);
+  return Math.abs(r - Math.round(r)) < 1e-7;
+}
+function C(s) {
+  var t, i;
+  const e = new Intl.NumberFormat(s).formatToParts(12345.6);
+  return {
+    group: ((t = e.find((r) => r.type === "group")) == null ? void 0 : t.value) || ",",
+    decimal: ((i = e.find((r) => r.type === "decimal")) == null ? void 0 : i.value) || "."
+  };
+}
+function _(s, e) {
+  const t = s.trim();
+  if (!t)
+    return null;
+  const { group: i, decimal: r } = C(e);
+  let n = t.replace(/[\s\u00a0\u202f]/g, "");
+  if (i && (n = n.split(i).join("")), r && r !== "." && (n = n.split(r).join(".")), n = n.replace(/[−–]/g, "-"), !/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(n))
+    return null;
+  const a = Number(n);
+  return Number.isFinite(a) ? a : null;
+}
+function F(s, e) {
+  return e != null && e >= 0 ? s.toFixed(e) : String(s);
+}
+class L extends I {
+  constructor() {
+    super(), this._input = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 9), this._rawValue = "", this._isEditing = !1, this._internalInvalidReason = null, this._onInput = this._onInput.bind(this), this._onBlur = this._onBlur.bind(this), this._onFocus = this._onFocus.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onWheel = this._onWheel.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onClick = this._onClick.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "min",
+      "max",
+      "step",
+      "precision",
+      "locale",
+      "format",
+      "name",
+      "placeholder",
+      "disabled",
+      "readonly",
+      "required",
+      "invalid",
+      "allow-wheel",
+      "show-steppers",
+      "clamp-on-blur",
+      "autocomplete",
+      "inputmode",
+      "label",
+      "description",
+      "data-error",
+      "size",
+      "variant"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("slotchange", this._onSlotChange), this.addEventListener("click", this._onClick), this._registerWithForm();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("slotchange", this._onSlotChange), this.removeEventListener("click", this._onClick), this._detachListeners(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+  }
+  shouldRenderOnAttributeChange(e) {
+    return e === "label" || e === "description" || e === "data-error";
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i) {
+      if (e === "value") {
+        this._rawValue = i || "", this._clearInternalInvalid(), this._syncDisplayValue(), this._syncAria();
+        return;
+      }
+      if (e === "name" && this._registerWithForm(), e === "min" || e === "max" || e === "step" || e === "precision" || e === "locale" || e === "format" || e === "placeholder" || e === "disabled" || e === "readonly" || e === "required" || e === "allow-wheel" || e === "show-steppers" || e === "clamp-on-blur" || e === "autocomplete" || e === "inputmode" || e === "size" || e === "variant" || e === "invalid") {
+        this._syncControlAttrs(), this._syncDisplayValue(), this._syncDerivedState(), this._syncAria();
+        return;
+      }
+      super.attributeChangedCallback(e, t, i);
+    }
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(e) {
+    e ? this.setAttribute("value", e) : this.removeAttribute("value");
+  }
+  get valueAsNumber() {
+    return g(this.getAttribute("value"));
+  }
+  get rawValue() {
+    return this._rawValue;
+  }
+  set rawValue(e) {
+    this._rawValue = String(e ?? ""), this._input && (this._input.value = this._rawValue), this._syncAria();
+  }
+  focus(e) {
+    if (this._input) {
+      this._input.focus(e);
+      return;
+    }
+    super.focus(e);
+  }
+  blur() {
+    var e;
+    (e = this._input) == null || e.blur();
+  }
+  select() {
+    var e;
+    (e = this._input) == null || e.select();
+  }
+  stepUp(e = 1) {
+    this._stepBy(Math.max(1, Number(e) || 1), "step");
+  }
+  stepDown(e = 1) {
+    this._stepBy(-Math.max(1, Number(e) || 1), "step");
+  }
+  _locale() {
+    return this.getAttribute("locale") || Intl.NumberFormat().resolvedOptions().locale || "en-US";
+  }
+  _precision() {
+    const e = this.getAttribute("precision");
+    if (e == null || e.trim() === "")
+      return null;
+    const t = Number(e);
+    return Number.isInteger(t) && t >= 0 ? t : null;
+  }
+  _step() {
+    const e = this.getAttribute("step");
+    if (e == null || e === "" || e === "any")
+      return null;
+    const t = Number(e);
+    return Number.isFinite(t) && t > 0 ? t : null;
+  }
+  _effectivePrecision() {
+    const e = this._precision();
+    if (e != null)
+      return e;
+    const t = this._step();
+    return t != null ? z(t) : null;
+  }
+  _min() {
+    return g(this.getAttribute("min"));
+  }
+  _max() {
+    return g(this.getAttribute("max"));
+  }
+  _formatNumber(e) {
+    const t = this._effectivePrecision(), i = this.getAttribute("format") !== "plain";
+    return new Intl.NumberFormat(this._locale(), {
+      useGrouping: i,
+      minimumFractionDigits: t ?? 0,
+      maximumFractionDigits: t ?? 20
+    }).format(e);
+  }
+  _displayStringForValue() {
+    if (this._isEditing)
+      return this._rawValue;
+    const e = this.valueAsNumber;
+    return e == null ? this._rawValue : this._formatNumber(e);
+  }
+  _syncDisplayValue() {
+    if (!this._input)
+      return;
+    const e = this._displayStringForValue();
+    this._input.value !== e && (this._input.value = e);
+    const t = this.root.querySelector(".shell");
+    t && t.setAttribute("data-has-value", e ? "true" : "false");
+  }
+  _syncControlAttrs() {
+    if (!this._input)
+      return;
+    this._input.placeholder = this.getAttribute("placeholder") || "", this._input.disabled = p(this, "disabled"), this._input.readOnly = this.hasAttribute("readonly"), this._input.required = this.hasAttribute("required"), this._input.name = this.getAttribute("name") || "", this._input.setAttribute("inputmode", this.getAttribute("inputmode") || "decimal");
+    const e = this.getAttribute("autocomplete");
+    e ? this._input.setAttribute("autocomplete", e) : this._input.removeAttribute("autocomplete");
+  }
+  _syncAria() {
+    if (!this._input)
+      return;
+    const e = this.valueAsNumber;
+    this._input.setAttribute("role", "spinbutton"), this._input.setAttribute("aria-valuetext", this._input.value || "");
+    const t = this._min(), i = this._max();
+    t != null ? this._input.setAttribute("aria-valuemin", String(t)) : this._input.removeAttribute("aria-valuemin"), i != null ? this._input.setAttribute("aria-valuemax", String(i)) : this._input.removeAttribute("aria-valuemax"), e != null ? this._input.setAttribute("aria-valuenow", String(e)) : this._input.removeAttribute("aria-valuenow");
+    const r = this.root.querySelector('slot[name="label"]'), n = this.root.querySelector('slot[name="description"]'), a = this.root.querySelector('slot[name="error"]'), l = !!(this.getAttribute("label") || "").trim() || d(r), u = !!(this.getAttribute("description") || "").trim() || d(n), o = !!(this.getAttribute("data-error") || "").trim() || d(a);
+    l ? this._input.setAttribute("aria-labelledby", `${this._uid}-label`) : this._input.removeAttribute("aria-labelledby");
+    const c = [];
+    u && c.push(`${this._uid}-description`), o && c.push(`${this._uid}-error`), c.length ? this._input.setAttribute("aria-describedby", c.join(" ")) : this._input.removeAttribute("aria-describedby"), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required"), this.hasAttribute("invalid") || this._internalInvalidReason != null || o ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid");
+  }
+  _syncDerivedState() {
+    const e = this.root.querySelector('slot[name="label"]'), t = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = this.root.querySelector('slot[name="prefix"]'), n = this.root.querySelector('slot[name="suffix"]'), a = this.root.querySelector('slot[name="increment-trigger"]'), l = this.root.querySelector('slot[name="decrement-trigger"]'), u = !!(this.getAttribute("label") || "").trim() || d(e), o = !!(this.getAttribute("description") || "").trim() || d(t), c = !!(this.getAttribute("data-error") || "").trim() || d(i), v = d(r), w = d(n), S = d(a), V = d(l), y = p(this, "show-steppers") || S || V, h = (k, E) => {
+      const b = this.root.querySelector(k);
+      b && (E ? b.removeAttribute("hidden") : b.setAttribute("hidden", ""));
+    };
+    h(".meta", u || o), h(".label", u), h(".description", o), h(".prefix", v), h(".suffix", w), h(".footer", c), h(".error", c), h(".steppers", y);
+    const x = this.root.querySelector(".shell");
+    x && x.setAttribute("data-show-steppers", y ? "true" : "false");
+  }
+  _emitValueEvent(e, t, i, r) {
+    this.dispatchEvent(
+      new CustomEvent(e, {
+        detail: { value: t, previousValue: i, source: r },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _emitInvalid(e) {
+    this._internalInvalidReason = e, this.setAttribute("data-internal-invalid", e), this._syncAria(), this.dispatchEvent(
+      new CustomEvent("invalid", {
+        detail: { reason: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _clearInternalInvalid() {
+    this._internalInvalidReason = null, this.removeAttribute("data-internal-invalid"), this._syncAria();
+  }
+  _commitValue(e, t) {
+    const i = this.valueAsNumber;
+    if (e == null) {
+      if (i == null && !this.value) {
+        this._rawValue = "", this._syncDisplayValue();
+        return;
+      }
+      this._emitValueEvent("before-value-change", null, i, t), this.removeAttribute("value"), this._rawValue = "", this._clearInternalInvalid(), this._syncDisplayValue(), this._syncAria(), this._emitValueEvent("value-change", null, i, t);
+      return;
+    }
+    const r = this._effectivePrecision(), n = F(m(e, r), r), a = Number(n);
+    if (i != null && a === i && this.value === n) {
+      this._rawValue = n, this._clearInternalInvalid(), this._syncDisplayValue();
+      return;
+    }
+    this._emitValueEvent("before-value-change", a, i, t), this.setAttribute("value", n), this._rawValue = n, this._clearInternalInvalid(), this._syncDisplayValue(), this._syncAria(), this._emitValueEvent("value-change", a, i, t);
+  }
+  _commitRaw(e) {
+    const t = this._rawValue.trim();
+    if (!t) {
+      this._commitValue(null, e);
+      return;
+    }
+    const i = _(t, this._locale());
+    if (i == null) {
+      this._emitInvalid("parse"), this._syncDisplayValue();
+      return;
+    }
+    const r = this._min(), n = this._max(), a = this._effectivePrecision(), l = m(i, a), u = p(this, "clamp-on-blur"), o = u ? A(l, r, n) : l;
+    if (!u && r != null && o < r) {
+      this._emitInvalid("min"), this._syncDisplayValue();
+      return;
+    }
+    if (!u && n != null && o > n) {
+      this._emitInvalid("max"), this._syncDisplayValue();
+      return;
+    }
+    const c = this._step();
+    if (!B(o, c, N(r), a)) {
+      this._emitInvalid("step"), this._syncDisplayValue();
+      return;
+    }
+    this._commitValue(o, e);
+  }
+  _stepBy(e, t) {
+    if (p(this, "disabled") || this.hasAttribute("readonly"))
+      return;
+    const i = this._step() ?? 1, r = this._effectivePrecision(), n = this._min(), a = this._max(), u = (this._isEditing ? _(this._rawValue, this._locale()) : this.valueAsNumber) ?? n ?? 0, o = A(m(u + i * e, r), n, a);
+    this._commitValue(o, t), this._isEditing && this._input && (this._input.value = this._rawValue);
+  }
+  _registerWithForm() {
+    var e;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const i = this.getRootNode().host, n = ((e = i == null ? void 0 : i.closest) == null ? void 0 : e.call(i, "ui-form")) || null || this.closest("ui-form"), a = this.getAttribute("name");
+      n && typeof n.registerField == "function" && a && (this._formUnregister = n.registerField(a, {
+        name: a,
+        getValue: () => this.value,
+        setValue: (l) => {
+          l == null || l === "" ? this.removeAttribute("value") : this.setAttribute("value", String(l));
+        },
+        validate: async () => {
+          const l = this.valueAsNumber, u = this._min(), o = this._max();
+          return this.hasAttribute("required") && l == null ? { valid: !1, message: "A value is required." } : l != null && u != null && l < u ? { valid: !1, message: `Value must be at least ${u}.` } : l != null && o != null && l > o ? { valid: !1, message: `Value must be at most ${o}.` } : { valid: this._internalInvalidReason == null, message: void 0 };
+        },
+        setError: (l) => {
+          l ? (this.setAttribute("data-error", l), this.toggleAttribute("invalid", !0)) : (this.removeAttribute("data-error"), this._internalInvalidReason == null && this.removeAttribute("invalid")), this._syncDerivedState(), this._syncAria();
+        }
+      }));
+    } catch {
+    }
+  }
+  _detachListeners() {
+    this._input && (this._input.removeEventListener("input", this._onInput), this._input.removeEventListener("focus", this._onFocus), this._input.removeEventListener("blur", this._onBlur), this._input.removeEventListener("keydown", this._onKeyDown), this._input.removeEventListener("wheel", this._onWheel));
+  }
+  _bindInput() {
+    this._input && (this._detachListeners(), this._input.addEventListener("input", this._onInput), this._input.addEventListener("focus", this._onFocus), this._input.addEventListener("blur", this._onBlur), this._input.addEventListener("keydown", this._onKeyDown), this._input.addEventListener("wheel", this._onWheel, { passive: !1 }));
+  }
+  _onInput(e) {
+    this._rawValue = e.target.value, this._syncDisplayValue(), this._syncAria();
+    const t = _(this._rawValue, this._locale());
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { rawValue: this._rawValue, value: t, source: "input" },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _onFocus() {
+    this._isEditing = !0, this._rawValue = this.value || this._rawValue, this._syncDisplayValue(), this._syncAria();
+  }
+  _onBlur() {
+    this._isEditing = !1, this._commitRaw("blur");
+  }
+  _onKeyDown(e) {
+    if (e.key === "ArrowUp") {
+      e.preventDefault(), this._stepBy(1, "keyboard");
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault(), this._stepBy(-1, "keyboard");
+      return;
+    }
+    if (e.key === "PageUp") {
+      e.preventDefault(), this._stepBy(10, "keyboard");
+      return;
+    }
+    if (e.key === "PageDown") {
+      e.preventDefault(), this._stepBy(-10, "keyboard");
+      return;
+    }
+    if (e.key === "Home") {
+      const t = this._min();
+      if (t == null)
+        return;
+      e.preventDefault(), this._commitValue(t, "keyboard");
+      return;
+    }
+    if (e.key === "End") {
+      const t = this._max();
+      if (t == null)
+        return;
+      e.preventDefault(), this._commitValue(t, "keyboard");
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault(), this._isEditing = !1, this._commitRaw("keyboard");
+      return;
+    }
+    e.key === "Escape" && (this._isEditing = !1, this._rawValue = this.value, this._clearInternalInvalid(), this._syncDisplayValue());
+  }
+  _onWheel(e) {
+    p(this, "allow-wheel") && (!this._input || this.root.activeElement !== this._input || (e.preventDefault(), this._stepBy(e.deltaY < 0 ? 1 : -1, "wheel")));
+  }
+  _onClick(e) {
+    const i = e.composedPath().find((r) => r instanceof HTMLElement ? r.dataset.stepAction === "up" || r.dataset.stepAction === "down" || r.getAttribute("slot") === "increment-trigger" || r.getAttribute("slot") === "decrement-trigger" : !1);
+    if (i) {
+      if (i.dataset.stepAction === "up" || i.getAttribute("slot") === "increment-trigger") {
+        e.preventDefault(), this._stepBy(1, "step");
+        return;
+      }
+      (i.dataset.stepAction === "down" || i.getAttribute("slot") === "decrement-trigger") && (e.preventDefault(), this._stepBy(-1, "step"));
+    }
+  }
+  _onSlotChange() {
+    this._syncDerivedState(), this._syncAria();
+  }
+  render() {
+    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("data-error") || "";
+    this.setContent(`
+      <style>${D}</style>
+      <div class="root">
+        <div class="meta">
+          <label class="label" id="${this._uid}-label">
+            <slot name="label">${f(e)}</slot>
+            <span class="required" ${this.hasAttribute("required") ? "" : "hidden"}>*</span>
+          </label>
+          <p class="description" id="${this._uid}-description">
+            <slot name="description">${f(t)}</slot>
+          </p>
+        </div>
+        <div class="shell">
+          <span class="prefix" hidden><slot name="prefix"></slot></span>
+          <div class="control">
+            <input type="text" spellcheck="false" />
+          </div>
+          <span class="suffix" hidden><slot name="suffix"></slot></span>
+          <div class="steppers">
+            <span class="stepper-slot">
+              <slot name="decrement-trigger">
+                <button class="stepper-btn" type="button" data-step-action="down" aria-label="Decrease value"><span class="stepper-icon" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 8.5L2.5 5h7L6 8.5z"/></svg></span></button>
+              </slot>
+            </span>
+            <span class="stepper-slot">
+              <slot name="increment-trigger">
+                <button class="stepper-btn" type="button" data-step-action="up" aria-label="Increase value"><span class="stepper-icon" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 3.5L9.5 7H2.5L6 3.5z"/></svg></span></button>
+              </slot>
+            </span>
+          </div>
+        </div>
+        <div class="footer">
+          <p class="error" id="${this._uid}-error">
+            <slot name="error">${f(i)}</slot>
+          </p>
+        </div>
+      </div>
+    `), this._input = this.root.querySelector("input"), this._rawValue = this.value || this._rawValue, this._bindInput(), this._syncControlAttrs(), this._syncDerivedState(), this._syncDisplayValue(), this._syncAria();
+  }
+}
+customElements.get("ui-number-field") || customElements.define("ui-number-field", L);
+export {
+  L as UINumberField
+};