@charpente-ui/vue 1.6.0 → 2.1.0

package/README.md

@@ -51,31 +51,48 @@ npm run dev
 ```vue
 <script setup>
     import { ref } from 'vue';
-    import { CInput, CButton, CLabel } from '@charpente-ui/vue';
+    import { CForm, CField, CLabel, CInput, CSupportingText, CButton } from '@charpente-ui/vue';
 
     const email = ref('');
+
+    function onSubmit() {
+        // Only called once the form passes native validation.
+    }
 </script>
 
 <template>
-    <div class="form-group">
-        <CLabel for="email-field">Email Address</CLabel>
+    <CForm validate @submit="onSubmit">
+        <CField class="form-group">
+            <CLabel>Email Address</CLabel>
+
+            <CInput v-model="email" type="email" placeholder="hello@world.com" required
+                    class="my-custom-input-style"/>
 
-        <CInput id="email-field" v-model="email" type="email" placeholder="hello@world.com"
-                class="my-custom-input-style"/>
+            <CSupportingText validation>We never share your email.</CSupportingText>
+        </CField>
 
-        <CButton @click="submit" class="btn-primary">
+        <CButton type="submit" class="btn-primary">
             Subscribe
         </CButton>
-    </div>
+    </CForm>
 </template>
 ```
 
+No `for`/`id` wiring, no validation library: the label, the hint and the browser-localized error messages are linked
+and accessible automatically — and every class lands on the native element, ready for your CSS.
+
 ## Component Reference
 
 1. **Form Inputs** **(CInput, CTextarea, CSelect)**
 
 These components are thin wrappers around native elements. They use `v-model` and automatically link with labels via
-`useId()`. Full attribute inheritance.
+`useId()`. Full attribute inheritance. `CInput` and `CTextarea` support the native `v-model` modifiers:
+
+```vue
+<CInput v-model.trim="name"/>
+<CInput v-model.number="age"/>
+<CInput v-model.lazy="query"/>
+```
 
 2. **Selection Logic** _(CCheckbox, CRadio, CSelect)_
 
@@ -133,6 +150,12 @@ individual inputs:
 <CRadioGroup v-model="selected" name="my-group">...</CRadioGroup>
 ```
 
+> [!NOTE]
+> Standalone `CRadio` and `CCheckbox` accept any `value` (strings, numbers, booleans, objects — `v-model` compares by
+> reference, as in native Vue). Inside a group, the group `v-model` is typed `string | number`
+> (`(string | number)[]` for checkboxes): stick to those value types in grouped mode, as TypeScript cannot enforce it
+> on the `value` prop without dropping standalone object support.
+
 4. **Polymorphic Elements** _(CButton)_
 
 The button can change its HTML tag while keeping its behavior.
@@ -142,6 +165,89 @@ The button can change its HTML tag while keeping its behavior.
 <CButton as="RouterLink" to="/dashboard">Dashboard</CButton>
 ```
 
+When rendering a native `<button>`, `CButton` defaults to `type="button"` (instead of the native `type="submit"`) to
+avoid accidental form submissions. Pass `type="submit"` explicitly for submit buttons.
+
+5. **Field Wrapper** _(CField)_
+
+`CField` links a label and an input automatically: it provides a shared auto-generated id that `CLabel` picks up as
+`for` and the wrapped input picks up as `id` — no manual wiring.
+
+```vue
+<CField>
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email"/>
+</CField>
+```
+
+`CSupportingText` renders a field's hint or error text inside a `CField`: the input automatically gets an
+`aria-describedby` pointing to it, and the attribute is removed when the text unmounts (e.g. behind a `v-if`).
+
+```vue
+<CField>
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email"/>
+    <CSupportingText v-if="error">{{ error }}</CSupportingText>
+</CField>
+```
+
+An explicit `aria-describedby` on the input always wins, and a standalone `CSupportingText` (outside a field)
+simply renders its content with an id. Likewise, an explicit `id` on the input or `for` on the label always wins
+over the field id.
+
+Passing `id` to `CField` itself names that pairing instead of the wrapper `<div>` — reusing it on both would put
+the same id on two different DOM elements:
+
+```vue
+<CField id="email-field">
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email"/>
+</CField>
+```
+
+Renders `<label for="email-field">` and `<input id="email-field">`; the `<div>` itself gets no `id`. Use `class`
+to target the wrapper.
+
+A `CField` wrapping a whole group is ignored by the items (a single id must not land on every input); wrap each
+item in its own `CField` instead:
+
+```vue
+<CRadioGroup v-model="selected">
+    <CField>
+        <CLabel>Option A</CLabel>
+        <CRadio value="a"/>
+    </CField>
+
+    <CField>
+        <CLabel>Option B</CLabel>
+        <CRadio value="b"/>
+    </CField>
+</CRadioGroup>
+```
+
+6. **Native Validation** _(CForm + CField + CSupportingText)_
+
+Browsers already validate forms (`required`, `type="email"`, `minlength`, `pattern`…) and localize their error
+messages for free. Charpente UI exposes that instead of reinventing it — opt in with the `validate` prop:
+
+```vue
+<CForm validate @submit="onSubmit">
+    <CField>
+        <CLabel>Email</CLabel>
+        <CInput v-model="email" type="email" required/>
+        <CSupportingText validation>We never share your email.</CSupportingText>
+    </CField>
+</CForm>
+```
+
+- `CForm validate` suppresses the native bubbles (`novalidate`), blocks `submit` until the form is valid, and
+  focuses the first invalid control.
+- Errors appear after the first submit attempt, then update live as the user fixes the value.
+- `CSupportingText validation` shows the browser's localized `validationMessage` while invalid, and falls back to
+  its slot content otherwise. The control also gets `aria-invalid` automatically.
+- Without `validate`, nothing changes — bring your own validation library if you need cross-field or async rules.
+  Native escapes still work: `formnovalidate` on a submit button skips validation for that button.
+
 ## Components
 
 | Name          | Core Logic                                                                       | Tag              | Status |
