@skdx/vue 0.28.0 → 0.30.0

package/dist/form/Form.vue.d.cts

@@ -1,95 +1,50 @@
+import { type ValiditySnapshot } from './context.cjs';
 import { type FormErrors } from './serverErrors.cjs';
 /** When a Form refreshes a control's validity outside the submit pass. */
 type FormValidationMode = 'submit' | 'blur' | 'change';
 /** Whether a Form refuses an invalid submit or only annotates it. */
 type FormValidationBehavior = 'native' | 'aria';
 /**
- * The Vue implementation of the shared Form contract (see `@skdx/shared`'s
- * `formContract`). Renders a native `<form>` and wires the browser's native
- * Constraint Validation API into a headless error-message system: on
- * submit, `checkValidity()` runs across every field; if any fail, the
- * native `invalid` event is captured (suppressing the browser's
- * validation-bubble UI) to snapshot that field's validity via a
- * capture-phase listener, the submit is prevented, and `submit` is not
- * emitted. Fields are also re-validated on `blur` and `change`.
- *
- * No custom validators — `required`/`pattern`/`min`/`type="email"` etc. on
- * the consumer's own input do the validating.
+ * Renders a native `<form>` wiring the browser's Constraint Validation API into a headless error-message system.
  *
  * ```vue
  * <SkdxForm error-summary="There is a problem" submit-label="Save" @submit="save">
  *   <SkdxFormField name="email" label="Email"><input type="email" required /></SkdxFormField>
  * </SkdxForm>
  * ```
- *
- * `SkdxFormField` stays public — placing it is a real decision about where
- * one field ends and the next begins. Its label, control wiring and message
- * are derived. The error summary and the submit button are derived only from
- * `errorSummary`/`submitLabel`, which carry their own copy: with neither set
- * the form derives nothing at all. Per-`ValidityState` messages and manual
- * placement of either are advanced primitives —
- * `@skdx/vue/primitives/form`, whose `SkdxForm` is this same component.
  */
 type __VLS_Props = {
     /**
-     * Errors the browser cannot derive, keyed by the `name` a `SkdxFormField`
-     * already carries: a server response, a cross-field rule, an async
-     * uniqueness check. Each entry is shown by that field's catch-all
-     * `SkdxFormMessage` (the one with no `match`) ahead of any native message,
-     * and marks its control `aria-invalid` so a `SkdxFormErrorSummary` lists
-     * it.
-     *
-     * Cleared per field on that field's next `change`, so an error the user
-     * has already acted on stops being announced without the consumer having
-     * to clear it themselves. Re-supply the prop to raise it again.
+     * Errors the browser cannot derive, keyed by the `name` a `SkdxFormField` carries.
      * @default undefined — no server errors.
      */
-    errors?: FormErrors;
+    errors?: FormErrors | undefined;
     /**
-     * When a control's validity snapshot is refreshed, and therefore when its
-     * `SkdxFormMessage`s may start showing. `change` refreshes on both `change`
-     * and `blur`; `blur` on blur only; `submit` on nothing but the submit pass,
-     * which is what a form that must stay quiet until the user has finished
-     * wants. The submit-time pass is always captured whatever the mode — it is
-     * what snapshots the failure the submit was blocked on. A `SkdxField`
-     * inside this form is unaffected: it owns its own engine and its own
-     * `mode`.
+     * When a control's validity snapshot is refreshed, and so when its `SkdxFormMessage`s may start showing.
      * @default 'change'
      */
     validationMode?: FormValidationMode;
     /**
      * Whether a failed validation refuses the submit or only annotates it.
-     * `native` is the platform's behaviour. `aria` sets `novalidate` on the
-     * `<form>` and skips the gate, so the submit goes through with every
-     * failing control already marked `aria-invalid` and described by its
-     * message — what a client-routed or server-action form needs. The snapshots
-     * are still taken first, so the messages are on screen when `submit` is
-     * emitted.
      * @default 'native'
      */
     validationBehavior?: FormValidationBehavior;
     /**
-     * Heading for a derived `SkdxFormErrorSummary` — the GOV.UK
-     * "There is a problem" pattern, a `role="alert"` list of one link per
-     * failing field, focused the first time it appears. The prop carries the
-     * copy rather than a flag, because that heading is the consumer's wording
-     * in the consumer's language and nothing in this library can invent it.
+     * Heading for a derived `SkdxFormErrorSummary`, the GOV.UK "There is a problem" pattern.
      * @default undefined — no summary is derived, and nothing takes focus.
      */
-    errorSummary?: string;
+    errorSummary?: string | undefined;
     /**
-     * Label for a derived `SkdxFormSubmit` button, placed after the form's
-     * own content. Same reasoning as `errorSummary`: the copy is the prop.
+     * Label for a derived `SkdxFormSubmit` button, placed after the form's own content.
      * @default undefined — no submit button is derived.
      */
-    submitLabel?: string;
+    submitLabel?: string | undefined;
+    /**
+     * How tightly the skin packs the form's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
 };
-/**
- * The contract's imperative pass: every control's native validity, plus every
- * descendant `SkdxField`'s own validation model, with no short-circuit so the
- * user sees all the errors at once. Moves no focus — a consumer may call it on
- * every keystroke.
- */
 declare function validate(): Promise<boolean>;
 declare var __VLS_4: {};
 type __VLS_Slots = {} & {
@@ -98,32 +53,25 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     /** The underlying native form element. */
     el: import("vue").Ref<HTMLFormElement | null, HTMLFormElement | null>;
-    /**
-     * Runs every control's native validity and every descendant `SkdxField`'s own
-     * validation model, with no short-circuit, and resolves to whether all
-     * passed. Moves no focus, so it is safe to call on every keystroke.
-     */
+    /** Runs every control's native validity and every descendant `SkdxField`'s own model, resolving to whether all passed. */
     validate: typeof validate;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
     reset: (event: Event) => any;
     "field-invalid": (detail: {
         name: string;
-        validity: ValidityState;
+        validity: ValiditySnapshot;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSubmit?: ((event: Event) => any) | undefined;
-    onReset?: ((event: Event) => any) | undefined;
-    "onField-invalid"?: ((detail: {
+    onSubmit?: (event: Event) => any;
+    onReset?: (event: Event) => any;
+    "onField-invalid"?: (detail: {
         name: string;
-        validity: ValidityState;
-    }) => any) | undefined;
+        validity: ValiditySnapshot;
+    }) => any;
 }>, {
-    errors: FormErrors;
     validationMode: FormValidationMode;
     validationBehavior: FormValidationBehavior;
-    errorSummary: string;
-    submitLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,95 +1,50 @@
+import { type ValiditySnapshot } from './context.js';
 import { type FormErrors } from './serverErrors.js';
 /** When a Form refreshes a control's validity outside the submit pass. */
 type FormValidationMode = 'submit' | 'blur' | 'change';
 /** Whether a Form refuses an invalid submit or only annotates it. */
 type FormValidationBehavior = 'native' | 'aria';
 /**
- * The Vue implementation of the shared Form contract (see `@skdx/shared`'s
- * `formContract`). Renders a native `<form>` and wires the browser's native
- * Constraint Validation API into a headless error-message system: on
- * submit, `checkValidity()` runs across every field; if any fail, the
- * native `invalid` event is captured (suppressing the browser's
- * validation-bubble UI) to snapshot that field's validity via a
- * capture-phase listener, the submit is prevented, and `submit` is not
- * emitted. Fields are also re-validated on `blur` and `change`.
- *
- * No custom validators — `required`/`pattern`/`min`/`type="email"` etc. on
- * the consumer's own input do the validating.
+ * Renders a native `<form>` wiring the browser's Constraint Validation API into a headless error-message system.
  *
  * ```vue
  * <SkdxForm error-summary="There is a problem" submit-label="Save" @submit="save">
  *   <SkdxFormField name="email" label="Email"><input type="email" required /></SkdxFormField>
  * </SkdxForm>
  * ```
- *
- * `SkdxFormField` stays public — placing it is a real decision about where
- * one field ends and the next begins. Its label, control wiring and message
- * are derived. The error summary and the submit button are derived only from
- * `errorSummary`/`submitLabel`, which carry their own copy: with neither set
- * the form derives nothing at all. Per-`ValidityState` messages and manual
- * placement of either are advanced primitives —
- * `@skdx/vue/primitives/form`, whose `SkdxForm` is this same component.
  */
 type __VLS_Props = {
     /**
-     * Errors the browser cannot derive, keyed by the `name` a `SkdxFormField`
-     * already carries: a server response, a cross-field rule, an async
-     * uniqueness check. Each entry is shown by that field's catch-all
-     * `SkdxFormMessage` (the one with no `match`) ahead of any native message,
-     * and marks its control `aria-invalid` so a `SkdxFormErrorSummary` lists
-     * it.
-     *
-     * Cleared per field on that field's next `change`, so an error the user
-     * has already acted on stops being announced without the consumer having
-     * to clear it themselves. Re-supply the prop to raise it again.
+     * Errors the browser cannot derive, keyed by the `name` a `SkdxFormField` carries.
      * @default undefined — no server errors.
      */
-    errors?: FormErrors;
+    errors?: FormErrors | undefined;
     /**
-     * When a control's validity snapshot is refreshed, and therefore when its
-     * `SkdxFormMessage`s may start showing. `change` refreshes on both `change`
-     * and `blur`; `blur` on blur only; `submit` on nothing but the submit pass,
-     * which is what a form that must stay quiet until the user has finished
-     * wants. The submit-time pass is always captured whatever the mode — it is
-     * what snapshots the failure the submit was blocked on. A `SkdxField`
-     * inside this form is unaffected: it owns its own engine and its own
-     * `mode`.
+     * When a control's validity snapshot is refreshed, and so when its `SkdxFormMessage`s may start showing.
      * @default 'change'
      */
     validationMode?: FormValidationMode;
     /**
      * Whether a failed validation refuses the submit or only annotates it.
-     * `native` is the platform's behaviour. `aria` sets `novalidate` on the
-     * `<form>` and skips the gate, so the submit goes through with every
-     * failing control already marked `aria-invalid` and described by its
-     * message — what a client-routed or server-action form needs. The snapshots
-     * are still taken first, so the messages are on screen when `submit` is
-     * emitted.
      * @default 'native'
      */
     validationBehavior?: FormValidationBehavior;
     /**
-     * Heading for a derived `SkdxFormErrorSummary` — the GOV.UK
-     * "There is a problem" pattern, a `role="alert"` list of one link per
-     * failing field, focused the first time it appears. The prop carries the
-     * copy rather than a flag, because that heading is the consumer's wording
-     * in the consumer's language and nothing in this library can invent it.
+     * Heading for a derived `SkdxFormErrorSummary`, the GOV.UK "There is a problem" pattern.
      * @default undefined — no summary is derived, and nothing takes focus.
      */
-    errorSummary?: string;
+    errorSummary?: string | undefined;
     /**
-     * Label for a derived `SkdxFormSubmit` button, placed after the form's
-     * own content. Same reasoning as `errorSummary`: the copy is the prop.
+     * Label for a derived `SkdxFormSubmit` button, placed after the form's own content.
      * @default undefined — no submit button is derived.
      */
-    submitLabel?: string;
+    submitLabel?: string | undefined;
+    /**
+     * How tightly the skin packs the form's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
 };
-/**
- * The contract's imperative pass: every control's native validity, plus every
- * descendant `SkdxField`'s own validation model, with no short-circuit so the
- * user sees all the errors at once. Moves no focus — a consumer may call it on
- * every keystroke.
- */
 declare function validate(): Promise<boolean>;
 declare var __VLS_4: {};
 type __VLS_Slots = {} & {
@@ -98,32 +53,25 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     /** The underlying native form element. */
     el: import("vue").Ref<HTMLFormElement | null, HTMLFormElement | null>;
-    /**
-     * Runs every control's native validity and every descendant `SkdxField`'s own
-     * validation model, with no short-circuit, and resolves to whether all
-     * passed. Moves no focus, so it is safe to call on every keystroke.
-     */
+    /** Runs every control's native validity and every descendant `SkdxField`'s own model, resolving to whether all passed. */
     validate: typeof validate;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
     reset: (event: Event) => any;
     "field-invalid": (detail: {
         name: string;
-        validity: ValidityState;
+        validity: ValiditySnapshot;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSubmit?: ((event: Event) => any) | undefined;
-    onReset?: ((event: Event) => any) | undefined;
-    "onField-invalid"?: ((detail: {
+    onSubmit?: (event: Event) => any;
+    onReset?: (event: Event) => any;
+    "onField-invalid"?: (detail: {
         name: string;
-        validity: ValidityState;
-    }) => any) | undefined;
+        validity: ValiditySnapshot;
+    }) => any;
 }>, {
-    errors: FormErrors;
     validationMode: FormValidationMode;
     validationBehavior: FormValidationBehavior;
-    errorSummary: string;
-    submitLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/form/Form.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const E=require("../field/fieldCore.cjs"),p=require("./context.cjs"),B=require("./FormErrorSummary.vue.cjs"),S=require("./FormSubmit.vue.cjs"),x=require("./serverErrors.cjs");let r=require("vue");var C=["novalidate"],M={class:"skdx-form__error-summary-title"},N=(0,r.defineComponent)({__name:"Form",props:{errors:{default:void 0},validationMode:{default:"change"},validationBehavior:{default:"native"},errorSummary:{default:void 0},submitLabel:{default:void 0}},emits:["submit","reset","field-invalid"],setup(a,{expose:q,emit:g}){const n=a,l=g,u=(0,r.ref)(null),d=(0,r.ref)({});function c(e){if(!e||!("validity"in e)||!("name"in e))return;const t=e;t.name&&(d.value={...d.value,[t.name]:p.snapshotValidity(t.validity)})}let f=!1,s=null;function v(e){e.preventDefault(),c(e.target);const t=e.target;if(t?.name&&t.validity&&l("field-invalid",{name:t.name,validity:t.validity}),s)return;s=e.target;const m=f||n.validationBehavior==="aria";queueMicrotask(()=>{const _=s;if(s=null,!_||m)return;const b=i?.querySelector("[data-skdx-error-summary]");b&&!b.hasAttribute("hidden")||_.focus()})}function h(e){n.validationMode!=="submit"&&c(e.target)}const o=(0,r.ref)([]);(0,r.watch)(()=>n.errors,()=>{o.value=[]});function y(e){n.validationMode==="change"&&c(e.target);const t=e.target?.name;!t||o.value.includes(t)||(o.value=[...o.value,t])}function F(e){return o.value.includes(e)?[]:x.normalizeFormErrors(n.errors?.[e])}let i=null;(0,r.onMounted)(()=>{const e=u.value;e&&(i=e,e.addEventListener("invalid",v,!0),e.addEventListener("blur",h,!0),e.addEventListener("change",y,!0),e.addEventListener("reset",k))}),(0,r.onUnmounted)(()=>{i&&(i.removeEventListener("invalid",v,!0),i.removeEventListener("blur",h,!0),i.removeEventListener("change",y,!0),i.removeEventListener("reset",k))});function k(e){d.value={},o.value=[],i&&E.resetFields(i),l("reset",e)}function L(e){if(e.defaultPrevented)return;const t=u.value;if(t){if(n.validationBehavior==="aria"){t.checkValidity(),l("submit",e);return}if(!t.checkValidity()){e.preventDefault();return}l("submit",e)}}async function V(){const e=u.value;if(!e)return!0;f=!0;const t=e.checkValidity();f=!1;const m=await E.validateFields(e);return t&&m}return(0,r.provide)(p.FORM_CONTEXT,{validities:d,serverErrors:F}),q({el:u,validate:V}),(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("form",{class:"skdx-form","data-part":"root","data-skdx-component":"form",ref_key:"formRef",ref:u,novalidate:a.validationBehavior==="aria"||void 0,onSubmit:L},[a.errorSummary?((0,r.openBlock)(),(0,r.createBlock)(B.default,{key:0},{default:(0,r.withCtx)(()=>[(0,r.createElementVNode)("h2",M,(0,r.toDisplayString)(a.errorSummary),1)]),_:1})):(0,r.createCommentVNode)("",!0),(0,r.renderSlot)(e.$slots,"default"),a.submitLabel?((0,r.openBlock)(),(0,r.createBlock)(S.default,{key:1},{default:(0,r.withCtx)(()=>[(0,r.createTextVNode)((0,r.toDisplayString)(a.submitLabel),1)]),_:1})):(0,r.createCommentVNode)("",!0)],40,C))}});exports.default=N;
+const S=require("../utils/appearance.cjs"),E=require("../utils/field-core.cjs"),v=require("./context.cjs"),B=require("./FormErrorSummary.vue.cjs"),x=require("./FormSubmit.vue.cjs"),C=require("./serverErrors.cjs");let r=require("vue");var M=["novalidate"],N={class:"skdx-form__error-summary-title"},R=(0,r.defineComponent)({inheritAttrs:!1,__name:"Form",props:{errors:{},validationMode:{default:"change"},validationBehavior:{default:"native"},errorSummary:{},submitLabel:{},density:{}},emits:["submit","reset","field-invalid"],setup(i,{expose:g,emit:V}){const n=i,l=V,u=(0,r.ref)(null),s=(0,r.ref)({});function c(e){if(!e||!("validity"in e)||!("name"in e))return;const t=e;t.name&&(s.value={...s.value,[t.name]:v.snapshotValidity(t.validity)})}let m=!1,d=null;function y(e){e.preventDefault(),c(e.target);const t=e.target;if(t?.name&&t.validity&&l("field-invalid",{name:t.name,validity:v.snapshotValidity(t.validity)}),d)return;d=e.target;const f=m||n.validationBehavior==="aria";queueMicrotask(()=>{const p=d;if(d=null,!p||f)return;const q=a?.querySelector("[data-skdx-error-summary]");q&&!q.hasAttribute("hidden")||p.focus()})}function h(e){n.validationMode!=="submit"&&c(e.target)}const o=(0,r.ref)([]);(0,r.watch)(()=>n.errors,()=>{o.value=[]});function b(e){n.validationMode==="change"&&c(e.target);const t=e.target?.name;!t||o.value.includes(t)||(o.value=[...o.value,t])}function _(e){return o.value.includes(e)?[]:C.normalizeFormErrors(n.errors?.[e])}let a=null;(0,r.onMounted)(()=>{const e=u.value;e&&(a=e,e.addEventListener("invalid",y,!0),e.addEventListener("blur",h,!0),e.addEventListener("change",b,!0),e.addEventListener("reset",k))}),(0,r.onUnmounted)(()=>{a&&(a.removeEventListener("invalid",y,!0),a.removeEventListener("blur",h,!0),a.removeEventListener("change",b,!0),a.removeEventListener("reset",k))});function k(e){s.value={},o.value=[],a&&E.resetFields(a),l("reset",e)}function F(e){if(e.defaultPrevented)return;const t=u.value;if(t){if(n.validationBehavior==="aria"){t.checkValidity(),l("submit",e);return}if(!t.checkValidity()){e.preventDefault();return}l("submit",e)}}async function L(){const e=u.value;if(!e)return!0;m=!0;const t=e.checkValidity();m=!1;const f=await E.validateFields(e);return t&&f}return(0,r.provide)(v.FORM_CONTEXT,{validities:s,serverErrors:_}),g({el:u,validate:L}),(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("form",(0,r.mergeProps)({ref_key:"formRef",ref:u,class:"skdx-form","data-part":"root","data-skdx-component":"form",novalidate:i.validationBehavior==="aria"||void 0},{...e.$attrs,...(0,r.unref)(S.appearanceAttrs)({density:i.density},e.$attrs)},{onSubmit:F}),[i.errorSummary?((0,r.openBlock)(),(0,r.createBlock)(B.default,{key:0,"aria-label":i.errorSummary},{default:(0,r.withCtx)(()=>[(0,r.createElementVNode)("h2",N,(0,r.toDisplayString)(i.errorSummary),1)]),_:1},8,["aria-label"])):(0,r.createCommentVNode)("",!0),(0,r.renderSlot)(e.$slots,"default"),i.submitLabel?((0,r.openBlock)(),(0,r.createBlock)(x.default,{key:1},{default:(0,r.withCtx)(()=>[(0,r.createTextVNode)((0,r.toDisplayString)(i.submitLabel),1)]),_:1})):(0,r.createCommentVNode)("",!0)],16,M))}});exports.default=R;

package/dist/form/Form.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{resetFields as e,validateFields as t}from"../field/fieldCore.js";import{FORM_CONTEXT as a,snapshotValidity as r}from"./context.js";import i from"./FormErrorSummary.vue.js";import n from"./FormSubmit.vue.js";import{normalizeFormErrors as o}from"./serverErrors.js";import{createBlock as s,createCommentVNode as l,createElementBlock as d,createElementVNode as u,createTextVNode as v,defineComponent as m,onMounted as c,onUnmounted as f,openBlock as y,provide as p,ref as h,renderSlot as b,toDisplayString as E,watch as k,withCtx as g}from"vue";var L=["novalidate"],x={class:"skdx-form__error-summary-title"},S=/* @__PURE__ */m({__name:"Form",props:{errors:{default:void 0},validationMode:{default:"change"},validationBehavior:{default:"native"},errorSummary:{default:void 0},submitLabel:{default:void 0}},emits:["submit","reset","field-invalid"],setup(m,{expose:S,emit:_}){const B=m,F=_,V=h(null),M=h({});function j(e){if(!e||!("validity"in e)||!("name"in e))return;const t=e;t.name&&(M.value={...M.value,[t.name]:r(t.validity)})}let C=!1,N=null;function w(e){e.preventDefault(),j(e.target);const t=e.target;if(t?.name&&t.validity&&F("field-invalid",{name:t.name,validity:t.validity}),N)return;N=e.target;const a=C||"aria"===B.validationBehavior;queueMicrotask(()=>{const e=N;if(N=null,!e||a)return;const t=O?.querySelector("[data-skdx-error-summary]");t&&!t.hasAttribute("hidden")||e.focus()})}function D(e){"submit"!==B.validationMode&&j(e.target)}const T=h([]);function q(e){"change"===B.validationMode&&j(e.target);const t=e.target?.name;!t||T.value.includes(t)||(T.value=[...T.value,t])}k(()=>B.errors,()=>{T.value=[]});let O=null;function R(t){M.value={},T.value=[],O&&e(O),F("reset",t)}function z(e){if(e.defaultPrevented)return;const t=V.value;if(t){if("aria"===B.validationBehavior)return t.checkValidity(),void F("submit",e);if(!t.checkValidity())return void e.preventDefault();F("submit",e)}}return c(()=>{const e=V.value;e&&(O=e,e.addEventListener("invalid",w,!0),e.addEventListener("blur",D,!0),e.addEventListener("change",q,!0),e.addEventListener("reset",R))}),f(()=>{O&&(O.removeEventListener("invalid",w,!0),O.removeEventListener("blur",D,!0),O.removeEventListener("change",q,!0),O.removeEventListener("reset",R))}),p(a,{validities:M,serverErrors:function(e){return T.value.includes(e)?[]:o(B.errors?.[e])}}),S({el:V,validate:async function(){const e=V.value;if(!e)return!0;C=!0;const a=e.checkValidity();C=!1;const r=await t(e);return a&&r}}),(e,t)=>(y(),d("form",{class:"skdx-form","data-part":"root","data-skdx-component":"form",ref_key:"formRef",ref:V,novalidate:"aria"===m.validationBehavior||void 0,onSubmit:z},[m.errorSummary?(y(),s(i,{key:0},{default:g(()=>[u("h2",x,E(m.errorSummary),1)]),_:1})):l("",!0),b(e.$slots,"default"),m.submitLabel?(y(),s(n,{key:1},{default:g(()=>[v(E(m.submitLabel),1)]),_:1})):l("",!0)],40,L))}});export{S as default};
+import{appearanceAttrs as e}from"../utils/appearance.js";import{resetFields as t,validateFields as r}from"../utils/field-core.js";import{FORM_CONTEXT as a,snapshotValidity as i}from"./context.js";import n from"./FormErrorSummary.vue.js";import o from"./FormSubmit.vue.js";import{normalizeFormErrors as s}from"./serverErrors.js";import{createBlock as l,createCommentVNode as u,createElementBlock as d,createElementVNode as m,createTextVNode as v,defineComponent as c,mergeProps as f,onMounted as p,onUnmounted as y,openBlock as h,provide as b,ref as E,renderSlot as k,toDisplayString as g,unref as L,watch as S,withCtx as x}from"vue";var _=["novalidate"],B={class:"skdx-form__error-summary-title"},F=/* @__PURE__ */c({inheritAttrs:!1,__name:"Form",props:{errors:{},validationMode:{default:"change"},validationBehavior:{default:"native"},errorSummary:{},submitLabel:{},density:{}},emits:["submit","reset","field-invalid"],setup(c,{expose:F,emit:V}){const j=c,M=V,C=E(null),N=E({});function w(e){if(!e||!("validity"in e)||!("name"in e))return;const t=e;t.name&&(N.value={...N.value,[t.name]:i(t.validity)})}let A=!1,D=null;function T(e){e.preventDefault(),w(e.target);const t=e.target;if(t?.name&&t.validity&&M("field-invalid",{name:t.name,validity:i(t.validity)}),D)return;D=e.target;const r=A||"aria"===j.validationBehavior;queueMicrotask(()=>{const e=D;if(D=null,!e||r)return;const t=P?.querySelector("[data-skdx-error-summary]");t&&!t.hasAttribute("hidden")||e.focus()})}function $(e){"submit"!==j.validationMode&&w(e.target)}const q=E([]);function O(e){"change"===j.validationMode&&w(e.target);const t=e.target?.name;!t||q.value.includes(t)||(q.value=[...q.value,t])}S(()=>j.errors,()=>{q.value=[]});let P=null;function R(e){N.value={},q.value=[],P&&t(P),M("reset",e)}function z(e){if(e.defaultPrevented)return;const t=C.value;if(t){if("aria"===j.validationBehavior)return t.checkValidity(),void M("submit",e);if(!t.checkValidity())return void e.preventDefault();M("submit",e)}}return p(()=>{const e=C.value;e&&(P=e,e.addEventListener("invalid",T,!0),e.addEventListener("blur",$,!0),e.addEventListener("change",O,!0),e.addEventListener("reset",R))}),y(()=>{P&&(P.removeEventListener("invalid",T,!0),P.removeEventListener("blur",$,!0),P.removeEventListener("change",O,!0),P.removeEventListener("reset",R))}),b(a,{validities:N,serverErrors:function(e){return q.value.includes(e)?[]:s(j.errors?.[e])}}),F({el:C,validate:async function(){const e=C.value;if(!e)return!0;A=!0;const t=e.checkValidity();A=!1;const a=await r(e);return t&&a}}),(t,r)=>(h(),d("form",f({ref_key:"formRef",ref:C,class:"skdx-form","data-part":"root","data-skdx-component":"form",novalidate:"aria"===c.validationBehavior||void 0},{...t.$attrs,...L(e)({density:c.density},t.$attrs)},{onSubmit:z}),[c.errorSummary?(h(),l(n,{key:0,"aria-label":c.errorSummary},{default:x(()=>[m("h2",B,g(c.errorSummary),1)]),_:1},8,["aria-label"])):u("",!0),k(t.$slots,"default"),c.submitLabel?(h(),l(o,{key:1},{default:x(()=>[v(g(c.submitLabel),1)]),_:1})):u("",!0)],16,_))}});export{F as default};

package/dist/form/FormControl.vue.d.cts

@@ -1,9 +1,5 @@
 import { type VNode } from 'vue';
-/**
- * Injects id/name/aria-invalid/aria-describedby onto single slot child without
- * wrapper (Vue's asChild pattern). Uses cloneVNode + mergeProps on default-slot
- * vnode in render function.
- */
+/** Injects id/name/aria-invalid/aria-describedby onto its single slot child without a wrapper element. */
 declare const _default: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,9 +1,5 @@
 import { type VNode } from 'vue';
-/**
- * Injects id/name/aria-invalid/aria-describedby onto single slot child without
- * wrapper (Vue's asChild pattern). Uses cloneVNode + mergeProps on default-slot
- * vnode in render function.
- */
+/** Injects id/name/aria-invalid/aria-describedby onto its single slot child without a wrapper element. */
 declare const _default: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/form/FormControl.vue_vue_type_script_lang.cjs

@@ -1 +1 @@
-const m=require("./describedBy.cjs"),l=require("./context.cjs");let o=require("vue");function a(i){for(const r of i??[])if(r.type===o.Fragment){const e=a(r.children);if(e)return e}else if(r.type!==o.Comment&&!(r.type===o.Text&&`${r.children}`.trim()===""))return r}var u=(0,o.defineComponent)({name:"SkdxFormControl",setup(i,{slots:r}){const e=(0,o.inject)(l.FORM_FIELD_CONTEXT);if(!e)throw new Error("<SkdxFormControl> must be used inside <SkdxFormField>.");const n=(0,o.inject)(l.FORM_CONTEXT);if(!n)throw new Error("<SkdxFormControl> must be used inside <SkdxForm>.");return()=>{const t=a(r.default?.());if(!t)throw new Error("<SkdxFormControl> requires exactly one child element.");const d=n.validities.value[e.name],s=(d?!d.valid:!1)||n.serverErrors(e.name).length>0,c=m.mergeDescribedBy(t.props?.["aria-describedby"],s?e.messageId:void 0);return(0,o.cloneVNode)(t,(0,o.mergeProps)({id:e.id,name:e.name,"aria-invalid":s||void 0,class:"skdx-form__control","data-part":"control"},t.props??{},{"aria-describedby":c}))}}});exports.default=u;
+const f=require("./describedBy.cjs"),a=require("../utils/injectRequired.cjs"),c=require("./context.cjs");let i=require("vue");function u(t){for(const r of t??[])if(r.type===i.Fragment){const e=u(r.children);if(e)return e}else if(r.type!==i.Comment&&!(r.type===i.Text&&typeof r.children=="string"&&r.children.trim()===""))return r}var v=(0,i.defineComponent)({name:"SkdxFormControl",setup(t,{slots:r}){const e=a.injectRequired(c.FORM_FIELD_CONTEXT,"<SkdxFormControl> must be used inside <SkdxFormField>."),n=a.injectRequired(c.FORM_CONTEXT,"<SkdxFormControl> must be used inside <SkdxForm>.");return()=>{const o=u(r.default?.());if(!o)throw new Error("<SkdxFormControl> requires exactly one child element.");const d=n.validities.value[e.name],s=(d?!d.valid:!1)||n.serverErrors(e.name).length>0;let l;s&&(l=e.messageIds.value.length?e.messageIds.value.join(" "):e.messageId);const m=f.mergeDescribedBy(o.props?.["aria-describedby"],l);return(0,i.cloneVNode)(o,(0,i.mergeProps)({id:e.id,name:e.name,"aria-invalid":s||void 0,class:"skdx-form__control","data-part":"control"},o.props??{},{"aria-describedby":m}))}}});exports.default=v;

package/dist/form/FormControl.vue_vue_type_script_lang.js

@@ -1 +1 @@
-import{mergeDescribedBy as e}from"./describedBy.js";import{FORM_CONTEXT as r,FORM_FIELD_CONTEXT as o}from"./context.js";import{Comment as t,Fragment as s,Text as n,cloneVNode as i,defineComponent as a,inject as d,mergeProps as m}from"vue";function l(e){for(const r of e??[])if(r.type===s){const e=l(r.children);if(e)return e}else if(r.type!==t&&(r.type!==n||""!==`${r.children}`.trim()))return r}var c=a({name:"SkdxFormControl",setup(t,{slots:s}){const n=d(o);if(!n)throw new Error("<SkdxFormControl> must be used inside <SkdxFormField>.");const a=d(r);if(!a)throw new Error("<SkdxFormControl> must be used inside <SkdxForm>.");return()=>{const r=l(s.default?.());if(!r)throw new Error("<SkdxFormControl> requires exactly one child element.");const o=a.validities.value[n.name],t=!!o&&!o.valid||a.serverErrors(n.name).length>0,d=e(r.props?.["aria-describedby"],t?n.messageId:void 0);return i(r,m({id:n.id,name:n.name,"aria-invalid":t||void 0,class:"skdx-form__control","data-part":"control"},r.props??{},{"aria-describedby":d}))}}});export{c as default};
+import{mergeDescribedBy as e}from"./describedBy.js";import{injectRequired as r}from"../utils/injectRequired.js";import{FORM_CONTEXT as o,FORM_FIELD_CONTEXT as s}from"./context.js";import{Comment as t,Fragment as n,Text as i,cloneVNode as a,defineComponent as d,mergeProps as m}from"vue";function l(e){for(const r of e??[])if(r.type===n){const e=l(r.children);if(e)return e}else if(r.type!==t&&(r.type!==i||"string"!=typeof r.children||""!==r.children.trim()))return r}var c=d({name:"SkdxFormControl",setup(t,{slots:n}){const i=r(s,"<SkdxFormControl> must be used inside <SkdxFormField>."),d=r(o,"<SkdxFormControl> must be used inside <SkdxForm>.");return()=>{const r=l(n.default?.());if(!r)throw new Error("<SkdxFormControl> requires exactly one child element.");const o=d.validities.value[i.name],s=!!o&&!o.valid||d.serverErrors(i.name).length>0;let t;s&&(t=i.messageIds.value.length?i.messageIds.value.join(" "):i.messageId);const c=e(r.props?.["aria-describedby"],t);return a(r,m({id:i.id,name:i.name,"aria-invalid":s||void 0,class:"skdx-form__control","data-part":"control"},r.props??{},{"aria-describedby":c}))}}});export{c as default};

package/dist/form/FormErrorSummary.vue.d.cts

@@ -1,10 +1,5 @@
 /**
- * GOV.UK error summary for `SkdxForm`: `role="alert"` container listing
- * failed `SkdxField`s, focused on first appearance for keyboard/screen-reader
- * users. Scans form for `[data-skdx-field][data-invalid]`, re-scans on
- * validity-change. Clicking a link focuses that field's control (or first
- * control in group). Always rendered (even empty) so alert fires when content
- * appears.
+ * GOV.UK error summary for `SkdxForm`: a `role="alert"` list of failing fields, focused on first appearance.
  *
  * @example
  * ```vue

package/dist/form/FormErrorSummary.vue.d.ts

@@ -1,10 +1,5 @@
 /**
- * GOV.UK error summary for `SkdxForm`: `role="alert"` container listing
- * failed `SkdxField`s, focused on first appearance for keyboard/screen-reader
- * users. Scans form for `[data-skdx-field][data-invalid]`, re-scans on
- * validity-change. Clicking a link focuses that field's control (or first
- * control in group). Always rendered (even empty) so alert fires when content
- * appears.
+ * GOV.UK error summary for `SkdxForm`: a `role="alert"` list of failing fields, focused on first appearance.
  *
  * @example
  * ```vue

package/dist/form/FormErrorSummary.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("../field/fieldCore.cjs");let e=require("vue");var m=["hidden"],_={class:"skdx-form__error-summary-list",role:"list"},p=["href","onClick"],v=(0,e.defineComponent)({__name:"FormErrorSummary",props:{autoFocus:{type:Boolean,default:!0}},setup(i){const d=i,s=(0,e.ref)(null),o=(0,e.ref)([]);let t=null;function f(){t&&(o.value=n.collectFieldErrors(t))}const u=()=>{(0,e.nextTick)(f)};(0,e.onMounted)(()=>{const r=s.value;if(r){t=n.errorSummaryScope(r),u();for(const c of n.ERROR_SUMMARY_RESCAN_EVENTS)t.addEventListener(c,u,!0)}}),(0,e.onUnmounted)(()=>{for(const r of n.ERROR_SUMMARY_RESCAN_EVENTS)t?.removeEventListener(r,u,!0);t=null});let a=!1;return(0,e.watch)(o,r=>{if(r.length===0){a=!1;return}a||(a=!0,d.autoFocus&&s.value?.focus())},{flush:"post"}),(r,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-form__error-summary","data-part":"error-summary",ref_key:"rootRef",ref:s,role:"alert",tabindex:"-1","data-skdx-error-summary":"",hidden:o.value.length===0},[o.value.length>0?(0,e.renderSlot)(r.$slots,"default",{key:0}):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("ul",_,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(o.value,l=>((0,e.openBlock)(),(0,e.createElementBlock)("li",{key:l.id},[(0,e.createElementVNode)("a",{class:"skdx-form__error-summary-link",href:`#${l.id}`,onClick:(0,e.withModifiers)(E=>(0,e.unref)(n.focusFieldTarget)(l.id),["prevent"])},(0,e.toDisplayString)(l.message),9,p)]))),128))])],8,m))}});exports.default=v;
+const n=require("../utils/field-core.cjs");let e=require("vue");var m=["hidden"],_={class:"skdx-form__error-summary-list",role:"list"},p=["href","onClick"],v=(0,e.defineComponent)({__name:"FormErrorSummary",props:{autoFocus:{type:Boolean,default:!0}},setup(i){const d=i,s=(0,e.ref)(null),o=(0,e.ref)([]);let t=null;function f(){t&&(o.value=n.collectFieldErrors(t))}const u=()=>{(0,e.nextTick)(f)};(0,e.onMounted)(()=>{const r=s.value;if(r){t=n.errorSummaryScope(r),u();for(const c of n.ERROR_SUMMARY_RESCAN_EVENTS)t.addEventListener(c,u,!0)}}),(0,e.onUnmounted)(()=>{for(const r of n.ERROR_SUMMARY_RESCAN_EVENTS)t?.removeEventListener(r,u,!0);t=null});let a=!1;return(0,e.watch)(o,r=>{if(r.length===0){a=!1;return}a||(a=!0,d.autoFocus&&s.value?.focus())},{flush:"post"}),(r,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{ref_key:"rootRef",ref:s,class:"skdx-form__error-summary","data-part":"error-summary",role:"alert",tabindex:"-1","data-skdx-error-summary":"",hidden:o.value.length===0},[o.value.length>0?(0,e.renderSlot)(r.$slots,"default",{key:0}):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("ul",_,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(o.value,l=>((0,e.openBlock)(),(0,e.createElementBlock)("li",{key:l.id},[(0,e.createElementVNode)("a",{class:"skdx-form__error-summary-link",href:`#${l.id}`,onClick:(0,e.withModifiers)(E=>(0,e.unref)(n.focusFieldTarget)(l.id),["prevent"])},(0,e.toDisplayString)(l.message),9,p)]))),128))])],8,m))}});exports.default=v;

package/dist/form/FormErrorSummary.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{ERROR_SUMMARY_RESCAN_EVENTS as e,collectFieldErrors as r,errorSummaryScope as o,focusFieldTarget as a}from"../field/fieldCore.js";import{Fragment as s,createCommentVNode as t,createElementBlock as l,createElementVNode as n,defineComponent as u,nextTick as d,onMounted as m,onUnmounted as i,openBlock as f,ref as c,renderList as p,renderSlot as k,toDisplayString as v,unref as y,watch as _,withModifiers as h}from"vue";var E=["hidden"],S={class:"skdx-form__error-summary-list",role:"list"},g=["href","onClick"],x=/* @__PURE__ */u({__name:"FormErrorSummary",props:{autoFocus:{type:Boolean,default:!0}},setup(u){const x=u,C=c(null),F=c([]);let R=null;function M(){R&&(F.value=r(R))}const N=()=>{d(M)};m(()=>{const r=C.value;if(r){R=o(r),N();for(const r of e)R.addEventListener(r,N,!0)}}),i(()=>{for(const r of e)R?.removeEventListener(r,N,!0);R=null});let B=!1;return _(F,e=>{0!==e.length?B||(B=!0,x.autoFocus&&C.value?.focus()):B=!1},{flush:"post"}),(e,r)=>(f(),l("div",{class:"skdx-form__error-summary","data-part":"error-summary",ref_key:"rootRef",ref:C,role:"alert",tabindex:"-1","data-skdx-error-summary":"",hidden:0===F.value.length},[F.value.length>0?k(e.$slots,"default",{key:0}):t("",!0),n("ul",S,[(f(!0),l(s,null,p(F.value,e=>(f(),l("li",{key:e.id},[n("a",{class:"skdx-form__error-summary-link",href:`#${e.id}`,onClick:h(r=>y(a)(e.id),["prevent"])},v(e.message),9,g)]))),128))])],8,E))}});export{x as default};
+import{ERROR_SUMMARY_RESCAN_EVENTS as e,collectFieldErrors as r,errorSummaryScope as o,focusFieldTarget as s}from"../utils/field-core.js";import{Fragment as a,createCommentVNode as t,createElementBlock as l,createElementVNode as n,defineComponent as u,nextTick as m,onMounted as d,onUnmounted as i,openBlock as f,ref as c,renderList as p,renderSlot as k,toDisplayString as v,unref as y,watch as _,withModifiers as h}from"vue";var E=["hidden"],S={class:"skdx-form__error-summary-list",role:"list"},g=["href","onClick"],x=/* @__PURE__ */u({__name:"FormErrorSummary",props:{autoFocus:{type:Boolean,default:!0}},setup(u){const x=u,F=c(null),R=c([]);let C=null;function M(){C&&(R.value=r(C))}const N=()=>{m(M)};d(()=>{const r=F.value;if(r){C=o(r),N();for(const r of e)C.addEventListener(r,N,!0)}}),i(()=>{for(const r of e)C?.removeEventListener(r,N,!0);C=null});let B=!1;return _(R,e=>{0!==e.length?B||(B=!0,x.autoFocus&&F.value?.focus()):B=!1},{flush:"post"}),(e,r)=>(f(),l("div",{ref_key:"rootRef",ref:F,class:"skdx-form__error-summary","data-part":"error-summary",role:"alert",tabindex:"-1","data-skdx-error-summary":"",hidden:0===R.value.length},[R.value.length>0?k(e.$slots,"default",{key:0}):t("",!0),n("ul",S,[(f(!0),l(a,null,p(R.value,e=>(f(),l("li",{key:e.id},[n("a",{class:"skdx-form__error-summary-link",href:`#${e.id}`,onClick:h(r=>y(s)(e.id),["prevent"])},v(e.message),9,g)]))),128))])],8,E))}});export{x as default};

package/dist/form/FormField.vue.d.cts

@@ -1,6 +1,5 @@
 /**
- * Field wrapper for `SkdxForm`. Generates id/messageId pair, distributes via
- * context. For multiple messages per failure, use primitives instead.
+ * Field wrapper for `SkdxForm` that generates an id/messageId pair and distributes it via context.
  *
  * ```vue
  * <SkdxForm @submit="save">
@@ -18,13 +17,13 @@ type __VLS_Props = {
      * Label rendered as derived `SkdxFormLabel` (`<label for>`).
      * @default undefined
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * Copy for catch-all message (invalid state). Use `message` slot for markup.
      * Server error replaces it.
      * @default undefined
      */
-    message?: string;
+    message?: string | undefined;
 };
 declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
@@ -33,8 +32,8 @@ type __VLS_Slots = {} & {
     message?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string;
-    message: string;
+    label: string | undefined;
+    message: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,6 +1,5 @@
 /**
- * Field wrapper for `SkdxForm`. Generates id/messageId pair, distributes via
- * context. For multiple messages per failure, use primitives instead.
+ * Field wrapper for `SkdxForm` that generates an id/messageId pair and distributes it via context.
  *
  * ```vue
  * <SkdxForm @submit="save">
@@ -18,13 +17,13 @@ type __VLS_Props = {
      * Label rendered as derived `SkdxFormLabel` (`<label for>`).
      * @default undefined
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * Copy for catch-all message (invalid state). Use `message` slot for markup.
      * Server error replaces it.
      * @default undefined
      */
-    message?: string;
+    message?: string | undefined;
 };
 declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
@@ -33,8 +32,8 @@ type __VLS_Slots = {} & {
     message?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string;
-    message: string;
+    label: string | undefined;
+    message: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/form/FormFieldAnatomy.vue.d.cts

@@ -1,12 +1,10 @@
 /**
- * The anatomy a `SkdxFormField` draws: label, control with injected attributes,
- * and catch-all message rendered unconditionally and hidden until needed.
- * Not exported from the package — must stay in step with React `FormFieldAnatomy.tsx`.
+ * The anatomy a `SkdxFormField` draws: label, control with injected attributes, and a catch-all message.
  * @internal
  */
 type __VLS_Props = {
-    label?: string;
-    message?: string;
+    label?: string | undefined;
+    message?: string | undefined;
 };
 declare var __VLS_7: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
@@ -15,8 +13,8 @@ type __VLS_Slots = {} & {
     message?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string;
-    message: string;
+    label: string | undefined;
+    message: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/form/FormFieldAnatomy.vue.d.ts

@@ -1,12 +1,10 @@
 /**
- * The anatomy a `SkdxFormField` draws: label, control with injected attributes,
- * and catch-all message rendered unconditionally and hidden until needed.
- * Not exported from the package — must stay in step with React `FormFieldAnatomy.tsx`.
+ * The anatomy a `SkdxFormField` draws: label, control with injected attributes, and a catch-all message.
  * @internal
  */
 type __VLS_Props = {
-    label?: string;
-    message?: string;
+    label?: string | undefined;
+    message?: string | undefined;
 };
 declare var __VLS_7: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
@@ -15,8 +13,8 @@ type __VLS_Slots = {} & {
     message?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string;
-    message: string;
+    label: string | undefined;
+    message: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/form/FormFieldRoot.vue.d.cts

@@ -1,7 +1,4 @@
-/**
- * Headless field root: generates id/messageId, distributes via context.
- * Use when field needs multiple messages per failure reason.
- */
+/** Headless field root that generates an id/messageId pair and distributes it via context. */
 type __VLS_Props = {
     /** Field name, matched against the name attribute of the native input rendered inside FormControl. */
     name: string;

package/dist/form/FormFieldRoot.vue.d.ts

@@ -1,7 +1,4 @@
-/**
- * Headless field root: generates id/messageId, distributes via context.
- * Use when field needs multiple messages per failure reason.
- */
+/** Headless field root that generates an id/messageId pair and distributes it via context. */
 type __VLS_Props = {
     /** Field name, matched against the name attribute of the native input rendered inside FormControl. */
     name: string;

package/dist/form/FormFieldRoot.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const u=require("../utils/id.cjs"),n=require("../field/fieldCore.cjs"),r=require("./context.cjs");let e=require("vue");var _=(0,e.defineComponent)({__name:"FormFieldRoot",props:{name:{}},setup(d){const t=d,o=u.stableUid();return(0,e.provide)(r.FORM_FIELD_CONTEXT,{get name(){return t.name},id:r.nextFormFieldId("control",o),messageId:r.nextFormFieldId("message",o)}),(i,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({class:"skdx-form__field","data-part":"field"},{[(0,e.unref)(n.FORM_FIELD_ATTRIBUTE)]:"",[(0,e.unref)(n.FIELD_NAME_ATTRIBUTE)]:t.name}),[(0,e.renderSlot)(i.$slots,"default")],16))}});exports.default=_;
+const m=require("../utils/id.cjs"),c=require("../utils/field-core.cjs"),l=require("./context.cjs");let e=require("vue");var p=(0,e.defineComponent)({__name:"FormFieldRoot",props:{name:{}},setup(_){const d=_,i=m.stableUid(),s=l.nextFormFieldId("message",i),t=[],n=(0,e.shallowRef)([]);return(0,e.provide)(l.FORM_FIELD_CONTEXT,{get name(){return d.name},id:l.nextFormFieldId("control",i),messageId:s,messageIds:n,claimMessageId(){const r=t.length===0?s:`${s}-${t.length}`;return t.push(r),r},setMessageVisible(r,o){const u=n.value;u.includes(r)!==o&&(n.value=t.filter(a=>a===r?o:u.includes(a)))}}),(r,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({class:"skdx-form__field","data-part":"field"},{[(0,e.unref)(c.FORM_FIELD_ATTRIBUTE)]:"",[(0,e.unref)(c.FIELD_NAME_ATTRIBUTE)]:d.name}),[(0,e.renderSlot)(r.$slots,"default")],16))}});exports.default=p;

package/dist/form/FormFieldRoot.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{stableUid as e}from"../utils/id.js";import{FIELD_NAME_ATTRIBUTE as s,FORM_FIELD_ATTRIBUTE as a}from"../field/fieldCore.js";import{FORM_FIELD_CONTEXT as o,nextFormFieldId as r}from"./context.js";import{createElementBlock as t,defineComponent as m,mergeProps as d,openBlock as n,provide as i,renderSlot as l,unref as f}from"vue";var p=/* @__PURE__ */m({__name:"FormFieldRoot",props:{name:{}},setup(m){const p=m,_=e();return i(o,{get name(){return p.name},id:r("control",_),messageId:r("message",_)}),(e,o)=>(n(),t("div",d({class:"skdx-form__field","data-part":"field"},{[f(a)]:"",[f(s)]:p.name}),[l(e.$slots,"default")],16))}});export{p as default};
+import{stableUid as e}from"../utils/id.js";import{FIELD_NAME_ATTRIBUTE as s,FORM_FIELD_ATTRIBUTE as a}from"../utils/field-core.js";import{FORM_FIELD_CONTEXT as t,nextFormFieldId as o}from"./context.js";import{createElementBlock as r,defineComponent as l,mergeProps as n,openBlock as i,provide as m,renderSlot as d,shallowRef as u,unref as f}from"vue";var p=/* @__PURE__ */l({__name:"FormFieldRoot",props:{name:{}},setup(l){const p=l,c=e(),_=o("message",c),g=[],F=u([]);return m(t,{get name(){return p.name},id:o("control",c),messageId:_,messageIds:F,claimMessageId(){const e=0===g.length?_:`${_}-${g.length}`;return g.push(e),e},setMessageVisible(e,s){const a=F.value;a.includes(e)!==s&&(F.value=g.filter(t=>t===e?s:a.includes(t)))}}),(e,t)=>(i(),r("div",n({class:"skdx-form__field","data-part":"field"},{[f(a)]:"",[f(s)]:p.name}),[d(e.$slots,"default")],16))}});export{p as default};

package/dist/form/FormLabel.vue.d.cts

@@ -1,7 +1,4 @@
-/**
- * A `<label>` for a `SkdxFormField`'s control. Reads the field's `id` from
- * context and sets `for` to it. Must be rendered inside a `SkdxFormField`.
- */
+/** A `<label>` for a `SkdxFormField`'s control, reading the field's `id` from context to set `for`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/form/FormLabel.vue.d.ts

@@ -1,7 +1,4 @@
-/**
- * A `<label>` for a `SkdxFormField`'s control. Reads the field's `id` from
- * context and sets `for` to it. Must be rendered inside a `SkdxFormField`.
- */
+/** A `<label>` for a `SkdxFormField`'s control, reading the field's `id` from context to set `for`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {