@skdx/vue 0.26.0 → 0.28.0

package/dist/field/fieldCore.d.ts

@@ -1,15 +1,8 @@
 /**
- * The framework-free engine behind `Field`. Everything here is plain DOM
- * work — discovering the control inside a Field, injecting the ARIA wiring
- * onto it, running the validation model, and mirroring the interaction state
- * as `data-*` — so all five framework packages run the *same* algorithm and
- * the shared `assertFieldContract` assertions mean the same thing everywhere.
- *
- * The framework layer above this only ever: creates a controller, hands it
- * props, calls `sync()` after each render, and re-renders when the controller
- * says its snapshot changed.
- *
- * See `reports/design-system-competitive-audit/14-rfc-field-fieldset-validation.md`.
+ * Framework-free Field engine: discovers controls, wires ARIA, runs validation,
+ * and mirrors state as `data-*` so all five packages run the same algorithm.
+ * Framework layer creates controller, syncs after each render, re-renders on
+ * snapshot changes.
  */
 /** When a Field first runs its validator. See {@link FieldControllerProps.mode}. */
 export type FieldMode = 'change' | 'blur' | 'submit';
@@ -23,16 +16,7 @@ export declare const FIELD_VALIDITY_CHANGE_EVENT = "validity-change";
 export declare const FIELD_ROOT_ATTRIBUTE = "data-skdx-field";
 /** Marks a Field's name, used as the error-summary link text when nothing else supplies one. */
 export declare const FIELD_NAME_ATTRIBUTE = "data-skdx-field-name";
-/**
- * The Field's current messages, written straight onto the root the moment
- * validity changes.
- *
- * This exists so the error summary never depends on a framework's render
- * timing: a Field dispatches `validity-change` synchronously from its own DOM
- * listener, *before* React/Vue/Angular/Lit have rendered the Error element, so
- * a summary that could only read that element's text would scan a field that
- * is already `data-invalid` and find nothing to link to.
- */
+/** The Field's current messages, written synchronously when validity changes. */
 export declare const FIELD_MESSAGE_ATTRIBUTE = "data-skdx-field-message";
 /** Marks a Field's description element, so its id can be added to the control's `aria-describedby`. */
 export declare const FIELD_DESCRIPTION_ATTRIBUTE = "data-skdx-field-description";
@@ -40,245 +24,174 @@ export declare const FIELD_DESCRIPTION_ATTRIBUTE = "data-skdx-field-description"
 export declare const FIELD_ERROR_ATTRIBUTE = "data-skdx-field-error";
 /** Marks a Field's character-count element, so it can be styled and found without a framework ref. */
 export declare const FIELD_CHARACTER_COUNT_ATTRIBUTE = "data-skdx-field-character-count";
-/**
- * How long the character count waits after the last keystroke before it
- * announces the remaining count.
- *
- * GOV.UK's number, and the reason it exists: a live region that fires on every
- * keystroke reads a running commentary over the character the user just typed.
- * One announcement per typing pause is the whole point of the pattern.
- */
+/** Marks a Field whose validator is still running. */
+export declare const FIELD_PENDING_ATTRIBUTE = "data-skdx-field-pending";
+/** Marks the submit the engine re-dispatches once every pending Field settles. */
+export declare const FIELD_RESUBMIT_ATTRIBUTE = "data-skdx-field-resubmit";
+/** Marks a FormField root: the native constraint validation half of the family. */
+export declare const FORM_FIELD_ATTRIBUTE = "data-skdx-form-field";
+/** Marks a rendered FormMessage for error summary link text extraction. */
+export declare const FORM_MESSAGE_ATTRIBUTE = "data-skdx-form-message";
+/** Events an ErrorSummary rescans on, unified across all five packages. */
+export declare const ERROR_SUMMARY_RESCAN_EVENTS: readonly ["validity-change", "invalid", "change", "blur"];
+/** Marks a Form's ErrorSummary for announcement suppression decisions. */
+export declare const FIELD_ERROR_SUMMARY_ATTRIBUTE = "data-skdx-error-summary";
+/** Milliseconds after last keystroke before character count announces. */
 export declare const CHARACTER_COUNT_ANNOUNCE_DELAY_MS = 1000;
-/** What a Field's character count is configured with. */
+/** Configuration for a Field's character count. */
 export interface FieldCharacterCountOptions {
-    /** The soft limit. Deliberately *not* the control's native `maxlength`, which truncates silently. */
+    /** Soft limit, not the control's native truncating maxlength. */
     maxLength: number;
-    /**
-     * Percentage of `maxLength` that must be typed before the count is shown and
-     * announced at all. `0` shows it from the first render.
-     * @default 0
-     */
+    /** Percentage before the count is shown; `0` shows from first render. @default 0 */
     threshold?: number;
 }
 /** The default count copy, in GOV.UK's wording. Negative `remaining` means over the limit. */
 export declare function characterCountMessage(remaining: number): string;
 /** Whether a count has passed its threshold and should be rendered/announced. */
 export declare function characterCountVisible(count: number, maxLength: number, threshold?: number): boolean;
-/**
- * Used when a control fails native constraint validation but the engine
- * reports no message of its own (jsdom and some browsers leave
- * `validationMessage` empty). A Field is never invalid without something to
- * say, because an error with no message is unannounceable.
- */
+/** Fallback for controls failing native validation without a message. */
 export declare const NATIVE_INVALID_FALLBACK_MESSAGE = "This field is invalid.";
-/**
- * Opt-in marker saying "I am my Field's control". Discovery's escape hatch for
- * a composite whose role element the Field cannot reach: `<skdx-date-field>`
- * keeps its `role="group"` in a shadow root, so only the host is findable from
- * the Field's light DOM.
- */
+/** Opt-in marker: "I am my Field's control", for discovery in shadow roots. */
 export declare const FIELD_CONTROL_ATTRIBUTE = "data-skdx-field-control";
-/**
- * How a Field recognises the control it wraps. First match in document order
- * wins, which is why group roles work: a `[role="radiogroup"]` precedes the
- * radios inside it.
- */
+/** Selector for Field controls; first match wins in document order. */
 export declare const FIELD_CONTROL_SELECTOR: string;
-/** The public state of one Field, handed to the framework layer and to `validity-change` listeners. */
+/** Marks a Field's required indicator for styling and testing. */
+export declare const FIELD_REQUIRED_INDICATOR_ATTRIBUTE = "data-skdx-field-required-indicator";
+/** The public state of one Field. */
 export interface FieldSnapshot {
-    /** The id of the discovered control — the Label's `for`, and the error summary's link target. */
+    /** The discovered control's id. */
     controlId: string;
-    /** Every current message, server-injected first. Empty means valid. */
+    /** Current messages, server-injected first. */
     errors: string[];
     /** `errors.length === 0`. */
     valid: boolean;
-    /** The control has been blurred at least once. */
+    /** Control blurred at least once. */
     touched: boolean;
-    /** The value has been edited at least once. */
+    /** Value edited at least once. */
     dirty: boolean;
-    /** The control currently holds a value. */
+    /** Control currently holds a value. */
     filled: boolean;
-    /** Length of the control's value, tracked only while a character count is configured. */
+    /** Control value length, tracked only with character count configured. */
     count: number;
+    /** The control's live ValidityState, or null if none exists. */
+    validity: ValidityState | null;
 }
