@bridge-ui/vue 0.0.0

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

@@ -0,0 +1,198 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { FormControlInvalidated, LabelSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { UseFormControlReturn } from './composables/useFormControl';
+export interface FormControlSizeOverrides {}
+export interface FormControlClasses {
+    /**
+     * Classes merged onto the helper text below the control row.
+     */
+    description?: string;
+    /**
+     * Classes merged onto the inline-end label.
+     */
+    endLabel?: string;
+    /**
+     * 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.
+     */
+    root?: string;
+    /**
+     * Classes merged onto the control row.
+     */
+    row?: string;
+    /**
+     * Classes merged onto the inline-start label.
+     */
+    startLabel?: string;
+}
+export interface FormControlCustomProps {
+    /**
+     * Props forwarded to the helper text element.
+     */
+    description?: HTMLAttributes;
+    /**
+     * Props forwarded to the inline-end label element.
+     */
+    endLabel?: HTMLAttributes;
+    /**
+     * Props forwarded to the error message element.
+     */
+    errorMessage?: HTMLAttributes;
+    /**
+     * Error-state label and message colors (`label`, `errorMessage`, `required`).
+     *
+     * @default undefined
+     */
+    invalidated?: Partial<FormControlInvalidated>;
+    /**
+     * Props forwarded to the main inline label element.
+     */
+    mainLabel?: HTMLAttributes;
+    /**
+     * Props forwarded to the root wrapper.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the control row.
+     */
+    row?: HTMLAttributes;
+    /**
+     * Props forwarded to the inline-start label element.
+     */
+    startLabel?: HTMLAttributes;
+}
+export interface FormControlOwnProps {
+    /**
+     * Classes for labels, description, error, and layout chrome.
+     *
+     * @default undefined
+     */
+    classes?: FormControlClasses;
+    /**
+     * Associates labels and helper text with a form control. When omitted, an id
+     * is generated automatically.
+     *
+     * @default undefined
+     */
+    controlId?: string;
+    /**
+     * Extra props for internal parts (`row`, `mainLabel`, `description`, …).
+     *
+     * @default undefined
+     */
+    customProps?: FormControlCustomProps;
+    /**
+     * Helper text below the control row (hidden when invalid).
+     *
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Whether the control is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Inline-end label text after the main label.
+     *
+     * @default undefined
+     */
+    endLabel?: string;
+    /**
+     * When `true`, applies invalid styling on labels and hides description.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Error message below the control row.
+     *
+     * @default undefined
+     */
+    errorMessage?: string;
+    /**
+     * Pre-composed form control API from a parent composable. Used by
+     * `<FormControl :field="…" />`; not set on Checkbox, Radio, or Switch.
+     *
+     * @default undefined
+     */
+    field?: UseFormControlReturn;
+    /**
+     * Main label text next to the control.
+     *
+     * @default undefined
+     */
+    mainLabel?: string;
+    /**
+     * Whether the control is read-only.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Sets the native `required` attribute on the control.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Typography scale for labels, description, and error text (aligned with
+     * `FormField` / `Label`).
+     *
+     * @default "md"
+     */
+    size?: MergeProps<LabelSize, FormControlSizeOverrides>;
+    /**
+     * Chrome slots (`mainLabel`, `description`, `errorMessage`, …) and the control.
+     *
+     * @default undefined
+     */
+    slots?: FormControlSlots;
+    /**
+     * Inline-start label text before the control.
+     *
+     * @default undefined
+     */
+    startLabel?: string;
+    /**
+     * When `true`, does not reserve space below the row for error messages.
+     *
+     * @default false
+     */
+    withoutErrorMessage?: boolean;
+}
+export interface FormControlSlots {
+    /**
+     * The form control (checkbox, radio, switch, …).
+     */
+    default?: Slot;
+    /**
+     * Helper text below the control row (hidden when invalid).
+     */
+    description?: Slot;
+    /**
+     * Inline-end label after the main label.
+     */
+    endLabel?: Slot;
+    /**
+     * Custom error message content.
+     */
+    errorMessage?: Slot;
+    /**
+     * Main label next to the control.
+     */
+    mainLabel?: Slot;
+    /**
+     * Inline-start label before the control.
+     */
+    startLabel?: Slot;
+}
+export type FormControlProps = MergeHtmlProps<FormControlOwnProps, HTMLAttributes>;

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

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

package/dist/Components/FormControl/index.js

@@ -0,0 +1,3 @@
+import { formControlBridgeKeys as e, useFormControl as t } from "./composables/useFormControl.js";
+import n from "./FormControl.js";
+export { n as FormControl, e as formControlBridgeKeys, t as useFormControl };

package/dist/Components/FormField/FilledFormField.js

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

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

@@ -0,0 +1,17 @@
+import { UseFormFieldReturn } from './composables/useFormField';
+type __VLS_Props = {
+    api: UseFormFieldReturn;
+};
+declare var __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => 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/FilledFormField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+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";
+//#region src/Components/FormField/FilledFormField.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-invalid",
+	"aria-disabled",
+	"aria-readonly"
+], x = ["for"], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ d({
+	__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
+		}), [
+			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)
+			], 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));
+	}
+});
+//#endregion
+export { w as default };

package/dist/Components/FormField/FormField.js

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

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

