@plitzi/sdk-elements 0.35.2 → 0.35.4

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @plitzi/sdk-elements
 
+## 0.35.4
+
+### Patch Changes
+
+- v0.35.4
+- Updated dependencies
+  - @plitzi/sdk-auth@0.35.4
+  - @plitzi/sdk-dev-tools@0.35.4
+  - @plitzi/sdk-event-bridge@0.35.4
+  - @plitzi/sdk-interactions@0.35.4
+  - @plitzi/sdk-navigation@0.35.4
+  - @plitzi/sdk-schema@0.35.4
+  - @plitzi/sdk-shared@0.35.4
+
+## 0.35.3
+
+### Patch Changes
+
+- 0211dc4: A form speaks the site's language when it refuses a value.
+
+  - **Every rule of a `formControl` can say what it wants to say.** `requiredMessage`, `minLengthMessage`,
+    `maxLengthMessage` and `formatMessage` join `patternMessage` and `matchesMessage`; left empty, each falls back to
+    the English sentence it said before. `formatMessage` is said when the value does not have the shape the control's
+    type asks for — an address, for an `email` — one attribute for every type that has a shape. Offered in the builder under the rule they belong to.
+  - **A `form` can turn the browser's own checks off (`noValidate`, "Skip Browser Validation" in the builder).** Left on
+    — the default, as before — the browser answers first for a blank required field and a malformed address, in a
+    bubble no style reaches and in the browser's language, while every other rule answers under the control. Turned
+    on, the form's rules are the only ones, and all of them answer under the control.
+  - **An `email` control checks the address itself,** by the same definition the browser uses, so the format is still
+    asked for when the browser's checks are off.
+
+- Updated dependencies [0211dc4]
+  - @plitzi/sdk-auth@0.35.3
+  - @plitzi/sdk-dev-tools@0.35.3
+  - @plitzi/sdk-event-bridge@0.35.3
+  - @plitzi/sdk-interactions@0.35.3
+  - @plitzi/sdk-navigation@0.35.3
+  - @plitzi/sdk-schema@0.35.3
+  - @plitzi/sdk-shared@0.35.3
+
 ## 0.35.2
 
 ### Minor Changes

package/dist/elements/declarations/index.d.ts

@@ -791,6 +791,7 @@ export declare const elementDeclarations: {
                 readonly method: "get";
                 readonly actionUrl: "";
                 readonly managedByInteractions: false;
+                readonly noValidate: false;
                 readonly errors: {};
                 readonly values: {};
             };