@@ -149,11 +255,54 @@ The button can change its HTML tag while keeping its behavior.
 | Button        | **Polymorphic:** Switches tags _(a, button, etc...)_ while keeping logic.        | `CButton`        | Ready  |
 | Checkbox      | **Smart Toggle:** Handles array state, booleans, and indeterminate natively.     | `CCheckbox`      | Ready  |
 | CheckboxGroup | **Group:** Shared v-model and name across checkboxes inside a fieldset.          | `CCheckboxGroup` | Ready  |
+| Field         | **Wrapper:** Auto-links a label and an input via a shared generated id.          | `CField`         | Ready  |
 | File          | **File Input:** Reactive file selection with `v-model` support.                  | `CFile`          | Ready  |
-| Form          | **Auto-Submit:** Integrated `preventDefault` and event handling.                 | `CForm`          | Ready  |
+| Form          | **Auto-Submit:** `preventDefault` handling and opt-in native validation.         | `CForm`          | Ready  |
 | Input         | **Auto-ID:** Auto-links to labels via `useId()` and full attributes inheritance. | `CInput`         | Ready  |
 | Label         | **Context-Aware:** Simple, accessible binding for any input.                     | `CLabel`         | Ready  |
 | Radio         | **Selection:** Minimalist wrapper for native radio input.                        | `CRadio`         | Ready  |
 | RadioGroup    | **Group:** Shared v-model and name across radios inside a fieldset.              | `CRadioGroup`    | Ready  |
 | Select        | **Native Wrapper:** Single and multiple selection support.                       | `CSelect`        | Ready  |
+| SupportingText | **Field Text:** Hint or error text wired to its input via `aria-describedby`.   | `CSupportingText` | Ready  |
 | Textarea      | **Flexible Binding:** Auto-ID and reactive model management.                     | `CTextarea`      | Ready  |
+
+## Wrapping Components
+
+When wrapping a Charpente UI component inside your own, you must forward `$attrs` so that native HTML attributes
+(`id`, `class`, `disabled`, etc.) reach the underlying element instead of landing on your wrapper's root node.
+
+```vue
+<script setup>
+import { CField, CLabel, CSelect, CSupportingText } from '@charpente-ui/vue';
+
+defineOptions({
+    inheritAttrs: false
+});
+
+defineProps({
+    label: String,
+    error: String
+});
+
+const model = defineModel();
+</script>
+
+<template>
+    <CField>
+        <CLabel>{{ label }}</CLabel>
+
+        <CSelect v-bind="$attrs" v-model="model">
+            <slot/>
+        </CSelect>
+
+        <CSupportingText v-if="error">{{ error }}</CSupportingText>
+    </CField>
+</template>
+```
+
+**Why this matters:** Without `inheritAttrs: false`, Vue applies fallthrough attributes to the wrapper's root element
+instead of the inner component. Adding `v-bind="$attrs"` on the Charpente component ensures attributes like `id`,
+`class`, `required`, or `disabled` pass all the way through to the native HTML element. And since `CField` works by
+provide/inject, the label, select and error stay linked across your wrapper's boundary — accessibility included.
+
+This pattern works the same way for all Charpente components (`CInput`, `CCheckbox`, `CRadio`, etc.).

package/dist/components/BaseButton.js

