@bridge-ui/vue 0.6.0 → 0.8.0

package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts

@@ -436,11 +436,10 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             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" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<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>;
@@ -458,9 +457,12 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         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 useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         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" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, "class", {
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>, "class", {
         value: string;
         readonly: boolean;
         onFocus: (event: FocusEvent) => void;
@@ -703,7 +705,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
     modelValue: import('vue').ComputedRef<Date | null>;
     showFooter: import('vue').ComputedRef<boolean>;
     pickerClass: import('vue').ComputedRef<string | undefined>;
-    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "fill" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "editable" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "fill" | "classes" | "overlay" | "showFooter" | "customProps" | "editable" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "clearable" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "defaultView" | "disableTimes" | "maxTime" | "minTime">>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;

package/dist/Components/DateTimePicker/composables/useDateTimePicker.d.ts

@@ -9,7 +9,7 @@ type DateTimePickerMerged = MergeLibDefaults<DateTimePickerOwnProps, DateTimePic
  */
 export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePickerOwnProps>, libDefaults: DateTimePickerLibDefaults, emit: SetupContext<DateTimePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "defaultView" | "disableTimes" | "maxTime" | "minTime">>>>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     handleApply: () => void;

package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue_vue_type_script_setup_true_lang.js

@@ -63,6 +63,7 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showDescriptionOnError: { type: Boolean },
 		showErrorIcon: {
 			type: Boolean,
 			default: !0

package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts

@@ -437,11 +437,10 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
             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" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<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>;
@@ -459,9 +458,12 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
         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>;
     };
@@ -686,7 +688,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
         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" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, "class", {
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>, "class", {
         value: string;
         readonly: boolean;
         onFocus: (event: FocusEvent) => void;
@@ -705,7 +707,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
     showFooter: import('vue').ComputedRef<boolean>;
     orientation: import('vue').ComputedRef<import('@bridge-ui/core/Domain').RangePickerOrientation>;
     pickerClass: import('vue').ComputedRef<string | undefined>;
-    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeRangeFieldOwnProps & Record<string, unknown>, "fill" | "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "editable" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeRangeFieldOwnProps & Record<string, unknown>, "fill" | "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "editable" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "clearable" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "disableTimes" | "maxTime" | "minTime">>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;

package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts

@@ -9,7 +9,7 @@ type DateTimeRangePickerMerged = MergeLibDefaults<DateTimeRangePickerOwnProps, D
  */
 export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeRangePickerOwnProps>, libDefaults: DateTimeRangePickerLibDefaults, emit: SetupContext<DateTimeRangePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimeRangePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "disableTimes" | "maxTime" | "minTime">>>>;
     timeBind: import('vue').ComputedRef<string>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;

package/dist/Components/FormControl/composables/useFormControl.d.ts

@@ -11,8 +11,10 @@ type FormControlMerged = MergeLibDefaults<FormControlOwnProps, FormControlLibDef
 export type FormControlOptions = {
     /**
      * Public registry key that owns FormControl chrome defaults/tokens.
+     * Defaults to `FormControl`; Checkbox / Radio / Switch pass their own key
+     * so chrome cascades (`FormControl` → parent).
      */
-    componentName?: "Radio" | "Switch" | "Checkbox";
+    componentName?: "Radio" | "Switch" | "Checkbox" | "FormControl";
 };
 export declare function useFormControl(props: MaybeRefOrGetter<Omit<FormControlOwnProps, "field">>, libDefaults: FormControlLibDefaults, options?: FormControlOptions): {
     slots: Readonly<{

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

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

package/dist/Components/FormField/FilledFormField.vue.d.ts

@@ -2,21 +2,21 @@ import { UseFormFieldReturn } from './composables/useFormField';
 type __VLS_Props = {
     api: UseFormFieldReturn;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {}, __VLS_21: {}, __VLS_33: {}, __VLS_35: {};
+declare var __VLS_8: {}, __VLS_17: {}, __VLS_19: {}, __VLS_26: {}, __VLS_28: {}, __VLS_40: {}, __VLS_42: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_8) => any;
 } & {
-    corner?: (props: typeof __VLS_10) => any;
+    corner?: (props: typeof __VLS_17) => any;
 } & {
-    start?: (props: typeof __VLS_12) => any;
+    start?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    end?: (props: typeof __VLS_21) => any;
+    end?: (props: typeof __VLS_28) => any;
 } & {
-    description?: (props: typeof __VLS_33) => any;
+    description?: (props: typeof __VLS_40) => any;
 } & {
-    errorMessage?: (props: typeof __VLS_35) => any;
+    errorMessage?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,42 +1,47 @@
 import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
 import r from "../Icon/Icon.js";
-import i from "./FormFieldLabel.js";
-import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useSlots as b, withCtx as x } from "vue";
+import i from "./FormFieldCorner.js";
+import a from "./FormFieldLabel.js";
+import { Fragment as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, normalizeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
 //#region src/Components/FormField/FilledFormField.vue?vue&type=script&setup=true&lang.ts
-var S = [
+var C = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], C = ["id"], w = ["id", "aria-hidden"], T = /*@__PURE__*/ f({
+], w = ["id"], T = ["id", "aria-hidden"], E = /*@__PURE__*/ p({
 	__name: "FilledFormField",
 	props: { api: {} },
-	setup(f) {
-		let T = b();
-		return (b, E) => (g(), s("div", m(f.api.rootBind.value, {
-			"data-invalid": f.api.invalidated.value || void 0,
-			"aria-disabled": f.api.isDisabled.value || void 0,
-			"aria-readonly": f.api.isReadonly.value || void 0
+	setup(p) {
+		let E = x();
+		return (x, D) => (_(), c("div", h(p.api.rootBind.value, {
+			"data-invalid": p.api.invalidated.value || void 0,
+			"aria-disabled": p.api.isDisabled.value || void 0,
+			"aria-readonly": p.api.isReadonly.value || void 0
 		}), [
-			y(t)(y(T), "label", f.api.merged.value.label) || y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("div", h(m({ key: 0 }, f.api.headerBind.value)), [d(i, { api: f.api }, l({ _: 2 }, [y(e)(y(T), "label") ? {
+			b(t)(b(E), "label", p.api.merged.value.label) || b(t)(b(E), "corner", p.api.merged.value.corner) ? (_(), c("div", g(h({ key: 0 }, p.api.headerBind.value)), [f(a, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "label") ? {
 				name: "label",
-				fn: x(() => [_(b.$slots, "label")]),
+				fn: S(() => [v(x.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, f.api.cornerBind.value)), [y(e)(y(T), "corner") ? _(b.$slots, "corner", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.corner) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0),
-			c("div", h(p(f.api.containerBind.value)), [
-				y(e)(y(T), "start") ? (g(), s("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [_(b.$slots, "start")], 16)) : y(n)(f.api.merged.value.start) ? (g(), s("div", h(m({ key: 1 }, f.api.startBind.value)), v(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), s("div", h(m({ key: 2 }, f.api.startBind.value)), [d(y(r), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0),
-				_(b.$slots, "default"),
-				y(e)(y(T), "end") ? (g(), s("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : y(n)(f.api.merged.value.end) ? (g(), s("div", h(m({ key: 4 }, f.api.endBind.value)), v(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), s("div", h(m({ key: 5 }, f.api.endBind.value)), [d(y(r), m({
-					icon: f.api.errorIcon.value,
-					size: f.api.merged.value.size
-				}, f.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : f.api.merged.value.endIcon ? (g(), s("div", h(m({ key: 6 }, f.api.endBind.value)), [d(y(r), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
+			} : void 0]), 1032, ["api"]), f(i, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "corner") ? {
+				name: "corner",
+				fn: S(() => [v(x.$slots, "corner")]),
+				key: "0"
+			} : void 0]), 1032, ["api"])], 16)) : s("", !0),
+			l("div", g(m(p.api.containerBind.value)), [
+				b(e)(b(E), "start") ? (_(), c("div", g(h({ key: 0 }, p.api.startSlotBind.value)), [v(x.$slots, "start")], 16)) : b(n)(p.api.merged.value.start) ? (_(), c("div", g(h({ key: 1 }, p.api.startBind.value)), y(p.api.merged.value.start), 17)) : p.api.merged.value.startIcon ? (_(), c("div", g(h({ key: 2 }, p.api.startBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.startIconBind.value, { icon: p.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0),
+				v(x.$slots, "default"),
+				b(e)(b(E), "end") ? (_(), c("div", g(h({ key: 3 }, p.api.endSlotBind.value)), [v(x.$slots, "end")], 16)) : b(n)(p.api.merged.value.end) ? (_(), c("div", g(h({ key: 4 }, p.api.endBind.value)), y(p.api.merged.value.end), 17)) : p.api.invalidated.value && p.api.merged.value.showErrorIcon !== !1 ? (_(), c("div", g(h({ key: 5 }, p.api.endBind.value)), [f(b(r), h({
+					icon: p.api.errorIcon.value,
+					size: p.api.merged.value.size
+				}, p.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : p.api.merged.value.endIcon ? (_(), c("div", g(h({ key: 6 }, p.api.endBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.endIconBind.value, { icon: p.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
 			], 16),
-			!f.api.invalidated.value && y(t)(y(T), "description", f.api.merged.value.description) ? (g(), s("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(T), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.description) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.description), 1)], 64)) : o("", !0)], 16, C)) : o("", !0),
-			f.api.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 2 }, f.api.errorBind.value, {
-				id: `${f.api.controlId.value}-error`,
-				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
-			}), [f.api.showErrorMessageContent.value ? (g(), s(a, { key: 0 }, [y(e)(y(T), "errorMessage") ? _(b.$slots, "errorMessage", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.errorMessage) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, w))
-		], 16, S));
+			p.api.showDescriptionContent.value ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
+			p.api.showErrorMessageRow.value ? (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
+				id: `${p.api.controlId.value}-error`,
+				"aria-hidden": !p.api.showErrorMessageContent.value || void 0
+			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T)) : s("", !0)
+		], 16, C));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/Components/FormField/FormFieldCorner.js

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

package/dist/Components/FormField/FormFieldCorner.vue.d.ts

@@ -0,0 +1,17 @@
+import { UseFormFieldReturn } from './composables/useFormField';
+type __VLS_Props = {
+    api: UseFormFieldReturn;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    corner?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/FormField/FormFieldCorner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,17 @@
+import { hasNamedSlot as e, hasSlotOrProp as t } from "../../Utils/slotOrProp.js";
+import n from "../Label/Label.js";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, defineComponent as c, mergeProps as l, normalizeProps as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, useSlots as h, withCtx as g } from "vue";
+//#region src/Components/FormField/FormFieldCorner.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ c({
+	__name: "FormFieldCorner",
+	props: { api: {} },
+	setup(c) {
+		let _ = h();
+		return (h, v) => m(t)(m(_), "corner", c.api.merged.value.corner) ? (d(), i(m(n), u(l({ key: 0 }, c.api.fieldCornerProps.value)), {
+			default: g(() => [m(e)(m(_), "corner") ? f(h.$slots, "corner", {}, void 0, void 0, 0) : (d(), o(r, { key: 1 }, [s(p(c.api.merged.value.corner), 1)], 64))]),
+			_: 3
+		}, 16)) : a("", !0);
+	}
+});
+//#endregion
+export { _ as default };

package/dist/Components/FormField/NotchedFormField.vue.d.ts

@@ -2,21 +2,21 @@ import { UseFormFieldReturn } from './composables/useFormField';
 type __VLS_Props = {
     api: UseFormFieldReturn;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {}, __VLS_21: {}, __VLS_33: {}, __VLS_35: {};
+declare var __VLS_8: {}, __VLS_17: {}, __VLS_19: {}, __VLS_26: {}, __VLS_28: {}, __VLS_40: {}, __VLS_42: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_8) => any;
 } & {
-    corner?: (props: typeof __VLS_10) => any;
+    corner?: (props: typeof __VLS_17) => any;
 } & {
-    start?: (props: typeof __VLS_12) => any;
+    start?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    end?: (props: typeof __VLS_21) => any;
+    end?: (props: typeof __VLS_28) => any;
 } & {
-    description?: (props: typeof __VLS_33) => any;
+    description?: (props: typeof __VLS_40) => any;
 } & {
-    errorMessage?: (props: typeof __VLS_35) => any;
+    errorMessage?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,5 +1,6 @@
-import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
-import r from "../Icon/Icon.js";
+import { hasNamedSlot as e, isPropPresent as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import r from "./FormFieldCorner.js";
 import i from "./FormFieldLabel.js";
 import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useSlots as b, withCtx as x } from "vue";
 //#region src/Components/FormField/NotchedFormField.vue?vue&type=script&setup=true&lang.ts
@@ -21,19 +22,23 @@ var S = [
 				name: "label",
 				fn: x(() => [_(b.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), y(t)(y(E), "corner", f.api.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, f.api.cornerBind.value)), [y(e)(y(E), "corner") ? _(b.$slots, "corner", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.corner) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0), c("div", C, [
-				y(e)(y(E), "start") ? (g(), s("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [_(b.$slots, "start")], 16)) : y(n)(f.api.merged.value.start) ? (g(), s("div", h(m({ key: 1 }, f.api.startBind.value)), v(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), s("div", h(m({ key: 2 }, f.api.startBind.value)), [d(y(r), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0),
+			} : void 0]), 1032, ["api"]), d(r, { api: f.api }, l({ _: 2 }, [y(e)(y(E), "corner") ? {
+				name: "corner",
+				fn: x(() => [_(b.$slots, "corner")]),
+				key: "0"
+			} : void 0]), 1032, ["api"])], 16)) : o("", !0), c("div", C, [
+				y(e)(y(E), "start") ? (g(), s("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [_(b.$slots, "start")], 16)) : y(t)(f.api.merged.value.start) ? (g(), s("div", h(m({ key: 1 }, f.api.startBind.value)), v(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), s("div", h(m({ key: 2 }, f.api.startBind.value)), [d(y(n), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0),
 				_(b.$slots, "default"),
-				y(e)(y(E), "end") ? (g(), s("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : y(n)(f.api.merged.value.end) ? (g(), s("div", h(m({ key: 4 }, f.api.endBind.value)), v(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), s("div", h(m({ key: 5 }, f.api.endBind.value)), [d(y(r), m({
+				y(e)(y(E), "end") ? (g(), s("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : y(t)(f.api.merged.value.end) ? (g(), s("div", h(m({ key: 4 }, f.api.endBind.value)), v(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), s("div", h(m({ key: 5 }, f.api.endBind.value)), [d(y(n), m({
 					icon: f.api.errorIcon.value,
 					size: f.api.merged.value.size
-				}, f.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : f.api.merged.value.endIcon ? (g(), s("div", h(m({ key: 6 }, f.api.endBind.value)), [d(y(r), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
+				}, f.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : f.api.merged.value.endIcon ? (g(), s("div", h(m({ key: 6 }, f.api.endBind.value)), [d(y(n), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
 			])], 16),
-			!f.api.invalidated.value && y(t)(y(E), "description", f.api.merged.value.description) ? (g(), s("p", m({ key: 0 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(E), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.description) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.description), 1)], 64)) : o("", !0)], 16, w)) : o("", !0),
-			f.api.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 1 }, f.api.errorBind.value, {
+			f.api.showDescriptionContent.value ? (g(), s("p", m({ key: 0 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(E), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(t)(f.api.merged.value.description) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.description), 1)], 64)) : o("", !0)], 16, w)) : o("", !0),
+			f.api.showErrorMessageRow.value ? (g(), s("p", m({ key: 1 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
 				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
-			}), [f.api.showErrorMessageContent.value ? (g(), s(a, { key: 0 }, [y(e)(y(E), "errorMessage") ? _(b.$slots, "errorMessage", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.errorMessage) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, T))
+			}), [f.api.showErrorMessageContent.value ? (g(), s(a, { key: 0 }, [y(e)(y(E), "errorMessage") ? _(b.$slots, "errorMessage", {}, void 0, void 0, 0) : y(t)(f.api.merged.value.errorMessage) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, T)) : o("", !0)
 		], 16, S));
 	}
 });

package/dist/Components/FormField/OutlinedFormField.vue.d.ts

@@ -2,21 +2,21 @@ import { UseFormFieldReturn } from './composables/useFormField';
 type __VLS_Props = {
     api: UseFormFieldReturn;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {}, __VLS_21: {}, __VLS_33: {}, __VLS_35: {};
+declare var __VLS_8: {}, __VLS_17: {}, __VLS_19: {}, __VLS_26: {}, __VLS_28: {}, __VLS_40: {}, __VLS_42: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_8) => any;
 } & {
-    corner?: (props: typeof __VLS_10) => any;
+    corner?: (props: typeof __VLS_17) => any;
 } & {
-    start?: (props: typeof __VLS_12) => any;
+    start?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    end?: (props: typeof __VLS_21) => any;
+    end?: (props: typeof __VLS_28) => any;
 } & {
-    description?: (props: typeof __VLS_33) => any;
+    description?: (props: typeof __VLS_40) => any;
 } & {
-    errorMessage?: (props: typeof __VLS_35) => any;
+    errorMessage?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;