@skdx/vue 0.28.0 → 0.29.0

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

@@ -1,9 +1,7 @@
+import type { FieldMode, FieldValidator } from '../utils/field-core.cjs';
 import type { FieldValidityDetail } from './context.cjs';
-import type { FieldMode, FieldValidator } from './fieldCore.cjs';
 /**
- * Field wrapper: wires label, description, and error to any control.
- * Owns validation model: sync/async validate, mode, server errors.
- * Derives label, required indicator, help text, and error display.
+ * Field wrapper that wires label, description, and error to any control, and owns the validation model.
  *
  * @example
  * ```vue
@@ -18,125 +16,80 @@ import type { FieldMode, FieldValidator } from './fieldCore.cjs';
  * ```
  */
 type __VLS_Props = {
-    /**
-     * Validator for this field, returning one message, several, or
-     * `null`/`undefined` when the value is acceptable. May be async; a
-     * resolution from a superseded run is discarded.
-     */
-    validate?: FieldValidator;
-    /**
-     * When validation first runs. Whatever the mode, a field that has already
-     * failed re-validates on every input, so the error clears as soon as the
-     * user fixes it.
-     */
+    /** Validator returning one message, several, or nothing when the value is acceptable; may be async. */
+    validate?: FieldValidator | undefined;
+    /** When validation first runs; a field that has already failed 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. */
+    errors?: string | string[] | undefined;
+    /** Value handed to `validate`; omit and the Field reads it off the discovered control. @default undefined — read 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. 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.
-     *
-     * The derived label carries a `SkdxFieldRequiredIndicator` so it is also
-     * visible; its text joins the control's accessible name.
+     * Field name, used as the `SkdxFormErrorSummary` link text when the field renders no error of its own.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Whether an answer is mandatory, reflected onto the wrapped control as `required` or `aria-required`.
      * @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.
+     * Whether the field is unavailable, reflected onto the wrapped control as `disabled` or `aria-disabled`.
      * @default false
      */
     disabled?: boolean;
     /**
-     * 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.
+     * Words the character-count text, announcement, and over-limit error, which share one wording.
      * @default undefined — `characterCountMessage`'s English wording ("50 characters remaining").
      */
-    getCharacterCountMessage?: (remaining: number) => string;
+    getCharacterCountMessage?: ((remaining: number) => string) | undefined;
     /**
-     * What the field says when the wrapped control fails native constraint
-     * validation but the browser reports no message of its own. The browser's
-     * own messages are already localized; this fallback is the one string in
-     * the native path that is not, so it is the only one worth overriding.
+     * Fallback message when the wrapped control fails native constraint validation with none of its own.
      * @default undefined — `NATIVE_INVALID_FALLBACK_MESSAGE` ('This field is invalid.').
      */
-    invalidMessage?: string;
+    invalidMessage?: string | undefined;
     /**
-     * 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.
+     * Milliseconds `mode: 'change'` waits after the last keystroke before running `validate`.
      * @default 0 — no debounce.
      */
     validationDebounceTime?: number;
     /**
-     * The control's label, rendered as the derived `SkdxFieldLabel` — a
-     * `<label for>` pointing at whatever control the Field discovers.
+     * The control's label, rendered as the derived `SkdxFieldLabel`.
      * @default undefined — no derived label; supply one from the primitives.
      */
-    label?: string;
+    label?: string | undefined;
     /**
-     * Help text, rendered as the derived `SkdxFieldDescription`. Its
-     * generated id joins the control's `aria-describedby`, so it is announced
-     * with the control rather than left to be discovered by browsing.
+     * Help text, rendered as the derived `SkdxFieldDescription` and joined into the control's `aria-describedby`.
      * @default undefined — no derived description.
      */
-    description?: string;
+    description?: string | undefined;
+    /**
+     * How tightly the skin packs the field's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
 };
 declare var __VLS_13: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    /**
-     * Runs this field's validation now — server `errors`, the `validate` prop,
-     * the discovered control's native constraint validation, and the character
-     * count — and resolves to whether it is valid. The imperative half of the
-     * shared contract, reached through a template ref on this component.
-     *
-     * Named for the platform's own method rather than `validate()`: that name
-     * cannot coexist with the `validate` *prop* on one object, which is why
-     * `<skdx-field>` had to call the prop `validator` and Angular and Svelte
-     * aliased theirs internally.
-     */
+    /** Runs every validation source now and resolves to whether the field is valid. */
     checkValidity: () => Promise<boolean>;
-    /**
-     * Clears the messages and the `touched`/`dirty` state, then re-derives
-     * `filled`/`count` from whatever the control holds now — what a form that
-     * submits successfully and stays mounted needs. Clear the `errors` prop too:
-     * it is declarative and is re-applied on the next render.
-     */
+    /** Clears messages and touched/dirty state, then re-derives filled/count from the control. */
     reset: () => void | undefined;
 }, {}, {}, {}, 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;
