@bridge-ui/vue 0.0.8 → 0.0.9

package/dist/Components/FieldOverlay/composables/useFieldOverlay.js

@@ -0,0 +1,36 @@
+import { useBreakpoint as e } from "../../../Utils/useBreakpoint.js";
+import { computed as t } from "vue";
+import { cn as n, resolveFieldOverlay as r } from "@bridge-ui/core";
+import { toMerged as i } from "es-toolkit/object";
+//#region src/Components/FieldOverlay/composables/useFieldOverlay.ts
+function a(e, t) {
+	let r = e.customProps?.panel;
+	return i(e, { customProps: { panel: {
+		...r,
+		class: n(t, r?.class)
+	} } });
+}
+function o(n) {
+	let i = e(), o = t(() => r(n.overlay, i.mobile));
+	return {
+		menuBind: t(() => ({
+			closeOnClickAway: !0,
+			placement: "bottom-start",
+			...n.customProps?.menu
+		})),
+		modalBind: t(() => a({
+			size: "md",
+			scroll: "paper",
+			align: "middle-center",
+			...n.customProps?.modal
+		}, "flex flex-col items-stretch p-0")),
+		drawerBind: t(() => a({
+			size: "md",
+			placement: "bottom",
+			...n.customProps?.drawer
+		}, "flex h-auto max-h-[90dvh] flex-col items-stretch p-0")),
+		resolvedOverlay: o
+	};
+}
+//#endregion
+export { o as useFieldOverlay };

package/dist/Components/FieldOverlay/fieldOverlay.types.d.ts

@@ -0,0 +1,63 @@
+import { Slot } from 'vue';
+import { FieldOverlayMode } from '@bridge-ui/core';
+import { DrawerOwnProps } from '../Drawer/drawer.types';
+import { MenuOwnProps } from '../Menu/menu.types';
+import { ModalOwnProps } from '../Modal/modal.types';
+export interface FieldOverlayCustomProps {
+    /**
+     * Props forwarded to the nested `Drawer` when that shell is active.
+     *
+     * @default undefined
+     */
+    drawer?: Partial<DrawerOwnProps>;
+    /**
+     * Props forwarded to the nested `Menu` when that shell is active.
+     *
+     * @default undefined
+     */
+    menu?: Partial<MenuOwnProps>;
+    /**
+     * Props forwarded to the nested `Modal` when that shell is active.
+     *
+     * @default undefined
+     */
+    modal?: Partial<ModalOwnProps>;
+}
+export interface FieldOverlayEmits {
+    /**
+     * Emitted when the user dismisses the overlay.
+     */
+    close: [];
+    /**
+     * Emitted when open state should change.
+     * Listen with `@show-change` / `v-on:show-change`.
+     */
+    "show-change": [show: boolean];
+}
+/**
+ * Renders field picker / listbox content in a `Menu`, `Modal`, or `Drawer`.
+ * Visibility is controlled with `v-model`. Shell-specific options go through
+ * `customProps.menu` / `.modal` / `.drawer`.
+ */
+export interface FieldOverlayOwnProps {
+    /**
+     * Extra props for the nested shells (`menu`, `modal`, `drawer`).
+     *
+     * @default undefined
+     */
+    customProps?: FieldOverlayCustomProps;
+    /**
+     * Which overlay shell to use. `auto` uses `menu` on desktop and `drawer`
+     * (bottom) on mobile.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
+}
+export interface FieldOverlaySlots {
+    /**
+     * Content rendered inside the active overlay shell.
+     */
+    default?: Slot;
+}
+export type FieldOverlayProps = FieldOverlayOwnProps;

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

@@ -0,0 +1,4 @@
+export { useFieldOverlay } from './composables/useFieldOverlay';
+export type { FieldOverlayOptions } from './composables/useFieldOverlay';
+export type { FieldOverlayCustomProps, FieldOverlayEmits, FieldOverlayOwnProps, FieldOverlayProps, FieldOverlaySlots, } from './fieldOverlay.types';
+export { default as FieldOverlay } from './FieldOverlay.vue';

