@bridge-ui/vue 0.3.0 → 0.5.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/List/composables/useList.d.ts

@@ -1,5 +1,7 @@
 import { ListOwnProps, ListProps } from '../list.types';
 export declare function useList(props: ListOwnProps): {
     merged: import('vue').ComputedRef<ListOwnProps>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListProps, "classes" | "customProps" | "as" | "dense" | "nested">, never>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListProps, "classes" | "customProps" | "as" | "dense" | "nested">, never>>>;
 };

package/dist/Components/List/composables/useList.js

@@ -29,11 +29,11 @@ function f(f) {
 	let b = i(() => c(m.value.inheritedAttrs, []));
 	return {
 		merged: h,
-		rootBind: i(() => e(_.value?.root, b.value, l({
+		rootBind: i(() => e(_.value?.root, b.value, { class: l({
 			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
 			[s(v.value, "root") ?? ""]: !0
-		})))
+		}) }))
 	};
 }
 //#endregion

package/dist/Components/ListItem/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -38,15 +38,15 @@ var C = /*@__PURE__*/ d({
 		return (r, a) => (g(), o(v(R.value), h(f(b(D))), {
 			default: S(() => [b(F) ? (g(), c("div", h(p({ key: 0 }, b(F))), [l("div", { class: m(b(O)) }, [
 				b(e)(b(C), "start") ? (g(), c("div", h(p({ key: 0 }, b(k))), [_(r.$slots, "start")], 16)) : s("", !0),
-				l("div", h(f(b(j))), [b(A) ? (g(), c("span", h(p({ key: 0 }, b(M))), [b(e)(b(C), "primary") ? _(r.$slots, "primary", {}, void 0, void 0, 0) : b(e)(b(C), "default") ? _(r.$slots, "default", {}, void 0, void 0, 1) : b(t)(b(w).primary) ? (g(), c(i, { key: 2 }, [u(y(b(w).primary), 1)], 64)) : s("", !0)], 16)) : s("", !0), b(N) ? (g(), c("span", h(p({ key: 1 }, b(P))), [b(e)(b(C), "secondary") ? _(r.$slots, "secondary", {}, void 0, void 0, 0) : b(t)(b(w).secondary) ? (g(), c(i, { key: 1 }, [u(y(b(w).secondary), 1)], 64)) : s("", !0)], 16)) : s("", !0)], 16),
-				b(T) ? (g(), c("div", h(p({ key: 1 }, b(E))), [b(e)(b(C), "end") ? _(r.$slots, "end", {}, void 0, void 0, 0) : b(L) ? (g(), o(n, p({ key: 1 }, b(I), { icon: b(L) }), null, 16, ["icon"])) : s("", !0)], 16)) : s("", !0)
+				b(A) || b(N) ? (g(), c("div", h(p({ key: 1 }, b(j))), [b(A) ? (g(), c("span", h(p({ key: 0 }, b(M))), [b(e)(b(C), "primary") ? _(r.$slots, "primary", {}, void 0, void 0, 0) : b(e)(b(C), "default") ? _(r.$slots, "default", {}, void 0, void 0, 1) : b(t)(b(w).primary) ? (g(), c(i, { key: 2 }, [u(y(b(w).primary), 1)], 64)) : s("", !0)], 16)) : s("", !0), b(N) ? (g(), c("span", h(p({ key: 1 }, b(P))), [b(e)(b(C), "secondary") ? _(r.$slots, "secondary", {}, void 0, void 0, 0) : b(t)(b(w).secondary) ? (g(), c(i, { key: 1 }, [u(y(b(w).secondary), 1)], 64)) : s("", !0)], 16)) : s("", !0)], 16)) : s("", !0),
+				b(T) ? (g(), c("div", h(p({ key: 2 }, b(E))), [b(e)(b(C), "end") ? _(r.$slots, "end", {}, void 0, void 0, 0) : b(L) ? (g(), o(n, p({ key: 1 }, b(I), { icon: b(L) }), null, 16, ["icon"])) : s("", !0)], 16)) : s("", !0)
 			], 2)], 16)) : (g(), c("div", {
 				key: 1,
 				class: m(b(O))
 			}, [
 				b(e)(b(C), "start") ? (g(), c("div", h(p({ key: 0 }, b(k))), [_(r.$slots, "start")], 16)) : s("", !0),
-				l("div", h(f(b(j))), [b(A) ? (g(), c("span", h(p({ key: 0 }, b(M))), [b(e)(b(C), "primary") ? _(r.$slots, "primary", {}, void 0, void 0, 0) : b(e)(b(C), "default") ? _(r.$slots, "default", {}, void 0, void 0, 1) : b(t)(b(w).primary) ? (g(), c(i, { key: 2 }, [u(y(b(w).primary), 1)], 64)) : s("", !0)], 16)) : s("", !0), b(N) ? (g(), c("span", h(p({ key: 1 }, b(P))), [b(e)(b(C), "secondary") ? _(r.$slots, "secondary", {}, void 0, void 0, 0) : b(t)(b(w).secondary) ? (g(), c(i, { key: 1 }, [u(y(b(w).secondary), 1)], 64)) : s("", !0)], 16)) : s("", !0)], 16),
-				b(T) ? (g(), c("div", h(p({ key: 1 }, b(E))), [b(e)(b(C), "end") ? _(r.$slots, "end", {}, void 0, void 0, 0) : b(L) ? (g(), o(n, p({ key: 1 }, b(I), { icon: b(L) }), null, 16, ["icon"])) : s("", !0)], 16)) : s("", !0)
+				b(A) || b(N) ? (g(), c("div", h(p({ key: 1 }, b(j))), [b(A) ? (g(), c("span", h(p({ key: 0 }, b(M))), [b(e)(b(C), "primary") ? _(r.$slots, "primary", {}, void 0, void 0, 0) : b(e)(b(C), "default") ? _(r.$slots, "default", {}, void 0, void 0, 1) : b(t)(b(w).primary) ? (g(), c(i, { key: 2 }, [u(y(b(w).primary), 1)], 64)) : s("", !0)], 16)) : s("", !0), b(N) ? (g(), c("span", h(p({ key: 1 }, b(P))), [b(e)(b(C), "secondary") ? _(r.$slots, "secondary", {}, void 0, void 0, 0) : b(t)(b(w).secondary) ? (g(), c(i, { key: 1 }, [u(y(b(w).secondary), 1)], 64)) : s("", !0)], 16)) : s("", !0)], 16)) : s("", !0),
+				b(T) ? (g(), c("div", h(p({ key: 2 }, b(E))), [b(e)(b(C), "end") ? _(r.$slots, "end", {}, void 0, void 0, 0) : b(L) ? (g(), o(n, p({ key: 1 }, b(I), { icon: b(L) }), null, 16, ["icon"])) : s("", !0)], 16)) : s("", !0)
 			], 2))]),
 			_: 3
 		}, 16));

package/dist/Components/ListSection/ListSection.vue_vue_type_script_setup_true_lang.js

@@ -20,11 +20,11 @@ var x = /*@__PURE__*/ u({
 		title: {}
 	},
 	setup(u) {
-		let x = y(), { merged: S, rootBind: C, titleBind: w } = n(u), T = i(() => S.value.as ?? "li");
-		return (n, i) => T.value === "div" ? (m(), s("div", p(f({ key: 0 }, v(w))), [v(e)(v(x), "default") ? h(n.$slots, "default", {}, void 0, void 0, 0) : v(t)(v(S).title) ? (m(), s(r, { key: 1 }, [l(_(v(S).title), 1)], 64)) : o("", !0)], 16)) : (m(), a(g(T.value), p(f({ key: 1 }, v(C))), {
-			default: b(() => [c("div", p(d(v(w))), [v(e)(v(x), "default") ? h(n.$slots, "default", {}, void 0, void 0, 0) : v(t)(v(S).title) ? (m(), s(r, { key: 1 }, [l(_(v(S).title), 1)], 64)) : o("", !0)], 16)]),
+		let x = y(), { merged: S, rootBind: C, isHidden: w, titleBind: T } = n(u), E = i(() => S.value.as ?? "li");
+		return (n, i) => v(w) ? o("", !0) : (m(), s(r, { key: 0 }, [E.value === "div" ? (m(), s("div", p(f({ key: 0 }, v(T))), [v(e)(v(x), "default") ? h(n.$slots, "default", {}, void 0, void 0, 0) : v(t)(v(S).title) ? (m(), s(r, { key: 1 }, [l(_(v(S).title), 1)], 64)) : o("", !0)], 16)) : (m(), a(g(E.value), p(f({ key: 1 }, v(C))), {
+			default: b(() => [c("div", p(d(v(T))), [v(e)(v(x), "default") ? h(n.$slots, "default", {}, void 0, void 0, 0) : v(t)(v(S).title) ? (m(), s(r, { key: 1 }, [l(_(v(S).title), 1)], 64)) : o("", !0)], 16)]),
 			_: 3
-		}, 16));
+		}, 16))], 64));
 	}
 });
 //#endregion

package/dist/Components/ListSection/composables/useListSection.d.ts

@@ -2,6 +2,7 @@ import { ListSectionOwnProps, ListSectionProps } from '../listSection.types';
 export declare function useListSection(props: ListSectionOwnProps): {
     merged: import('vue').ComputedRef<ListSectionOwnProps>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListSectionProps, "classes" | "customProps" | "title" | "as" | "inset" | "sticky">, never>>>;
+    isHidden: import('vue').ComputedRef<boolean>;
     titleBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         role: string;
         class: string;

package/dist/Components/ListSection/composables/useListSection.js

@@ -1,10 +1,11 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as r } from "../../List/listInjectionKey.js";
-import { computed as i, inject as a, toValue as o, useAttrs as s } from "vue";
-import { get as c, omit as l } from "es-toolkit/compat";
-import { cn as u, splitComponentProps as d } from "@bridge-ui/core/Utils";
+import { LIST_SECTION_INJECTION_KEY as i } from "../listSectionInjectionKey.js";
+import { computed as a, inject as o, toValue as s, useAttrs as c } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { cn as d, splitComponentProps as f } from "@bridge-ui/core/Utils";
 //#region src/Components/ListSection/composables/useListSection.ts
-var f = [
+var p = [
 	"as",
 	"inset",
 	"title",
@@ -12,39 +13,40 @@ var f = [
 	"classes",
 	"customProps"
 ];
-function p(p) {
-	let m = s(), h = a(r, null), g = i(() => d({
+function m(m) {
+	let h = c(), g = o(r, null), _ = o(i, null), v = a(() => f({
 		props: {
-			...m,
-			...p
+			...h,
+			...m
 		},
-		bridgeKeys: f
-	})), { merged: _, entry: v } = t({
+		bridgeKeys: p
+	})), { merged: y, entry: b } = t({
 		componentName: "ListSection",
-		props: () => g.value.componentProps
-	}), y = i(() => _.value.customProps), b = n({
-		entry: v,
-		props: () => g.value.componentProps
-	}), x = i(() => h ? o(h).dense : !1), S = i(() => l(g.value.inheritedAttrs, [])), C = i(() => _.value.as === "div");
+		props: () => v.value.componentProps
+	}), x = a(() => y.value.customProps), S = n({
+		entry: b,
+		props: () => v.value.componentProps
+	}), C = a(() => g ? s(g).dense : !1), w = a(() => _ ? s(_).hidden : !1), T = a(() => u(v.value.inheritedAttrs, [])), E = a(() => y.value.as === "div");
 	return {
-		merged: _,
-		rootBind: i(() => e(y.value?.root, S.value, u({
+		merged: y,
+		rootBind: a(() => e(x.value?.root, T.value, d({
 			"list-none": !0,
-			"sticky top-0 z-10 bg-white dark:bg-dark-800": _.value.sticky && !C.value,
-			[c(b.value, "root") ?? ""]: !0
+			"sticky top-0 z-10 bg-white dark:bg-dark-800": y.value.sticky && !E.value,
+			[l(S.value, "root") ?? ""]: !0
 		}))),
-		titleBind: i(() => e(y.value?.title, {}, {
+		isHidden: w,
+		titleBind: a(() => e(x.value?.title, {}, {
 			role: "presentation",
-			class: u({
-				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": !0,
-				"sticky top-0 z-10": _.value.sticky && C.value,
-				"py-2": !x.value,
-				"py-1.5": x.value,
-				"pl-14": _.value.inset,
-				[c(b.value, "title") ?? ""]: !0
+			class: d({
+				"bg-white px-2 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": !0,
+				"sticky top-0 z-10": y.value.sticky && E.value,
+				"py-2": !C.value,
+				"py-1.5": C.value,
+				"pl-14": y.value.inset,
+				[l(S.value, "title") ?? ""]: !0
 			})
 		}))
 	};
 }
 //#endregion
-export { p as useListSection };
+export { m as useListSection };

package/dist/Components/ListSection/listSectionInjectionKey.d.ts

@@ -0,0 +1,5 @@
+import { ComputedRef, InjectionKey } from 'vue';
+export type ListSectionContextValue = {
+    hidden: boolean;
+};
+export declare const LIST_SECTION_INJECTION_KEY: InjectionKey<ComputedRef<ListSectionContextValue>>;

package/dist/Components/ListSection/listSectionInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/ListSection/listSectionInjectionKey.ts
+var e = Symbol("bridge-list-section");
+//#endregion
+export { e as LIST_SECTION_INJECTION_KEY };

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

@@ -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>;
 };