@bridge-ui/vue 0.2.0 → 0.4.0

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

@@ -1,7 +1,9 @@
 import { ButtonHTMLAttributes, InputHTMLAttributes } from 'vue';
-import { MergeHtmlProps } from '@bridge-ui/core/Utils';
+import { NumberFieldControlVariant } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
 import { IconProps } from '../Icon';
+export interface NumberFieldControlVariantOverrides {}
 export interface NumberFieldClasses extends FormFieldClasses {
     /**
      * The classes to apply to the decrement button.
@@ -54,6 +56,16 @@ export interface NumberFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "
      * The classes to apply to the number field.
      */
     classes?: NumberFieldClasses;
+    /**
+     * Layout of the increment and decrement controls.
+     *
+     * `stacked` places them in a column at the end. `inline` places them in a
+     * row at the end. `split` places decrement at the start and increment at the
+     * end, and reserves the start slot (`start` / `startIcon`) for decrement.
+     *
+     * @default "stacked"
+     */
+    controlVariant?: MergeProps<NumberFieldControlVariant, NumberFieldControlVariantOverrides>;
     /**
      * Extra props for FormField parts and the stepper buttons.
      *

package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +1,18 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
-import { mergePartBind as n, resolveFieldAdornmentIconSize as r } from "../../Utils/index.js";
-import i from "../Icon/Icon.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as a } from "../FormField/formField.types.js";
-import o from "../FormField/FormField.js";
-import { usePasswordField as s } from "./composables/usePasswordField.js";
-import { computed as c, createBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeProps as _, openBlock as v, ref as y, renderList as b, renderSlot as x, unref as S, useModel as C, vModelDynamic as w, withCtx as T, withDirectives as E } from "vue";
-import { isUndefined as D } from "es-toolkit/compat";
-import { cn as O } from "@bridge-ui/core/Utils";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import { mergePartBind as r, resolveFieldAdornmentIconSize as i } from "../../Utils/index.js";
+import a from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as o } from "../FormField/formField.types.js";
+import s from "../FormField/FormField.js";
+import { usePasswordField as c } from "./composables/usePasswordField.js";
+import { computed as l, createBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, isRef as g, mergeModels as _, mergeProps as v, normalizeProps as y, openBlock as b, ref as x, renderList as S, renderSlot as C, unref as w, useModel as T, vModelDynamic as E, withCtx as D, withDirectives as O } from "vue";
+import { cn as k } from "@bridge-ui/core/Utils";
 //#region src/Components/PasswordField/PasswordField.vue?vue&type=script&setup=true&lang.ts
-var k = /*@__PURE__*/ p({
+var A = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "PasswordField",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ _({
 		classes: {},
 		customProps: {},
 		defaultValue: {},
@@ -45,34 +45,29 @@ var k = /*@__PURE__*/ p({
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ h(["visibility-change"], ["update:modelValue"]),
-	setup(p, { emit: h }) {
-		let k = h, A = C(p, "modelValue"), j = p, M = y(j.defaultValue), N = c({
-			set: (e) => {
-				A.value = e, M.value = e;
-			},
-			get: () => D(A.value) ? M.value : A.value
-		}), P = e(), { formField: F, inputBind: I, isVisible: L, mergedClasses: R, toggleVisibility: z } = s(j, { onVisibilityChange: (e) => k("visibility-change", e) }), B = c(() => n(j.customProps?.toggle, {
+	emits: /*@__PURE__*/ _(["visibility-change"], ["update:modelValue"]),
+	setup(m, { emit: _ }) {
+		let A = e(), j = _, M = T(m, "modelValue"), N = m, P = x(N.defaultValue), F = n(M, P), { formField: I, inputBind: L, isVisible: R, mergedClasses: z, toggleVisibility: B } = c(N, { onVisibilityChange: (e) => j("visibility-change", e) }), V = l(() => r(N.customProps?.toggle, {
 			type: "button",
-			disabled: j.disabled,
-			onClick: z,
-			"aria-label": L.value ? P("Hide password") : P("Show password")
-		}, O({
-			"bridge-end-adornment bridge-field-adornment-button inline-flex h-full items-center justify-center px-2.5": !0,
-			[R.value.toggle ?? ""]: !0
+			disabled: N.disabled,
+			onClick: B,
+			"aria-label": R.value ? A("Hide password") : A("Show password")
+		}, k({
+			"bridge-end-adornment bridge-field-adornment-button inline-flex h-auto! min-h-0 self-stretch overflow-hidden items-center justify-center px-2.5": !0,
+			[z.value.toggle ?? ""]: !0
 		})));
-		return (e, n) => (v(), l(S(o), { field: S(F) }, d({
-			end: T(() => [u("button", _(m(B.value)), [f(S(i), g({
-				icon: S(L) ? "eyeOff" : "eye",
-				size: S(r)(j.size)
-			}, j.customProps?.toggleIcon), null, 16, ["icon", "size"])], 16)]),
-			default: T(() => [E(u("input", g({ "onUpdate:modelValue": n[0] ||= (e) => N.value = e }, S(I)), null, 16), [[w, N.value]])]),
+		return (e, n) => (b(), u(w(s), { field: w(I) }, f({
+			end: D(() => [d("button", y(h(V.value)), [p(w(a), v({
+				icon: w(R) ? "eyeOff" : "eye",
+				size: w(i)(N.size)
+			}, N.customProps?.toggleIcon), null, 16, ["icon", "size"])], 16)]),
+			default: D(() => [O(d("input", v({ "onUpdate:modelValue": n[0] ||= (e) => g(F) ? F.value = e : null }, w(L)), null, 16), [[E, w(F)]])]),
 			_: 2
-		}, [b(S(t)(S(a).filter((e) => e !== "end"), e.$slots), (t) => ({
+		}, [S(w(t)(w(o).filter((e) => e !== "end"), e.$slots), (t) => ({
 			name: t,
-			fn: T((n) => [x(e.$slots, t, _(m(n || {})))])
+			fn: D((n) => [C(e.$slots, t, y(h(n || {})))])
 		}))]), 1032, ["field"]));
 	}
 });
 //#endregion
-export { k as default };
+export { A as default };

package/dist/Components/PasswordField/composables/usePasswordField.d.ts

@@ -176,7 +176,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
             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;
@@ -446,6 +446,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         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/Radio/Radio.vue_vue_type_script_setup_true_lang.js

@@ -34,22 +34,22 @@ var S = ["for"], C = ["checked"], w = /*@__PURE__*/ c({
 	}),
 	emits: ["update:modelValue"],
 	setup(c) {
-		let u = v(), w = c, T = y(c, "modelValue"), E = m(!!w.defaultChecked), D = i(() => x(T.value) && E.value ? w.value : T.value), { merged: O, dotBind: k, fieldBind: A, inputBind: j, isChecked: M, formControl: N, controlBind: P } = r(() => ({
+		let u = v(), w = c, T = y(c, "modelValue"), E = m(!!w.defaultChecked), D = i(() => u["onUpdate:modelValue"] !== void 0 || !x(T.value)), O = i(() => D.value ? T.value : E.value ? w.value : T.value), { merged: k, dotBind: A, fieldBind: j, inputBind: M, isChecked: N, formControl: P, controlBind: F } = r(() => ({
 			...u,
 			...w
 		}), {
 			size: "md",
 			rounded: "full",
 			color: "primary"
-		}, D);
-		function F() {
-			E.value = !0, x(O.value.value) || (T.value = O.value.value);
+		}, O);
+		function I() {
+			E.value = !0, x(k.value.value) || (T.value = k.value.value);
 		}
-		return (r, i) => (p(), a(_(n), { field: _(N) }, s({
-			default: b(() => [o("label", d(_(A), { for: _(N).controlId.value }), [o("input", d(_(j), {
-				checked: _(M),
-				onChange: F
-			}), null, 16, C), o("span", f(l(_(P))), [o("span", f(l(_(k))), null, 16)], 16)], 16, S)]),
+		return (r, i) => (p(), a(_(n), { field: _(P) }, s({
+			default: b(() => [o("label", d(_(j), { for: _(P).controlId.value }), [o("input", d(_(M), {
+				checked: _(N),
+				onChange: I
+			}), null, 16, C), o("span", f(l(_(F))), [o("span", f(l(_(A))), null, 16)], 16)], 16, S)]),
 			_: 2
 		}, [h(_(e)(_(t), r.$slots), (e) => ({
 			name: e,

package/dist/Components/Radio/composables/useRadio.js

@@ -1,11 +1,11 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { useFormControl as r } from "../../FormControl/composables/useFormControl.js";
 import { computed as i, toValue as a, useAttrs as o } from "vue";
-import { get as s, omit as c } from "es-toolkit/compat";
-import { radioColorProps as l, radioRoundedProps as u, radioSizeProps as d } from "@bridge-ui/core/Tokens";
-import { cn as f, getColorToken as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
+import { get as s, isNil as c, omit as l } from "es-toolkit/compat";
+import { radioColorProps as u, radioRoundedProps as d, radioSizeProps as f } from "@bridge-ui/core/Tokens";
+import { cn as p, getColorToken as m, mergeBridgeUILayeredClasses as h, splitComponentProps as g } from "@bridge-ui/core/Utils";
 //#region src/Components/Radio/composables/useRadio.ts
-var g = [
+var _ = [
 	"name",
 	"size",
 	"color",
@@ -15,78 +15,81 @@ var g = [
 	"customProps",
 	"defaultChecked"
 ];
-function _(_, v, y) {
-	let b = o(), x = r(() => ({
-		...b,
-		...a(_)
+function v(v, y, b) {
+	let x = o(), S = r(() => ({
+		...x,
+		...a(v)
 	}), {
 		error: !1,
 		hideErrorMessage: !1,
-		size: v.size ?? "sm"
-	}, { componentName: "Radio" }), S = i(() => h({
-		bridgeKeys: g,
+		size: y.size ?? "sm"
+	}, { componentName: "Radio" }), C = i(() => g({
+		bridgeKeys: _,
 		props: {
-			...b,
-			...a(_)
+			...x,
+			...a(v)
 		}
-	})), { merged: C, entry: w } = t({
-		libDefaults: v,
+	})), { merged: w, entry: T } = t({
+		libDefaults: y,
 		componentName: "Radio",
-		props: () => S.value.componentProps
-	}), T = i(() => C.value.customProps), E = n({
-		entry: w,
-		props: () => S.value.componentProps
-	}), D = i(() => a(y) === C.value.value), O = i(() => {
-		let e = m(l, w.value?.tokens?.color);
-		return p({
+		props: () => C.value.componentProps
+	}), E = i(() => w.value.customProps), D = n({
+		entry: T,
+		props: () => C.value.componentProps
+	}), O = i(() => {
+		let e = a(b);
+		return !c(e) && e === w.value.value;
+	}), k = i(() => {
+		let e = h(u, T.value?.tokens?.color);
+		return m({
 			tokens: e,
-			color: C.value.color,
-			invalid: x.invalidated.value
+			color: w.value.color,
+			invalid: S.invalidated.value
 		});
-	}), k = i(() => {
-		let e = m(d, w.value?.tokens?.size);
-		return s(e, C.value.size ?? "sm");
 	}), A = i(() => {
-		let e = m(u, w.value?.tokens?.rounded);
-		return s(e, C.value.rounded ?? "full");
-	}), j = i(() => e({
-		...T.value?.input,
-		...x.controlBind.value,
+		let e = h(f, T.value?.tokens?.size);
+		return s(e, w.value.size ?? "sm");
+	}), j = i(() => {
+		let e = h(d, T.value?.tokens?.rounded);
+		return s(e, w.value.rounded ?? "full");
+	}), M = i(() => e({
+		...E.value?.input,
+		...S.controlBind.value,
 		type: "radio",
-		name: C.value.name,
-		value: C.value.value
-	}, c(S.value.inheritedAttrs, ["class"]), f({
+		name: w.value.name,
+		value: w.value.value
+	}, l(C.value.inheritedAttrs, ["class"]), p({
 		"sr-only": !0,
-		[E.value.input ?? ""]: !0
-	}))), M = i(() => e(T.value?.control, { "aria-hidden": !0 }, f({
+		[D.value.input ?? ""]: !0
+	}))), N = i(() => e(E.value?.control, { "aria-hidden": !0 }, p({
 		"inline-flex shrink-0 items-center justify-center border shadow-sm transition ease-in-out duration-100": !0,
 		"pointer-events-none": !0,
-		[k.value ?? ""]: !0,
 		[A.value ?? ""]: !0,
-		[O.value?.base ?? ""]: !D.value,
-		[O.value?.checked ?? ""]: D.value,
-		[E.value.control ?? ""]: !0
+		[j.value ?? ""]: !0,
+		[k.value?.base ?? ""]: !O.value,
+		[k.value?.checked ?? ""]: O.value,
+		[D.value.control ?? ""]: !0
 	})));
 	return {
-		merged: C,
-		dotBind: i(() => e(T.value?.dot, {}, f({
+		merged: w,
+		dotBind: i(() => e(E.value?.dot, {}, p({
 			"rounded-full bg-white transition-transform duration-100": !0,
-			"scale-0": !D.value,
-			"scale-100": D.value,
+			"scale-0": !O.value,
+			"scale-100": O.value,
 			"h-[42%] w-[42%]": !0,
-			[E.value.dot ?? ""]: !0
+			[D.value.dot ?? ""]: !0
 		}))),
-		fieldBind: i(() => e({}, {}, f({
+		fieldBind: i(() => e({}, {}, p({
 			"relative inline-flex shrink-0 cursor-pointer items-center": !0,
 			"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2": !0,
-			[A.value ?? ""]: !0,
-			[O.value?.focus ?? ""]: !0
+			[j.value ?? ""]: !0,
+			[k.value?.focus ?? ""]: !0
 		}))),
-		inputBind: j,
-		isChecked: D,
-		formControl: x,
-		controlBind: M
+		inputBind: M,
+		isChecked: O,
+		formControl: S,
+		controlBind: N
 	};
 }
 //#endregion
-export { _ as useRadio };
+export { v as useRadio };

package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t, presentSlotNames as n } from "../../Utils/slotOrProp.js";
-import { mergeNestedComponentProps as ee } from "../../Utils/index.js";
-import r from "../Icon/Icon.js";
-import i from "../Chip/Chip.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as te } from "../FormField/formField.types.js";
-import a from "../FormField/FormField.js";
+import { useOptionalModel as r } from "../../Utils/useOptionalModel.js";
+import { mergeNestedComponentProps as i } from "../../Utils/index.js";
+import ee from "../Icon/Icon.js";
+import a from "../Chip/Chip.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as o } from "../FormField/formField.types.js";
+import te from "../FormField/FormField.js";
 import ne from "../Listbox/Listbox.js";
-import { useSelect as o } from "./composables/useSelect.js";
-import { SELECT_OPTION_KEY as s } from "./selectInjectionKey.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as re, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, toDisplayString as ie, unref as D, useModel as ae, useTemplateRef as oe, withCtx as O, withKeys as k, withModifiers as A } from "vue";
-import { isUndefined as j } from "es-toolkit/compat";
+import { useSelect as s } from "./composables/useSelect.js";
+import { SELECT_OPTION_KEY as c } from "./selectInjectionKey.js";
+import { Fragment as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as re, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, toDisplayString as ie, unref as D, useModel as ae, useTemplateRef as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
 import { cn as M } from "@bridge-ui/core/Utils";
 //#region src/Components/Select/Select.vue?vue&type=script&setup=true&lang.ts
 var N = {
@@ -98,13 +98,8 @@ var N = {
 		"update:modelValue"
 	], ["update:modelValue"]),
 	setup(g, { emit: y }) {
-		let L = ae(g, "modelValue"), R = g, z = y, B = e(), V = w(R.defaultValue), H = l({
-			set: (e) => {
-				L.value = e, V.value = e;
-			},
-			get: () => j(L.value) ? V.value : L.value
-		}), U = oe("trigger"), W = w([]);
-		C(s, {
+		let L = y, R = e(), z = ae(g, "modelValue"), B = g, V = w(B.defaultValue), H = r(z, V), U = O("trigger"), W = w([]);
+		C(c, {
 			unregister(e) {
 				W.value = W.value.filter((t) => String(t.value) !== String(e));
 			},
@@ -112,24 +107,24 @@ var N = {
 				W.value.some((t) => String(t.value) === String(e.value)) || (W.value = [...W.value, e]);
 			}
 		});
-		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: se, triggerBind: Z, handleApply: ce, selectOption: le, handleCancel: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, showClearIcon: me, selectedOptions: he, hasComposedList: $, handleRegisteredOptionsChange: ge } = o(R, H, U, z, W);
-		return (e, o) => (S(), f(c, null, [
-			h(D(a), { field: D(J) }, m({
-				default: O(() => [D(q) ? (S(), f("div", N, [(S(!0), f(c, null, T(D(he), (t) => (S(), u(D(i), b({
+		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: oe, triggerBind: Z, handleApply: se, selectOption: ce, handleCancel: le, containerRef: ue, listboxProps: Q, clearIconSize: de, mergedClasses: fe, showClearIcon: pe, selectedOptions: me, hasComposedList: $, handleRegisteredOptionsChange: he } = s(B, H, U, L, W);
+		return (e, r) => (S(), f(l, null, [
+			h(D(te), { field: D(J) }, m({
+				default: k(() => [D(q) ? (S(), f("div", N, [(S(!0), f(l, null, T(D(me), (t) => (S(), u(D(a), b({
 					dismissible: "",
 					key: String(t.value),
 					size: D(J).merged.value.size,
 					disabled: D(J).isDisabled.value,
 					"clear-label": `Remove ${t.label}`,
-					onDismiss: (e) => D(se)(t, e)
-				}, { ref_for: !0 }, D(ee)(R.customProps?.chip, {
+					onDismiss: (e) => D(oe)(t, e)
+				}, { ref_for: !0 }, D(i)(B.customProps?.chip, {
 					customProps: { clear: D(Y) },
 					classes: { root: D(M)({
 						"bg-white ring-1 ring-inset ring-dark-200 dark:bg-dark-700 dark:ring-dark-600": !0,
-						[D(pe).chip ?? ""]: !0
+						[D(fe).chip ?? ""]: !0
 					}) }
 				})), {
-					default: O(() => [E(e.$slots, "chip", { option: t }, () => [re(ie(t.label), 1)])]),
+					default: k(() => [E(e.$slots, "chip", { option: t }, () => [re(ie(t.label), 1)])]),
 					_: 2
 				}, 1040, [
 					"size",
@@ -139,62 +134,62 @@ var N = {
 				]))), 128)), p("textarea", b({ ref: "trigger" }, D(Z)), null, 16)])) : (S(), f("div", P, [p("input", b({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, D(Z)), null, 16), D(me) ? (S(), f("span", b({ key: 0 }, D(Y), {
-					onClick: o[0] ||= (...e) => D(X) && D(X)(...e),
-					onKeydown: [o[1] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["enter"]), o[2] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["space"])],
-					"aria-label": D(B)("Clear selection")
-				}), [h(D(r), b({
+				}, D(Z)), null, 16), D(pe) ? (S(), f("span", b({ key: 0 }, D(Y), {
+					onClick: r[0] ||= (...e) => D(X) && D(X)(...e),
+					onKeydown: [r[1] ||= A(j((...e) => D(X) && D(X)(...e), ["prevent"]), ["enter"]), r[2] ||= A(j((...e) => D(X) && D(X)(...e), ["prevent"]), ["space"])],
+					"aria-label": D(R)("Clear selection")
+				}), [h(D(ee), b({
 					icon: "clear",
-					size: D(fe)
-				}, R.customProps?.clearIcon), null, 16, ["size"])], 16, F)) : d("", !0)]))]),
+					size: D(de)
+				}, B.customProps?.clearIcon), null, 16, ["size"])], 16, F)) : d("", !0)]))]),
 				_: 2
-			}, [T(D(n)(D(te), e.$slots), (t) => ({
+			}, [T(D(n)(D(o), e.$slots), (t) => ({
 				name: t,
-				fn: O((n) => [E(e.$slots, t, x(_(n || {})))])
+				fn: k((n) => [E(e.$slots, t, x(_(n || {})))])
 			}))]), 1032, ["field"]),
 			h(D(ne), b({
 				modelValue: D(G),
-				"onUpdate:modelValue": o[3] ||= (e) => v(G) ? G.value = e : null
-			}, D(de), {
-				onApply: D(ce),
-				"anchor-el": D(Q),
-				onCancel: D(ue),
-				onSelect: D(le),
-				onRegisteredOptionsChange: D(ge)
+				"onUpdate:modelValue": r[3] ||= (e) => v(G) ? G.value = e : null
+			}, D(Q), {
+				onApply: D(se),
+				"anchor-el": D(ue),
+				onCancel: D(le),
+				onSelect: D(ce),
+				onRegisteredOptionsChange: D(he)
 			}), m({ _: 2 }, [
 				D($) ? {
 					name: "default",
-					fn: O(() => [E(e.$slots, "default")]),
+					fn: k(() => [E(e.$slots, "default")]),
 					key: "0"
 				} : void 0,
 				D(t)(D(K), "beforeOptions") ? {
 					name: "beforeOptions",
-					fn: O(() => [E(e.$slots, "beforeOptions")]),
+					fn: k(() => [E(e.$slots, "beforeOptions")]),
 					key: "1"
 				} : void 0,
 				D(t)(D(K), "loading") ? {
 					name: "loading",
-					fn: O(() => [E(e.$slots, "loading")]),
+					fn: k(() => [E(e.$slots, "loading")]),
 					key: "2"
 				} : void 0,
 				D(t)(D(K), "option") ? {
 					name: "option",
-					fn: O((t) => [E(e.$slots, "option", x(_(t)))]),
+					fn: k((t) => [E(e.$slots, "option", x(_(t)))]),
 					key: "3"
 				} : void 0,
 				D(t)(D(K), "empty") ? {
 					name: "empty",
-					fn: O(() => [E(e.$slots, "empty")]),
+					fn: k(() => [E(e.$slots, "empty")]),
 					key: "4"
 				} : void 0,
 				D(t)(D(K), "footer") ? {
 					name: "footer",
-					fn: O((t) => [E(e.$slots, "footer", x(_(t)))]),
+					fn: k((t) => [E(e.$slots, "footer", x(_(t)))]),
 					key: "5"
 				} : void 0,
 				D(t)(D(K), "afterOptions") ? {
 					name: "afterOptions",
-					fn: O(() => [E(e.$slots, "afterOptions")]),
+					fn: k(() => [E(e.$slots, "afterOptions")]),
 					key: "6"
 				} : void 0
 			]), 1040, [

package/dist/Components/Select/composables/useSelect.d.ts

@@ -180,7 +180,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
             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;
@@ -450,6 +450,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         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/Slider/Slider.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,13 @@
 import { presentSlotNames as e } from "../../Utils/slotOrProp.js";
-import { BASE_FIELD_CHROME_SLOT_NAMES as t } from "../BaseField/baseField.types.js";
-import n from "../BaseField/BaseField.js";
-import { useSlider as r } from "./composables/useSlider.js";
-import i from "../Tooltip/Tooltip.js";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, defineComponent as f, guardReactiveProps as p, mergeModels as m, mergeProps as h, normalizeProps as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
-import { isUndefined as T } from "es-toolkit/compat";
-import { resolveSliderBounds as E, resolveSliderDefaultValue as D } from "@bridge-ui/core/Domain";
+import { useOptionalModel as t } from "../../Utils/useOptionalModel.js";
+import { BASE_FIELD_CHROME_SLOT_NAMES as n } from "../BaseField/baseField.types.js";
+import r from "../BaseField/BaseField.js";
+import { useSlider as i } from "./composables/useSlider.js";
+import a from "../Tooltip/Tooltip.js";
+import { Fragment as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, defineComponent as f, guardReactiveProps as p, mergeModels as m, mergeProps as h, normalizeProps as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
+import { resolveSliderBounds as T, resolveSliderDefaultValue as E } from "@bridge-ui/core/Domain";
 //#region src/Components/Slider/Slider.vue?vue&type=script&setup=true&lang.ts
-var O = /*@__PURE__*/ f({
+var D = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "Slider",
 	props: /*@__PURE__*/ m({
@@ -43,7 +43,7 @@ var O = /*@__PURE__*/ f({
 	}),
 	emits: /*@__PURE__*/ m(["change", "update:modelValue"], ["update:modelValue"]),
 	setup(f, { emit: m }) {
-		let O = m, k = f, A = C(f, "modelValue"), j = {
+		let D = m, O = f, k = C(f, "modelValue"), A = {
 			min: 0,
 			step: 1,
 			max: 100,
@@ -52,67 +52,62 @@ var O = /*@__PURE__*/ f({
 			color: "primary",
 			showStops: !1,
 			showTooltip: !0
-		}, M = E({
-			min: k.min ?? j.min,
-			max: k.max ?? j.max,
-			step: k.step ?? j.step
-		}), N = v(D({
-			min: M.min,
-			max: M.max,
-			step: M.step,
-			range: !!k.range,
-			defaultValue: k.defaultValue
-		})), P = o({
-			set: (e) => {
-				A.value = e, N.value = e;
-			},
-			get: () => T(A.value) ? N.value : A.value
-		}), F = v([null, null]), { barBind: I, trackRef: L, baseField: R, trackBind: z, controlBind: B, getStopBind: V, thumbIndexes: H, tooltipProps: U, getThumbBind: W, resolvedStops: G, isTooltipOpen: K, hasStopLabels: q, readThumbValue: J, stopLabelsBind: Y, getStopLabelBind: X, getThumbKnobBind: Z, showTooltip: Q } = r(() => k, j, P, { onChange: (e) => {
-			O("change", e);
+		}, j = T({
+			min: O.min ?? A.min,
+			max: O.max ?? A.max,
+			step: O.step ?? A.step
+		}), M = v(E({
+			min: j.min,
+			max: j.max,
+			step: j.step,
+			range: !!O.range,
+			defaultValue: O.defaultValue
+		})), N = t(k, M), P = v([null, null]), { barBind: F, trackRef: I, baseField: L, trackBind: R, controlBind: z, getStopBind: B, thumbIndexes: V, tooltipProps: H, getThumbBind: U, resolvedStops: W, isTooltipOpen: G, hasStopLabels: K, readThumbValue: q, stopLabelsBind: J, getStopLabelBind: Y, getThumbKnobBind: X, showTooltip: Z } = i(() => O, A, N, { onChange: (e) => {
+			D("change", e);
 		} });
-		function $(e) {
-			L.value = e instanceof HTMLDivElement ? e : e?.$el ?? null;
+		function Q(e) {
+			I.value = e instanceof HTMLDivElement ? e : e?.$el ?? null;
 		}
-		function ee(e, t) {
+		function $(e, t) {
 			let n = t instanceof HTMLButtonElement ? t : t?.$el ?? null;
-			F.value[e] = n;
+			P.value[e] = n;
 		}
-		return (r, o) => (_(), s(n, { field: S(R) }, d({
-			default: w(() => [u("div", g(p(S(B))), [
-				u("div", h({ ref: $ }, S(z)), [
-					u("div", g(p(S(I))), null, 16),
-					(_(!0), l(a, null, y(S(G), (e) => (_(), l("div", h({ key: `stop-${e.value}` }, { ref_for: !0 }, S(V)(e)), null, 16))), 128)),
-					(_(!0), l(a, null, y(S(H), (e) => (_(), l("button", h({ key: e }, { ref_for: !0 }, S(W)(e), {
+		return (t, i) => (_(), s(r, { field: S(L) }, d({
+			default: w(() => [u("div", g(p(S(z))), [
+				u("div", h({ ref: Q }, S(R)), [
+					u("div", g(p(S(F))), null, 16),
+					(_(!0), l(o, null, y(S(W), (e) => (_(), l("div", h({ key: `stop-${e.value}` }, { ref_for: !0 }, S(B)(e)), null, 16))), 128)),
+					(_(!0), l(o, null, y(S(V), (e) => (_(), l("button", h({ key: e }, { ref_for: !0 }, S(U)(e), {
 						ref_for: !0,
-						ref: (t) => ee(e, t)
-					}), [b(r.$slots, "thumb", {}, () => [u("span", h({ ref_for: !0 }, S(Z)(e)), null, 16)])], 16))), 128))
+						ref: (t) => $(e, t)
+					}), [b(t.$slots, "thumb", {}, () => [u("span", h({ ref_for: !0 }, S(X)(e)), null, 16)])], 16))), 128))
 				], 16),
-				S(Q) ? (_(!0), l(a, { key: 0 }, y(S(H), (e) => (_(), s(S(i), h({
+				S(Z) ? (_(!0), l(o, { key: 0 }, y(S(V), (e) => (_(), s(S(a), h({
 					arrow: "",
 					size: "sm",
 					"open-delay": 0,
 					placement: "top",
 					"close-delay": 0,
 					key: `tooltip-${e}`,
-					"anchor-el": F.value[e],
-					"model-value": S(K)(e),
-					content: String(S(J)(e))
-				}, { ref_for: !0 }, S(U)), null, 16, [
+					"anchor-el": P.value[e],
+					"model-value": S(G)(e),
+					content: String(S(q)(e))
+				}, { ref_for: !0 }, S(H)), null, 16, [
 					"anchor-el",
 					"model-value",
 					"content"
 				]))), 128)) : c("", !0),
-				S(q) ? (_(), l("div", g(h({ key: 1 }, S(Y))), [(_(!0), l(a, null, y(S(G), (e) => (_(), l(a, { key: `label-${e.value}` }, [e.label ? (_(), l("div", h({
+				S(K) ? (_(), l("div", g(h({ key: 1 }, S(J))), [(_(!0), l(o, null, y(S(W), (e) => (_(), l(o, { key: `label-${e.value}` }, [e.label ? (_(), l("div", h({
 					key: 0,
 					ref_for: !0
-				}, S(X)(e)), x(e.label), 17)) : c("", !0)], 64))), 128))], 16)) : c("", !0)
+				}, S(Y)(e)), x(e.label), 17)) : c("", !0)], 64))), 128))], 16)) : c("", !0)
 			], 16)]),
 			_: 2
-		}, [y(S(e)(S(t), r.$slots), (e) => ({
+		}, [y(S(e)(S(n), t.$slots), (e) => ({
 			name: e,
-			fn: w((t) => [b(r.$slots, e, g(p(t || {})))])
+			fn: w((n) => [b(t.$slots, e, g(p(n || {})))])
 		}))]), 1032, ["field"]));
 	}
 });
 //#endregion
-export { O as default };
+export { D as default };