package/dist/Components/FieldOverlay/index.js

@@ -0,0 +1,3 @@
+import { useFieldOverlay as e } from "./composables/useFieldOverlay.js";
+import t from "./FieldOverlay.js";
+export { t as FieldOverlay, e as useFieldOverlay };

package/dist/Components/FormControl/FormControl.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ var _ = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], v = ["aria-hidden"], y = /* @__PURE__ */ l({
+], v = ["aria-hidden"], y = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "FormControl",
 	props: { field: {} },
@@ -29,7 +29,7 @@ var _ = [
 				}, null, 8, ["api"])
 			], 16),
 			!b.value.invalidated.value && g(e)(b.value.slots, "description", b.value.merged.value.description) ? (p(), o("p", f(d({ key: 0 }, b.value.descriptionBind.value)), [(p(), i(h(g(t)(b.value.slots, "description", b.value.merged.value.description))))], 16)) : a("", !0),
-			b.value.merged.value.hideErrorMessage ? a("", !0) : (p(), o("p", d({ key: 1 }, b.value.errorMessageBind.value, { "aria-hidden": b.value.showErrorMessageContent.value ? void 0 : !0 }), [b.value.showErrorMessageContent.value ? (p(), i(h(g(t)(b.value.slots, "errorMessage", b.value.merged.value.errorMessage)), { key: 0 })) : a("", !0)], 16, v))
+			b.value.merged.value.hideErrorMessage ? a("", !0) : (p(), o("p", d({ key: 1 }, b.value.errorMessageBind.value, { "aria-hidden": !b.value.showErrorMessageContent.value || void 0 }), [b.value.showErrorMessageContent.value ? (p(), i(h(g(t)(b.value.slots, "errorMessage", b.value.merged.value.errorMessage)), { key: 0 })) : a("", !0)], 16, v))
 		], 16, _));
 	}
 });

package/dist/Components/FormControl/FormControlLabel.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n, resolveNamed
 import i from "../Label/Label.js";
 import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, defineComponent as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
 //#region src/Components/FormControl/FormControlLabel.vue?vue&type=script&setup=true&lang.ts