@@ -838,6 +839,7 @@ export declare const elementDeclarations: {
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         values: Record<string, unknown>;
         method: "get" | "post";
+        noValidate: boolean;
         actionUrl: string;
         managedByInteractions: boolean;
         errors: Record<string, string>;
@@ -855,8 +857,12 @@ export declare const elementDeclarations: {
                 readonly disabled: false;
                 readonly options: readonly [];
                 readonly required: true;
+                readonly requiredMessage: "";
                 readonly minLength: 0;
+                readonly minLengthMessage: "";
                 readonly maxLength: 0;
+                readonly maxLengthMessage: "";
+                readonly formatMessage: "";
                 readonly pattern: "";
                 readonly patternMessage: "";
                 readonly matches: "";

package/dist/elements/form/Form/Form.d.ts

@@ -7,6 +7,14 @@ export type FormProps = {
     method: 'get' | 'post';
     actionUrl: string;
     managedByInteractions: boolean;
+    /**
+     * Turns the browser's own checks off, leaving the controls' rules as the whole of the validation.
+     *
+     * Left on, the browser answers first for the two rules it knows (a blank required field, a malformed address) in a
+     * bubble no style reaches and in the BROWSER's language, while every other rule answers under the control. On, every
+     * rule answers under the control in the words its `…Message` gives — `validateField` asks for both of those itself.
+     */
+    noValidate: boolean;
     errors: Record<string, string>;
     values: Record<string, unknown>;
 };
@@ -27,7 +35,7 @@ export type FormContextValue = {
     setFieldValue: (name: string, value: FieldValue | null) => void;
     setFieldError: (name: string, error: string) => void;
 };
-declare const Form: ({ ref, className, children, method, actionUrl, managedByInteractions, errors, values }: FormProps) => import("react").JSX.Element;
+declare const Form: ({ ref, className, children, method, actionUrl, managedByInteractions, noValidate, errors, values }: FormProps) => import("react").JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<FormProps>): import("react").JSX.Element;
     displayName: string;

package/dist/elements/form/Form/Form.mjs

@@ -13,28 +13,28 @@ import { produce as _ } from "immer";
 import v from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
 import y from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/form/Form/Form.tsx
-var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, errors: T = m, values: E = m }) => {
-	let [D, O] = l({}), k = c(/* @__PURE__ */ new Map()), A = c(!1), { id: j, definition: { label: M = "Form" }, setElementState: N } = t(), P = v(r.sourceType, j), { settings: { previewMode: F }, contexts: { InteractionsContext: I } } = u(), { interactionsManager: L } = i(I), R = a((e) => O((t) => ({
+var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, noValidate: T = !1, errors: E = m, values: D = m }) => {
+	let [O, k] = l({}), A = c(/* @__PURE__ */ new Map()), j = c(!1), { id: M, definition: { label: N = "Form" }, setElementState: P } = t(), F = v(r.sourceType, M), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = u(), { interactionsManager: R } = i(L), z = a((e) => k((t) => ({
 		...t,
 		[e.name]: e
-	})), [O]);
-	o(() => (A.current = !1, () => {
-		A.current = !0;
+	})), [k]);
+	o(() => (j.current = !1, () => {
+		j.current = !0;
 	}), []);
-	let z = a((e) => {
-		A.current || (O((t) => _(t, (t) => {
+	let B = a((e) => {
+		j.current || (k((t) => _(t, (t) => {
 			t[e] && delete t[e];
-		})), e && N((t) => ({
+		})), e && P((t) => ({
 			...t,
 			values: f(t, `values.${e}`),
 			errors: f(t, `errors.${e}`)
 		})));
-	}, [N]), B = a((e, t) => {
-		k.current.set(e, t);
-	}, []), V = a((e) => {
-		k.current.delete(e);
-	}, []), H = a((e, t = "") => {
-		e && (t === null && (t = ""), N((n) => n.errors && n.errors[e] ? {
+	}, [P]), V = a((e, t) => {
+		A.current.set(e, t);
+	}, []), H = a((e) => {
+		A.current.delete(e);
+	}, []), U = a((e, t = "") => {
+		e && (t === null && (t = ""), P((n) => n.errors && n.errors[e] ? {
 			...n,
 			values: {
 				...n.values,
@@ -48,8 +48,8 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 				[e]: t
 			}
 		}));
-	}, [N]), U = a((e, t) => {
-		e && N((n) => !t && !d(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
+	}, [P]), W = a((e, t) => {
+		e && P((n) => !t && !d(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
 			...n,
 			errors: f(n, [`errors.${e}`])
 		} : {
@@ -59,7 +59,7 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 				[e]: t
 			}
 		});
-	}, [N]), W = a(() => Object.values(D).filter((e) => !!e.name).reduce((e, t) => [
+	}, [P]), G = a(() => Object.values(O).filter((e) => !!e.name).reduce((e, t) => [
 		...e,
 		{
 			path: `fields.${t.name}.id`,
@@ -73,118 +73,118 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 			path: `errors.${t.name}`,
 			name: `${t.name} Error Message`
 		}
-	], []), [D]), G = s(() => ({ runtime: { sources: {
+	], []), [O]), K = s(() => ({ runtime: { sources: {
 		form: {
-			errors: T,
-			values: E,
-			registerField: R,
-			unregisterField: z,
-			registerValidator: B,
-			unregisterValidator: V,
-			setFieldValue: H,
-			setFieldError: U
+			errors: E,
+			values: D,
+			registerField: z,
+			unregisterField: B,
+			registerValidator: V,
+			unregisterValidator: H,
+			setFieldValue: U,
+			setFieldError: W
 		},
-		[P]: {
-			values: E,
-			errors: T
+		[F]: {
+			values: D,
+			errors: E
 		}
 	} } }), [
-		P,
-		T,
+		F,
 		E,
-		R,
+		D,
 		z,
 		B,
 		V,
 		H,
-		U
+		U,
+		W
 	]);
 	y({
-		id: j,
-		source: P,
-		name: M || `Form - ${j}`,
-		fields: W
+		id: M,
+		source: F,
+		name: N || `Form - ${M}`,
+		fields: G
 	});
-	let K = s(() => ({ onSubmit: {
+	let q = s(() => ({ onSubmit: {
 		action: "onSubmit",
 		title: "On Form Submit",
 		type: "trigger",
 		params: {},
 		preview: {
-			values: Object.values(D).reduce((e, t) => ({
+			values: Object.values(O).reduce((e, t) => ({
 				...e,
 				[t.name]: ""
 			}), {}),
 			actionUrl: "",
 			method: ""
 		}
-	} }), [D]), q = a((e) => {
-		let t = [...k.current].reduce((e, [t, n]) => {
-			let r = n(E);
+	} }), [O]), J = a((e) => {
+		let t = [...A.current].reduce((e, [t, n]) => {
+			let r = n(D);
 			return r ? {
 				...e,
 				[t]: r
 			} : e;
 		}, {});
-		if (N((e) => ({
+		if (P((e) => ({
 			...e,
 			errors: t
 		})), Object.keys(t).length > 0) {
 			e.stopPropagation(), e.preventDefault();
 			return;
 		}
-		if (!w || (e.stopPropagation(), e.preventDefault(), !F)) return;
-		let n = Object.values(D).reduce((e, { name: t }) => ({
+		if (!w || (e.stopPropagation(), e.preventDefault(), !I)) return;
+		let n = Object.values(O).reduce((e, { name: t }) => ({
 			...e,
-			[t]: E[t]
+			[t]: D[t]
 		}), {});
-		L.interactionTrigger(j, "onSubmit", {
+		R.interactionTrigger(M, "onSubmit", {
 			values: n,
 			actionUrl: C,
 			method: S
 		});
 	}, [
-		N,
+		P,
 		w,
-		F,
-		D,
-		L,
-		j,
+		I,
+		O,
+		R,
+		M,
 		C,
 		S,
-		E
-	]), J = a((e) => {
-		w && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), N((e) => ({
+		D
+	]), Y = a((e) => {
+		w && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), P((e) => ({
 			...e,
 			values: {},
 			errors: {}
 		})));
-	}, [N, w]), Y = a((e) => {
+	}, [P, w]), X = a((e) => {
 		let { name: t, value: n } = e;
-		H(t, n);
-	}, [H]), X = a((e) => {
-		let { name: t, error: n } = e;
 		U(t, n);
-	}, [U]), Z = s(() => ({
+	}, [U]), Z = a((e) => {
+		let { name: t, error: n } = e;
+		W(t, n);
+	}, [W]), Q = s(() => ({
 		performReset: {
 			action: "performReset",
-			title: `Reset ${M}`,
+			title: `Reset ${N}`,
 			type: "callback",
-			callback: J,
+			callback: Y,
 			params: {}
 		},
 		setFieldValue: {
 			action: "setFieldValue",
-			title: `Set Field Value ${M}`,
+			title: `Set Field Value ${N}`,
 			type: "callback",
-			callback: Y,
+			callback: X,
 			preview: {},
 			params: {
 				name: {
 					label: "Field Name",
 					defaultValue: void 0,
 					type: "select",
-					options: Object.values(D).map((e) => ({
+					options: Object.values(O).map((e) => ({
 						value: e.name,
 						label: e.name
 					}))
@@ -197,16 +197,16 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 		},
 		setFieldError: {
 			action: "setFieldError",
-			title: `Set Field Error ${M}`,
+			title: `Set Field Error ${N}`,
 			type: "callback",
-			callback: X,
+			callback: Z,
 			preview: {},
 			params: {
 				name: {
 					label: "Field Name",
 					defaultValue: void 0,
 					type: "select",
-					options: Object.values(D).map((e) => ({
+					options: Object.values(O).map((e) => ({
 						value: e.name,
 						label: e.name
 					}))
@@ -218,26 +218,27 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 			}
 		}
 	}), [
-		M,
-		J,
+		N,
 		Y,
-		D,
-		X
+		X,
+		O,
+		Z
 	]);
 	return /* @__PURE__ */ h(n, {
 		tag: "form",
 		ref: e,
+		noValidate: T,
 		method: S,
 		className: g("plitzi-component__form", b),
-		interactionTriggers: K,
-		interactionCallbacks: Z,
-		onSubmit: q,
-		onReset: J,
+		interactionTriggers: q,
+		interactionCallbacks: Q,
+		onSubmit: J,
+		onReset: Y,
 		action: C,
 		children: /* @__PURE__ */ h(p, {
 			inherit: "live",
-			name: `Form:${j}`,
-			value: G,
+			name: `Form:${M}`,
+			value: K,
 			children: x
 		})
 	});

package/dist/elements/form/Form/Settings.d.ts

@@ -1,8 +1,9 @@
 type SettingsProps = {
     method?: 'get' | 'post';
     managedByInteractions?: boolean;
+    noValidate?: boolean;
     actionUrl?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ method, managedByInteractions, actionUrl, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ method, managedByInteractions, noValidate, actionUrl, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

package/dist/elements/form/Form/Settings.mjs

@@ -4,15 +4,15 @@ import r from "@plitzi/plitzi-ui/Checkbox";
 import i from "@plitzi/plitzi-ui/Input";
 import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/form/Form/Settings.tsx
-var o = ({ method: o = "get", managedByInteractions: s = !1, actionUrl: c = "", onUpdate: l }) => {
-	let u = e((e) => l?.("actionUrl", e), [l]), d = e((e) => l?.("method", e), [l]), f = e((e) => l?.("managedByInteractions", e.target.checked), [l]);
+var o = ({ method: o = "get", managedByInteractions: s = !1, noValidate: c = !1, actionUrl: l = "", onUpdate: u }) => {
+	let d = e((e) => u?.("actionUrl", e), [u]), f = e((e) => u?.("method", e), [u]), p = e((e) => u?.("managedByInteractions", e.target.checked), [u]), m = e((e) => u?.("noValidate", e.target.checked), [u]);
 	return /* @__PURE__ */ n("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ n(a, {
 				value: o,
 				label: "Form Method",
-				onChange: d,
+				onChange: f,
 				size: "xs",
 				children: [/* @__PURE__ */ t("option", {
 					value: "get",
@@ -23,16 +23,22 @@ var o = ({ method: o = "get", managedByInteractions: s = !1, actionUrl: c = "",
 				})]
 			}),
 			/* @__PURE__ */ t(i, {
-				value: c,
-				onChange: u,
+				value: l,
+				onChange: d,
 				label: "Action URL",
 				size: "xs"
 			}),
 			/* @__PURE__ */ t(r, {
 				checked: s,
-				onChange: f,
+				onChange: p,
 				label: "Managed By Interactions",
 				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: c,
+				onChange: m,
+				label: "Skip Browser Validation (show only the field messages)",
+				size: "xs"
 			})
 		]
 	});

package/dist/elements/form/Form/declaration.d.ts

@@ -10,6 +10,7 @@ declare const declaration: {
             readonly method: "get";
             readonly actionUrl: "";
             readonly managedByInteractions: false;
+            readonly noValidate: false;
             readonly errors: {};
             readonly values: {};
         };
@@ -57,6 +58,7 @@ declare const declaration: {
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     values: Record<string, unknown>;
     method: "get" | "post";
+    noValidate: boolean;
     actionUrl: string;
     managedByInteractions: boolean;
     errors: Record<string, string>;

package/dist/elements/form/Form/declaration.mjs

@@ -8,6 +8,7 @@ var t = e()({
 			method: "get",
 			actionUrl: "",
 			managedByInteractions: !1,
+			noValidate: !1,
 			errors: {},
 			values: {}
 		},

package/dist/elements/form/Form/index.d.ts

@@ -16,6 +16,7 @@ declare const Form: {
             readonly method: "get";
             readonly actionUrl: "";
             readonly managedByInteractions: false;
+            readonly noValidate: false;
             readonly errors: {};
             readonly values: {};
         };
@@ -57,6 +58,7 @@ declare const Form: {
     __attributes: Partial<{
         values: Record<string, unknown>;
         method: "get" | "post";
+        noValidate: boolean;
         actionUrl: string;
         managedByInteractions: boolean;
         errors: Record<string, string>;

package/dist/elements/form/FormControl/FormControl.d.ts

@@ -16,9 +16,17 @@ export type FormControlProps = {
     /**
      * The rules a value has to meet before the form submits, checked by the form at submit time and by the control when
      * it loses focus. `0` and `''` mean no rule. See `validateField` for what each one says when it is broken.
+     *
+     * Each `…Message` is the sentence shown under the control when that rule is broken, in the site's language; empty
+     * falls back to an English one. `formatMessage` speaks for the shape the control's own type asks of its value — an
+     * address, for an `email` — so it is one attribute however many types come to have a shape.
      */
+    requiredMessage: string;
     minLength: number;
+    minLengthMessage: string;
     maxLength: number;
+    maxLengthMessage: string;
+    formatMessage: string;
     pattern: string;
     patternMessage: string;
     /** The `name` of another control in the same form this one has to repeat — a password confirmation, typically. */

package/dist/elements/form/FormControl/Settings.d.ts

@@ -7,8 +7,12 @@ type SettingsProps = {
     defaultValue?: string;
     options?: string[];
     required?: boolean;
+    requiredMessage?: string;
     minLength?: number;
+    minLengthMessage?: string;
     maxLength?: number;
+    maxLengthMessage?: string;
+    formatMessage?: string;
     pattern?: string;
     patternMessage?: string;
     matches?: string;
@@ -18,5 +22,5 @@ type SettingsProps = {
     previewError?: boolean;
     onUpdate?: (key: string, value: string | boolean | number | string[]) => void;
 };
-declare const Settings: ({ subType, name, label, defaultValue, placeholder, autoComplete, options, required, minLength, maxLength, pattern, patternMessage, matches, matchesMessage, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ subType, name, label, defaultValue, placeholder, autoComplete, options, required, requiredMessage, minLength, minLengthMessage, maxLength, maxLengthMessage, formatMessage, pattern, patternMessage, matches, matchesMessage, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

package/dist/elements/form/FormControl/Settings.mjs

@@ -1,178 +1,203 @@
-import { useCallback as e, useMemo as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import i from "@plitzi/plitzi-ui/Checkbox";
-import a from "@plitzi/plitzi-ui/Input";
-import o from "@plitzi/plitzi-ui/TextArea";
-import s from "@plitzi/plitzi-ui/Select";
+import { hasFormat as e } from "./helpers/validateField.mjs";
+import { useCallback as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@plitzi/plitzi-ui/Checkbox";
+import o from "@plitzi/plitzi-ui/Input";
+import s from "@plitzi/plitzi-ui/TextArea";
+import c from "@plitzi/plitzi-ui/Select";
 //#region src/elements/form/FormControl/Settings.tsx
-var c = (e) => {
+var l = (e) => {
 	let t = parseInt(e, 10);
 	return Number.isNaN(t) || t < 0 ? 0 : t;
-}, l = ({ subType: l = "text", name: u = "", label: d = "Label", defaultValue: f = "", placeholder: p = "", autoComplete: m = !0, options: h, required: g = !0, minLength: _ = 0, maxLength: v = 0, pattern: y = "", patternMessage: b = "", matches: x = "", matchesMessage: S = "", readOnly: C = !1, disabled: w = !1, previewError: T = !1, onUpdate: E }) => {
-	let D = [
+}, u = ({ subType: u = "text", name: d = "", label: f = "Label", defaultValue: p = "", placeholder: m = "", autoComplete: h = !0, options: g, required: _ = !0, requiredMessage: v = "", minLength: y = 0, minLengthMessage: b = "", maxLength: x = 0, maxLengthMessage: S = "", formatMessage: C = "", pattern: w = "", patternMessage: T = "", matches: E = "", matchesMessage: D = "", readOnly: O = !1, disabled: k = !1, previewError: A = !1, onUpdate: j }) => {
+	let M = [
 		"text",
 		"textarea",
 		"number",
 		"email",
 		"password"
-	].includes(l), O = e((e) => E?.("name", e), [E]), k = e((e) => E?.("label", e), [E]), A = e((e) => E?.("placeholder", e), [E]), j = e((e) => {
-		E?.("subType", e), E?.("defaultValue", "");
-	}, [E]), M = e((e) => E?.("defaultValue", e), [E]), N = e((e) => E?.("autoComplete", e.target.checked), [E]), P = e((e) => E?.("required", e.target.checked), [E]), F = e((e) => E?.("minLength", c(e)), [E]), I = e((e) => E?.("maxLength", c(e)), [E]), L = e((e) => E?.("pattern", e), [E]), R = e((e) => E?.("patternMessage", e), [E]), z = e((e) => E?.("matches", e), [E]), B = e((e) => E?.("matchesMessage", e), [E]), V = e((e) => E?.("readOnly", e.target.checked), [E]), H = e((e) => E?.("disabled", e.target.checked), [E]), U = e((e) => E?.("previewError", e.target.checked), [E]), W = e((e) => {
+	].includes(u), N = t((e) => j?.("name", e), [j]), ee = t((e) => j?.("label", e), [j]), P = t((e) => j?.("placeholder", e), [j]), F = t((e) => {
+		j?.("subType", e), j?.("defaultValue", "");
+	}, [j]), I = t((e) => j?.("defaultValue", e), [j]), L = t((e) => j?.("autoComplete", e.target.checked), [j]), R = t((e) => j?.("required", e.target.checked), [j]), z = t((e) => j?.("requiredMessage", e), [j]), B = t((e) => j?.("minLength", l(e)), [j]), V = t((e) => j?.("minLengthMessage", e), [j]), H = t((e) => j?.("maxLength", l(e)), [j]), U = t((e) => j?.("maxLengthMessage", e), [j]), W = t((e) => j?.("formatMessage", e), [j]), G = t((e) => j?.("pattern", e), [j]), K = t((e) => j?.("patternMessage", e), [j]), q = t((e) => j?.("matches", e), [j]), J = t((e) => j?.("matchesMessage", e), [j]), Y = t((e) => j?.("readOnly", e.target.checked), [j]), X = t((e) => j?.("disabled", e.target.checked), [j]), Z = t((e) => j?.("previewError", e.target.checked), [j]), Q = t((e) => {
 		if (!e) {
-			E?.("options", []);
+			j?.("options", []);
 			return;
 		}
-		E?.("options", e.split("\n"));
-	}, [E]), G = t(() => Array.isArray(h) ? h.join("\n") : "", [h]);
-	return /* @__PURE__ */ r("div", {
+		j?.("options", e.split("\n"));
+	}, [j]), $ = n(() => Array.isArray(g) ? g.join("\n") : "", [g]);
+	return /* @__PURE__ */ i("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ n(a, {
-				value: u,
+			/* @__PURE__ */ r(o, {
+				value: d,
 				label: "Input Name",
-				onChange: O,
+				onChange: N,
 				size: "xs"
 			}),
-			/* @__PURE__ */ n(a, {
-				value: d,
+			/* @__PURE__ */ r(o, {
+				value: f,
 				label: "Label",
-				onChange: k,
+				onChange: ee,
 				size: "xs"
 			}),
-			/* @__PURE__ */ n(a, {
-				value: p,
+			/* @__PURE__ */ r(o, {
+				value: m,
 				label: "Placeholder",
-				onChange: A,
+				onChange: P,
 				size: "xs"
 			}),
-			/* @__PURE__ */ r(s, {
-				value: l,
-				onChange: j,
+			/* @__PURE__ */ i(c, {
+				value: u,
+				onChange: F,
 				label: "Input Type",
 				size: "xs",
 				children: [
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "text",
 						children: "Text"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "number",
 						children: "Number"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "date",
 						children: "Date"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "time",
 						children: "Time"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "email",
 						children: "Email"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "password",
 						children: "Password"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "select",
 						children: "Select"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "checkbox",
 						children: "Checkbox"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "textarea",
 						children: "Long Text"
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "hidden",
 						children: "Hidden"
 					})
 				]
 			}),
-			/* @__PURE__ */ n(o, {
-				value: f,
+			/* @__PURE__ */ r(s, {
+				value: p,
 				label: "Default Value",
-				onChange: M,
+				onChange: I,
 				size: "xs"
 			}),
-			l === "text" && /* @__PURE__ */ n(i, {
-				checked: m,
+			u === "text" && /* @__PURE__ */ r(a, {
+				checked: h,
 				label: "Auto Complete",
-				onChange: N,
+				onChange: L,
 				size: "xs"
 			}),
-			D && /* @__PURE__ */ n(i, {
-				checked: C,
+			M && /* @__PURE__ */ r(a, {
+				checked: O,
 				label: "Read Only",
-				onChange: V,
+				onChange: Y,
 				size: "xs"
 			}),
-			l === "select" && /* @__PURE__ */ n(o, {
-				value: G,
+			u === "select" && /* @__PURE__ */ r(s, {
+				value: $,
 				label: "Options",
-				onChange: W,
+				onChange: Q,
 				size: "xs"
 			}),
-			/* @__PURE__ */ n(i, {
-				checked: g,
+			/* @__PURE__ */ r(a, {
+				checked: _,
 				label: "Required",
-				onChange: P,
+				onChange: R,
+				size: "xs"
+			}),
+			_ && /* @__PURE__ */ r(o, {
+				value: v,
+				label: "Required Message",
+				onChange: z,
 				size: "xs"
 			}),
-			D && /* @__PURE__ */ n(a, {
-				value: _ ? String(_) : "",
+			M && /* @__PURE__ */ r(o, {
+				value: y ? String(y) : "",
 				label: "Min Length",
-				onChange: F,
+				onChange: B,
+				size: "xs"
+			}),
+			M && y > 0 && /* @__PURE__ */ r(o, {
+				value: b,
+				label: "Min Length Message",
+				onChange: V,
 				size: "xs"
 			}),
-			D && /* @__PURE__ */ n(a, {
-				value: v ? String(v) : "",
+			M && /* @__PURE__ */ r(o, {
+				value: x ? String(x) : "",
 				label: "Max Length",
-				onChange: I,
+				onChange: H,
+				size: "xs"
+			}),
+			M && x > 0 && /* @__PURE__ */ r(o, {
+				value: S,
+				label: "Max Length Message",
+				onChange: U,
 				size: "xs"
 			}),
-			D && /* @__PURE__ */ n(a, {
-				value: y,
+			e(u) && /* @__PURE__ */ r(o, {
+				value: C,
+				label: "Invalid Format Message",
+				onChange: W,
+				size: "xs"
+			}),
+			M && /* @__PURE__ */ r(o, {
+				value: w,
 				label: "Pattern (regular expression)",
-				onChange: L,
+				onChange: G,
 				size: "xs"
 			}),
-			D && y && /* @__PURE__ */ n(a, {
-				value: b,
+			M && w && /* @__PURE__ */ r(o, {
+				value: T,
 				label: "Pattern Message",
-				onChange: R,
+				onChange: K,
 				size: "xs"
 			}),
-			D && /* @__PURE__ */ n(a, {
-				value: x,
+			M && /* @__PURE__ */ r(o, {
+				value: E,
 				label: "Must Match Field",
-				onChange: z,
+				onChange: q,
 				size: "xs"
 			}),
-			D && x && /* @__PURE__ */ n(a, {
-				value: S,
+			M && E && /* @__PURE__ */ r(o, {
+				value: D,
 				label: "Mismatch Message",
-				onChange: B,
+				onChange: J,
 				size: "xs"
 			}),
-			/* @__PURE__ */ n(i, {
-				checked: w,
+			/* @__PURE__ */ r(a, {
+				checked: k,
 				label: "Disabled",
-				onChange: H,
+				onChange: X,
 				size: "xs"
 			}),
-			/* @__PURE__ */ n(i, {
-				checked: T,
+			/* @__PURE__ */ r(a, {
+				checked: A,
 				label: "Preview Error Message",
-				onChange: U,
+				onChange: Z,
 				size: "xs"
 			})
 		]
 	});
 };
 //#endregion
-export { l as default };
+export { u as default };

package/dist/elements/form/FormControl/declaration.d.ts

@@ -17,8 +17,12 @@ declare const declaration: {
             readonly disabled: false;
             readonly options: readonly [];
             readonly required: true;
+            readonly requiredMessage: "";
             readonly minLength: 0;
+            readonly minLengthMessage: "";
             readonly maxLength: 0;
+            readonly maxLengthMessage: "";
+            readonly formatMessage: "";
             readonly pattern: "";
             readonly patternMessage: "";
             readonly matches: "";

package/dist/elements/form/FormControl/declaration.mjs

@@ -57,8 +57,12 @@ var t = {
 			disabled: !1,
 			options: [],
 			required: !0,
+			requiredMessage: "",
 			minLength: 0,
+			minLengthMessage: "",
 			maxLength: 0,
+			maxLengthMessage: "",
+			formatMessage: "",
 			pattern: "",
 			patternMessage: "",
 			matches: "",

package/dist/elements/form/FormControl/helpers/validateField.d.ts

@@ -2,11 +2,23 @@
  * What a control asks of its value before the form around it may submit.
  *
  * Zero and the empty string mean "no rule", so a control authored before these existed validates exactly as it did.
+ * Every rule carries the sentence it says when broken, and an empty one falls back to English: the site's language is
+ * the author's to write, never the browser's to guess.
  */
 export type FieldRules = {
     required: boolean;
+    requiredMessage: string;
     minLength: number;
+    minLengthMessage: string;
     maxLength: number;
+    maxLengthMessage: string;
+    /**
+     * The control's `subType`. A type whose value has a shape of its own (see `FORMATS`) is checked against it here,
+     * because a form with `noValidate` leaves nobody else to ask for it.
+     */
+    type: string;
+    /** Said when the value does not have the shape its type asks for, whichever type that is. */
+    formatMessage: string;
     /** A regular expression the WHOLE value must match — anchored here, so an author never has to remember `^…$`. */
     pattern: string;
     patternMessage: string;
@@ -15,6 +27,8 @@ export type FieldRules = {
     matchesMessage: string;
 };
 export declare const REQUIRED_MESSAGE = "This field is required";
+/** Whether a control of this type asks its value for a shape, and so whether a `formatMessage` can ever be said. */
+export declare const hasFormat: (type: string) => boolean;
 /**
  * The first rule a value breaks, as the sentence to show under the control — or `''` when it breaks none.
  *

package/dist/elements/form/FormControl/helpers/validateField.mjs

@@ -1,16 +1,22 @@
 import { get as e } from "@plitzi/plitzi-ui/helpers";
 //#region src/elements/form/FormControl/helpers/validateField.ts
-var t = "This field is required", n = "This is not in the expected format", r = "This does not match", i = (e) => e == null || e === "" || e === !1, a = (e) => typeof e == "string" ? e : typeof e == "number" ? String(e) : "", o = (e, t) => {
+var t = "This field is required", n = "This is not in the expected format", r = "This does not match", i = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, a = /* @__PURE__ */ new Map([["email", {
+	matches: (e) => i.test(e),
+	message: "Enter an email address"
+}]]), o = (e) => a.has(e), s = (e) => e == null || e === "" || e === !1, c = (e) => typeof e == "string" ? e : typeof e == "number" ? String(e) : "", l = (e, t) => {
 	try {
 		return RegExp(`^(?:${t})$`, "u").test(e);
 	} catch {
 		return !1;
 	}
-}, s = (s, c, l) => {
-	if (i(s)) return c.required ? t : "";
-	if (typeof s == "boolean") return "";
-	let u = a(s), d = Array.from(u).length;
-	return c.minLength > 0 && d < c.minLength ? `Use at least ${c.minLength} characters` : c.maxLength > 0 && d > c.maxLength ? `Use at most ${c.maxLength} characters` : c.pattern && !o(u, c.pattern) ? c.patternMessage || n : c.matches && u !== a(e(l, c.matches, "")) ? c.matchesMessage || r : "";
+}, u = (t, i, o) => {
+	if (s(t)) return i.required ? i.requiredMessage || "This field is required" : "";
+	if (typeof t == "boolean") return "";
+	let u = c(t), d = Array.from(u).length;
+	if (i.minLength > 0 && d < i.minLength) return i.minLengthMessage || `Use at least ${i.minLength} characters`;
+	if (i.maxLength > 0 && d > i.maxLength) return i.maxLengthMessage || `Use at most ${i.maxLength} characters`;
+	let f = a.get(i.type);
+	return f && !f.matches(u) ? i.formatMessage || f.message : i.pattern && !l(u, i.pattern) ? i.patternMessage || n : i.matches && u !== c(e(o, i.matches, "")) ? i.matchesMessage || r : "";
 };
 //#endregion
-export { t as REQUIRED_MESSAGE, s as validateField };
+export { t as REQUIRED_MESSAGE, o as hasFormat, u as validateField };

package/dist/elements/form/FormControl/hocs/withFieldValue.d.ts

@@ -5,8 +5,12 @@ export type WithFieldValueProps<T> = {
     defaultValue?: string;
     subType: 'hidden' | 'text' | 'number' | 'email' | 'password' | 'date' | 'time' | 'select' | 'checkbox' | 'textarea' | 'color' | 'switch';
     required: boolean;
+    requiredMessage?: string;
     minLength?: number;
+    minLengthMessage?: string;
     maxLength?: number;
+    maxLengthMessage?: string;
+    formatMessage?: string;
     pattern?: string;
     patternMessage?: string;
     matches?: string;

package/dist/elements/form/FormControl/hocs/withFieldValue.mjs

@@ -8,25 +8,30 @@ import { jsx as c } from "react/jsx-runtime";
 //#region src/elements/form/FormControl/hocs/withFieldValue.tsx
 var l = (l) => {
 	let u = (s) => {
-		let { ref: u, name: d = "", subType: f = "text", defaultValue: p = "", required: m = !0, minLength: h = 0, maxLength: g = 0, pattern: _ = "", patternMessage: v = "", matches: y = "", matchesMessage: b = "", previewError: x = !1 } = s, { settings: { previewMode: S } } = i(), { useStore: C } = o(), [w] = C("runtime.sources.form");
-		if (!w) return /* @__PURE__ */ c(l, { ...s });
-		let { setFieldValue: T, setFieldError: E, registerValidator: D, unregisterValidator: O, errors: k, values: A } = w, j = r(() => a(A, d, p), [
-			A,
+		let { ref: u, name: d = "", subType: f = "text", defaultValue: p = "", required: m = !0, requiredMessage: h = "", minLength: g = 0, minLengthMessage: _ = "", maxLength: v = 0, maxLengthMessage: y = "", formatMessage: b = "", pattern: x = "", patternMessage: S = "", matches: C = "", matchesMessage: w = "", previewError: T = !1 } = s, { settings: { previewMode: E } } = i(), { useStore: D } = o(), [O] = D("runtime.sources.form");
+		if (!O) return /* @__PURE__ */ c(l, { ...s });
+		let { setFieldValue: k, setFieldError: A, registerValidator: j, unregisterValidator: M, errors: N, values: P } = O, F = r(() => a(P, d, p), [
+			P,
 			d,
 			p
-		]), M = r(() => !S && x ? "This is an error message" : k[d], [
-			S,
-			x,
-			k,
+		]), I = r(() => !E && T ? "This is an error message" : N[d], [
+			E,
+			T,
+			N,
 			d
-		]), N = r(() => ({
+		]), L = r(() => ({
 			required: m,
-			minLength: h,
-			maxLength: g,
-			pattern: _,
-			patternMessage: v,
-			matches: y,
-			matchesMessage: b
+			requiredMessage: h,
+			minLength: g,
+			minLengthMessage: _,
+			maxLength: v,
+			maxLengthMessage: y,
+			type: f,
+			formatMessage: b,
+			pattern: x,
+			patternMessage: S,
+			matches: C,
+			matchesMessage: w
 		}), [
 			m,
 			h,
@@ -34,51 +39,56 @@ var l = (l) => {
 			_,
 			v,
 			y,
-			b
+			f,
+			b,
+			x,
+			S,
+			C,
+			w
 		]);
 		n(() => {
-			if (d) return D(d, (t) => e(a(t, d, p), N, t)), () => O(d);
+			if (d) return j(d, (t) => e(a(t, d, p), L, t)), () => M(d);
 		}, [
 			d,
 			p,
-			N,
-			D,
-			O
+			L,
+			j,
+			M
 		]), n(() => {
-			p && j && d && T(d, j);
+			p && F && d && k(d, F);
 		}, [
 			p,
 			d,
-			T,
-			j
+			k,
+			F
 		]);
-		let P = t((e) => {
-			e.target.type === "radio" || e.target.type === "checkbox" || f === "switch" ? T(d, e.target.checked) : T(d, e.target.value);
+		let R = t((e) => {
+			e.target.type === "radio" || e.target.type === "checkbox" || f === "switch" ? k(d, e.target.checked) : k(d, e.target.value);
 		}, [
-			T,
+			k,
 			d,
 			f
-		]), F = t(() => E(d, e(j, N, A)), [
-			j,
-			N,
-			A,
+		]), z = t(() => A(d, e(F, L, P)), [
+			F,
+			L,
+			P,
 			d,
-			E
+			A
 		]);
 		return r(() => /* @__PURE__ */ c(l, {
 			...s,
 			ref: u,
-			value: j,
-			error: M,
-			handleChange: P,
-			handleValidate: F
+			value: F,
+			error: I,
+			handleChange: R,
+			handleValidate: z
 		}), [
 			s,
 			u,
-			M,
-			j,
-			P,
-			F
+			I,
+			F,
+			R,
+			z
 		]);
 	};
 	return u.displayName = `withFieldValue(${s(l)})`, u;

package/dist/elements/form/FormControl/index.d.ts

@@ -22,8 +22,12 @@ declare const FormControl: {
             readonly disabled: false;
             readonly options: readonly [];
             readonly required: true;
+            readonly requiredMessage: "";
             readonly minLength: 0;
+            readonly minLengthMessage: "";
             readonly maxLength: 0;
+            readonly maxLengthMessage: "";
+            readonly formatMessage: "";
             readonly pattern: "";
             readonly patternMessage: "";
             readonly matches: "";

package/dist/index.d.ts

@@ -2576,6 +2576,7 @@ export declare const defaultElements: {
                 readonly method: "get";
                 readonly actionUrl: "";
                 readonly managedByInteractions: false;
+                readonly noValidate: false;
                 readonly errors: {};
                 readonly values: {};
             };
@@ -2617,6 +2618,7 @@ export declare const defaultElements: {
         __attributes: Partial<{
             values: Record<string, unknown>;
             method: "get" | "post";
+            noValidate: boolean;
             actionUrl: string;
             managedByInteractions: boolean;
             errors: Record<string, string>;
@@ -2646,8 +2648,12 @@ export declare const defaultElements: {
                 readonly disabled: false;
                 readonly options: readonly [];
                 readonly required: true;
+                readonly requiredMessage: "";
                 readonly minLength: 0;
+                readonly minLengthMessage: "";
                 readonly maxLength: 0;
+                readonly maxLengthMessage: "";
+                readonly formatMessage: "";
                 readonly pattern: "";
                 readonly patternMessage: "";
                 readonly matches: "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-elements",
-  "version": "0.35.2",
+  "version": "0.35.4",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -986,13 +986,13 @@
   "dependencies": {
     "@plitzi/nexus": "^1.1.4",
     "@plitzi/plitzi-ui": "^1.6.21",
-    "@plitzi/sdk-auth": "0.35.2",
-    "@plitzi/sdk-dev-tools": "0.35.2",
-    "@plitzi/sdk-event-bridge": "0.35.2",
-    "@plitzi/sdk-interactions": "0.35.2",
-    "@plitzi/sdk-navigation": "0.35.2",
-    "@plitzi/sdk-schema": "0.35.2",
-    "@plitzi/sdk-shared": "0.35.2",
+    "@plitzi/sdk-auth": "0.35.4",
+    "@plitzi/sdk-dev-tools": "0.35.4",
+    "@plitzi/sdk-event-bridge": "0.35.4",
+    "@plitzi/sdk-interactions": "0.35.4",
+    "@plitzi/sdk-navigation": "0.35.4",
+    "@plitzi/sdk-schema": "0.35.4",
+    "@plitzi/sdk-shared": "0.35.4",
     "clsx": "^2.1.1",
     "immer": "^11.1.18"
   },