+    "onValidity-change"?: (detail: FieldValidityDetail) => any;
 }>, {
-    label: string;
     disabled: boolean;
-    description: string;
-    value: undefined;
     required: boolean;
-    name: string;
-    errors: string | string[];
-    validate: FieldValidator;
+    density: "compact" | (string & {}) | undefined;
+    errors: string | string[] | undefined;
+    validate: FieldValidator | undefined;
     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>;

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

@@ -1,9 +1,7 @@
+import type { FieldMode, FieldValidator } from '../utils/field-core.js';
 import type { FieldValidityDetail } from './context.js';
-import type { FieldMode, FieldValidator } from './fieldCore.js';
 /**
- * Field wrapper: wires label, description, and error to any control.
- * Owns validation model: sync/async validate, mode, server errors.
- * Derives label, required indicator, help text, and error display.
+ * Field wrapper that wires label, description, and error to any control, and owns the validation model.
  *
  * @example
  * ```vue
@@ -18,125 +16,80 @@ import type { FieldMode, FieldValidator } from './fieldCore.js';
  * ```
  */
 type __VLS_Props = {
-    /**
-     * Validator for this field, returning one message, several, or
-     * `null`/`undefined` when the value is acceptable. May be async; a
-     * resolution from a superseded run is discarded.
-     */
-    validate?: FieldValidator;
-    /**
-     * When validation first runs. Whatever the mode, a field that has already
-     * failed re-validates on every input, so the error clears as soon as the
-     * user fixes it.
-     */
+    /** Validator returning one message, several, or nothing when the value is acceptable; may be async. */
+    validate?: FieldValidator | undefined;
+    /** When validation first runs; a field that has already failed 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. */
+    errors?: string | string[] | undefined;
+    /** Value handed to `validate`; omit and the Field reads it off the discovered control. @default undefined — read 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. 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.
-     *
-     * The derived label carries a `SkdxFieldRequiredIndicator` so it is also
-     * visible; its text joins the control's accessible name.
+     * Field name, used as the `SkdxFormErrorSummary` link text when the field renders no error of its own.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Whether an answer is mandatory, reflected onto the wrapped control as `required` or `aria-required`.
      * @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.
+     * Whether the field is unavailable, reflected onto the wrapped control as `disabled` or `aria-disabled`.
      * @default false
      */
     disabled?: boolean;
     /**
-     * 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.
+     * Words the character-count text, announcement, and over-limit error, which share one wording.
      * @default undefined — `characterCountMessage`'s English wording ("50 characters remaining").
      */
-    getCharacterCountMessage?: (remaining: number) => string;
+    getCharacterCountMessage?: ((remaining: number) => string) | undefined;
     /**
-     * What the field says when the wrapped control fails native constraint
-     * validation but the browser reports no message of its own. The browser's
-     * own messages are already localized; this fallback is the one string in
-     * the native path that is not, so it is the only one worth overriding.
+     * Fallback message when the wrapped control fails native constraint validation with none of its own.
      * @default undefined — `NATIVE_INVALID_FALLBACK_MESSAGE` ('This field is invalid.').
      */
-    invalidMessage?: string;
+    invalidMessage?: string | undefined;
     /**
-     * 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.
+     * Milliseconds `mode: 'change'` waits after the last keystroke before running `validate`.
      * @default 0 — no debounce.
      */
     validationDebounceTime?: number;
     /**
-     * The control's label, rendered as the derived `SkdxFieldLabel` — a
-     * `<label for>` pointing at whatever control the Field discovers.
+     * The control's label, rendered as the derived `SkdxFieldLabel`.
      * @default undefined — no derived label; supply one from the primitives.
      */
-    label?: string;
+    label?: string | undefined;
     /**
-     * Help text, rendered as the derived `SkdxFieldDescription`. Its
-     * generated id joins the control's `aria-describedby`, so it is announced
-     * with the control rather than left to be discovered by browsing.
+     * Help text, rendered as the derived `SkdxFieldDescription` and joined into the control's `aria-describedby`.
      * @default undefined — no derived description.
      */
-    description?: string;
+    description?: string | undefined;
+    /**
+     * How tightly the skin packs the field's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
 };
 declare var __VLS_13: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    /**
-     * Runs this field's validation now — server `errors`, the `validate` prop,
-     * the discovered control's native constraint validation, and the character
-     * count — and resolves to whether it is valid. The imperative half of the
-     * shared contract, reached through a template ref on this component.
-     *
-     * Named for the platform's own method rather than `validate()`: that name
-     * cannot coexist with the `validate` *prop* on one object, which is why
-     * `<skdx-field>` had to call the prop `validator` and Angular and Svelte
-     * aliased theirs internally.
-     */
+    /** Runs every validation source now and resolves to whether the field is valid. */
     checkValidity: () => Promise<boolean>;
-    /**
-     * Clears the messages and the `touched`/`dirty` state, then re-derives
-     * `filled`/`count` from whatever the control holds now — what a form that
-     * submits successfully and stays mounted needs. Clear the `errors` prop too:
-     * it is declarative and is re-applied on the next render.
-     */
+    /** Clears messages and touched/dirty state, then re-derives filled/count from the control. */
     reset: () => void | undefined;
 }, {}, {}, {}, 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;
+    "onValidity-change"?: (detail: FieldValidityDetail) => any;
 }>, {
-    label: string;
     disabled: boolean;
-    description: string;
-    value: undefined;
     required: boolean;
-    name: string;
-    errors: string | string[];
-    validate: FieldValidator;
+    density: "compact" | (string & {}) | undefined;
+    errors: string | string[] | undefined;
+    validate: FieldValidator | undefined;
     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>;

package/dist/field/Field.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const c=require("./FieldAnatomy.vue.cjs"),f=require("./FieldRoot.vue.cjs");let e=require("vue");var v=(0,e.defineComponent)({__name:"Field",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},label:{default:void 0},description:{default:void 0}},emits:["validity-change"],setup(t,{expose:d,emit:r}){const u=t,n=r,s=(0,e.computed)(()=>{const{label:o,description:a,...i}=u;return i}),l=(0,e.ref)(null);return d({checkValidity:()=>l.value?.checkValidity()??Promise.resolve(!0),reset:()=>l.value?.reset()}),(o,a)=>((0,e.openBlock)(),(0,e.createBlock)(f.default,(0,e.mergeProps)({ref_key:"root",ref:l},s.value,{onValidityChange:a[0]||(a[0]=i=>n("validity-change",i))}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)(c.default,{label:t.label,description:t.description},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(o.$slots,"default")]),_:3},8,["label","description"])]),_:3},16))}});exports.default=v;
+const c=require("./FieldAnatomy.vue.cjs"),f=require("./FieldRoot.vue.cjs");let e=require("vue");var p=(0,e.defineComponent)({__name:"Field",props:{validate:{type:Function,default:void 0},mode:{default:"blur"},errors:{default:void 0},value:{},name:{},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},getCharacterCountMessage:{},invalidMessage:{},validationDebounceTime:{default:0},label:{},description:{},density:{default:void 0}},emits:["validity-change"],setup(t,{expose:o,emit:d}){const u=t,n=d,s=(0,e.computed)(()=>{const{label:r,description:a,...i}=u;return i}),l=(0,e.ref)(null);return o({checkValidity:()=>l.value?.checkValidity()??Promise.resolve(!0),reset:()=>l.value?.reset()}),(r,a)=>((0,e.openBlock)(),(0,e.createBlock)(f.default,(0,e.mergeProps)({ref_key:"root",ref:l},s.value,{onValidityChange:a[0]||(a[0]=i=>n("validity-change",i))}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)(c.default,{label:t.label,description:t.description},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"default")]),_:3},8,["label","description"])]),_:3},16))}});exports.default=p;