-/** The props the framework layer forwards into the controller on every render. */
+/** Props the framework layer forwards to the controller each render. */
 export interface FieldControllerProps {
-    /** See {@link FieldValidator}. */
+    /** Validator function. */
     validate?: FieldValidator;
-    /**
-     * When validation first runs. After a failure the field re-validates on
-     * every input regardless, so an error clears as soon as it is fixed.
-     * @default 'blur'
-     */
+    /** When validation first runs. @default 'blur' */
     mode?: FieldMode;
-    /** Server-injected errors, always shown, listed before anything `validate` produces. */
+    /** Server-injected errors, shown before custom validation. */
     errors?: string | string[];
-    /** Value handed to `validate`; `undefined` reads it off the control instead. */
+    /** Value for validate; undefined reads control value. */
     value?: unknown;
-    /** Field name, used as the error-summary link text when no error element is rendered. */
+    /** Field name for error-summary link text. */
     name?: string;
-    /**
-     * Words the character-count copy — the text `SkdxFieldCharacterCount` renders,
-     * the message announced one typing pause later, and the error raised once
-     * the value goes over the soft limit. A negative `remaining` means over the
-     * limit.
-     * @default undefined — {@link characterCountMessage}'s English wording.
-     */
+    /** Whether answer is mandatory, reflected as required/aria-required. @default undefined */
+    required?: boolean;
+    /** Whether field is unavailable, reflected as disabled/aria-disabled. @default undefined */
+    disabled?: boolean;
+    /** Words character-count message and announcements. @default characterCountMessage English */
     getCharacterCountMessage?: (remaining: number) => string;
-    /**
-     * Replaces {@link NATIVE_INVALID_FALLBACK_MESSAGE}: what the Field says when
-     * the wrapped control fails native constraint validation but the engine
-     * reports no message of its own.
-     * @default undefined — 'This field is invalid.'
-     */
+    /** Fallback when control fails native validation without message. @default 'This field is invalid.' */
     invalidMessage?: string;
+    /** Milliseconds `mode: 'change'` waits before validation; 0 for each keystroke. @default 0 */
+    validationDebounceTime?: number;
 }
-/** Everything the controller needs that the framework layer owns. */
+/** Framework layer dependencies the controller needs. */
 export interface FieldControllerOptions {
-    /** Id of the Label element, used for a group's `aria-labelledby`. */
+    /** Label element id, used for group aria-labelledby. */
     labelId: string;
-    /** Id of the Description element. */
+    /** Description element id. */
     descriptionId: string;
-    /** Id of the Error element. */
+    /** Error element id. */
     errorId: string;
-    /** Fallback id assigned to a control that has none of its own. */
+    /** Fallback id for controls with none. */
     controlId: string;
-    /** True for a `Fieldset`: the Label is a `<legend>` and the control is labelled by `aria-labelledby`. */
+    /** True for Fieldset: label is legend, control named by aria-labelledby. */
     grouped: boolean;
-    /** Called whenever the snapshot changes, so the framework layer can re-render. */
+    /** Called when snapshot changes so framework can re-render. */
     onSnapshotChange: (snapshot: FieldSnapshot) => void;
-    /**
-     * The live-region `announce`. The engine picks the politeness per message, because
-     * the two things it says want different ones: an error the user has already
-     * moved past interrupts, a running character count must not.
-     */
+    /** Live-region announce callback; engine picks politeness per message. */
     announce: (message: string, politeness: 'polite' | 'assertive') => void;
 }
-/** Coerces whatever a validator (or the `errors` prop) returned into a message list. */
+/** Coerces validator/errors result into a message list. */
 export declare function normalizeMessages(result: FieldValidationResult | string | string[]): string[];
-/** The first control inside `root` that belongs to *this* Field rather than to a nested one. */
+/** The first control inside root that belongs to this Field. */
 export declare function findFieldControl(root: Element): HTMLElement | null;
-/**
- * The value a validator sees when the consumer passed none: a checkbox or
- * radio reports `checked`, everything else reports its `value` property, and a
- * composite root that has no `value` of its own (a `role="group"` segmented
- * field, a `role="radiogroup"`) reports whatever its form-participation input
- * would submit.
- *
- * ponytail: a composite control that keeps its value only in framework state
- * and mirrors it nowhere — no `value` property, and no `name` so no hidden
- * input either — needs the explicit `value` prop. Pass it if you build one.
- */
+/** Value validator sees when consumer passes none: checked for checkbox, value property otherwise. */
 export declare function readControlValue(control: HTMLElement | null): unknown;
-/** Whether a value counts as entered, for `data-filled`. */
+/** Whether a value counts as entered. */
 export declare function isFilled(value: unknown): boolean;
-/** One failing field, as listed by a Form's ErrorSummary. */
+/** One failing field in an ErrorSummary list. */
 export interface FieldErrorEntry {
-    /** The control's id — the link's `href` target. */
+    /** Control id, the link's href target. */
     id: string;
-    /** The message shown as the link text. */
+    /** Message shown as link text. */
     message: string;
 }
-/**
- * The form (or `<skdx-form>`) a summary should scan and listen on, falling
- * back to the summary's own parent when it is used standalone.
- */
+/** Form a summary scans and listens on, defaulting to its parent. */
 export declare function errorSummaryScope(root: Element): Element;
-/** Every currently-failing Field in `scope`, in document order — the summary's list. */
+/** Every currently-failing field in scope, in document order. */
 export declare function collectFieldErrors(scope: ParentNode): FieldErrorEntry[];
-/**
- * Sends focus to a failing field the GOV.UK way: straight to the control,
- * unless the target is a group — then to the first control inside it, because
- * focusing a `<fieldset>`/`[role="radiogroup"]` announces the group but leaves
- * the user with nothing to operate.
- */
+/** Runs every Field in scope and resolves whether all passed. */
+export declare function validateFields(scope: ParentNode): Promise<boolean>;
+/** Resets every Field in scope: what Form does on native reset. */
+export declare function resetFields(scope: ParentNode): void;
+/** Sends focus to failing field: control for non-groups, first control inside groups. */
 export declare function focusFieldTarget(id: string, doc?: Document): void;
-/**
- * Owns one Field's state machine. Created by the framework layer, given the
- * Field's root element on `connect()`, and told about re-renders via `sync()`.
- */
+/** One Field's state machine, created and synced by the framework layer. */
 export declare class FieldController {
     private readonly options;
     private props;
     private root;
     private form;
     private control;
-    /** The `aria-describedby` the consumer put on the control themselves, preserved across rewrites. */
     private baseDescribedBy;
-    /** Bumped on every validation run; a resolution from a superseded run is discarded. */
+    private baseLabelledBy;
+    /** Only this controller can withdraw what it wrote. */
+    private wroteLabelledBy;
+    private wroteRequired;
+    private wroteDisabled;
     private runToken;
     private pending;
-    /** Messages from the `errors` prop. Always listed first. */
     private injected;
-    /** Messages from the last `validate` run, or the native constraint-validation fallback. */
     private custom;
-    /** Set by a mounted character-count part; `null` while the Field has none. */
     private characterCount;
     private announceTimer;
+    private validationTimer;
+    private awaitingSubmit;
     private snapshot;
     constructor(options: FieldControllerOptions);
-    /** The current state. Read by the framework layer to render the parts. */
     get state(): FieldSnapshot;
-    /** Replaces the forwarded props. Safe to call on every render. */
     setProps(props: FieldControllerProps): void;
-    /**
-     * Registers (or clears) the character count. Called by the count part on
-     * mount, on prop change, and on unmount.
-     */
     setCharacterCount(options: FieldCharacterCountOptions | null): void;
-    /** Length of the control's current value; `0` when it holds something that is not text. */
     private readCount;
-    /** The count copy, in the consumer's wording when they supplied one. */
     private countMessage;
-    /** True once the value is longer than the configured soft limit. */
     private isOverLimit;
-    /**
-     * Server errors first, then whatever the last validation run produced, then
-     * the over-limit message — so going over the limit makes the Field invalid
-     * through exactly the same path as any other error, and blocks submit.
-     */
     private composeErrors;
-    /**
-     * Says the count, sparingly. Under the limit it is queued politely, one
-     * typing pause after the last keystroke, so a burst of typing produces one
-     * number instead of a running commentary. Crossing the limit interrupts —
-     * once, on the transition, not on every keystroke past it.
-     *
-     * The over-limit message cannot ride on `commit()`'s error announcement: by
-     * the time validation runs, `update()` has already put the message into
-     * `errors`, so `commit()` no longer sees the field as newly-invalid.
-     */
     private scheduleCountAnnouncement;
-    /** Attaches the controller to its rendered root element. */
     connect(root: HTMLElement): void;
-    /** Detaches every listener. */
     disconnect(): void;
-    /**
-     * Re-discovers the control and re-applies every injected attribute. The
-     * framework layer calls this after each render, because a render may have
-     * swapped the control or mounted/unmounted the Description or Error.
-     */
     sync(): void;
-    /**
-     * Runs validation now. Resolves to whether the field is valid — the
-     * imperative entry point `<skdx-field>.validate()` and Angular's
-     * `SkdxFieldComponent.validate()` expose directly.
-     */
+    private applyConstraintState;
     validate(): Promise<boolean>;
-    /** Marks the field touched without validating (used by a submit pass before it validates). */
+    reset(): void;
     private markTouched;
     private applyStateAttributes;
     private resolveValue;
+    private readValidity;
+    private markPending;
     private nativeMessage;
-    /**
-     * Returns the new message list — synchronously for a sync validator, which
-     * is what lets the submit handler decide whether to `preventDefault()`
-     * before the browser submits.
-     */
     private runValidation;
     private commit;
     private update;
     private readonly handleInput;
+    private scheduleValidation;
+    private hasErrorSummary;
     private readonly handleFocusOut;
+    private isEngineResubmit;
     private readonly handleSubmit;
+    private resubmitIfSettled;
 }

