@skdx/vue 0.26.0 → 0.28.0

package/dist/field/FieldRoot.vue.d.cts

@@ -0,0 +1,90 @@
+import type { FieldValidityDetail } from './context.cjs';
+import type { FieldMode, FieldValidator } from './fieldCore.cjs';
+/**
+ * Headless validation model and control wiring (ids, aria-describedby/aria-invalid,
+ * data-* hooks), renders verbatim. SkdxField is this plus derived label/description/error;
+ * reach here for full manual composition (only way to place CharacterCount).
+ *
+ * @example With `import * as Field from '@skdx/vue/primitives/field'`:
+ * ```vue
+ * <Field.Root required>
+ *   <Field.Label>Why are you applying?<Field.RequiredIndicator /></Field.Label>
+ *   <textarea />
+ *   <Field.Description>Two or three sentences is plenty.</Field.Description>
+ *   <Field.CharacterCount :max-length="200" :threshold="75" />
+ *   <Field.Error />
+ * </Field.Root>
+ * ```
+ */
+type __VLS_Props = {
+    /** Validator returning one message, several, or `null`/`undefined` when acceptable; may be async. */
+    validate?: FieldValidator;
+    /** When validation first runs; an already-failed field always re-validates on every input. */
+    mode?: FieldMode;
+    /** Server-injected errors, always shown, listed before anything `validate` produces. */
+    errors?: string | string[];
+    /** Value handed to `validate`; omit and the Field reads it off the discovered control. */
+    value?: unknown;
+    /** Field name, used as the `SkdxFormErrorSummary` link text when the field renders no error of its own. */
+    name?: string;
+    /**
+     * Whether an answer is mandatory. Native `required` on an `<input>`/`<select>`/`<textarea>`,
+     * `aria-required="true"` on a group or widget-role element.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is unavailable. Native `disabled` where there is one,
+     * `aria-disabled="true"` otherwise, mirrored as `data-disabled`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Words the character-count copy shared by the rendered text, the announcement, and the over-limit error.
+     * @default undefined — `characterCountMessage`'s English wording ("50 characters remaining").
+     */
+    getCharacterCountMessage?: (remaining: number) => string;
+    /**
+     * Fallback message when native constraint validation fails but the browser reports none of its own.
+     * @default undefined — `NATIVE_INVALID_FALLBACK_MESSAGE` ('This field is invalid.').
+     */
+    invalidMessage?: string;
+    /**
+     * Milliseconds `mode: 'change'` waits after the last keystroke before
+     * running `validate`; a blur flushes the pending run immediately.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Runs server `errors`, `validate`, native constraint validation and the character count now; resolves to whether it's valid. */
+    checkValidity: () => Promise<boolean>;
+    /** Clears messages and `touched`/`dirty`, then re-derives `filled`/`count`. Clear the `errors` prop separately. */
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "validity-change": (detail: FieldValidityDetail) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onValidity-change"?: ((detail: FieldValidityDetail) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: undefined;
+    required: boolean;
+    name: string;
+    errors: string | string[];
+    validate: FieldValidator;
+    mode: FieldMode;
+    getCharacterCountMessage: (remaining: number) => string;
+    invalidMessage: string;
+    validationDebounceTime: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/field/FieldRoot.vue.d.ts

@@ -0,0 +1,90 @@
+import type { FieldValidityDetail } from './context.js';
+import type { FieldMode, FieldValidator } from './fieldCore.js';
+/**
+ * Headless validation model and control wiring (ids, aria-describedby/aria-invalid,
+ * data-* hooks), renders verbatim. SkdxField is this plus derived label/description/error;
+ * reach here for full manual composition (only way to place CharacterCount).
+ *
+ * @example With `import * as Field from '@skdx/vue/primitives/field'`:
+ * ```vue
+ * <Field.Root required>
+ *   <Field.Label>Why are you applying?<Field.RequiredIndicator /></Field.Label>
+ *   <textarea />
+ *   <Field.Description>Two or three sentences is plenty.</Field.Description>
+ *   <Field.CharacterCount :max-length="200" :threshold="75" />
+ *   <Field.Error />
+ * </Field.Root>
+ * ```
+ */
+type __VLS_Props = {
+    /** Validator returning one message, several, or `null`/`undefined` when acceptable; may be async. */
+    validate?: FieldValidator;
+    /** When validation first runs; an already-failed field always re-validates on every input. */
+    mode?: FieldMode;
+    /** Server-injected errors, always shown, listed before anything `validate` produces. */
+    errors?: string | string[];
+    /** Value handed to `validate`; omit and the Field reads it off the discovered control. */
+    value?: unknown;
+    /** Field name, used as the `SkdxFormErrorSummary` link text when the field renders no error of its own. */
+    name?: string;
+    /**
+     * Whether an answer is mandatory. Native `required` on an `<input>`/`<select>`/`<textarea>`,
+     * `aria-required="true"` on a group or widget-role element.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is unavailable. Native `disabled` where there is one,
+     * `aria-disabled="true"` otherwise, mirrored as `data-disabled`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Words the character-count copy shared by the rendered text, the announcement, and the over-limit error.
+     * @default undefined — `characterCountMessage`'s English wording ("50 characters remaining").
+     */
+    getCharacterCountMessage?: (remaining: number) => string;
+    /**
+     * Fallback message when native constraint validation fails but the browser reports none of its own.
+     * @default undefined — `NATIVE_INVALID_FALLBACK_MESSAGE` ('This field is invalid.').
+     */
+    invalidMessage?: string;
+    /**
+     * Milliseconds `mode: 'change'` waits after the last keystroke before
+     * running `validate`; a blur flushes the pending run immediately.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Runs server `errors`, `validate`, native constraint validation and the character count now; resolves to whether it's valid. */
+    checkValidity: () => Promise<boolean>;
+    /** Clears messages and `touched`/`dirty`, then re-derives `filled`/`count`. Clear the `errors` prop separately. */
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "validity-change": (detail: FieldValidityDetail) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onValidity-change"?: ((detail: FieldValidityDetail) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: undefined;
+    required: boolean;
+    name: string;
+    errors: string | string[];
+    validate: FieldValidator;
+    mode: FieldMode;
+    getCharacterCountMessage: (remaining: number) => string;
+    invalidMessage: string;
+    validationDebounceTime: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/field/FieldRoot.vue.js

@@ -0,0 +1 @@
+import e from"./FieldRoot.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/field/FieldRoot.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const s=require("./useField.cjs");let e=require("vue");var f=(0,e.defineComponent)({__name:"FieldRoot",props:{validate:{type:Function,default:void 0},mode:{default:"blur"},errors:{default:void 0},value:{default:void 0},name:{default:void 0},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},getCharacterCountMessage:{type:Function,default:void 0},invalidMessage:{default:void 0},validationDebounceTime:{default:0}},emits:["validity-change"],setup(a,{expose:d,emit:o}){const l=a,i=o,{rootRef:r,checkValidity:u,reset:n}=s.useField(l,!1,t=>i("validity-change",t));return d({checkValidity:u,reset:n}),(t,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-field","data-part":"root","data-skdx-component":"field",ref_key:"rootRef",ref:r},[(0,e.renderSlot)(t.$slots,"default")],512))}});exports.default=f;