package/dist/field/Field.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import e from"./FieldAnatomy.vue.js";import a from"./FieldRoot.vue.js";import{computed as t,createBlock as o,createVNode as l,defineComponent as i,mergeProps as d,openBlock as r,ref as s,renderSlot as u,withCtx as n}from"vue";var f=/* @__PURE__ */i({__name:"Field",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},label:{default:void 0},description:{default:void 0}},emits:["validity-change"],setup(i,{expose:f,emit:c}){const v=i,p=c,m=t(()=>{const{label:e,description:a,...t}=v;return t}),y=s(null);return f({checkValidity:()=>y.value?.checkValidity()??Promise.resolve(!0),reset:()=>y.value?.reset()}),(t,s)=>(r(),o(a,d({ref_key:"root",ref:y},m.value,{onValidityChange:s[0]||(s[0]=e=>p("validity-change",e))}),{default:n(()=>[l(e,{label:i.label,description:i.description},{default:n(()=>[u(t.$slots,"default")]),_:3},8,["label","description"])]),_:3},16))}});export{f as default};
+import e from"./FieldAnatomy.vue.js";import a from"./FieldRoot.vue.js";import{computed as t,createBlock as l,createVNode as o,defineComponent as i,mergeProps as r,openBlock as d,ref as s,renderSlot as n,withCtx as u}from"vue";var c=/* @__PURE__ */i({__name:"Field",props:{validate:{type:Function,default:void 0},mode:{default:"blur"},errors:{default:void 0},value:{},name:{},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},getCharacterCountMessage:{},invalidMessage:{},validationDebounceTime:{default:0},label:{},description:{},density:{default:void 0}},emits:["validity-change"],setup(i,{expose:c,emit:p}){const f=i,m=p,v=t(()=>{const{label:e,description:a,...t}=f;return t}),y=s(null);return c({checkValidity:()=>y.value?.checkValidity()??Promise.resolve(!0),reset:()=>y.value?.reset()}),(t,s)=>(d(),l(a,r({ref_key:"root",ref:y},v.value,{onValidityChange:s[0]||(s[0]=e=>m("validity-change",e))}),{default:u(()=>[o(e,{label:i.label,description:i.description},{default:u(()=>[n(t.$slots,"default")]),_:3},8,["label","description"])]),_:3},16))}});export{c as default};

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

