@editora/ui-core 0.1.8 → 0.1.10

package/dist/number-field.cjs.js

@@ -0,0 +1,351 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("./ElementBase-1b301e7f.js"),z=`
+  :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 N(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 B(s){return s??0}function C(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 F(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}=F(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 L(s,e){return e!=null&&e>=0?s.toFixed(e):String(s)}class w extends D.ElementBase{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?N(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),S=d(n),V=d(a),k=d(l),y=p(this,"show-steppers")||V||k,h=(E,I)=>{const b=this.root.querySelector(E);b&&(I?b.removeAttribute("hidden"):b.setAttribute("hidden",""))};h(".meta",u||o),h(".label",u),h(".description",o),h(".prefix",v),h(".suffix",S),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=L(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(!C(o,c,B(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>${z}</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",w);exports.UINumberField=w;