@vielzeug/refine 2.0.3 → 2.1.2

package/dist/navigation-menu.js

@@ -0,0 +1,138 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { lifecycleSignal as t } from "./core/ore.js";
+import { createOutsidePointerDismissal as n } from "./core/overlay.js";
+import { createDropdownPositioner as r } from "./core/positioner.js";
+import { disablableBundle as i } from "./shared/prop-bundles.js";
+import a from "./overlay/navigation-menu/navigation-menu.css.js";
+import o from "./overlay/navigation-menu/navigation-menu-item.css.js";
+import s from "./overlay/navigation-menu/navigation-menu-panel.css.js";
+import { createStableId as c, define as l, getHost as u, html as d, onCleanup as f, onMounted as p, prop as m, useEmit as h, useSlots as g } from "@vielzeug/ore";
+import { computed as _, signal as v, watch as y } from "@vielzeug/ripple";
+//#region src/overlay/navigation-menu/navigation-menu.ts
+var b = (e) => e ?? void 0, x = "ore-navigation-menu-item";
+l(x, {
+	props: {
+		disabled: m.bool(!1),
+		value: m.string("")
+	},
+	setup(e) {
+		return d`
+      <button class="trigger" type="button" ?disabled=${e.disabled}><slot></slot></button>
+    `;
+	},
+	styles: [o]
+});
+var S = "ore-navigation-menu-panel";
+l(S, {
+	props: { for: m.string() },
+	setup() {
+		let e = g();
+		return d`
+      <div class="content" part="content"><slot></slot></div>
+      <div class="footer" part="footer" ?hidden=${() => !e.has("footer").value}><slot name="footer"></slot></div>
+    `;
+	},
+	styles: [s]
+});
+var C = "ore-navigation-menu";
+l(C, {
+	props: {
+		...i,
+		"close-on-select": m.bool(!0),
+		columns: m.number(),
+		"default-open": m.string(),
+		label: m.string("Navigation menu"),
+		open: {
+			default: void 0,
+			parse: b
+		},
+		placement: m.oneOf(["bottom-end", "bottom-start"], "bottom-start")
+	},
+	setup(e) {
+		let i = u(), a = h(), o = t(f), s = c("navigation-menu"), l = _(() => e.disabled.value), m = v(null), g = null, b = null, C = null, w = () => Array.from(i.querySelectorAll(`${x}:not([disabled])`)), T = (e) => e.getAttribute("value") ?? "", E = () => Array.from(i.querySelectorAll(S)), D = (e) => E().find((t) => t.getAttribute("for") === e) ?? null, O = () => e.open.value !== void 0, k = (e) => e.id ||= c("navigation-menu-panel"), A = r({
+			getFloating: () => b,
+			getPlacement: () => e.placement.value ?? "bottom-start",
+			getReference: () => g?.shadowRoot?.querySelector(".trigger") ?? g,
+			matchWidth: !1,
+			offsetPx: 8,
+			useClippingAncestor: !1
+		}), j = () => {
+			let t = e.columns.value;
+			return t === void 0 ? void 0 : Math.max(1, Math.trunc(t));
+		}, M = (e) => {
+			if (e.hidden = !1, e.dataset.open = "", "showPopover" in e) try {
+				e.matches(":popover-open") || e.showPopover();
+			} catch {}
+		}, N = (e) => {
+			if (delete e.dataset.open, "hidePopover" in e) try {
+				e.matches(":popover-open") && e.hidePopover();
+			} catch {}
+			e.hidden = !0;
+		}, P = (e) => {
+			let t = e === null ? null : D(e);
+			C?.(), C = null, m.value = e, g = e ? w().find((t) => T(t) === e) ?? null : null, b = t;
+			for (let t of w()) {
+				let n = T(t) === e, r = t.shadowRoot?.querySelector(".trigger");
+				t.setAttribute("aria-expanded", String(n)), r?.setAttribute("aria-expanded", String(n));
+			}
+			for (let e of E()) e !== t && N(e);
+			if (t) {
+				let e = j();
+				e !== void 0 && t.style.setProperty("--navigation-menu-panel-columns", String(e)), t.setAttribute("aria-labelledby", g?.id ?? ""), M(t), A.update(), C = A.startAutoUpdate?.() ?? null;
+			}
+		}, F = (e, t) => {
+			l.value || m.value === e || e !== null && !D(e) || (O() || P(e), a("open-change", {
+				open: e !== null,
+				reason: t,
+				value: e
+			}));
+		};
+		return f(() => {
+			C?.();
+			for (let e of E()) N(e);
+		}), n({
+			getTargets: () => [i, b],
+			isActive: () => m.value !== null,
+			onDismiss: () => F(null, "outsideClick"),
+			signal: o
+		}), p(() => {
+			let t = /* @__PURE__ */ new Set();
+			for (let t of E()) t.setAttribute("popover", "manual"), t.setAttribute("role", "region"), k(t), N(t), t.addEventListener("click", (n) => {
+				let r = n.target instanceof Element ? n.target.closest("a[href]") : null;
+				if (!r || !t.contains(r)) return;
+				let i = m.value;
+				i && (a("select", {
+					href: r.href,
+					value: i
+				}), e["close-on-select"].value && !r.closest("[data-navigation-menu-keep-open]") && F(null, "select"));
+			}, { signal: o });
+			document.addEventListener("keydown", (e) => {
+				e.key === "Escape" && m.value !== null && (e.preventDefault(), F(null, "escape"), g?.shadowRoot?.querySelector(".trigger")?.focus());
+			}, { signal: o });
+			for (let e of w()) {
+				let n = T(e), r = D(n);
+				if (!n || t.has(n) || !r) continue;
+				t.add(n), e.id ||= c("navigation-menu-trigger");
+				let i = e.shadowRoot?.querySelector(".trigger");
+				i && (i.setAttribute("aria-controls", k(r)), i.setAttribute("aria-haspopup", "true"), i.setAttribute("aria-expanded", "false"), e.setAttribute("aria-expanded", "false"), i.addEventListener("click", () => F(m.value === n ? null : n, "click"), { signal: o }), i.addEventListener("keydown", (t) => {
+					let r = w(), i = r.indexOf(e);
+					t.key === "ArrowLeft" || t.key === "ArrowRight" || t.key === "Home" || t.key === "End" ? (t.preventDefault(), (t.key === "Home" ? r[0] : t.key === "End" ? r.at(-1) : r[(i + (t.key === "ArrowRight" ? 1 : r.length - 1)) % r.length])?.shadowRoot?.querySelector(".trigger")?.focus()) : t.key === "ArrowDown" && (t.preventDefault(), F(n, "keyboard"), requestAnimationFrame(() => b?.querySelector("a, button, input, [tabindex]:not([tabindex=\"-1\"])")?.focus()));
+				}, { signal: o }));
+			}
+			e.open.value === void 0 ? e["default-open"].value && P(e["default-open"].value) : P(e.open.value);
+		}), y(e.open, (e) => {
+			e !== void 0 && P(e);
+		}), y(e.disabled, (e) => {
+			e && P(null);
+		}), d`
+      <nav class="triggers" aria-label="${e.label}" id="${s}"><slot></slot></nav>
+      <slot name="panel"></slot>
+      <slot name="footer"></slot>
+    `;
+	},
+	styles: [e, a]
+});
+//#endregion
+export { x as NAVIGATION_MENU_ITEM_TAG, S as NAVIGATION_MENU_PANEL_TAG, C as NAVIGATION_MENU_TAG };
+
+//# sourceMappingURL=navigation-menu.js.map

