@plitzi/sdk-elements 0.37.2 → 0.37.3

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

@@ -2,95 +2,95 @@ import e from "../../../Element/hocs/withElement.mjs";
 import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.mjs";
 import r from "./declaration.mjs";
-import i from "./components/Label.mjs";
-import a from "./hocs/withFieldValue.mjs";
-import o from "./inputs/Checkbox.mjs";
-import s from "./inputs/Hidden.mjs";
-import c from "./inputs/Input.mjs";
-import l from "./inputs/Select.mjs";
-import u from "./inputs/Textarea.mjs";
-import { use as d, useCallback as f, useEffect as p } from "react";
-import m from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { createStoreHook as h } from "@plitzi/nexus/react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import v from "clsx";
+import { VISUALLY_HIDDEN as i } from "./components/visuallyHidden.mjs";
+import a from "./components/Label.mjs";
+import o from "./hocs/withFieldValue.mjs";
+import s from "./inputs/Checkbox.mjs";
+import c from "./inputs/Hidden.mjs";
+import l from "./inputs/Input.mjs";
+import u from "./inputs/Select.mjs";
+import d from "./inputs/Textarea.mjs";
+import { use as f, useCallback as p, useEffect as m } from "react";
+import h from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { createStoreHook as g } from "@plitzi/nexus/react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import y from "clsx";
 //#region src/elements/form/FormControl/FormControl.tsx
