@bridge-ui/vue 0.3.0 → 0.4.0

package/dist/Components/NumberField/composables/useNumberField.js

@@ -1,23 +1,32 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { useFormField as r } from "../../FormField/composables/useFormField.js";
 import { computed as i, useAttrs as a } from "vue";
-import { isNil as o } from "es-toolkit/compat";
-import { cn as s } from "@bridge-ui/core/Utils";
+import { get as o, isNil as s } from "es-toolkit/compat";
+import { getNumberFieldStepper as c, resolveNumberFieldStepperIconSize as l } from "@bridge-ui/core/Domain";
+import { numberFieldControlVariantProps as u } from "@bridge-ui/core/Tokens";
+import { cn as d, mergeBridgeUILayeredClasses as f } from "@bridge-ui/core/Utils";
 //#region src/Components/NumberField/composables/useNumberField.ts
-function c(c, l, u = {}) {
-	let d = a(), f = i(() => c.step ?? 1), { entry: p } = t({
+function p(p, m, h = {}) {
+	let g = a(), _ = i(() => p.step ?? 1), v = i(() => ({
+		classes: p.classes,
+		controlVariant: p.controlVariant
+	})), { entry: y, merged: b } = t({
 		componentName: "NumberField",
-		props: () => ({ classes: c.classes })
-	}), m = n({
-		entry: p,
-		props: () => ({ classes: c.classes })
-	}), h = r(() => {
-		let { min: e, max: t, step: n, classes: r, defaultValue: i, ...a } = c;
+		props: () => v.value,
+		libDefaults: { controlVariant: "stacked" }
+	}), x = n({
+		entry: y,
+		props: () => v.value
+	}), S = i(() => b.value.controlVariant ?? "stacked"), C = i(() => c(S.value)), w = i(() => {
+		let e = f(u, y.value?.tokens?.controlVariant);
+		return o(e, S.value) ?? u.stacked;
+	}), T = r(() => {
+		let { min: e, max: t, step: n, classes: r, defaultValue: i, controlVariant: a, ...o } = p;
 		return {
-			...d,
-			...a,
+			...g,
+			...o,
 			showErrorIcon: !1,
-			classes: m.value
+			classes: x.value
 		};
 	}, {
 		size: "md",
@@ -27,41 +36,45 @@ function c(c, l, u = {}) {
 		showErrorIcon: !1
 	}, {
 		componentName: "NumberField",
-		reservedSlots: () => ["end"]
-	}), g = i(() => e(h.inputBind.value, {
-		min: c.min,
-		max: c.max,
+		reservedSlots: () => C.value.isSplit ? ["start", "end"] : ["end"]
+	}), E = i(() => l(T.merged.value.size, S.value)), D = i(() => e(T.inputBind.value, {
+		min: p.min,
+		max: p.max,
 		type: "number",
-		step: f.value
-	}, s({ "appearance:textfield [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none": !0 }))), _ = i(() => l.value ?? void 0), v = i({
-		get: () => {
-			if (!o(_.value)) return String(_.value);
-		},
+		step: _.value
+	}, d({ "appearance:textfield [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none": !0 }))), O = i(() => m.value ?? void 0), k = i({
+		get: () => s(O.value) ? "" : String(O.value),
 		set: (e) => {
-			if (e === "" || o(e)) {
-				l.value = void 0;
+			if (e === "" || s(e)) {
+				m.value = void 0;
 				return;
 			}
 			let t = Number(e);
-			Number.isNaN(t) || (l.value = t, u.onChange?.(t));
+			Number.isNaN(t) || (m.value = t, h.onChange?.(t));
 		}
-	}), y = (e) => {
-		l.value = e, u.onChange?.(e);
+	}), A = (e) => {
+		m.value = e, h.onChange?.(e);
 	};
 	return {
 		decrement: () => {
-			let e = (_.value ?? c.min ?? 0) - f.value;
-			return !o(c.min) && e < c.min ? !1 : (y(e), !0);
+			let e = (O.value ?? p.min ?? 0) - _.value;
+			return !s(p.min) && e < p.min ? !1 : (A(e), !0);
 		},
-		formField: h,
+		formField: T,
 		increment: () => {
-			let e = (_.value ?? c.min ?? 0) + f.value;
-			return !o(c.max) && e > c.max ? !1 : (y(e), !0);
+			let e = (O.value ?? p.min ?? 0) + _.value;
+			return !s(p.max) && e > p.max ? !1 : (A(e), !0);
 		},
-		inputBind: g,
-		stringModel: v,
-		mergedClasses: m
+		inputBind: D,
+		stringModel: k,
+		mergedClasses: x,
+		stepperIconSize: E,
+		controlVariantItem: w,
+		isSplit: i(() => C.value.isSplit),
+		decrementIcon: i(() => C.value.decrementIcon),
+		incrementIcon: i(() => C.value.incrementIcon),
+		incrementFirst: i(() => C.value.incrementFirst)
 	};
 }
 //#endregion
-export { c as useNumberField };
+export { p as useNumberField };

package/dist/Components/NumberField/index.d.ts

@@ -1,4 +1,4 @@
 export { useNumberField } from './composables/useNumberField';
 export type { UseNumberFieldOptions } from './composables/useNumberField';
-export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldEmits, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './numberField.types';
+export type { NumberFieldClasses, NumberFieldControlVariantOverrides, NumberFieldCustomProps, NumberFieldEmits, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './numberField.types';
 export { default as NumberField } from './NumberField.vue';

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

@@ -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/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

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

package/dist/Components/Slider/composables/useSlider.d.ts

@@ -479,7 +479,7 @@ export declare function useSlider(props: MaybeRefOrGetter<SliderOwnProps>, libDe
     getThumbKnobBind: (thumbIndex: 0 | 1) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
         "aria-hidden": boolean;
     }>;
-    tooltipProps: import('vue').ComputedRef<Partial<Omit<import('../../Tooltip').TooltipOwnProps, "slots" | "anchorEl" | "content" | "modelValue">> | undefined>;
+    tooltipProps: import('vue').ComputedRef<Partial<Omit<import('../../Tooltip').TooltipOwnProps, "slots" | "modelValue" | "anchorEl" | "content">> | undefined>;
     readThumbValue: (thumbIndex: 0 | 1) => number;
 };
 export type UseSliderReturn = ReturnType<typeof useSlider>;

package/dist/Components/Table/Table.vue_vue_type_script_setup_true_lang.js

@@ -28,7 +28,7 @@ var l = /*@__PURE__*/ r({
 		variant: {}
 	},
 	setup(r) {
-		let { rootBind: l, tableBind: u } = e(r, {
+		let { wrapBind: l, rootBind: u, tableBind: d } = e(r, {
 			size: "md",
 			full: !0,
 			rounded: "lg",
@@ -37,7 +37,7 @@ var l = /*@__PURE__*/ r({
 			hoverable: !1,
 			stickyHeader: !1
 		});
-		return (e, r) => (o(), t("div", a(i(c(l))), [n("table", a(i(c(u))), [s(e.$slots, "default")], 16)], 16));
+		return (e, r) => (o(), t("div", a(i(c(l))), [n("div", a(i(c(u))), [n("table", a(i(c(d))), [s(e.$slots, "default")], 16)], 16)], 16));
 	}
 });
 //#endregion

package/dist/Components/Table/composables/useTable.d.ts

@@ -5,6 +5,9 @@ type TableLibDefaults = LibDefaultsShape<TableOwnProps, "full" | "size" | "round
 type TableMerged = MergeLibDefaults<TableOwnProps, TableLibDefaults>;
 export declare function useTable(props: TableOwnProps, libDefaults: TableLibDefaults): {
     merged: import('vue').ComputedRef<TableMerged>;
+    wrapBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", {}, {}>>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, Omit<TableProps, "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "hoverable" | "stickyHeader" | "striped">>>;

package/dist/Components/Table/composables/useTable.js

@@ -65,6 +65,7 @@ function g(g, _) {
 	}));
 	return a(r, A), {
 		merged: b,
+		wrapBind: i(() => e({}, {}, { class: f({ "w-fit min-w-0 max-w-full": b.value.full === !1 }) })),
 		rootBind: i(() => e(b.value.customProps?.root, y.value.inheritedAttrs, { class: f({
 			"overflow-x-auto": b.value.stickyHeader !== !0,
 			[s(D.value, "root") ?? ""]: !0,

package/dist/Components/Table/table.types.d.ts

@@ -321,7 +321,8 @@ export interface TableOwnProps {
      */
     customProps?: TableCustomProps;
     /**
-     * Stretch the table to at least the wrapper width.
+     * Stretch the table to at least the wrapper width. When `false`, the
+     * wrapper hugs column content instead of spanning the parent.
      *
      * @default true
      */