@bridge-ui/vue 0.0.2 → 0.0.3

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

@@ -1,31 +1,37 @@
 import { hasSlotOrProp as e, resolveSlotOrProp as t } from "../../Utils/slotOrProp.js";
-import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, guardReactiveProps as c, mergeProps as l, normalizeProps as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, unref as m } from "vue";
+import n from "./FormControlLabel.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as d, normalizeProps as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, unref as g } from "vue";
 //#region src/Components/FormControl/FormControl.vue?vue&type=script&setup=true&lang.ts
-var h = [
+var _ = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], g = ["aria-hidden"], _ = /* @__PURE__ */ s({
+], v = ["aria-hidden"], y = /* @__PURE__ */ l({
 	inheritAttrs: !1,
 	__name: "FormControl",
 	props: { field: {} },
-	setup(s) {
-		let _ = s, v = n(() => _.field);
-		return (n, s) => (d(), a("div", l(v.value.rootBind.value, {
-			"data-invalid": v.value.invalidated.value || void 0,
-			"aria-disabled": v.value.isDisabled.value || void 0,
-			"aria-readonly": v.value.isReadonly.value || void 0
+	setup(l) {
+		let y = l, b = r(() => y.field);
+		return (r, l) => (p(), o("div", d(b.value.rootBind.value, {
+			"data-invalid": b.value.invalidated.value || void 0,
+			"aria-disabled": b.value.isDisabled.value || void 0,
+			"aria-readonly": b.value.isReadonly.value || void 0
 		}), [
-			o("div", u(c(v.value.rowBind.value)), [
-				m(e)(v.value.slots, "startLabel", v.value.merged.value.startLabel) ? (d(), a("label", u(l({ key: 0 }, v.value.startLabelBind.value)), [(d(), r(p(m(t)(v.value.slots, "startLabel", v.value.merged.value.startLabel))))], 16)) : i("", !0),
-				f(n.$slots, "default"),
-				m(e)(v.value.slots, "mainLabel", v.value.merged.value.mainLabel) ? (d(), a("label", u(l({ key: 1 }, v.value.mainLabelBind.value)), [(d(), r(p(m(t)(v.value.slots, "mainLabel", v.value.merged.value.mainLabel))))], 16)) : i("", !0),
-				m(e)(v.value.slots, "endLabel", v.value.merged.value.endLabel) ? (d(), a("label", u(l({ key: 2 }, v.value.endLabelBind.value)), [(d(), r(p(m(t)(v.value.slots, "endLabel", v.value.merged.value.endLabel))))], 16)) : i("", !0)
+			s("div", f(u(b.value.rowBind.value)), [
+				c(n, {
+					api: b.value,
+					name: "startLabel"
+				}, null, 8, ["api"]),
+				m(r.$slots, "default"),
+				c(n, {
+					api: b.value,
+					name: "endLabel"
+				}, null, 8, ["api"])
 			], 16),
-			!v.value.invalidated.value && m(e)(v.value.slots, "description", v.value.merged.value.description) ? (d(), a("p", u(l({ key: 0 }, v.value.descriptionBind.value)), [(d(), r(p(m(t)(v.value.slots, "description", v.value.merged.value.description))))], 16)) : i("", !0),
-			v.value.merged.value.withoutErrorMessage ? i("", !0) : (d(), a("p", l({ key: 1 }, v.value.errorMessageBind.value, { "aria-hidden": v.value.showErrorMessageContent.value ? void 0 : !0 }), [v.value.showErrorMessageContent.value ? (d(), r(p(m(t)(v.value.slots, "errorMessage", v.value.merged.value.errorMessage)), { key: 0 })) : i("", !0)], 16, g))
-		], 16, h));
+			!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.withoutErrorMessage ? 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))
+		], 16, _));
 	}
 });
 //#endregion
-export { _ as default };
+export { y as default };

package/dist/Components/FormControl/FormControlLabel.js

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

package/dist/Components/FormControl/FormControlLabel.vue.d.ts

@@ -0,0 +1,8 @@
+import { UseFormControlReturn } from './composables/useFormControl';
+type __VLS_Props = {
+    api: UseFormControlReturn;
+    name: "endLabel" | "startLabel";
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n, resolveNamedSlot as r } from "../../Utils/slotOrProp.js";
+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({
+	__name: "FormControlLabel",
+	props: {
+		api: {},
+		name: {}
+	},
+	setup(u) {
+		return (v, y) => g(t)(u.api.slots, u.name, u.api.merged.value[u.name]) ? (p(), o(g(i), f(d({ key: 0 }, u.api.fieldLabelProps.value[u.name])), {
+			default: _(() => [g(e)(u.api.slots, u.name) ? (p(), o(m(g(r)(u.api.slots, u.name)), { key: 0 })) : g(n)(u.api.merged.value[u.name]) ? (p(), c(a, { key: 1 }, [l(h(u.api.merged.value[u.name]), 1)], 64)) : s("", !0)]),
+			_: 1
+		}, 16)) : s("", !0);
+	}
+});
+//#endregion
+export { v as default };

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

@@ -1,7 +1,8 @@
 import { HTMLAttributes, MaybeRefOrGetter } from 'vue';
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
 import { FormControlOwnProps } from '../formControl.types';
-export declare const formControlBridgeKeys: readonly ["size", "error", "classes", "disabled", "endLabel", "readonly", "required", "controlId", "mainLabel", "startLabel", "customProps", "description", "errorMessage", "withoutErrorMessage"];
+import { LabelProps } from '../../Label/label.types';
+export declare const formControlBridgeKeys: readonly ["size", "error", "classes", "disabled", "endLabel", "readonly", "required", "controlId", "startLabel", "customProps", "description", "errorMessage", "withoutErrorMessage"];
 type FormControlLibDefaults = LibDefaultsShape<FormControlOwnProps, "size" | "error" | "withoutErrorMessage">;
 type FormControlMerged = MergeLibDefaults<FormControlOwnProps, FormControlLibDefaults>;
 export declare function useFormControl(props: MaybeRefOrGetter<Omit<FormControlOwnProps, "field">>, libDefaults: FormControlLibDefaults): {
@@ -10,7 +11,7 @@ export declare function useFormControl(props: MaybeRefOrGetter<Omit<FormControlO
     }>;
     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">, "size" | "classes" | "customProps" | "error" | "disabled" | "controlId" | "description" | "endLabel" | "errorMessage" | "mainLabel" | "readonly" | "required" | "startLabel" | "withoutErrorMessage">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, Partial<Omit<Omit<FormControlOwnProps, "field">, "size" | "classes" | "customProps" | "error" | "disabled" | "required" | "controlId" | "description" | "endLabel" | "errorMessage" | "readonly" | "startLabel" | "withoutErrorMessage">>>>;
     controlId: import('vue').ComputedRef<string>;
     isDisabled: import('vue').ComputedRef<boolean>;
     isReadonly: import('vue').ComputedRef<boolean>;
@@ -23,15 +24,10 @@ export declare function useFormControl(props: MaybeRefOrGetter<Omit<FormControlO
         "aria-invalid": true | undefined;
     }>;
     invalidated: import('vue').ComputedRef<boolean>;
-    endLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
-        for: string;
-    }>>;
-    mainLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
-        for: string;
-    }>>;
-    startLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
-        for: string;
-    }>>;
+    fieldLabelProps: import('vue').ComputedRef<{
+        endLabel: LabelProps;
+        startLabel: LabelProps;
+    }>;
     descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
         id: string;
     }>>;

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

