@bridge-ui/vue 0.0.11 → 0.1.1

package/dist/Components/CalendarYear/composables/useCalendarYear.js

@@ -4,12 +4,12 @@ import { computed as a, toValue as o, useAttrs as s } from "vue";
 import { get as c, isNil as l, omit as u } from "es-toolkit/compat";
 import { isYearDisabled as d, resolveCalendarDayInteractionState as f } from "@bridge-ui/core/Domain";
 import { calendarColorProps as p, calendarRoundedProps as m } from "@bridge-ui/core/Tokens";
-import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
+import { cn as h, getColorToken as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
 //#region src/Components/CalendarYear/composables/useCalendarYear.ts
-var v = 15, y = [
+var y = 15, b = [
 	"color",
+	"error",
 	"value",
-	"tokens",
 	"classes",
 	"maxDate",
 	"minDate",
@@ -22,88 +22,96 @@ var v = 15, y = [
 	"customProps",
 	"disableYears"
 ];
-function b(b, x, S) {
-	let C = s(), w = e(), T = t(), E = a(() => _({
-		bridgeKeys: y,
+function x(x, S, C) {
+	let w = s(), T = e(), E = t(), D = a(() => v({
+		bridgeKeys: b,
 		props: {
-			...C,
-			...o(b)
+			...w,
+			...o(x)
 		}
-	})), { merged: D } = r({
-		libDefaults: x,
-		props: () => E.value.componentProps
-	}), O = a(() => D.value.customProps), k = a(() => u(E.value.inheritedAttrs, ["onChange"])), A = i({
-		props: () => E.value.componentProps,
+	})), { merged: O, entry: k } = r({
+		libDefaults: S,
+		componentName: "Calendar",
+		props: () => D.value.componentProps
+	}), A = a(() => O.value.customProps), j = a(() => u(D.value.inheritedAttrs, ["onChange"])), M = i({
+		props: () => D.value.componentProps,
 		entry: a(() => {})
-	}), j = a(() => T(D.value.timeZone)), M = a(() => D.value.pageSize ?? v), N = a(() => {
-		if (!l(D.value.startYear)) return D.value.startYear;
-		let e = D.value.value ?? w.value.getYear(w.value.now(j.value), j.value), t = Math.floor(M.value / 2);
+	}), N = a(() => E(O.value.timeZone)), P = a(() => O.value.pageSize ?? y), F = a(() => {
+		if (!l(O.value.startYear)) return O.value.startYear;
+		let e = O.value.value ?? T.value.getYear(T.value.now(N.value), N.value), t = Math.floor(P.value / 2);
 		return Math.max(1, e - t);
-	}), P = a(() => g(p, D.value.tokens?.color)), F = a(() => {
-		let e = g(m, D.value.tokens?.rounded);
-		return c(e, D.value.rounded);
-	}), I = a(() => c(P.value, D.value.color)), L = a(() => Array.from({ length: M.value }, (e, t) => {
-		let n = N.value + t, r = !!D.value.disabled || d({
+	}), I = a(() => {
+		let e = _(m, k.value?.tokens?.rounded);
+		return c(e, O.value.rounded);
+	}), L = a(() => {
+		let e = _(p, k.value?.tokens?.color);
+		return g({
+			tokens: e,
+			color: O.value.color,
+			invalid: O.value.error
+		});
+	}), R = a(() => Array.from({ length: P.value }, (e, t) => {
+		let n = F.value + t, r = !!O.value.disabled || d({
 			year: n,
-			adapter: w.value,
-			context: j.value,
-			maxDate: D.value.maxDate,
-			minDate: D.value.minDate,
-			disableYears: D.value.disableYears
-		}), i = !l(D.value.value) && D.value.value === n;
+			adapter: T.value,
+			context: N.value,
+			maxDate: O.value.maxDate,
+			minDate: O.value.minDate,
+			disableYears: O.value.disableYears
+		}), i = !l(O.value.value) && O.value.value === n;
 		return {
 			year: n,
 			state: f({
 				disabled: r,
 				selected: i,
-				readOnly: D.value.readOnly
+				readOnly: O.value.readOnly
 			}),
 			selected: i,
 			label: String(n),
-			disabled: r || !!D.value.readOnly
+			disabled: r || !!O.value.readOnly
 		};
-	})), R = (e) => {
-		D.value.disabled || D.value.readOnly || d({
+	})), z = (e) => {
+		O.value.disabled || O.value.readOnly || d({
 			year: e,
-			adapter: w.value,
-			context: j.value,
-			maxDate: D.value.maxDate,
-			minDate: D.value.minDate,
-			disableYears: D.value.disableYears
-		}) || S("change", e);
+			adapter: T.value,
+			context: N.value,
+			maxDate: O.value.maxDate,
+			minDate: O.value.minDate,
+			disableYears: O.value.disableYears
+		}) || C("change", e);
 	};
 	return {
-		years: L,
-		merged: D,
-		rootBind: a(() => n(O.value?.root, k.value, h({
+		years: R,
+		merged: O,
+		rootBind: a(() => n(A.value?.root, j.value, h({
 			"flex flex-col": !0,
-			[A.value.root ?? ""]: !0
+			[M.value.root ?? ""]: !0
 		}))),
-		gridBind: a(() => n(O.value?.grid, { role: "grid" }, h({
+		gridBind: a(() => n(A.value?.grid, { role: "grid" }, h({
 			"grid grid-cols-3 gap-2": !0,
-			[A.value.grid ?? ""]: !0
+			[M.value.grid ?? ""]: !0
 		}))),
-		pageSize: M,
-		startYear: N,
-		selectYear: R,
+		pageSize: P,
+		startYear: F,
+		selectYear: z,
 		getYearBind: (e) => {
-			let t = I.value;
-			return n(O.value?.year, {
+			let t = L.value;
+			return n(A.value?.year, {
 				type: "button",
 				disabled: e.disabled,
 				"aria-pressed": e.selected,
-				onClick: () => R(e.year)
+				onClick: () => z(e.year)
 			}, h({
 				"cursor-pointer p-2.5 text-xs uppercase transition-all duration-150 ease-in-out outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed": !0,
-				[F.value ?? ""]: !0,
+				[I.value ?? ""]: !0,
 				[t?.soft ?? ""]: e.state === "base",
 				[t?.hover ?? ""]: e.state === "base",
 				[t?.selected ?? ""]: e.state === "selected",
 				[t?.disabled ?? ""]: e.state === "disabled",
-				[A.value.year ?? ""]: !0
+				[M.value.year ?? ""]: !0
 			}));
 		}
 	};
 }
 //#endregion
-export { b as useCalendarYear };
+export { x as useCalendarYear };

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

@@ -1,3 +1,3 @@
-export type { CalendarYearClasses, CalendarYearColorOverrides, CalendarYearCustomProps, CalendarYearEmits, CalendarYearOwnProps, CalendarYearProps, CalendarYearRoundedOverrides, CalendarYearTokens, } from './calendarYear.types';
+export type { CalendarYearClasses, CalendarYearColorOverrides, CalendarYearCustomProps, CalendarYearEmits, CalendarYearOwnProps, CalendarYearProps, CalendarYearRoundedOverrides, } from './calendarYear.types';
 export { default as CalendarYear } from './CalendarYear.vue';
 export { useCalendarYear, type CalendarYearCell, } from './composables/useCalendarYear';

package/dist/Components/Checkbox/composables/useCheckbox.js

@@ -2,8 +2,8 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
 import { useFormControl as r } from "../../FormControl/composables/useFormControl.js";
 import { computed as i, ref as a, toValue as o, useAttrs as s, watchEffect as c } from "vue";
 import { get as l, omit as u } from "es-toolkit/compat";
-import { checkboxColorProps as d, checkboxInvalidatedProps as f, checkboxRoundedProps as p, checkboxSizeProps as m } from "@bridge-ui/core/Tokens";
-import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
+import { checkboxColorProps as d, checkboxRoundedProps as f, checkboxSizeProps as p } from "@bridge-ui/core/Tokens";
+import { cn as m, getColorToken as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
 //#region src/Components/Checkbox/composables/useCheckbox.ts
 var v = [
 	"size",
@@ -37,49 +37,53 @@ function y(y, b, x) {
 		props: () => T.value.componentProps
 	}), A = i(() => !!o(x)), j = i(() => {
 		let e = g(d, D.value?.tokens?.color);
-		return l(e, E.value.color ?? "primary");
-	}), M = i(() => g(f, D.value?.tokens?.invalidated)), N = i(() => w.invalidated.value ? M.value : j.value), P = i(() => {
-		let e = g(m, D.value?.tokens?.size);
+		return h({
+			tokens: e,
+			color: E.value.color,
+			invalid: w.invalidated.value
+		});
+	}), M = i(() => {
+		let e = g(p, D.value?.tokens?.size);
 		return l(e, E.value.size ?? "sm");
-	}), F = i(() => {
-		let e = g(p, D.value?.tokens?.rounded);
+	}), N = i(() => {
+		let e = g(f, D.value?.tokens?.rounded);
 		return l(e, E.value.rounded ?? "sm");
 	});
 	c(() => {
 		C.value && (C.value.indeterminate = !!E.value.indeterminate);
 	});
-	let I = i(() => e({
+	let P = i(() => e({
 		...O.value?.input,
 		...w.controlBind.value,
 		type: "checkbox"
-	}, u(T.value.inheritedAttrs, ["class"]), h({
+	}, u(T.value.inheritedAttrs, ["class"]), m({
 		"sr-only": !0,
 		[k.value.input ?? ""]: !0
-	}))), L = i(() => e(O.value?.control, { "aria-hidden": !0 }, h({
+	}))), F = i(() => e(O.value?.control, { "aria-hidden": !0 }, m({
 		"inline-flex shrink-0 items-center justify-center border shadow-sm transition ease-in-out duration-100": !0,
 		"pointer-events-none": !0,
-		[P.value ?? ""]: !0,
-		[F.value ?? ""]: !0,
-		[N.value?.base ?? ""]: !A.value,
-		[N.value?.checked ?? ""]: A.value,
+		[M.value ?? ""]: !0,
+		[N.value ?? ""]: !0,
+		[j.value?.base ?? ""]: !A.value,
+		[j.value?.checked ?? ""]: A.value,
 		[k.value.control ?? ""]: !0
 	})));
 	return {
 		merged: E,
-		iconBind: i(() => e(O.value?.icon, {}, h({
+		iconBind: i(() => e(O.value?.icon, {}, m({
 			"text-white": !0,
 			[k.value.icon ?? ""]: !0
 		}))),
 		inputRef: C,
-		fieldBind: i(() => e({}, {}, h({
+		fieldBind: i(() => e({}, {}, m({
 			"relative inline-flex shrink-0 cursor-pointer items-center": !0,
 			"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2": !0,
-			[N.value?.focus ?? ""]: !0
+			[j.value?.focus ?? ""]: !0
 		}))),
-		inputBind: I,
+		inputBind: P,
 		isChecked: A,
 		formControl: w,
-		controlBind: L
+		controlBind: F
 	};
 }
 //#endregion

package/dist/Components/ColorField/ColorField.js

@@ -0,0 +1,5 @@
+import e from "./ColorField.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/ColorField/ColorField.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,38 @@
+import { ColorFieldOwnProps, ColorFieldSlots } from './colorField.types';
+type __VLS_Slots = ColorFieldSlots;
+type __VLS_Props = ColorFieldOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: null | string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    apply: () => any;
+    cancel: () => any;
+    change: (value: string | null) => any;
+    close: () => any;
+    open: () => any;
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onApply?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onChange?: ((value: string | null) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    fill: boolean;
+    showFooter: boolean;
+    showErrorIcon: boolean;
+    clearable: boolean;
+    showSwatch: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/ColorField/ColorField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,149 @@
+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 { useColorField as o } from "./composables/useColorField.js";
+import s from "../ColorPicker/ColorPicker.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 ee, withCtx as E, withKeys as D, withModifiers as O } from "vue";
+import { isUndefined as k } from "es-toolkit/compat";
+//#region src/Components/ColorField/ColorField.vue?vue&type=script&setup=true&lang.ts
+var A = { class: "flex min-w-0 flex-1 items-center gap-2" }, j = ["aria-label"], M = /*@__PURE__*/ h({
+	inheritAttrs: !1,
+	__name: "ColorField",
+	props: /*@__PURE__*/ _({
+		alpha: { type: Boolean },
+		classes: {},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		customProps: {},
+		defaultValue: {},
+		editable: { type: Boolean },
+		fill: {
+			type: Boolean,
+			default: void 0
+		},
+		format: {},
+		overlay: {},
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
+		showSwatch: {
+			type: Boolean,
+			default: !0
+		},
+		swatches: {},
+		color: {},
+		controlId: {},
+		corner: {},
+		description: {},
+		disabled: { type: Boolean },
+		end: {},
+		endIcon: {},
+		error: { type: Boolean },
+		errorIcon: {},
+		errorMessage: {},
+		hideErrorMessage: { type: Boolean },
+		label: {},
+		readonly: { type: Boolean },
+		required: { type: Boolean },
+		rounded: {},
+		showErrorIcon: {
+			type: Boolean,
+			default: !0
+		},
+		size: {},
+		slots: {},
+		start: {},
+		startIcon: {},
+		variant: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _([
+		"apply",
+		"cancel",
+		"change",
+		"clear",
+		"close",
+		"open"
+	], ["update:modelValue"]),
+	setup(h, { emit: _ }) {
+		let M = ee(h, "modelValue"), N = h, P = _, F = e(), I = S(N.defaultValue ?? null), L = l({
+			set: (e) => {
+				M.value = e, I.value = e;
+			},
+			get: () => k(M.value) ? I.value : M.value
+		}), { open: R, fill: z, format: B, overlay: V, colorOnly: H, formField: U, inputBind: W, clearBind: G, swatchBind: K, clearValue: q, modelValue: J, showFooter: Y, showSwatch: X, pickerClass: Z, clearIconSize: Q, showClearIcon: $, swatchFillBind: te, handleOpenChange: ne, handlePickerChange: re, handlePickerCancel: ie, overlayCustomProps: ae, colorPickerCustomProps: oe } = o(N, L, P);
+		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
+			default: E(() => [f("div", A, [
+				T(X) ? (x(), d("span", b(v({ key: 0 }, T(K))), [f("span", b(g(T(te))), null, 16)], 16)) : u("", !0),
+				f("input", b(g(T(W))), null, 16),
+				T($) ? (x(), d("span", v({ key: 1 }, T(G), {
+					onClick: o[0] ||= (...e) => T(q) && T(q)(...e),
+					"aria-label": T(F)("Clear"),
+					onKeydown: [o[1] ||= D(O((...e) => T(q) && T(q)(...e), ["prevent"]), ["enter"]), o[2] ||= D(O((...e) => T(q) && T(q)(...e), ["prevent"]), ["space"])]
+				}), [m(T(n), v({
+					icon: "clear",
+					size: T(Q)
+				}, N.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : u("", !0)
+			])]),
+			_: 2
+		}, [C(T(t)(T(r), e.$slots), (t) => ({
+			name: t,
+			fn: E((n) => [w(e.$slots, t, b(g(n || {})))])
+		}))]), 1032, ["field"]), m(T(a), {
+			overlay: T(V),
+			"model-value": T(R),
+			"custom-props": T(ae),
+			"onUpdate:modelValue": T(ne)
+		}, {
+			default: E(() => [m(T(s), {
+				fill: T(z),
+				format: T(B),
+				value: T(J),
+				class: y(T(Z)),
+				alpha: T(H).alpha,
+				"show-footer": T(Y),
+				"read-only": N.readonly,
+				swatches: T(H).swatches,
+				onChange: T(re),
+				onCancel: T(ie),
+				"custom-props": T(oe),
+				disabled: T(U).isDisabled.value,
+				rounded: T(U).merged.value.rounded
+			}, p({ _: 2 }, [e.$slots.footer ? {
+				name: "footer",
+				fn: E((t) => [w(e.$slots, "footer", b(g(t)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"fill",
+				"format",
+				"value",
+				"class",
+				"alpha",
+				"show-footer",
+				"read-only",
+				"swatches",
+				"onChange",
+				"onCancel",
+				"custom-props",
+				"disabled",
+				"rounded"
+			])]),
+			_: 3
+		}, 8, [
+			"overlay",
+			"model-value",
+			"custom-props",
+			"onUpdate:modelValue"
+		])], 64));
+	}
+});
+//#endregion
+export { M as default };

package/dist/Components/ColorField/colorField.types.d.ts

@@ -0,0 +1,179 @@
+import { HTMLAttributes, InputHTMLAttributes, Slot } from 'vue';
+import { ColorFormat, FieldOverlayFooterSlotProps, FieldOverlayMode } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
+import { ColorPickerCustomProps } from '../ColorPicker/colorPicker.types';
+import { DrawerOwnProps } from '../Drawer/drawer.types';
+import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
+import { IconProps } from '../Icon';
+import { MenuOwnProps } from '../Menu/menu.types';
+import { ModalOwnProps } from '../Modal/modal.types';
+export interface ColorFieldClasses extends FormFieldClasses {
+    /**
+     * Classes merged onto the clear control.
+     */
+    clear?: string;
+    /**
+     * Classes merged onto the start color swatch.
+     */
+    swatch?: string;
+}
+export interface ColorFieldCustomProps extends FormFieldCustomProps {
+    /**
+     * Props forwarded to the clear `Icon` (`icon` is set by `ColorField`).
+     *
+     * @default undefined
+     */
+    clearIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the nested `ColorPicker`.
+     *
+     * @default undefined
+     */
+    colorPicker?: ColorPickerCustomProps;
+    /**
+     * Props forwarded to the nested `Drawer` when overlay resolves to drawer.
+     *
+     * @default undefined
+     */
+    drawer?: Partial<DrawerOwnProps>;
+    /**
+     * Props forwarded to the floating `Menu` when overlay resolves to menu.
+     *
+     * @default undefined
+     */
+    menu?: Partial<MenuOwnProps>;
+    /**
+     * Props forwarded to the nested `Modal` when overlay resolves to modal.
+     *
+     * @default undefined
+     */
+    modal?: Partial<ModalOwnProps>;
+    /**
+     * Props forwarded to the start color swatch.
+     *
+     * @default undefined
+     */
+    swatch?: HTMLAttributes;
+}
+export interface ColorFieldEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
+    /**
+     * Emitted when the selected color changes.
+     */
+    change: [value: null | string];
+    /**
+     * Emitted when the value is cleared.
+     */
+    clear: [];
+    /**
+     * Emitted when the menu closes.
+     */
+    close: [];
+    /**
+     * Emitted when the menu opens.
+     */
+    open: [];
+}
+export interface ColorFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "classes" | "customProps"> {
+    /**
+     * Shows the alpha slider in the nested picker. When unset, follows `format`.
+     *
+     * @default false (`true` for alpha formats when unset)
+     */
+    alpha?: boolean;
+    /**
+     * Classes for field / input regions.
+     *
+     * @default undefined
+     */
+    classes?: ColorFieldClasses;
+    /**
+     * Whether the value can be cleared.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: ColorFieldCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | string;
+    /**
+     * Unlocks the input for typing. Typed text is parsed and committed on blur
+     * or Enter. When unset, the input is read-only.
+     *
+     * @default false
+     */
+    editable?: boolean;
+    /**
+     * When `true`, the picker fills the overlay width.
+     * When `false`, it stays at its minimum width.
+     * Unset: `true` for `drawer`, `false` for `menu` and `modal`.
+     *
+     * @default undefined
+     */
+    fill?: boolean;
+    /**
+     * Serialized output format.
+     *
+     * @default "hex"
+     */
+    format?: ColorFormat;
+    /**
+     * Which overlay shell opens the picker. `auto` uses `menu` on desktop and
+     * `drawer` (bottom) on mobile.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
+    /**
+     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true` for dialog
+     * shells (`modal` / `drawer`).
+     *
+     * @default false (`true` for `modal` / `drawer` when unset)
+     */
+    showFooter?: boolean;
+    /**
+     * Shows the selected color swatch at the start of the field.
+     *
+     * @default true
+     */
+    showSwatch?: boolean;
+    /**
+     * Preset colors forwarded to the nested picker.
+     *
+     * @default undefined
+     */
+    swatches?: string[];
+}
+export interface ColorFieldSlots extends FormFieldSlots {
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
+}
+export type ColorFieldProps = MergeHtmlProps<ColorFieldOwnProps, InputHTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     *
+     * @default undefined
+     */
+    modelValue?: null | string;
+};