@charpente-ui/vue 2.1.2 → 2.2.0

package/README.md

@@ -248,6 +248,20 @@ messages for free. Charpente UI exposes that instead of reinventing it — opt i
 - 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.
 
+`CField` stays zero-CSS: it never applies a class itself. If you need custom styling beyond `[aria-invalid]` or
+`:invalid` selectors, its default slot exposes `invalid` and `message` so you can drive your own classes:
+
+```vue
+<CField v-slot="{ invalid, message }">
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email" required :class="{ 'is-invalid': invalid }"/>
+    <span v-if="invalid" class="error">{{ message }}</span>
+</CField>
+```
+
+This only reaches elements placed directly inside `CField`'s default slot — a custom component nested deeper won't
+receive `invalid`/`message` automatically; pass them down as props if you need that.
+
 ## Components
 
 | Name          | Core Logic                                                                       | Tag              | Status |

package/dist/components/BaseField.js

@@ -28,13 +28,19 @@ var d = /*@__PURE__*/ r({
 			h.value = !0, m.value = e.target.validationMessage;
 		}
 		function S(e) {
-			h.value && (m.value = e.target.validationMessage);
+			if (h.value) {
+				let t = e.target;
+				h.value = !t.validity.valid, m.value = t.validationMessage;
+			}
 		}
 		return (e, t) => (a(), n("div", i(b.value, {
 			onInvalidCapture: x,
 			onInputCapture: S,
 			onChangeCapture: S
-		}), [c(e.$slots, "default")], 16));
+		}), [c(e.$slots, "default", {
+			invalid: h.value,
+			message: m.value
+		})], 16));
 	}
 });
 //#endregion

package/dist/src/components/BaseField.d.ts

@@ -1,7 +1,10 @@
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        default?(_: {}): any;
+        default?(_: {
+            invalid: boolean;
+            message: string;
+        }): any;
     };
     refs: {};
     rootEl: any;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@charpente-ui/vue",
-    "version": "2.1.2",
+    "version": "2.2.0",
     "description": "Charpente UI is a headless Vue component library.",
     "type": "module",
     "scripts": {