package/dist/field/fieldCore.js

@@ -1 +1 @@
-var t="validity-change",e="data-skdx-field",s="data-skdx-field-name",r="data-skdx-field-message",i="data-skdx-field-description",o="data-skdx-field-error",n="data-skdx-field-character-count",a=1e3;function h(t){const e=Math.abs(t),s=1===e?"character":"characters";return t<0?`You have ${e} ${s} too many`:`You have ${e} ${s} remaining`}function l(t,e,s=0){return s<=0||t>=e*s/100}var u="This field is invalid.",d="data-skdx-field-control",c=[`[${d}]`,'input:not([type="hidden"])',"select","textarea",'[role="textbox"]','[role="searchbox"]','[role="combobox"]','[role="listbox"]','[role="radiogroup"]','[role="group"]','[role="slider"]','[role="spinbutton"]','[role="checkbox"]','[role="radio"]','[role="switch"]'].join(", "),p=/* @__PURE__ */new Set(["radiogroup","group"]),m=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function f(t){return null==t?[]:(Array.isArray(t)?t:[t]).filter(t=>"string"==typeof t&&""!==t.trim())}function v(t){for(const e of Array.from(t.querySelectorAll(c)))if("true"!==e.getAttribute("aria-hidden")&&e.closest("[data-skdx-field]")===t)return e;return null}function b(t,e){for(const s of Array.from(t.querySelectorAll(e)))if(s.closest("[data-skdx-field]")===t)return s;return null}function g(t){if(!t)return;const e=t;return"checkbox"===e.type||"radio"===e.type?e.checked:"value"in t?e.value:t.querySelector('input[aria-hidden="true"]')?.value}function A(t){return null!=t&&!1!==t&&""!==t&&!(Array.isArray(t)&&0===t.length)}function E(t,e,s){s?t.setAttribute(e,""):t.removeAttribute(e)}function y(t){return t.closest("form, skdx-form")??t.parentElement??t}function T(t){return Array.from(t.querySelectorAll(`[${e}][data-invalid]`)).flatMap(t=>{const e=v(t),s=b(t,"[data-skdx-field-error]")?.textContent?.trim()||t.getAttribute("data-skdx-field-message")||t.getAttribute("data-skdx-field-name")||"";return e?.id&&s?[{id:e.id,message:s}]:[]})}function I(t,e=document){const s=e.getElementById(t);if(!s)return;const r=s.getAttribute("role"),i=("FIELDSET"===s.tagName||null!==r&&p.has(r)?s.querySelector(m):null)??s;i.focus(),i.scrollIntoView?.({block:"center"})}var C=class{constructor(t){this.options=t,this.props={},this.root=null,this.form=null,this.control=null,this.baseDescribedBy="",this.runToken=0,this.pending=!1,this.injected=[],this.custom=[],this.characterCount=null,this.handleInput=()=>{const t=this.isOverLimit(this.snapshot.count),e=this.readCount();this.update({dirty:!0,filled:A(this.resolveValue()),count:e,errors:this.composeErrors(e)}),this.scheduleCountAnnouncement(e,t),("change"===this.props.mode||this.snapshot.errors.length>0)&&this.runValidation()},this.handleFocusOut=()=>{const t=this.readCount();this.update({touched:!0,filled:A(this.resolveValue()),count:t,errors:this.composeErrors(t)}),("blur"===(this.props.mode??"blur")||this.snapshot.errors.length>0)&&this.runValidation()},this.handleSubmit=t=>{if(t.target?.closest?.("form")!==this.form)return;this.markTouched();const e=this.runValidation({silent:!0});(L(e)||e.length>0||this.pending)&&t.preventDefault()},this.snapshot={controlId:t.controlId,errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0}}get state(){return this.snapshot}setProps(t){this.props=t;const e=f(t.errors??null);(function(t,e){return t.length===e.length&&t.every((t,s)=>t===e[s])})(this.injected,e)||(this.injected=e,this.update({errors:this.composeErrors()}))}setCharacterCount(t){if((this.characterCount?.maxLength??null)===(t?.maxLength??null)&&(this.characterCount?.threshold??0)===(t?.threshold??0))return;this.characterCount=t;const e=this.readCount();this.update({count:e,errors:this.composeErrors(e)})}readCount(){const t=this.resolveValue();return"string"==typeof t?t.length:0}countMessage(t){return(this.props.getCharacterCountMessage??h)(t)}isOverLimit(t){return null!==this.characterCount&&t>this.characterCount.maxLength}composeErrors(t=this.snapshot.count){const e=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(t)&&e.push(this.countMessage(this.characterCount.maxLength-t)),e}scheduleCountAnnouncement(t,e){const s=this.characterCount;if(!s)return;if(clearTimeout(this.announceTimer),this.isOverLimit(t))return void(e||this.options.announce(this.countMessage(s.maxLength-t),"assertive"));if(!l(t,s.maxLength,s.threshold))return;const r=s.maxLength-t;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(r),"polite")},1e3)}connect(t){this.root=t,t.setAttribute(e,""),t.addEventListener("input",this.handleInput,!0),t.addEventListener("change",this.handleInput,!0),t.addEventListener("focusout",this.handleFocusOut,!0),this.form=t.closest("form"),this.form&&t.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();const s=this.readCount();this.update({filled:A(this.resolveValue()),count:s,errors:this.composeErrors(s)})}disconnect(){clearTimeout(this.announceTimer);const t=this.root;t&&(t.removeEventListener("input",this.handleInput,!0),t.removeEventListener("change",this.handleInput,!0),t.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&t.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),this.root=null,this.form=null,this.control=null)}sync(){const t=this.root;if(!t)return;const e=v(t);e!==this.control&&(this.control=e,this.baseDescribedBy=e?.getAttribute("aria-describedby")??"");const{name:n}=this.props;n?t.setAttribute(s,n):t.removeAttribute(s);const a=this.snapshot.errors.join(" ");if(a?t.setAttribute(r,a):t.removeAttribute(r),this.applyStateAttributes(t),!e)return;e.id||(e.id=this.options.controlId),e.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:e.id},this.options.onSnapshotChange(this.snapshot));const h=null!==b(t,`[${i}]`),l=null!==b(t,`[${o}]`),u=function(t,...e){const s=t.split(/\s+/).filter(Boolean);for(const t of e)t&&!s.includes(t)&&s.push(t);return s.join(" ")}(this.baseDescribedBy,h?this.options.descriptionId:void 0,l?this.options.errorId:void 0);u?e.setAttribute("aria-describedby",u):e.removeAttribute("aria-describedby"),this.snapshot.errors.length>0?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid");const d=null!==t.ownerDocument.getElementById(this.options.labelId);this.options.grouped&&d?e.setAttribute("aria-labelledby",this.options.labelId):e.getAttribute("aria-labelledby")===this.options.labelId&&e.removeAttribute("aria-labelledby"),this.applyStateAttributes(e)}validate(){return Promise.resolve(this.runValidation()).then(t=>0===t.length)}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(t){const{errors:e,touched:s,dirty:r,filled:i,count:o}=this.snapshot;E(t,"data-invalid",e.length>0),E(t,"data-valid",0===e.length),E(t,"data-touched",s),E(t,"data-dirty",r),E(t,"data-filled",i),E(t,"data-over-limit",this.isOverLimit(o))}resolveValue(){return void 0!==this.props.value?this.props.value:g(this.control)}nativeMessage(){const t=this.control;return!t?.validity||t.validity.valid?null:t.validationMessage||this.props.invalidMessage||"This field is invalid."}runValidation(t={}){const e=++this.runToken,s=this.props.validate?.(this.resolveValue());return L(s)?(this.pending=!0,Promise.resolve(s).then(s=>e!==this.runToken?this.snapshot.errors:(this.pending=!1,this.commit(s,t)))):this.commit(s,t)}commit(t,e){if(this.custom=f(t),0===this.custom.length&&0===this.injected.length){const t=this.nativeMessage();t&&(this.custom=[t])}const s=this.readCount(),r=this.composeErrors(s),i=0===this.snapshot.errors.length;this.update({errors:r,count:s,filled:A(this.resolveValue())});const o=r[0];return o&&i&&!e.silent&&this.options.announce(o,"assertive"),r}update(e){const s={...this.snapshot,...e,valid:!0};s.valid=0===s.errors.length,!function(t,e){return t.controlId===e.controlId&&t.valid===e.valid&&t.touched===e.touched&&t.dirty===e.dirty&&t.filled===e.filled&&t.count===e.count&&t.errors.length===e.errors.length&&t.errors.every((t,s)=>t===e.errors[s])}(this.snapshot,s)&&(this.snapshot=s,this.sync(),this.options.onSnapshotChange(s),this.root?.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:{valid:s.valid,errors:s.errors,touched:s.touched,dirty:s.dirty,filled:s.filled,count:s.count}})))}};function L(t){return"function"==typeof t?.then}export{a as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,n as FIELD_CHARACTER_COUNT_ATTRIBUTE,d as FIELD_CONTROL_ATTRIBUTE,c as FIELD_CONTROL_SELECTOR,i as FIELD_DESCRIPTION_ATTRIBUTE,o as FIELD_ERROR_ATTRIBUTE,r as FIELD_MESSAGE_ATTRIBUTE,s as FIELD_NAME_ATTRIBUTE,e as FIELD_ROOT_ATTRIBUTE,t as FIELD_VALIDITY_CHANGE_EVENT,C as FieldController,u as NATIVE_INVALID_FALLBACK_MESSAGE,h as characterCountMessage,l as characterCountVisible,T as collectFieldErrors,y as errorSummaryScope,v as findFieldControl,I as focusFieldTarget,A as isFilled,f as normalizeMessages,g as readControlValue};
+var t="validity-change",e="data-skdx-field",i="data-skdx-field-name",s="data-skdx-field-message",r="data-skdx-field-description",o="data-skdx-field-error",n="data-skdx-field-character-count",a="data-skdx-field-pending",l="data-skdx-field-resubmit",d="data-skdx-form-field",h="data-skdx-form-message",u=["validity-change","invalid","change","blur"],c="data-skdx-error-summary",m=1e3;function p(t){const e=Math.abs(t),i=1===e?"character":"characters";return t<0?`You have ${e} ${i} too many`:`You have ${e} ${i} remaining`}function b(t,e,i=0){return i<=0||t>=e*i/100}var f="This field is invalid.",v="data-skdx-field-control",y=[`[${v}]`,'input:not([type="hidden"])',"select","textarea",'[role="textbox"]','[role="searchbox"]','[role="combobox"]','[role="listbox"]','[role="radiogroup"]','[role="group"]','[role="slider"]','[role="spinbutton"]','[role="checkbox"]','[role="radio"]','[role="switch"]'].join(", "),g="data-skdx-field-required-indicator",T=/* @__PURE__ */new Set(["INPUT","SELECT","TEXTAREA"]),E=/* @__PURE__ */new Set(["radiogroup","group"]),A=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function I(t){return null==t?[]:(Array.isArray(t)?t:[t]).filter(t=>"string"==typeof t&&""!==t.trim())}function L(t){for(const e of Array.from(t.querySelectorAll(y)))if("true"!==e.getAttribute("aria-hidden")&&e.closest("[data-skdx-field]")===t)return e;return null}function C(t,i){return S(t,e,i)}function S(t,e,i){for(const s of Array.from(t.querySelectorAll(i)))if(s.closest(`[${e}]`)===t)return s;return null}function R(t){if(!t)return;const e=t;return"checkbox"===e.type||"radio"===e.type?e.checked:"value"in t?e.value:t.querySelector('input[aria-hidden="true"]')?.value}function x(t){return null!=t&&!1!==t&&""!==t&&!(Array.isArray(t)&&0===t.length)}function _(t,e,i){i?t.setAttribute(e,""):t.removeAttribute(e)}function k(t,...e){const i=t.split(/\s+/).filter(Boolean);for(const t of e)t&&!i.includes(t)&&i.push(t);return i.join(" ")}function D(t){return t.closest("form, skdx-form")??t.parentElement??t}function w(t){const e=L(t),i=C(t,"[data-skdx-field-error]")?.textContent?.trim()||t.getAttribute("data-skdx-field-message")||t.getAttribute("data-skdx-field-name")||"";return e?.id&&i?[{id:e.id,message:i}]:[]}function B(t){const e=S(t,d,y);if(!e?.id||"true"!==e.getAttribute("aria-invalid"))return[];const i=S(t,"data-skdx-form-field","[data-skdx-form-message]:not([hidden])")?.textContent?.trim()||t.getAttribute("data-skdx-field-name")||"";return i?[{id:e.id,message:i}]:[]}function F(t){return Array.from(t.querySelectorAll(`[${e}][data-invalid], [${d}]`)).flatMap(t=>(t.hasAttribute("data-skdx-field")?w:B)(t))}var V="__skdxFieldCheckValidity",O="__skdxFieldReset";async function M(t){const i=Array.from(t.querySelectorAll(`[${e}]`));return(await Promise.all(i.map(t=>t[V]?.()??!0))).every(Boolean)}function q(t){for(const i of Array.from(t.querySelectorAll(`[${e}]`)))i[O]?.()}function N(t,e=document){const i=e.getElementById(t);if(!i)return;const s=i.getAttribute("role"),r=("FIELDSET"===i.tagName||null!==s&&E.has(s)?i.querySelector(A):null)??i;r.focus(),r.scrollIntoView?.({block:"center"})}var U=class{constructor(t){this.options=t,this.props={},this.root=null,this.form=null,this.control=null,this.baseDescribedBy="",this.baseLabelledBy="",this.wroteLabelledBy=!1,this.wroteRequired=!1,this.wroteDisabled=!1,this.runToken=0,this.pending=!1,this.injected=[],this.custom=[],this.characterCount=null,this.awaitingSubmit=!1,this.handleInput=()=>{const t=this.isOverLimit(this.snapshot.count),e=this.readCount();this.update({dirty:!0,filled:x(this.resolveValue()),count:e,errors:this.composeErrors(e)}),this.scheduleCountAnnouncement(e,t),("change"===this.props.mode||this.snapshot.errors.length>0)&&this.scheduleValidation()},this.handleFocusOut=()=>{const t=this.readCount();this.update({touched:!0,filled:x(this.resolveValue()),count:t,errors:this.composeErrors(t)});const e=void 0!==this.validationTimer;clearTimeout(this.validationTimer),this.validationTimer=void 0;const i=this.props.mode??"blur";(e||"blur"===i||this.snapshot.errors.length>0)&&this.runValidation()},this.handleSubmit=t=>{if(t.target?.closest?.("form")!==this.form||this.isEngineResubmit(t))return;this.markTouched();const e=this.runValidation({silent:this.hasErrorSummary()});if(P(e))return t.preventDefault(),this.awaitingSubmit=!0,void Promise.resolve(e).then(()=>{this.awaitingSubmit&&(this.awaitingSubmit=!1,this.resubmitIfSettled())});(e.length>0||this.pending)&&t.preventDefault()},this.snapshot={controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null}}get state(){return this.snapshot}setProps(t){const e=this.props.value;this.props=t;const i=I(t.errors??null),s=!function(t,e){return t.length===e.length&&t.every((t,i)=>t===e[i])}(this.injected,i);s&&(this.injected=i);const r=t.value!==e;if(!s&&!r)return;const o=this.readCount();this.update({count:o,filled:x(this.resolveValue()),errors:this.composeErrors(o)})}setCharacterCount(t){if((this.characterCount?.maxLength??null)===(t?.maxLength??null)&&(this.characterCount?.threshold??0)===(t?.threshold??0))return;this.characterCount=t;const e=this.readCount();this.update({count:e,errors:this.composeErrors(e)})}readCount(){const t=this.resolveValue();return"string"==typeof t?t.length:0}countMessage(t){return(this.props.getCharacterCountMessage??p)(t)}isOverLimit(t){return null!==this.characterCount&&t>this.characterCount.maxLength}composeErrors(t=this.snapshot.count){const e=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(t)&&e.push(this.countMessage(this.characterCount.maxLength-t)),e}scheduleCountAnnouncement(t,e){const i=this.characterCount;if(!i)return;if(clearTimeout(this.announceTimer),this.isOverLimit(t))return void(e||this.options.announce(this.countMessage(i.maxLength-t),"assertive"));if(!b(t,i.maxLength,i.threshold))return;const s=i.maxLength-t;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(s),"polite")},1e3)}connect(t){this.root=t,t.setAttribute(e,""),Object.defineProperty(t,V,{value:()=>this.validate(),configurable:!0,enumerable:!1,writable:!0}),Object.defineProperty(t,O,{value:()=>this.reset(),configurable:!0,enumerable:!1,writable:!0}),t.addEventListener("input",this.handleInput,!0),t.addEventListener("change",this.handleInput,!0),t.addEventListener("focusout",this.handleFocusOut,!0),this.form=t.closest("form"),this.form&&t.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();const i=this.readCount();this.update({filled:x(this.resolveValue()),count:i,errors:this.composeErrors(i)})}disconnect(){clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.awaitingSubmit=!1;const t=this.root;t&&(t.removeEventListener("input",this.handleInput,!0),t.removeEventListener("change",this.handleInput,!0),t.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&t.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),delete t[V],delete t[O],this.root=null,this.form=null,this.control=null)}sync(){const t=this.root;if(!t)return;const e=L(t);e!==this.control&&(this.control=e,this.baseDescribedBy=e?.getAttribute("aria-describedby")??"",this.baseLabelledBy=e?.getAttribute("aria-labelledby")??"",this.wroteLabelledBy=!1,this.wroteRequired=!1,this.wroteDisabled=!1);const{name:n}=this.props;n?t.setAttribute(i,n):t.removeAttribute(i);const a=this.snapshot.errors.join(" ");if(a?t.setAttribute(s,a):t.removeAttribute(s),this.applyStateAttributes(t),!e)return;e.id||(e.id=this.options.controlId),e.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:e.id,validity:this.readValidity()},this.options.onSnapshotChange(this.snapshot));const l=null!==C(t,`[${r}]`),d=null!==C(t,`[${o}]`),h=k(this.baseDescribedBy,l?this.options.descriptionId:void 0,d?this.options.errorId:void 0);h?e.setAttribute("aria-describedby",h):e.removeAttribute("aria-describedby"),this.snapshot.errors.length>0?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid");const u=null!==t.ownerDocument.getElementById(this.options.labelId);this.options.grouped&&u?(e.setAttribute("aria-labelledby",k(this.baseLabelledBy,this.options.labelId)),this.wroteLabelledBy=!0):this.wroteLabelledBy&&(this.baseLabelledBy?e.setAttribute("aria-labelledby",this.baseLabelledBy):e.removeAttribute("aria-labelledby"),this.wroteLabelledBy=!1),this.applyConstraintState(e),this.applyStateAttributes(e)}applyConstraintState(t){const e=T.has(t.tagName),i=!0===this.props.required,s=!0===this.props.disabled;i?(e?t.setAttribute("required",""):t.setAttribute("aria-required","true"),this.wroteRequired=!0):this.wroteRequired&&(t.removeAttribute(e?"required":"aria-required"),this.wroteRequired=!1),s?(e?t.setAttribute("disabled",""):t.setAttribute("aria-disabled","true"),this.wroteDisabled=!0):this.wroteDisabled&&(t.removeAttribute(e?"disabled":"aria-disabled"),this.wroteDisabled=!1)}validate(){return Promise.resolve(this.runValidation()).then(t=>0===t.length)}reset(){this.injected=[],this.custom=[],this.pending=!1,this.awaitingSubmit=!1,this.runToken++,clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.markPending(!1);const t=this.readCount();this.update({touched:!1,dirty:!1,count:t,filled:x(this.resolveValue()),errors:this.composeErrors(t)}),this.sync()}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(t){const{errors:e,touched:i,dirty:s,filled:r,count:o}=this.snapshot;_(t,"data-invalid",e.length>0),_(t,"data-valid",0===e.length),_(t,"data-touched",i),_(t,"data-dirty",s),_(t,"data-filled",r),_(t,"data-over-limit",this.isOverLimit(o)),_(t,"data-disabled",!0===this.props.disabled)}resolveValue(){return void 0!==this.props.value?this.props.value:R(this.control)}readValidity(){return this.control?.validity??null}markPending(t){this.root&&_(this.root,a,t)}nativeMessage(){const t=this.control;return!t?.validity||t.validity.valid?null:t.validationMessage||this.props.invalidMessage||"This field is invalid."}runValidation(t={}){const e=++this.runToken,i=this.props.validate?.(this.resolveValue());return P(i)?(this.pending=!0,this.markPending(!0),Promise.resolve(i).then(i=>e!==this.runToken?this.snapshot.errors:(this.pending=!1,this.markPending(!1),this.commit(i,t)))):this.commit(i,t)}commit(t,e){this.custom=I(t);const i=this.nativeMessage();i&&!this.custom.includes(i)&&!this.injected.includes(i)&&(this.custom=[...this.custom,i]);const s=this.readCount(),r=this.composeErrors(s),o=0===this.snapshot.errors.length;this.update({errors:r,count:s,filled:x(this.resolveValue())});const n=r[0];return n&&o&&!e.silent&&this.options.announce(n,"assertive"),r}update(e){const i={...this.snapshot,...e,valid:!0,validity:this.readValidity()};i.valid=0===i.errors.length,!function(t,e){return t.controlId===e.controlId&&t.valid===e.valid&&t.touched===e.touched&&t.dirty===e.dirty&&t.filled===e.filled&&t.count===e.count&&t.validity===e.validity&&t.errors.length===e.errors.length&&t.errors.every((t,i)=>t===e.errors[i])}(this.snapshot,i)&&(this.snapshot=i,this.sync(),this.options.onSnapshotChange(i),this.root?.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:{valid:i.valid,errors:i.errors,touched:i.touched,dirty:i.dirty,filled:i.filled,count:i.count,validity:i.validity}})))}scheduleValidation(){clearTimeout(this.validationTimer),this.validationTimer=void 0;const t="change"===this.props.mode?this.props.validationDebounceTime??0:0;t<=0?this.runValidation():this.validationTimer=setTimeout(()=>{this.validationTimer=void 0,this.runValidation()},t)}hasErrorSummary(){return null!=this.form?.querySelector(`[${c}]`)}isEngineResubmit(t){return!!this.form?.hasAttribute("data-skdx-field-resubmit")&&(this.snapshot.errors.length>0&&t.preventDefault(),!0)}resubmitIfSettled(){const t=this.form;if(t&&"function"==typeof t.requestSubmit&&!t.querySelector("[data-skdx-field-pending]")&&!t.querySelector("[data-skdx-field][data-invalid]")){t.setAttribute(l,"");try{t.requestSubmit()}finally{t.removeAttribute(l)}}}};function P(t){return"function"==typeof t?.then}export{m as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,u as ERROR_SUMMARY_RESCAN_EVENTS,n as FIELD_CHARACTER_COUNT_ATTRIBUTE,v as FIELD_CONTROL_ATTRIBUTE,y as FIELD_CONTROL_SELECTOR,r as FIELD_DESCRIPTION_ATTRIBUTE,o as FIELD_ERROR_ATTRIBUTE,c as FIELD_ERROR_SUMMARY_ATTRIBUTE,s as FIELD_MESSAGE_ATTRIBUTE,i as FIELD_NAME_ATTRIBUTE,a as FIELD_PENDING_ATTRIBUTE,g as FIELD_REQUIRED_INDICATOR_ATTRIBUTE,l as FIELD_RESUBMIT_ATTRIBUTE,e as FIELD_ROOT_ATTRIBUTE,t as FIELD_VALIDITY_CHANGE_EVENT,d as FORM_FIELD_ATTRIBUTE,h as FORM_MESSAGE_ATTRIBUTE,U as FieldController,f as NATIVE_INVALID_FALLBACK_MESSAGE,p as characterCountMessage,b as characterCountVisible,F as collectFieldErrors,D as errorSummaryScope,L as findFieldControl,N as focusFieldTarget,x as isFilled,I as normalizeMessages,R as readControlValue,q as resetFields,M as validateFields};