package/dist/field/FieldRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useField as e}from"./useField.js";import{createElementBlock as t,defineComponent as a,openBlock as o,renderSlot as d}from"vue";var i=/* @__PURE__ */a({__name:"FieldRoot",props:{validate:{type:Function,default:void 0},mode:{default:"blur"},errors:{default:void 0},value:{default:void 0},name:{default:void 0},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},getCharacterCountMessage:{type:Function,default:void 0},invalidMessage:{default:void 0},validationDebounceTime:{default:0}},emits:["validity-change"],setup(a,{expose:i,emit:l}){const r=a,s=l,{rootRef:n,checkValidity:u,reset:f}=e(r,!1,e=>s("validity-change",e));return i({checkValidity:u,reset:f}),(e,a)=>(o(),t("div",{class:"skdx-field","data-part":"root","data-skdx-component":"field",ref_key:"rootRef",ref:n},[d(e.$slots,"default")],512))}});export{i as default};

package/dist/field/Fieldset.vue.d.cts

@@ -1,18 +1,16 @@
 import type { FieldValidityDetail } from './context.cjs';
 import type { FieldMode, FieldValidator } from './fieldCore.cjs';
 /**
- * A `SkdxField` that renders a `<fieldset>` and puts its `SkdxFieldLabel` in a
- * `<legend>` — the grouping a `SkdxRadioGroup` or a set of checkboxes needs,
- * since a `<label for>` may not point at a `[role="radiogroup"]`. Same props,
- * same validation model, same state hooks; the group control is named with
- * `aria-labelledby` back to the legend instead of `for`/`id`.
+ * Field rendering fieldset with label as legend.
+ * For grouping radiogroups/checkboxes; same validation model as Field.
+ * Label must be first child to render as legend.
  *
- * @example
+ * @example With `import * as Field from '@skdx/vue/primitives/field'`:
  * ```vue
  * <SkdxFieldset :validate="(value) => (value ? null : 'Choose a plan')">
- *   <SkdxFieldLabel>Plan</SkdxFieldLabel>
+ *   <Field.Label>Plan</Field.Label>
  *   <SkdxRadioGroup>…</SkdxRadioGroup>
- *   <SkdxFieldError />
+ *   <Field.Error />
  * </SkdxFieldset>
  * ```
  */