package/dist/navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.js","names":[],"sources":["../src/overlay/navigation-menu/navigation-menu.ts"],"sourcesContent":["import { createStableId, define, getHost, html, onCleanup, onMounted, prop, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { OverlayOpenChangeDetail } from '../../core';\n\nimport { createDropdownPositioner, createOutsidePointerDismissal, lifecycleSignal } from '../../core';\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport hostStyles from './navigation-menu.css?inline';\nimport itemStyles from './navigation-menu-item.css?inline';\nimport panelStyles from './navigation-menu-panel.css?inline';\n\nexport type OreNavigationMenuEvents = {\n  'open-change': OverlayOpenChangeDetail & { value: string | null };\n  select: NavigationMenuSelectDetail;\n};\n\nexport type NavigationMenuSelectDetail = {\n  href: string;\n  value: string;\n};\n\nexport type OreNavigationMenuItemProps = {\n  disabled?: boolean;\n  value: string;\n};\n\nexport type OreNavigationMenuProps = {\n  /** Close after activating a panel link. */\n  'close-on-select'?: boolean;\n  columns?: number;\n  'default-open'?: string;\n  disabled?: boolean;\n  /** Accessible label for the trigger region. */\n  label?: string;\n  open?: string;\n  placement?: 'bottom-end' | 'bottom-start';\n};\n\nconst parseOptionalString = (value: string | null): string | undefined => value ?? undefined;\n\n/**\n * A trigger for an associated navigation menu panel.\n *\n * @element ore-navigation-menu-item\n *\n * @attr {boolean} disabled - Disables panel activation\n * @attr {string} value - Unique value matched by a panel's `for` attribute\n *\n * @slot - Trigger label and optional icon\n */\nexport const NAVIGATION_MENU_ITEM_TAG = 'ore-navigation-menu-item' as const;\ndefine<OreNavigationMenuItemProps>(NAVIGATION_MENU_ITEM_TAG, {\n  props: { disabled: prop.bool(false), value: prop.string('') },\n  setup(props) {\n    return html`\n      <button class=\"trigger\" type=\"button\" ?disabled=${props.disabled}><slot></slot></button>\n    `;\n  },\n  styles: [itemStyles],\n});\n\n/**\n * An anchored navigation menu panel associated with an item.\n *\n * @element ore-navigation-menu-panel\n *\n * @attr {string} for - Value of the associated navigation menu item\n *\n * @slot - Panel content\n * @slot footer - Optional panel footer\n *\n * @part content - Grid container for panel content\n * @part footer - Container for optional footer content\n */\nexport const NAVIGATION_MENU_PANEL_TAG = 'ore-navigation-menu-panel' as const;\ndefine<{ for?: string }>(NAVIGATION_MENU_PANEL_TAG, {\n  props: { for: prop.string() },\n  setup() {\n    const slots = useSlots();\n\n    return html`\n      <div class=\"content\" part=\"content\"><slot></slot></div>\n      <div class=\"footer\" part=\"footer\" ?hidden=${() => !slots.has('footer').value}><slot name=\"footer\"></slot></div>\n    `;\n  },\n  styles: [panelStyles],\n});\n\n/**\n * A horizontal set of triggers with anchored, non-modal navigation panels.\n *\n * @element ore-navigation-menu\n *\n * @attr {string} open - Controlled active trigger value\n * @attr {string} default-open - Initial uncontrolled active trigger value\n * @attr {boolean} close-on-select - Closes after activating a panel link\n * @attr {number} columns - Number of panel content columns\n * @attr {boolean} disabled - Disables all triggers\n * @attr {string} label - Accessible navigation region label\n * @attr {'bottom-start'|'bottom-end'} placement - Panel placement relative to its trigger\n *\n * @slot - Navigation menu items and panels\n *\n * @event open-change - Requested active panel change\n * @event select - A panel link was activated\n *\n * @cssprop --navigation-menu-panel-width - Maximum panel width\n * @cssprop --navigation-menu-panel-columns - Fallback number of panel content columns\n * @cssprop --navigation-menu-backdrop-blur - Frosted panel backdrop blur\n */\nexport const NAVIGATION_MENU_TAG = 'ore-navigation-menu' as const;\ndefine<OreNavigationMenuProps>(NAVIGATION_MENU_TAG, {\n  props: {\n    ...disablableBundle,\n    'close-on-select': prop.bool(true),\n    columns: prop.number(),\n    'default-open': prop.string(),\n    label: prop.string('Navigation menu'),\n    open: { default: undefined as string | undefined, parse: parseOptionalString },\n    placement: prop.oneOf(['bottom-end', 'bottom-start'] as const, 'bottom-start'),\n  },\n  setup(props) {\n    const host = getHost();\n    const emit = useEmit<OreNavigationMenuEvents>();\n    const abortSignal = lifecycleSignal(onCleanup);\n    const panelId = createStableId('navigation-menu');\n    const isDisabled = computed(() => props.disabled.value);\n    const activeValue = signal<string | null>(null);\n    let activeTrigger: HTMLElement | null = null;\n    let activePanel: HTMLElement | null = null;\n    let stopPositioning: (() => void) | null = null;\n\n    const items = () => Array.from(host.querySelectorAll<HTMLElement>(`${NAVIGATION_MENU_ITEM_TAG}:not([disabled])`));\n    const valueOf = (item: HTMLElement) => item.getAttribute('value') ?? '';\n    const panels = () => Array.from(host.querySelectorAll<HTMLElement>(NAVIGATION_MENU_PANEL_TAG));\n    const panelFor = (value: string) => panels().find((panel) => panel.getAttribute('for') === value) ?? null;\n    const isControlled = () => props.open.value !== undefined;\n    const panelIdFor = (panel: HTMLElement) => (panel.id ||= createStableId('navigation-menu-panel'));\n\n    const positioner = createDropdownPositioner({\n      getFloating: () => activePanel,\n      getPlacement: () => props.placement.value ?? 'bottom-start',\n      getReference: () => activeTrigger?.shadowRoot?.querySelector<HTMLElement>('.trigger') ?? activeTrigger,\n      matchWidth: false,\n      offsetPx: 8,\n      useClippingAncestor: false,\n    });\n\n    const panelColumns = (): number | undefined => {\n      const columns = props.columns.value;\n\n      return columns === undefined ? undefined : Math.max(1, Math.trunc(columns));\n    };\n\n    const showPanel = (panel: HTMLElement): void => {\n      panel.hidden = false;\n      panel.dataset.open = '';\n\n      if ('showPopover' in panel) {\n        try {\n          if (!panel.matches(':popover-open')) panel.showPopover();\n        } catch {\n          // Sandboxed documents can reject the Popover API; data-open remains the fixed-position fallback.\n        }\n      }\n    };\n\n    const hidePanel = (panel: HTMLElement): void => {\n      delete panel.dataset.open;\n\n      if ('hidePopover' in panel) {\n        try {\n          if (panel.matches(':popover-open')) panel.hidePopover();\n        } catch {\n          // The fallback visibility state is still cleared below.\n        }\n      }\n\n      panel.hidden = true;\n    };\n\n    const applyActive = (value: string | null): void => {\n      const nextPanel = value === null ? null : panelFor(value);\n\n      stopPositioning?.();\n      stopPositioning = null;\n      activeValue.value = value;\n      activeTrigger = value ? (items().find((item) => valueOf(item) === value) ?? null) : null;\n      activePanel = nextPanel;\n\n      for (const item of items()) {\n        const expanded = valueOf(item) === value;\n        const trigger = item.shadowRoot?.querySelector<HTMLElement>('.trigger');\n\n        item.setAttribute('aria-expanded', String(expanded));\n        trigger?.setAttribute('aria-expanded', String(expanded));\n      }\n      for (const panel of panels()) {\n        if (panel !== nextPanel) hidePanel(panel);\n      }\n\n      if (nextPanel) {\n        const columns = panelColumns();\n\n        if (columns !== undefined) nextPanel.style.setProperty('--navigation-menu-panel-columns', String(columns));\n\n        nextPanel.setAttribute('aria-labelledby', activeTrigger?.id ?? '');\n        showPanel(nextPanel);\n        positioner.update();\n        stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      }\n    };\n\n    const requestActive = (value: string | null, reason: OverlayOpenChangeDetail['reason']): void => {\n      if (isDisabled.value || activeValue.value === value) return;\n\n      if (value !== null && !panelFor(value)) return;\n\n      if (!isControlled()) applyActive(value);\n\n      emit('open-change', { open: value !== null, reason, value });\n    };\n\n    onCleanup(() => {\n      stopPositioning?.();\n\n      for (const panel of panels()) hidePanel(panel);\n    });\n\n    createOutsidePointerDismissal({\n      getTargets: () => [host, activePanel],\n      isActive: () => activeValue.value !== null,\n      onDismiss: () => requestActive(null, 'outsideClick'),\n      signal: abortSignal,\n    });\n\n    onMounted(() => {\n      const values = new Set<string>();\n\n      for (const panel of panels()) {\n        panel.setAttribute('popover', 'manual');\n        panel.setAttribute('role', 'region');\n        panelIdFor(panel);\n        hidePanel(panel);\n\n        panel.addEventListener(\n          'click',\n          (event) => {\n            const link = event.target instanceof Element ? event.target.closest<HTMLAnchorElement>('a[href]') : null;\n\n            if (!link || !panel.contains(link)) return;\n\n            const value = activeValue.value;\n\n            if (!value) return;\n\n            emit('select', { href: link.href, value });\n\n            if (props['close-on-select'].value && !link.closest('[data-navigation-menu-keep-open]')) {\n              requestActive(null, 'select');\n            }\n          },\n          { signal: abortSignal },\n        );\n      }\n\n      document.addEventListener(\n        'keydown',\n        (event) => {\n          if (event.key !== 'Escape' || activeValue.value === null) return;\n\n          event.preventDefault();\n          requestActive(null, 'escape');\n          activeTrigger?.shadowRoot?.querySelector<HTMLElement>('.trigger')?.focus();\n        },\n        { signal: abortSignal },\n      );\n\n      for (const item of items()) {\n        const value = valueOf(item);\n        const panel = panelFor(value);\n\n        if (!value || values.has(value) || !panel) continue;\n\n        values.add(value);\n        item.id ||= createStableId('navigation-menu-trigger');\n\n        const trigger = item.shadowRoot?.querySelector<HTMLButtonElement>('.trigger');\n\n        if (!trigger) continue;\n\n        trigger.setAttribute('aria-controls', panelIdFor(panel));\n        trigger.setAttribute('aria-haspopup', 'true');\n        trigger.setAttribute('aria-expanded', 'false');\n        item.setAttribute('aria-expanded', 'false');\n        trigger.addEventListener('click', () => requestActive(activeValue.value === value ? null : value, 'click'), {\n          signal: abortSignal,\n        });\n        trigger.addEventListener(\n          'keydown',\n          (event) => {\n            const all = items();\n            const index = all.indexOf(item);\n\n            if (\n              event.key === 'ArrowLeft' ||\n              event.key === 'ArrowRight' ||\n              event.key === 'Home' ||\n              event.key === 'End'\n            ) {\n              event.preventDefault();\n\n              const next =\n                event.key === 'Home'\n                  ? all[0]\n                  : event.key === 'End'\n                    ? all.at(-1)\n                    : all[(index + (event.key === 'ArrowRight' ? 1 : all.length - 1)) % all.length];\n\n              next?.shadowRoot?.querySelector<HTMLElement>('.trigger')?.focus();\n            } else if (event.key === 'ArrowDown') {\n              event.preventDefault();\n              requestActive(value, 'keyboard');\n              requestAnimationFrame(() =>\n                activePanel?.querySelector<HTMLElement>('a, button, input, [tabindex]:not([tabindex=\"-1\"])')?.focus(),\n              );\n            }\n          },\n          { signal: abortSignal },\n        );\n      }\n\n      if (props.open.value !== undefined) applyActive(props.open.value);\n      else if (props['default-open'].value) applyActive(props['default-open'].value);\n    });\n\n    watch(props.open, (value) => {\n      if (value !== undefined) applyActive(value);\n    });\n\n    watch(props.disabled, (disabled) => {\n      if (disabled) applyActive(null);\n    });\n\n    return html`\n      <nav class=\"triggers\" aria-label=\"${props.label}\" id=\"${panelId}\"><slot></slot></nav>\n      <slot name=\"panel\"></slot>\n      <slot name=\"footer\"></slot>\n    `;\n  },\n  styles: [reducedMotionMixin, hostStyles],\n});\n"],"mappings":"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"}

package/dist/number-input.cjs

@@ -1,32 +1,32 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/spinner.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./inputs/shared/native-field-event.cjs"),i=require("./inputs/number-input/number-input.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/ripple/watch"),c=require("@vielzeug/arsenal/math");var l=`ore-number-input`;(0,a.define)(l,{formAssociated:!0,props:{...n.themableBundle,...n.sizableBundle,...n.disablableBundle,...n.roundableBundle,error:a.prop.string(),fullwidth:a.prop.bool(!1),helper:a.prop.string(),label:a.prop.string(),"label-placement":a.prop.oneOf([`inset`,`outside`],`inset`),"large-step":a.prop.json(void 0),loading:a.prop.bool(!1),max:a.prop.json(void 0),min:a.prop.json(void 0),name:a.prop.string(),placeholder:a.prop.string(),readonly:a.prop.bool(!1),ref:a.prop.data(),step:a.prop.number(1),success:a.prop.bool(!1),value:a.prop.json(void 0),variant:a.prop.string()},setup(t){let n=(0,a.getHost)(),i=a.watchEffect,l=(0,o.computed)(()=>t.disabled.value||t.loading.value),u=(0,o.computed)(()=>!!t.readonly.value),d=(0,o.signal)(t.value.value==null?``:String(t.value.value));r.defineFieldValue(n,()=>d.value,e=>{d.value=e}),(0,s.watch)(t.value,e=>{let t=e==null?``:String(e);d.value!==t&&(d.value=t)});function f(){let e=d.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function p(e,i){let a=t.min.value==null?void 0:Number(t.min.value),o=t.max.value==null?void 0:Number(t.max.value),s=e==null?null:(0,c.clamp)(e,a,o),l=s==null?``:String(s);d.value!==l&&(d.value=l),r.setFieldValue(n,l),r.dispatchNativeFieldEvent(n,`change`)}let m=e.createSpinnerControl({commit:p,disabled:l,largeStep:t[`large-step`],max:t.max,min:t.min,parse:f,readonly:u,step:t.step}),h=(0,a.ref)(),g=null,_=null,v=null,y=e=>{if(!e){g?.(),_?.(),v?.dispose(),g=null,_=null,v=null,t.ref.value?.(null);return}e.setAttribute(`inputmode`,`decimal`),e.setAttribute(`role`,`spinbutton`);let a=e=>{let t=e.target.value,n=t===``?null:Number.parseFloat(t);p(Number.isNaN(n??NaN)?null:n,e)},o=e=>{let t=e.target.value;d.value=t,r.setFieldValue(n,t),r.dispatchNativeFieldEvent(n,`input`)};e.addEventListener(`change`,a),e.addEventListener(`input`,o),_=()=>{e.removeEventListener(`change`,a),e.removeEventListener(`input`,o)},g=i(()=>{let n=f();n==null?e.removeAttribute(`aria-valuenow`):e.setAttribute(`aria-valuenow`,String(n)),t.min.value==null?e.removeAttribute(`aria-valuemin`):e.setAttribute(`aria-valuemin`,String(t.min.value)),t.max.value==null?e.removeAttribute(`aria-valuemax`):e.setAttribute(`aria-valuemax`,String(t.max.value)),u.value?e.setAttribute(`aria-readonly`,`true`):e.removeAttribute(`aria-readonly`)}),t.ref.value?.(e),v=(0,s.watch)(t.ref,t=>{t?.(e)})};(0,a.onElement)(h,e=>{e.ref=y}),(0,a.bind)({attr:{size:t.size,value:()=>d.value||null,variant:t.variant}});let b=(0,o.computed)(()=>l.value||u.value);return a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/states.css.cjs"),t=require("./core/spinner.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./inputs/shared/native-field-event.cjs"),i=require("./inputs/number-input/number-input.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/arsenal/math");var c=`ore-number-input`;(0,a.define)(c,{formAssociated:!0,props:{...n.themableBundle,...n.sizableBundle,...n.disablableBundle,...n.roundableBundle,error:a.prop.string(),fullwidth:a.prop.bool(!1),helper:a.prop.string(),label:a.prop.string(),"label-placement":a.prop.oneOf([`inset`,`outside`],`inset`),"large-step":a.prop.json(void 0),loading:a.prop.bool(!1),max:a.prop.json(void 0),min:a.prop.json(void 0),name:a.prop.string(),placeholder:a.prop.string(),readonly:a.prop.bool(!1),ref:a.prop.data(),step:a.prop.number(1),success:a.prop.bool(!1),value:a.prop.json(void 0),variant:a.prop.string()},setup(e){let n=(0,a.getHost)(),i=a.watchEffect,c=(0,o.computed)(()=>e.disabled.value||e.loading.value),l=(0,o.computed)(()=>!!e.readonly.value),u=(0,o.signal)(e.value.value==null?``:String(e.value.value));r.defineFieldValue(n,()=>u.value,e=>{u.value=e}),(0,o.watch)(e.value,e=>{let t=e==null?``:String(e);u.value!==t&&(u.value=t)});function d(){let e=u.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function f(t,i){let a=e.min.value==null?void 0:Number(e.min.value),o=e.max.value==null?void 0:Number(e.max.value),c=t==null?null:(0,s.clamp)(t,a,o),l=c==null?``:String(c);u.value!==l&&(u.value=l),r.setFieldValue(n,l),r.dispatchNativeFieldEvent(n,`change`)}let p=t.createSpinnerControl({commit:f,disabled:c,largeStep:e[`large-step`],max:e.max,min:e.min,parse:d,readonly:l,step:e.step}),m=(0,a.ref)(),h=null,g=null,_=null,v=t=>{if(!t){h?.(),g?.(),_?.dispose(),h=null,g=null,_=null,e.ref.value?.(null);return}t.setAttribute(`inputmode`,`decimal`),t.setAttribute(`role`,`spinbutton`);let a=e=>{let t=e.target.value,n=t===``?null:Number.parseFloat(t);f(Number.isNaN(n??NaN)?null:n,e)},s=e=>{let t=e.target.value;u.value=t,r.setFieldValue(n,t),r.dispatchNativeFieldEvent(n,`input`)};t.addEventListener(`change`,a),t.addEventListener(`input`,s),g=()=>{t.removeEventListener(`change`,a),t.removeEventListener(`input`,s)},h=i(()=>{let n=d();n==null?t.removeAttribute(`aria-valuenow`):t.setAttribute(`aria-valuenow`,String(n)),e.min.value==null?t.removeAttribute(`aria-valuemin`):t.setAttribute(`aria-valuemin`,String(e.min.value)),e.max.value==null?t.removeAttribute(`aria-valuemax`):t.setAttribute(`aria-valuemax`,String(e.max.value)),l.value?t.setAttribute(`aria-readonly`,`true`):t.removeAttribute(`aria-readonly`)}),e.ref.value?.(t),_=(0,o.watch)(e.ref,e=>{e?.(t)})};(0,a.onElement)(m,e=>{e.ref=v}),(0,a.bind)({attr:{size:e.size,value:()=>u.value||null,variant:e.variant}});let y=(0,o.computed)(()=>c.value||l.value);return a.html`
       <ore-input
         class="field"
         part="field control"
-        ref="${h}"
-        value="${()=>d.value??0}"
-        label="${()=>t.label.value??``}"
-        label-placement="${()=>t[`label-placement`].value??`inset`}"
-        placeholder="${()=>t.placeholder.value??``}"
-        name="${()=>t.name.value??``}"
-        helper="${()=>t.helper.value??``}"
-        error="${()=>t.error.value??``}"
-        size="${t.size}"
-        color="${()=>t.color.value??``}"
-        variant="${t.variant}"
-        rounded="${()=>t.rounded.value}"
-        ?disabled="${t.disabled}"
-        ?readonly="${u}"
-        ?fullwidth="${()=>t.fullwidth.value}"
-        ?loading="${()=>t.loading.value}"
-        ?success="${()=>t.success.value}"
-        @keydown="${e=>m.handleKeydown(e)}">
+        ref="${m}"
+        value="${()=>u.value??0}"
+        label="${()=>e.label.value??``}"
+        label-placement="${()=>e[`label-placement`].value??`inset`}"
+        placeholder="${()=>e.placeholder.value??``}"
+        name="${()=>e.name.value??``}"
+        helper="${()=>e.helper.value??``}"
+        error="${()=>e.error.value??``}"
+        size="${e.size}"
+        color="${()=>e.color.value??``}"
+        variant="${e.variant}"
+        rounded="${()=>e.rounded.value}"
+        ?disabled="${e.disabled}"
+        ?readonly="${l}"
+        ?fullwidth="${()=>e.fullwidth.value}"
+        ?loading="${()=>e.loading.value}"
+        ?success="${()=>e.success.value}"
+        @keydown="${e=>p.handleKeydown(e)}">
         <button
           slot="prefix"
           type="button"
           part="decrement-btn"
           aria-label="Decrease"
-          ?disabled="${()=>b.value||m.atMin()}"
-          @click="${e=>m.incrementBy(-(Number(t.step.value)||1),e)}">
+          ?disabled="${()=>y.value||p.atMin()}"
+          @click="${t=>p.incrementBy(-(Number(e.step.value)||1),t)}">
           <ore-icon name="minus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
         <button
@@ -34,10 +34,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           type="button"
           part="increment-btn"
           aria-label="Increase"
-          ?disabled="${()=>b.value||m.atMax()}"
-          @click="${e=>m.incrementBy(Number(t.step.value)||1,e)}">
+          ?disabled="${()=>y.value||p.atMax()}"
+          @click="${t=>p.incrementBy(Number(e.step.value)||1,t)}">
           <ore-icon name="plus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
       </ore-input>
-    `},shadow:{delegatesFocus:!0},styles:[t.disabledLoadingMixin,i.default]}),exports.NUMBER_INPUT_TAG=l;
+    `},shadow:{delegatesFocus:!0},styles:[e.disabledLoadingMixin,i.default]}),exports.NUMBER_INPUT_TAG=c;
 //# sourceMappingURL=number-input.cjs.map

package/dist/number-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.cjs","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { clamp } from '@vielzeug/arsenal/math';\nimport { define, html, prop, ref, bind, getHost, onElement, watchEffect } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch as rippleWatch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createSpinnerControl } from '../../core';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledLoadingMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './number-input.css?inline';\n\nexport type OreNumberInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\n/** Number Input props */\nexport type OreNumberInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n  /** Stretch to full width of container */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n  'label-placement'?: 'inset' | 'outside';\n  /** Large step (for Page Up/Down, default: 10 × step) */\n  'large-step'?: number;\n  /**\n   * Shows an inline spinner inside the field and forces the control into `disabled` for the\n   * duration — use while an async validation/submission request is in flight to prevent\n   * double-submits.\n   */\n  loading?: boolean;\n  /** Maximum allowed value */\n  max?: number;\n  /** Minimum allowed value */\n  min?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the input read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts.\n   * Set as a JS property: `bitNumberInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step size for increment/decrement */\n  step?: number;\n  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\n  /** Current numeric value */\n  value?: number;\n  /** Visual variant */\n  variant?: VisualVariant;\n};\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element ore-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} loading - Show an inline spinner and force the control disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires input - On every keystroke.\n * @fires change - On committed value change.\n *\n * @slot prefix - Content before the input (e.g. icon)\n * @slot suffix - Content after the input (e.g. unit label)\n * @slot label - Custom label content\n * @slot helper - Custom helper text content\n * @slot error - Custom error content\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @part control - Control container.\n * @part decrement-btn - Decrement stepper button.\n * @part input - Input element.\n * @part increment-btn - Increment stepper button.\n * @example\n * ```html\n * <ore-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></ore-number-input>\n * <ore-number-input label=\"Quantity\" success></ore-number-input>\n * <ore-number-input label=\"Quantity\" loading></ore-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = 'ore-number-input' as const;\ndefine<OreNumberInputProps>(NUMBER_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    'large-step': prop.json(undefined as number | undefined),\n    loading: prop.bool(false),\n    max: prop.json(undefined as number | undefined),\n    min: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    step: prop.number(1),\n    success: prop.bool(false),\n    value: prop.json(undefined as number | undefined),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n\n    // Internal numeric value signal (string representation for the input)\n    const fieldValue = signal(props.value.value != null ? String(props.value.value) : '');\n\n    defineFieldValue(\n      el,\n      () => fieldValue.value,\n      (value) => {\n        fieldValue.value = value;\n      },\n    );\n\n    // Keep fieldValue in sync when props.value changes externally\n    rippleWatch(props.value, (v) => {\n      const next = v != null ? String(v) : '';\n\n      if (fieldValue.value !== next) fieldValue.value = next;\n    });\n\n    function parseValue(): number | null {\n      const v = fieldValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n\n    function commit(val: number | null, _originalEvent?: Event) {\n      const min = props.min.value != null ? Number(props.min.value) : undefined;\n      const max = props.max.value != null ? Number(props.max.value) : undefined;\n      const clamped = val != null ? clamp(val, min, max) : null;\n      const nextValue = clamped != null ? String(clamped) : '';\n\n      if (fieldValue.value !== nextValue) fieldValue.value = nextValue;\n\n      setFieldValue(el, nextValue);\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: isDisabled,\n      largeStep: props['large-step'],\n      max: props.max,\n      min: props.min,\n      parse: parseValue,\n      readonly: isReadonly,\n      step: props.step,\n    });\n\n    // Composition uses ore-input's own documented `ref` prop (fired with the raw\n    // <input> on mount, `null` on unmount) instead of reaching into its shadow DOM —\n    // see `packages/refine/AGENTS.md` / input.ts's `ref` JSDoc for the supported contract.\n    // Set imperatively (rather than declared in the template) because ore's template\n    // engine treats a function-valued attr binding as a reactive getter to invoke, not\n    // a literal value to assign — a plain property assignment avoids that entirely.\n    const bitInputRef = ref<HTMLElementTagNameMap['ore-input']>();\n    let stopAriaWatch: (() => void) | null = null;\n    let detachListeners: (() => void) | null = null;\n    let refSub: { dispose(): void } | null = null;\n\n    const handleFieldRef = (rawInput: HTMLInputElement | null): void => {\n      if (!rawInput) {\n        stopAriaWatch?.();\n        detachListeners?.();\n        refSub?.dispose();\n        stopAriaWatch = null;\n        detachListeners = null;\n        refSub = null;\n        props.ref.value?.(null);\n\n        return;\n      }\n\n      rawInput.setAttribute('inputmode', 'decimal');\n      // The wrapper div is a plain layout container — WAI-ARIA spinbutton semantics\n      // live on the actually-focusable element (the raw <input> rendered by ore-input).\n      rawInput.setAttribute('role', 'spinbutton');\n\n      const handleChange = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n        const n = val !== '' ? Number.parseFloat(val) : null;\n\n        commit(Number.isNaN(n ?? NaN) ? null : n, e);\n      };\n\n      const handleInput = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n\n        fieldValue.value = val;\n        setFieldValue(el, val);\n        dispatchNativeFieldEvent(el, 'input');\n      };\n\n      rawInput.addEventListener('change', handleChange);\n      rawInput.addEventListener('input', handleInput);\n      detachListeners = () => {\n        rawInput.removeEventListener('change', handleChange);\n        rawInput.removeEventListener('input', handleInput);\n      };\n\n      stopAriaWatch = watch(() => {\n        const now = parseValue();\n\n        if (now == null) rawInput.removeAttribute('aria-valuenow');\n        else rawInput.setAttribute('aria-valuenow', String(now));\n\n        if (props.min.value != null) rawInput.setAttribute('aria-valuemin', String(props.min.value));\n        else rawInput.removeAttribute('aria-valuemin');\n\n        if (props.max.value != null) rawInput.setAttribute('aria-valuemax', String(props.max.value));\n        else rawInput.removeAttribute('aria-valuemax');\n\n        if (isReadonly.value) rawInput.setAttribute('aria-readonly', 'true');\n        else rawInput.removeAttribute('aria-readonly');\n      });\n\n      // Fire user ref callback\n      props.ref.value?.(rawInput);\n\n      refSub = rippleWatch(props.ref, (cb) => {\n        cb?.(rawInput);\n      });\n    };\n\n    // ore-input's own onElement/ref lifecycle calls this back with `null` when its\n    // inner <input> unmounts, so no explicit teardown is needed here.\n    onElement(bitInputRef, (bitInputEl) => {\n      bitInputEl.ref = handleFieldRef;\n    });\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => fieldValue.value || null,\n        variant: props.variant,\n      },\n    });\n\n    const isNonInteractive = computed(() => isDisabled.value || isReadonly.value);\n\n    // The stepper buttons are slotted *into* ore-input's own `prefix`/`suffix` slots instead of\n    // sitting outside it in a separate wrapper — they render inside ore-input's own bordered\n    // box (same as its built-in clear/password-toggle buttons), matching every other field's\n    // single-box look instead of floating as two detached icon buttons either side of a\n    // narrow field. `@keydown` moves to ore-input itself: native keyboard events are\n    // `composed: true` and bubble out past a shadow boundary, so it still sees keydowns\n    // originating from ore-input's internal <input> as well as from these slotted buttons.\n    return html`\n      <ore-input\n        class=\"field\"\n        part=\"field control\"\n        ref=\"${bitInputRef}\"\n        value=\"${() => fieldValue.value ?? 0}\"\n        label=\"${() => props.label.value ?? ''}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        name=\"${() => props.name.value ?? ''}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        size=\"${props.size}\"\n        color=\"${() => props.color.value ?? ''}\"\n        variant=\"${props.variant}\"\n        rounded=\"${() => props.rounded.value}\"\n        ?disabled=\"${props.disabled}\"\n        ?readonly=\"${isReadonly}\"\n        ?fullwidth=\"${() => props.fullwidth.value}\"\n        ?loading=\"${() => props.loading.value}\"\n        ?success=\"${() => props.success.value}\"\n        @keydown=\"${(e: KeyboardEvent) => spinner.handleKeydown(e)}\">\n        <button\n          slot=\"prefix\"\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMin()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(-(Number(props.step.value) || 1), e)}\">\n          <ore-icon name=\"minus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n        <button\n          slot=\"suffix\"\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMax()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(Number(props.step.value) || 1, e)}\">\n          <ore-icon name=\"plus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </ore-input>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [disabledLoadingMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"number-input.cjs","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { clamp } from '@vielzeug/arsenal/math';\nimport { bind, define, getHost, html, onElement, prop, ref, watchEffect } from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport { createSpinnerControl } from '../../core';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledLoadingMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './number-input.css?inline';\n\nexport type OreNumberInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\n/** Number Input props */\nexport type OreNumberInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n  /** Stretch to full width of container */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n  'label-placement'?: 'inset' | 'outside';\n  /** Large step (for Page Up/Down, default: 10 × step) */\n  'large-step'?: number;\n  /**\n   * Shows an inline spinner inside the field and forces the control into `disabled` for the\n   * duration — use while an async validation/submission request is in flight to prevent\n   * double-submits.\n   */\n  loading?: boolean;\n  /** Maximum allowed value */\n  max?: number;\n  /** Minimum allowed value */\n  min?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the input read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts.\n   * Set as a JS property: `bitNumberInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step size for increment/decrement */\n  step?: number;\n  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\n  /** Current numeric value */\n  value?: number;\n  /** Visual variant */\n  variant?: VisualVariant;\n};\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element ore-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} loading - Show an inline spinner and force the control disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires input - On every keystroke.\n * @fires change - On committed value change.\n *\n * @slot prefix - Content before the input (e.g. icon)\n * @slot suffix - Content after the input (e.g. unit label)\n * @slot label - Custom label content\n * @slot helper - Custom helper text content\n * @slot error - Custom error content\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @part control - Control container.\n * @part decrement-btn - Decrement stepper button.\n * @part input - Input element.\n * @part increment-btn - Increment stepper button.\n * @example\n * ```html\n * <ore-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></ore-number-input>\n * <ore-number-input label=\"Quantity\" success></ore-number-input>\n * <ore-number-input label=\"Quantity\" loading></ore-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = 'ore-number-input' as const;\ndefine<OreNumberInputProps>(NUMBER_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    'large-step': prop.json(undefined as number | undefined),\n    loading: prop.bool(false),\n    max: prop.json(undefined as number | undefined),\n    min: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    step: prop.number(1),\n    success: prop.bool(false),\n    value: prop.json(undefined as number | undefined),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n\n    // Internal numeric value signal (string representation for the input)\n    const fieldValue = signal(props.value.value != null ? String(props.value.value) : '');\n\n    defineFieldValue(\n      el,\n      () => fieldValue.value,\n      (value) => {\n        fieldValue.value = value;\n      },\n    );\n\n    // Keep fieldValue in sync when props.value changes externally\n    rippleWatch(props.value, (v) => {\n      const next = v != null ? String(v) : '';\n\n      if (fieldValue.value !== next) fieldValue.value = next;\n    });\n\n    function parseValue(): number | null {\n      const v = fieldValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n\n    function commit(val: number | null, _originalEvent?: Event) {\n      const min = props.min.value != null ? Number(props.min.value) : undefined;\n      const max = props.max.value != null ? Number(props.max.value) : undefined;\n      const clamped = val != null ? clamp(val, min, max) : null;\n      const nextValue = clamped != null ? String(clamped) : '';\n\n      if (fieldValue.value !== nextValue) fieldValue.value = nextValue;\n\n      setFieldValue(el, nextValue);\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: isDisabled,\n      largeStep: props['large-step'],\n      max: props.max,\n      min: props.min,\n      parse: parseValue,\n      readonly: isReadonly,\n      step: props.step,\n    });\n\n    // Composition uses ore-input's own documented `ref` prop (fired with the raw\n    // <input> on mount, `null` on unmount) instead of reaching into its shadow DOM —\n    // see `packages/refine/AGENTS.md` / input.ts's `ref` JSDoc for the supported contract.\n    // Set imperatively (rather than declared in the template) because ore's template\n    // engine treats a function-valued attr binding as a reactive getter to invoke, not\n    // a literal value to assign — a plain property assignment avoids that entirely.\n    const bitInputRef = ref<HTMLElementTagNameMap['ore-input']>();\n    let stopAriaWatch: (() => void) | null = null;\n    let detachListeners: (() => void) | null = null;\n    let refSub: { dispose(): void } | null = null;\n\n    const handleFieldRef = (rawInput: HTMLInputElement | null): void => {\n      if (!rawInput) {\n        stopAriaWatch?.();\n        detachListeners?.();\n        refSub?.dispose();\n        stopAriaWatch = null;\n        detachListeners = null;\n        refSub = null;\n        props.ref.value?.(null);\n\n        return;\n      }\n\n      rawInput.setAttribute('inputmode', 'decimal');\n      // The wrapper div is a plain layout container — WAI-ARIA spinbutton semantics\n      // live on the actually-focusable element (the raw <input> rendered by ore-input).\n      rawInput.setAttribute('role', 'spinbutton');\n\n      const handleChange = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n        const n = val !== '' ? Number.parseFloat(val) : null;\n\n        commit(Number.isNaN(n ?? NaN) ? null : n, e);\n      };\n\n      const handleInput = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n\n        fieldValue.value = val;\n        setFieldValue(el, val);\n        dispatchNativeFieldEvent(el, 'input');\n      };\n\n      rawInput.addEventListener('change', handleChange);\n      rawInput.addEventListener('input', handleInput);\n      detachListeners = () => {\n        rawInput.removeEventListener('change', handleChange);\n        rawInput.removeEventListener('input', handleInput);\n      };\n\n      stopAriaWatch = watch(() => {\n        const now = parseValue();\n\n        if (now == null) rawInput.removeAttribute('aria-valuenow');\n        else rawInput.setAttribute('aria-valuenow', String(now));\n\n        if (props.min.value != null) rawInput.setAttribute('aria-valuemin', String(props.min.value));\n        else rawInput.removeAttribute('aria-valuemin');\n\n        if (props.max.value != null) rawInput.setAttribute('aria-valuemax', String(props.max.value));\n        else rawInput.removeAttribute('aria-valuemax');\n\n        if (isReadonly.value) rawInput.setAttribute('aria-readonly', 'true');\n        else rawInput.removeAttribute('aria-readonly');\n      });\n\n      // Fire user ref callback\n      props.ref.value?.(rawInput);\n\n      refSub = rippleWatch(props.ref, (cb) => {\n        cb?.(rawInput);\n      });\n    };\n\n    // ore-input's own onElement/ref lifecycle calls this back with `null` when its\n    // inner <input> unmounts, so no explicit teardown is needed here.\n    onElement(bitInputRef, (bitInputEl) => {\n      bitInputEl.ref = handleFieldRef;\n    });\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => fieldValue.value || null,\n        variant: props.variant,\n      },\n    });\n\n    const isNonInteractive = computed(() => isDisabled.value || isReadonly.value);\n\n    // The stepper buttons are slotted *into* ore-input's own `prefix`/`suffix` slots instead of\n    // sitting outside it in a separate wrapper — they render inside ore-input's own bordered\n    // box (same as its built-in clear/password-toggle buttons), matching every other field's\n    // single-box look instead of floating as two detached icon buttons either side of a\n    // narrow field. `@keydown` moves to ore-input itself: native keyboard events are\n    // `composed: true` and bubble out past a shadow boundary, so it still sees keydowns\n    // originating from ore-input's internal <input> as well as from these slotted buttons.\n    return html`\n      <ore-input\n        class=\"field\"\n        part=\"field control\"\n        ref=\"${bitInputRef}\"\n        value=\"${() => fieldValue.value ?? 0}\"\n        label=\"${() => props.label.value ?? ''}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        name=\"${() => props.name.value ?? ''}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        size=\"${props.size}\"\n        color=\"${() => props.color.value ?? ''}\"\n        variant=\"${props.variant}\"\n        rounded=\"${() => props.rounded.value}\"\n        ?disabled=\"${props.disabled}\"\n        ?readonly=\"${isReadonly}\"\n        ?fullwidth=\"${() => props.fullwidth.value}\"\n        ?loading=\"${() => props.loading.value}\"\n        ?success=\"${() => props.success.value}\"\n        @keydown=\"${(e: KeyboardEvent) => spinner.handleKeydown(e)}\">\n        <button\n          slot=\"prefix\"\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMin()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(-(Number(props.step.value) || 1), e)}\">\n          <ore-icon name=\"minus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n        <button\n          slot=\"suffix\"\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMax()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(Number(props.step.value) || 1, e)}\">\n          <ore-icon name=\"plus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </ore-input>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [disabledLoadingMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/number-input.js

@@ -1,11 +1,10 @@
-import { createSpinnerControl as e } from "./core/spinner.js";
-import { disabledLoadingMixin as t } from "./styles/mixins/states.css.js";
+import { disabledLoadingMixin as e } from "./styles/mixins/states.css.js";
+import { createSpinnerControl as t } from "./core/spinner.js";
 import { disablableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
 import { defineFieldValue as o, dispatchNativeFieldEvent as s, setFieldValue as c } from "./inputs/shared/native-field-event.js";
 import l from "./inputs/number-input/number-input.css.js";
 import { bind as u, define as d, getHost as f, html as p, onElement as m, prop as h, ref as g, watchEffect as _ } from "@vielzeug/ore";
-import { computed as v, signal as y } from "@vielzeug/ripple";
-import { watch as b } from "@vielzeug/ripple/watch";
+import { computed as v, signal as y, watch as b } from "@vielzeug/ripple";
 import { clamp as x } from "@vielzeug/arsenal/math";
 //#region src/inputs/number-input/number-input.ts
 var S = "ore-number-input";
@@ -34,11 +33,11 @@ d(S, {
 		value: h.json(void 0),
 		variant: h.string()
 	},
-	setup(t) {
-		let n = f(), r = _, i = v(() => t.disabled.value || t.loading.value), a = v(() => !!t.readonly.value), l = y(t.value.value == null ? "" : String(t.value.value));
+	setup(e) {
+		let n = f(), r = _, i = v(() => e.disabled.value || e.loading.value), a = v(() => !!e.readonly.value), l = y(e.value.value == null ? "" : String(e.value.value));
 		o(n, () => l.value, (e) => {
 			l.value = e;
-		}), b(t.value, (e) => {
+		}), b(e.value, (e) => {
 			let t = e == null ? "" : String(e);
 			l.value !== t && (l.value = t);
 		});
@@ -48,25 +47,25 @@ d(S, {
 			let t = Number.parseFloat(e);
 			return Number.isNaN(t) ? null : t;
 		}
-		function h(e, r) {
-			let i = t.min.value == null ? void 0 : Number(t.min.value), a = t.max.value == null ? void 0 : Number(t.max.value), o = e == null ? null : x(e, i, a), u = o == null ? "" : String(o);
+		function h(t, r) {
+			let i = e.min.value == null ? void 0 : Number(e.min.value), a = e.max.value == null ? void 0 : Number(e.max.value), o = t == null ? null : x(t, i, a), u = o == null ? "" : String(o);
 			l.value !== u && (l.value = u), c(n, u), s(n, "change");
 		}
-		let S = e({
+		let S = t({
 			commit: h,
 			disabled: i,
-			largeStep: t["large-step"],
-			max: t.max,
-			min: t.min,
+			largeStep: e["large-step"],
+			max: e.max,
+			min: e.min,
 			parse: d,
 			readonly: a,
-			step: t.step
-		}), C = g(), w = null, T = null, E = null, D = (e) => {
-			if (!e) {
-				w?.(), T?.(), E?.dispose(), w = null, T = null, E = null, t.ref.value?.(null);
+			step: e.step
+		}), C = g(), w = null, T = null, E = null, D = (t) => {
+			if (!t) {
+				w?.(), T?.(), E?.dispose(), w = null, T = null, E = null, e.ref.value?.(null);
 				return;
 			}
-			e.setAttribute("inputmode", "decimal"), e.setAttribute("role", "spinbutton");
+			t.setAttribute("inputmode", "decimal"), t.setAttribute("role", "spinbutton");
 			let i = (e) => {
 				let t = e.target.value, n = t === "" ? null : Number.parseFloat(t);
 				h(Number.isNaN(n ?? NaN) ? null : n, e);
@@ -74,21 +73,21 @@ d(S, {
 				let t = e.target.value;
 				l.value = t, c(n, t), s(n, "input");
 			};
-			e.addEventListener("change", i), e.addEventListener("input", o), T = () => {
-				e.removeEventListener("change", i), e.removeEventListener("input", o);
+			t.addEventListener("change", i), t.addEventListener("input", o), T = () => {
+				t.removeEventListener("change", i), t.removeEventListener("input", o);
 			}, w = r(() => {
 				let n = d();
-				n == null ? e.removeAttribute("aria-valuenow") : e.setAttribute("aria-valuenow", String(n)), t.min.value == null ? e.removeAttribute("aria-valuemin") : e.setAttribute("aria-valuemin", String(t.min.value)), t.max.value == null ? e.removeAttribute("aria-valuemax") : e.setAttribute("aria-valuemax", String(t.max.value)), a.value ? e.setAttribute("aria-readonly", "true") : e.removeAttribute("aria-readonly");
-			}), t.ref.value?.(e), E = b(t.ref, (t) => {
-				t?.(e);
+				n == null ? t.removeAttribute("aria-valuenow") : t.setAttribute("aria-valuenow", String(n)), e.min.value == null ? t.removeAttribute("aria-valuemin") : t.setAttribute("aria-valuemin", String(e.min.value)), e.max.value == null ? t.removeAttribute("aria-valuemax") : t.setAttribute("aria-valuemax", String(e.max.value)), a.value ? t.setAttribute("aria-readonly", "true") : t.removeAttribute("aria-readonly");
+			}), e.ref.value?.(t), E = b(e.ref, (e) => {
+				e?.(t);
 			});
 		};
 		m(C, (e) => {
 			e.ref = D;
 		}), u({ attr: {
-			size: t.size,
+			size: e.size,
 			value: () => l.value || null,
-			variant: t.variant
+			variant: e.variant
 		} });
 		let O = v(() => i.value || a.value);
 		return p`
@@ -97,21 +96,21 @@ d(S, {
         part="field control"
         ref="${C}"
         value="${() => l.value ?? 0}"
-        label="${() => t.label.value ?? ""}"
-        label-placement="${() => t["label-placement"].value ?? "inset"}"
-        placeholder="${() => t.placeholder.value ?? ""}"
-        name="${() => t.name.value ?? ""}"
-        helper="${() => t.helper.value ?? ""}"
-        error="${() => t.error.value ?? ""}"
-        size="${t.size}"
-        color="${() => t.color.value ?? ""}"
-        variant="${t.variant}"
-        rounded="${() => t.rounded.value}"
-        ?disabled="${t.disabled}"
+        label="${() => e.label.value ?? ""}"
+        label-placement="${() => e["label-placement"].value ?? "inset"}"
+        placeholder="${() => e.placeholder.value ?? ""}"
+        name="${() => e.name.value ?? ""}"
+        helper="${() => e.helper.value ?? ""}"
+        error="${() => e.error.value ?? ""}"
+        size="${e.size}"
+        color="${() => e.color.value ?? ""}"
+        variant="${e.variant}"
+        rounded="${() => e.rounded.value}"
+        ?disabled="${e.disabled}"
         ?readonly="${a}"
-        ?fullwidth="${() => t.fullwidth.value}"
-        ?loading="${() => t.loading.value}"
-        ?success="${() => t.success.value}"
+        ?fullwidth="${() => e.fullwidth.value}"
+        ?loading="${() => e.loading.value}"
+        ?success="${() => e.success.value}"
         @keydown="${(e) => S.handleKeydown(e)}">
         <button
           slot="prefix"
@@ -119,7 +118,7 @@ d(S, {
           part="decrement-btn"
           aria-label="Decrease"
           ?disabled="${() => O.value || S.atMin()}"
-          @click="${(e) => S.incrementBy(-(Number(t.step.value) || 1), e)}">
+          @click="${(t) => S.incrementBy(-(Number(e.step.value) || 1), t)}">
           <ore-icon name="minus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
         <button
@@ -128,14 +127,14 @@ d(S, {
           part="increment-btn"
           aria-label="Increase"
           ?disabled="${() => O.value || S.atMax()}"
-          @click="${(e) => S.incrementBy(Number(t.step.value) || 1, e)}">
+          @click="${(t) => S.incrementBy(Number(e.step.value) || 1, t)}">
           <ore-icon name="plus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
       </ore-input>
     `;
 	},
 	shadow: { delegatesFocus: !0 },
-	styles: [t, l]
+	styles: [e, l]
 });
 //#endregion
 export { S as NUMBER_INPUT_TAG };

package/dist/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { clamp } from '@vielzeug/arsenal/math';\nimport { define, html, prop, ref, bind, getHost, onElement, watchEffect } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch as rippleWatch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createSpinnerControl } from '../../core';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledLoadingMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './number-input.css?inline';\n\nexport type OreNumberInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\n/** Number Input props */\nexport type OreNumberInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n  /** Stretch to full width of container */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n  'label-placement'?: 'inset' | 'outside';\n  /** Large step (for Page Up/Down, default: 10 × step) */\n  'large-step'?: number;\n  /**\n   * Shows an inline spinner inside the field and forces the control into `disabled` for the\n   * duration — use while an async validation/submission request is in flight to prevent\n   * double-submits.\n   */\n  loading?: boolean;\n  /** Maximum allowed value */\n  max?: number;\n  /** Minimum allowed value */\n  min?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the input read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts.\n   * Set as a JS property: `bitNumberInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step size for increment/decrement */\n  step?: number;\n  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\n  /** Current numeric value */\n  value?: number;\n  /** Visual variant */\n  variant?: VisualVariant;\n};\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element ore-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} loading - Show an inline spinner and force the control disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires input - On every keystroke.\n * @fires change - On committed value change.\n *\n * @slot prefix - Content before the input (e.g. icon)\n * @slot suffix - Content after the input (e.g. unit label)\n * @slot label - Custom label content\n * @slot helper - Custom helper text content\n * @slot error - Custom error content\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @part control - Control container.\n * @part decrement-btn - Decrement stepper button.\n * @part input - Input element.\n * @part increment-btn - Increment stepper button.\n * @example\n * ```html\n * <ore-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></ore-number-input>\n * <ore-number-input label=\"Quantity\" success></ore-number-input>\n * <ore-number-input label=\"Quantity\" loading></ore-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = 'ore-number-input' as const;\ndefine<OreNumberInputProps>(NUMBER_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    'large-step': prop.json(undefined as number | undefined),\n    loading: prop.bool(false),\n    max: prop.json(undefined as number | undefined),\n    min: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    step: prop.number(1),\n    success: prop.bool(false),\n    value: prop.json(undefined as number | undefined),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n\n    // Internal numeric value signal (string representation for the input)\n    const fieldValue = signal(props.value.value != null ? String(props.value.value) : '');\n\n    defineFieldValue(\n      el,\n      () => fieldValue.value,\n      (value) => {\n        fieldValue.value = value;\n      },\n    );\n\n    // Keep fieldValue in sync when props.value changes externally\n    rippleWatch(props.value, (v) => {\n      const next = v != null ? String(v) : '';\n\n      if (fieldValue.value !== next) fieldValue.value = next;\n    });\n\n    function parseValue(): number | null {\n      const v = fieldValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n\n    function commit(val: number | null, _originalEvent?: Event) {\n      const min = props.min.value != null ? Number(props.min.value) : undefined;\n      const max = props.max.value != null ? Number(props.max.value) : undefined;\n      const clamped = val != null ? clamp(val, min, max) : null;\n      const nextValue = clamped != null ? String(clamped) : '';\n\n      if (fieldValue.value !== nextValue) fieldValue.value = nextValue;\n\n      setFieldValue(el, nextValue);\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: isDisabled,\n      largeStep: props['large-step'],\n      max: props.max,\n      min: props.min,\n      parse: parseValue,\n      readonly: isReadonly,\n      step: props.step,\n    });\n\n    // Composition uses ore-input's own documented `ref` prop (fired with the raw\n    // <input> on mount, `null` on unmount) instead of reaching into its shadow DOM —\n    // see `packages/refine/AGENTS.md` / input.ts's `ref` JSDoc for the supported contract.\n    // Set imperatively (rather than declared in the template) because ore's template\n    // engine treats a function-valued attr binding as a reactive getter to invoke, not\n    // a literal value to assign — a plain property assignment avoids that entirely.\n    const bitInputRef = ref<HTMLElementTagNameMap['ore-input']>();\n    let stopAriaWatch: (() => void) | null = null;\n    let detachListeners: (() => void) | null = null;\n    let refSub: { dispose(): void } | null = null;\n\n    const handleFieldRef = (rawInput: HTMLInputElement | null): void => {\n      if (!rawInput) {\n        stopAriaWatch?.();\n        detachListeners?.();\n        refSub?.dispose();\n        stopAriaWatch = null;\n        detachListeners = null;\n        refSub = null;\n        props.ref.value?.(null);\n\n        return;\n      }\n\n      rawInput.setAttribute('inputmode', 'decimal');\n      // The wrapper div is a plain layout container — WAI-ARIA spinbutton semantics\n      // live on the actually-focusable element (the raw <input> rendered by ore-input).\n      rawInput.setAttribute('role', 'spinbutton');\n\n      const handleChange = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n        const n = val !== '' ? Number.parseFloat(val) : null;\n\n        commit(Number.isNaN(n ?? NaN) ? null : n, e);\n      };\n\n      const handleInput = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n\n        fieldValue.value = val;\n        setFieldValue(el, val);\n        dispatchNativeFieldEvent(el, 'input');\n      };\n\n      rawInput.addEventListener('change', handleChange);\n      rawInput.addEventListener('input', handleInput);\n      detachListeners = () => {\n        rawInput.removeEventListener('change', handleChange);\n        rawInput.removeEventListener('input', handleInput);\n      };\n\n      stopAriaWatch = watch(() => {\n        const now = parseValue();\n\n        if (now == null) rawInput.removeAttribute('aria-valuenow');\n        else rawInput.setAttribute('aria-valuenow', String(now));\n\n        if (props.min.value != null) rawInput.setAttribute('aria-valuemin', String(props.min.value));\n        else rawInput.removeAttribute('aria-valuemin');\n\n        if (props.max.value != null) rawInput.setAttribute('aria-valuemax', String(props.max.value));\n        else rawInput.removeAttribute('aria-valuemax');\n\n        if (isReadonly.value) rawInput.setAttribute('aria-readonly', 'true');\n        else rawInput.removeAttribute('aria-readonly');\n      });\n\n      // Fire user ref callback\n      props.ref.value?.(rawInput);\n\n      refSub = rippleWatch(props.ref, (cb) => {\n        cb?.(rawInput);\n      });\n    };\n\n    // ore-input's own onElement/ref lifecycle calls this back with `null` when its\n    // inner <input> unmounts, so no explicit teardown is needed here.\n    onElement(bitInputRef, (bitInputEl) => {\n      bitInputEl.ref = handleFieldRef;\n    });\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => fieldValue.value || null,\n        variant: props.variant,\n      },\n    });\n\n    const isNonInteractive = computed(() => isDisabled.value || isReadonly.value);\n\n    // The stepper buttons are slotted *into* ore-input's own `prefix`/`suffix` slots instead of\n    // sitting outside it in a separate wrapper — they render inside ore-input's own bordered\n    // box (same as its built-in clear/password-toggle buttons), matching every other field's\n    // single-box look instead of floating as two detached icon buttons either side of a\n    // narrow field. `@keydown` moves to ore-input itself: native keyboard events are\n    // `composed: true` and bubble out past a shadow boundary, so it still sees keydowns\n    // originating from ore-input's internal <input> as well as from these slotted buttons.\n    return html`\n      <ore-input\n        class=\"field\"\n        part=\"field control\"\n        ref=\"${bitInputRef}\"\n        value=\"${() => fieldValue.value ?? 0}\"\n        label=\"${() => props.label.value ?? ''}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        name=\"${() => props.name.value ?? ''}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        size=\"${props.size}\"\n        color=\"${() => props.color.value ?? ''}\"\n        variant=\"${props.variant}\"\n        rounded=\"${() => props.rounded.value}\"\n        ?disabled=\"${props.disabled}\"\n        ?readonly=\"${isReadonly}\"\n        ?fullwidth=\"${() => props.fullwidth.value}\"\n        ?loading=\"${() => props.loading.value}\"\n        ?success=\"${() => props.success.value}\"\n        @keydown=\"${(e: KeyboardEvent) => spinner.handleKeydown(e)}\">\n        <button\n          slot=\"prefix\"\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMin()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(-(Number(props.step.value) || 1), e)}\">\n          <ore-icon name=\"minus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n        <button\n          slot=\"suffix\"\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMax()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(Number(props.step.value) || 1, e)}\">\n          <ore-icon name=\"plus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </ore-input>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [disabledLoadingMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { clamp } from '@vielzeug/arsenal/math';\nimport { bind, define, getHost, html, onElement, prop, ref, watchEffect } from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport { createSpinnerControl } from '../../core';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledLoadingMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './number-input.css?inline';\n\nexport type OreNumberInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\n/** Number Input props */\nexport type OreNumberInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n  /** Stretch to full width of container */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n  'label-placement'?: 'inset' | 'outside';\n  /** Large step (for Page Up/Down, default: 10 × step) */\n  'large-step'?: number;\n  /**\n   * Shows an inline spinner inside the field and forces the control into `disabled` for the\n   * duration — use while an async validation/submission request is in flight to prevent\n   * double-submits.\n   */\n  loading?: boolean;\n  /** Maximum allowed value */\n  max?: number;\n  /** Minimum allowed value */\n  min?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the input read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts.\n   * Set as a JS property: `bitNumberInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step size for increment/decrement */\n  step?: number;\n  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set — an error always wins.\n   */\n  success?: boolean;\n  /** Current numeric value */\n  value?: number;\n  /** Visual variant */\n  variant?: VisualVariant;\n};\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element ore-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} loading - Show an inline spinner and force the control disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires input - On every keystroke.\n * @fires change - On committed value change.\n *\n * @slot prefix - Content before the input (e.g. icon)\n * @slot suffix - Content after the input (e.g. unit label)\n * @slot label - Custom label content\n * @slot helper - Custom helper text content\n * @slot error - Custom error content\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @part control - Control container.\n * @part decrement-btn - Decrement stepper button.\n * @part input - Input element.\n * @part increment-btn - Increment stepper button.\n * @example\n * ```html\n * <ore-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></ore-number-input>\n * <ore-number-input label=\"Quantity\" success></ore-number-input>\n * <ore-number-input label=\"Quantity\" loading></ore-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = 'ore-number-input' as const;\ndefine<OreNumberInputProps>(NUMBER_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    'large-step': prop.json(undefined as number | undefined),\n    loading: prop.bool(false),\n    max: prop.json(undefined as number | undefined),\n    min: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    step: prop.number(1),\n    success: prop.bool(false),\n    value: prop.json(undefined as number | undefined),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n\n    // Internal numeric value signal (string representation for the input)\n    const fieldValue = signal(props.value.value != null ? String(props.value.value) : '');\n\n    defineFieldValue(\n      el,\n      () => fieldValue.value,\n      (value) => {\n        fieldValue.value = value;\n      },\n    );\n\n    // Keep fieldValue in sync when props.value changes externally\n    rippleWatch(props.value, (v) => {\n      const next = v != null ? String(v) : '';\n\n      if (fieldValue.value !== next) fieldValue.value = next;\n    });\n\n    function parseValue(): number | null {\n      const v = fieldValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n\n    function commit(val: number | null, _originalEvent?: Event) {\n      const min = props.min.value != null ? Number(props.min.value) : undefined;\n      const max = props.max.value != null ? Number(props.max.value) : undefined;\n      const clamped = val != null ? clamp(val, min, max) : null;\n      const nextValue = clamped != null ? String(clamped) : '';\n\n      if (fieldValue.value !== nextValue) fieldValue.value = nextValue;\n\n      setFieldValue(el, nextValue);\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: isDisabled,\n      largeStep: props['large-step'],\n      max: props.max,\n      min: props.min,\n      parse: parseValue,\n      readonly: isReadonly,\n      step: props.step,\n    });\n\n    // Composition uses ore-input's own documented `ref` prop (fired with the raw\n    // <input> on mount, `null` on unmount) instead of reaching into its shadow DOM —\n    // see `packages/refine/AGENTS.md` / input.ts's `ref` JSDoc for the supported contract.\n    // Set imperatively (rather than declared in the template) because ore's template\n    // engine treats a function-valued attr binding as a reactive getter to invoke, not\n    // a literal value to assign — a plain property assignment avoids that entirely.\n    const bitInputRef = ref<HTMLElementTagNameMap['ore-input']>();\n    let stopAriaWatch: (() => void) | null = null;\n    let detachListeners: (() => void) | null = null;\n    let refSub: { dispose(): void } | null = null;\n\n    const handleFieldRef = (rawInput: HTMLInputElement | null): void => {\n      if (!rawInput) {\n        stopAriaWatch?.();\n        detachListeners?.();\n        refSub?.dispose();\n        stopAriaWatch = null;\n        detachListeners = null;\n        refSub = null;\n        props.ref.value?.(null);\n\n        return;\n      }\n\n      rawInput.setAttribute('inputmode', 'decimal');\n      // The wrapper div is a plain layout container — WAI-ARIA spinbutton semantics\n      // live on the actually-focusable element (the raw <input> rendered by ore-input).\n      rawInput.setAttribute('role', 'spinbutton');\n\n      const handleChange = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n        const n = val !== '' ? Number.parseFloat(val) : null;\n\n        commit(Number.isNaN(n ?? NaN) ? null : n, e);\n      };\n\n      const handleInput = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n\n        fieldValue.value = val;\n        setFieldValue(el, val);\n        dispatchNativeFieldEvent(el, 'input');\n      };\n\n      rawInput.addEventListener('change', handleChange);\n      rawInput.addEventListener('input', handleInput);\n      detachListeners = () => {\n        rawInput.removeEventListener('change', handleChange);\n        rawInput.removeEventListener('input', handleInput);\n      };\n\n      stopAriaWatch = watch(() => {\n        const now = parseValue();\n\n        if (now == null) rawInput.removeAttribute('aria-valuenow');\n        else rawInput.setAttribute('aria-valuenow', String(now));\n\n        if (props.min.value != null) rawInput.setAttribute('aria-valuemin', String(props.min.value));\n        else rawInput.removeAttribute('aria-valuemin');\n\n        if (props.max.value != null) rawInput.setAttribute('aria-valuemax', String(props.max.value));\n        else rawInput.removeAttribute('aria-valuemax');\n\n        if (isReadonly.value) rawInput.setAttribute('aria-readonly', 'true');\n        else rawInput.removeAttribute('aria-readonly');\n      });\n\n      // Fire user ref callback\n      props.ref.value?.(rawInput);\n\n      refSub = rippleWatch(props.ref, (cb) => {\n        cb?.(rawInput);\n      });\n    };\n\n    // ore-input's own onElement/ref lifecycle calls this back with `null` when its\n    // inner <input> unmounts, so no explicit teardown is needed here.\n    onElement(bitInputRef, (bitInputEl) => {\n      bitInputEl.ref = handleFieldRef;\n    });\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => fieldValue.value || null,\n        variant: props.variant,\n      },\n    });\n\n    const isNonInteractive = computed(() => isDisabled.value || isReadonly.value);\n\n    // The stepper buttons are slotted *into* ore-input's own `prefix`/`suffix` slots instead of\n    // sitting outside it in a separate wrapper — they render inside ore-input's own bordered\n    // box (same as its built-in clear/password-toggle buttons), matching every other field's\n    // single-box look instead of floating as two detached icon buttons either side of a\n    // narrow field. `@keydown` moves to ore-input itself: native keyboard events are\n    // `composed: true` and bubble out past a shadow boundary, so it still sees keydowns\n    // originating from ore-input's internal <input> as well as from these slotted buttons.\n    return html`\n      <ore-input\n        class=\"field\"\n        part=\"field control\"\n        ref=\"${bitInputRef}\"\n        value=\"${() => fieldValue.value ?? 0}\"\n        label=\"${() => props.label.value ?? ''}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        name=\"${() => props.name.value ?? ''}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        size=\"${props.size}\"\n        color=\"${() => props.color.value ?? ''}\"\n        variant=\"${props.variant}\"\n        rounded=\"${() => props.rounded.value}\"\n        ?disabled=\"${props.disabled}\"\n        ?readonly=\"${isReadonly}\"\n        ?fullwidth=\"${() => props.fullwidth.value}\"\n        ?loading=\"${() => props.loading.value}\"\n        ?success=\"${() => props.success.value}\"\n        @keydown=\"${(e: KeyboardEvent) => spinner.handleKeydown(e)}\">\n        <button\n          slot=\"prefix\"\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMin()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(-(Number(props.step.value) || 1), e)}\">\n          <ore-icon name=\"minus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n        <button\n          slot=\"suffix\"\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMax()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(Number(props.step.value) || 1, e)}\">\n          <ore-icon name=\"plus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </ore-input>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [disabledLoadingMixin, componentStyles],\n});\n"],"mappings":"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"}