package/dist/field/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./fieldCore.cjs"),r=require("./Field.vue.cjs"),i=require("./Fieldset.vue.cjs"),_=require("./FieldLabel.vue.cjs"),t=require("./FieldDescription.vue.cjs"),E=require("./FieldError.vue.cjs"),C=require("./FieldCharacterCount.vue.cjs");exports.CHARACTER_COUNT_ANNOUNCE_DELAY_MS=e.CHARACTER_COUNT_ANNOUNCE_DELAY_MS;exports.FIELD_CHARACTER_COUNT_ATTRIBUTE=e.FIELD_CHARACTER_COUNT_ATTRIBUTE;exports.FIELD_CONTROL_SELECTOR=e.FIELD_CONTROL_SELECTOR;exports.FIELD_VALIDITY_CHANGE_EVENT=e.FIELD_VALIDITY_CHANGE_EVENT;exports.NATIVE_INVALID_FALLBACK_MESSAGE=e.NATIVE_INVALID_FALLBACK_MESSAGE;exports.SkdxField=r.default;exports.SkdxFieldCharacterCount=C.default;exports.SkdxFieldDescription=t.default;exports.SkdxFieldError=E.default;exports.SkdxFieldLabel=_.default;exports.SkdxFieldset=i.default;exports.characterCountMessage=e.characterCountMessage;exports.characterCountVisible=e.characterCountVisible;exports.findFieldControl=e.findFieldControl;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Field.vue.cjs"),r=require("./Fieldset.vue.cjs");exports.SkdxField=e.default;exports.SkdxFieldset=r.default;

