@bridge-ui/vue 0.0.1 → 0.0.3

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

@@ -1,16 +1,17 @@
 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 a from "../ListItem/ListItem.js";
-import o from "../ListSection/ListSection.js";
-import s from "../Menu/Menu.js";
-import ee from "../Progress/Progress.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as te, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as ne, 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 { cn as M, entriesFromListboxOptions as re, flattenListboxOptions as ie, mapListboxEntriesToRows as ae } from "@bridge-ui/core";
-import { Check as oe } from "@lucide/vue";
+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 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 }, N = /* @__PURE__ */ h({
+var P = { key: 1 }, F = /* @__PURE__ */ h({
 	__name: "Listbox",
 	props: /* @__PURE__ */ _({
 		anchorEl: {},
@@ -45,6 +46,7 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 		},
 		options: {},
 		placement: { default: "bottom-start" },
+		rounded: {},
 		showCheckmark: {
 			type: Boolean,
 			default: !0
@@ -63,150 +65,114 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 		"show-change"
 	], ["update:modelValue"]),
 	setup(h, { emit: _ }) {
-		let N = k(), P = _, F = O(h, "modelValue");
-		A(F, (e) => {
-			P("show-change", e);
+		let F = ie(), I = _, L = re(h, "modelValue");
+		O(L, (e) => {
+			I("show-change", e);
 		});
-		let I = h, { merged: L, checkClass: R, scrollBind: z, messageBind: B, sizeClasses: V, mergedClasses: H, optionSelectedClass: U, optionHighlightedClass: W } = r(I, {
+		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"
-		}), G = l(() => I.options ?? []), K = l(() => I.entries ? I.entries : re(G.value)), q = l(() => ie(K.value)), J = l(() => e(N, "default")), Y = l(() => !I.loading && !J.value && q.value.length === 0 && I.hideEmptyMessage !== !0), X = l(() => M(R.value, H.value.check)), Z = C([]);
+		}), 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 I.isSelected?.(e) ?? !1;
+			return R.isSelected?.(e) ?? !1;
 		}
 		function ce(e) {
-			return I.highlightedIndex === e;
+			e.disabled || I("select", e);
 		}
 		function le(e) {
-			e.preventDefault();
-		}
-		function ue(e, t) {
-			let n = {
-				tabindex: -1,
-				onMousedown: le,
-				class: M(V.value?.option)
-			};
-			return Q(e.value) ? n.class = M(n.class, U.value, H.value.optionSelected) : ce(t) && (n.class = M(n.class, W.value, H.value.optionHighlighted)), {
-				interactive: n,
-				primary: { class: V.value?.primary },
-				secondary: { class: V.value?.secondary }
-			};
-		}
-		function $(e) {
-			e.disabled || P("select", e);
-		}
-		function de(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 fe(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 && P("registered-options-change", e);
-		}, { deep: !0 }), S(i, l(() => ({
-			getOptionIndex: fe,
-			registerOption: de,
-			onSelect: $,
-			listboxId: I.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: V.value,
-			showCheckmark: I.showCheckmark,
-			checkClass: X.value,
-			highlightedIndex: I.highlightedIndex,
-			optionSelectedClass: U.value,
-			optionHighlightedClass: W.value,
+			sizeClasses: U.value,
+			showCheckmark: R.showCheckmark,
+			checkClass: se.value,
+			highlightedIndex: R.highlightedIndex,
+			optionSelectedClass: G.value,
+			optionHighlightedClass: oe.value,
 			mergedClasses: {
-				optionSelected: H.value.optionSelected,
-				optionHighlighted: H.value.optionHighlighted
+				optionSelected: W.value.optionSelected,
+				optionHighlighted: W.value.optionHighlighted
 			}
 		})));
-		let pe = l(() => ae(K.value, Q));
-		return (r, i) => (x(), u(D(s), {
-			modelValue: F.value,
-			"onUpdate:modelValue": i[0] ||= (e) => F.value = e,
+		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": h.disableAutoFocus,
-			"custom-props": { content: D(L).customProps?.content }
-		}, {
-			default: j(() => [
-				D(e)(D(N), "beforeOptions") ? (x(), u(T(D(t)(D(N), "beforeOptions")), { key: 0 })) : d("", !0),
-				h.loading ? (x(), f(c, { key: 1 }, [m(D(ee), {
-					size: "xs",
-					"aria-hidden": "",
-					class: "shrink-0",
-					color: D(L).color,
-					classes: { bar: D(H).loading },
-					"custom-props": { bar: D(L).customProps?.loading }
-				}, null, 8, [
-					"color",
-					"classes",
-					"custom-props"
-				]), p("div", b(g(D(B))), [D(e)(D(N), "loading") ? (x(), u(T(D(t)(D(N), "loading")), { key: 0 })) : (x(), f("span", se, E(h.loadingMessage), 1))], 16)], 64)) : (x(), f("div", b(v({ key: 2 }, D(z))), [m(D(n), {
-					dense: "",
-					class: "p-0",
-					role: "listbox",
-					id: h.listboxId,
-					"aria-labelledby": h.labelledBy,
-					"aria-multiselectable": h.multiple || void 0
-				}, {
-					default: j(() => [J.value ? w(r.$slots, "default", { key: 0 }) : (x(!0), f(c, { key: 1 }, ne(pe.value, (t) => (x(), f(c, { key: t.key }, [t.kind === "section" ? (x(), u(D(o), {
+			"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"])) : (x(), u(D(a), {
+					}, { 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: `${h.listboxId}-option-${t.index}`,
-						"custom-props": ue(t.option, t.index),
-						primary: D(e)(D(N), "option") ? void 0 : t.option.label
-					}, te({ _: 2 }, [D(e)(D(N), "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, h.showCheckmark && t.selected ? {
-						name: "end",
-						fn: j(() => [m(D(oe), { class: y(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(N), "empty") ? (x(), f("div", b(v({ key: 3 }, D(B))), E(h.emptyMessage), 17)) : Y.value && D(e)(D(N), "empty") ? (x(), u(T(D(t)(D(N), "empty")), { key: 4 })) : d("", !0),
-				D(e)(D(N), "afterOptions") ? (x(), u(T(D(t)(D(N), "afterOptions")), { key: 5 })) : d("", !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
-		}, 8, [
+		}, 16, [
 			"modelValue",
 			"anchor-el",
 			"placement",
-			"disable-auto-focus",
-			"custom-props"
+			"disable-auto-focus"
 		]));
 	}
 });
 //#endregion
-export { N 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,7 +1,13 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+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 {}
 export interface ListboxClasses {
     /**
      * Classes merged onto the check icon.
@@ -26,15 +32,41 @@ export interface ListboxClasses {
 }
 export interface ListboxCustomProps {
     /**
-     * Props forwarded to the floating menu panel.
+     * Props forwarded to the internal `List`.
+     *
+     * @default undefined
+     */
+    list?: Partial<ListOwnProps>;
+    /**
+     * Props forwarded to each mapped `ListItem` option.
+     * Merged last so they override Listbox defaults.
+     *
+     * @default undefined
+     */
+    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
      */
-    content?: HTMLAttributes;
+    menu?: Partial<MenuOwnProps>;
     /**
-     * Props forwarded to the loading `Progress` bar.
+     * Props forwarded to the loading `Progress`.
+     *
+     * @default undefined
      */
-    loading?: HTMLAttributes;
+    progress?: Partial<ProgressOwnProps>;
     /**
      * Props forwarded to the scrollable options container.
+     *
+     * @default undefined
      */
     scroll?: HTMLAttributes;
 }
@@ -70,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;
     /**
@@ -165,6 +200,14 @@ export interface ListboxOwnProps {
      * @default "bottom-start"
      */
     placement?: PositionPlacement;
+    /**
+     * Roundedness of the floating panel (`Menu`). When omitted, `Menu` defaults
+     * apply (including `Menu.defaultProps.rounded`).
+     *
+     * `Select` always forwards its own `rounded` here so the dropdown matches the
+     * field, independent of `Menu.defaultProps`.
+     */
+    rounded?: MergeProps<MenuRounded, ListboxRoundedOverrides>;
     /**
      * Shows a check icon on selected options.
      *

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;