-var y = ({ ref: e, className: a = "", subType: y = "text", name: b = "", label: x = "Label", placeholder: S = "", autoComplete: C = !0, disabled: w = !1, options: T = [], required: E = !0, maxLength: D = 0, readOnly: O = !1, value: k = "", error: A = "", handleChange: j, handleValidate: M }) => {
-	let { id: N, rootId: P, definition: { styleSelectors: F } } = t(), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = m(), { interactionsManager: R } = d(L), { useStore: z } = h(), [B] = z("runtime.sources.form"), V = f((e) => {
-		if (j?.(e), !I) return;
-		let t = e.target, n = t.type === "checkbox" || y === "switch" ? t.checked : t.value;
-		R.interactionTrigger(N, "onChange", {
+var b = ({ ref: e, className: o = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !0, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
+	let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = t(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = h(), { interactionsManager: H } = f(V), { useStore: U } = g(), [W] = U("runtime.sources.form"), G = p((e) => {
+		if (P?.(e), !B) return;
+		let t = e.target, n = t.type === "checkbox" || b === "switch" ? t.checked : t.value;
+		H.interactionTrigger(I, "onChange", {
 			value: n,
-			name: b
+			name: x
 		});
 	}, [
-		j,
-		I,
-		y,
-		R,
-		N,
-		b
-	]);
-	if (!B && !I) return /* @__PURE__ */ g(n, {
-		ref: e,
-		className: v("plitzi-component__form-input", { "form-input--out-of-context": !I }, a),
-		children: /* @__PURE__ */ g("div", { children: "Form Input Only Works inside Form element" })
-	});
-	if (!B && I) return null;
-	let { registerField: H, unregisterField: U } = B, W = ["checkbox", "switch"].includes(y), G = y === "hidden";
-	return p(() => (H && H({
-		name: b,
-		path: b
-	}), () => {
-		U && U(b);
-	}), [
+		P,
+		B,
 		b,
 		H,
-		U
-	]), /* @__PURE__ */ _(n, {
+		I,
+		x
+	]), K = W?.registerField, q = W?.unregisterField, J = ["checkbox", "switch"].includes(b), Y = b === "hidden", X = E && B && R, Z = N && B ? `${L}_${I}_error` : void 0;
+	return m(() => {
+		if (K && q) return K({
+			name: x,
+			path: x
+		}), () => q(x);
+	}, [
+		x,
+		K,
+		q
+	]), /* @__PURE__ */ v(n, {
 		ref: e,
 		interactionTriggers: r.triggers,
-		className: v("plitzi-component__form-control", {
-			"form-control--invalid": A && I,
-			[`plitzi-component__form-control-${y}`]: y
-		}, a),
+		className: y("plitzi-component__form-control", {
+			"form-control--invalid": N && B,
+			[`plitzi-component__form-control-${b}`]: b
+		}, o),
 		children: [
-			!W && !G && x && /* @__PURE__ */ g(i, {
-				targetInput: `${P}_${N}`,
-				previewMode: I,
-				className: F.label,
-				type: y,
-				required: E,
-				children: x
+			!J && !Y && S && /* @__PURE__ */ _(a, {
+				targetInput: `${L}_${I}`,
+				previewMode: B,
+				className: z.label,
+				type: b,
+				required: k,
+				hidden: C && B,
+				children: S
 			}),
-			W && x && /* @__PURE__ */ _(i, {
-				targetInput: `${P}_${N}`,
-				previewMode: I,
-				className: F.label,
-				type: y,
-				required: E,
-				children: [y === "checkbox" && /* @__PURE__ */ g(o, {
-					id: `${P}_${N}`,
-					name: b,
-					value: k,
-					className: F.input,
-					placeholder: S,
-					required: E,
-					disabled: w,
-					onChange: V,
-					onValidate: M
-				}), x]
+			J && S && /* @__PURE__ */ v(a, {
+				targetInput: `${L}_${I}`,
+				previewMode: B,
+				className: z.label,
+				type: b,
+				required: k,
+				children: [b === "checkbox" && /* @__PURE__ */ _(s, {
+					id: `${L}_${I}`,
+					name: x,
+					value: M,
+					className: z.input,
+					placeholder: w,
+					required: k,
+					disabled: D,
+					onChange: G,
+					onValidate: F,
+					errorId: Z
+				}), C && B ? /* @__PURE__ */ _("span", {
+					style: i,
+					children: S
+				}) : S]
 			}),
-			y === "checkbox" && !x && /* @__PURE__ */ g(o, {
-				id: `${P}_${N}`,
-				name: b,
-				value: k,
-				className: F.input,
-				placeholder: S,
-				required: E,
-				disabled: w,
-				onChange: V,
-				onValidate: M
+			b === "checkbox" && !S && /* @__PURE__ */ _(s, {
+				id: `${L}_${I}`,
+				name: x,
+				value: M,
+				className: z.input,
+				placeholder: w,
+				required: k,
+				disabled: D,
+				onChange: G,
+				onValidate: F,
+				errorId: Z
 			}),
 			[
 				"text",
@@ -98,60 +98,68 @@ var y = ({ ref: e, className: a = "", subType: y = "text", name: b = "", label:
 				"email",
 				"password",
 				"date",
-				"time"
-			].includes(y) && /* @__PURE__ */ g(c, {
-				id: `${P}_${N}`,
-				name: b,
-				value: k,
-				type: y,
-				className: F.input,
-				placeholder: S,
-				autoComplete: y !== "password" && C,
-				required: E,
-				maxLength: D,
-				disabled: w,
-				readOnly: O || !I,
-				onChange: V,
-				onValidate: M
+				"time",
+				"color"
+			].includes(b) && /* @__PURE__ */ _(l, {
+				id: `${L}_${I}`,
+				name: x,
+				value: M,
+				type: b,
+				className: z.input,
+				placeholder: w,
+				autoComplete: b !== "password" && T,
+				autoFocus: X,
+				required: k,
+				maxLength: A,
+				disabled: D,
+				readOnly: j || !B,
+				onChange: G,
+				onValidate: F,
+				errorId: Z
 			}),
-			y === "hidden" && /* @__PURE__ */ g(s, {
-				id: `${P}_${N}`,
-				name: b,
-				value: k,
-				required: E,
-				disabled: w,
-				previewMode: I
+			b === "hidden" && /* @__PURE__ */ _(c, {
+				id: `${L}_${I}`,
+				name: x,
+				value: M,
+				required: k,
+				disabled: D,
+				previewMode: B
 			}),
-			y === "select" && /* @__PURE__ */ g(l, {
-				id: `${P}_${N}`,
-				name: b,
-				onChange: V,
-				onValidate: M,
-				value: k,
-				className: F.input,
-				placeholder: S,
-				disabled: w,
-				options: T
+			b === "select" && /* @__PURE__ */ _(u, {
+				id: `${L}_${I}`,
+				name: x,
+				onChange: G,
+				onValidate: F,
+				errorId: Z,
+				value: M,
+				className: z.input,
+				placeholder: w,
+				disabled: D,
+				options: O
 			}),
-			y === "textarea" && /* @__PURE__ */ g(u, {
-				id: `${P}_${N}`,
-				name: b,
-				value: k,
-				className: F.input,
-				placeholder: S,
-				required: E,
-				maxLength: D,
-				disabled: w,
-				readOnly: O,
-				onChange: V,
-				onValidate: M
+			b === "textarea" && /* @__PURE__ */ _(d, {
+				id: `${L}_${I}`,
+				name: x,
+				value: M,
+				className: z.input,
+				placeholder: w,
+				autoFocus: X,
+				required: k,
+				maxLength: A,
+				disabled: D,
+				readOnly: j,
+				onChange: G,
+				onValidate: F,
+				errorId: Z
 			}),
-			A && /* @__PURE__ */ g("div", {
-				className: v("form-control__error-message", F.error),
-				children: A
+			N && /* @__PURE__ */ _("div", {
+				id: Z,
+				role: "alert",
+				className: y("form-control__error-message", z.error),
+				children: N
 			})
 		]
 	});
-}, b = e(a(y));
+}, x = e(o(b));
 //#endregion
-export { y as FormControl, b as default };
+export { b as FormControl, x as default };

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

@@ -2,8 +2,10 @@ type SettingsProps = {
     subType?: 'text' | 'number' | 'date' | 'time' | 'email' | 'password' | 'select' | 'checkbox' | 'textarea' | 'hidden' | 'color' | 'switch';
     name?: string;
     label?: string;
+    hideLabel?: boolean;
     placeholder?: string;
     autoComplete?: boolean;
+    autoFocus?: boolean;
     defaultValue?: string;
     options?: string[];
     required?: boolean;
@@ -22,5 +24,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, requiredMessage, minLength, minLengthMessage, maxLength, maxLengthMessage, formatMessage, pattern, patternMessage, matches, matchesMessage, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ subType, name, label, hideLabel, defaultValue, placeholder, autoComplete, autoFocus, 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

@@ -9,46 +9,52 @@ import c from "@plitzi/plitzi-ui/Select";
 var l = (e) => {
 	let t = parseInt(e, 10);
 	return Number.isNaN(t) || t < 0 ? 0 : t;
-}, 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 = [
+}, u = ({ subType: u = "text", name: d = "", label: f = "Label", hideLabel: p = !1, defaultValue: m = "", placeholder: h = "", autoComplete: g = !0, autoFocus: _ = !1, options: v, required: y = !0, requiredMessage: b = "", minLength: x = 0, minLengthMessage: S = "", maxLength: C = 0, maxLengthMessage: w = "", formatMessage: T = "", pattern: E = "", patternMessage: D = "", matches: O = "", matchesMessage: k = "", readOnly: A = !1, disabled: j = !1, previewError: M = !1, onUpdate: N }) => {
+	let P = [
 		"text",
 		"textarea",
 		"number",
 		"email",
 		"password"
-	].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) => {
+	].includes(u), F = t((e) => N?.("name", e), [N]), I = t((e) => N?.("label", e), [N]), L = t((e) => N?.("hideLabel", e.target.checked), [N]), ee = t((e) => N?.("placeholder", e), [N]), R = t((e) => {
+		N?.("subType", e), N?.("defaultValue", "");
+	}, [N]), z = t((e) => N?.("defaultValue", e), [N]), B = t((e) => N?.("autoFocus", e.target.checked), [N]), V = t((e) => N?.("autoComplete", e.target.checked), [N]), H = t((e) => N?.("required", e.target.checked), [N]), U = t((e) => N?.("requiredMessage", e), [N]), W = t((e) => N?.("minLength", l(e)), [N]), G = t((e) => N?.("minLengthMessage", e), [N]), K = t((e) => N?.("maxLength", l(e)), [N]), q = t((e) => N?.("maxLengthMessage", e), [N]), J = t((e) => N?.("formatMessage", e), [N]), Y = t((e) => N?.("pattern", e), [N]), X = t((e) => N?.("patternMessage", e), [N]), Z = t((e) => N?.("matches", e), [N]), Q = t((e) => N?.("matchesMessage", e), [N]), $ = t((e) => N?.("readOnly", e.target.checked), [N]), te = t((e) => N?.("disabled", e.target.checked), [N]), ne = t((e) => N?.("previewError", e.target.checked), [N]), re = t((e) => {
 		if (!e) {
-			j?.("options", []);
+			N?.("options", []);
 			return;
 		}
-		j?.("options", e.split("\n"));
-	}, [j]), $ = n(() => Array.isArray(g) ? g.join("\n") : "", [g]);
+		N?.("options", e.split("\n"));
+	}, [N]), ie = n(() => Array.isArray(v) ? v.join("\n") : "", [v]);
 	return /* @__PURE__ */ i("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ r(o, {
 				value: d,
 				label: "Input Name",
-				onChange: N,
+				onChange: F,
 				size: "xs"
 			}),
 			/* @__PURE__ */ r(o, {
 				value: f,
 				label: "Label",
-				onChange: ee,
+				onChange: I,
+				size: "xs"
+			}),
+			/* @__PURE__ */ r(a, {
+				checked: p,
+				label: "Hide Label (still read by screen readers)",
+				onChange: L,
 				size: "xs"
 			}),
 			/* @__PURE__ */ r(o, {
-				value: m,
+				value: h,
 				label: "Placeholder",
-				onChange: P,
+				onChange: ee,
 				size: "xs"
 			}),
 			/* @__PURE__ */ i(c, {
 				value: u,
-				onChange: F,
+				onChange: R,
 				label: "Input Type",
 				size: "xs",
 				children: [
@@ -91,109 +97,119 @@ var l = (e) => {
 					/* @__PURE__ */ r("option", {
 						value: "hidden",
 						children: "Hidden"
+					}),
+					/* @__PURE__ */ r("option", {
+						value: "color",
+						children: "Color"
 					})
 				]
 			}),
 			/* @__PURE__ */ r(s, {
-				value: p,
+				value: m,
 				label: "Default Value",
-				onChange: I,
+				onChange: z,
 				size: "xs"
 			}),
 			u === "text" && /* @__PURE__ */ r(a, {
-				checked: h,
+				checked: g,
 				label: "Auto Complete",
-				onChange: L,
+				onChange: V,
 				size: "xs"
 			}),
-			M && /* @__PURE__ */ r(a, {
-				checked: O,
+			P && /* @__PURE__ */ r(a, {
+				checked: A,
 				label: "Read Only",
-				onChange: Y,
+				onChange: $,
+				size: "xs"
+			}),
+			/* @__PURE__ */ r(a, {
+				checked: _,
+				label: "Focus When Shown",
+				onChange: B,
 				size: "xs"
 			}),
 			u === "select" && /* @__PURE__ */ r(s, {
-				value: $,
+				value: ie,
 				label: "Options",
-				onChange: Q,
+				onChange: re,
 				size: "xs"
 			}),
 			/* @__PURE__ */ r(a, {
-				checked: _,
+				checked: y,
 				label: "Required",
-				onChange: R,
+				onChange: H,
 				size: "xs"
 			}),
-			_ && /* @__PURE__ */ r(o, {
-				value: v,
+			y && /* @__PURE__ */ r(o, {
+				value: b,
 				label: "Required Message",
-				onChange: z,
+				onChange: U,
 				size: "xs"
 			}),
-			M && /* @__PURE__ */ r(o, {
-				value: y ? String(y) : "",
+			P && /* @__PURE__ */ r(o, {
+				value: x ? String(x) : "",
 				label: "Min Length",
-				onChange: B,
+				onChange: W,
 				size: "xs"
 			}),
-			M && y > 0 && /* @__PURE__ */ r(o, {
-				value: b,
+			P && x > 0 && /* @__PURE__ */ r(o, {
+				value: S,
 				label: "Min Length Message",
-				onChange: V,
+				onChange: G,
 				size: "xs"
 			}),
-			M && /* @__PURE__ */ r(o, {
-				value: x ? String(x) : "",
+			P && /* @__PURE__ */ r(o, {
+				value: C ? String(C) : "",
 				label: "Max Length",
-				onChange: H,
+				onChange: K,
 				size: "xs"
 			}),
-			M && x > 0 && /* @__PURE__ */ r(o, {
-				value: S,
+			P && C > 0 && /* @__PURE__ */ r(o, {
+				value: w,
 				label: "Max Length Message",
-				onChange: U,
+				onChange: q,
 				size: "xs"
 			}),
 			e(u) && /* @__PURE__ */ r(o, {
-				value: C,
+				value: T,
 				label: "Invalid Format Message",
-				onChange: W,
+				onChange: J,
 				size: "xs"
 			}),
-			M && /* @__PURE__ */ r(o, {
-				value: w,
+			P && /* @__PURE__ */ r(o, {
+				value: E,
 				label: "Pattern (regular expression)",
-				onChange: G,
+				onChange: Y,
 				size: "xs"
 			}),
-			M && w && /* @__PURE__ */ r(o, {
-				value: T,
+			P && E && /* @__PURE__ */ r(o, {
+				value: D,
 				label: "Pattern Message",
-				onChange: K,
+				onChange: X,
 				size: "xs"
 			}),
-			M && /* @__PURE__ */ r(o, {
-				value: E,
+			P && /* @__PURE__ */ r(o, {
+				value: O,
 				label: "Must Match Field",
-				onChange: q,
+				onChange: Z,
 				size: "xs"
 			}),
-			M && E && /* @__PURE__ */ r(o, {
-				value: D,
+			P && O && /* @__PURE__ */ r(o, {
+				value: k,
 				label: "Mismatch Message",
-				onChange: J,
+				onChange: Q,
 				size: "xs"
 			}),
 			/* @__PURE__ */ r(a, {
-				checked: k,
+				checked: j,
 				label: "Disabled",
-				onChange: X,
+				onChange: te,
 				size: "xs"
 			}),
 			/* @__PURE__ */ r(a, {
-				checked: A,
+				checked: M,
 				label: "Preview Error Message",
-				onChange: Z,
+				onChange: ne,
 				size: "xs"
 			})
 		]

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

@@ -7,6 +7,8 @@ export type LabelProps = {
     type: string;
     previewMode?: boolean;
     required: boolean;
+    /** Named for assistive technology only: the field's design shows what it is for some other way. */
+    hidden?: boolean;
 };
-declare const Label: ({ ref, children, targetInput, type, previewMode, required, className }: LabelProps) => import('react').JSX.Element;
+declare const Label: ({ ref, children, targetInput, type, previewMode, required, hidden, className }: LabelProps) => import('react').JSX.Element;
 export default Label;

package/dist/elements/form/FormControl/components/Label.mjs

@@ -1,28 +1,30 @@
-import { useCallback as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "clsx";
+import { VISUALLY_HIDDEN as e } from "./visuallyHidden.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/elements/form/FormControl/components/Label.tsx
-var i = ({ ref: i, children: a, targetInput: o = "", type: s = "text", previewMode: c = !0, required: l = !0, className: u = "" }) => {
-	let d = e((e) => {
-		c || e.preventDefault();
-	}, [c]);
-	return c ? /* @__PURE__ */ n("label", {
-		ref: i,
-		className: r(`form-control__label-${s}`, u),
-		htmlFor: o,
-		children: [a, l && a && /* @__PURE__ */ t("span", {
+var a = ({ ref: a, children: o, targetInput: s = "", type: c = "text", previewMode: l = !0, required: u = !0, hidden: d = !1, className: f = "" }) => {
+	let p = t((e) => {
+		l || e.preventDefault();
+	}, [l]);
+	return l ? /* @__PURE__ */ r("label", {
+		ref: a,
+		className: i(`form-control__label-${c}`, f),
+		htmlFor: s,
+		style: d ? e : void 0,
+		children: [o, u && o && /* @__PURE__ */ n("span", {
 			className: "form-control__label--required",
 			children: "*"
 		})]
-	}) : /* @__PURE__ */ n("label", {
-		ref: i,
-		className: r(`form-control__label-${s}`, u),
-		onClick: d,
-		children: [a, l && a && /* @__PURE__ */ t("span", {
+	}) : /* @__PURE__ */ r("label", {
+		ref: a,
+		className: i(`form-control__label-${c}`, f),
+		onClick: p,
+		children: [o, u && o && /* @__PURE__ */ n("span", {
 			className: "form-control__label--required",
 			children: "*"
 		})]
 	});
 };
 //#endregion
-export { i as default };
+export { a as default };

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

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+/**
+ * Out of sight and still read: the label keeps naming its field for screen readers and browser agents. Inline, so no
+ * class the space puts on the label slot can bring it back into view.
+ */
+export declare const VISUALLY_HIDDEN: CSSProperties;

package/dist/elements/form/FormControl/components/visuallyHidden.mjs

@@ -0,0 +1,14 @@
+//#region src/elements/form/FormControl/components/visuallyHidden.ts
+var e = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	padding: 0,
+	margin: "-1px",
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+//#endregion
+export { e as VISUALLY_HIDDEN };

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

@@ -8,6 +8,9 @@ export type FormControlAttributes = AuthorableAttributes<FormControlProps, 'valu
 };
 declare const declaration: {
     readonly type: "formControl";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly triggers: {
         readonly onChange: {
             readonly action: "onChange";
@@ -25,9 +28,11 @@ declare const declaration: {
             readonly subType: "text";
             readonly name: "";
             readonly label: "Label";
+            readonly hideLabel: false;
             readonly placeholder: "";
             readonly defaultValue: "";
             readonly autoComplete: true;
+            readonly autoFocus: false;
             readonly disabled: false;
             readonly options: readonly [];
             readonly required: true;