package/dist/field/index.d.cts

@@ -1,8 +1,4 @@
 export { default as SkdxField } from './Field.vue.cjs';
 export { default as SkdxFieldset } from './Fieldset.vue.cjs';
-export { default as SkdxFieldLabel } from './FieldLabel.vue.cjs';
-export { default as SkdxFieldDescription } from './FieldDescription.vue.cjs';
-export { default as SkdxFieldError } from './FieldError.vue.cjs';
-export { default as SkdxFieldCharacterCount } from './FieldCharacterCount.vue.cjs';
 export type { FieldValidityDetail } from './context.cjs';
-export { CHARACTER_COUNT_ANNOUNCE_DELAY_MS, characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_CONTROL_SELECTOR, FIELD_VALIDITY_CHANGE_EVENT, NATIVE_INVALID_FALLBACK_MESSAGE, findFieldControl, type FieldSnapshot, type FieldMode, type FieldValidator, type FieldValidationResult, type FieldCharacterCountOptions, } from './fieldCore.cjs';
+export type { FieldMode, FieldSnapshot, FieldValidator, FieldValidationResult } from './fieldCore.cjs';

package/dist/field/index.d.ts

@@ -1,8 +1,4 @@
 export { default as SkdxField } from './Field.vue.js';
 export { default as SkdxFieldset } from './Fieldset.vue.js';
