@bridge-ui/vue 0.0.2 → 0.0.3

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,19 @@
 import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
-import n from "../List/List.js";
-import { useListbox as r } from "./composables/useListbox.js";
-import { LISTBOX_INJECTION_KEY as i } from "./listboxInjectionKey.js";
-import ee from "../ListItem/ListItem.js";
-import te from "../ListSection/ListSection.js";
+import { mergeNestedComponentProps as n } from "../../Utils/index.js";
+import r from "../List/List.js";
+import { useListbox as i } from "./composables/useListbox.js";
+import { LISTBOX_INJECTION_KEY as ee } from "./listboxInjectionKey.js";
+import te from "../ListItem/ListItem.js";
+import ne from "../ListSection/ListSection.js";
 import a from "../Menu/Menu.js";
-import ne from "../Progress/Progress.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, provide as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as O, useSlots as k, watch as A, withCtx as j } from "vue";
-import { isNil as M } from "es-toolkit/compat";
-import { cn as N, entriesFromListboxOptions as re, flattenListboxOptions as ie, mapListboxEntriesToRows as ae } from "@bridge-ui/core";
-import { Check as oe } from "@lucide/vue";
+import o from "../Progress/Progress.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeProps as y, openBlock as b, provide as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as re, useSlots as ie, watch as O, withCtx as k } from "vue";
+import { isNil as ae } from "es-toolkit/compat";
+import { cn as A, entriesFromListboxOptions as j, flattenListboxOptions as M, mapListboxEntriesToRows as N } from "@bridge-ui/core";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var se = { key: 1 }, P = /* @__PURE__ */ m({
+var P = { key: 1 }, F = /* @__PURE__ */ h({
 	__name: "Listbox",
-	props: /* @__PURE__ */ g({
+	props: /* @__PURE__ */ _({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -59,156 +59,120 @@ var se = { key: 1 }, P = /* @__PURE__ */ m({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ g([
+	emits: /* @__PURE__ */ _([
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
-	setup(m, { emit: g }) {
-		let P = k(), F = g, I = O(m, "modelValue");
-		A(I, (e) => {
-			F("show-change", e);
+	setup(h, { emit: _ }) {
+		let F = ie(), I = _, L = re(h, "modelValue");
+		O(L, (e) => {
+			I("show-change", e);
 		});
-		let L = m, { merged: R, checkClass: z, scrollBind: B, messageBind: V, sizeClasses: H, mergedClasses: U, optionSelectedClass: W, optionHighlightedClass: G } = r(L, {
+		let R = h, { merged: z, checkClass: B, scrollBind: V, messageBind: H, sizeClasses: U, mergedClasses: W, optionSelectedClass: G, optionHighlightedClass: oe } = i(R, {
 			size: "md",
 			color: "primary"
-		}), ce = s(() => L.options ?? []), K = s(() => L.entries ? L.entries : re(ce.value)), q = s(() => ie(K.value)), J = s(() => e(P, "default")), Y = s(() => !L.loading && !J.value && q.value.length === 0 && L.hideEmptyMessage !== !0), X = s(() => N(z.value, U.value.check)), Z = S([]);
+		}), K = c(() => R.options ?? []), q = c(() => R.entries ? R.entries : j(K.value)), J = c(() => M(q.value)), Y = c(() => e(F, "default")), X = c(() => !R.loading && !Y.value && J.value.length === 0 && R.hideEmptyMessage !== !0), se = c(() => A(B.value, W.value.check)), Z = S([]);
 		function Q(e) {
-			return L.isSelected?.(e) ?? !1;
+			return R.isSelected?.(e) ?? !1;
 		}
-		function le(e) {
-			return L.highlightedIndex === e;
-		}
-		function ue(e) {
-			e.preventDefault();
+		function ce(e) {
+			e.disabled || I("select", e);
 		}
-		function de(e, t) {
-			let n = {
-				tabindex: -1,
-				onMousedown: ue,
-				class: N(H.value?.option)
-			};
-			return Q(e.value) ? n.class = N(n.class, W.value, U.value.optionSelected) : le(t) && (n.class = N(n.class, G.value, U.value.optionHighlighted)), {
-				interactive: n,
-				primary: { class: H.value?.primary },
-				secondary: { class: H.value?.secondary }
-			};
-		}
-		function $(e) {
-			e.disabled || F("select", e);
-		}
-		function fe(e) {
+		function le(e) {
 			return Z.value.some((t) => String(t.value) === String(e.value)) || (Z.value = [...Z.value, e]), () => {
 				Z.value = Z.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function pe(e) {
-			return (J.value ? Z.value : q.value).findIndex((t) => String(t.value) === String(e));
+		function ue(e) {
+			return (Y.value ? Z.value : J.value).findIndex((t) => String(t.value) === String(e));
 		}
-		A(Z, (e) => {
-			J.value && F("registered-options-change", e);
-		}, { deep: !0 }), x(i, s(() => ({
-			getOptionIndex: pe,
-			registerOption: fe,
-			onSelect: $,
-			listboxId: L.listboxId,
+		O(Z, (e) => {
+			Y.value && I("registered-options-change", e);
+		}, { deep: !0 }), x(ee, c(() => ({
+			getOptionIndex: ue,
+			registerOption: le,
+			onSelect: ce,
+			listboxId: R.listboxId,
 			isSelected: Q,
-			sizeClasses: H.value,
-			showCheckmark: L.showCheckmark,
-			checkClass: X.value,
-			highlightedIndex: L.highlightedIndex,
-			optionSelectedClass: W.value,
-			optionHighlightedClass: G.value,
+			sizeClasses: U.value,
+			showCheckmark: R.showCheckmark,
+			checkClass: se.value,
+			highlightedIndex: R.highlightedIndex,
+			optionSelectedClass: G.value,
+			optionHighlightedClass: oe.value,
 			mergedClasses: {
-				optionSelected: U.value.optionSelected,
-				optionHighlighted: U.value.optionHighlighted
+				optionSelected: W.value.optionSelected,
+				optionHighlighted: W.value.optionHighlighted
 			}
 		})));
-		let me = s(() => ae(K.value, Q));
-		return (r, i) => (b(), c(D(a), _({
-			modelValue: I.value,
-			"onUpdate:modelValue": i[0] ||= (e) => I.value = e,
-			"anchor-el": m.anchorEl,
-			placement: m.placement,
+		let de = c(() => N(q.value, Q)), fe = c(() => z.value.customProps?.menu), pe = c(() => z.value.customProps?.list), $ = c(() => z.value.customProps?.listItem), me = c(() => z.value.customProps?.progress), he = c(() => z.value.customProps?.listSection), ge = c(() => ({
+			...ae(R.rounded) ? {} : { rounded: R.rounded },
+			...fe.value
+		})), _e = c(() => ({
+			size: "xs",
+			"aria-hidden": !0,
+			color: z.value.color,
+			...n(me.value, {
+				class: "shrink-0",
+				classes: { bar: W.value.loading }
+			})
+		})), ve = c(() => ({
+			dense: !0,
+			role: "listbox",
+			id: R.listboxId,
+			"aria-labelledby": R.labelledBy,
+			"aria-multiselectable": R.multiple || void 0,
+			...n(pe.value, { class: "p-0" })
+		}));
+		return (n, i) => (b(), l(D(a), v({
+			modelValue: L.value,
+			"onUpdate:modelValue": i[0] ||= (e) => L.value = e,
+			"anchor-el": h.anchorEl,
+			placement: h.placement,
 			"close-on-click-away": !0,
-			"disable-auto-focus": m.disableAutoFocus,
-			"custom-props": { content: D(R).customProps?.content }
-		}, D(M)(m.rounded) ? {} : { rounded: m.rounded }), {
-			default: j(() => [
-				D(e)(D(P), "beforeOptions") ? (b(), c(T(D(t)(D(P), "beforeOptions")), { key: 0 })) : l("", !0),
-				m.loading ? (b(), u(o, { key: 1 }, [p(D(ne), {
-					size: "xs",
-					"aria-hidden": "",
-					class: "shrink-0",
-					color: D(R).color,
-					classes: { bar: D(U).loading },
-					"custom-props": { bar: D(R).customProps?.loading }
-				}, null, 8, [
-					"color",
-					"classes",
-					"custom-props"
-				]), d("div", y(h(D(V))), [D(e)(D(P), "loading") ? (b(), c(T(D(t)(D(P), "loading")), { key: 0 })) : (b(), u("span", se, E(m.loadingMessage), 1))], 16)], 64)) : (b(), u("div", y(_({ key: 2 }, D(B))), [p(D(n), {
-					dense: "",
-					class: "p-0",
-					role: "listbox",
-					id: m.listboxId,
-					"aria-labelledby": m.labelledBy,
-					"aria-multiselectable": m.multiple || void 0
-				}, {
-					default: j(() => [J.value ? w(r.$slots, "default", { key: 0 }) : (b(!0), u(o, { key: 1 }, C(me.value, (t) => (b(), u(o, { key: t.key }, [t.kind === "section" ? (b(), c(D(te), {
+			"disable-auto-focus": h.disableAutoFocus
+		}, ge.value), {
+			default: k(() => [
+				D(e)(D(F), "beforeOptions") ? (b(), l(T(D(t)(D(F), "beforeOptions")), { key: 0 })) : u("", !0),
+				h.loading ? (b(), d(s, { key: 1 }, [m(D(o), y(g(_e.value)), null, 16), f("div", y(g(D(H))), [D(e)(D(F), "loading") ? (b(), l(T(D(t)(D(F), "loading")), { key: 0 })) : (b(), d("span", P, E(h.loadingMessage), 1))], 16)], 64)) : (b(), d("div", y(v({ key: 2 }, D(V))), [m(D(r), y(g(ve.value)), {
+					default: k(() => [Y.value ? w(n.$slots, "default", { key: 0 }) : (b(!0), d(s, { key: 1 }, C(de.value, (t) => (b(), d(s, { key: t.key }, [t.kind === "section" ? (b(), l(D(ne), v({
 						key: 0,
 						title: t.title,
 						sticky: t.sticky
-					}, null, 8, ["title", "sticky"])) : (b(), c(D(ee), {
+					}, { ref_for: !0 }, he.value), null, 16, ["title", "sticky"])) : (b(), l(D(te), v({
 						key: 1,
 						interactive: "",
-						role: "option",
-						selected: !1,
-						"aria-selected": t.selected,
+						value: t.option.value,
 						disabled: t.option.disabled,
 						secondary: t.option.description,
-						onClick: (e) => $(t.option),
-						id: `${m.listboxId}-option-${t.index}`,
-						"custom-props": de(t.option, t.index),
-						primary: D(e)(D(P), "option") ? void 0 : t.option.label
-					}, f({ _: 2 }, [D(e)(D(P), "option") ? {
+						primary: D(e)(D(F), "option") ? void 0 : t.option.label
+					}, { ref_for: !0 }, $.value), p({ _: 2 }, [D(e)(D(F), "option") ? {
 						name: "default",
-						fn: j(() => [w(r.$slots, "option", {
+						fn: k(() => [w(n.$slots, "option", {
 							option: t.option,
 							selected: t.selected
 						})]),
 						key: "0"
-					} : void 0, m.showCheckmark && t.selected ? {
-						name: "end",
-						fn: j(() => [p(D(oe), { class: v(X.value) }, null, 8, ["class"])]),
-						key: "1"
-					} : void 0]), 1032, [
-						"aria-selected",
+					} : void 0]), 1040, [
+						"value",
 						"disabled",
 						"secondary",
-						"onClick",
-						"id",
-						"custom-props",
 						"primary"
 					]))], 64))), 128))]),
 					_: 3
-				}, 8, [
-					"id",
-					"aria-labelledby",
-					"aria-multiselectable"
-				])], 16)),
-				Y.value && !D(e)(D(P), "empty") ? (b(), u("div", y(_({ key: 3 }, D(V))), E(m.emptyMessage), 17)) : Y.value && D(e)(D(P), "empty") ? (b(), c(T(D(t)(D(P), "empty")), { key: 4 })) : l("", !0),
-				D(e)(D(P), "afterOptions") ? (b(), c(T(D(t)(D(P), "afterOptions")), { key: 5 })) : l("", !0)
+				}, 16)], 16)),
+				X.value && !D(e)(D(F), "empty") ? (b(), d("div", y(v({ key: 3 }, D(H))), E(h.emptyMessage), 17)) : X.value && D(e)(D(F), "empty") ? (b(), l(T(D(t)(D(F), "empty")), { key: 4 })) : u("", !0),
+				D(e)(D(F), "afterOptions") ? (b(), l(T(D(t)(D(F), "afterOptions")), { key: 5 })) : u("", !0)
 			]),
 			_: 3
 		}, 16, [
 			"modelValue",
 			"anchor-el",
 			"placement",
-			"disable-auto-focus",
-			"custom-props"
+			"disable-auto-focus"
 		]));
 	}
 });
 //#endregion
-export { P as default };
+export { F as default };

package/dist/Components/Listbox/composables/useListbox.js

@@ -2,7 +2,7 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
 import { computed as r, useAttrs as i } from "vue";
 import { get as a } from "es-toolkit/compat";
 import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
-import { colorProps as l, invalidatedProps as u, sizeProps as d } from "@bridge-ui/core/Components/Listbox";
+import { colorProps as l, invalidatedProps as u, sizeProps as d } from "@bridge-ui/core/Tokens/Listbox";
 //#region src/Components/Listbox/composables/useListbox.ts
 var f = [
 	"size",
@@ -27,7 +27,7 @@ function p(p, m) {
 	}), y = n({
 		entry: v,
 		props: () => g.value.componentProps
-	}), b = r(() => a(s(l, v.value?.customProps?.color), _.value.color ?? "primary")), x = r(() => s(u, v.value?.customProps?.invalidated)), S = r(() => _.value.invalidated ? x.value : b.value), C = r(() => a(s(d, v.value?.customProps?.size), _.value.size ?? "md")), w = r(() => S.value?.selected), T = r(() => S.value?.highlighted);
+	}), b = r(() => a(s(l, v.value?.tokens?.color), _.value.color ?? "primary")), x = r(() => s(u, v.value?.tokens?.invalidated)), S = r(() => _.value.invalidated ? x.value : b.value), C = r(() => a(s(d, v.value?.tokens?.size), _.value.size ?? "md")), w = r(() => S.value?.selected), T = r(() => S.value?.highlighted);
 	return {
 		merged: _,
 		checkClass: r(() => o(C.value?.check, S.value?.check)),

package/dist/Components/Listbox/listbox.types.d.ts

@@ -1,5 +1,10 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MenuRounded, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ListOwnProps } from '../List/list.types';
+import { ListItemOwnProps } from '../ListItem/listItem.types';
+import { ListSectionOwnProps } from '../ListSection/listSection.types';
+import { MenuOwnProps } from '../Menu/menu.types';
+import { ProgressOwnProps } from '../Progress/progress.types';
 export interface ListboxSizeOverrides {}
 export interface ListboxColorOverrides {}
 export interface ListboxRoundedOverrides {}
@@ -27,15 +32,41 @@ export interface ListboxClasses {
 }
 export interface ListboxCustomProps {
     /**
-     * Props forwarded to the floating menu panel.
+     * Props forwarded to the internal `List`.
+     *
+     * @default undefined
      */
-    content?: HTMLAttributes;
+    list?: Partial<ListOwnProps>;
     /**
-     * Props forwarded to the loading `Progress` bar.
+     * Props forwarded to each mapped `ListItem` option.
+     * Merged last so they override Listbox defaults.
+     *
+     * @default undefined
      */
-    loading?: HTMLAttributes;
+    listItem?: Partial<ListItemOwnProps>;
+    /**
+     * Props forwarded to each mapped `ListSection`.
+     *
+     * @default undefined
+     */
+    listSection?: Partial<Omit<ListSectionOwnProps, "title">>;
+    /**
+     * Props forwarded to the floating `Menu`.
+     * Merged last so they override Listbox defaults.
+     *
+     * @default undefined
+     */
+    menu?: Partial<MenuOwnProps>;
+    /**
+     * Props forwarded to the loading `Progress`.
+     *
+     * @default undefined
+     */
+    progress?: Partial<ProgressOwnProps>;
     /**
      * Props forwarded to the scrollable options container.
+     *
+     * @default undefined
      */
     scroll?: HTMLAttributes;
 }
@@ -71,7 +102,10 @@ export interface ListboxOwnProps {
      */
     color?: MergeProps<ListboxColor, ListboxColorOverrides>;
     /**
-     * Extra props for internal parts.
+     * Extra props for internal parts (`list`, `listItem`, `listSection`, `menu`,
+     * `progress`, `scroll`).
+     *
+     * @default undefined
      */
     customProps?: ListboxCustomProps;
     /**

package/dist/Components/Menu/Menu.vue.d.ts

@@ -16,13 +16,13 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     rounded: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuRounded, import('./menu.types').MenuRoundedOverrides>;
     shadow: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuShadow, import('./menu.types').MenuShadowOverrides>;
     anchorEl: null | HTMLElement;
-    disableAutoFocus: boolean;
-    placement: import('@floating-ui/utils').Placement;
     closeOnClickAway: boolean;
     closeOnEscape: boolean;
+    disableAutoFocus: boolean;
     disableScrollLock: boolean;
     keepMounted: boolean;
     persistent: boolean;
+    placement: import('@floating-ui/utils').Placement;
     strategy: import('@bridge-ui/core').PositionStrategy;
     teleportTo: false | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "disableAutoFocus" | "placement" | "closeOnClickAway" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "strategy" | "teleportTo">, "anchorEl" | "onShowChange">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnClickAway" | "closeOnEscape" | "disableAutoFocus" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "strategy" | "teleportTo">, "anchorEl" | "onShowChange">>>;
     isPortaled: import('vue').ComputedRef<boolean>;
     triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         tabindex: number;

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

@@ -2,7 +2,7 @@ import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent a
 import { computed as r, nextTick as i, onBeforeUnmount as te, ref as a, toValue as o, useAttrs as ne, useId as re, watch as s } from "vue";
 import { get as c, omit as l } from "es-toolkit/compat";
 import { LAYER_STACK_BASE_Z_INDEX as u, acquireLayerStackOrder as ie, claimOpenMenu as d, cn as f, createFocusable as p, createPositionable as m, getLayerStackEntry as ae, mergeBridgeUILayeredClasses as h, pushLayerStack as g, splitComponentProps as _, subscribeLayerStack as v } from "@bridge-ui/core";
-import { roundedProps as oe, shadowProps as se } from "@bridge-ui/core/Components/Menu";
+import { roundedProps as oe, shadowProps as se } from "@bridge-ui/core/Tokens/Menu";
 //#region src/Components/Menu/composables/useMenu.ts
 var ce = [
 	"offset",
@@ -38,7 +38,7 @@ function y(y, le, b = {}) {
 	}), z = r(() => L.value.customProps), B = ee({
 		entry: R,
 		props: () => I.value.componentProps
-	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => c(h(oe, R.value?.customProps?.rounded), L.value.rounded)), fe = r(() => c(h(se, R.value?.customProps?.shadow), L.value.shadow)), U = r(() => !L.value.persistent), pe = r(() => l(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
+	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => c(h(oe, R.value?.tokens?.rounded), L.value.rounded)), fe = r(() => c(h(se, R.value?.tokens?.shadow), L.value.shadow)), U = r(() => !L.value.persistent), pe = r(() => l(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
 	function W() {
 		return y.anchorEl ?? w.value;
 	}

package/dist/Components/Modal/composables/useModal.js

@@ -3,7 +3,7 @@ import { computed as n, nextTick as r, onBeforeUnmount as ne, ref as i, toValue
 import { get as s } from "es-toolkit/compat";
 import { LAYER_STACK_BASE_Z_INDEX as c, acquireLayerStackOrder as ie, cn as l, countModalTransitionLayers as u, createFocusTrap as d, getLayerStackEntry as f, getModalOverlayTransitionClass as p, getModalPanelTransitionClass as m, hasModalTransition as h, mergeBridgeUILayeredClasses as g, pushLayerStack as ae, resolveEffectiveModalTransition as _, splitComponentProps as oe, subscribeLayerStack as se } from "@bridge-ui/core";
 import { isModalBackdropClick as ce } from "@bridge-ui/core/Utils";
-import { alignProps as v, blurProps as y, sizeProps as b } from "@bridge-ui/core/Components/Modal";
+import { alignProps as v, blurProps as y, sizeProps as b } from "@bridge-ui/core/Tokens/Modal";
 //#region src/Components/Modal/composables/useModal.ts
 var le = [
 	"blur",
@@ -43,7 +43,7 @@ function x(x, ue, S = {}) {
 	}), z = n(() => L.value.customProps), B = te({
 		entry: R,
 		props: () => I.value.componentProps
-	}), V = n(() => _(L.value.transition ?? "none")), H = n(() => h(V.value)), U = n(() => L.value.scroll ?? "body"), W = n(() => L.value.keepMounted && !w.value), fe = n(() => s(g(v, R.value?.customProps?.align), L.value.align)), pe = n(() => s(g(y, R.value?.customProps?.blur), L.value.blur)), me = n(() => s(g(b, R.value?.customProps?.size), L.value.size)), he = n(() => p(V.value)), ge = n(() => m(V.value)), G = n(() => !L.value.persistent), _e = n(() => I.value.inheritedAttrs), ve = n(() => e(z.value?.root, _e.value, {
+	}), V = n(() => _(L.value.transition ?? "none")), H = n(() => h(V.value)), U = n(() => L.value.scroll ?? "body"), W = n(() => L.value.keepMounted && !w.value), fe = n(() => s(g(v, R.value?.tokens?.align), L.value.align)), pe = n(() => s(g(y, R.value?.tokens?.blur), L.value.blur)), me = n(() => s(g(b, R.value?.tokens?.size), L.value.size)), he = n(() => p(V.value)), ge = n(() => m(V.value)), G = n(() => !L.value.persistent), _e = n(() => I.value.inheritedAttrs), ve = n(() => e(z.value?.root, _e.value, {
 		onTransitionend: we,
 		style: { zIndex: M.value },
 		"aria-hidden": W.value ? !0 : void 0,

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

@@ -1,24 +1,24 @@
 import { useHoldRepeat as e } from "../../Utils/useHoldRepeat.js";
-import { resolveFieldAdornmentIconSize as t } from "../../Utils/index.js";
-import n from "../Icon/Icon.js";
-import r from "../FormField/FormField.js";
-import { useNumberField as i } from "./composables/useNumberField.js";
-import { computed as a, createBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, isRef as u, mergeModels as d, mergeProps as f, normalizeClass as p, openBlock as m, unref as h, useModel as g, vModelDynamic as _, withCtx as v, withDirectives as y } from "vue";
-import { cn as b } from "@bridge-ui/core";
-import { ChevronDown as x, ChevronUp as S } from "@lucide/vue";
+import { mergePartBind as t, resolveFieldAdornmentIconSize as n } from "../../Utils/index.js";
+import r from "../Icon/Icon.js";
+import i from "../FormField/FormField.js";
+import { useNumberField as a } from "./composables/useNumberField.js";
+import { computed as o, createBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, isRef as f, mergeModels as p, mergeProps as m, normalizeProps as h, openBlock as g, unref as _, useModel as v, vModelDynamic as y, withCtx as b, withDirectives as x } from "vue";
+import { cn as S } from "@bridge-ui/core";
+import { ChevronDown as C, ChevronUp as w } from "@lucide/vue";
 //#region src/Components/NumberField/NumberField.vue?vue&type=script&setup=true&lang.ts
-var C = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, w = ["disabled"], T = ["disabled"], E = /* @__PURE__ */ l({
+var T = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, E = /* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "NumberField",
-	props: /* @__PURE__ */ d({
+	props: /* @__PURE__ */ p({
 		classes: {},
+		customProps: {},
 		max: {},
 		min: {},
 		step: { default: 1 },
 		color: {},
 		controlId: {},
 		corner: {},
-		customProps: {},
 		description: {},
 		disabled: { type: Boolean },
 		end: {},
@@ -39,42 +39,40 @@ var C = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overf
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ d(["change", "update:modelValue"], ["update:modelValue"]),
-	setup(l, { emit: d }) {
-		let E = d, D = g(l, "modelValue"), O = l, { decrement: k, formField: A, increment: j, inputBind: M, stringModel: N, mergedClasses: P } = i(O, D, { onChange: (e) => E("change", e) }), F = e(() => j(), () => ({ disabled: O.disabled })), I = e(() => k(), () => ({ disabled: O.disabled })), L = a(() => t(O.size));
-		return (e, t) => (m(), o(h(r), { field: h(A) }, {
-			end: v(() => [s("div", C, [s("button", {
-				type: "button",
-				disabled: O.disabled,
-				"aria-label": "Increment value",
-				onClick: t[1] ||= (...e) => h(F).onPressClick && h(F).onPressClick(...e),
-				onPointerup: t[2] ||= (...e) => h(F).onPressPointerUp && h(F).onPressPointerUp(...e),
-				onPointerdown: t[3] ||= (...e) => h(F).onPressPointerDown && h(F).onPressPointerDown(...e),
-				onLostpointercapture: t[4] ||= (...e) => h(F).onPressLostPointerCapture && h(F).onPressLostPointerCapture(...e),
-				class: p(h(b)({
-					"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
-					[h(P).increment ?? ""]: !0
-				}))
-			}, [c(h(n), {
-				icon: h(S),
+	emits: /* @__PURE__ */ p(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(u, { emit: p }) {
+		let E = p, D = v(u, "modelValue"), O = u, { decrement: k, formField: A, increment: j, inputBind: M, stringModel: N, mergedClasses: P } = a(O, D, { onChange: (e) => E("change", e) }), F = e(() => j(), () => ({ disabled: O.disabled })), I = e(() => k(), () => ({ disabled: O.disabled })), L = o(() => n(O.size)), R = o(() => t(O.customProps?.increment, {
+			type: "button",
+			disabled: O.disabled,
+			"aria-label": "Increment value",
+			onClick: F.onPressClick,
+			onPointerup: F.onPressPointerUp,
+			onPointerdown: F.onPressPointerDown,
+			onLostpointercapture: F.onPressLostPointerCapture
+		}, S({
+			"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
+			[P.value.increment ?? ""]: !0
+		}))), z = o(() => t(O.customProps?.decrement, {
+			type: "button",
+			disabled: O.disabled,
+			"aria-label": "Decrement value",
+			onClick: I.onPressClick,
+			onPointerup: I.onPressPointerUp,
+			onPointerdown: I.onPressPointerDown,
+			onLostpointercapture: I.onPressLostPointerCapture
+		}, S({
+			"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
+			[P.value.decrement ?? ""]: !0
+		})));
+		return (e, t) => (g(), s(_(i), { field: _(A) }, {
+			end: b(() => [c("div", T, [c("button", h(d(R.value)), [l(_(r), m({
+				icon: _(w),
 				size: L.value
-			}, null, 8, ["icon", "size"])], 42, w), s("button", {
-				type: "button",
-				disabled: O.disabled,
-				"aria-label": "Decrement value",
-				onClick: t[5] ||= (...e) => h(I).onPressClick && h(I).onPressClick(...e),
-				onPointerup: t[6] ||= (...e) => h(I).onPressPointerUp && h(I).onPressPointerUp(...e),
-				onPointerdown: t[7] ||= (...e) => h(I).onPressPointerDown && h(I).onPressPointerDown(...e),
-				onLostpointercapture: t[8] ||= (...e) => h(I).onPressLostPointerCapture && h(I).onPressLostPointerCapture(...e),
-				class: p(h(b)({
-					"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
-					[h(P).decrement ?? ""]: !0
-				}))
-			}, [c(h(n), {
-				icon: h(x),
+			}, O.customProps?.incrementIcon), null, 16, ["icon", "size"])], 16), c("button", h(d(z.value)), [l(_(r), m({
+				icon: _(C),
 				size: L.value
-			}, null, 8, ["icon", "size"])], 42, T)])]),
-			default: v(() => [y(s("input", f({ "onUpdate:modelValue": t[0] ||= (e) => u(N) ? N.value = e : null }, h(M)), null, 16), [[_, h(N)]])]),
+			}, O.customProps?.decrementIcon), null, 16, ["icon", "size"])], 16)])]),
+			default: b(() => [x(c("input", m({ "onUpdate:modelValue": t[0] ||= (e) => f(N) ? N.value = e : null }, _(M)), null, 16), [[y, _(N)]])]),
 			_: 1
 		}, 8, ["field"]));
 	}

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

@@ -435,10 +435,9 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "description" | "errorMessage" | "readonly" | "required" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
-        labelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -448,12 +447,12 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         endIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
-        requiredBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
         startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
@@ -685,7 +684,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "description" | "errorMessage" | "readonly" | "required" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>, {
         min: number | undefined;
         max: number | undefined;
         type: string;

package/dist/Components/NumberField/numberField.types.d.ts

@@ -1,6 +1,7 @@
-import { InputHTMLAttributes } from 'vue';
+import { ButtonHTMLAttributes, InputHTMLAttributes } from 'vue';
 import { MergeHtmlProps } from '@bridge-ui/core';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
+import { IconProps } from '../Icon';
 export interface NumberFieldClasses extends FormFieldClasses {
     /**
      * The classes to apply to the decrement button.
@@ -11,7 +12,32 @@ export interface NumberFieldClasses extends FormFieldClasses {
      */
     increment?: string;
 }
-export interface NumberFieldCustomProps extends FormFieldCustomProps {}
+export interface NumberFieldCustomProps extends FormFieldCustomProps {
+    /**
+     * Props forwarded to the decrement button.
+     *
+     * @default undefined
+     */
+    decrement?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the decrement `Icon` (`icon` is set by the field).
+     *
+     * @default undefined
+     */
+    decrementIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the increment button.
+     *
+     * @default undefined
+     */
+    increment?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the increment `Icon` (`icon` is set by the field).
+     *
+     * @default undefined
+     */
+    incrementIcon?: Partial<Omit<IconProps, "icon">>;
+}
 export interface NumberFieldEmits {
     /**
      * Emitted with the numeric value when it changes.
@@ -28,6 +54,12 @@ export interface NumberFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "
      * The classes to apply to the number field.
      */
     classes?: NumberFieldClasses;
+    /**
+     * Extra props for FormField parts and the stepper buttons.
+     *
+     * @default undefined
+     */
+    customProps?: NumberFieldCustomProps;
     /**
      * The maximum value.
      */