@editora/ui-core 0.1.21 → 0.1.23

package/dist/multi-select.esm.js

@@ -1,15 +1,16 @@
-import { E as T } from "./ElementBase-YlTLMsGk.mjs";
-import { n as w } from "./collection-C7URGjEI.mjs";
-import "./listbox-DJamVeFj.mjs";
-let R = 0;
-const K = `
+import { E as T } from "./ElementBase-BeZT54Hj.mjs";
+import { a as R } from "./control-name-Bpj7F34X.mjs";
+import { n as z } from "./collection-C7URGjEI.mjs";
+import "./listbox-hMVOhKHC.mjs";
+let K = 0;
+const W = `
   :host {
     --ui-multi-select-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 82%, transparent);
     --ui-multi-select-border: var(--base-multi-select-border, 1px solid var(--ui-multi-select-border-color));
     --ui-multi-select-radius: var(--base-multi-select-radius, var(--ui-radius, 4px));
     --ui-multi-select-bg: var(--base-multi-select-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-multi-select-text: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-multi-select-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-multi-select-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-multi-select-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-multi-select-danger: var(--ui-color-danger, #dc2626);
     --ui-multi-select-accent: var(--ui-color-primary, #2563eb);
@@ -495,9 +496,9 @@ const K = `
   }
 
   :host([tone="neutral"]) {
-    --ui-multi-select-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 62%, var(--ui-color-text, #0f172a));
-    --ui-multi-select-focus: color-mix(in srgb, var(--ui-color-muted, #64748b) 62%, var(--ui-color-text, #0f172a));
-    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-muted, #64748b) 12%, transparent);
+    --ui-multi-select-accent: color-mix(in srgb, var(--ui-color-muted, #526175) 62%, var(--ui-color-text, #0f172a));
+    --ui-multi-select-focus: color-mix(in srgb, var(--ui-color-muted, #526175) 62%, var(--ui-color-text, #0f172a));
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-muted, #526175) 12%, transparent);
     --ui-multi-select-chip-text: var(--ui-multi-select-text);
   }
 
@@ -507,17 +508,17 @@ const K = `
   }
 
   :host([tone="success"]) {
-    --ui-multi-select-accent: var(--ui-color-success, #16a34a);
-    --ui-multi-select-focus: var(--ui-color-success, #16a34a);
-    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 12%, transparent);
-    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-success, #16a34a) 82%, #0f172a 18%);
+    --ui-multi-select-accent: var(--ui-color-success, #15803d);
+    --ui-multi-select-focus: var(--ui-color-success, #15803d);
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, transparent);
+    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-success, #15803d) 82%, #0f172a 18%);
   }
 
   :host([tone="warning"]) {
-    --ui-multi-select-accent: var(--ui-color-warning, #d97706);
-    --ui-multi-select-focus: var(--ui-color-warning, #d97706);
-    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 12%, transparent);
-    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-warning, #d97706) 82%, #0f172a 18%);
+    --ui-multi-select-accent: var(--ui-color-warning, #b45309);
+    --ui-multi-select-focus: var(--ui-color-warning, #b45309);
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 12%, transparent);
+    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-warning, #b45309) 82%, #0f172a 18%);
   }
 
   :host([tone="danger"]) {
@@ -573,12 +574,12 @@ function v(r) {
 function L(r) {
   return !r || r === "default" ? null : r === "none" || r === "square" ? "0px" : r === "sm" ? "8px" : r === "md" || r === "soft" ? "12px" : r === "lg" ? "16px" : r === "full" ? "999px" : /^\d+(\.\d+)?$/.test(r) ? `${r}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(r) ? r : null;
 }
-function W(r) {
+function H(r) {
   return r === "sm" || r === "1" ? "sm" : r === "lg" || r === "3" ? "lg" : "md";
 }
-class H extends T {
+class M extends T {
   constructor() {
-    super(), this._options = [], this._selected = [], this._query = "", this._inputEl = null, this._shellEl = null, this._panelEl = null, this._formUnregister = null, this._outsidePointerDown = null, this._activeValue = null, this._uid = `ui-multi-select-${++R}`, this._isSyncingUi = !1, this._needsSyncUi = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onToggle = this._onToggle.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this);
+    super(), this._options = [], this._selected = [], this._query = "", this._inputEl = null, this._shellEl = null, this._panelEl = null, this._formUnregister = null, this._outsidePointerDown = null, this._activeValue = null, this._uid = `ui-multi-select-${++K}`, this._isSyncingUi = !1, this._needsSyncUi = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onToggle = this._onToggle.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -587,6 +588,8 @@ class H extends T {
       "placeholder",
       "label",
       "aria-label",
+      "aria-description",
+      "aria-describedby",
       "description",
       "data-error",
       "name",
@@ -644,11 +647,11 @@ class H extends T {
   }
   render() {
     this.setContent(`
-      <style>${K}</style>
+      <style>${W}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text" id="${this._uid}-label"></span><span class="required" hidden>*</span></div>
-          <div class="description" hidden></div>
+          <div class="description" id="${this._uid}-description" hidden></div>
         </div>
         <div class="shell" part="shell" data-open="false" data-invalid="false">
           <div class="value-area" part="value-area">
@@ -674,7 +677,7 @@ class H extends T {
     e ? this.style.setProperty("--ui-multi-select-radius", e) : this.style.removeProperty("--ui-multi-select-radius");
     const t = L(this.getAttribute("option-radius"));
     t ? this.style.setProperty("--ui-multi-select-option-radius", t) : this.style.removeProperty("--ui-multi-select-option-radius");
-    const s = W(this.getAttribute("size"));
+    const s = H(this.getAttribute("size"));
     this.setAttribute("data-size", s);
   }
   _selectionIndicator() {
@@ -694,8 +697,8 @@ class H extends T {
     !this._outsidePointerDown || typeof document > "u" || (document.removeEventListener("pointerdown", this._outsidePointerDown), this._outsidePointerDown = null);
   }
   _filteredOptions() {
-    const e = w(this._query);
-    return e ? this._options.filter((t) => w(t.label).includes(e) || w(t.value).includes(e)) : this._options;
+    const e = z(this._query);
+    return e ? this._options.filter((t) => z(t.label).includes(e) || z(t.value).includes(e)) : this._options;
   }
   _renderLimit() {
     const e = Number(this.getAttribute("render-limit"));
@@ -829,7 +832,7 @@ class H extends T {
     if (!(!this._shellEl || !this._inputEl || !this._panelEl)) {
       this._isSyncingUi = !0;
       try {
-        const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), l = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), c = this.root.querySelector(".required"), p = this.root.querySelector(".description"), N = this.root.querySelector(".chips"), z = this.root.querySelector(".toggle"), S = this.root.querySelector(".clear"), U = this.root.querySelector(".error"), C = this._selectionIndicator(), q = this.hasAttribute("loading"), O = (this.getAttribute("loading-text") || "Loading options...").trim(), b = this.hasAttribute("disabled"), m = this.hasAttribute("readonly"), D = this.hasAttribute("clearable");
+        const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), l = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), c = this.root.querySelector(".required"), p = this.root.querySelector(".description"), N = this.root.querySelector(".chips"), S = this.root.querySelector(".toggle"), U = this.root.querySelector(".clear"), x = this.root.querySelector(".error"), C = this._selectionIndicator(), q = this.hasAttribute("loading"), O = (this.getAttribute("loading-text") || "Loading options...").trim(), m = this.hasAttribute("disabled"), b = this.hasAttribute("readonly"), D = this.hasAttribute("clearable");
         if (l.hidden = !e && !t, n.hidden = !e, a.textContent = e, e)
           this._inputEl.setAttribute("aria-labelledby", `${this._uid}-label`), this._inputEl.removeAttribute("aria-label");
         else {
@@ -837,7 +840,12 @@ class H extends T {
           const i = (this.getAttribute("aria-label") || "").trim();
           i ? this._inputEl.setAttribute("aria-label", i) : this._inputEl.removeAttribute("aria-label");
         }
-        c.hidden = !this.hasAttribute("required"), p.hidden = !t, p.textContent = t, U.hidden = !s, U.textContent = s, this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", m ? "true" : "false"), z.setAttribute("data-open", this.open ? "true" : "false"), z.disabled = b || m, S.hidden = !D || this._selected.length === 0, S.disabled = b || m, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", q ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = b, this._inputEl.readOnly = m, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), N.replaceChildren(...this._selectedOptionRecords().map((i) => {
+        c.hidden = !this.hasAttribute("required"), p.hidden = !t, p.textContent = t, x.hidden = !s, x.textContent = s, x.id = `${this._uid}-error`, R(
+          this._inputEl,
+          this,
+          this._uid,
+          [t ? `${this._uid}-description` : "", s ? `${this._uid}-error` : ""].filter(Boolean)
+        ), this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", b ? "true" : "false"), m ? this._shellEl.setAttribute("aria-disabled", "true") : this._shellEl.removeAttribute("aria-disabled"), S.setAttribute("data-open", this.open ? "true" : "false"), S.disabled = m || b, U.hidden = !D || this._selected.length === 0, U.disabled = m || b, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", q ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = m, this._inputEl.readOnly = b, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), N.replaceChildren(...this._selectedOptionRecords().map((i) => {
           const h = document.createElement("span");
           h.className = "chip", h.textContent = i.label;
           const d = document.createElement("button");
@@ -847,34 +855,34 @@ class H extends T {
             o.preventDefault(), o.stopPropagation(), this._removeChip(i.value), this._inputEl?.focus();
           }), h.append(d), h;
         }));
-        const x = this._filteredOptions(), F = this._renderLimit(), _ = x.slice(0, F), V = x.length > _.length;
+        const _ = this._filteredOptions(), F = this._renderLimit(), y = _.slice(0, F), V = _.length > y.length;
         if (this._panelEl.hidden = !this.open, q) {
           const i = document.createElement("div");
           i.className = "status", i.textContent = O, this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
-        if (!x.length) {
+        if (!_.length) {
           const i = document.createElement("div");
           i.className = "status", i.textContent = "No matching options", this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
-        const B = new Set(this._selected), P = this._panelEl.getActiveItem()?.getAttribute("data-value"), g = [];
-        let y = null;
-        if (_.forEach((i, h) => {
-          if (i.group && i.group !== y) {
+        const $ = new Set(this._selected), B = this._panelEl.getActiveItem()?.getAttribute("data-value"), g = [];
+        let E = null;
+        if (y.forEach((i, h) => {
+          if (i.group && i.group !== E) {
             const u = document.createElement("div");
-            u.className = "group", u.setAttribute("role", "presentation"), u.textContent = i.group, g.push(u), y = i.group;
-          } else i.group || (y = null);
-          const d = B.has(i.value), o = document.createElement("button");
-          o.className = "option", o.type = "button", o.id = `${this._uid}-option-${h}`, o.setAttribute("role", "option"), o.setAttribute("data-value", i.value), o.setAttribute("data-selected", String(d)), o.setAttribute("data-indicator", C), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || b || m) && (o.disabled = !0), o.addEventListener("pointerdown", (u) => {
+            u.className = "group", u.setAttribute("role", "presentation"), u.textContent = i.group, g.push(u), E = i.group;
+          } else i.group || (E = null);
+          const d = $.has(i.value), o = document.createElement("button");
+          o.className = "option", o.type = "button", o.id = `${this._uid}-option-${h}`, o.setAttribute("role", "option"), o.setAttribute("data-value", i.value), o.setAttribute("data-selected", String(d)), o.setAttribute("data-indicator", C), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || m || b) && (o.disabled = !0), o.addEventListener("pointerdown", (u) => {
             u.preventDefault();
           }), o.addEventListener("click", (u) => {
             u.preventDefault(), !i.disabled && (this._activeValue = i.value, this._toggleValue(i.value, "option"), this._query = "", this._inputEl && (this._inputEl.value = ""), this._inputEl?.focus());
           });
           const f = document.createElement("div");
           f.className = "option-text";
-          const k = document.createElement("span");
-          if (k.className = "option-label", k.textContent = i.label, f.append(k), i.description) {
+          const w = document.createElement("span");
+          if (w.className = "option-label", w.textContent = i.label, f.append(w), i.description) {
             const u = document.createElement("span");
             u.className = "option-description", u.textContent = i.description, f.append(u);
           }
@@ -885,18 +893,18 @@ class H extends T {
           o.append(f), g.push(o);
         }), V) {
           const i = document.createElement("div");
-          i.className = "status", i.textContent = `Showing first ${_.length} results. Keep typing to narrow the list.`, g.push(i);
+          i.className = "status", i.textContent = `Showing first ${y.length} results. Keep typing to narrow the list.`, g.push(i);
         }
         this._panelEl.replaceChildren(...g);
-        const $ = P || this._activeValue || this._selected[this._selected.length - 1] || null, E = this._findOptionNode($), A = E && !E.hasAttribute("disabled") ? this._panelEl.setActiveItem(E, { focus: !1, owner: this._inputEl, scroll: !1 }) : (this._panelEl.clearActive(), null);
-        this._activeValue = A?.getAttribute("data-value") || null, A?.id ? this._inputEl.setAttribute("aria-activedescendant", A.id) : this._inputEl.removeAttribute("aria-activedescendant");
+        const P = B || this._activeValue || this._selected[this._selected.length - 1] || null, A = this._findOptionNode(P), k = A && !A.hasAttribute("disabled") ? this._panelEl.setActiveItem(A, { focus: !1, owner: this._inputEl, scroll: !1 }) : (this._panelEl.clearActive(), null);
+        this._activeValue = k?.getAttribute("data-value") || null, k?.id ? this._inputEl.setAttribute("aria-activedescendant", k.id) : this._inputEl.removeAttribute("aria-activedescendant");
       } finally {
         this._isSyncingUi = !1, this._needsSyncUi && (this._needsSyncUi = !1, this._syncUi());
       }
     }
   }
 }
-typeof customElements < "u" && !customElements.get("ui-multi-select") && customElements.define("ui-multi-select", H);
+typeof customElements < "u" && !customElements.get("ui-multi-select") && customElements.define("ui-multi-select", M);
 export {
-  H as UIMultiSelect
+  M as UIMultiSelect
 };

package/dist/navigation-menu.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-EV6mVBUV.js"),_=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-DxbvhLJs.js"),_=`
   :host {
     display: block;
     position: relative;
@@ -297,7 +297,7 @@
   }
 
   :host([tone="neutral"]) {
-    --ui-nav-ring: color-mix(in srgb, var(--ui-color-muted, #64748b) 60%, var(--ui-color-text, #0f172a));
+    --ui-nav-ring: color-mix(in srgb, var(--ui-color-muted, #526175) 60%, var(--ui-color-text, #0f172a));
   }
 
   :host([tone="info"]) {

package/dist/navigation-menu.esm.js

@@ -1,4 +1,4 @@
-import { E as f } from "./ElementBase-YlTLMsGk.mjs";
+import { E as f } from "./ElementBase-BeZT54Hj.mjs";
 const _ = `
   :host {
     display: block;
@@ -298,7 +298,7 @@ const _ = `
   }
 
   :host([tone="neutral"]) {
-    --ui-nav-ring: color-mix(in srgb, var(--ui-color-muted, #64748b) 60%, var(--ui-color-text, #0f172a));
+    --ui-nav-ring: color-mix(in srgb, var(--ui-color-muted, #526175) 60%, var(--ui-color-text, #0f172a));
   }
 
   :host([tone="info"]) {

package/dist/number-field.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("./ElementBase-EV6mVBUV.js"),z=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const z=require("./ElementBase-DxbvhLJs.js"),A=require("./control-name-BmoI1m3a.js"),N=`
   :host {
     --ui-number-field-padding: var(--ui-padding, 10px 12px);
     --ui-number-field-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
@@ -11,7 +11,7 @@
     --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-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --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;
@@ -148,13 +148,15 @@
     color: var(--ui-number-field-placeholder);
   }
 
+  /* Side by side, not stacked: stacked, each button was about 20px tall (under the 24px target size of
+     WCAG 2.5.8). Each one is now at least 24px wide and as tall as the field. */
   .steppers {
     flex: 0 0 auto;
     display: grid;
-    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     align-self: stretch;
     align-items: stretch;
-    inline-size: 28px;
+    inline-size: 56px;
     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);
@@ -221,10 +223,6 @@
     display: block;
   }
 
-  .stepper-slot:last-child .stepper-icon {
-    transform: translateY(0.5px);
-  }
-
   .footer {
     min-inline-size: 0;
     display: flex;
@@ -263,7 +261,7 @@
   }
 
   :host([size="sm"]) .steppers {
-    inline-size: 24px;
+    inline-size: 48px;
   }
 
   :host([size="sm"]) .stepper-icon {
@@ -278,7 +276,7 @@
   }
 
   :host([size="lg"]) .steppers {
-    inline-size: 32px;
+    inline-size: 64px;
   }
 
   :host([size="lg"]) .stepper-icon {
@@ -311,8 +309,8 @@
       transition: none !important;
     }
   }
-`;function f(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function d(r){if(!r)return!1;const e=r.assignedNodes({flatten:!0});return e.length?e.some(t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE):!1}function p(r,e){const t=r.getAttribute(e);if(t==null)return!1;const i=String(t).trim().toLowerCase();return i!=="false"&&i!=="0"}function g(r){if(r==null||r.trim()==="")return null;const e=Number(r);return Number.isFinite(e)?e:null}function N(r){const e=String(r),t=e.match(/e-(\d+)$/i);if(t)return Number(t[1]);const i=e.split(".")[1];return i?i.length:0}function m(r,e){if(e==null||e<0)return r;const t=10**e;return Math.round((r+Number.EPSILON)*t)/t}function A(r,e,t){return e!=null&&r<e?e:t!=null&&r>t?t:r}function B(r){return r??0}function C(r,e,t,i){if(e==null||e<=0)return!0;const s=m((r-t)/e,i!=null?i+2:8);return Math.abs(s-Math.round(s))<1e-7}function F(r){const e=new Intl.NumberFormat(r).formatToParts(12345.6);return{group:e.find(t=>t.type==="group")?.value||",",decimal:e.find(t=>t.type==="decimal")?.value||"."}}function _(r,e){const t=r.trim();if(!t)return null;const{group:i,decimal:s}=F(e);let n=t.replace(/[\s\u00a0\u202f]/g,"");if(n=n.split(i).join(""),s!=="."&&(n=n.split(s).join(".")),n=n.replace(/[−–]/g,"-"),!/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(n))return null;const l=Number(n);return Number.isFinite(l)?l:null}function L(r,e){return e!=null&&e>=0?r.toFixed(e):String(r)}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(){this._input?.blur()}select(){this._input?.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 s=this.root.querySelector('slot[name="label"]'),n=this.root.querySelector('slot[name="description"]'),l=this.root.querySelector('slot[name="error"]'),u=!!(this.getAttribute("label")||"").trim()||d(s),a=!!(this.getAttribute("description")||"").trim()||d(n),o=!!(this.getAttribute("data-error")||"").trim()||d(l);u?this._input.setAttribute("aria-labelledby",`${this._uid}-label`):this._input.removeAttribute("aria-labelledby");const c=[];a&&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"]'),s=this.root.querySelector('slot[name="prefix"]'),n=this.root.querySelector('slot[name="suffix"]'),l=this.root.querySelector('slot[name="increment-trigger"]'),u=this.root.querySelector('slot[name="decrement-trigger"]'),a=!!(this.getAttribute("label")||"").trim()||d(e),o=!!(this.getAttribute("description")||"").trim()||d(t),c=!!(this.getAttribute("data-error")||"").trim()||d(i),v=d(s),S=d(n),V=d(l),k=d(u),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",a||o),h(".label",a),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,s){this.dispatchEvent(new CustomEvent(e,{detail:{value:t,previousValue:i,source:s},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 s=this._effectivePrecision(),n=L(m(e,s),s),l=Number(n);if(i!=null&&l===i&&this.value===n){this._rawValue=n,this._clearInternalInvalid(),this._syncDisplayValue();return}this._emitValueEvent("before-value-change",l,i,t),this.setAttribute("value",n),this._rawValue=n,this._clearInternalInvalid(),this._syncDisplayValue(),this._syncAria(),this._emitValueEvent("value-change",l,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 s=this._min(),n=this._max(),l=this._effectivePrecision(),u=m(i,l),a=p(this,"clamp-on-blur"),o=a?A(u,s,n):u;if(!a&&s!=null&&o<s){this._emitInvalid("min"),this._syncDisplayValue();return}if(!a&&n!=null&&o>n){this._emitInvalid("max"),this._syncDisplayValue();return}const c=this._step();if(!C(o,c,B(s),l)){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,s=this._effectivePrecision(),n=this._min(),l=this._max(),a=(this._isEditing?_(this._rawValue,this._locale()):this.valueAsNumber)??n??0,o=A(m(a+i*e,s),n,l);this._commitValue(o,t),this._isEditing&&this._input&&(this._input.value=this._rawValue)}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");s&&typeof s.registerField=="function"&&n&&(this._formUnregister=s.registerField(n,{name:n,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(),a=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&&a!=null&&l>a?{valid:!1,message:`Value must be at most ${a}.`}:{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(s=>s instanceof HTMLElement?s.dataset.stepAction==="up"||s.dataset.stepAction==="down"||s.getAttribute("slot")==="increment-trigger"||s.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>
+`;function f(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function d(r){if(!r)return!1;const e=r.assignedNodes({flatten:!0});return e.length?e.some(t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE):!1}function p(r,e){const t=r.getAttribute(e);if(t==null)return!1;const i=String(t).trim().toLowerCase();return i!=="false"&&i!=="0"}function g(r){if(r==null||r.trim()==="")return null;const e=Number(r);return Number.isFinite(e)?e:null}function B(r){const e=String(r),t=e.match(/e-(\d+)$/i);if(t)return Number(t[1]);const i=e.split(".")[1];return i?i.length:0}function m(r,e){if(e==null||e<0)return r;const t=10**e;return Math.round((r+Number.EPSILON)*t)/t}function w(r,e,t){return e!=null&&r<e?e:t!=null&&r>t?t:r}function C(r){return r??0}function q(r,e,t,i){if(e==null||e<=0)return!0;const s=m((r-t)/e,i!=null?i+2:8);return Math.abs(s-Math.round(s))<1e-7}function F(r){const e=new Intl.NumberFormat(r).formatToParts(12345.6);return{group:e.find(t=>t.type==="group")?.value||",",decimal:e.find(t=>t.type==="decimal")?.value||"."}}function _(r,e){const t=r.trim();if(!t)return null;const{group:i,decimal:s}=F(e);let n=t.replace(/[\s\u00a0\u202f]/g,"");if(n=n.split(i).join(""),s!=="."&&(n=n.split(s).join(".")),n=n.replace(/[−–]/g,"-"),!/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(n))return null;const l=Number(n);return Number.isFinite(l)?l:null}function L(r,e){return e!=null&&e>=0?r.toFixed(e):String(r)}class S extends z.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","aria-label","aria-description","aria-describedby","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"||e==="aria-label"||e==="aria-description"||e==="aria-describedby"){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(){this._input?.blur()}select(){this._input?.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?B(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.disabled?this.root.querySelector(".shell")?.setAttribute("aria-disabled","true"):this.root.querySelector(".shell")?.removeAttribute("aria-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 s=this.root.querySelector('slot[name="label"]'),n=this.root.querySelector('slot[name="description"]'),l=this.root.querySelector('slot[name="error"]'),u=!!(this.getAttribute("label")||"").trim()||d(s),a=!!(this.getAttribute("description")||"").trim()||d(n),o=!!(this.getAttribute("data-error")||"").trim()||d(l);A.syncControlName(this._input,this,u?`${this._uid}-label`:null);const c=[];a&&c.push(`${this._uid}-description`),o&&c.push(`${this._uid}-error`),A.syncControlDescription(this._input,this,this._uid,c),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"]'),s=this.root.querySelector('slot[name="prefix"]'),n=this.root.querySelector('slot[name="suffix"]'),l=this.root.querySelector('slot[name="increment-trigger"]'),u=this.root.querySelector('slot[name="decrement-trigger"]'),a=!!(this.getAttribute("label")||"").trim()||d(e),o=!!(this.getAttribute("description")||"").trim()||d(t),c=!!(this.getAttribute("data-error")||"").trim()||d(i),v=d(s),V=d(n),k=d(l),E=d(u),y=p(this,"show-steppers")||k||E,h=(I,D)=>{const b=this.root.querySelector(I);b&&(D?b.removeAttribute("hidden"):b.setAttribute("hidden",""))};h(".meta",a||o),h(".label",a),h(".description",o),h(".prefix",v),h(".suffix",V),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,s){this.dispatchEvent(new CustomEvent(e,{detail:{value:t,previousValue:i,source:s},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 s=this._effectivePrecision(),n=L(m(e,s),s),l=Number(n);if(i!=null&&l===i&&this.value===n){this._rawValue=n,this._clearInternalInvalid(),this._syncDisplayValue();return}this._emitValueEvent("before-value-change",l,i,t),this.setAttribute("value",n),this._rawValue=n,this._clearInternalInvalid(),this._syncDisplayValue(),this._syncAria(),this._emitValueEvent("value-change",l,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 s=this._min(),n=this._max(),l=this._effectivePrecision(),u=m(i,l),a=p(this,"clamp-on-blur"),o=a?w(u,s,n):u;if(!a&&s!=null&&o<s){this._emitInvalid("min"),this._syncDisplayValue();return}if(!a&&n!=null&&o>n){this._emitInvalid("max"),this._syncDisplayValue();return}const c=this._step();if(!q(o,c,C(s),l)){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,s=this._effectivePrecision(),n=this._min(),l=this._max(),a=(this._isEditing?_(this._rawValue,this._locale()):this.valueAsNumber)??n??0,o=w(m(a+i*e,s),n,l);this._commitValue(o,t),this._isEditing&&this._input&&(this._input.value=this._rawValue)}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");s&&typeof s.registerField=="function"&&n&&(this._formUnregister=s.registerField(n,{name:n,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(),a=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&&a!=null&&l>a?{valid:!1,message:`Value must be at most ${a}.`}:{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(s=>s instanceof HTMLElement?s.dataset.stepAction==="up"||s.dataset.stepAction==="down"||s.getAttribute("slot")==="increment-trigger"||s.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>${N}</style>
       <div class="root">
         <div class="meta">
           <label class="label" id="${this._uid}-label">
@@ -348,4 +346,4 @@
           </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;
+    `),this._input=this.root.querySelector("input"),this._rawValue=this.value||this._rawValue,this._bindInput(),this._syncControlAttrs(),this._syncDerivedState(),this._syncDisplayValue(),this._syncAria()}}typeof customElements<"u"&&!customElements.get("ui-number-field")&&customElements.define("ui-number-field",S);exports.UINumberField=S;

package/dist/number-field.esm.js

@@ -1,5 +1,6 @@
-import { E as I } from "./ElementBase-YlTLMsGk.mjs";
-const D = `
+import { E as I } from "./ElementBase-BeZT54Hj.mjs";
+import { s as D, a as z } from "./control-name-Bpj7F34X.mjs";
+const N = `
   :host {
     --ui-number-field-padding: var(--ui-padding, 10px 12px);
     --ui-number-field-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
@@ -12,7 +13,7 @@ const D = `
     --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-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --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;
@@ -149,13 +150,15 @@ const D = `
     color: var(--ui-number-field-placeholder);
   }
 
+  /* Side by side, not stacked: stacked, each button was about 20px tall (under the 24px target size of
+     WCAG 2.5.8). Each one is now at least 24px wide and as tall as the field. */
   .steppers {
     flex: 0 0 auto;
     display: grid;
-    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     align-self: stretch;
     align-items: stretch;
-    inline-size: 28px;
+    inline-size: 56px;
     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);
@@ -222,10 +225,6 @@ const D = `
     display: block;
   }
 
-  .stepper-slot:last-child .stepper-icon {
-    transform: translateY(0.5px);
-  }
-
   .footer {
     min-inline-size: 0;
     display: flex;
@@ -264,7 +263,7 @@ const D = `
   }
 
   :host([size="sm"]) .steppers {
-    inline-size: 24px;
+    inline-size: 48px;
   }
 
   :host([size="sm"]) .stepper-icon {
@@ -279,7 +278,7 @@ const D = `
   }
 
   :host([size="lg"]) .steppers {
-    inline-size: 32px;
+    inline-size: 64px;
   }
 
   :host([size="lg"]) .stepper-icon {
@@ -332,7 +331,7 @@ function g(r) {
   const e = Number(r);
   return Number.isFinite(e) ? e : null;
 }
-function z(r) {
+function C(r) {
   const e = String(r), t = e.match(/e-(\d+)$/i);
   if (t) return Number(t[1]);
   const i = e.split(".")[1];
@@ -346,15 +345,15 @@ function m(r, e) {
 function A(r, e, t) {
   return e != null && r < e ? e : t != null && r > t ? t : r;
 }
-function N(r) {
+function B(r) {
   return r ?? 0;
 }
-function B(r, e, t, i) {
+function F(r, e, t, i) {
   if (e == null || e <= 0) return !0;
   const s = m((r - t) / e, i != null ? i + 2 : 8);
   return Math.abs(s - Math.round(s)) < 1e-7;
 }
-function C(r) {
+function q(r) {
   const e = new Intl.NumberFormat(r).formatToParts(12345.6);
   return {
     group: e.find((t) => t.type === "group")?.value || ",",
@@ -364,16 +363,16 @@ function C(r) {
 function _(r, e) {
   const t = r.trim();
   if (!t) return null;
-  const { group: i, decimal: s } = C(e);
+  const { group: i, decimal: s } = q(e);
   let n = t.replace(/[\s\u00a0\u202f]/g, "");
   if (n = n.split(i).join(""), s !== "." && (n = n.split(s).join(".")), n = n.replace(/[−–]/g, "-"), !/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(n)) return null;
   const l = Number(n);
   return Number.isFinite(l) ? l : null;
 }
-function F(r, e) {
+function L(r, e) {
   return e != null && e >= 0 ? r.toFixed(e) : String(r);
 }
-class L extends I {
+class M 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);
   }
@@ -398,6 +397,9 @@ class L extends I {
       "autocomplete",
       "inputmode",
       "label",
+      "aria-label",
+      "aria-description",
+      "aria-describedby",
       "description",
       "data-error",
       "size",
@@ -419,7 +421,7 @@ class L extends I {
         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") {
+      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" || e === "aria-label" || e === "aria-description" || e === "aria-describedby") {
         this._syncControlAttrs(), this._syncDisplayValue(), this._syncDerivedState(), this._syncAria();
         return;
       }
@@ -479,7 +481,7 @@ class L extends I {
     const e = this._precision();
     if (e != null) return e;
     const t = this._step();
-    return t != null ? z(t) : null;
+    return t != null ? C(t) : null;
   }
   _min() {
     return g(this.getAttribute("min"));
@@ -509,7 +511,7 @@ class L extends I {
   }
   _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");
+    this._input.placeholder = this.getAttribute("placeholder") || "", this._input.disabled = p(this, "disabled"), this._input.disabled ? this.root.querySelector(".shell")?.setAttribute("aria-disabled", "true") : this.root.querySelector(".shell")?.removeAttribute("aria-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");
   }
@@ -520,9 +522,9 @@ class L extends I {
     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 s = this.root.querySelector('slot[name="label"]'), n = this.root.querySelector('slot[name="description"]'), l = this.root.querySelector('slot[name="error"]'), u = !!(this.getAttribute("label") || "").trim() || d(s), a = !!(this.getAttribute("description") || "").trim() || d(n), o = !!(this.getAttribute("data-error") || "").trim() || d(l);
-    u ? this._input.setAttribute("aria-labelledby", `${this._uid}-label`) : this._input.removeAttribute("aria-labelledby");
+    D(this._input, this, u ? `${this._uid}-label` : null);
     const c = [];
-    a && 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");
+    a && c.push(`${this._uid}-description`), o && c.push(`${this._uid}-error`), z(this._input, this, this._uid, c), 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"]'), s = this.root.querySelector('slot[name="prefix"]'), n = this.root.querySelector('slot[name="suffix"]'), l = this.root.querySelector('slot[name="increment-trigger"]'), u = this.root.querySelector('slot[name="decrement-trigger"]'), a = !!(this.getAttribute("label") || "").trim() || d(e), o = !!(this.getAttribute("description") || "").trim() || d(t), c = !!(this.getAttribute("data-error") || "").trim() || d(i), v = d(s), w = d(n), S = d(l), V = d(u), y = p(this, "show-steppers") || S || V, h = (k, E) => {
@@ -564,7 +566,7 @@ class L extends I {
       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 s = this._effectivePrecision(), n = F(m(e, s), s), l = Number(n);
+    const s = this._effectivePrecision(), n = L(m(e, s), s), l = Number(n);
     if (i != null && l === i && this.value === n) {
       this._rawValue = n, this._clearInternalInvalid(), this._syncDisplayValue();
       return;
@@ -592,7 +594,7 @@ class L extends I {
       return;
     }
     const c = this._step();
-    if (!B(o, c, N(s), l)) {
+    if (!F(o, c, B(s), l)) {
       this._emitInvalid("step"), this._syncDisplayValue();
       return;
     }
@@ -701,7 +703,7 @@ class L extends I {
   render() {
     const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("data-error") || "";
     this.setContent(`
-      <style>${D}</style>
+      <style>${N}</style>
       <div class="root">
         <div class="meta">
           <label class="label" id="${this._uid}-label">
@@ -740,7 +742,7 @@ class L extends I {
     `), 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);
+typeof customElements < "u" && !customElements.get("ui-number-field") && customElements.define("ui-number-field", M);
 export {
-  L as UINumberField
+  M as UINumberField
 };