@@ -0,0 +1,15 @@
+import { UseFormFieldReturn } from './composables/useFormField';
+import { FormFieldSlots } from './formField.types';
+type __VLS_Slots = FormFieldSlots;
+type __VLS_Props = {
+    field: UseFormFieldReturn;
+};
+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/FormField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import e from "./FilledFormField.js";
+import t from "./NotchedFormField.js";
+import n from "./OutlinedFormField.js";
+import r from "./StackedFormField.js";
+import i from "./UnderlinedFormField.js";
+import { computed as a, createBlock as o, defineComponent as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, useSlots as d, withCtx as f } from "vue";
+import { get as p } from "es-toolkit/compat";
+//#region src/Components/FormField/FormField.vue?vue&type=script&setup=true&lang.ts
+var m = /* @__PURE__ */ s({
+	inheritAttrs: !1,
+	__name: "FormField",
+	props: { field: {} },
+	setup(s) {
+		let m = s, h = d(), g = a(() => ({
+			...m.field,
+			slots: {
+				...m.field.slots,
+				...h
+			}
+		})), _ = {
+			filled: e,
+			notched: t,
+			stacked: r,
+			outline: n,
+			underlined: i
+		}, v = a(() => {
+			let e = g.value.variantKey.value;
+			return p(_, e, n);
+		});
+		return (e, t) => (c(), o(u(v.value), { api: g.value }, {
+			default: f(() => [l(e.$slots, "default")]),
+			_: 3
+		}, 8, ["api"]));
+	}
+});
+//#endregion
+export { m as default };

package/dist/Components/FormField/NotchedFormField.js

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

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

@@ -0,0 +1,17 @@
+import { UseFormFieldReturn } from './composables/useFormField';
+type __VLS_Props = {
+    api: UseFormFieldReturn;
+};
+declare var __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => 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/NotchedFormField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+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";
+//#region src/Components/FormField/NotchedFormField.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-invalid",
+	"aria-disabled",
+	"aria-readonly"
+], x = ["for"], S = { class: "flex min-h-0 w-full flex-1 items-stretch gap-x-2" }, C = ["id"], w = ["id", "aria-hidden"], T = /* @__PURE__ */ d({
+	__name: "NotchedFormField",
+	props: { api: {} },
+	setup(d) {
+		return (T, E) => (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
+		}), [
+			l("div", m(f(d.api.containerBind.value)), [d.api.hasInsetLabelRow.value ? (h(), c("div", m(p({ key: 0 }, d.api.insetLabelRowBind.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", S, [
+				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(T.$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)
+			])], 16),
+			!d.api.invalidated.value && y(t)(d.api.slots, "description", d.api.merged.value.description) ? (h(), c("p", p({ key: 0 }, d.api.descriptionBind.value, { id: `${d.api.controlId.value}-description` }), [(h(), o(_(y(i)(d.api.slots, "description", d.api.merged.value.description))))], 16, C)) : s("", !0),
+			d.api.merged.value.withoutErrorMessage ? s("", !0) : (h(), c("p", p({ key: 1 }, 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, w))
+		], 16, b));
+	}
+});
+//#endregion
+export { T as default };

package/dist/Components/FormField/OutlinedFormField.js

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

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

@@ -0,0 +1,17 @@
+import { UseFormFieldReturn } from './composables/useFormField';
+type __VLS_Props = {
+    api: UseFormFieldReturn;
+};
+declare var __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => 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/OutlinedFormField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+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";
+//#region src/Components/FormField/OutlinedFormField.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-invalid",
+	"aria-disabled",
+	"aria-readonly"
+], x = ["for"], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ d({
+	__name: "OutlinedFormField",
+	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
+		}), [
+			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)
+			], 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));
+	}
+});
+//#endregion
+export { w as default };

package/dist/Components/FormField/StackedFormField.js

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

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

@@ -0,0 +1,17 @@
+import { UseFormFieldReturn } from './composables/useFormField';
+type __VLS_Props = {
+    api: UseFormFieldReturn;
+};
+declare var __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => 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/StackedFormField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,42 @@
+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";
+//#region src/Components/FormField/StackedFormField.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-invalid",
+	"aria-disabled",
+	"aria-readonly"
+], x = ["for"], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ d({
+	__name: "StackedFormField",
+	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
+		}), [
+			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)) : s("", !0),
+				l("div", m(f(d.api.stackedBodyBind.value)), [d.api.hasInsetLabelRow.value ? (h(), c("div", m(p({ key: 0 }, d.api.insetLabelRowBind.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.stackedInputRowBind.value)), [
+					y(n)(d.api.merged.value.start) ? (h(), c("div", m(p({ key: 0 }, d.api.startBind.value)), v(d.api.merged.value.start), 17)) : d.api.merged.value.startIcon ? (h(), c("div", m(p({ key: 1 }, 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(n)(d.api.merged.value.end) ? (h(), c("div", m(p({ key: 2 }, 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: 3 }, 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: 4 }, 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)
+				], 16)], 16),
+				y(e)(d.api.slots, "end") ? (h(), c("div", m(p({ key: 1 }, d.api.endSlotBind.value)), [(h(), o(_(y(r)(d.api.slots, "end"))))], 16)) : s("", !0)
+			], 16),
+			!d.api.invalidated.value && y(t)(d.api.slots, "description", d.api.merged.value.description) ? (h(), c("p", p({ key: 0 }, 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: 1 }, 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));
+	}
+});
+//#endregion
+export { w as default };

package/dist/Components/FormField/UnderlinedFormField.js

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

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

@@ -0,0 +1,17 @@
+import { UseFormFieldReturn } from './composables/useFormField';
+type __VLS_Props = {
+    api: UseFormFieldReturn;
+};
+declare var __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => 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/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+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";
+//#region src/Components/FormField/UnderlinedFormField.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-invalid",
+	"aria-disabled",
+	"aria-readonly"
+], x = ["for"], S = ["id"], C = ["id", "aria-hidden"], w = /* @__PURE__ */ d({
+	__name: "UnderlinedFormField",
+	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
+		}), [
+			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)
+			], 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));
+	}
+});
+//#endregion
+export { w as default };