@bridge-ui/vue 0.2.0 → 0.4.0

package/dist/Components/FormField/composables/useFormField.js

@@ -28,39 +28,39 @@ var b = [
 	"showErrorIcon",
 	"hideErrorMessage"
 ];
-function x(x, S, C = {}) {
-	let w = c(), T = l(), E = o(() => y({
+function x(x, ee, S = {}) {
+	let C = c(), w = l(), T = o(() => y({
 		props: s(x),
 		bridgeKeys: b
-	})), { merged: D, entry: O } = i({
-		libDefaults: S,
-		componentName: C.componentName,
-		props: () => E.value.componentProps
-	}), k = o(() => D.value.customProps), A = o(() => C.control?.() ?? "input"), j = a({
-		entry: O,
-		props: () => E.value.componentProps
-	}), M = o(() => D.value.error === !0), N = o(() => !!D.value.disabled), P = o(() => !!D.value.readonly), F = o(() => D.value.variant ?? "outline"), ee = o(() => D.value.errorIcon ?? "alert"), I = o(() => F.value === "notched"), L = o(() => F.value === "stacked"), R = o(() => F.value === "underlined"), z = o(() => A.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !D.value.hideErrorMessage), H = o(() => {
-		let e = E.value.inheritedAttrs.id;
-		return D.value.controlId ?? e ?? w;
-	}), U = o(() => M.value && t(T, "errorMessage", D.value.errorMessage)), W = o(() => (I.value || L.value) && (t(T, "label", D.value.label) || t(T, "corner", D.value.corner))), G = o(() => t(T, "label", D.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
+	})), { merged: E, entry: D } = i({
+		libDefaults: ee,
+		componentName: S.componentName,
+		props: () => T.value.componentProps
+	}), O = o(() => E.value.customProps), k = o(() => S.control?.() ?? "input"), A = a({
+		entry: D,
+		props: () => T.value.componentProps
+	}), j = o(() => E.value.error === !0), M = o(() => !!E.value.disabled), N = o(() => !!E.value.readonly), P = o(() => E.value.variant ?? "outline"), F = o(() => E.value.errorIcon ?? "alert"), I = o(() => P.value === "notched"), L = o(() => P.value === "stacked"), R = o(() => P.value === "underlined"), z = o(() => k.value === "textarea"), B = o(() => z.value && !!S.likeInput?.()), V = o(() => !E.value.hideErrorMessage), H = o(() => {
+		let e = T.value.inheritedAttrs.id;
+		return E.value.controlId ?? e ?? C;
+	}), U = o(() => j.value && t(w, "errorMessage", E.value.errorMessage)), W = o(() => (I.value || L.value) && (t(w, "label", E.value.label) || t(w, "corner", E.value.corner))), G = o(() => t(w, "label", E.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
 		let e = [];
-		return !M.value && t(T, "description", D.value.description) && e.push(`${H.value}-description`), M.value && !D.value.hideErrorMessage && t(T, "errorMessage", D.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+		return !j.value && t(w, "description", E.value.description) && e.push(`${H.value}-description`), j.value && !E.value.hideErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
 	}), q = o(() => {
-		let e = v(m, O.value?.tokens?.size);
-		return u(e, [D.value.size, F.value]);
+		let e = v(m, D.value?.tokens?.size);
+		return u(e, [E.value.size, P.value]);
 	}), J = o(() => {
-		let e = v(f, O.value?.tokens?.color);
+		let e = v(f, D.value?.tokens?.color);
 		return _({
 			tokens: e,
-			color: D.value.color,
-			invalid: M.value
+			color: E.value.color,
+			invalid: j.value
 		});
 	}), Y = o(() => {
-		let e = v(p, O.value?.tokens?.rounded);
-		return u(e, D.value.rounded);
+		let e = v(p, D.value?.tokens?.rounded);
+		return u(e, E.value.rounded);
 	}), X = o(() => {
-		let e = v(h, O.value?.tokens?.variant);
-		return u(e, F.value);
+		let e = v(h, D.value?.tokens?.variant);
+		return u(e, P.value);
 	}), Z = o(() => R.value ? J.value?.underlined : J.value?.input), Q = o(() => {
 		if (L.value) return g({
 			[q.value?.insetTop ?? ""]: !0,
@@ -68,42 +68,45 @@ function x(x, S, C = {}) {
 			[q.value?.insetEnd ?? ""]: !0
 		});
 	}), te = o(() => {
-		let t = C.reservedSlots?.() ?? [], n = e(T, "end") || t.includes("end"), r = e(T, "start") || t.includes("start");
+		let t = S.reservedSlots?.() ?? [], n = e(w, "end") || t.includes("end"), r = e(w, "start") || t.includes("start");
 		if (!L.value) return !r && !n ? q.value?.padding : g({
 			[q.value?.insetStart ?? ""]: !r,
 			[q.value?.insetEnd ?? ""]: !n
 		});
-	}), ne = o(() => r(k.value?.end, {}, g({
+	}), ne = o(() => r(O.value?.end, {}, g({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-dark-500": !0,
-		[Y.value?.end ?? ""]: !R.value && !L.value,
 		[J.value?.end ?? ""]: !0,
-		[j.value.end ?? ""]: !0
+		[A.value.end ?? ""]: !0
 	}))), re = o(() => {
-		let e = E.value.inheritedAttrs;
-		return r(k.value?.root, {
+		let e = T.value.inheritedAttrs;
+		return r(O.value?.root, {
 			class: g(e.class),
 			...d(e, ["class"])
 		}, g({
 			"group w-full relative": !0,
 			"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60": !0,
 			"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-			[j.value.root ?? ""]: !0
+			[A.value.root ?? ""]: !0
 		}));
-	}), ie = o(() => r(k.value?.errorMessage, {}, g({
+	}), ie = o(() => r(O.value?.errorMessage, {}, g({
 		"mt-2": !0,
 		"min-h-[1lh]": V.value,
 		"text-error-600 dark:text-error-400": !0,
 		[q.value?.text ?? ""]: !0,
-		[j.value.errorMessage ?? ""]: !0
+		[A.value.errorMessage ?? ""]: !0
 	}))), ae = o(() => r({
-		...k.value?.input,
+		...O.value?.input,
 		id: H.value,
-		disabled: N.value,
-		readonly: P.value,
+		disabled: M.value,
+		readonly: N.value,
 		"aria-describedby": K.value,
-		"aria-invalid": M.value || void 0
-	}, d(E.value.inheritedAttrs, ["class"]), g({
+		"aria-invalid": j.value || void 0
+	}, d(T.value.inheritedAttrs, [
+		"class",
+		"modelValue",
+		"onUpdate:modelValue"
+	]), g({
 		"flex-1 min-w-0 min-h-0 bg-transparent border-0 shadow-none": !0,
 		"h-full": !z.value && !L.value,
 		"max-h-none": z.value,
@@ -113,33 +116,32 @@ function x(x, S, C = {}) {
 		[q.value?.input ?? ""]: !z.value,
 		[q.value?.textarea ?? ""]: z.value,
 		[q.value?.textareaLikeInput ?? ""]: B.value,
-		[j.value.input ?? ""]: !0
-	}))), oe = o(() => n(k.value?.label, {
+		[A.value.input ?? ""]: !0
+	}))), oe = o(() => n(O.value?.label, {
 		for: H.value,
-		size: D.value.size,
-		error: M.value,
-		required: D.value.required,
+		size: E.value.size,
+		error: j.value,
+		required: E.value.required,
 		classes: {
-			required: j.value.required,
+			required: A.value.required,
 			root: g({
 				[X.value?.label ?? ""]: I.value,
-				[j.value.label ?? ""]: !0
+				[A.value.label ?? ""]: !0
 			})
 		}
-	})), $ = o(() => r(k.value?.start, {}, g({
+	})), $ = o(() => r(O.value?.start, {}, g({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-dark-400": !0,
-		[Y.value?.start ?? ""]: !R.value && !L.value,
 		[J.value?.start ?? ""]: !0,
-		[j.value.start ?? ""]: !0
-	}))), se = o(() => r(k.value?.corner, {}, g({
+		[A.value.start ?? ""]: !0
+	}))), se = o(() => r(O.value?.corner, {}, g({
 		"text-dark-500 dark:text-dark-400": !I.value,
 		[q.value?.text ?? ""]: !0,
 		[X.value?.corner ?? ""]: I.value,
-		[j.value.corner ?? ""]: !0
+		[A.value.corner ?? ""]: !0
 	}))), ce = o(() => {
-		let e = t(T, "label", D.value.label);
-		return r(k.value?.header, {}, g({
+		let e = t(w, "label", E.value.label);
+		return r(O.value?.header, {}, g({
 			flex: !0,
 			"w-full shrink-0": !0,
 			"justify-between": e,
@@ -147,18 +149,18 @@ function x(x, S, C = {}) {
 			"items-center": I.value,
 			"items-end": L.value,
 			[X.value?.labelRow ?? ""]: W.value,
-			[j.value.header ?? ""]: !0
+			[A.value.header ?? ""]: !0
 		}));
-	}), le = o(() => r(k.value?.header, {}, g({
+	}), le = o(() => r(O.value?.header, {}, g({
 		flex: !0,
 		"mb-1": !0,
 		[G.value]: !0,
-		[j.value.header ?? ""]: !0
-	}))), ue = o(() => r(k.value?.endIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), de = o(() => r(k.value?.end, {}, g({
+		[A.value.header ?? ""]: !0
+	}))), ue = o(() => r(O.value?.endIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), de = o(() => r(O.value?.end, {}, g({
 		"group/end wrapper-end-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 		"self-stretch min-h-0 overflow-hidden py-0.5 pe-0.5": L.value,
 		"h-full min-h-0 overflow-hidden py-0.5 pe-0.5": !L.value,
-		[j.value.end ?? ""]: !0
+		[A.value.end ?? ""]: !0
 	}))), fe = o(() => r({}, {}, g({
 		"flex min-h-0 min-w-0 flex-1 flex-col": !0,
 		[Q.value ?? ""]: !0
@@ -167,56 +169,59 @@ function x(x, S, C = {}) {
 		[q.value?.controlRow ?? ""]: !0
 	})));
 	return {
-		slots: T,
-		merged: D,
-		control: A,
+		slots: w,
+		merged: E,
+		control: k,
 		endBind: ne,
 		rootBind: re,
 		controlId: H,
 		errorBind: ie,
-		errorIcon: ee,
+		errorIcon: F,
 		inputBind: ae,
 		isNotched: I,
 		isStacked: L,
 		startBind: $,
 		cornerBind: se,
 		headerBind: le,
-		isDisabled: N,
-		isReadonly: P,
-		variantKey: F,
+		isDisabled: M,
+		isReadonly: N,
+		variantKey: P,
 		endIconBind: ue,
 		endSlotBind: de,
-		invalidated: M,
-		containerBind: o(() => r(k.value?.container, { "data-bridge-rounded": D.value.rounded ?? "md" }, g({
+		invalidated: j,
+		containerBind: o(() => r(O.value?.container, {
+			"data-bridge-variant": P.value,
+			"data-bridge-rounded": E.value.rounded ?? "md"
+		}, g({
 			"group/field relative flex flex-row items-stretch overflow-hidden": L.value,
 			"group/field relative flex justify-start gap-x-2 items-stretch": !L.value,
 			"transition-all ease-in-out duration-150 outline-none": !0,
-			"bg-dark-100 dark:bg-dark-800": N.value && !M.value,
+			"bg-dark-100 dark:bg-dark-800": M.value && !j.value,
 			[q.value?.container ?? ""]: !z.value,
 			[q.value?.containerTextareaLikeInput ?? ""]: B.value,
 			[q.value?.containerTextarea ?? ""]: z.value && !B.value,
 			[X.value?.container ?? ""]: !0,
-			[Y.value?.input ?? ""]: !R.value,
+			[Y.value ?? ""]: !R.value,
 			[te.value ?? ""]: !0,
 			[Z.value ?? ""]: !0,
 			"rounded-none": R.value,
-			"bg-error-50 ring-error-500 dark:bg-error-700/10 dark:ring-error-600": M.value && !R.value,
-			"border-error-500 dark:border-error-600": M.value && R.value,
-			[j.value.container ?? ""]: !0
+			"bg-error-50 ring-error-500 dark:bg-error-700/10 dark:ring-error-600": j.value && !R.value,
+			"border-error-500 dark:border-error-600": j.value && R.value,
+			[A.value.container ?? ""]: !0
 		}))),
-		startIconBind: o(() => r(k.value?.startIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
-		startSlotBind: o(() => r(k.value?.start, {}, g({
+		startIconBind: o(() => r(O.value?.startIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
+		startSlotBind: o(() => r(O.value?.start, {}, g({
 			"group/start wrapper-start-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 			"self-stretch min-h-0 overflow-hidden py-0.5 ps-0.5": L.value,
 			"h-full min-h-0 overflow-hidden py-0.5 ps-0.5": !L.value,
-			[j.value.start ?? ""]: !0
+			[A.value.start ?? ""]: !0
 		}))),
 		fieldLabelProps: oe,
 		ariaDescribedBy: K,
-		descriptionBind: o(() => r(k.value?.description, {}, g({
+		descriptionBind: o(() => r(O.value?.description, {}, g({
 			"mt-2 text-dark-500 dark:text-dark-400": !0,
 			[q.value?.text ?? ""]: !0,
-			[j.value.description ?? ""]: !0
+			[A.value.description ?? ""]: !0
 		}))),
 		stackedBodyBind: fe,
 		hasInsetLabelRow: W,

package/dist/Components/Menu/Menu.vue_vue_type_script_setup_true_lang.js

@@ -29,6 +29,7 @@ var v = /*@__PURE__*/ l({
 			type: Boolean,
 			default: !1
 		},
+		matchWidth: { type: Boolean },
 		offset: { default: 4 },
 		onShowChange: {},
 		persistent: {

package/dist/Components/Menu/composables/useMenu.d.ts

@@ -24,7 +24,7 @@ export declare function useMenu(props: MenuOwnProps, libDefaults: MenuLibDefault
     merged: import('vue').ComputedRef<MenuMerged>;
     menuId: string;
     mounted: Ref<boolean, boolean>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "teleportTo" | "closeOnClickAway" | "disableAutoFocus" | "strategy">, "anchorEl" | "onShowChange">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "teleportTo" | "closeOnClickAway" | "disableAutoFocus" | "matchWidth" | "strategy">, "anchorEl" | "onShowChange">>>;
     isPortaled: import('vue').ComputedRef<boolean>;
     triggerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         tabindex: number;

package/dist/Components/Menu/composables/useMenu.js

@@ -13,6 +13,7 @@ var le = [
 	"rounded",
 	"strategy",
 	"placement",
+	"matchWidth",
 	"persistent",
 	"teleportTo",
 	"customProps",
@@ -100,6 +101,7 @@ function v(v, ue, y = {}) {
 			offset: L.value.offset,
 			strategy: L.value.strategy,
 			placement: L.value.placement,
+			matchWidth: L.value.matchWidth === !0,
 			onReferenceHidden: () => {
 				!M || !U.value || !P.value || q();
 			}
@@ -146,7 +148,7 @@ function v(v, ue, y = {}) {
 		j?.(), j = null, A?.(), A = null, O?.(), O = null, D?.release(), D = null, E = null, C.value = "", N.value = m, Y();
 	}
 	let xe = r(() => e(z.value?.root, pe.value, u({
-		"relative inline-block text-left": !0,
+		"relative inline-flex": !0,
 		[c(B.value, "root") ?? ""]: !0
 	}))), Se = r(() => e(z.value?.trigger, {}, {
 		tabindex: 0,
@@ -157,7 +159,7 @@ function v(v, ue, y = {}) {
 		onClickCapture: he,
 		"aria-controls": P.value ? x : void 0,
 		class: u({
-			"inline-block w-fit max-w-full cursor-pointer outline-hidden": !0,
+			"inline-flex w-fit max-w-full cursor-pointer outline-hidden": !0,
 			[c(B.value, "trigger") ?? ""]: !0
 		})
 	})), Ce = r(() => e(z.value?.content, {}, {
@@ -167,7 +169,9 @@ function v(v, ue, y = {}) {
 		style: { zIndex: N.value },
 		"aria-hidden": V.value ? !0 : void 0,
 		class: u({
-			"bg-white text-dark-900 dark:bg-dark-800 dark:text-dark-100 ring-1 ring-black/5 dark:ring-white/10 outline-hidden overflow-hidden min-w-32 w-max max-w-[calc(100vw-16px)]": !0,
+			"bg-white text-dark-900 dark:bg-dark-800 dark:text-dark-100 ring-1 ring-black/5 dark:ring-white/10 outline-hidden overflow-hidden max-w-[calc(100vw-16px)]": !0,
+			"min-w-0 w-full": L.value.matchWidth === !0,
+			"min-w-32 w-max": L.value.matchWidth !== !0,
 			"invisible pointer-events-none": V.value,
 			[de.value ?? ""]: !0,
 			[fe.value ?? ""]: !0,

package/dist/Components/Menu/menu.types.d.ts

@@ -112,6 +112,12 @@ export interface MenuOwnProps {
      * @default false
      */
     keepMounted?: boolean;
+    /**
+     * When true, the panel width matches the trigger / anchor.
+     *
+     * @default false
+     */
+    matchWidth?: boolean;
     /**
      * Gap between the trigger and the menu panel (px).
      *

package/dist/Components/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,21 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
 import { useHoldRepeat as n } from "../../Utils/useHoldRepeat.js";
-import { mergePartBind as r, resolveFieldAdornmentIconSize as i } from "../../Utils/index.js";
+import { useOptionalModel as r } from "../../Utils/useOptionalModel.js";
+import { mergePartBind as i } from "../../Utils/index.js";
 import a from "../Icon/Icon.js";
 import { FORM_FIELD_CHROME_SLOT_NAMES as o } from "../FormField/formField.types.js";
 import s from "../FormField/FormField.js";
 import { useNumberField as c } from "./composables/useNumberField.js";
-import { computed as l, createBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, isRef as g, mergeModels as _, mergeProps as v, normalizeProps as y, openBlock as b, ref as x, renderList as S, renderSlot as C, unref as w, useModel as T, vModelDynamic as E, withCtx as D, withDirectives as O } from "vue";
-import { isUndefined as k } from "es-toolkit/compat";
-import { cn as A } from "@bridge-ui/core/Utils";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeClass as x, normalizeProps as S, openBlock as C, ref as ee, renderList as w, renderSlot as T, unref as E, useModel as D, vModelDynamic as O, withCtx as k, withDirectives as A } from "vue";
+import { cn as j } from "@bridge-ui/core/Utils";
 //#region src/Components/NumberField/NumberField.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, M = /*@__PURE__*/ m({
+var M = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "NumberField",
-	props: /*@__PURE__*/ _({
+	props: /*@__PURE__*/ y({
 		classes: {},
+		controlVariant: {},
 		customProps: {},
 		defaultValue: {},
 		max: {},
@@ -43,50 +44,59 @@ var j = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overf
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ _(["change", "update:modelValue"], ["update:modelValue"]),
-	setup(m, { emit: _ }) {
-		let M = _, N = T(m, "modelValue"), P = m, F = x(P.defaultValue), I = l({
-			set: (e) => {
-				N.value = e, F.value = e;
-			},
-			get: () => k(N.value) ? F.value : N.value
-		}), L = e(), { decrement: R, formField: z, increment: B, inputBind: V, stringModel: H, mergedClasses: U } = c(P, I, { onChange: (e) => M("change", e) }), W = n(() => B(), () => ({ disabled: P.disabled })), G = n(() => R(), () => ({ disabled: P.disabled })), K = l(() => i(P.size)), q = l(() => r(P.customProps?.increment, {
+	emits: /*@__PURE__*/ y(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(g, { emit: y }) {
+		let M = e(), te = y, N = D(g, "modelValue"), P = g, F = ee(P.defaultValue), I = r(N, F), { isSplit: L, decrement: R, formField: z, increment: B, inputBind: V, stringModel: H, decrementIcon: U, incrementIcon: W, mergedClasses: G, incrementFirst: K, stepperIconSize: q, controlVariantItem: J } = c(P, I, { onChange: (e) => te("change", e) }), Y = n(() => B(), () => ({ disabled: P.disabled })), X = n(() => R(), () => ({ disabled: P.disabled })), Z = l(() => o.filter((e) => !(e === "end" || e === "start" && L.value))), Q = l(() => i(P.customProps?.increment, {
 			type: "button",
 			disabled: P.disabled,
-			onClick: W.onPressClick,
-			onPointerup: W.onPressPointerUp,
-			onPointerdown: W.onPressPointerDown,
-			"aria-label": L("Increment value"),
-			onLostpointercapture: W.onPressLostPointerCapture
-		}, A({
-			"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
-			[U.value.increment ?? ""]: !0
-		}))), J = l(() => r(P.customProps?.decrement, {
+			onClick: Y.onPressClick,
+			onPointerup: Y.onPressPointerUp,
+			onPointerdown: Y.onPressPointerDown,
+			"aria-label": M("Increment value"),
+			onLostpointercapture: Y.onPressLostPointerCapture
+		}, j({
+			[J.value.button]: !0,
+			[G.value.increment ?? ""]: !0
+		}))), $ = l(() => i(P.customProps?.decrement, {
 			type: "button",
 			disabled: P.disabled,
-			onClick: G.onPressClick,
-			onPointerup: G.onPressPointerUp,
-			onPointerdown: G.onPressPointerDown,
-			"aria-label": L("Decrement value"),
-			onLostpointercapture: G.onPressLostPointerCapture
-		}, A({
-			"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
-			[U.value.decrement ?? ""]: !0
+			onClick: X.onPressClick,
+			onPointerup: X.onPressPointerUp,
+			onPointerdown: X.onPressPointerDown,
+			"aria-label": M("Decrement value"),
+			onLostpointercapture: X.onPressLostPointerCapture
+		}, j({
+			[J.value.button]: !0,
+			[G.value.decrement ?? ""]: !0
 		})));
-		return (e, n) => (b(), u(w(s), { field: w(z) }, f({
-			end: D(() => [d("div", j, [d("button", y(h(q.value)), [p(w(a), v({
-				icon: "chevronUp",
-				size: K.value
-			}, P.customProps?.incrementIcon), null, 16, ["size"])], 16), d("button", y(h(J.value)), [p(w(a), v({
-				icon: "chevronDown",
-				size: K.value
-			}, P.customProps?.decrementIcon), null, 16, ["size"])], 16)])]),
-			default: D(() => [O(d("input", v({ "onUpdate:modelValue": n[0] ||= (e) => g(H) ? H.value = e : null }, w(V)), null, 16), [[E, w(H)]])]),
+		return (e, n) => (C(), u(E(s), { field: E(z) }, m({
+			end: k(() => [p("div", { class: x(E(J).endGroup) }, [
+				E(K) ? (C(), f("button", S(b({ key: 0 }, Q.value)), [h(E(a), b({
+					icon: E(W),
+					size: E(q)
+				}, P.customProps?.incrementIcon), null, 16, ["icon", "size"])], 16)) : d("", !0),
+				E(L) ? d("", !0) : (C(), f("button", S(b({ key: 1 }, $.value)), [h(E(a), b({
+					icon: E(U),
+					size: E(q)
+				}, P.customProps?.decrementIcon), null, 16, ["icon", "size"])], 16)),
+				E(K) ? d("", !0) : (C(), f("button", S(b({ key: 2 }, Q.value)), [h(E(a), b({
+					icon: E(W),
+					size: E(q)
+				}, P.customProps?.incrementIcon), null, 16, ["icon", "size"])], 16))
+			], 2)]),
+			default: k(() => [A(p("input", b({ "onUpdate:modelValue": n[0] ||= (e) => v(H) ? H.value = e : null }, E(V)), null, 16), [[O, E(H)]])]),
 			_: 2
-		}, [S(w(t)(w(o).filter((e) => e !== "end"), e.$slots), (t) => ({
+		}, [w(E(t)(Z.value, e.$slots), (t) => ({
 			name: t,
-			fn: D((n) => [C(e.$slots, t, y(h(n || {})))])
-		}))]), 1032, ["field"]));
+			fn: k((n) => [T(e.$slots, t, S(_(n || {})))])
+		})), E(L) ? {
+			name: "start",
+			fn: k(() => [p("div", { class: x(E(J).startGroup) }, [p("button", S(_($.value)), [h(E(a), b({
+				icon: E(U),
+				size: E(q)
+			}, P.customProps?.decrementIcon), null, 16, ["icon", "size"])], 16)], 2)]),
+			key: "0"
+		} : void 0]), 1032, ["field"]));
 	}
 });
 //#endregion

package/dist/Components/NumberField/composables/useNumberField.d.ts

@@ -178,7 +178,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -448,6 +448,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
@@ -690,6 +691,12 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         type: string;
         step: number;
     }>>;
-    stringModel: import('vue').WritableComputedRef<string | undefined, string | null | undefined>;
+    stringModel: import('vue').WritableComputedRef<string, string | null | undefined>;
     mergedClasses: import('vue').ComputedRef<Partial<NumberFieldClasses>>;
+    stepperIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
+    controlVariantItem: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').NumberFieldControlVariantItem>;
+    isSplit: import('vue').ComputedRef<boolean>;
+    decrementIcon: import('vue').ComputedRef<"minus" | "chevronDown">;
+    incrementIcon: import('vue').ComputedRef<"plus" | "chevronUp">;
+    incrementFirst: import('vue').ComputedRef<boolean>;
 };

package/dist/Components/NumberField/composables/useNumberField.js

@@ -1,23 +1,32 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { useFormField as r } from "../../FormField/composables/useFormField.js";
 import { computed as i, useAttrs as a } from "vue";
-import { isNil as o } from "es-toolkit/compat";
-import { cn as s } from "@bridge-ui/core/Utils";
+import { get as o, isNil as s } from "es-toolkit/compat";
+import { getNumberFieldStepper as c, resolveNumberFieldStepperIconSize as l } from "@bridge-ui/core/Domain";
+import { numberFieldControlVariantProps as u } from "@bridge-ui/core/Tokens";
+import { cn as d, mergeBridgeUILayeredClasses as f } from "@bridge-ui/core/Utils";
 //#region src/Components/NumberField/composables/useNumberField.ts
-function c(c, l, u = {}) {
-	let d = a(), f = i(() => c.step ?? 1), { entry: p } = t({
+function p(p, m, h = {}) {
+	let g = a(), _ = i(() => p.step ?? 1), v = i(() => ({
+		classes: p.classes,
+		controlVariant: p.controlVariant
+	})), { entry: y, merged: b } = t({
 		componentName: "NumberField",
-		props: () => ({ classes: c.classes })
-	}), m = n({
-		entry: p,
-		props: () => ({ classes: c.classes })
-	}), h = r(() => {
-		let { min: e, max: t, step: n, classes: r, defaultValue: i, ...a } = c;
+		props: () => v.value,
+		libDefaults: { controlVariant: "stacked" }
+	}), x = n({
+		entry: y,
+		props: () => v.value
+	}), S = i(() => b.value.controlVariant ?? "stacked"), C = i(() => c(S.value)), w = i(() => {
+		let e = f(u, y.value?.tokens?.controlVariant);
+		return o(e, S.value) ?? u.stacked;
+	}), T = r(() => {
+		let { min: e, max: t, step: n, classes: r, defaultValue: i, controlVariant: a, ...o } = p;
 		return {
-			...d,
-			...a,
+			...g,
+			...o,
 			showErrorIcon: !1,
-			classes: m.value
+			classes: x.value
 		};
 	}, {
 		size: "md",
@@ -27,41 +36,45 @@ function c(c, l, u = {}) {
 		showErrorIcon: !1
 	}, {
 		componentName: "NumberField",
-		reservedSlots: () => ["end"]
-	}), g = i(() => e(h.inputBind.value, {
-		min: c.min,
-		max: c.max,
+		reservedSlots: () => C.value.isSplit ? ["start", "end"] : ["end"]
+	}), E = i(() => l(T.merged.value.size, S.value)), D = i(() => e(T.inputBind.value, {
+		min: p.min,
+		max: p.max,
 		type: "number",
-		step: f.value
-	}, s({ "appearance:textfield [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none": !0 }))), _ = i(() => l.value ?? void 0), v = i({
-		get: () => {
-			if (!o(_.value)) return String(_.value);
-		},
+		step: _.value
+	}, d({ "appearance:textfield [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none": !0 }))), O = i(() => m.value ?? void 0), k = i({
+		get: () => s(O.value) ? "" : String(O.value),
 		set: (e) => {
-			if (e === "" || o(e)) {
-				l.value = void 0;
+			if (e === "" || s(e)) {
+				m.value = void 0;
 				return;
 			}
 			let t = Number(e);
-			Number.isNaN(t) || (l.value = t, u.onChange?.(t));
+			Number.isNaN(t) || (m.value = t, h.onChange?.(t));
 		}
-	}), y = (e) => {
-		l.value = e, u.onChange?.(e);
+	}), A = (e) => {
+		m.value = e, h.onChange?.(e);
 	};
 	return {
 		decrement: () => {
-			let e = (_.value ?? c.min ?? 0) - f.value;
-			return !o(c.min) && e < c.min ? !1 : (y(e), !0);
+			let e = (O.value ?? p.min ?? 0) - _.value;
+			return !s(p.min) && e < p.min ? !1 : (A(e), !0);
 		},
-		formField: h,
+		formField: T,
 		increment: () => {
-			let e = (_.value ?? c.min ?? 0) + f.value;
-			return !o(c.max) && e > c.max ? !1 : (y(e), !0);
+			let e = (O.value ?? p.min ?? 0) + _.value;
+			return !s(p.max) && e > p.max ? !1 : (A(e), !0);
 		},
-		inputBind: g,
-		stringModel: v,
-		mergedClasses: m
+		inputBind: D,
+		stringModel: k,
+		mergedClasses: x,
+		stepperIconSize: E,
+		controlVariantItem: w,
+		isSplit: i(() => C.value.isSplit),
+		decrementIcon: i(() => C.value.decrementIcon),
+		incrementIcon: i(() => C.value.incrementIcon),
+		incrementFirst: i(() => C.value.incrementFirst)
 	};
 }
 //#endregion
-export { c as useNumberField };
+export { p as useNumberField };

package/dist/Components/NumberField/index.d.ts

@@ -1,4 +1,4 @@
 export { useNumberField } from './composables/useNumberField';
 export type { UseNumberFieldOptions } from './composables/useNumberField';
-export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldEmits, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './numberField.types';
+export type { NumberFieldClasses, NumberFieldControlVariantOverrides, NumberFieldCustomProps, NumberFieldEmits, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './numberField.types';
 export { default as NumberField } from './NumberField.vue';