@@ -24,8 +22,7 @@ type __VLS_Props = {
      */
     validate?: FieldValidator;
     /**
-     * When validation first runs. Whatever the mode, a group that has already
-     * failed re-validates on every input.
+     * When validation first runs. Failed groups always re-validate on each input.
      */
     mode?: FieldMode;
     /** Server-injected errors, always shown, listed before anything `validate` produces. */
@@ -35,13 +32,30 @@ type __VLS_Props = {
     /** Field name, used as the `SkdxFormErrorSummary` link text when the group renders no error of its own. */
     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. All three share one
-     * wording deliberately: a screen-reader user hearing a different sentence
-     * from the one on screen has to work out whether they are the same fact.
-     * A negative `remaining` means over the limit.
-     * @default undefined — `characterCountMessage`'s English wording ("50 characters remaining").
+     * Whether an answer is mandatory. Reflected onto the wrapped control as the
+     * native `required` attribute when it is an `<input>`/`<select>`/
+     * `<textarea>`, and as `aria-required="true"` when it is a group or a
+     * widget-role element, which has no native `required` to set.
+     *
+     * Render a `SkdxFieldRequiredIndicator` inside the `SkdxFieldLabel` to say
+     * so visibly; its text joins the control's accessible name.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is unavailable. Applied to the wrapped control — the
+     * native `disabled` attribute where there is one, `aria-disabled="true"`
+     * otherwise, because a disabled *widget* stays focusable and stays
+     * announced — and mirrored as `data-disabled` on the Field root and the
+     * control for styling.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Words the character-count copy and error; all three (displayed text,
+     * announced message, error) share one wording to avoid confusion. Negative
+     * `remaining` indicates over the limit.
+     * @default undefined — English "characters remaining"
      */
     getCharacterCountMessage?: (remaining: number) => string;
     /**
@@ -52,23 +66,46 @@ type __VLS_Props = {
      * @default undefined — `NATIVE_INVALID_FALLBACK_MESSAGE` ('This field is invalid.').
      */
     invalidMessage?: string;
+    /**
+     * How long, in milliseconds, `mode: 'change'` waits after the last
+     * keystroke before running `validate`. Only `change` mode is debounced, and
+     * a blur flushes the pending run immediately — the delay exists to keep a
+     * validator quiet *while* the user types, and a blur means they have
+     * stopped.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /**
+     * Runs validation now and returns validity. Validates server `errors`,
+     * the `validate` prop, native constraint validation, and character count.
+     */
+    checkValidity: () => Promise<boolean>;
+    /**
+     * Clear messages and state; re-derive `filled`/`count` from the control.
+     * Also clear the `errors` prop, which is re-applied on next render.
+     */
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "validity-change": (detail: FieldValidityDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onValidity-change"?: ((detail: FieldValidityDetail) => any) | undefined;
 }>, {
-    name: string;
+    disabled: boolean;
     value: undefined;
-    mode: FieldMode;
+    required: boolean;
+    name: string;
     errors: string | string[];
     validate: FieldValidator;
+    mode: FieldMode;
     getCharacterCountMessage: (remaining: number) => string;
     invalidMessage: string;
+    validationDebounceTime: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/field/Fieldset.vue.d.ts

@@ -1,18 +1,16 @@
 import type { FieldValidityDetail } from './context.js';
 import type { FieldMode, FieldValidator } from './fieldCore.js';
 /**
- * A `SkdxField` that renders a `<fieldset>` and puts its `SkdxFieldLabel` in a
- * `<legend>` — the grouping a `SkdxRadioGroup` or a set of checkboxes needs,
- * since a `<label for>` may not point at a `[role="radiogroup"]`. Same props,
- * same validation model, same state hooks; the group control is named with
- * `aria-labelledby` back to the legend instead of `for`/`id`.
+ * Field rendering fieldset with label as legend.
+ * For grouping radiogroups/checkboxes; same validation model as Field.
+ * Label must be first child to render as legend.
  *
- * @example
+ * @example With `import * as Field from '@skdx/vue/primitives/field'`:
  * ```vue
  * <SkdxFieldset :validate="(value) => (value ? null : 'Choose a plan')">
- *   <SkdxFieldLabel>Plan</SkdxFieldLabel>
+ *   <Field.Label>Plan</Field.Label>
  *   <SkdxRadioGroup>…</SkdxRadioGroup>
- *   <SkdxFieldError />
+ *   <Field.Error />
  * </SkdxFieldset>
  * ```
  */
@@ -24,8 +22,7 @@ type __VLS_Props = {
      */
     validate?: FieldValidator;
     /**
-     * When validation first runs. Whatever the mode, a group that has already
-     * failed re-validates on every input.
+     * When validation first runs. Failed groups always re-validate on each input.
      */
     mode?: FieldMode;
     /** Server-injected errors, always shown, listed before anything `validate` produces. */
@@ -35,13 +32,30 @@ type __VLS_Props = {
     /** Field name, used as the `SkdxFormErrorSummary` link text when the group renders no error of its own. */
     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. All three share one
-     * wording deliberately: a screen-reader user hearing a different sentence
-     * from the one on screen has to work out whether they are the same fact.
-     * A negative `remaining` means over the limit.
-     * @default undefined — `characterCountMessage`'s English wording ("50 characters remaining").
+     * Whether an answer is mandatory. Reflected onto the wrapped control as the
+     * native `required` attribute when it is an `<input>`/`<select>`/
+     * `<textarea>`, and as `aria-required="true"` when it is a group or a
+     * widget-role element, which has no native `required` to set.
+     *
+     * Render a `SkdxFieldRequiredIndicator` inside the `SkdxFieldLabel` to say
+     * so visibly; its text joins the control's accessible name.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is unavailable. Applied to the wrapped control — the
+     * native `disabled` attribute where there is one, `aria-disabled="true"`
+     * otherwise, because a disabled *widget* stays focusable and stays
+     * announced — and mirrored as `data-disabled` on the Field root and the
+     * control for styling.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Words the character-count copy and error; all three (displayed text,
+     * announced message, error) share one wording to avoid confusion. Negative
+     * `remaining` indicates over the limit.
+     * @default undefined — English "characters remaining"
      */
     getCharacterCountMessage?: (remaining: number) => string;
     /**
@@ -52,23 +66,46 @@ type __VLS_Props = {
      * @default undefined — `NATIVE_INVALID_FALLBACK_MESSAGE` ('This field is invalid.').
      */
     invalidMessage?: string;
+    /**
+     * How long, in milliseconds, `mode: 'change'` waits after the last
+     * keystroke before running `validate`. Only `change` mode is debounced, and
+     * a blur flushes the pending run immediately — the delay exists to keep a
+     * validator quiet *while* the user types, and a blur means they have
+     * stopped.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /**
+     * Runs validation now and returns validity. Validates server `errors`,
+     * the `validate` prop, native constraint validation, and character count.
+     */
+    checkValidity: () => Promise<boolean>;
+    /**
+     * Clear messages and state; re-derive `filled`/`count` from the control.
+     * Also clear the `errors` prop, which is re-applied on next render.
+     */
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "validity-change": (detail: FieldValidityDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onValidity-change"?: ((detail: FieldValidityDetail) => any) | undefined;
 }>, {
-    name: string;
+    disabled: boolean;
     value: undefined;
-    mode: FieldMode;
+    required: boolean;
+    name: string;
     errors: string | string[];
     validate: FieldValidator;
+    mode: FieldMode;
     getCharacterCountMessage: (remaining: number) => string;
     invalidMessage: string;
+    validationDebounceTime: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/field/Fieldset.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const l=require("./useField.cjs");let e=require("vue");var o=(0,e.defineComponent)({__name:"Fieldset",props:{validate:{type:Function,default:void 0},mode:{default:"blur"},errors:{default:void 0},value:{default:void 0},name:{default:void 0},getCharacterCountMessage:{type:Function,default:void 0},invalidMessage:{default:void 0}},emits:["validity-change"],setup(r,{emit:u}){const a=r,d=u,i=l.useField(a,!0,t=>d("validity-change",t));return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("fieldset",{ref_key:"rootRef",ref:i},[(0,e.renderSlot)(t.$slots,"default")],512))}});exports.default=o;
+const s=require("./useField.cjs");let e=require("vue");var f=(0,e.defineComponent)({__name:"Fieldset",props:{validate:{type:Function,default:void 0},mode:{default:"blur"},errors:{default:void 0},value:{default:void 0},name:{default:void 0},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},getCharacterCountMessage:{type:Function,default:void 0},invalidMessage:{default:void 0},validationDebounceTime:{default:0}},emits:["validity-change"],setup(a,{expose:l,emit:i}){const d=a,o=i,{rootRef:u,checkValidity:r,reset:n}=s.useField(d,!0,t=>o("validity-change",t));return l({checkValidity:r,reset:n}),(t,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("fieldset",{ref_key:"rootRef",ref:u},[(0,e.renderSlot)(t.$slots,"default")],512))}});exports.default=f;

package/dist/field/Fieldset.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useField as e}from"./useField.js";import{createElementBlock as t,defineComponent as a,openBlock as o,renderSlot as d}from"vue";var i=/* @__PURE__ */a({__name:"Fieldset",props:{validate:{type:Function,default:void 0},mode:{default:"blur"},errors:{default:void 0},value:{default:void 0},name:{default:void 0},getCharacterCountMessage:{type:Function,default:void 0},invalidMessage:{default:void 0}},emits:["validity-change"],setup(a,{emit:i}){const l=i,s=e(a,!0,e=>l("validity-change",e));return(e,a)=>(o(),t("fieldset",{ref_key:"rootRef",ref:s},[d(e.$slots,"default")],512))}});export{i as default};
+import{useField as e}from"./useField.js";import{createElementBlock as t,defineComponent as a,openBlock as o,renderSlot as d}from"vue";var i=/* @__PURE__ */a({__name:"Fieldset",props:{validate:{type:Function,default:void 0},mode:{default:"blur"},errors:{default:void 0},value:{default:void 0},name:{default:void 0},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},getCharacterCountMessage:{type:Function,default:void 0},invalidMessage:{default:void 0},validationDebounceTime:{default:0}},emits:["validity-change"],setup(a,{expose:i,emit:l}){const r=a,s=l,{rootRef:u,checkValidity:n,reset:f}=e(r,!0,e=>s("validity-change",e));return i({checkValidity:n,reset:f}),(e,a)=>(o(),t("fieldset",{ref_key:"rootRef",ref:u},[d(e.$slots,"default")],512))}});export{i as default};

package/dist/field/context.d.cts

@@ -1,12 +1,9 @@
 import type { InjectionKey, Ref } from 'vue';
 import type { FieldCharacterCountOptions, FieldSnapshot } from './fieldCore.cjs';
-/** The state a Field reports through its `validity-change` event. */
+/** Field state from `validity-change` events. */
 export type FieldValidityDetail = Omit<FieldSnapshot, 'controlId'>;
 /**
- * @internal Field identity and state distributed to `SkdxFieldLabel`,
- * `SkdxFieldDescription`, and `SkdxFieldError`. `controlId` and `errors` are refs
- * because the controller rewrites them after mount — it adopts a control that
- * brought its own id, and replaces the message list on every validation run.
+ * @internal Field identity and state distributed to `SkdxFieldLabel`, `SkdxFieldDescription` and `SkdxFieldError`.
  */
 export interface FieldContext {
     labelId: string;
@@ -16,27 +13,18 @@ export interface FieldContext {
     errors: Ref<string[]>;
     /** True for a `SkdxFieldset`: the Label is a `<legend>` and the control is named by `aria-labelledby`. */
     grouped: boolean;
-    /** Length of the wrapped control's current value, for `SkdxFieldCharacterCount`. */
+    /** Whether the Field is required. */
+    readonly required: boolean;
+    /** Current value length. */
     count: Ref<number>;
-    /** Registers (or clears, with `null`) the field's character count. */
+    /** Register character count options. */
     setCharacterCount: (options: FieldCharacterCountOptions | null) => void;
-    /**
-     * The root's `getCharacterCountMessage`, so the rendered count uses the same
-     * wording as the announced one. Provided as an accessor rather than a
-     * snapshot, so a wording swapped after mount reaches
-     * `SkdxFieldCharacterCount`.
-     */
+    /** Formats remaining characters for announcement. */
     readonly getCharacterCountMessage?: (remaining: number) => string;
-    /**
-     * Re-runs the controller's DOM wiring. Parts whose *presence* the engine
-     * reads from the DOM (the Label, via `getElementById`) call this when they
-     * mount or unmount — nothing the Field's own effect tracks changes with a
-     * slotted part's lifecycle, so without the nudge a `<legend>` unmounting
-     * would leave its `aria-labelledby` IDREF dangling on the group.
-     */
+    /** Re-run DOM wiring when parts mount/unmount. */
     requestSync: () => void;
 }
-/** @internal Injection key a Field/Fieldset provides so its Label, Description, and Error share its ids and state. */
+/** @internal Injection key for Field context shared by Label, Description, and Error. */
 export declare const FIELD_CONTEXT: InjectionKey<FieldContext>;
-/** @internal Generates a unique id for one of a Field's four wired parts. */
+/** @internal Generate unique id for a Field's wired part. */
 export declare function nextFieldId(part: 'label' | 'description' | 'error' | 'control'): string;

package/dist/field/context.d.ts

@@ -1,12 +1,9 @@
 import type { InjectionKey, Ref } from 'vue';
 import type { FieldCharacterCountOptions, FieldSnapshot } from './fieldCore.js';
-/** The state a Field reports through its `validity-change` event. */
+/** Field state from `validity-change` events. */
 export type FieldValidityDetail = Omit<FieldSnapshot, 'controlId'>;
 /**
- * @internal Field identity and state distributed to `SkdxFieldLabel`,
- * `SkdxFieldDescription`, and `SkdxFieldError`. `controlId` and `errors` are refs
- * because the controller rewrites them after mount — it adopts a control that
- * brought its own id, and replaces the message list on every validation run.
+ * @internal Field identity and state distributed to `SkdxFieldLabel`, `SkdxFieldDescription` and `SkdxFieldError`.
  */
 export interface FieldContext {
     labelId: string;
@@ -16,27 +13,18 @@ export interface FieldContext {
     errors: Ref<string[]>;
     /** True for a `SkdxFieldset`: the Label is a `<legend>` and the control is named by `aria-labelledby`. */
     grouped: boolean;
-    /** Length of the wrapped control's current value, for `SkdxFieldCharacterCount`. */
+    /** Whether the Field is required. */
+    readonly required: boolean;
+    /** Current value length. */
     count: Ref<number>;
-    /** Registers (or clears, with `null`) the field's character count. */
+    /** Register character count options. */
     setCharacterCount: (options: FieldCharacterCountOptions | null) => void;
-    /**
-     * The root's `getCharacterCountMessage`, so the rendered count uses the same
-     * wording as the announced one. Provided as an accessor rather than a
-     * snapshot, so a wording swapped after mount reaches
-     * `SkdxFieldCharacterCount`.
-     */
+    /** Formats remaining characters for announcement. */
     readonly getCharacterCountMessage?: (remaining: number) => string;
-    /**
-     * Re-runs the controller's DOM wiring. Parts whose *presence* the engine
-     * reads from the DOM (the Label, via `getElementById`) call this when they
-     * mount or unmount — nothing the Field's own effect tracks changes with a
-     * slotted part's lifecycle, so without the nudge a `<legend>` unmounting
-     * would leave its `aria-labelledby` IDREF dangling on the group.
-     */
+    /** Re-run DOM wiring when parts mount/unmount. */
     requestSync: () => void;
 }
-/** @internal Injection key a Field/Fieldset provides so its Label, Description, and Error share its ids and state. */
+/** @internal Injection key for Field context shared by Label, Description, and Error. */
 export declare const FIELD_CONTEXT: InjectionKey<FieldContext>;
-/** @internal Generates a unique id for one of a Field's four wired parts. */
+/** @internal Generate unique id for a Field's wired part. */
 export declare function nextFieldId(part: 'label' | 'description' | 'error' | 'control'): string;

package/dist/field/fieldCore.cjs

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