@bridge-ui/vue 0.6.0 → 0.8.0

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

@@ -1,11 +1,11 @@
 import { hasNamedSlot as e, hasSlotOrProp as t } from "../../../Utils/slotOrProp.js";
-import { mergeNestedComponentProps as n, mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
-import { computed as o, toValue as s, useId as c, useSlots as l } from "vue";
-import { get as u, omit as d } from "es-toolkit/compat";
-import { formFieldColorProps as f, formFieldRoundedProps as p, formFieldSizeProps as m, formFieldVariantProps as h } from "@bridge-ui/core/Tokens";
-import { cn as g, getColorToken as _, mergeBridgeUILayeredClasses as v, splitComponentProps as y } from "@bridge-ui/core/Utils";
+import { mergeNestedComponentProps as n, mergePartBind as r, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { computed as a, toValue as o, useId as s, useSlots as c } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { formFieldColorProps as d, formFieldRoundedProps as f, formFieldSizeProps as p, formFieldVariantProps as m } from "@bridge-ui/core/Tokens";
+import { cn as h, getColorToken as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
 //#region src/Components/FormField/composables/useFormField.ts
-var b = [
+var y = [
 	"end",
 	"size",
 	"color",
@@ -26,210 +26,220 @@ var b = [
 	"description",
 	"errorMessage",
 	"showErrorIcon",
-	"hideErrorMessage"
+	"hideErrorMessage",
+	"showDescriptionOnError"
 ];
-function x(x, ee, S = {}) {
-	let C = c(), w = l(), T = o(() => y({
-		props: s(x),
-		bridgeKeys: b
-	})), { merged: E, entry: D } = i({
-		libDefaults: ee,
-		componentName: S.componentName,
-		props: () => T.value.componentProps
-	}), O = o(() => E.value.customProps), k = o(() => S.control?.() ?? "input"), A = a({
+function b(b, x, S = {}) {
+	let te = s(), C = c(), w = a(() => v({
+		props: o(b),
+		bridgeKeys: y
+	})), T = S.componentName ?? "FormField", { merged: E, entry: D, chromeEntry: O } = ee({
+		libDefaults: x,
+		componentName: T,
+		props: () => w.value.componentProps
+	}), k = a(() => E.value.customProps), A = a(() => S.control?.() ?? "input"), j = i({
 		entry: D,
-		props: () => T.value.componentProps
-	}), j = o(() => E.value.error === !0), M = o(() => !!E.value.disabled), N = o(() => !!E.value.readonly), P = o(() => E.value.variant ?? "outline"), F = o(() => E.value.errorIcon ?? "alert"), I = o(() => P.value === "notched"), L = o(() => P.value === "stacked"), R = o(() => P.value === "underlined"), z = o(() => k.value === "textarea"), B = o(() => z.value && !!S.likeInput?.()), V = o(() => !E.value.hideErrorMessage), H = o(() => {
-		let e = T.value.inheritedAttrs.id;
-		return E.value.controlId ?? e ?? 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(() => {
+		chromeEntry: O,
+		props: () => w.value.componentProps
+	}), M = a(() => E.value.error === !0), N = a(() => !!E.value.disabled), P = a(() => !!E.value.readonly), F = a(() => E.value.variant ?? "outline"), ne = a(() => E.value.errorIcon ?? "alert"), I = a(() => F.value === "notched"), L = a(() => F.value === "stacked"), R = a(() => F.value === "underlined"), z = a(() => A.value === "textarea"), B = a(() => z.value && !!S.likeInput?.()), V = a(() => !E.value.hideErrorMessage && !t(C, "description", E.value.description)), H = a(() => {
+		let e = w.value.inheritedAttrs.id;
+		return E.value.controlId ?? e ?? te;
+	}), U = a(() => M.value && !E.value.hideErrorMessage && t(C, "errorMessage", E.value.errorMessage)), W = a(() => t(C, "description", E.value.description) ? !U.value || E.value.showDescriptionOnError === !0 : !1), G = a(() => U.value || V.value), K = a(() => (I.value || L.value) && (t(C, "label", E.value.label) || t(C, "corner", E.value.corner))), q = a(() => t(C, "label", E.value.label) ? "justify-between items-end" : "justify-end"), J = a(() => {
 		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(() => {
-		let e = v(m, D.value?.tokens?.size);
-		return u(e, [E.value.size, P.value]);
-	}), J = o(() => {
-		let e = v(f, D.value?.tokens?.color);
-		return _({
+		return W.value && e.push(`${H.value}-description`), U.value && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+	}), Y = a(() => {
+		let e = _(p, l(O.value ?? D.value, ["tokens", "size"]));
+		return l(e, [E.value.size, F.value]);
+	}), X = a(() => {
+		let e = _(d, l(O.value ?? D.value, ["tokens", "color"]));
+		return g({
 			tokens: e,
 			color: E.value.color,
-			invalid: j.value
+			invalid: M.value
 		});
-	}), Y = o(() => {
-		let e = v(p, D.value?.tokens?.rounded);
-		return u(e, E.value.rounded);
-	}), X = o(() => {
-		let e = v(h, D.value?.tokens?.variant);
-		return u(e, P.value);
-	}), Z = o(() => R.value ? J.value?.underlined : J.value?.input), Q = o(() => {
-		if (L.value) return g({
-			[q.value?.insetTop ?? ""]: !0,
-			[q.value?.insetStart ?? ""]: !0,
-			[q.value?.insetEnd ?? ""]: !0
+	}), Z = a(() => {
+		let e = _(f, l(O.value ?? D.value, ["tokens", "rounded"]));
+		return l(e, E.value.rounded);
+	}), Q = a(() => {
+		let e = _(m, l(O.value ?? D.value, ["tokens", "variant"]));
+		return l(e, F.value);
+	}), re = a(() => R.value ? X.value?.underlined : X.value?.input), ie = a(() => {
+		if (L.value) return h({
+			[Y.value?.insetTop ?? ""]: !0,
+			[Y.value?.insetStart ?? ""]: !0,
+			[Y.value?.insetEnd ?? ""]: !0
 		});
-	}), te = o(() => {
-		let t = S.reservedSlots?.() ?? [], n = e(w, "end") || t.includes("end"), r = e(w, "start") || t.includes("start");
-		if (!L.value) return !r && !n ? q.value?.padding : g({
-			[q.value?.insetStart ?? ""]: !r,
-			[q.value?.insetEnd ?? ""]: !n
+	}), ae = a(() => {
+		let t = S.reservedSlots?.() ?? [], n = e(C, "end") || t.includes("end"), r = e(C, "start") || t.includes("start");
+		if (!L.value) return !r && !n ? Y.value?.padding : h({
+			[Y.value?.insetStart ?? ""]: !r,
+			[Y.value?.insetEnd ?? ""]: !n
 		});
-	}), ne = o(() => r(O.value?.end, {}, g({
+	}), oe = a(() => r(k.value?.end, {}, h({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-dark-500": !0,
-		[J.value?.end ?? ""]: !0,
-		[A.value.end ?? ""]: !0
-	}))), re = o(() => {
-		let e = T.value.inheritedAttrs;
-		return r(O.value?.root, {
-			class: g(e.class),
-			...d(e, ["class"])
-		}, g({
+		[X.value?.end ?? ""]: !0,
+		[j.value.end ?? ""]: !0
+	}))), se = a(() => {
+		let e = w.value.inheritedAttrs;
+		return r(k.value?.root, {
+			class: h(e.class),
+			...u(e, ["class"])
+		}, h({
 			"group w-full relative": !0,
 			"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60": !0,
 			"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-			[A.value.root ?? ""]: !0
+			[j.value.root ?? ""]: !0
 		}));
-	}), ie = o(() => r(O.value?.errorMessage, {}, g({
-		"mt-2": !0,
+	}), ce = a(() => r(k.value?.errorMessage, {}, h({
+		"mt-1": !0,
 		"min-h-[1lh]": V.value,
 		"text-error-600 dark:text-error-400": !0,
-		[q.value?.text ?? ""]: !0,
-		[A.value.errorMessage ?? ""]: !0
-	}))), ae = o(() => r({
-		...O.value?.input,
+		[Y.value?.text ?? ""]: !0,
+		[Y.value?.insetStart ?? ""]: !0,
+		[Y.value?.insetEnd ?? ""]: !0,
+		[j.value.errorMessage ?? ""]: !0
+	}))), le = a(() => r({
+		...k.value?.input,
 		id: H.value,
-		disabled: M.value,
-		readonly: N.value,
-		"aria-describedby": K.value,
-		"aria-invalid": j.value || void 0
-	}, d(T.value.inheritedAttrs, [
+		disabled: N.value,
+		readonly: P.value,
+		"aria-describedby": J.value,
+		"aria-invalid": M.value || void 0
+	}, u(w.value.inheritedAttrs, [
 		"class",
 		"modelValue",
 		"onUpdate:modelValue"
-	]), g({
+	]), h({
 		"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-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,
-		[q.value?.textarea ?? ""]: z.value,
-		[q.value?.textareaLikeInput ?? ""]: B.value,
-		[A.value.input ?? ""]: !0
-	}))), oe = o(() => n(O.value?.label, {
+		[Y.value?.input ?? ""]: !z.value,
+		[Y.value?.textarea ?? ""]: z.value,
+		[Y.value?.textareaLikeInput ?? ""]: B.value,
+		[j.value.input ?? ""]: !0
+	}))), ue = a(() => n(k.value?.label, {
 		for: H.value,
 		size: E.value.size,
-		error: j.value,
+		error: M.value,
 		required: E.value.required,
 		classes: {
-			required: A.value.required,
-			root: g({
-				[X.value?.label ?? ""]: I.value,
-				[A.value.label ?? ""]: !0
+			required: j.value.required,
+			root: h({
+				[Q.value?.label ?? ""]: I.value,
+				[j.value.label ?? ""]: !0
 			})
 		}
-	})), $ = o(() => r(O.value?.start, {}, g({
+	})), de = a(() => r(k.value?.start, {}, h({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-dark-400": !0,
-		[J.value?.start ?? ""]: !0,
-		[A.value.start ?? ""]: !0
-	}))), se = o(() => r(O.value?.corner, {}, g({
-		"text-dark-500 dark:text-dark-400": !I.value,
-		[q.value?.text ?? ""]: !0,
-		[X.value?.corner ?? ""]: I.value,
-		[A.value.corner ?? ""]: !0
-	}))), ce = o(() => {
-		let e = t(w, "label", E.value.label);
-		return r(O.value?.header, {}, g({
+		[X.value?.start ?? ""]: !0,
+		[j.value.start ?? ""]: !0
+	}))), fe = a(() => n(k.value?.corner, {
+		for: H.value,
+		size: E.value.size,
+		classes: { root: h({
+			[Q.value?.corner ?? ""]: I.value,
+			[j.value.corner ?? ""]: !0
+		}) }
+	})), pe = a(() => {
+		let e = t(C, "label", E.value.label);
+		return r(k.value?.header, {}, h({
 			flex: !0,
 			"w-full shrink-0": !0,
 			"justify-between": e,
 			"justify-end": !e,
 			"items-center": I.value,
 			"items-end": L.value,
-			[X.value?.labelRow ?? ""]: W.value,
-			[A.value.header ?? ""]: !0
+			[Q.value?.labelRow ?? ""]: K.value,
+			[j.value.header ?? ""]: !0
 		}));
-	}), le = o(() => r(O.value?.header, {}, g({
+	}), $ = a(() => r(k.value?.header, {}, h({
 		flex: !0,
 		"mb-1": !0,
-		[G.value]: !0,
-		[A.value.header ?? ""]: !0
-	}))), ue = o(() => r(O.value?.endIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), de = o(() => r(O.value?.end, {}, g({
+		[q.value]: !0,
+		[j.value.header ?? ""]: !0
+	}))), me = a(() => r(k.value?.endIcon, {}, h({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), he = a(() => r(k.value?.end, {}, h({
 		"group/end wrapper-end-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 		"self-stretch min-h-0 overflow-hidden py-0.5 pe-0.5": L.value,
 		"h-full min-h-0 overflow-hidden py-0.5 pe-0.5": !L.value,
-		[A.value.end ?? ""]: !0
-	}))), fe = o(() => r({}, {}, g({
+		[j.value.end ?? ""]: !0
+	}))), ge = a(() => r({}, {}, h({
 		"flex min-h-0 min-w-0 flex-1 flex-col": !0,
-		[Q.value ?? ""]: !0
-	}))), pe = o(() => r({}, {}, g({
+		[ie.value ?? ""]: !0
+	}))), _e = a(() => r({}, {}, h({
 		"flex w-full min-w-0 flex-1 items-stretch gap-x-2": !0,
-		[q.value?.controlRow ?? ""]: !0
+		[Y.value?.controlRow ?? ""]: !0
 	})));
 	return {
-		slots: w,
+		slots: C,
 		merged: E,
-		control: k,
-		endBind: ne,
-		rootBind: re,
+		control: A,
+		endBind: oe,
+		rootBind: se,
 		controlId: H,
-		errorBind: ie,
-		errorIcon: F,
-		inputBind: ae,
+		errorBind: ce,
+		errorIcon: ne,
+		inputBind: le,
 		isNotched: I,
 		isStacked: L,
-		startBind: $,
-		cornerBind: se,
-		headerBind: le,
-		isDisabled: M,
-		isReadonly: N,
-		variantKey: P,
-		endIconBind: ue,
-		endSlotBind: de,
-		invalidated: j,
-		containerBind: o(() => r(O.value?.container, {
-			"data-bridge-variant": P.value,
+		startBind: de,
+		headerBind: $,
+		isDisabled: N,
+		isReadonly: P,
+		variantKey: F,
+		endIconBind: me,
+		endSlotBind: he,
+		invalidated: M,
+		containerBind: a(() => r(k.value?.container, {
+			"data-bridge-variant": F.value,
 			"data-bridge-rounded": E.value.rounded ?? "md"
-		}, g({
+		}, h({
 			"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-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,
-			[X.value?.container ?? ""]: !0,
-			[Y.value ?? ""]: !R.value,
-			[te.value ?? ""]: !0,
-			[Z.value ?? ""]: !0,
+			"bg-dark-100 dark:bg-dark-800": N.value && !M.value,
+			[Y.value?.container ?? ""]: !z.value,
+			[Y.value?.containerTextareaLikeInput ?? ""]: B.value,
+			[Y.value?.containerTextarea ?? ""]: z.value && !B.value,
+			[Q.value?.container ?? ""]: !0,
+			[Z.value ?? ""]: !R.value,
+			[ae.value ?? ""]: !0,
+			[re.value ?? ""]: !0,
 			"rounded-none": R.value,
-			"bg-error-50 ring-error-500 dark:bg-error-700/10 dark:ring-error-600": j.value && !R.value,
-			"border-error-500 dark:border-error-600": j.value && R.value,
-			[A.value.container ?? ""]: !0
+			"bg-error-50 ring-error-500 dark:bg-error-700/10 dark:ring-error-600": M.value && !R.value,
+			"border-error-500 dark:border-error-600": M.value && R.value,
+			[j.value.container ?? ""]: !0
 		}))),
-		startIconBind: o(() => r(O.value?.startIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
-		startSlotBind: o(() => r(O.value?.start, {}, g({
+		startIconBind: a(() => r(k.value?.startIcon, {}, h({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
+		startSlotBind: a(() => r(k.value?.start, {}, h({
 			"group/start wrapper-start-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 			"self-stretch min-h-0 overflow-hidden py-0.5 ps-0.5": L.value,
 			"h-full min-h-0 overflow-hidden py-0.5 ps-0.5": !L.value,
-			[A.value.start ?? ""]: !0
+			[j.value.start ?? ""]: !0
 		}))),
-		fieldLabelProps: oe,
-		ariaDescribedBy: K,
-		descriptionBind: o(() => r(O.value?.description, {}, g({
-			"mt-2 text-dark-500 dark:text-dark-400": !0,
-			[q.value?.text ?? ""]: !0,
-			[A.value.description ?? ""]: !0
+		fieldLabelProps: ue,
+		ariaDescribedBy: J,
+		descriptionBind: a(() => r(k.value?.description, {}, h({
+			"mt-1 text-dark-500 dark:text-dark-400": !0,
+			[Y.value?.text ?? ""]: !0,
+			[Y.value?.insetStart ?? ""]: !0,
+			[Y.value?.insetEnd ?? ""]: !0,
+			[j.value.description ?? ""]: !0
 		}))),
-		stackedBodyBind: fe,
-		hasInsetLabelRow: W,
-		insetLabelRowBind: ce,
-		stackedInputRowBind: pe,
+		stackedBodyBind: ge,
+		fieldCornerProps: fe,
+		hasInsetLabelRow: K,
+		insetLabelRowBind: pe,
+		stackedInputRowBind: _e,
+		showErrorMessageRow: G,
+		showDescriptionContent: W,
 		showErrorMessageContent: U,
 		reservesErrorMessageSpace: V
 	};
 }
 //#endregion
-export { b as formFieldBridgeKeys, x as useFormField };
+export { y as formFieldBridgeKeys, b as useFormField };

package/dist/Components/FormField/formField.types.d.ts

@@ -61,9 +61,11 @@ export interface FormFieldCustomProps {
      */
     container?: HTMLAttributes;
     /**
-     * Props forwarded to the corner label element.
+     * Props forwarded to the corner `Label` (content stays owned by `FormField`).
+     *
+     * @default undefined
      */
-    corner?: HTMLAttributes;
+    corner?: Partial<LabelProps>;
     /**
      * Props forwarded to the helper text below the control.
      */
@@ -140,7 +142,8 @@ export interface FormFieldOwnProps {
      */
     customProps?: FormFieldCustomProps;
     /**
-     * Helper text below the control (hidden when the field is invalid).
+     * Helper text below the control. Hidden when `error` is true and an error
+     * message is shown, unless `showDescriptionOnError` is true.
      *
      * @default undefined
      */
@@ -164,7 +167,8 @@ export interface FormFieldOwnProps {
      */
     endIcon?: IconSource;
     /**
-     * When `true`, applies invalid styling on the label and hides description.
+     * When `true`, applies invalid styling on the label. Hides description when
+     * an error message is shown, unless `showDescriptionOnError` is true.
      *
      * @default false
      */
@@ -190,7 +194,8 @@ export interface FormFieldOwnProps {
      */
     field?: UseFormFieldReturn;
     /**
-     * When `true`, does not reserve space below the control for error messages.
+     * When `true`, does not reserve the error row. That row is also omitted
+     * while a description is shown.
      *
      * @default false
      */
@@ -219,6 +224,12 @@ export interface FormFieldOwnProps {
      * @default "md"
      */
     rounded?: MergeProps<FormFieldRounded, FormFieldRoundedOverrides>;
+    /**
+     * When `true`, keeps the description visible while the field is invalid.
+     *
+     * @default false
+     */
+    showDescriptionOnError?: boolean;
     /**
      * When `true` and the field is invalid, shows an error icon at the inline end
      * when no `endIcon` or `end` slot is present.
@@ -267,7 +278,8 @@ export interface FormFieldSlots {
      */
     default?: Slot<undefined>;
     /**
-     * Helper text below the control (hidden when the field is invalid).
+     * Helper text below the control. Hidden when the field is invalid and an
+     * error message is shown, unless `showDescriptionOnError` is true.
      */
     description?: Slot<undefined>;
     /**

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

@@ -26,10 +26,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     overlay: import('@bridge-ui/core/Domain').FieldOverlayMode;
     showFooter: boolean;
     multiple: boolean;
+    hideEmptyMessage: boolean;
     loading: boolean;
     placement: import('@floating-ui/utils').Placement;
     disableAutoFocus: boolean;
-    hideEmptyMessage: boolean;
     highlightedIndex: number;
     showCheckmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/Components/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -35,6 +35,7 @@ var M = /*@__PURE__*/ g({
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showDescriptionOnError: { type: Boolean },
 		showErrorIcon: { type: Boolean },
 		size: {},
 		slots: {},

package/dist/Components/NumberField/composables/useNumberField.d.ts

@@ -435,11 +435,10 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
@@ -457,9 +456,12 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
@@ -685,7 +687,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>, {
         min: number | undefined;
         max: number | undefined;
         type: string;

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

@@ -13,14 +13,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     onComplete?: ((value: string) => any) | undefined;
-}>, {
-    color: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').OtpFieldColor, import('./otpField.types').OtpFieldColorOverrides>;
-    type: import('@bridge-ui/core/Domain').OtpInputType;
-    size: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').BaseFieldSize, import('../BaseField').BaseFieldSizeOverrides>;
-    length: number;
-    rounded: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').OtpFieldRounded, import('./otpField.types').OtpFieldRoundedOverrides>;
-    variant: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').OtpFieldVariant, import('./otpField.types').OtpFieldVariantOverrides>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, 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;

package/dist/Components/OtpField/OtpField.vue_vue_type_script_setup_true_lang.js

@@ -16,15 +16,15 @@ var b = [
 	props: /*@__PURE__*/ d({
 		autoFocus: { type: Boolean },
 		classes: {},
-		color: { default: "primary" },
+		color: {},
 		customProps: {},
 		defaultValue: {},
-		length: { default: 6 },
+		length: {},
 		mask: { type: Boolean },
 		placeholder: {},
-		rounded: { default: "md" },
-		type: { default: "numeric" },
-		variant: { default: "outline" },
+		rounded: {},
+		type: {},
+		variant: {},
 		controlId: {},
 		corner: {},
 		description: {},
@@ -35,7 +35,8 @@ var b = [
 		label: {},
 		readonly: { type: Boolean },
 		required: { type: Boolean },
-		size: { default: "md" }
+		showDescriptionOnError: { type: Boolean },
+		size: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}

package/dist/Components/OtpField/composables/useOtpField.d.ts

@@ -6,7 +6,7 @@ export type UseOtpFieldOptions = {
     onChange?: (value: string) => void;
     onComplete?: (value: string) => void;
 };
-export declare const otpFieldBridgeKeys: readonly ["mask", "type", "color", "length", "rounded", "variant", "autoFocus", "placeholder", "defaultValue", "size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage"];
+export declare const otpFieldBridgeKeys: readonly ["mask", "type", "color", "length", "rounded", "variant", "autoFocus", "placeholder", "defaultValue", "size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage", "showDescriptionOnError"];
 type OtpFieldLibDefaults = LibDefaultsShape<OtpFieldOwnProps, "size" | "type" | "color" | "length" | "rounded" | "variant">;
 type OtpFieldMerged = MergeLibDefaults<OtpFieldOwnProps, OtpFieldLibDefaults>;
 /**
@@ -41,7 +41,6 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
         }>>;
         controlId: import('vue').ComputedRef<string>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
         sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').BaseFieldSizeItem | undefined>;
@@ -52,6 +51,9 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
     };
     inputBind: (index: number) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", {

package/dist/Components/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -51,25 +51,25 @@ var y = {
 		"update:modelValue"
 	], ["update:modelValue"]),
 	setup(c, { emit: u }) {
-		let S = u, C = c, w = v(c, "modelValue"), { entries: T, showPrev: E, showNext: D, rootBind: O, listBind: k, prevBind: A, nextBind: j, getItemBind: M, prevIconBind: N, nextIconBind: P, getEllipsisBind: F } = t(C, {
+		let S = u, C = c, w = v(c, "modelValue"), { entries: T, showPrev: E, showNext: D, rootBind: O, listBind: k, prevBind: A, nextBind: j, prevLabel: M, nextLabel: N, getItemBind: P, prevIconBind: F, nextIconBind: I, getEllipsisBind: L } = t(C, {
 			size: "md",
 			rounded: "md",
-			variant: "text",
+			color: "dark",
 			disabled: !1,
 			siblingCount: 1,
+			variant: "ghost",
 			mode: "numbered",
-			color: "primary",
 			boundaryCount: 1,
 			hideNextButton: !1,
 			hidePrevButton: !1
 		}, w, S);
 		return (t, c) => (p(), i("nav", f(l(_(O))), [a("ul", f(l(_(k))), [
-			_(E) ? (p(), i("li", y, [a("button", f(l(_(A))), [h(t.$slots, "prev", {}, () => [s(_(e), d({ icon: "chevronLeft" }, _(N)), null, 16)])], 16)])) : r("", !0),
+			_(E) ? (p(), i("li", y, [a("button", f(l(_(A))), [h(t.$slots, "prev", {}, () => [s(_(e), d({ icon: "chevronLeft" }, _(F)), null, 16), o(" " + g(_(M)), 1)])], 16)])) : r("", !0),
 			(p(!0), i(n, null, m(_(T), (e, r) => (p(), i(n, { key: `${e.type}-${r}` }, [e.type === "ellipsis" ? (p(), i("li", d({
 				key: 0,
 				ref_for: !0
-			}, _(F)(r)), [h(t.$slots, "ellipsis", {}, () => [c[0] ||= o("…", -1)])], 16)) : (p(), i("li", b, [a("button", d({ ref_for: !0 }, _(M)(e.page)), g(e.page), 17)]))], 64))), 128)),
-			_(D) ? (p(), i("li", x, [a("button", f(l(_(j))), [h(t.$slots, "next", {}, () => [s(_(e), d({ icon: "chevronRight" }, _(P)), null, 16)])], 16)])) : r("", !0)
+			}, _(L)(r)), [h(t.$slots, "ellipsis", {}, () => [c[0] ||= o("…", -1)])], 16)) : (p(), i("li", b, [a("button", d({ ref_for: !0 }, _(P)(e.page)), g(e.page), 17)]))], 64))), 128)),
+			_(D) ? (p(), i("li", x, [a("button", f(l(_(j))), [h(t.$slots, "next", {}, () => [o(g(_(N)) + " ", 1), s(_(e), d({ icon: "chevronRight" }, _(I)), null, 16)])], 16)])) : r("", !0)
 		], 16)], 16));
 	}
 });