@bridge-ui/vue 0.2.0 → 0.4.0

package/dist/Components/Textarea/composables/useTextarea.d.ts

@@ -171,7 +171,7 @@ export declare function useTextarea(props: TextareaOwnProps, textareaRef: Ref<nu
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -441,6 +441,7 @@ export declare function useTextarea(props: TextareaOwnProps, textareaRef: 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, {}>>;

package/dist/Components/TimeField/TimeField.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
-import n from "../Icon/Icon.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
-import i from "../FormField/FormField.js";
-import a from "../FieldOverlay/FieldOverlay.js";
-import { useTimeField as o } from "./composables/useTimeField.js";
-import s from "../TimePicker/TimePicker.js";
-import { Fragment as c, computed 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, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
-import { isUndefined as A } from "es-toolkit/compat";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useTimeField as s } from "./composables/useTimeField.js";
+import c from "../TimePicker/TimePicker.js";
+import { Fragment 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, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
 //#region src/Components/TimeField/TimeField.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"], N = /*@__PURE__*/ h({
+var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"], M = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "TimeField",
 	props: /*@__PURE__*/ _({
@@ -74,51 +74,46 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	setup(h, { emit: _ }) {
-		let N = E(h, "modelValue"), P = h, F = _, I = e(), L = S(P.defaultValue ?? null), R = l({
-			set: (e) => {
-				N.value = e, L.value = e;
-			},
-			get: () => A(N.value) ? L.value : N.value
-		}), { open: z, fill: B, overlay: V, timeOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: ee, overlayCustomProps: te, timePickerCustomProps: ne } = o(P, R, F);
-		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
-			default: D(() => [f("div", j, [f("input", b(g(T(W))), null, 16), T(Z) ? (x(), d("span", v({ key: 0 }, T(G), {
-				onClick: o[0] ||= (...e) => T(K) && T(K)(...e),
-				"aria-label": T(I)("Clear"),
-				onKeydown: [o[1] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["space"])]
-			}), [m(T(n), v({
+		let M = _, N = e(), P = E(h, "modelValue"), F = h, I = S(F.defaultValue ?? null), L = n(P, I), { open: R, fill: z, overlay: B, timeOnly: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, timePickerCustomProps: te } = s(F, L, M);
+		return (e, n) => (x(), d(l, null, [m(T(a), { field: T(H) }, p({
+			default: D(() => [f("div", A, [f("input", b(g(T(U))), null, 16), T(X) ? (x(), d("span", v({ key: 0 }, T(W), {
+				onClick: n[0] ||= (...e) => T(G) && T(G)(...e),
+				"aria-label": T(N)("Clear"),
+				onKeydown: [n[1] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["enter"]), n[2] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["space"])]
+			}), [m(T(r), v({
 				icon: "clear",
-				size: T(X)
-			}, P.customProps?.clearIcon), null, 16, ["size"])], 16, M)) : u("", !0)])]),
+				size: T(Y)
+			}, F.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : u("", !0)])]),
 			_: 2
-		}, [C(T(t)(T(r), e.$slots), (t) => ({
+		}, [C(T(t)(T(i), e.$slots), (t) => ({
 			name: t,
 			fn: D((n) => [w(e.$slots, t, b(g(n || {})))])
-		}))]), 1032, ["field"]), m(T(a), {
-			overlay: T(V),
-			"model-value": T(z),
-			"custom-props": T(te),
-			"onUpdate:modelValue": T(Q)
+		}))]), 1032, ["field"]), m(T(o), {
+			overlay: T(B),
+			"model-value": T(R),
+			"custom-props": T(ee),
+			"onUpdate:modelValue": T(Z)
 		}, {
-			default: D(() => [m(T(s), {
-				fill: T(B),
-				value: T(q),
-				class: y(T(Y)),
-				ampm: T(H).ampm,
-				"show-footer": T(J),
-				"read-only": P.readonly,
-				"max-time": T(H).maxTime,
-				"min-time": T(H).minTime,
-				interval: T(H).interval,
-				"time-zone": T(H).timeZone,
-				onChange: T($),
-				onCancel: T(ee),
-				"show-seconds": T(H).showSeconds,
-				error: T(U).invalidated.value,
-				color: T(U).merged.value.color,
-				"custom-props": T(ne),
-				disabled: T(U).isDisabled.value,
-				"disable-times": T(H).disableTimes,
-				rounded: T(U).merged.value.rounded
+			default: D(() => [m(T(c), {
+				fill: T(z),
+				value: T(K),
+				class: y(T(J)),
+				ampm: T(V).ampm,
+				"show-footer": T(q),
+				"read-only": F.readonly,
+				"max-time": T(V).maxTime,
+				"min-time": T(V).minTime,
+				interval: T(V).interval,
+				"time-zone": T(V).timeZone,
+				onChange: T(Q),
+				onCancel: T($),
+				"show-seconds": T(V).showSeconds,
+				error: T(H).invalidated.value,
+				color: T(H).merged.value.color,
+				"custom-props": T(te),
+				disabled: T(H).isDisabled.value,
+				"disable-times": T(V).disableTimes,
+				rounded: T(H).merged.value.rounded
 			}, p({ _: 2 }, [e.$slots.footer ? {
 				name: "footer",
 				fn: D((t) => [w(e.$slots, "footer", b(g(t)))]),
@@ -154,4 +149,4 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 	}
 });
 //#endregion
-export { N as default };
+export { M as default };

package/dist/Components/TimeField/composables/useTimeField.d.ts

@@ -181,7 +181,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -451,6 +451,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
         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, {}>>;
@@ -730,6 +731,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;

package/dist/Components/TimeRangeField/TimeRangeField.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
-import n from "../Icon/Icon.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
-import i from "../FormField/FormField.js";
-import a from "../FieldOverlay/FieldOverlay.js";
-import { useTimeRangeField as o } from "./composables/useTimeRangeField.js";
-import s from "../TimeRangePicker/TimeRangePicker.js";
-import { Fragment as c, computed 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, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
-import { isUndefined as A } from "es-toolkit/compat";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useTimeRangeField as s } from "./composables/useTimeRangeField.js";
+import c from "../TimeRangePicker/TimeRangePicker.js";
+import { Fragment 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, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
 //#region src/Components/TimeRangeField/TimeRangeField.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"], N = /*@__PURE__*/ h({
+var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"], M = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "TimeRangeField",
 	props: /*@__PURE__*/ _({
@@ -74,51 +74,46 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	setup(h, { emit: _ }) {
-		let N = E(h, "modelValue"), P = h, F = _, I = e(), L = S(P.defaultValue ?? null), R = l({
-			set: (e) => {
-				N.value = e, L.value = e;
-			},
-			get: () => A(N.value) ? L.value : N.value
-		}), { open: z, fill: B, overlay: V, timeOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: ee, overlayCustomProps: te, timeRangePickerCustomProps: ne } = o(P, R, F);
-		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
-			default: D(() => [f("div", j, [f("input", b(g(T(W))), null, 16), T(Z) ? (x(), d("span", v({ key: 0 }, T(G), {
-				onClick: o[0] ||= (...e) => T(K) && T(K)(...e),
-				"aria-label": T(I)("Clear"),
-				onKeydown: [o[1] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["space"])]
-			}), [m(T(n), v({
+		let M = e(), N = _, P = E(h, "modelValue"), F = h, I = S(F.defaultValue ?? null), L = n(P, I), { open: R, fill: z, overlay: B, timeOnly: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, timeRangePickerCustomProps: te } = s(F, L, N);
+		return (e, n) => (x(), d(l, null, [m(T(a), { field: T(H) }, p({
+			default: D(() => [f("div", A, [f("input", b(g(T(U))), null, 16), T(X) ? (x(), d("span", v({ key: 0 }, T(W), {
+				onClick: n[0] ||= (...e) => T(G) && T(G)(...e),
+				"aria-label": T(M)("Clear"),
+				onKeydown: [n[1] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["enter"]), n[2] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["space"])]
+			}), [m(T(r), v({
 				icon: "clear",
-				size: T(X)
-			}, P.customProps?.clearIcon), null, 16, ["size"])], 16, M)) : u("", !0)])]),
+				size: T(Y)
+			}, F.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : u("", !0)])]),
 			_: 2
-		}, [C(T(t)(T(r), e.$slots), (t) => ({
+		}, [C(T(t)(T(i), e.$slots), (t) => ({
 			name: t,
 			fn: D((n) => [w(e.$slots, t, b(g(n || {})))])
-		}))]), 1032, ["field"]), m(T(a), {
-			overlay: T(V),
-			"model-value": T(z),
-			"custom-props": T(te),
-			"onUpdate:modelValue": T(Q)
+		}))]), 1032, ["field"]), m(T(o), {
+			overlay: T(B),
+			"model-value": T(R),
+			"custom-props": T(ee),
+			"onUpdate:modelValue": T(Z)
 		}, {
-			default: D(() => [m(T(s), {
-				fill: T(B),
-				value: T(q),
-				class: y(T(Y)),
-				ampm: T(H).ampm,
-				"show-footer": T(J),
-				"read-only": P.readonly,
-				"max-time": T(H).maxTime,
-				"min-time": T(H).minTime,
-				interval: T(H).interval,
-				"time-zone": T(H).timeZone,
-				onChange: T($),
-				onCancel: T(ee),
-				"show-seconds": T(H).showSeconds,
-				error: T(U).invalidated.value,
-				color: T(U).merged.value.color,
-				disabled: T(U).isDisabled.value,
-				"disable-times": T(H).disableTimes,
-				rounded: T(U).merged.value.rounded,
-				"custom-props": T(ne)
+			default: D(() => [m(T(c), {
+				fill: T(z),
+				value: T(K),
+				class: y(T(J)),
+				ampm: T(V).ampm,
+				"show-footer": T(q),
+				"read-only": F.readonly,
+				"max-time": T(V).maxTime,
+				"min-time": T(V).minTime,
+				interval: T(V).interval,
+				"time-zone": T(V).timeZone,
+				onChange: T(Q),
+				onCancel: T($),
+				"show-seconds": T(V).showSeconds,
+				error: T(H).invalidated.value,
+				color: T(H).merged.value.color,
+				disabled: T(H).isDisabled.value,
+				"disable-times": T(V).disableTimes,
+				rounded: T(H).merged.value.rounded,
+				"custom-props": T(te)
 			}, p({ _: 2 }, [e.$slots.footer ? {
 				name: "footer",
 				fn: D((t) => [w(e.$slots, "footer", b(g(t)))]),
@@ -154,4 +149,4 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 	}
 });
 //#endregion
-export { N as default };
+export { M as default };

package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts

@@ -181,7 +181,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -451,6 +451,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
         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, {}>>;
@@ -722,6 +723,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;

package/dist/Utils/index.d.ts

@@ -72,3 +72,4 @@ export { useBreakpoint } from './useBreakpoint';
 export type { UseBreakpointOptions } from './useBreakpoint';
 export { useHoldRepeat } from './useHoldRepeat';
 export type { HoldRepeatAction, UseHoldRepeatOptions, } from './useHoldRepeat';
+export { useOptionalModel } from './useOptionalModel';

package/dist/Utils/index.js

@@ -2,64 +2,65 @@ import { useBridgeUI as e } from "../Provider/useBridgeUI.js";
 import { RenderFn as t, hasNamedSlot as n, hasSlotOrProp as r, isPropPresent as i, presentSlotNames as a } from "./slotOrProp.js";
 import { useBreakpoint as o } from "./useBreakpoint.js";
 import { useHoldRepeat as s } from "./useHoldRepeat.js";
-import { computed as c, defineComponent as l, toValue as u, unref as d } from "vue";
-import { get as f, isNil as p } from "es-toolkit/compat";
-import { resolveFieldShowFooter as m, resolvePickerFill as h } from "@bridge-ui/core/Domain";
-import { createMergeNestedComponentProps as g, createMergePartBind as _, mergeBridgeUILayeredClasses as v, mergePropsWithBridgeUIDefaults as y } from "@bridge-ui/core/Utils";
+import { useOptionalModel as c } from "./useOptionalModel.js";
+import { computed as l, defineComponent as u, toValue as d, unref as f } from "vue";
+import { get as p, isNil as m } from "es-toolkit/compat";
+import { resolveFieldShowFooter as h, resolvePickerFill as g } from "@bridge-ui/core/Domain";
+import { createMergeNestedComponentProps as _, createMergePartBind as v, mergeBridgeUILayeredClasses as y, mergePropsWithBridgeUIDefaults as b } from "@bridge-ui/core/Utils";
 //#region src/Utils/index.ts
-function b(e) {
-	return l({
+function x(e) {
+	return u({
 		name: "HeadlessTestComponent",
 		setup() {
 			return e(), () => null;
 		}
 	});
 }
-var x = _("class"), S = g(x);
-function C({ props: t, libDefaults: n, componentName: r }) {
-	let i = e(), a = c(() => p(i) ? null : d(i.components));
+var S = v("class"), C = _(S);
+function w({ props: t, libDefaults: n, componentName: r }) {
+	let i = e(), a = l(() => m(i) ? null : f(i.components));
 	return {
-		entry: c(() => {
-			if (r) return f(a.value, r);
+		entry: l(() => {
+			if (r) return p(a.value, r);
 		}),
 		bridge: i,
-		merged: c(() => y({
+		merged: l(() => b({
 			libDefaults: n,
 			componentName: r,
-			props: u(t),
+			props: d(t),
 			components: a.value,
 			formDefaults: i?.global.value.formDefaults
 		})),
 		components: a
 	};
 }
-function w({ overlay: t, showFooter: n, componentName: r }) {
+function T({ overlay: t, showFooter: n, componentName: r }) {
 	let i = e();
-	return c(() => {
-		let e = r ? f(d(i?.components), [
+	return l(() => {
+		let e = r ? p(f(i?.components), [
 			r,
 			"defaultProps",
 			"showFooter"
 		]) : void 0;
-		return m(u(n) ?? e, u(t));
+		return h(d(n) ?? e, d(t));
 	});
 }
-function T({ fill: t, overlay: n, componentName: r }) {
+function E({ fill: t, overlay: n, componentName: r }) {
 	let i = e();
-	return c(() => {
-		let e = r ? f(d(i?.components), [
+	return l(() => {
+		let e = r ? p(f(i?.components), [
 			r,
 			"defaultProps",
 			"fill"
 		]) : void 0;
-		return h(u(t) ?? e, u(n));
+		return g(d(t) ?? e, d(n));
 	});
 }
-function E({ entry: e, props: t }) {
-	return c(() => v(f(e.value, "classes"), u(t).classes));
+function D({ entry: e, props: t }) {
+	return l(() => y(p(e.value, "classes"), d(t).classes));
 }
-function D(e) {
-	return f({
+function O(e) {
+	return p({
 		xs: "xs",
 		sm: "sm",
 		md: "md",
@@ -69,7 +70,7 @@ function D(e) {
 		"2xl": "lg"
 	}, e ?? "md");
 }
-function O(e) {
+function k(e) {
 	if (e instanceof HTMLElement) return e;
 	if (e && "$el" in e) {
 		let t = e.$el;
@@ -78,4 +79,4 @@ function O(e) {
 	return null;
 }
 //#endregion
-export { t as RenderFn, b as defineHeadlessComponent, n as hasNamedSlot, r as hasSlotOrProp, i as isPropPresent, S as mergeNestedComponentProps, x as mergePartBind, a as presentSlotNames, D as resolveFieldAdornmentIconSize, O as resolveVnodeRefElement, o as useBreakpoint, C as useBridgeUIComponent, E as useBridgeUIMergedRegistryClasses, w as useFieldShowFooter, s as useHoldRepeat, T as usePickerFill };
+export { t as RenderFn, x as defineHeadlessComponent, n as hasNamedSlot, r as hasSlotOrProp, i as isPropPresent, C as mergeNestedComponentProps, S as mergePartBind, a as presentSlotNames, O as resolveFieldAdornmentIconSize, k as resolveVnodeRefElement, o as useBreakpoint, w as useBridgeUIComponent, D as useBridgeUIMergedRegistryClasses, T as useFieldShowFooter, s as useHoldRepeat, c as useOptionalModel, E as usePickerFill };

package/dist/Utils/useOptionalModel.d.ts

@@ -0,0 +1,6 @@
+import { Ref, WritableComputedRef } from 'vue';
+/**
+ * Optional `v-model` that keeps `defaultValue` when unbound, and stays empty
+ * when the parent sets the bound model to `null`.
+ */
+export declare function useOptionalModel<T>(model: Ref<undefined | NoInfer<T>>, uncontrolled: Ref<T>): WritableComputedRef<T>;

package/dist/Utils/useOptionalModel.js

@@ -0,0 +1,13 @@
+import { computed as e } from "vue";
+import { isUndefined as t } from "es-toolkit/compat";
+//#region src/Utils/useOptionalModel.ts
+function n(n, r) {
+	return e({
+		get: () => t(n.value) ? r.value : n.value,
+		set: (e) => {
+			t(n.value) && (r.value = e), n.value = e;
+		}
+	});
+}
+//#endregion
+export { n as useOptionalModel };

package/dist/augments.d.ts

@@ -96,7 +96,7 @@ declare module "@bridge-ui/core/Config" {
     }
     interface NumberFieldConfigOverrides {
         classes: NumberFieldClasses;
-        defaultProps: Partial<Pick<NumberFieldProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
+        defaultProps: Partial<Pick<NumberFieldProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "controlVariant" | "hideErrorMessage">>;
     }
     interface OtpFieldConfigOverrides {
         classes: OtpFieldClasses;

package/dist/index.d.ts

@@ -87,7 +87,7 @@ export type { MenuClasses, MenuCustomProps, MenuEmits, MenuOptions, MenuOwnProps
 export { Modal, useModal } from './Components/Modal';
 export type { ModalAlignOverrides, ModalBlurOverrides, ModalClasses, ModalCustomProps, ModalEmits, ModalOwnProps, ModalProps, ModalSizeOverrides, ModalSlots, } from './Components/Modal';
 export { NumberField, useNumberField } from './Components/NumberField';
-export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './Components/NumberField';
+export type { NumberFieldClasses, NumberFieldControlVariantOverrides, NumberFieldCustomProps, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './Components/NumberField';
 export { OtpField, useOtpField } from './Components/OtpField';
 export type { OtpFieldClasses, OtpFieldCustomProps, OtpFieldEmits, OtpFieldOwnProps, OtpFieldProps, OtpFieldSlots, UseOtpFieldOptions, } from './Components/OtpField';
 export { Pagination, usePagination } from './Components/Pagination';

package/dist/theme.css

@@ -170,15 +170,51 @@
   }
 }
 
-/**
- * FormField slot adornments (`bridge-start-adornment` / `bridge-end-adornment`).
- * Parent `.group/field` sets `data-bridge-rounded` from FormField `rounded`.
- * Suffix `!` overrides Button/Badge `rounded-*` from the utilities layer.
- */
+/* Adornment radius from `data-bridge-rounded`. Underlined: top corner only. */
 @layer components {
   .bridge-end-adornment,
   .bridge-start-adornment {
-    @apply h-full min-h-0 rounded-none!;
+    @apply min-h-0 rounded-none!;
+  }
+
+  [data-bridge-rounded="none"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-none!;
+  }
+
+  [data-bridge-rounded="xs"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-xs!;
+  }
+
+  [data-bridge-rounded="sm"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-sm!;
+  }
+
+  [data-bridge-rounded="md"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-md!;
+  }
+
+  [data-bridge-rounded="lg"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-lg!;
+  }
+
+  [data-bridge-rounded="xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-xl!;
+  }
+
+  [data-bridge-rounded="2xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-2xl!;
+  }
+
+  [data-bridge-rounded="3xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-3xl!;
+  }
+
+  [data-bridge-rounded="4xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-4xl!;
+  }
+
+  [data-bridge-rounded="full"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-full!;
   }
 
   [data-bridge-rounded="none"] .bridge-start-adornment {
@@ -221,44 +257,12 @@
     @apply rounded-s-full! rounded-e-none!;
   }
 
-  [data-bridge-rounded="none"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-none!;
-  }
-
-  [data-bridge-rounded="xs"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-xs!;
-  }
-
-  [data-bridge-rounded="sm"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-sm!;
-  }
-
-  [data-bridge-rounded="md"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-md!;
-  }
-
-  [data-bridge-rounded="lg"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-lg!;
-  }
-
-  [data-bridge-rounded="xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-xl!;
-  }
-
-  [data-bridge-rounded="2xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-2xl!;
+  [data-bridge-variant="underlined"] .bridge-end-adornment {
+    @apply rounded-ee-none!;
   }
 
-  [data-bridge-rounded="3xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-3xl!;
-  }
-
-  [data-bridge-rounded="4xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-4xl!;
-  }
-
-  [data-bridge-rounded="full"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-full!;
+  [data-bridge-variant="underlined"] .bridge-start-adornment {
+    @apply rounded-es-none!;
   }
 
   .bridge-field-adornment-button {

package/docs/README.md

@@ -22,6 +22,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Checkbox](./components/Checkbox.md)
 - [ColorField](./components/ColorField.md)
 - [ColorPicker](./components/ColorPicker.md)
+- [DataTable](./components/DataTable.md)
 - [DateField](./components/DateField.md)
 - [DatePicker](./components/DatePicker.md)
 - [DateRangeField](./components/DateRangeField.md)
@@ -54,6 +55,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Spinner](./components/Spinner.md)
 - [Stepper](./components/Stepper.md)
 - [Switch](./components/Switch.md)
+- [Table](./components/Table.md)
 - [Tabs](./components/Tabs.md)
 - [Textarea](./components/Textarea.md)
 - [TextField](./components/TextField.md)

package/docs/components/CalendarDate.md

@@ -19,7 +19,7 @@ import { CalendarDate } from "@bridge-ui/vue/Components/CalendarDate";
   range
   v-model="range"
   :view-date="month"
-  @view-date-change="month = $event"
+  v-on:view-date-change="month = $event"
 />
 ```