@@ -0,0 +1,5 @@
+import e from "./BaseButton.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseButton.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseButton.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,16 @@
+import { computed as e, createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, resolveDynamicComponent as o, useAttrs as s, withCtx as c } from "vue";
+//#region src/components/BaseButton.vue?vue&type=script&setup=true&lang.ts
+var l = /* @__PURE__ */ n({
+	inheritAttrs: !1,
+	__name: "BaseButton",
+	props: { as: { default: "button" } },
+	setup(n) {
+		let l = n, u = s(), d = e(() => typeof u.type == "string" ? u.type : l.as === "button" ? "button" : void 0);
+		return (e, s) => (i(), t(o(n.as), r(e.$attrs, { type: d.value }), {
+			default: c(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 16, ["type"]));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BaseCheckbox.js

@@ -0,0 +1,5 @@
+import e from "./BaseCheckbox.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseCheckbox.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseCheckbox.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,40 @@
+import { checkboxGroupKey as e } from "./internal/keys.js";
+import { useFieldControl as t } from "./internal/field.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useModel as f, useTemplateRef as p, vModelCheckbox as m, watchPostEffect as h, withDirectives as g } from "vue";
+//#region src/components/BaseCheckbox.vue?vue&type=script&setup=true&lang.ts
+var _ = [
+	"id",
+	"aria-describedby",
+	"aria-invalid",
+	"name",
+	"value"
+], v = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "BaseCheckbox",
+	props: /* @__PURE__ */ s({
+		value: {},
+		indeterminate: { type: Boolean }
+	}, {
+		modelValue: { type: [Boolean, Array] },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let s = i, v = f(i, "modelValue"), y = a(e, null), b = y ? y.model : v, x = d(), S = p("input"), { controlId: C, describedBy: w, ariaInvalid: T } = t(), E = n(() => typeof x.name == "string" ? x.name : y?.name.value);
+		return h(() => {
+			/* v8 ignore next 2 */
+			S.value && (S.value.indeterminate = !!s.indeterminate);
+		}), (e, t) => g((l(), r("input", c(e.$attrs, {
+			id: u(C),
+			ref: "input",
+			"onUpdate:modelValue": t[0] ||= (e) => o(b) ? b.value = e : null,
+			"aria-describedby": u(w),
+			"aria-invalid": u(T),
+			name: E.value,
+			type: "checkbox",
+			value: i.value
+		}), null, 16, _)), [[m, u(b)]]);
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/BaseCheckboxGroup.js

@@ -0,0 +1,5 @@
+import e from "./BaseCheckboxGroup.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseCheckboxGroup.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseCheckboxGroup.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,21 @@
+import { checkboxGroupKey as e, fieldKey as t } from "./internal/keys.js";
+import { computed as n, createElementBlock as r, defineComponent as i, guardReactiveProps as a, normalizeProps as o, openBlock as s, provide as c, renderSlot as l, useAttrs as u, useId as d, useModel as f } from "vue";
+//#region src/components/BaseCheckboxGroup.vue?vue&type=script&setup=true&lang.ts
+var p = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "BaseCheckboxGroup",
+	props: {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(i) {
+		let p = f(i, "modelValue"), m = u(), h = d();
+		return c(e, {
+			model: p,
+			name: n(() => typeof m.name == "string" ? m.name : h)
+		}), c(t, null), (e, t) => (s(), r("fieldset", o(a(e.$attrs)), [l(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BaseField.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BaseField.js

@@ -0,0 +1,5 @@
+import e from "./BaseField.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseField.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseField.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,31 @@
+import { fieldKey as e } from "./internal/keys.js";
+import { computed as t, createElementBlock as n, defineComponent as r, mergeProps as i, openBlock as a, provide as o, ref as s, renderSlot as c, useAttrs as l, useId as u } from "vue";
+//#region src/components/BaseField.vue?vue&type=script&setup=true&lang.ts
+var d = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "BaseField",
+	setup(r) {
+		let d = l(), f = u(), p = s(), m = s(""), h = s(!1), g = t(() => typeof d.id == "string" ? d.id : f), _ = t(() => {
+			let e = { ...d };
+			return delete e.id, e;
+		});
+		o(e, {
+			id: g,
+			supportingTextId: p,
+			validationMessage: m
+		});
+		function v(e) {
+			h.value = !0, m.value = e.target.validationMessage;
+		}
+		function y(e) {
+			h.value && (m.value = e.target.validationMessage);
+		}
+		return (e, t) => (a(), n("div", i(_.value, {
+			onInvalidCapture: v,
+			onInputCapture: y,
+			onChangeCapture: y
+		}), [c(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { d as default };

package/dist/components/BaseFile.js

@@ -0,0 +1,5 @@
+import e from "./BaseFile.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseFile.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseFile.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,34 @@
+import { useFieldControl as e } from "./internal/field.js";
+import { createElementBlock as t, defineComponent as n, mergeProps as r, openBlock as i, unref as a, useModel as o, useTemplateRef as s, watch as c } from "vue";
+//#region src/components/BaseFile.vue?vue&type=script&setup=true&lang.ts
+var l = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], u = /* @__PURE__ */ n({
+	inheritAttrs: !1,
+	__name: "BaseFile",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(n) {
+		let u = o(n, "modelValue"), d = s("input"), { controlId: f, describedBy: p, ariaInvalid: m } = e();
+		function h(e) {
+			u.value = e.target.files;
+		}
+		return c(u, (e) => {
+			!e && d.value && (d.value.value = "");
+		}), (e, n) => (i(), t("input", r(e.$attrs, {
+			id: a(f),
+			ref: "input",
+			"aria-describedby": a(p),
+			"aria-invalid": a(m),
+			type: "file",
+			onChange: h
+		}), null, 16, l));
+	}
+});
+//#endregion
+export { u as default };

package/dist/components/BaseForm.d.ts

@@ -1,3 +1,6 @@
+type __VLS_Props = {
+    validate?: boolean;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -7,11 +10,11 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     submit: (event: SubmitEvent) => any;
-}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: SubmitEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/BaseForm.js

@@ -0,0 +1,5 @@
+import e from "./BaseForm.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseForm.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseForm.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,35 @@
+import { computed as e, createElementBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, useAttrs as o, useId as s, withModifiers as c } from "vue";
+//#region src/components/BaseForm.vue?vue&type=script&setup=true&lang.ts
+var l = ["id", "novalidate"], u = /* @__PURE__ */ n({
+	inheritAttrs: !1,
+	__name: "BaseForm",
+	props: { validate: { type: Boolean } },
+	emits: ["submit"],
+	setup(n, { emit: u }) {
+		let d = n, f = o(), p = s(), m = u, h = e(() => typeof f.id == "string" ? f.id : p);
+		function g(e) {
+			let t = e.target;
+			if (d.validate && !t.checkValidity()) {
+				_(t);
+				return;
+			}
+			m("submit", e);
+		}
+		function _(e) {
+			for (let t of Array.from(e.elements)) {
+				let e = t;
+				if (e.willValidate && !e.validity.valid) {
+					e.focus();
+					break;
+				}
+			}
+		}
+		return (e, o) => (i(), t("form", r(e.$attrs, {
+			id: h.value,
+			novalidate: n.validate || void 0,
+			onSubmit: c(g, ["prevent"])
+		}), [a(e.$slots, "default")], 16, l));
+	}
+});
+//#endregion
+export { u as default };

package/dist/components/BaseInput.d.ts

@@ -1,5 +1,6 @@
 type __VLS_PublicProps = {
     modelValue?: string | number;
+    'modelModifiers'?: Partial<Record<'trim' | 'number' | 'lazy', true>>;
 };
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;

package/dist/components/BaseInput.js

@@ -0,0 +1,5 @@
+import e from "./BaseInput.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseInput.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseInput.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,42 @@
+import { useFieldControl as e } from "./internal/field.js";
+import { applyModelModifiers as t } from "./internal/modifiers.js";
+import { createElementBlock as n, defineComponent as r, isRef as i, mergeProps as a, openBlock as o, unref as s, useModel as c, vModelDynamic as l, withDirectives as u } from "vue";
+//#region src/components/BaseInput.vue?vue&type=script&setup=true&lang.ts
+var d = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], f = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], p = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "BaseInput",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(r) {
+		let [p, m] = c(r, "modelValue", { set: (e) => t(e, m) }), { controlId: h, describedBy: g, ariaInvalid: _ } = e();
+		return (e, t) => s(m).lazy ? u((o(), n("input", a({ key: 0 }, e.$attrs, {
+			id: s(h),
+			"onUpdate:modelValue": t[0] ||= (e) => i(p) ? p.value = e : null,
+			"aria-describedby": s(g),
+			"aria-invalid": s(_)
+		}), null, 16, d)), [[
+			l,
+			s(p),
+			void 0,
+			{ lazy: !0 }
+		]]) : u((o(), n("input", a({ key: 1 }, e.$attrs, {
+			id: s(h),
+			"onUpdate:modelValue": t[1] ||= (e) => i(p) ? p.value = e : null,
+			"aria-describedby": s(g),
+			"aria-invalid": s(_)
+		}), null, 16, f)), [[l, s(p)]]);
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BaseLabel.js

@@ -0,0 +1,5 @@
+import e from "./BaseLabel.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseLabel.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseLabel.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,14 @@
+import { fieldKey as e } from "./internal/keys.js";
+import { computed as t, createElementBlock as n, defineComponent as r, inject as i, mergeProps as a, openBlock as o, renderSlot as s } from "vue";
+//#region src/components/BaseLabel.vue?vue&type=script&setup=true&lang.ts
+var c = ["for"], l = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "BaseLabel",
+	props: { for: {} },
+	setup(r) {
+		let l = r, u = i(e, null), d = t(() => l.for ?? u?.id.value);
+		return (e, t) => (o(), n("label", a(e.$attrs, { for: d.value }), [s(e.$slots, "default")], 16, c));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BaseRadio.js

@@ -0,0 +1,5 @@
+import e from "./BaseRadio.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseRadio.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseRadio.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,33 @@
+import { radioGroupKey as e } from "./internal/keys.js";
+import { useFieldControl as t } from "./internal/field.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useModel as f, vModelRadio as p, withDirectives as m } from "vue";
+//#region src/components/BaseRadio.vue?vue&type=script&setup=true&lang.ts
+var h = [
+	"id",
+	"aria-describedby",
+	"aria-invalid",
+	"name",
+	"value"
+], g = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "BaseRadio",
+	props: /* @__PURE__ */ s({ value: {} }, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let s = f(i, "modelValue"), g = a(e, null), _ = g ? g.model : s, v = d(), { controlId: y, describedBy: b, ariaInvalid: x } = t(), S = n(() => typeof v.name == "string" ? v.name : g?.name.value);
+		return (e, t) => m((l(), r("input", c(e.$attrs, {
+			id: u(y),
+			"onUpdate:modelValue": t[0] ||= (e) => o(_) ? _.value = e : null,
+			"aria-describedby": u(b),
+			"aria-invalid": u(x),
+			name: S.value,
+			value: i.value,
+			type: "radio"
+		}), null, 16, h)), [[p, u(_)]]);
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BaseRadioGroup.js

@@ -0,0 +1,5 @@
+import e from "./BaseRadioGroup.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseRadioGroup.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseRadioGroup.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,21 @@
+import { fieldKey as e, radioGroupKey as t } from "./internal/keys.js";
+import { computed as n, createElementBlock as r, defineComponent as i, guardReactiveProps as a, normalizeProps as o, openBlock as s, provide as c, renderSlot as l, useAttrs as u, useId as d, useModel as f } from "vue";
+//#region src/components/BaseRadioGroup.vue?vue&type=script&setup=true&lang.ts
+var p = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "BaseRadioGroup",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(i) {
+		let p = f(i, "modelValue"), m = u(), h = d();
+		return c(t, {
+			model: p,
+			name: n(() => typeof m.name == "string" ? m.name : h)
+		}), c(e, null), (e, t) => (s(), r("fieldset", o(a(e.$attrs)), [l(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BaseSelect.js

@@ -0,0 +1,5 @@
+import e from "./BaseSelect.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseSelect.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseSelect.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,27 @@
+import { useFieldControl as e } from "./internal/field.js";
+import { createElementBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, unref as o, useModel as s, vModelSelect as c, withDirectives as l } from "vue";
+//#region src/components/BaseSelect.vue?vue&type=script&setup=true&lang.ts
+var u = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], d = /* @__PURE__ */ n({
+	inheritAttrs: !1,
+	__name: "BaseSelect",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(n) {
+		let d = s(n, "modelValue"), { controlId: f, describedBy: p, ariaInvalid: m } = e();
+		return (e, n) => l((i(), t("select", r(e.$attrs, {
+			id: o(f),
+			"onUpdate:modelValue": n[0] ||= (e) => d.value = e,
+			"aria-describedby": o(p),
+			"aria-invalid": o(m)
+		}), [a(e.$slots, "default")], 16, u)), [[c, d.value]]);
+	}
+});
+//#endregion
+export { d as default };

package/dist/components/BaseSupportingText.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    validation?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: 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: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BaseSupportingText.js

@@ -0,0 +1,5 @@
+import e from "./BaseSupportingText.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseSupportingText.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseSupportingText.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,18 @@
+import { fieldKey as e } from "./internal/keys.js";
+import { Fragment as t, computed as n, createElementBlock as r, createTextVNode as i, defineComponent as a, inject as o, mergeProps as s, onBeforeUnmount as c, openBlock as l, renderSlot as u, toDisplayString as d, useAttrs as f, useId as p, watchEffect as m } from "vue";
+//#region src/components/BaseSupportingText.vue?vue&type=script&setup=true&lang.ts
+var h = ["id"], g = /* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "BaseSupportingText",
+	props: { validation: { type: Boolean } },
+	setup(a) {
+		let g = a, _ = f(), v = p(), y = o(e, null), b = n(() => typeof _.id == "string" ? _.id : v), x = n(() => g.validation ? y?.validationMessage.value ?? "" : "");
+		return m(() => {
+			y && (y.supportingTextId.value = b.value);
+		}), c(() => {
+			y && (y.supportingTextId.value = void 0);
+		}), (e, n) => (l(), r("p", s(e.$attrs, { id: b.value }), [x.value ? (l(), r(t, { key: 0 }, [i(d(x.value), 1)], 64)) : u(e.$slots, "default", { key: 1 })], 16, h));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BaseTextarea.d.ts

@@ -1,5 +1,6 @@
 type __VLS_PublicProps = {
     modelValue?: string | number;
+    'modelModifiers'?: Partial<Record<'trim' | 'number' | 'lazy', true>>;
 };
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;

package/dist/components/BaseTextarea.js

@@ -0,0 +1,5 @@
+import e from "./BaseTextarea.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseTextarea.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseTextarea.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,42 @@
+import { useFieldControl as e } from "./internal/field.js";
+import { applyModelModifiers as t } from "./internal/modifiers.js";
+import { createElementBlock as n, defineComponent as r, isRef as i, mergeProps as a, openBlock as o, unref as s, useModel as c, vModelText as l, withDirectives as u } from "vue";
+//#region src/components/BaseTextarea.vue?vue&type=script&setup=true&lang.ts
+var d = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], f = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], p = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "BaseTextarea",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(r) {
+		let [p, m] = c(r, "modelValue", { set: (e) => t(e, m) }), { controlId: h, describedBy: g, ariaInvalid: _ } = e();
+		return (e, t) => s(m).lazy ? u((o(), n("textarea", a({ key: 0 }, e.$attrs, {
+			id: s(h),
+			"onUpdate:modelValue": t[0] ||= (e) => i(p) ? p.value = e : null,
+			"aria-describedby": s(g),
+			"aria-invalid": s(_)
+		}), null, 16, d)), [[
+			l,
+			s(p),
+			void 0,
+			{ lazy: !0 }
+		]]) : u((o(), n("textarea", a({ key: 1 }, e.$attrs, {
+			id: s(h),
+			"onUpdate:modelValue": t[1] ||= (e) => i(p) ? p.value = e : null,
+			"aria-describedby": s(g),
+			"aria-invalid": s(_)
+		}), null, 16, f)), [[l, s(p)]]);
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/internal/field.d.ts

@@ -0,0 +1,5 @@
+export declare function useFieldControl(): {
+    controlId: import('vue').ComputedRef<string>;
+    describedBy: import('vue').ComputedRef<string | undefined>;
+    ariaInvalid: import('vue').ComputedRef<unknown>;
+};

package/dist/components/internal/field.js

@@ -0,0 +1,13 @@
+import { fieldKey as e } from "./keys.js";
+import { computed as t, inject as n, useAttrs as r, useId as i } from "vue";
+//#region src/components/internal/field.ts
+function a() {
+	let a = r(), o = i(), s = n(e, null);
+	return {
+		controlId: t(() => typeof a.id == "string" ? a.id : s?.id.value ?? o),
+		describedBy: t(() => typeof a["aria-describedby"] == "string" ? a["aria-describedby"] : s?.supportingTextId.value),
+		ariaInvalid: t(() => "aria-invalid" in a ? a["aria-invalid"] : s?.validationMessage.value ? "true" : void 0)
+	};
+}
+//#endregion
+export { a as useFieldControl };

package/dist/components/internal/keys.d.ts

@@ -1,11 +1,17 @@
-import { InjectionKey, ModelRef, ComputedRef } from 'vue';
+import { InjectionKey, ModelRef, ComputedRef, Ref } from 'vue';
 export interface RadioGroupContext {
-    model: ModelRef<unknown>;
+    model: ModelRef<string | number | undefined>;
     name: ComputedRef<string>;
 }
 export declare const radioGroupKey: InjectionKey<RadioGroupContext>;
 export interface CheckboxGroupContext {
-    model: ModelRef<unknown[]>;
+    model: ModelRef<(string | number)[]>;
     name: ComputedRef<string>;
 }
 export declare const checkboxGroupKey: InjectionKey<CheckboxGroupContext>;
+export interface FieldContext {
+    id: ComputedRef<string>;
+    supportingTextId: Ref<string | undefined>;
+    validationMessage: Ref<string>;
+}
+export declare const fieldKey: InjectionKey<FieldContext | null>;

package/dist/components/internal/keys.js

@@ -0,0 +1,4 @@
+//#region src/components/internal/keys.ts
+var e = Symbol("CRadioGroup"), t = Symbol("CCheckboxGroup"), n = Symbol("CField");
+//#endregion
+export { t as checkboxGroupKey, n as fieldKey, e as radioGroupKey };

package/dist/components/internal/modifiers.d.ts

@@ -0,0 +1,6 @@
+export interface ModelModifiers {
+    trim?: boolean;
+    number?: boolean;
+    lazy?: boolean;
+}
+export declare function applyModelModifiers(value: string | number, modifiers: ModelModifiers): string | number;

package/dist/components/internal/modifiers.js

@@ -0,0 +1,10 @@
+//#region src/components/internal/modifiers.ts
+function e(e, t) {
+	if (t.trim && typeof e == "string" && (e = e.trim()), t.number && typeof e == "string") {
+		let t = parseFloat(e);
+		e = isNaN(t) ? e : t;
+	}
+	return e;
+}
+//#endregion
+export { e as applyModelModifiers };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as CButton } from './components/BaseButton';
 export { default as CCheckbox } from './components/BaseCheckbox';
 export { default as CCheckboxGroup } from './components/BaseCheckboxGroup';
+export { default as CField } from './components/BaseField';
 export { default as CFile } from './components/BaseFile';
 export { default as CForm } from './components/BaseForm';
 export { default as CInput } from './components/BaseInput';
@@ -8,4 +9,5 @@ export { default as CLabel } from './components/BaseLabel';
 export { default as CRadio } from './components/BaseRadio';
 export { default as CRadioGroup } from './components/BaseRadioGroup';
 export { default as CSelect } from './components/BaseSelect';
+export { default as CSupportingText } from './components/BaseSupportingText';
 export { default as CTextarea } from './components/BaseTextarea';

package/dist/index.js

@@ -0,0 +1,14 @@
+import e from "./components/BaseButton.js";
+import t from "./components/BaseCheckbox.js";
+import n from "./components/BaseCheckboxGroup.js";
+import r from "./components/BaseField.js";
+import i from "./components/BaseFile.js";
+import a from "./components/BaseForm.js";
+import o from "./components/BaseInput.js";
+import s from "./components/BaseLabel.js";
+import c from "./components/BaseRadio.js";
+import l from "./components/BaseRadioGroup.js";
+import u from "./components/BaseSelect.js";
+import d from "./components/BaseSupportingText.js";
+import f from "./components/BaseTextarea.js";
+export { e as CButton, t as CCheckbox, n as CCheckboxGroup, r as CField, i as CFile, a as CForm, o as CInput, s as CLabel, c as CRadio, l as CRadioGroup, u as CSelect, d as CSupportingText, f as CTextarea };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@charpente-ui/vue",
-    "version": "1.6.0",
+    "version": "2.1.0",
     "description": "Charpente UI is a headless Vue component library.",
     "type": "module",
     "scripts": {
@@ -10,21 +10,23 @@
         "build": "vite build",
         "test": "vitest",
         "test:coverage": "vitest run --coverage",
-        "prepare": "husky && npm run build",
+        "prepare": "husky",
+        "prepack": "npm run build",
         "release": "semantic-release"
     },
     "engines": {
         "node": ">=20"
     },
-    "main": "./dist/charpente.umd.cjs",
-    "module": "./dist/charpente.js",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./dist/charpente.js",
-            "require": "./dist/charpente.umd.cjs"
-        }
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
     },
     "devDependencies": {
         "@commitlint/cli": "^20.4.2",

package/dist/charpente.js

@@ -1,182 +0,0 @@
-import { computed as e, createBlock as t, createElementBlock as n, defineComponent as r, guardReactiveProps as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, normalizeProps as l, openBlock as u, provide as d, renderSlot as f, resolveDynamicComponent as p, unref as m, useAttrs as h, useId as g, useModel as _, useTemplateRef as v, vModelCheckbox as y, vModelDynamic as b, vModelRadio as x, vModelSelect as S, vModelText as C, watch as w, watchPostEffect as T, withCtx as E, withDirectives as D, withModifiers as O } from "vue";
-//#endregion
-//#region src/components/BaseButton.vue
-var k = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseButton",
-	props: { as: { default: "button" } },
-	setup(e) {
-		return (n, r) => (u(), t(p(e.as), l(i(n.$attrs)), {
-			default: E(() => [f(n.$slots, "default")]),
-			_: 3
-		}, 16));
-	}
-}), A = Symbol("CRadioGroup"), j = Symbol("CCheckboxGroup"), M = [
-	"id",
-	"name",
-	"value"
-], N = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseCheckbox",
-	props: /* @__PURE__ */ s({
-		value: {},
-		indeterminate: { type: Boolean }
-	}, {
-		modelValue: { type: [Boolean, Array] },
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = t, i = _(t, "modelValue"), s = a(j, null), l = s ? s.model : i, d = h(), f = g(), p = v("input"), b = e(() => typeof d.id == "string" ? d.id : f), x = e(() => typeof d.name == "string" ? d.name : s?.name.value);
-		return T(() => {
-			p.value && (p.value.indeterminate = !!r.indeterminate);
-		}), (e, r) => D((u(), n("input", c(e.$attrs, {
-			id: b.value,
-			ref: "input",
-			"onUpdate:modelValue": r[0] ||= (e) => o(l) ? l.value = e : null,
-			name: x.value,
-			type: "checkbox",
-			value: t.value
-		}), null, 16, M)), [[y, m(l)]]);
-	}
-}), P = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseCheckboxGroup",
-	props: {
-		modelValue: { default: () => [] },
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), a = h(), o = g();
-		return d(j, {
-			model: r,
-			name: e(() => typeof a.name == "string" ? a.name : o)
-		}), (e, t) => (u(), n("fieldset", l(i(e.$attrs)), [f(e.$slots, "default")], 16));
-	}
-}), F = ["id"], I = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseFile",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = h(), a = g(), o = v("input"), s = e(() => typeof i.id == "string" ? i.id : a);
-		function l(e) {
-			r.value = e.target.files;
-		}
-		return w(r, (e) => {
-			!e && o.value && (o.value.value = "");
-		}), (e, t) => (u(), n("input", c(e.$attrs, {
-			id: s.value,
-			ref: "input",
-			type: "file",
-			onChange: l
-		}), null, 16, F));
-	}
-}), L = ["id"], R = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseForm",
-	emits: ["submit"],
-	setup(t, { emit: r }) {
-		let i = h(), a = g(), o = r, s = e(() => typeof i.id == "string" ? i.id : a);
-		return (e, t) => (u(), n("form", c(e.$attrs, {
-			id: s.value,
-			onSubmit: t[0] ||= O((e) => o("submit", e), ["prevent"])
-		}), [f(e.$slots, "default")], 16, L));
-	}
-}), z = ["id"], B = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseInput",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = h(), a = g(), o = e(() => typeof i.id == "string" ? i.id : a);
-		return (e, t) => D((u(), n("input", c(e.$attrs, {
-			id: o.value,
-			"onUpdate:modelValue": t[0] ||= (e) => r.value = e
-		}), null, 16, z)), [[b, r.value]]);
-	}
-}), V = ["for"], H = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseLabel",
-	props: { for: {} },
-	setup(e) {
-		let t = e;
-		return (e, r) => (u(), n("label", c(e.$attrs, { for: t.for }), [f(e.$slots, "default")], 16, V));
-	}
-}), U = [
-	"id",
-	"name",
-	"value"
-], W = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseRadio",
-	props: /* @__PURE__ */ s({ value: {} }, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = a(A, null), s = i ? i.model : r, l = h(), d = g(), f = e(() => typeof l.id == "string" ? l.id : d), p = e(() => typeof l.name == "string" ? l.name : i?.name.value);
-		return (e, r) => D((u(), n("input", c(e.$attrs, {
-			id: f.value,
-			"onUpdate:modelValue": r[0] ||= (e) => o(s) ? s.value = e : null,
-			name: p.value,
-			value: t.value,
-			type: "radio"
-		}), null, 16, U)), [[x, m(s)]]);
-	}
-}), G = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseRadioGroup",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), a = h(), o = g();
-		return d(A, {
-			model: r,
-			name: e(() => typeof a.name == "string" ? a.name : o)
-		}), (e, t) => (u(), n("fieldset", l(i(e.$attrs)), [f(e.$slots, "default")], 16));
-	}
-}), K = ["id"], q = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseSelect",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = h(), a = g(), o = e(() => typeof i.id == "string" ? i.id : a);
-		return (e, t) => D((u(), n("select", c(e.$attrs, {
-			id: o.value,
-			"onUpdate:modelValue": t[0] ||= (e) => r.value = e
-		}), [f(e.$slots, "default")], 16, K)), [[S, r.value]]);
-	}
-}), J = ["id"], Y = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseTextarea",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = h(), a = g(), o = e(() => typeof i.id == "string" ? i.id : a);
-		return (e, t) => D((u(), n("textarea", c(e.$attrs, {
-			id: o.value,
-			"onUpdate:modelValue": t[0] ||= (e) => r.value = e
-		}), null, 16, J)), [[C, r.value]]);
-	}
-});
-//#endregion
-export { k as CButton, N as CCheckbox, P as CCheckboxGroup, I as CFile, R as CForm, B as CInput, H as CLabel, W as CRadio, G as CRadioGroup, q as CSelect, Y as CTextarea };