-export { default as SkdxFieldLabel } from './FieldLabel.vue.js';
-export { default as SkdxFieldDescription } from './FieldDescription.vue.js';
-export { default as SkdxFieldError } from './FieldError.vue.js';
-export { default as SkdxFieldCharacterCount } from './FieldCharacterCount.vue.js';
 export type { FieldValidityDetail } from './context.js';
-export { CHARACTER_COUNT_ANNOUNCE_DELAY_MS, characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_CONTROL_SELECTOR, FIELD_VALIDITY_CHANGE_EVENT, NATIVE_INVALID_FALLBACK_MESSAGE, findFieldControl, type FieldSnapshot, type FieldMode, type FieldValidator, type FieldValidationResult, type FieldCharacterCountOptions, } from './fieldCore.js';
+export type { FieldMode, FieldSnapshot, FieldValidator, FieldValidationResult } from './fieldCore.js';

package/dist/field/index.js

@@ -1 +1 @@
-import{CHARACTER_COUNT_ANNOUNCE_DELAY_MS as e,FIELD_CHARACTER_COUNT_ATTRIBUTE as s,FIELD_CONTROL_SELECTOR as a,FIELD_VALIDITY_CHANGE_EVENT as r,NATIVE_INVALID_FALLBACK_MESSAGE as E,characterCountMessage as C,characterCountVisible as i,findFieldControl as o}from"./fieldCore.js";import _ from"./Field.vue.js";import A from"./Fieldset.vue.js";import t from"./FieldLabel.vue.js";import T from"./FieldDescription.vue.js";import d from"./FieldError.vue.js";import F from"./FieldCharacterCount.vue.js";export{e as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,s as FIELD_CHARACTER_COUNT_ATTRIBUTE,a as FIELD_CONTROL_SELECTOR,r as FIELD_VALIDITY_CHANGE_EVENT,E as NATIVE_INVALID_FALLBACK_MESSAGE,_ as SkdxField,F as SkdxFieldCharacterCount,T as SkdxFieldDescription,d as SkdxFieldError,t as SkdxFieldLabel,A as SkdxFieldset,C as characterCountMessage,i as characterCountVisible,o as findFieldControl};
+import e from"./Field.vue.js";import d from"./Fieldset.vue.js";export{e as SkdxField,d as SkdxFieldset};