-var v = /* @__PURE__ */ u({
+var v = /*@__PURE__*/ u({
 	__name: "FormControlLabel",
 	props: {
 		api: {},

package/dist/Components/FormControl/composables/useFormControl.js

@@ -70,7 +70,7 @@ function v(v, y, b = {}) {
 			startLabel: e("startLabel")
 		};
 	}), V = a(() => n(D.value?.description, { id: `${M.value}-description` }, u({
-		"mt-2 text-gray-500 dark:text-gray-400": !0,
+		"mt-2 text-dark-500 dark:text-dark-400": !0,
 		[I.value ?? ""]: !0,
 		[O.value.description ?? ""]: !0
 	}))), H = a(() => n(D.value?.errorMessage, { id: `${M.value}-error` }, u({

package/dist/Components/FormField/FilledFormField.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var x = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ f({
+], S = ["id"], C = ["id", "aria-hidden"], w = /*@__PURE__*/ f({
 	__name: "FilledFormField",
 	props: { api: {} },
 	setup(f) {
@@ -28,7 +28,7 @@ var x = [
 			!f.api.invalidated.value && b(t)(f.api.slots, "description", f.api.merged.value.description) ? (g(), l("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [(g(), s(v(b(i)(f.api.slots, "description", f.api.merged.value.description))))], 16, S)) : c("", !0),
 			f.api.merged.value.hideErrorMessage ? c("", !0) : (g(), l("p", m({ key: 2 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
-				"aria-hidden": f.api.showErrorMessageContent.value ? void 0 : !0
+				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
 			}), [f.api.showErrorMessageContent.value ? (g(), s(v(b(i)(f.api.slots, "errorMessage", f.api.merged.value.errorMessage)), { key: 0 })) : c("", !0)], 16, C))
 		], 16, x));
 	}

package/dist/Components/FormField/FormField.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ import i from "./UnderlinedFormField.js";
 import { computed as a, createBlock as o, defineComponent as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, useSlots as d, withCtx as f } from "vue";
 import { get as p } from "es-toolkit/compat";
 //#region src/Components/FormField/FormField.vue?vue&type=script&setup=true&lang.ts
-var m = /* @__PURE__ */ s({
+var m = /*@__PURE__*/ s({
 	inheritAttrs: !1,
 	__name: "FormField",
 	props: { field: {} },

package/dist/Components/FormField/FormFieldLabel.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n, resolveNamed
 import i from "../Label/Label.js";
 import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, defineComponent as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
 //#region src/Components/FormField/FormFieldLabel.vue?vue&type=script&setup=true&lang.ts
-var v = /* @__PURE__ */ u({
+var v = /*@__PURE__*/ u({
 	__name: "FormFieldLabel",
 	props: { api: {} },
 	setup(u) {

package/dist/Components/FormField/NotchedFormField.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var x = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], S = { class: "flex min-h-0 w-full flex-1 items-stretch gap-x-2" }, C = ["id"], w = ["id", "aria-hidden"], T = /* @__PURE__ */ f({
+], S = { class: "flex min-h-0 w-full flex-1 items-stretch gap-x-2" }, C = ["id"], w = ["id", "aria-hidden"], T = /*@__PURE__*/ f({
 	__name: "NotchedFormField",
 	props: { api: {} },
 	setup(f) {
@@ -27,7 +27,7 @@ var x = [
 			!f.api.invalidated.value && b(t)(f.api.slots, "description", f.api.merged.value.description) ? (g(), l("p", m({ key: 0 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [(g(), s(v(b(i)(f.api.slots, "description", f.api.merged.value.description))))], 16, C)) : c("", !0),
 			f.api.merged.value.hideErrorMessage ? c("", !0) : (g(), l("p", m({ key: 1 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
-				"aria-hidden": f.api.showErrorMessageContent.value ? void 0 : !0
+				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
 			}), [f.api.showErrorMessageContent.value ? (g(), s(v(b(i)(f.api.slots, "errorMessage", f.api.merged.value.errorMessage)), { key: 0 })) : c("", !0)], 16, w))
 		], 16, x));
 	}

package/dist/Components/FormField/OutlinedFormField.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var x = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ f({
+], S = ["id"], C = ["id", "aria-hidden"], w = /*@__PURE__*/ f({
 	__name: "OutlinedFormField",
 	props: { api: {} },
 	setup(f) {
@@ -28,7 +28,7 @@ var x = [
 			!f.api.invalidated.value && b(t)(f.api.slots, "description", f.api.merged.value.description) ? (g(), l("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [(g(), s(v(b(i)(f.api.slots, "description", f.api.merged.value.description))))], 16, S)) : c("", !0),
 			f.api.merged.value.hideErrorMessage ? c("", !0) : (g(), l("p", m({ key: 2 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
-				"aria-hidden": f.api.showErrorMessageContent.value ? void 0 : !0
+				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
 			}), [f.api.showErrorMessageContent.value ? (g(), s(v(b(i)(f.api.slots, "errorMessage", f.api.merged.value.errorMessage)), { key: 0 })) : c("", !0)], 16, C))
 		], 16, x));
 	}

package/dist/Components/FormField/StackedFormField.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var x = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ f({
+], S = ["id"], C = ["id", "aria-hidden"], w = /*@__PURE__*/ f({
 	__name: "StackedFormField",
 	props: { api: {} },
 	setup(f) {
@@ -31,7 +31,7 @@ var x = [
 			!f.api.invalidated.value && b(t)(f.api.slots, "description", f.api.merged.value.description) ? (g(), l("p", m({ key: 0 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [(g(), s(v(b(i)(f.api.slots, "description", f.api.merged.value.description))))], 16, S)) : c("", !0),
 			f.api.merged.value.hideErrorMessage ? c("", !0) : (g(), l("p", m({ key: 1 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
-				"aria-hidden": f.api.showErrorMessageContent.value ? void 0 : !0
+				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
 			}), [f.api.showErrorMessageContent.value ? (g(), s(v(b(i)(f.api.slots, "errorMessage", f.api.merged.value.errorMessage)), { key: 0 })) : c("", !0)], 16, C))
 		], 16, x));
 	}

package/dist/Components/FormField/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var x = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ f({
+], S = ["id"], C = ["id", "aria-hidden"], w = /*@__PURE__*/ f({
 	__name: "UnderlinedFormField",
 	props: { api: {} },
 	setup(f) {
@@ -28,7 +28,7 @@ var x = [
 			!f.api.invalidated.value && b(t)(f.api.slots, "description", f.api.merged.value.description) ? (g(), l("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [(g(), s(v(b(i)(f.api.slots, "description", f.api.merged.value.description))))], 16, S)) : c("", !0),
 			f.api.merged.value.hideErrorMessage ? c("", !0) : (g(), l("p", m({ key: 2 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
-				"aria-hidden": f.api.showErrorMessageContent.value ? void 0 : !0
+				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
 			}), [f.api.showErrorMessageContent.value ? (g(), s(v(b(i)(f.api.slots, "errorMessage", f.api.merged.value.errorMessage)), { key: 0 })) : c("", !0)], 16, C))
 		], 16, x));
 	}

package/dist/Components/FormField/composables/useFormField.d.ts

@@ -7,7 +7,7 @@ export type FormFieldOptions = {
     /**
      * Public registry key that owns FormField chrome defaults/tokens.
      */
-    componentName?: "Select" | "Textarea" | "TextField" | "NumberField" | "Autocomplete" | "PasswordField";
+    componentName?: "Select" | "Textarea" | "DateField" | "TextField" | "TimeField" | "NumberField" | "Autocomplete" | "DateTimeField" | "PasswordField" | "DateRangeField" | "TimeRangeField" | "DateTimeRangeField";
     /**
      * Native control rendered by the field composable (`<input>` vs `<textarea>`).
      *

package/dist/Components/FormField/composables/useFormField.js

@@ -45,7 +45,19 @@ function x(x, S, C = {}) {
 	}), U = o(() => j.value && t(w, "errorMessage", E.value.errorMessage)), W = o(() => (I.value || L.value) && (t(w, "label", E.value.label) || t(w, "corner", E.value.corner))), G = o(() => t(w, "label", E.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
 		let e = [];
 		return !j.value && t(w, "description", E.value.description) && e.push(`${H.value}-description`), j.value && !E.value.hideErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
-	}), q = o(() => p(d(v, D.value?.tokens?.size), [E.value.size, P.value])), J = o(() => p(d(h, D.value?.tokens?.color), E.value.color ?? "primary")), Y = o(() => d(g, D.value?.tokens?.invalidated, E.value.customProps?.invalidated)), X = o(() => j.value ? Y.value : void 0), Z = o(() => p(d(_, D.value?.tokens?.rounded), E.value.rounded)), Q = o(() => p(d(y, D.value?.tokens?.variant), P.value)), te = o(() => {
+	}), q = o(() => {
+		let e = d(v, D.value?.tokens?.size);
+		return p(e, [E.value.size, P.value]);
+	}), J = o(() => {
+		let e = d(h, D.value?.tokens?.color);
+		return p(e, E.value.color ?? "primary");
+	}), Y = o(() => d(g, D.value?.tokens?.invalidated, E.value.customProps?.invalidated)), X = o(() => j.value ? Y.value : void 0), Z = o(() => {
+		let e = d(_, D.value?.tokens?.rounded);
+		return p(e, E.value.rounded);
+	}), Q = o(() => {
+		let e = d(y, D.value?.tokens?.variant);
+		return p(e, P.value);
+	}), te = o(() => {
 		let e = j.value ? Y.value : J.value;
 		return R.value ? e?.underlined : e?.input;
 	}), ne = o(() => {
@@ -62,7 +74,7 @@ function x(x, S, C = {}) {
 		});
 	}), ie = o(() => r(O.value?.end, {}, u({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
-		"text-gray-500": !j.value,
+		"text-dark-500": !j.value,
 		[Z.value?.end ?? ""]: !R.value && !L.value,
 		[J.value?.end ?? ""]: !j.value,
 		[X.value?.adornment ?? ""]: j.value,
@@ -95,7 +107,7 @@ function x(x, S, C = {}) {
 		"flex-1 min-w-0 min-h-0 bg-transparent border-0 shadow-none": !0,
 		"h-full": !z.value && !L.value,
 		"max-h-none": z.value,
-		"text-gray-900 dark:text-gray-100 placeholder:text-gray-400": !0,
+		"text-dark-900 dark:text-dark-100 placeholder:text-dark-400": !0,
 		"outline-none ring-0 focus:outline-none focus:ring-0": !0,
 		"disabled:cursor-not-allowed": !0,
 		[q.value?.input ?? ""]: !z.value,
@@ -116,13 +128,13 @@ function x(x, S, C = {}) {
 		}
 	})), ce = o(() => r(O.value?.start, {}, u({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
-		"text-gray-400": !j.value,
+		"text-dark-400": !j.value,
 		[Z.value?.start ?? ""]: !R.value && !L.value,
 		[J.value?.start ?? ""]: !j.value,
 		[X.value?.adornment ?? ""]: j.value,
 		[A.value.start ?? ""]: !0
 	}))), le = o(() => r(O.value?.corner, {}, u({
-		"text-gray-500 dark:text-gray-400": !I.value,
+		"text-dark-500 dark:text-dark-400": !I.value,
 		[q.value?.text ?? ""]: !0,
 		[Q.value?.corner ?? ""]: I.value,
 		[A.value.corner ?? ""]: !0
@@ -180,7 +192,7 @@ function x(x, S, C = {}) {
 			"group/field relative flex flex-row items-stretch overflow-hidden": L.value,
 			"group/field relative flex justify-start gap-x-2 items-stretch": !L.value,
 			"transition-all ease-in-out duration-150 outline-none": !0,
-			"bg-gray-100 dark:bg-gray-800": M.value && !j.value,
+			"bg-dark-100 dark:bg-dark-800": M.value && !j.value,
 			[q.value?.container ?? ""]: !z.value,
 			[q.value?.containerTextareaLikeInput ?? ""]: B.value,
 			[q.value?.containerTextarea ?? ""]: z.value && !B.value,
@@ -203,7 +215,7 @@ function x(x, S, C = {}) {
 		fieldLabelProps: se,
 		ariaDescribedBy: K,
 		descriptionBind: o(() => r(O.value?.description, {}, u({
-			"mt-2 text-gray-500 dark:text-gray-400": !0,
+			"mt-2 text-dark-500 dark:text-dark-400": !0,
 			[q.value?.text ?? ""]: !0,
 			[A.value.description ?? ""]: !0
 		}))),

package/dist/Components/Icon/Icon.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useIcon as e } from "./composables/useIcon.js";
 import { createBlock as t, createCommentVNode as n, defineComponent as r, mergeProps as i, normalizeProps as a, openBlock as o, resolveDynamicComponent as s, unref as c } from "vue";
 //#region src/Components/Icon/Icon.vue?vue&type=script&setup=true&lang.ts
-var l = /* @__PURE__ */ r({
+var l = /*@__PURE__*/ r({
 	inheritAttrs: !1,
 	__name: "Icon",
 	props: {

package/dist/Components/Icon/composables/useIcon.js

@@ -17,7 +17,10 @@ function f(f, p) {
 		libDefaults: p,
 		componentName: "Icon",
 		props: () => h.value.componentProps
-	}), v = e(), y = r(() => s(g.value.icon, v.value)), b = r(() => l(o(u, _.value?.tokens?.size), g.value.size));
+	}), v = e(), y = r(() => s(g.value.icon, v.value)), b = r(() => {
+		let e = o(u, _.value?.tokens?.size);
+		return l(e, g.value.size);
+	});
 	return {
 		merged: g,
 		rootBind: r(() => t({}, h.value.inheritedAttrs, a({ [b.value ?? ""]: !0 }))),

package/dist/Components/Label/Label.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { resolveNamedSlot as e } from "../../Utils/slotOrProp.js";
 import { useLabel as t } from "./composables/useLabel.js";
 import { createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, normalizeProps as c, openBlock as l, resolveDynamicComponent as u, unref as d, useSlots as f } from "vue";
 //#region src/Components/Label/Label.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ a({
+var p = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "Label",
 	props: {

package/dist/Components/Label/composables/useLabel.js

@@ -24,7 +24,10 @@ function f(f, p) {
 	}), v = n({
 		entry: _,
 		props: () => h.value.componentProps
-	}), y = r(() => c(o(u, _.value?.tokens?.size), g.value.size)), b = r(() => o(l, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, a({
+	}), y = r(() => {
+		let e = o(u, _.value?.tokens?.size);
+		return c(e, g.value.size);
+	}), b = r(() => o(l, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, a({
 		[b.value.required ?? ""]: !0,
 		[v.value.required ?? ""]: !0
 	})));
@@ -32,7 +35,7 @@ function f(f, p) {
 		merged: g,
 		rootBind: r(() => e({}, h.value.inheritedAttrs, a({
 			"inline-flex items-center gap-x-0.5 font-medium leading-none": !0,
-			"text-gray-700 dark:text-gray-300": !g.value.error,
+			"text-dark-700 dark:text-dark-300": !g.value.error,
 			[b.value.label ?? ""]: g.value.error,
 			[y.value ?? ""]: !0,
 			[v.value.root ?? ""]: !0

package/dist/Components/Link/Link.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ var f = [
 	"href",
 	"target",
 	"aria-disabled"
-], p = /* @__PURE__ */ s({
+], p = /*@__PURE__*/ s({
 	inheritAttrs: !1,
 	__name: "Link",
 	props: {

package/dist/Components/Link/composables/useLink.js

@@ -34,7 +34,16 @@ function m(m, h) {
 		if (y.value.external && !C.value) return "_blank";
 	}), D = r(() => {
 		if (y.value.external && !C.value) return "noopener noreferrer";
-	}), O = r(() => l(s(d, b.value?.tokens?.size), y.value.size)), k = r(() => l(s(u, b.value?.tokens?.color), y.value.color)), A = r(() => l(s(f, b.value?.tokens?.underline), y.value.underline));
+	}), O = r(() => {
+		let e = s(d, b.value?.tokens?.size);
+		return l(e, y.value.size);
+	}), k = r(() => {
+		let e = s(u, b.value?.tokens?.color);
+		return l(e, y.value.color);
+	}), A = r(() => {
+		let e = s(f, b.value?.tokens?.underline);
+		return l(e, y.value.underline);
+	});
 	return {
 		slots: _,
 		merged: y,

package/dist/Components/List/List.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { resolveNamedSlot as e } from "../../Utils/slotOrProp.js";
 import { useList as t } from "./composables/useList.js";
 import { computed as n, createBlock as r, defineComponent as i, guardReactiveProps as a, normalizeProps as o, openBlock as s, resolveDynamicComponent as c, unref as l, useSlots as u, withCtx as d } from "vue";
 //#region src/Components/List/List.vue?vue&type=script&setup=true&lang.ts
-var f = /* @__PURE__ */ i({
+var f = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "List",
 	props: {

package/dist/Components/List/composables/useList.js

@@ -24,12 +24,12 @@ function f(f) {
 	}), _ = i(() => h.value.customProps), v = n({
 		entry: g,
 		props: () => m.value.componentProps
-	});
-	a(r, i(() => ({ dense: h.value.dense === !0 })));
-	let y = i(() => u(m.value.inheritedAttrs, []));
+	}), y = i(() => ({ dense: h.value.dense === !0 }));
+	a(r, y);
+	let b = i(() => u(m.value.inheritedAttrs, []));
 	return {
 		merged: h,
-		rootBind: i(() => e(_.value?.root, y.value, s({
+		rootBind: i(() => e(_.value?.root, b.value, s({
 			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
 			[l(v.value, "root") ?? ""]: !0

package/dist/Components/ListItem/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import r from "../Icon/Icon.js";
 import { resolveListItemPrimary as i, useListItem as a } from "./composables/useListItem.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, resolveDynamicComponent as _, unref as v, useSlots as y, withCtx as b } from "vue";
 //#region src/Components/ListItem/ListItem.vue?vue&type=script&setup=true&lang.ts
-var x = /* @__PURE__ */ d({
+var x = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "ListItem",
 	props: {

package/dist/Components/ListSection/ListSection.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useListSection as e } from "./composables/useListSection.js";
 import { computed as t, createBlock as n, createElementBlock as r, createElementVNode as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, normalizeProps as c, openBlock as l, resolveDynamicComponent as u, unref as d, useSlots as f, withCtx as p } from "vue";
 //#region src/Components/ListSection/ListSection.vue?vue&type=script&setup=true&lang.ts
-var m = /* @__PURE__ */ a({
+var m = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "ListSection",
 	props: {
@@ -19,9 +19,9 @@ var m = /* @__PURE__ */ a({
 		title: {}
 	},
 	setup(a) {
-		let { label: m, merged: h, rootBind: g, titleBind: _ } = e(a, f()), v = t(() => h.value.as ?? "li");
-		return (e, t) => v.value === "div" ? (l(), r("div", c(s({ key: 0 }, d(_))), [(l(), n(u(d(m))))], 16)) : (l(), n(u(v.value), c(s({ key: 1 }, d(g))), {
-			default: p(() => [i("div", c(o(d(_))), [(l(), n(u(d(m))))], 16)]),
+		let m = f(), { label: h, merged: g, rootBind: _, titleBind: v } = e(a, m), y = t(() => g.value.as ?? "li");
+		return (e, t) => y.value === "div" ? (l(), r("div", c(s({ key: 0 }, d(v))), [(l(), n(u(d(h))))], 16)) : (l(), n(u(y.value), c(s({ key: 1 }, d(_))), {
+			default: p(() => [i("div", c(o(d(v))), [(l(), n(u(d(h))))], 16)]),
 			_: 1
 		}, 16));
 	}

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

@@ -8,23 +8,28 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (option: ListboxOption) => any;
+    cancel: () => any;
     "update:modelValue": (value: boolean) => any;
-    "registered-options-change": (options: ListboxOption[]) => any;
     "show-change": (show: boolean) => any;
+    apply: () => any;
+    "registered-options-change": (options: ListboxOption[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((option: ListboxOption) => any) | undefined;
+    onCancel?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    "onRegistered-options-change"?: ((options: ListboxOption[]) => any) | undefined;
     "onShow-change"?: ((show: boolean) => any) | undefined;
+    onApply?: (() => any) | undefined;
+    "onRegistered-options-change"?: ((options: ListboxOption[]) => any) | undefined;
 }>, {
     color: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxColor, import('./listbox.types').ListboxColorOverrides>;
     size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxSize, import('./listbox.types').ListboxSizeOverrides>;
     multiple: boolean;
-    disableAutoFocus: boolean;
+    loading: boolean;
     placement: import('@floating-ui/utils').Placement;
+    disableAutoFocus: boolean;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
-    loading: boolean;
+    overlay: import('@bridge-ui/core').FieldOverlayMode;
     showCheckmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;