@@ -1,20 +1,18 @@
 /**
- * The anatomy a `SkdxField` draws: label with required indicator, control,
- * help text, and error. The error/indicator render conditionally, so
- * `aria-describedby` and `aria-invalid` wire automatically.
+ * The anatomy a `SkdxField` draws: label with required indicator, control, help text, and error.
  * @internal
  */
 type __VLS_Props = {
-    label?: string;
-    description?: string;
+    label?: string | undefined;
+    description?: string | undefined;
 };
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string;
-    description: string;
+    label: string | undefined;
+    description: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,20 +1,18 @@
 /**
- * The anatomy a `SkdxField` draws: label with required indicator, control,
- * help text, and error. The error/indicator render conditionally, so
- * `aria-describedby` and `aria-invalid` wire automatically.
+ * The anatomy a `SkdxField` draws: label with required indicator, control, help text, and error.
  * @internal
  */
 type __VLS_Props = {
-    label?: string;
-    description?: string;
+    label?: string | undefined;
+    description?: string | undefined;
 };
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string;
-    description: string;
+    label: string | undefined;
+    description: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,8 +1,5 @@
 /**
- * Running character count for `SkdxField`'s control — GOV.UK pattern. `maxLength`
- * is soft (doesn't truncate silently); exceeding makes field invalid via
- * `data-invalid`/`aria-invalid`. Count announced via shared announcer after
- * typing pause.
+ * Running character count for `SkdxField`'s control, GOV.UK pattern; exceeding the soft `maxLength` invalidates the field.
  *
  * @example
  * ```vue
@@ -15,15 +12,9 @@
  * ```
  */
 type __VLS_Props = {
-    /**
-     * The soft limit. Deliberately not the control's native `maxlength`, which
-     * silently truncates instead of telling the user they went over.
-     */
+    /** The soft limit; not the control's native `maxlength`, which silently truncates instead. */
     maxLength: number;
-    /**
-     * Percentage of `maxLength` that must be typed before the count appears at
-     * all — GOV.UK's way of keeping a long field quiet until it matters.
-     */
+    /** Percentage of `maxLength` that must be typed before the count appears. */
     threshold?: number;
 };
 declare var __VLS_1: {};

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

@@ -1,8 +1,5 @@
 /**
- * Running character count for `SkdxField`'s control — GOV.UK pattern. `maxLength`
- * is soft (doesn't truncate silently); exceeding makes field invalid via
- * `data-invalid`/`aria-invalid`. Count announced via shared announcer after
- * typing pause.
+ * Running character count for `SkdxField`'s control, GOV.UK pattern; exceeding the soft `maxLength` invalidates the field.
  *
  * @example
  * ```vue
@@ -15,15 +12,9 @@
  * ```
  */
 type __VLS_Props = {
-    /**
-     * The soft limit. Deliberately not the control's native `maxlength`, which
-     * silently truncates instead of telling the user they went over.
-     */
+    /** The soft limit; not the control's native `maxlength`, which silently truncates instead. */
     maxLength: number;
-    /**
-     * Percentage of `maxLength` that must be typed before the count appears at
-     * all — GOV.UK's way of keeping a long field quiet until it matters.
-     */
+    /** Percentage of `maxLength` that must be typed before the count appears. */
     threshold?: number;
 };
 declare var __VLS_1: {};