@@ -1,12 +1,12 @@
 import { hasSlotOrProp as e } from "../../../Utils/slotOrProp.js";
-import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
-import { computed as i, toValue as a, useAttrs as o, useId as s, useSlots as c } from "vue";
-import { get as l, omit as u } from "es-toolkit/compat";
-import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core";
-import { invalidatedProps as m } from "@bridge-ui/core/Components/FormControl";
-import { sizeProps as h } from "@bridge-ui/core/Components/Label";
+import { mergeNestedComponentProps as t, mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { computed as a, toValue as o, useAttrs as s, useId as c, useSlots as l } from "vue";
+import { get as u, omit as d } from "es-toolkit/compat";
+import { cn as f, mergeBridgeUILayeredClasses as p, splitComponentProps as m } from "@bridge-ui/core";
+import { invalidatedProps as h } from "@bridge-ui/core/Tokens/FormControl";
+import { sizeProps as g } from "@bridge-ui/core/Tokens/Label";
 //#region src/Components/FormControl/composables/useFormControl.ts
-var g = [
+var _ = [
 	"size",
 	"error",
 	"classes",
@@ -15,96 +15,90 @@ var g = [
 	"readonly",
 	"required",
 	"controlId",
-	"mainLabel",
 	"startLabel",
 	"customProps",
 	"description",
 	"errorMessage",
 	"withoutErrorMessage"
 ];
-function _(_, v) {
-	let y = s(), b = c(), x = o(), S = i(() => p({
-		bridgeKeys: g,
+function v(v, y) {
+	let b = c(), x = l(), S = s(), C = a(() => m({
+		bridgeKeys: _,
 		props: {
-			...x,
-			...a(_)
+			...S,
+			...o(v)
 		}
-	})), { merged: C, entry: w } = n({
-		libDefaults: v,
+	})), { merged: w, entry: T } = r({
+		libDefaults: y,
 		componentName: "FormControl",
-		props: () => S.value.componentProps
-	}), T = i(() => C.value.customProps), E = r({
-		entry: w,
-		props: () => S.value.componentProps
-	}), D = i(() => C.value.error === !0), O = i(() => !!C.value.disabled), k = i(() => !!C.value.readonly), A = i(() => D.value), j = i(() => {
-		let e = S.value.inheritedAttrs.id;
-		return C.value.controlId ?? e ?? y;
-	}), M = i(() => !C.value.withoutErrorMessage), N = i(() => D.value && e(b, "errorMessage", C.value.errorMessage)), P = i(() => {
+		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.withoutErrorMessage), N = a(() => O.value && e(x, "errorMessage", w.value.errorMessage)), P = a(() => {
 		let t = [];
-		return !D.value && e(b, "description", C.value.description) && t.push(`${j.value}-description`), D.value && M.value && e(b, "errorMessage", C.value.errorMessage) && t.push(`${j.value}-error`), t.length > 0 ? t.join(" ") : void 0;
-	}), F = i(() => l(h, C.value.size ?? "md")), I = i(() => f(m, w.value?.customProps?.invalidated, C.value.customProps?.invalidated)), L = i(() => t(T.value?.root, u(S.value.inheritedAttrs, ["class"]), d({
+		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(() => u(g, w.value.size ?? "md")), I = a(() => p(h, T.value?.tokens?.invalidated, w.value.customProps?.invalidated)), L = a(() => n(E.value?.root, d(C.value.inheritedAttrs, ["class"]), f({
 		"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,
-		[x.class]: !!x.class
-	}))), R = i(() => t(T.value?.row, {}, d({
-		"flex items-center gap-x-2": !0,
-		[E.value.row ?? ""]: !0
-	}))), z = i(() => t(T.value?.startLabel, { for: j.value }, d({
-		"inline-flex cursor-pointer items-center gap-x-0.5 font-medium leading-none": !0,
-		[F.value ?? ""]: !0,
-		"text-gray-700 dark:text-gray-300": !A.value,
-		[I.value.label ?? ""]: A.value,
-		[E.value.startLabel ?? ""]: !0
-	}))), B = i(() => t(T.value?.mainLabel, { for: j.value }, d({
-		"inline-flex cursor-pointer items-center gap-x-0.5 font-medium leading-none": !0,
-		[F.value ?? ""]: !0,
-		"text-gray-700 dark:text-gray-300": !A.value,
-		[I.value.label ?? ""]: A.value,
-		[E.value.mainLabel ?? ""]: !0
-	}))), V = i(() => t(T.value?.endLabel, { for: j.value }, d({
-		"inline-flex cursor-pointer items-center gap-x-0.5 font-medium leading-none": !0,
-		[F.value ?? ""]: !0,
-		"text-gray-700 dark:text-gray-300": !A.value,
-		[I.value.label ?? ""]: A.value,
-		[E.value.endLabel ?? ""]: !0
-	}))), H = i(() => t(T.value?.description, { id: `${j.value}-description` }, d({
+		[D.value.root ?? ""]: !0,
+		[S.class]: !!S.class
+	}))), R = a(() => n(E.value?.row, {}, f({
+		"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,
+			classes: { root: f({
+				"cursor-pointer": !0,
+				[D.value[e] ?? ""]: !0
+			}) }
+		});
+		return {
+			endLabel: e("endLabel"),
+			startLabel: e("startLabel")
+		};
+	}), B = a(() => n(E.value?.description, { id: `${j.value}-description` }, f({
 		"mt-2 text-gray-500 dark:text-gray-400": !0,
 		[F.value ?? ""]: !0,
-		[E.value.description ?? ""]: !0
-	}))), U = i(() => t(T.value?.errorMessage, { id: `${j.value}-error` }, d({
+		[D.value.description ?? ""]: !0
+	}))), V = a(() => n(E.value?.errorMessage, { id: `${j.value}-error` }, f({
 		"mt-2": !0,
 		"min-h-[1lh]": M.value,
 		[I.value.errorMessage ?? ""]: !0,
 		[F.value ?? ""]: !0,
-		[E.value.errorMessage ?? ""]: !0
+		[D.value.errorMessage ?? ""]: !0
 	})));
 	return {
-		slots: b,
-		merged: C,
+		slots: x,
+		merged: w,
 		rowBind: R,
 		rootBind: L,
 		controlId: j,
-		isDisabled: O,
-		isReadonly: k,
-		controlBind: i(() => ({
+		isDisabled: k,
+		isReadonly: A,
+		controlBind: a(() => ({
 			id: j.value,
-			disabled: O.value,
-			readonly: k.value,
+			disabled: k.value,
+			readonly: A.value,
 			"aria-describedby": P.value,
-			required: C.value.required || void 0,
-			"aria-invalid": D.value || void 0
+			required: w.value.required || void 0,
+			"aria-invalid": O.value || void 0
 		})),
-		invalidated: D,
-		endLabelBind: V,
-		mainLabelBind: B,
-		startLabelBind: z,
-		descriptionBind: H,
-		errorMessageBind: U,
+		invalidated: O,
+		fieldLabelProps: z,
+		descriptionBind: B,
+		errorMessageBind: V,
 		showErrorMessageContent: N,
 		reservesErrorMessageSpace: M
 	};
 }
 //#endregion
-export { g as formControlBridgeKeys, _ as useFormControl };
+export { _ as formControlBridgeKeys, v as useFormControl };

package/dist/Components/FormControl/formControl.types.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { FormControlInvalidated, LabelSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
 import { UseFormControlReturn } from './composables/useFormControl';
+import { LabelProps } from '../Label/label.types';
 export interface FormControlSizeOverrides {}
 export interface FormControlClasses {
     /**
@@ -15,10 +16,6 @@ export interface FormControlClasses {
      * Classes merged onto the error message below the control row.
      */
     errorMessage?: string;
-    /**
-     * Classes merged onto the main inline label next to the control.
-     */
-    mainLabel?: string;
     /**
      * Classes merged onto the root wrapper.
      */
@@ -38,23 +35,21 @@ export interface FormControlCustomProps {
      */
     description?: HTMLAttributes;
     /**
-     * Props forwarded to the inline-end label element.
+     * Props forwarded to the inline-end `Label` (content stays owned by `FormControl`).
+     *
+     * @default undefined
      */
-    endLabel?: HTMLAttributes;
+    endLabel?: Partial<LabelProps>;
     /**
      * Props forwarded to the error message element.
      */
     errorMessage?: HTMLAttributes;
     /**
-     * Error-state label and message colors (`label`, `errorMessage`, `required`).
+     * Error-state message colors (`errorMessage`). Label colors come from `Label` when `error` is set.
      *
      * @default undefined
      */
     invalidated?: Partial<FormControlInvalidated>;
-    /**
-     * Props forwarded to the main inline label element.
-     */
-    mainLabel?: HTMLAttributes;
     /**
      * Props forwarded to the root wrapper.
      */
@@ -64,9 +59,11 @@ export interface FormControlCustomProps {
      */
     row?: HTMLAttributes;
     /**
-     * Props forwarded to the inline-start label element.
+     * Props forwarded to the inline-start `Label` (content stays owned by `FormControl`).
+     *
+     * @default undefined
      */
-    startLabel?: HTMLAttributes;
+    startLabel?: Partial<LabelProps>;
 }
 export interface FormControlOwnProps {
     /**
@@ -83,7 +80,7 @@ export interface FormControlOwnProps {
      */
     controlId?: string;
     /**
-     * Extra props for internal parts (`row`, `mainLabel`, `description`, …).
+     * Extra props for internal parts (`row`, `startLabel`, `endLabel`, …).
      *
      * @default undefined
      */
@@ -101,7 +98,7 @@ export interface FormControlOwnProps {
      */
     disabled?: boolean;
     /**
-     * Inline-end label text after the main label.
+     * Inline-end label text after the control (right in LTR, left in RTL).
      *
      * @default undefined
      */
@@ -125,12 +122,6 @@ export interface FormControlOwnProps {
      * @default undefined
      */
     field?: UseFormControlReturn;
-    /**
-     * Main label text next to the control.
-     *
-     * @default undefined
-     */
-    mainLabel?: string;
     /**
      * Whether the control is read-only.
      *
@@ -138,7 +129,8 @@ export interface FormControlOwnProps {
      */
     readonly?: boolean;
     /**
-     * Sets the native `required` attribute on the control.
+     * Sets the native `required` attribute on the control and shows a required
+     * asterisk on start/end labels.
      *
      * @default false
      */
@@ -151,13 +143,14 @@ export interface FormControlOwnProps {
      */
     size?: MergeProps<LabelSize, FormControlSizeOverrides>;
     /**
-     * Chrome slots (`mainLabel`, `description`, `errorMessage`, …) and the control.
+     * Chrome slots (`startLabel`, `endLabel`, `description`, `errorMessage`, …)
+     * and the control.
      *
      * @default undefined
      */
     slots?: FormControlSlots;
     /**
-     * Inline-start label text before the control.
+     * Inline-start label text before the control (left in LTR, right in RTL).
      *
      * @default undefined
      */
@@ -179,7 +172,7 @@ export interface FormControlSlots {
      */
     description?: Slot<undefined>;
     /**
-     * Inline-end label after the main label.
+     * Inline-end label after the control (right in LTR, left in RTL).
      */
     endLabel?: Slot<undefined>;
     /**
@@ -187,11 +180,7 @@ export interface FormControlSlots {
      */
     errorMessage?: Slot<undefined>;
     /**
-     * Main label next to the control.
-     */
-    mainLabel?: Slot<undefined>;
-    /**
-     * Inline-start label before the control.
+     * Inline-start label before the control (left in LTR, right in RTL).
      */
     startLabel?: Slot<undefined>;
 }

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

@@ -1,38 +1,36 @@
 import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n, resolveNamedSlot as r, resolveSlotOrProp as i } from "../../Utils/slotOrProp.js";
 import a from "../Icon/Icon.js";
-import { createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y } from "vue";
+import o from "./FormFieldLabel.js";
+import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b } from "vue";
 //#region src/Components/FormField/FilledFormField.vue?vue&type=script&setup=true&lang.ts
-var b = [
+var x = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], x = ["for"], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ d({
+], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ f({
 	__name: "FilledFormField",
 	props: { api: {} },
-	setup(d) {
-		return (w, T) => (h(), c("div", p(d.api.rootBind.value, {
-			"data-invalid": d.api.invalidated.value || void 0,
-			"aria-disabled": d.api.isDisabled.value || void 0,
-			"aria-readonly": d.api.isReadonly.value || void 0
+	setup(f) {
+		return (w, T) => (g(), l("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
 		}), [
-			y(t)(d.api.slots, "label", d.api.merged.value.label) || y(t)(d.api.slots, "corner", d.api.merged.value.corner) ? (h(), c("div", m(p({ key: 0 }, d.api.headerBind.value)), [y(t)(d.api.slots, "label", d.api.merged.value.label) ? (h(), c("label", p({
-				key: 0,
-				for: d.api.controlId.value
-			}, d.api.labelBind.value), [(h(), o(_(y(i)(d.api.slots, "label", d.api.merged.value.label)))), d.api.merged.value.required ? (h(), c("span", m(p({ key: 0 }, d.api.requiredBind.value)), " * ", 16)) : s("", !0)], 16, x)) : s("", !0), y(t)(d.api.slots, "corner", d.api.merged.value.corner) ? (h(), c("span", m(p({ key: 1 }, d.api.cornerBind.value)), [(h(), o(_(y(i)(d.api.slots, "corner", d.api.merged.value.corner))))], 16)) : s("", !0)], 16)) : s("", !0),
-			l("div", m(f(d.api.containerBind.value)), [
-				y(e)(d.api.slots, "start") ? (h(), c("div", m(p({ key: 0 }, d.api.startSlotBind.value)), [(h(), o(_(y(r)(d.api.slots, "start"))))], 16)) : y(n)(d.api.merged.value.start) ? (h(), c("div", m(p({ key: 1 }, d.api.startBind.value)), v(d.api.merged.value.start), 17)) : d.api.merged.value.startIcon ? (h(), c("div", m(p({ key: 2 }, d.api.startBind.value)), [u(y(a), p({ size: d.api.merged.value.size }, d.api.startIconBind.value, { icon: d.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0),
-				g(w.$slots, "default"),
-				y(e)(d.api.slots, "end") ? (h(), c("div", m(p({ key: 3 }, d.api.endSlotBind.value)), [(h(), o(_(y(r)(d.api.slots, "end"))))], 16)) : y(n)(d.api.merged.value.end) ? (h(), c("div", m(p({ key: 4 }, d.api.endBind.value)), v(d.api.merged.value.end), 17)) : d.api.invalidated.value && d.api.merged.value.withErrorIcon !== !1 ? (h(), c("div", m(p({ key: 5 }, d.api.endBind.value)), [u(y(a), p({
-					icon: d.api.errorIcon.value,
-					size: d.api.merged.value.size
-				}, d.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : d.api.merged.value.endIcon ? (h(), c("div", m(p({ key: 6 }, d.api.endBind.value)), [u(y(a), p({ size: d.api.merged.value.size }, d.api.endIconBind.value, { icon: d.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
+			b(t)(f.api.slots, "label", f.api.merged.value.label) || b(t)(f.api.slots, "corner", f.api.merged.value.corner) ? (g(), l("div", h(m({ key: 0 }, f.api.headerBind.value)), [d(o, { api: f.api }, null, 8, ["api"]), b(t)(f.api.slots, "corner", f.api.merged.value.corner) ? (g(), l("span", h(m({ key: 0 }, f.api.cornerBind.value)), [(g(), s(v(b(i)(f.api.slots, "corner", f.api.merged.value.corner))))], 16)) : c("", !0)], 16)) : c("", !0),
+			u("div", h(p(f.api.containerBind.value)), [
+				b(e)(f.api.slots, "start") ? (g(), l("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "start"))))], 16)) : b(n)(f.api.merged.value.start) ? (g(), l("div", h(m({ key: 1 }, f.api.startBind.value)), y(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), l("div", h(m({ key: 2 }, f.api.startBind.value)), [d(b(a), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : c("", !0),
+				_(w.$slots, "default"),
+				b(e)(f.api.slots, "end") ? (g(), l("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "end"))))], 16)) : b(n)(f.api.merged.value.end) ? (g(), l("div", h(m({ key: 4 }, f.api.endBind.value)), y(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.withErrorIcon !== !1 ? (g(), l("div", h(m({ key: 5 }, f.api.endBind.value)), [d(b(a), 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(), l("div", h(m({ key: 6 }, f.api.endBind.value)), [d(b(a), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : c("", !0)
 			], 16),
-			!d.api.invalidated.value && y(t)(d.api.slots, "description", d.api.merged.value.description) ? (h(), c("p", p({ key: 1 }, d.api.descriptionBind.value, { id: `${d.api.controlId.value}-description` }), [(h(), o(_(y(i)(d.api.slots, "description", d.api.merged.value.description))))], 16, S)) : s("", !0),
-			d.api.merged.value.withoutErrorMessage ? s("", !0) : (h(), c("p", p({ key: 2 }, d.api.errorBind.value, {
-				id: `${d.api.controlId.value}-error`,
-				"aria-hidden": d.api.showErrorMessageContent.value ? void 0 : !0
-			}), [d.api.showErrorMessageContent.value ? (h(), o(_(y(i)(d.api.slots, "errorMessage", d.api.merged.value.errorMessage)), { key: 0 })) : s("", !0)], 16, C))
-		], 16, b));
+			!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.withoutErrorMessage ? 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
+			}), [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));
 	}
 });
 //#endregion

package/dist/Components/FormField/FormFieldLabel.js

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

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

@@ -0,0 +1,7 @@
+import { UseFormFieldReturn } from './composables/useFormField';
+type __VLS_Props = {
+    api: UseFormFieldReturn;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,16 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n, resolveNamedSlot as r } from "../../Utils/slotOrProp.js";
+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({
+	__name: "FormFieldLabel",
+	props: { api: {} },
+	setup(u) {
+		return (v, y) => g(t)(u.api.slots, "label", u.api.merged.value.label) ? (p(), o(g(i), f(d({ key: 0 }, u.api.fieldLabelProps.value)), {
+			default: _(() => [g(e)(u.api.slots, "label") ? (p(), o(m(g(r)(u.api.slots, "label")), { key: 0 })) : g(n)(u.api.merged.value.label) ? (p(), c(a, { key: 1 }, [l(h(u.api.merged.value.label), 1)], 64)) : s("", !0)]),
+			_: 1
+		}, 16)) : s("", !0);
+	}
+});
+//#endregion
+export { v as default };