package/dist/field/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./fieldCore.cjs"),r=require("./FieldDescription.vue.cjs"),i=require("./FieldError.vue.cjs"),_=require("./FieldLabel.vue.cjs"),E=require("./FieldRequiredIndicator.vue.cjs"),t=require("./FieldRoot.vue.cjs"),d=require("./Fieldset.vue.cjs"),C=require("./FieldCharacterCount.vue.cjs");exports.CHARACTER_COUNT_ANNOUNCE_DELAY_MS=e.CHARACTER_COUNT_ANNOUNCE_DELAY_MS;exports.FIELD_CHARACTER_COUNT_ATTRIBUTE=e.FIELD_CHARACTER_COUNT_ATTRIBUTE;exports.FIELD_CONTROL_SELECTOR=e.FIELD_CONTROL_SELECTOR;exports.FIELD_REQUIRED_INDICATOR_ATTRIBUTE=e.FIELD_REQUIRED_INDICATOR_ATTRIBUTE;exports.FIELD_VALIDITY_CHANGE_EVENT=e.FIELD_VALIDITY_CHANGE_EVENT;exports.NATIVE_INVALID_FALLBACK_MESSAGE=e.NATIVE_INVALID_FALLBACK_MESSAGE;exports.SkdxFieldCharacterCount=C.default;exports.SkdxFieldDescription=r.default;exports.SkdxFieldError=i.default;exports.SkdxFieldLabel=_.default;exports.SkdxFieldRequiredIndicator=E.default;exports.SkdxFieldRoot=t.default;exports.SkdxFieldset=d.default;exports.characterCountMessage=e.characterCountMessage;exports.characterCountVisible=e.characterCountVisible;exports.findFieldControl=e.findFieldControl;

package/dist/field/primitives.d.cts

@@ -0,0 +1,30 @@
+/**
+ * Advanced primitives for custom `SkdxField` layouts. Recipe built from these.
+ * Root/Fieldset headless (derive nothing).
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxFieldCharacterCount, SkdxFieldDescription, SkdxFieldError, SkdxFieldLabel, SkdxFieldRequiredIndicator, SkdxFieldRoot } from '@skdx/vue/primitives/field';
+ * </script>
+ *
+ * <template>
+ *   <SkdxFieldRoot required>
+ *     <SkdxFieldLabel>Why are you applying?<SkdxFieldRequiredIndicator /></SkdxFieldLabel>
+ *     <textarea />
+ *     <SkdxFieldDescription>Two or three sentences is plenty.</SkdxFieldDescription>
+ *     <SkdxFieldCharacterCount :max-length="200" :threshold="75" />
+ *     <SkdxFieldError />
+ *   </SkdxFieldRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxFieldRoot } from './FieldRoot.vue.cjs';
+export { default as SkdxFieldset } from './Fieldset.vue.cjs';
+export { default as SkdxFieldLabel } from './FieldLabel.vue.cjs';
+export { default as SkdxFieldRequiredIndicator } from './FieldRequiredIndicator.vue.cjs';
+export { default as SkdxFieldDescription } from './FieldDescription.vue.cjs';
+export { default as SkdxFieldError } from './FieldError.vue.cjs';
+export { default as SkdxFieldCharacterCount } from './FieldCharacterCount.vue.cjs';
+export type { FieldValidityDetail } from './context.cjs';
+export { CHARACTER_COUNT_ANNOUNCE_DELAY_MS, characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_REQUIRED_INDICATOR_ATTRIBUTE, FIELD_CONTROL_SELECTOR, FIELD_VALIDITY_CHANGE_EVENT, NATIVE_INVALID_FALLBACK_MESSAGE, findFieldControl, type FieldSnapshot, type FieldMode, type FieldValidator, type FieldValidationResult, type FieldCharacterCountOptions, } from './fieldCore.cjs';

package/dist/field/primitives.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Advanced primitives for custom `SkdxField` layouts. Recipe built from these.
+ * Root/Fieldset headless (derive nothing).
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxFieldCharacterCount, SkdxFieldDescription, SkdxFieldError, SkdxFieldLabel, SkdxFieldRequiredIndicator, SkdxFieldRoot } from '@skdx/vue/primitives/field';
+ * </script>
+ *
+ * <template>
+ *   <SkdxFieldRoot required>
+ *     <SkdxFieldLabel>Why are you applying?<SkdxFieldRequiredIndicator /></SkdxFieldLabel>
+ *     <textarea />
+ *     <SkdxFieldDescription>Two or three sentences is plenty.</SkdxFieldDescription>
+ *     <SkdxFieldCharacterCount :max-length="200" :threshold="75" />
+ *     <SkdxFieldError />
+ *   </SkdxFieldRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxFieldRoot } from './FieldRoot.vue.js';
+export { default as SkdxFieldset } from './Fieldset.vue.js';
+export { default as SkdxFieldLabel } from './FieldLabel.vue.js';
+export { default as SkdxFieldRequiredIndicator } from './FieldRequiredIndicator.vue.js';
+export { default as SkdxFieldDescription } from './FieldDescription.vue.js';
+export { default as SkdxFieldError } from './FieldError.vue.js';
+export { default as SkdxFieldCharacterCount } from './FieldCharacterCount.vue.js';
+export type { FieldValidityDetail } from './context.js';
+export { CHARACTER_COUNT_ANNOUNCE_DELAY_MS, characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_REQUIRED_INDICATOR_ATTRIBUTE, FIELD_CONTROL_SELECTOR, FIELD_VALIDITY_CHANGE_EVENT, NATIVE_INVALID_FALLBACK_MESSAGE, findFieldControl, type FieldSnapshot, type FieldMode, type FieldValidator, type FieldValidationResult, type FieldCharacterCountOptions, } from './fieldCore.js';

package/dist/field/primitives.js

@@ -0,0 +1 @@
+import{CHARACTER_COUNT_ANNOUNCE_DELAY_MS as e,FIELD_CHARACTER_COUNT_ATTRIBUTE as r,FIELD_CONTROL_SELECTOR as a,FIELD_REQUIRED_INDICATOR_ATTRIBUTE as s,FIELD_VALIDITY_CHANGE_EVENT as E,NATIVE_INVALID_FALLBACK_MESSAGE as i,characterCountMessage as o,characterCountVisible as _,findFieldControl as C}from"./fieldCore.js";import A from"./FieldDescription.vue.js";import T from"./FieldError.vue.js";import t from"./FieldLabel.vue.js";import d from"./FieldRequiredIndicator.vue.js";import I from"./FieldRoot.vue.js";import F from"./Fieldset.vue.js";import R from"./FieldCharacterCount.vue.js";export{e as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,r as FIELD_CHARACTER_COUNT_ATTRIBUTE,a as FIELD_CONTROL_SELECTOR,s as FIELD_REQUIRED_INDICATOR_ATTRIBUTE,E as FIELD_VALIDITY_CHANGE_EVENT,i as NATIVE_INVALID_FALLBACK_MESSAGE,R as SkdxFieldCharacterCount,A as SkdxFieldDescription,T as SkdxFieldError,t as SkdxFieldLabel,d as SkdxFieldRequiredIndicator,I as SkdxFieldRoot,F as SkdxFieldset,o as characterCountMessage,_ as characterCountVisible,C as findFieldControl};

package/dist/field/useField.cjs

@@ -1 +1 @@
-const v=require("./fieldCore.cjs"),h=require("../utils/liveAnnouncer.cjs"),o=require("./context.cjs");let n=require("vue");function g(e,u,I){const c={labelId:o.nextFieldId("label"),descriptionId:o.nextFieldId("description"),errorId:o.nextFieldId("error"),controlId:o.nextFieldId("control")},a=(0,n.ref)(c.controlId),l=(0,n.ref)([]),d=(0,n.ref)(0),i=(0,n.ref)(null),r=new v.FieldController({...c,grouped:u,onSnapshotChange:t=>{a.value=t.controlId,l.value=t.errors,d.value=t.count;const{controlId:s,...f}=t;I(f)},announce:h.announce});(0,n.provide)(o.FIELD_CONTEXT,{...c,controlId:a,errors:l,grouped:u,count:d,setCharacterCount:t=>r.setCharacterCount(t),get getCharacterCountMessage(){return e.getCharacterCountMessage},requestSync:()=>r.sync()});let C=!1;return(0,n.watchEffect)(()=>{const t={validate:e.validate,mode:e.mode,errors:e.errors,value:e.value,name:e.name,getCharacterCountMessage:e.getCharacterCountMessage,invalidMessage:e.invalidMessage},s=i.value;s&&!C&&(C=!0,r.connect(s)),r.setProps(t),r.sync()},{flush:"post"}),(0,n.watch)([l,a],()=>r.sync(),{flush:"post"}),(0,n.onUnmounted)(()=>r.disconnect()),i}exports.useField=g;
+const h=require("./fieldCore.cjs"),o=require("./context.cjs"),I=require("../utils/liveAnnouncer.cjs");let r=require("vue");function g(e,l,C){const d={labelId:o.nextFieldId("label"),descriptionId:o.nextFieldId("description"),errorId:o.nextFieldId("error"),controlId:o.nextFieldId("control")},a=(0,r.ref)(""),c=(0,r.ref)([]),u=(0,r.ref)(0),s=(0,r.ref)(null),t=new h.FieldController({...d,grouped:l,onSnapshotChange:n=>{a.value=n.controlId,c.value=n.errors,u.value=n.count;const{controlId:i,...f}=n;C(f)},announce:I.announce});(0,r.provide)(o.FIELD_CONTEXT,{...d,controlId:a,errors:c,grouped:l,get required(){return e.required===!0},count:u,setCharacterCount:n=>t.setCharacterCount(n),get getCharacterCountMessage(){return e.getCharacterCountMessage},requestSync:()=>t.sync()});let v=!1;return(0,r.watchEffect)(()=>{const n={validate:e.validate,mode:e.mode,errors:e.errors,value:e.value,name:e.name,required:e.required,disabled:e.disabled,getCharacterCountMessage:e.getCharacterCountMessage,invalidMessage:e.invalidMessage,validationDebounceTime:e.validationDebounceTime},i=s.value;i&&!v&&(v=!0,t.connect(i)),t.setProps(n),t.sync()},{flush:"post"}),(0,r.watch)([c,a],()=>t.sync(),{flush:"post"}),(0,r.onUnmounted)(()=>t.disconnect()),{checkValidity:()=>t.validate(),reset:()=>t.reset(),rootRef:s}}exports.useField=g;

package/dist/field/useField.d.cts

@@ -2,12 +2,11 @@ import { type Ref } from 'vue';
 import { type FieldValidityDetail } from './context.cjs';
 import { type FieldControllerProps } from './fieldCore.cjs';
 /**
- * Creates and drives the {@link FieldController} for one Field root, and
- * provides the {@link FIELD_CONTEXT} its parts read. The controller does all
- * the DOM work — discovery, ARIA wiring, the validation model — so this
- * composable only feeds it props, tells it about renders, and mirrors its
- * snapshot into refs so the parts re-render.
- *
- * Returns the template ref to bind to the root element.
+ * Creates and drives FieldController for one Field root, providing FIELD_CONTEXT;
+ * mirrors snapshot into refs for part re-renders. Returns root ref and imperative methods.
  */