package/dist/field/FieldCharacterCount.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./fieldCore.cjs"),l=require("./context.cjs");let e=require("vue");var d=["data-over-limit"],i=(0,e.defineComponent)({__name:"FieldCharacterCount",props:{maxLength:{},threshold:{default:0}},setup(n){const r=n,t=(0,e.inject)(l.FIELD_CONTEXT);if(!t)throw new Error("<SkdxFieldCharacterCount> must be used inside <SkdxField> or <SkdxFieldset>.");(0,e.watchEffect)(()=>t.setCharacterCount({maxLength:r.maxLength,threshold:r.threshold}),{flush:"post"}),(0,e.onUnmounted)(()=>t.setCharacterCount(null));const u=(0,e.computed)(()=>o.characterCountVisible(t.count.value,r.maxLength,r.threshold)),a=(0,e.computed)(()=>r.maxLength-t.count.value),c=(0,e.computed)(()=>(t.getCharacterCountMessage??o.characterCountMessage)(a.value));return(s,h)=>u.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:0,class:"skdx-field__character-count","data-part":"character-count","data-skdx-field-character-count":"","data-over-limit":a.value<0?"":void 0},[(0,e.renderSlot)(s.$slots,"default",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(c.value),1)])],8,d)):(0,e.createCommentVNode)("",!0)}});exports.default=i;
+const d=require("../utils/injectRequired.cjs"),n=require("../utils/field-core.cjs"),l=require("./context.cjs");let e=require("vue");var i=["data-over-limit"],h=(0,e.defineComponent)({__name:"FieldCharacterCount",props:{maxLength:{},threshold:{default:0}},setup(o){const r=o,t=d.injectRequired(l.FIELD_CONTEXT,"<SkdxFieldCharacterCount> must be used inside <SkdxField> or <SkdxFieldset>.");(0,e.watchEffect)(()=>t.setCharacterCount({maxLength:r.maxLength,threshold:r.threshold}),{flush:"post"}),(0,e.onUnmounted)(()=>t.setCharacterCount(null)),(0,e.onMounted)(t.requestSync),(0,e.onUnmounted)(t.requestSync);const u=(0,e.computed)(()=>n.characterCountVisible(t.count.value,r.maxLength,r.threshold)),a=(0,e.computed)(()=>r.maxLength-t.count.value),c=(0,e.computed)(()=>(t.getCharacterCountMessage??n.characterCountMessage)(a.value));return(s,m)=>u.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:0,class:"skdx-field__character-count","data-part":"character-count","data-skdx-field-character-count":"","data-over-limit":a.value<0?"":void 0},[(0,e.renderSlot)(s.$slots,"default",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(c.value),1)])],8,i)):(0,e.createCommentVNode)("",!0)}});exports.default=h;