package/dist/charpente.umd.cjs

@@ -1 +0,0 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Charpente={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseButton`,props:{as:{default:`button`}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.as),(0,t.normalizeProps)((0,t.guardReactiveProps)(n.$attrs)),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`default`)]),_:3},16))}}),r=Symbol(`CRadioGroup`),i=Symbol(`CCheckboxGroup`),a=[`id`,`name`,`value`],o=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseCheckbox`,props:(0,t.mergeModels)({value:{},indeterminate:{type:Boolean}},{modelValue:{type:[Boolean,Array]},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=e,r=(0,t.useModel)(e,`modelValue`),o=(0,t.inject)(i,null),s=o?o.model:r,c=(0,t.useAttrs)(),l=(0,t.useId)(),u=(0,t.useTemplateRef)(`input`),d=(0,t.computed)(()=>typeof c.id==`string`?c.id:l),f=(0,t.computed)(()=>typeof c.name==`string`?c.name:o?.name.value);return(0,t.watchPostEffect)(()=>{u.value&&(u.value.indeterminate=!!n.indeterminate)}),(n,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`input`,(0,t.mergeProps)(n.$attrs,{id:d.value,ref:`input`,"onUpdate:modelValue":r[0]||=e=>(0,t.isRef)(s)?s.value=e:null,name:f.value,type:`checkbox`,value:e.value}),null,16,a)),[[t.vModelCheckbox,(0,t.unref)(s)]])}}),s=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseCheckboxGroup`,props:{modelValue:{default:()=>[]},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),a=(0,t.useId)();return(0,t.provide)(i,{model:n,name:(0,t.computed)(()=>typeof r.name==`string`?r.name:a)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`fieldset`,(0,t.normalizeProps)((0,t.guardReactiveProps)(e.$attrs)),[(0,t.renderSlot)(e.$slots,`default`)],16))}}),c=[`id`],l=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseFile`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),i=(0,t.useId)(),a=(0,t.useTemplateRef)(`input`),o=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);function s(e){n.value=e.target.files}return(0,t.watch)(n,e=>{!e&&a.value&&(a.value.value=``)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`input`,(0,t.mergeProps)(e.$attrs,{id:o.value,ref:`input`,type:`file`,onChange:s}),null,16,c))}}),u=[`id`],d=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseForm`,emits:[`submit`],setup(e,{emit:n}){let r=(0,t.useAttrs)(),i=(0,t.useId)(),a=n,o=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`form`,(0,t.mergeProps)(e.$attrs,{id:o.value,onSubmit:n[0]||=(0,t.withModifiers)(e=>a(`submit`,e),[`prevent`])}),[(0,t.renderSlot)(e.$slots,`default`)],16,u))}}),f=[`id`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseInput`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),i=(0,t.useId)(),a=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);return(e,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`input`,(0,t.mergeProps)(e.$attrs,{id:a.value,"onUpdate:modelValue":r[0]||=e=>n.value=e}),null,16,f)),[[t.vModelDynamic,n.value]])}}),m=[`for`],h=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseLabel`,props:{for:{}},setup(e){let n=e;return(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,(0,t.mergeProps)(e.$attrs,{for:n.for}),[(0,t.renderSlot)(e.$slots,`default`)],16,m))}}),g=[`id`,`name`,`value`],_=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseRadio`,props:(0,t.mergeModels)({value:{}},{modelValue:{},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),i=(0,t.inject)(r,null),a=i?i.model:n,o=(0,t.useAttrs)(),s=(0,t.useId)(),c=(0,t.computed)(()=>typeof o.id==`string`?o.id:s),l=(0,t.computed)(()=>typeof o.name==`string`?o.name:i?.name.value);return(n,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`input`,(0,t.mergeProps)(n.$attrs,{id:c.value,"onUpdate:modelValue":r[0]||=e=>(0,t.isRef)(a)?a.value=e:null,name:l.value,value:e.value,type:`radio`}),null,16,g)),[[t.vModelRadio,(0,t.unref)(a)]])}}),v=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseRadioGroup`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),i=(0,t.useAttrs)(),a=(0,t.useId)();return(0,t.provide)(r,{model:n,name:(0,t.computed)(()=>typeof i.name==`string`?i.name:a)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`fieldset`,(0,t.normalizeProps)((0,t.guardReactiveProps)(e.$attrs)),[(0,t.renderSlot)(e.$slots,`default`)],16))}}),y=[`id`],b=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseSelect`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),i=(0,t.useId)(),a=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);return(e,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`select`,(0,t.mergeProps)(e.$attrs,{id:a.value,"onUpdate:modelValue":r[0]||=e=>n.value=e}),[(0,t.renderSlot)(e.$slots,`default`)],16,y)),[[t.vModelSelect,n.value]])}}),x=[`id`],S=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseTextarea`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),i=(0,t.useId)(),a=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);return(e,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`textarea`,(0,t.mergeProps)(e.$attrs,{id:a.value,"onUpdate:modelValue":r[0]||=e=>n.value=e}),null,16,x)),[[t.vModelText,n.value]])}});e.CButton=n,e.CCheckbox=o,e.CCheckboxGroup=s,e.CFile=l,e.CForm=d,e.CInput=p,e.CLabel=h,e.CRadio=_,e.CRadioGroup=v,e.CSelect=b,e.CTextarea=S});