-export declare function useField(props: FieldControllerProps, grouped: boolean, onValidityChange: (detail: FieldValidityDetail) => void): Ref<HTMLElement | null>;
+export declare function useField(props: FieldControllerProps, grouped: boolean, onValidityChange: (detail: FieldValidityDetail) => void): {
+    rootRef: Ref<HTMLElement | null>;
+    checkValidity: () => Promise<boolean>;
+    reset: () => void;
+};

package/dist/field/useField.d.ts

@@ -2,12 +2,11 @@ import { type Ref } from 'vue';
 import { type FieldValidityDetail } from './context.js';
 import { type FieldControllerProps } from './fieldCore.js';
 /**
- * Creates and drives the {@link FieldController} for one Field root, and
- * provides the {@link FIELD_CONTEXT} its parts read. The controller does all
- * the DOM work — discovery, ARIA wiring, the validation model — so this
- * composable only feeds it props, tells it about renders, and mirrors its
- * snapshot into refs so the parts re-render.
- *
- * Returns the template ref to bind to the root element.
+ * Creates and drives FieldController for one Field root, providing FIELD_CONTEXT;
+ * mirrors snapshot into refs for part re-renders. Returns root ref and imperative methods.
  */
-export declare function useField(props: FieldControllerProps, grouped: boolean, onValidityChange: (detail: FieldValidityDetail) => void): Ref<HTMLElement | null>;
+export declare function useField(props: FieldControllerProps, grouped: boolean, onValidityChange: (detail: FieldValidityDetail) => void): {
+    rootRef: Ref<HTMLElement | null>;
+    checkValidity: () => Promise<boolean>;
+    reset: () => void;
+};

package/dist/field/useField.js

@@ -1 +1 @@
-import{FieldController as e}from"./fieldCore.js";import{announce as o}from"../utils/liveAnnouncer.js";import{FIELD_CONTEXT as r,nextFieldId as t}from"./context.js";import{onUnmounted as n,provide as a,ref as s,watch as c,watchEffect as l}from"vue";function u(u,d,i){const C={labelId:t("label"),descriptionId:t("description"),errorId:t("error"),controlId:t("control")},g=s(C.controlId),p=s([]),m=s(0),v=s(null),h=new e({...C,grouped:d,onSnapshotChange:e=>{g.value=e.controlId,p.value=e.errors,m.value=e.count;const{controlId:o,...r}=e;i(r)},announce:o});a(r,{...C,controlId:g,errors:p,grouped:d,count:m,setCharacterCount:e=>h.setCharacterCount(e),get getCharacterCountMessage(){return u.getCharacterCountMessage},requestSync:()=>h.sync()});let f=!1;return l(()=>{const e={validate:u.validate,mode:u.mode,errors:u.errors,value:u.value,name:u.name,getCharacterCountMessage:u.getCharacterCountMessage,invalidMessage:u.invalidMessage},o=v.value;o&&!f&&(f=!0,h.connect(o)),h.setProps(e),h.sync()},{flush:"post"}),c([p,g],()=>h.sync(),{flush:"post"}),n(()=>h.disconnect()),v}export{u as useField};
+import{FieldController as e}from"./fieldCore.js";import{FIELD_CONTEXT as r,nextFieldId as t}from"./context.js";import{announce as o}from"../utils/liveAnnouncer.js";import{onUnmounted as a,provide as n,ref as s,watch as c,watchEffect as i}from"vue";function l(l,d,u){const v={labelId:t("label"),descriptionId:t("description"),errorId:t("error"),controlId:t("control")},C=s(""),g=s([]),m=s(0),p=s(null),h=new e({...v,grouped:d,onSnapshotChange:e=>{C.value=e.controlId,g.value=e.errors,m.value=e.count;const{controlId:r,...t}=e;u(t)},announce:o});n(r,{...v,controlId:C,errors:g,grouped:d,get required(){return!0===l.required},count:m,setCharacterCount:e=>h.setCharacterCount(e),get getCharacterCountMessage(){return l.getCharacterCountMessage},requestSync:()=>h.sync()});let f=!1;return i(()=>{const e={validate:l.validate,mode:l.mode,errors:l.errors,value:l.value,name:l.name,required:l.required,disabled:l.disabled,getCharacterCountMessage:l.getCharacterCountMessage,invalidMessage:l.invalidMessage,validationDebounceTime:l.validationDebounceTime},r=p.value;r&&!f&&(f=!0,h.connect(r)),h.setProps(e),h.sync()},{flush:"post"}),c([g,C],()=>h.sync(),{flush:"post"}),a(()=>h.disconnect()),{checkValidity:()=>h.validate(),reset:()=>h.reset(),rootRef:p}}export{l as useField};