package/dist/field/FieldCharacterCount.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{characterCountMessage as e,characterCountVisible as t}from"./fieldCore.js";import{FIELD_CONTEXT as a}from"./context.js";import{computed as r,createCommentVNode as o,createElementBlock as s,createTextVNode as n,defineComponent as c,inject as l,onUnmounted as d,openBlock as u,renderSlot as h,toDisplayString as i,watchEffect as m}from"vue";var C=["data-over-limit"],f=/* @__PURE__ */c({__name:"FieldCharacterCount",props:{maxLength:{},threshold:{default:0}},setup(c){const f=c,p=l(a);if(!p)throw new Error("<SkdxFieldCharacterCount> must be used inside <SkdxField> or <SkdxFieldset>.");m(()=>p.setCharacterCount({maxLength:f.maxLength,threshold:f.threshold}),{flush:"post"}),d(()=>p.setCharacterCount(null));const x=r(()=>t(p.count.value,f.maxLength,f.threshold)),v=r(()=>f.maxLength-p.count.value),g=r(()=>(p.getCharacterCountMessage??e)(v.value));return(e,t)=>x.value?(u(),s("span",{key:0,class:"skdx-field__character-count","data-part":"character-count","data-skdx-field-character-count":"","data-over-limit":v.value<0?"":void 0},[h(e.$slots,"default",{},()=>[n(i(g.value),1)])],8,C)):o("",!0)}});export{f as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{characterCountMessage as t,characterCountVisible as a}from"../utils/field-core.js";import{FIELD_CONTEXT as r}from"./context.js";import{computed as s,createCommentVNode as o,createElementBlock as n,createTextVNode as c,defineComponent as u,onMounted as d,onUnmounted as l,openBlock as i,renderSlot as h,toDisplayString as m,watchEffect as p}from"vue";var C=["data-over-limit"],f=/* @__PURE__ */u({__name:"FieldCharacterCount",props:{maxLength:{},threshold:{default:0}},setup(u){const f=u,x=e(r,"<SkdxFieldCharacterCount> must be used inside <SkdxField> or <SkdxFieldset>.");p(()=>x.setCharacterCount({maxLength:f.maxLength,threshold:f.threshold}),{flush:"post"}),l(()=>x.setCharacterCount(null)),d(x.requestSync),l(x.requestSync);const v=s(()=>a(x.count.value,f.maxLength,f.threshold)),g=s(()=>f.maxLength-x.count.value),k=s(()=>(x.getCharacterCountMessage??t)(g.value));return(e,t)=>v.value?(i(),n("span",{key:0,class:"skdx-field__character-count","data-part":"character-count","data-skdx-field-character-count":"","data-over-limit":g.value<0?"":void 0},[h(e.$slots,"default",{},()=>[c(m(k.value),1)])],8,C)):o("",!0)}});export{f as default};

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

@@ -1,7 +1,5 @@
 import type { PolymorphicTag } from '../utils/polymorphic.cjs';
-/**
- * Help text for `SkdxField`. ID added to `aria-describedby` so screen readers announce it with control.
- */
+/** Help text for `SkdxField`, whose id joins `aria-describedby` so it's announced with the control. */
 type __VLS_Props = {
     /**
      * Element name to render instead of the default `<span>`, from the

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

@@ -1,7 +1,5 @@
 import type { PolymorphicTag } from '../utils/polymorphic.js';
-/**
- * Help text for `SkdxField`. ID added to `aria-describedby` so screen readers announce it with control.
- */
+/** Help text for `SkdxField`, whose id joins `aria-describedby` so it's announced with the control. */
 type __VLS_Props = {
     /**
      * Element name to render instead of the default `<span>`, from the

package/dist/field/FieldDescription.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("./context.cjs");let e=require("vue");var s=(0,e.defineComponent)({__name:"FieldDescription",props:{as:{default:"span"}},setup(i){const t=(0,e.inject)(n.FIELD_CONTEXT);if(!t)throw new Error("<SkdxFieldDescription> must be used inside <SkdxField> or <SkdxFieldset>.");const{descriptionId:r}=t;return(d,o)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(i.as),{class:"skdx-field__description","data-part":"description",id:(0,e.unref)(r),"data-skdx-field-description":""},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(d.$slots,"default")]),_:3},8,["id"]))}});exports.default=s;
+const d=require("../utils/injectRequired.cjs"),s=require("./context.cjs");let e=require("vue");var o=(0,e.defineComponent)({__name:"FieldDescription",props:{as:{default:"span"}},setup(i){const t=d.injectRequired(s.FIELD_CONTEXT,"<SkdxFieldDescription> must be used inside <SkdxField> or <SkdxFieldset>."),{descriptionId:n}=t;return(0,e.onMounted)(t.requestSync),(0,e.onUnmounted)(t.requestSync),(r,u)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(i.as),{id:(0,e.unref)(n),class:"skdx-field__description","data-part":"description","data-skdx-field-description":""},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"default")]),_:3},8,["id"]))}});exports.default=o;

package/dist/field/FieldDescription.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{FIELD_CONTEXT as e}from"./context.js";import{createBlock as s,defineComponent as t,inject as i,openBlock as d,renderSlot as o,resolveDynamicComponent as a,unref as r,withCtx as n}from"vue";var p=/* @__PURE__ */t({__name:"FieldDescription",props:{as:{default:"span"}},setup(t){const p=i(e);if(!p)throw new Error("<SkdxFieldDescription> must be used inside <SkdxField> or <SkdxFieldset>.");const{descriptionId:l}=p;return(e,i)=>(d(),s(a(t.as),{class:"skdx-field__description","data-part":"description",id:r(l),"data-skdx-field-description":""},{default:n(()=>[o(e.$slots,"default")]),_:3},8,["id"]))}});export{p as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{FIELD_CONTEXT as s}from"./context.js";import{createBlock as t,defineComponent as i,onMounted as d,onUnmounted as o,openBlock as n,renderSlot as a,resolveDynamicComponent as r,unref as p,withCtx as c}from"vue";var l=/* @__PURE__ */i({__name:"FieldDescription",props:{as:{default:"span"}},setup(i){const l=e(s,"<SkdxFieldDescription> must be used inside <SkdxField> or <SkdxFieldset>."),{descriptionId:u}=l;return d(l.requestSync),o(l.requestSync),(e,s)=>(n(),t(r(i.as),{id:p(u),class:"skdx-field__description","data-part":"description","data-skdx-field-description":""},{default:c(()=>[a(e.$slots,"default")]),_:3},8,["id"]))}});export{l as default};

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

@@ -1,9 +1,5 @@
 import type { PolymorphicTag } from '../utils/polymorphic.cjs';
-/**
- * The error text for a `SkdxField`. Renders nothing while valid; once rendered,
- * its `id` joins `aria-describedby` and the control gains `aria-invalid="true"`.
- * Defaults to field's current messages; pass slot content to override.
- */
+/** The error text for a `SkdxField`, rendering nothing while valid and joining `aria-describedby` once shown. */
 type __VLS_Props = {
     /**
      * Element name to render instead of the default `<span>`, from the

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

@@ -1,9 +1,5 @@
 import type { PolymorphicTag } from '../utils/polymorphic.js';
-/**
- * The error text for a `SkdxField`. Renders nothing while valid; once rendered,
- * its `id` joins `aria-describedby` and the control gains `aria-invalid="true"`.
- * Defaults to field's current messages; pass slot content to override.
- */
+/** The error text for a `SkdxField`, rendering nothing while valid and joining `aria-describedby` once shown. */
 type __VLS_Props = {
     /**
      * Element name to render instead of the default `<span>`, from the

package/dist/field/FieldError.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const i=require("./context.cjs");let e=require("vue");var a=(0,e.defineComponent)({__name:"FieldError",props:{as:{default:"span"}},setup(o){const r=(0,e.inject)(i.FIELD_CONTEXT);if(!r)throw new Error("<SkdxFieldError> must be used inside <SkdxField> or <SkdxFieldset>.");const{errorId:d,errors:t}=r;return(n,l)=>(0,e.unref)(t).length>0?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(o.as),{key:0,class:"skdx-field__error","data-part":"error",id:(0,e.unref)(d),"data-skdx-field-error":""},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,"default",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)((0,e.unref)(t).join(" ")),1)])]),_:3},8,["id"])):(0,e.createCommentVNode)("",!0)}});exports.default=a;
+const u=require("../utils/injectRequired.cjs"),i=require("./context.cjs");let e=require("vue");var s=(0,e.defineComponent)({__name:"FieldError",props:{as:{default:"span"}},setup(n){const r=u.injectRequired(i.FIELD_CONTEXT,"<SkdxFieldError> must be used inside <SkdxField> or <SkdxFieldset>."),{errorId:o,errors:t}=r;return(0,e.onMounted)(r.requestSync),(0,e.onUnmounted)(r.requestSync),(d,a)=>(0,e.unref)(t).length>0?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(n.as),{key:0,id:(0,e.unref)(o),class:"skdx-field__error","data-part":"error","data-skdx-field-error":""},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(d.$slots,"default",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)((0,e.unref)(t).join(" ")),1)])]),_:3},8,["id"])):(0,e.createCommentVNode)("",!0)}});exports.default=s;

package/dist/field/FieldError.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{FIELD_CONTEXT as e}from"./context.js";import{createBlock as r,createCommentVNode as o,createTextVNode as s,defineComponent as t,inject as a,openBlock as d,renderSlot as n,resolveDynamicComponent as i,toDisplayString as l,unref as p,withCtx as c}from"vue";var f=/* @__PURE__ */t({__name:"FieldError",props:{as:{default:"span"}},setup(t){const f=a(e);if(!f)throw new Error("<SkdxFieldError> must be used inside <SkdxField> or <SkdxFieldset>.");const{errorId:m,errors:u}=f;return(e,a)=>p(u).length>0?(d(),r(i(t.as),{key:0,class:"skdx-field__error","data-part":"error",id:p(m),"data-skdx-field-error":""},{default:c(()=>[n(e.$slots,"default",{},()=>[s(l(p(u).join(" ")),1)])]),_:3},8,["id"])):o("",!0)}});export{f as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{FIELD_CONTEXT as r}from"./context.js";import{createBlock as s,createCommentVNode as t,createTextVNode as o,defineComponent as a,onMounted as d,onUnmounted as n,openBlock as i,renderSlot as l,resolveDynamicComponent as u,toDisplayString as m,unref as c,withCtx as p}from"vue";var f=/* @__PURE__ */a({__name:"FieldError",props:{as:{default:"span"}},setup(a){const f=e(r,"<SkdxFieldError> must be used inside <SkdxField> or <SkdxFieldset>."),{errorId:x,errors:k}=f;return d(f.requestSync),n(f.requestSync),(e,r)=>c(k).length>0?(i(),s(u(a.as),{key:0,id:c(x),class:"skdx-field__error","data-part":"error","data-skdx-field-error":""},{default:p(()=>[l(e.$slots,"default",{},()=>[o(m(c(k).join(" ")),1)])]),_:3},8,["id"])):t("",!0)}});export{f as default};

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

@@ -1,7 +1,4 @@
-/**
- * The label for a `SkdxField`'s control. Renders `<label>` or `<legend>` inside
- * a fieldset. (Labels can't reference radiogroups; use `aria-labelledby` instead.)
- */
+/** The label for a `SkdxField`'s control, rendering `<label>` or `<legend>` inside a fieldset. */
 type __VLS_Props = {};
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

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

@@ -1,7 +1,4 @@
-/**
- * The label for a `SkdxField`'s control. Renders `<label>` or `<legend>` inside
- * a fieldset. (Labels can't reference radiogroups; use `aria-labelledby` instead.)
- */
+/** The label for a `SkdxField`'s control, rendering `<label>` or `<legend>` inside a fieldset. */
 type __VLS_Props = {};
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {

package/dist/field/FieldLabel.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const a=require("./context.cjs");let e=require("vue");var u=["id"],s=["id","for"],i=(0,e.defineComponent)({__name:"FieldLabel",setup(_){const t=(0,e.inject)(a.FIELD_CONTEXT);if(!t)throw new Error("<SkdxFieldLabel> must be used inside <SkdxField> or <SkdxFieldset>.");const{labelId:d,controlId:o,grouped:r}=t;(0,e.onMounted)(t.requestSync),(0,e.onUnmounted)(t.requestSync);function n(l){!l.defaultPrevented&&l.detail>1&&l.preventDefault()}return(l,c)=>(0,e.unref)(r)?((0,e.openBlock)(),(0,e.createElementBlock)("legend",{key:0,class:"skdx-field__label","data-part":"label",id:(0,e.unref)(d),onMousedown:n},[(0,e.renderSlot)(l.$slots,"default")],40,u)):((0,e.openBlock)(),(0,e.createElementBlock)("label",{key:1,class:"skdx-field__label","data-part":"label",id:(0,e.unref)(d),for:(0,e.unref)(o)||void 0,onMousedown:n},[(0,e.renderSlot)(l.$slots,"default")],40,s))}});exports.default=i;
+const u=require("../utils/injectRequired.cjs"),a=require("./context.cjs");let e=require("vue");var i=["id"],s=["id","for"],_=(0,e.defineComponent)({__name:"FieldLabel",setup(c){const d=u.injectRequired(a.FIELD_CONTEXT,"<SkdxFieldLabel> must be used inside <SkdxField> or <SkdxFieldset>."),{labelId:t,controlId:n,grouped:o}=d;(0,e.onMounted)(d.requestSync),(0,e.onUnmounted)(d.requestSync);function r(l){!l.defaultPrevented&&l.detail>1&&l.preventDefault()}return(l,f)=>(0,e.unref)(o)?((0,e.openBlock)(),(0,e.createElementBlock)("legend",{key:0,id:(0,e.unref)(t),class:"skdx-field__label","data-part":"label",onMousedown:r},[(0,e.renderSlot)(l.$slots,"default")],40,i)):((0,e.openBlock)(),(0,e.createElementBlock)("label",{key:1,id:(0,e.unref)(t),class:"skdx-field__label","data-part":"label",for:(0,e.unref)(n)||void 0,onMousedown:r},[(0,e.renderSlot)(l.$slots,"default")],40,s))}});exports.default=_;

package/dist/field/FieldLabel.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{FIELD_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as d,inject as l,onMounted as o,onUnmounted as a,openBlock as n,renderSlot as s,unref as r}from"vue";var i=["id"],u=["id","for"],f=/* @__PURE__ */d({__name:"FieldLabel",setup(d){const f=l(e);if(!f)throw new Error("<SkdxFieldLabel> must be used inside <SkdxField> or <SkdxFieldset>.");const{labelId:c,controlId:p,grouped:b}=f;function k(e){!e.defaultPrevented&&e.detail>1&&e.preventDefault()}return o(f.requestSync),a(f.requestSync),(e,d)=>r(b)?(n(),t("legend",{key:0,class:"skdx-field__label","data-part":"label",id:r(c),onMousedown:k},[s(e.$slots,"default")],40,i)):(n(),t("label",{key:1,class:"skdx-field__label","data-part":"label",id:r(c),for:r(p)||void 0,onMousedown:k},[s(e.$slots,"default")],40,u))}});export{f as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{FIELD_CONTEXT as d}from"./context.js";import{createElementBlock as t,defineComponent as l,onMounted as a,onUnmounted as o,openBlock as s,renderSlot as n,unref as r}from"vue";var i=["id"],u=["id","for"],f=/* @__PURE__ */l({__name:"FieldLabel",setup(l){const f=e(d,"<SkdxFieldLabel> must be used inside <SkdxField> or <SkdxFieldset>."),{labelId:c,controlId:m,grouped:p}=f;function b(e){!e.defaultPrevented&&e.detail>1&&e.preventDefault()}return a(f.requestSync),o(f.requestSync),(e,d)=>r(p)?(s(),t("legend",{key:0,id:r(c),class:"skdx-field__label","data-part":"label",onMousedown:b},[n(e.$slots,"default")],40,i)):(s(),t("label",{key:1,id:r(c),class:"skdx-field__label","data-part":"label",for:r(m)||void 0,onMousedown:b},[n(e.$slots,"default")],40,u))}});export{f as default};

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

@@ -1,7 +1,5 @@
 /**
- * Mandatory marker for Field (renders only if required). Must be inside
- * SkdxFieldLabel (text joins control's accessible name). Not aria-hidden
- * (would hide from users who need it announced).
+ * Mandatory marker for a `SkdxField`, rendered only when required and never `aria-hidden`.
  *
  * @example
  * ```vue