@bridge-ui/vue 0.0.7 → 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.d.ts

@@ -5,13 +5,22 @@ import { LabelProps } from '../../Label/label.types';
 export declare const formControlBridgeKeys: readonly ["size", "error", "classes", "disabled", "endLabel", "readonly", "required", "controlId", "startLabel", "customProps", "description", "errorMessage", "hideErrorMessage"];
 type FormControlLibDefaults = LibDefaultsShape<FormControlOwnProps, "size" | "error" | "hideErrorMessage">;
 type FormControlMerged = MergeLibDefaults<FormControlOwnProps, FormControlLibDefaults>;
-export declare function useFormControl(props: MaybeRefOrGetter<Omit<FormControlOwnProps, "field">>, libDefaults: FormControlLibDefaults): {
+/**
+ * Options for {@link useFormControl}.
+ */
+export type FormControlOptions = {
+    /**
+     * Public registry key that owns FormControl chrome defaults/tokens.
+     */
+    componentName?: "Radio" | "Switch" | "Checkbox";
+};
+export declare function useFormControl(props: MaybeRefOrGetter<Omit<FormControlOwnProps, "field">>, libDefaults: FormControlLibDefaults, options?: FormControlOptions): {
     slots: Readonly<{
         [name: string]: import('vue').Slot<any> | undefined;
     }>;
     merged: import('vue').ComputedRef<FormControlMerged>;
     rowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, Partial<Omit<Omit<FormControlOwnProps, "field">, "error" | "size" | "classes" | "customProps" | "disabled" | "required" | "controlId" | "description" | "endLabel" | "errorMessage" | "hideErrorMessage" | "readonly" | "startLabel">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, Partial<Omit<Omit<FormControlOwnProps, "field">, "error" | "size" | "classes" | "customProps" | "disabled" | "required" | "description" | "errorMessage" | "controlId" | "hideErrorMessage" | "readonly" | "endLabel" | "startLabel">>>>;
     controlId: import('vue').ComputedRef<string>;
     isDisabled: import('vue').ComputedRef<boolean>;
     isReadonly: import('vue').ComputedRef<boolean>;

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

@@ -21,83 +21,87 @@ var _ = [
 	"errorMessage",
 	"hideErrorMessage"
 ];
-function v(v, y) {
-	let b = c(), x = l(), S = s(), C = a(() => f({
+function v(v, y, b = {}) {
+	let x = c(), S = l(), C = s(), w = a(() => f({
 		bridgeKeys: _,
 		props: {
-			...S,
+			...C,
 			...o(v)
 		}
-	})), { merged: w, entry: T } = r({
+	})), { merged: T, entry: E } = r({
 		libDefaults: y,
-		componentName: "FormControl",
-		props: () => C.value.componentProps
-	}), E = a(() => w.value.customProps), D = i({
-		entry: T,
-		props: () => C.value.componentProps
-	}), O = a(() => w.value.error === !0), k = a(() => !!w.value.disabled), A = a(() => !!w.value.readonly), j = a(() => {
-		let e = C.value.inheritedAttrs.id;
-		return w.value.controlId ?? e ?? b;
-	}), M = a(() => !w.value.hideErrorMessage), N = a(() => O.value && e(x, "errorMessage", w.value.errorMessage)), P = a(() => {
+		componentName: b.componentName,
+		props: () => w.value.componentProps
+	}), D = a(() => T.value.customProps), O = i({
+		entry: E,
+		props: () => w.value.componentProps
+	}), k = a(() => T.value.error === !0), A = a(() => !!T.value.disabled), j = a(() => !!T.value.readonly), M = a(() => {
+		let e = w.value.inheritedAttrs.id;
+		return T.value.controlId ?? e ?? x;
+	}), N = a(() => !T.value.hideErrorMessage), P = a(() => k.value && e(S, "errorMessage", T.value.errorMessage)), F = a(() => {
 		let t = [];
-		return !O.value && e(x, "description", w.value.description) && t.push(`${j.value}-description`), O.value && M.value && e(x, "errorMessage", w.value.errorMessage) && t.push(`${j.value}-error`), t.length > 0 ? t.join(" ") : void 0;
-	}), F = a(() => p(h, w.value.size ?? "md")), I = a(() => d(g, T.value?.tokens?.invalidated, w.value.customProps?.invalidated)), L = a(() => n(E.value?.root, m(C.value.inheritedAttrs, ["class"]), u({
+		return !k.value && e(S, "description", T.value.description) && t.push(`${M.value}-description`), k.value && N.value && e(S, "errorMessage", T.value.errorMessage) && t.push(`${M.value}-error`), t.length > 0 ? t.join(" ") : void 0;
+	}), I = a(() => p(h, T.value.size ?? "md")), L = a(() => d(g, p(E.value, [
+		"tokens",
+		"formControl",
+		"invalidated"
+	]), T.value.customProps?.invalidated)), R = a(() => n(D.value?.root, m(w.value.inheritedAttrs, ["class"]), u({
 		"group/form-control relative w-full": !0,
 		"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60 aria-disabled:cursor-not-allowed": !0,
 		"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-		[D.value.root ?? ""]: !0,
-		[S.class]: !!S.class
-	}))), R = a(() => n(E.value?.row, {}, u({
+		[O.value.root ?? ""]: !0,
+		[C.class]: !!C.class
+	}))), z = a(() => n(D.value?.row, {}, u({
 		"flex flex-row items-center gap-x-2": !0,
-		[D.value.row ?? ""]: !0
-	}))), z = a(() => {
-		let e = (e) => t(E.value?.[e], {
-			for: j.value,
-			size: w.value.size,
-			error: O.value,
-			required: w.value.required,
+		[O.value.row ?? ""]: !0
+	}))), B = a(() => {
+		let e = (e) => t(D.value?.[e], {
+			for: M.value,
+			size: T.value.size,
+			error: k.value,
+			required: T.value.required,
 			classes: { root: u({
 				"cursor-pointer": !0,
-				[D.value[e] ?? ""]: !0
+				[O.value[e] ?? ""]: !0
 			}) }
 		});
 		return {
 			endLabel: e("endLabel"),
 			startLabel: e("startLabel")
 		};
-	}), B = a(() => n(E.value?.description, { id: `${j.value}-description` }, u({
-		"mt-2 text-gray-500 dark:text-gray-400": !0,
-		[F.value ?? ""]: !0,
-		[D.value.description ?? ""]: !0
-	}))), V = a(() => n(E.value?.errorMessage, { id: `${j.value}-error` }, u({
+	}), V = a(() => n(D.value?.description, { id: `${M.value}-description` }, u({
+		"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({
 		"mt-2": !0,
-		"min-h-[1lh]": M.value,
-		[I.value.errorMessage ?? ""]: !0,
-		[F.value ?? ""]: !0,
-		[D.value.errorMessage ?? ""]: !0
+		"min-h-[1lh]": N.value,
+		[L.value.errorMessage ?? ""]: !0,
+		[I.value ?? ""]: !0,
+		[O.value.errorMessage ?? ""]: !0
 	})));
 	return {
-		slots: x,
-		merged: w,
-		rowBind: R,
-		rootBind: L,
-		controlId: j,
-		isDisabled: k,
-		isReadonly: A,
+		slots: S,
+		merged: T,
+		rowBind: z,
+		rootBind: R,
+		controlId: M,
+		isDisabled: A,
+		isReadonly: j,
 		controlBind: a(() => ({
-			id: j.value,
-			disabled: k.value,
-			readonly: A.value,
-			"aria-describedby": P.value,
-			required: w.value.required || void 0,
-			"aria-invalid": O.value || void 0
+			id: M.value,
+			disabled: A.value,
+			readonly: j.value,
+			"aria-describedby": F.value,
+			required: T.value.required || void 0,
+			"aria-invalid": k.value || void 0
 		})),
-		invalidated: O,
-		fieldLabelProps: z,
-		descriptionBind: B,
-		errorMessageBind: V,
-		showErrorMessageContent: N,
-		reservesErrorMessageSpace: M
+		invalidated: k,
+		fieldLabelProps: B,
+		descriptionBind: V,
+		errorMessageBind: H,
+		showErrorMessageContent: P,
+		reservesErrorMessageSpace: N
 	};
 }
 //#endregion

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

@@ -1,4 +1,4 @@
 export { formControlBridgeKeys, useFormControl, } from './composables/useFormControl';
-export type { UseFormControlReturn } from './composables/useFormControl';
+export type { FormControlOptions, UseFormControlReturn, } from './composables/useFormControl';
 export type { FormControlClasses, FormControlCustomProps, FormControlOwnProps, FormControlProps, FormControlSizeOverrides, FormControlSlots, } from './formControl.types';
 export { default as FormControl } from './FormControl.vue';

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

@@ -4,6 +4,10 @@ import { FormFieldOwnProps, FormFieldSlots } from '../formField.types';
 import { LabelProps } from '../../Label/label.types';
 export type FormFieldReservedSlotName = Exclude<keyof FormFieldSlots, "default">;
 export type FormFieldOptions = {
+    /**
+     * Public registry key that owns FormField chrome defaults/tokens.
+     */
+    componentName?: "Select" | "Textarea" | "DateField" | "TextField" | "TimeField" | "NumberField" | "Autocomplete" | "DateTimeField" | "PasswordField" | "DateRangeField" | "TimeRangeField" | "DateTimeRangeField";
     /**
      * Native control rendered by the field composable (`<input>` vs `<textarea>`).
      *
@@ -443,7 +447,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>;
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
     isNotched: import('vue').ComputedRef<boolean>;
     isStacked: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;

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

@@ -34,7 +34,7 @@ function x(x, S, C = {}) {
 		bridgeKeys: b
 	})), { merged: E, entry: D } = i({
 		libDefaults: S,
-		componentName: "FormField",
+		componentName: C.componentName,
 		props: () => T.value.componentProps
 	}), O = o(() => E.value.customProps), k = o(() => C.control?.() ?? "input"), A = a({
 		entry: D,
@@ -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: {