@skdx/web-components 0.26.0 → 0.28.0

package/dist/field/field-core.d.ts

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

package/dist/field/field-core.js

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

package/dist/field/index.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(t,e)=>{for(var d in e)i(t,d,{get:e[d],enumerable:!0})},m=(t,e,d,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of E(e))!c.call(t,o)&&o!==d&&i(t,o,{get:()=>e[o],enumerable:!(l=s(e,o))||l.enumerable});return t};var S=t=>m(i({},"__esModule",{value:!0}),t);var T={};f(T,{FIELD_CHARACTER_COUNT_ATTRIBUTE:()=>r.FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT:()=>r.FIELD_VALIDITY_CHANGE_EVENT,SkdxField:()=>a.SkdxField,SkdxFieldCharacterCount:()=>n.SkdxFieldCharacterCount,SkdxFieldDescription:()=>F.SkdxFieldDescription,SkdxFieldError:()=>C.SkdxFieldError,SkdxFieldLabel:()=>x.SkdxFieldLabel,SkdxFieldset:()=>p.SkdxFieldset,characterCountMessage:()=>r.characterCountMessage,characterCountVisible:()=>r.characterCountVisible});module.exports=S(T);var a=require("./Field.cjs"),p=require("./Fieldset.cjs"),x=require("./FieldLabel.cjs"),F=require("./FieldDescription.cjs"),C=require("./FieldError.cjs"),n=require("./FieldCharacterCount.cjs"),r=require("./field-core.cjs");0&&(module.exports={FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT,SkdxField,SkdxFieldCharacterCount,SkdxFieldDescription,SkdxFieldError,SkdxFieldLabel,SkdxFieldset,characterCountMessage,characterCountVisible});
+"use strict";var a=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var I=(o,t)=>{for(var r in t)a(o,r,{get:t[r],enumerable:!0})},C=(o,t,r,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of p(t))!F.call(o,i)&&i!==r&&a(o,i,{get:()=>t[i],enumerable:!(d=T(t,i))||d.enumerable});return o};var _=o=>C(a({},"__esModule",{value:!0}),o);var R={};I(R,{FIELD_CHARACTER_COUNT_ATTRIBUTE:()=>e.FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_REQUIRED_INDICATOR_ATTRIBUTE:()=>e.FIELD_REQUIRED_INDICATOR_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT:()=>e.FIELD_VALIDITY_CHANGE_EVENT,SkdxField:()=>l.SkdxField,SkdxFieldset:()=>E.SkdxFieldset,characterCountMessage:()=>e.characterCountMessage,characterCountVisible:()=>e.characterCountVisible});module.exports=_(R);var l=require("./Field.cjs"),E=require("./Fieldset.cjs"),e=require("./field-core.cjs");0&&(module.exports={FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_REQUIRED_INDICATOR_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT,SkdxField,SkdxFieldset,characterCountMessage,characterCountVisible});

package/dist/field/index.d.cts

@@ -1,7 +1,3 @@
 export { SkdxField } from './Field.cjs';
 export { SkdxFieldset } from './Fieldset.cjs';
-export { SkdxFieldLabel } from './FieldLabel.cjs';
-export { SkdxFieldDescription } from './FieldDescription.cjs';
-export { SkdxFieldError } from './FieldError.cjs';
-export { SkdxFieldCharacterCount } from './FieldCharacterCount.cjs';
-export { characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_VALIDITY_CHANGE_EVENT, type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidationResult, type FieldValidator, } from './field-core.cjs';
+export { characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_REQUIRED_INDICATOR_ATTRIBUTE, FIELD_VALIDITY_CHANGE_EVENT, type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidationResult, type FieldValidator, } from './field-core.cjs';

package/dist/field/index.d.ts

@@ -1,7 +1,3 @@
 export { SkdxField } from './Field.js';
 export { SkdxFieldset } from './Fieldset.js';
-export { SkdxFieldLabel } from './FieldLabel.js';
-export { SkdxFieldDescription } from './FieldDescription.js';
-export { SkdxFieldError } from './FieldError.js';
-export { SkdxFieldCharacterCount } from './FieldCharacterCount.js';
-export { characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_VALIDITY_CHANGE_EVENT, type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidationResult, type FieldValidator, } from './field-core.js';
+export { characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_REQUIRED_INDICATOR_ATTRIBUTE, FIELD_VALIDITY_CHANGE_EVENT, type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidationResult, type FieldValidator, } from './field-core.js';

package/dist/field/index.js

@@ -1 +1 @@
-import{SkdxField as t}from"./Field.js";import{SkdxFieldset as d}from"./Fieldset.js";import{SkdxFieldLabel as l}from"./FieldLabel.js";import{SkdxFieldDescription as p}from"./FieldDescription.js";import{SkdxFieldError as F}from"./FieldError.js";import{SkdxFieldCharacterCount as n}from"./FieldCharacterCount.js";import{characterCountMessage as E,characterCountVisible as c,FIELD_CHARACTER_COUNT_ATTRIBUTE as f,FIELD_VALIDITY_CHANGE_EVENT as m}from"./field-core.js";export{f as FIELD_CHARACTER_COUNT_ATTRIBUTE,m as FIELD_VALIDITY_CHANGE_EVENT,t as SkdxField,n as SkdxFieldCharacterCount,p as SkdxFieldDescription,F as SkdxFieldError,l as SkdxFieldLabel,d as SkdxFieldset,E as characterCountMessage,c as characterCountVisible};
+import{SkdxField as o}from"./Field.js";import{SkdxFieldset as r}from"./Fieldset.js";import{characterCountMessage as d,characterCountVisible as l,FIELD_CHARACTER_COUNT_ATTRIBUTE as E,FIELD_REQUIRED_INDICATOR_ATTRIBUTE as T,FIELD_VALIDITY_CHANGE_EVENT as p}from"./field-core.js";export{E as FIELD_CHARACTER_COUNT_ATTRIBUTE,T as FIELD_REQUIRED_INDICATOR_ATTRIBUTE,p as FIELD_VALIDITY_CHANGE_EVENT,o as SkdxField,r as SkdxFieldset,d as characterCountMessage,l as characterCountVisible};

package/dist/field/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var a=(e,r)=>{for(var d in r)x(e,d,{get:r[d],enumerable:!0})},c=(e,r,d,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of F(r))!S.call(e,o)&&o!==d&&x(e,o,{get:()=>r[o],enumerable:!(i=m(r,o))||i.enumerable});return e};var n=e=>c(x({},"__esModule",{value:!0}),e);var u={};a(u,{SkdxFieldCharacterCount:()=>k.SkdxFieldCharacterCount,SkdxFieldDescription:()=>p.SkdxFieldDescription,SkdxFieldError:()=>f.SkdxFieldError,SkdxFieldLabel:()=>t.SkdxFieldLabel,SkdxFieldRequiredIndicator:()=>l.SkdxFieldRequiredIndicator});module.exports=n(u);var t=require("./FieldLabel.cjs"),l=require("./FieldRequiredIndicator.cjs"),p=require("./FieldDescription.cjs"),f=require("./FieldError.cjs"),k=require("./FieldCharacterCount.cjs");0&&(module.exports={SkdxFieldCharacterCount,SkdxFieldDescription,SkdxFieldError,SkdxFieldLabel,SkdxFieldRequiredIndicator});

package/dist/field/primitives.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `<skdx-field>` — the derived parts. Use when anatomy isn't the
+ * structure you need. Built from same elements as recipe (see FieldAnatomy.ts). Class imports
+ * resolve to this path; tag names are global.
+ *
+ * @example
+ * ```ts
+ * import * as Field from '@skdx/web-components/primitives/field';
+ * ```
+ * ```html
+ * <skdx-field name="bio">
+ *   <skdx-field-label>Bio <skdx-field-required-indicator>(required)</skdx-field-required-indicator></skdx-field-label>
+ *   <textarea></textarea>
+ *   <skdx-field-character-count max="280"></skdx-field-character-count>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export { SkdxFieldLabel } from './FieldLabel.cjs';
+export { SkdxFieldRequiredIndicator } from './FieldRequiredIndicator.cjs';
+export { SkdxFieldDescription } from './FieldDescription.cjs';
+export { SkdxFieldError } from './FieldError.cjs';
+export { SkdxFieldCharacterCount } from './FieldCharacterCount.cjs';

package/dist/field/primitives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `<skdx-field>` — the derived parts. Use when anatomy isn't the
+ * structure you need. Built from same elements as recipe (see FieldAnatomy.ts). Class imports
+ * resolve to this path; tag names are global.
+ *
+ * @example
+ * ```ts
+ * import * as Field from '@skdx/web-components/primitives/field';
+ * ```
+ * ```html
+ * <skdx-field name="bio">
+ *   <skdx-field-label>Bio <skdx-field-required-indicator>(required)</skdx-field-required-indicator></skdx-field-label>
+ *   <textarea></textarea>
+ *   <skdx-field-character-count max="280"></skdx-field-character-count>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export { SkdxFieldLabel } from './FieldLabel.js';
+export { SkdxFieldRequiredIndicator } from './FieldRequiredIndicator.js';
+export { SkdxFieldDescription } from './FieldDescription.js';
+export { SkdxFieldError } from './FieldError.js';
+export { SkdxFieldCharacterCount } from './FieldCharacterCount.js';

package/dist/field/primitives.js

@@ -0,0 +1 @@
+import{SkdxFieldLabel as o}from"./FieldLabel.js";import{SkdxFieldRequiredIndicator as x}from"./FieldRequiredIndicator.js";import{SkdxFieldDescription as t}from"./FieldDescription.js";import{SkdxFieldError as p}from"./FieldError.js";import{SkdxFieldCharacterCount as k}from"./FieldCharacterCount.js";export{k as SkdxFieldCharacterCount,t as SkdxFieldDescription,p as SkdxFieldError,o as SkdxFieldLabel,x as SkdxFieldRequiredIndicator};

package/dist/file-upload/FileUpload.cjs

@@ -1,5 +1,5 @@
-"use strict";var f=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var F=(s,t)=>{for(var e in t)f(s,e,{get:t[e],enumerable:!0})},y=(s,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of b(t))!v.call(s,i)&&i!==e&&f(s,i,{get:()=>t[i],enumerable:!(a=d(t,i))||a.enumerable});return s};var g=s=>y(f({},"__esModule",{value:!0}),s),n=(s,t,e,a)=>{for(var i=a>1?void 0:a?d(t,e):t,l=s.length-1,o;l>=0;l--)(o=s[l])&&(i=(a?o(t,e,i):o(i))||i);return a&&i&&f(t,e,i),i};var C={};F(C,{SkdxFileUpload:()=>r});module.exports=g(C);var m=require("lit"),u=require("lit/decorators.js"),p=require("../internal/define.cjs"),c=require("../internal/form-associated.cjs");function E(s,t){if(!t)return!0;let e=t.split(",").map(l=>l.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let a=s.name.toLowerCase(),i=s.type.toLowerCase();return e.some(l=>l.startsWith(".")?a.endsWith(l):l.endsWith("/*")?i.startsWith(l.slice(0,-1)):i===l)}function z(s,t){let e=[];return E(s,t.accept)||e.push("file-invalid-type"),t.maxFileSize!==void 0&&s.size>t.maxFileSize&&e.push("file-too-large"),t.minFileSize!==void 0&&s.size<t.minFileSize&&e.push("file-too-small"),e.push(...t.validate?.(s)??[]),e}var r=class extends(0,c.FormAssociated)(m.LitElement){constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.required=!1;this.internalFiles=[];this.inputEl=null}get files(){return this.value??this.internalFiles}updated(e){e.has("disabled")&&(this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.broadcast()),e.has("value")&&this.broadcast(),(e.has("value")||e.has("required")||e.has("name"))&&this.syncFormState()}syncFormState(){this.setFormValue(this.multiFormValue(this.files)),this.setValueMissing(this.required&&this.files.length===0,"Please select a file.")}formResetCallback(){this.setFiles([])}addFiles(e){if(this.disabled)return;let a=this.multiple?this.files:[],i=(this.multiple?this.maxFiles??1/0:1)-a.length,l=[];for(let o of Array.from(e)){let h=z(o,this);if(l.length>=i&&h.push("too-many-files"),h.length>0){this.dispatchEvent(new CustomEvent("file-reject",{detail:{file:o,errors:h},bubbles:!0,composed:!0}));continue}l.push(o)}l.length!==0&&this.setFiles([...a,...l])}removeFile(e){this.setFiles(this.files.filter((a,i)=>i!==e))}setFiles(e){this.value===void 0&&(this.internalFiles=e),this.syncFormState(),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast()}registerInput(e){this.inputEl=e}openPicker(){this.disabled||this.inputEl?.click()}broadcast(){this.dispatchEvent(new CustomEvent("skdx-file-upload-update",{bubbles:!0,composed:!0}))}render(){return m.html`<slot></slot>`}};r.styles=m.css`
+"use strict";var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var L=(t,r)=>{for(var e in r)p(t,e,{get:r[e],enumerable:!0})},I=(t,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of A(r))!D.call(t,n)&&n!==e&&p(t,n,{get:()=>r[n],enumerable:!(a=b(r,n))||a.enumerable});return t};var B=t=>I(p({},"__esModule",{value:!0}),t),s=(t,r,e,a)=>{for(var n=a>1?void 0:a?b(r,e):r,o=t.length-1,u;o>=0;o--)(u=t[o])&&(n=(a?u(r,e,n):u(n))||n);return a&&n&&p(r,e,n),n};var O={};L(O,{SkdxFileUpload:()=>i});module.exports=B(O);var d=require("lit"),l=require("lit/decorators.js"),g=require("../internal/authored.cjs"),F=require("../internal/define.cjs"),E=require("../internal/form-associated.cjs"),v=require("../internal/ids.cjs"),w=require("../internal/positioning.cjs"),m=require("../utils/live-announcer.cjs"),f=require("./FileUploadAnatomy.cjs");function _(t){return t?"Required. No file selected":"Required"}function q(t,r){if(!r)return!0;let e=r.split(",").map(o=>o.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let a=t.name.toLowerCase(),n=t.type.toLowerCase();return e.some(o=>o.startsWith(".")?a.endsWith(o):o.endsWith("/*")?n.startsWith(o.slice(0,-1)):n===o)}function C(t){return`Remove ${t}`}function y(t){return t.length===0?"":t.length===1?`${t[0]} removed`:`${t.length} files removed`}function P(t,r){let e=[];if(t>0&&e.push(`${t} ${t===1?"file":"files"} added`),r.length>0){let a=[...new Set(r)].join(", "),n=r.length;e.push(`${n} ${n===1?"file":"files"} refused: ${a}`)}return e.join(". ")}function z(t,r){let e=[];return q(t,r.accept)||e.push("file-invalid-type"),r.maxFileSize!==void 0&&t.size>r.maxFileSize&&e.push("file-too-large"),r.minFileSize!==void 0&&t.size<r.minFileSize&&e.push("file-too-small"),e.push(...r.validate?.(t)??[]),e}var i=class extends(0,E.FormAssociated)(d.LitElement){constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.directory=!1;this.preventDocumentDrop=!0;this.required=!1;this.removeLabel=C;this.showList=!0;this.showPreview=!1;this.labelId=(0,v.nextId)("skdx-file-upload-label");this.descriptionId=(0,v.nextId)("skdx-file-upload-description");this.descriptionEl=null;this.labelPresent=!1;this.internalFiles=[];this.inputEl=null;this.onDocumentDrag=e=>{if(!this.preventDocumentDrop)return;let a=e.composedPath()[0]??e.target;a instanceof Element&&a.closest('[data-part="dropzone"]')||e.preventDefault()};this._anatomyBuilt=!1;this._fillAnatomy=()=>{if((0,g.hasAuthoredParts)(this,f.FILE_UPLOAD_ANATOMY_GENERATED)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,(0,f.fillFileUploadAnatomy)(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()}}get files(){return this.value??this.internalFiles}get isInvalid(){return this.invalid||this.required&&this.files.length===0}connectedCallback(){super.connectedCallback(),document.addEventListener("dragover",this.onDocumentDrag),document.addEventListener("drop",this.onDocumentDrag),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){document.removeEventListener("dragover",this.onDocumentDrag),document.removeEventListener("drop",this.onDocumentDrag),super.disconnectedCallback()}willUpdate(e){!this.hasUpdated&&this.value===void 0&&this.defaultValue?.length&&(this.internalFiles=[...this.defaultValue]),super.willUpdate?.(e)}updated(e){e.has("showList")?this._rebuildAnatomy():this._fillAnatomy(),(e.has("value")||e.has("showList")||e.has("showPreview")||e.has("renderFile")||e.has("fileStatus"))&&(0,f.renderFileUploadItems)(this),(e.has("disabled")||e.has("readOnly"))&&(this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.readOnly?this.setAttribute("data-readonly",""):this.removeAttribute("data-readonly"),this.broadcast()),(e.has("invalid")||e.has("directory")||e.has("capture"))&&this.broadcast(),(e.has("value")||e.has("removeLabel")||e.has("labelPresent")||e.has("required")||e.has("invalid"))&&this.broadcast(),this.syncDescription(),(e.has("value")||e.has("required")||e.has("requiredMessage")||e.has("name"))&&this.syncFormState()}syncDescription(){if(!this.required){this.descriptionEl?.remove(),this.descriptionEl=null;return}if(!this.descriptionEl){let e=document.createElement("span");e.id=this.descriptionId,e.setAttribute("data-part","description"),e.style.cssText="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;",this.descriptionEl=e,this.append(e)}this.descriptionEl.textContent=_(this.isInvalid)}syncFormState(){this.setFormValue(this.multiFormValue(this.files)),this.setValueMissing(this.required&&this.files.length===0,this.requiredMessage??"Please select a file.")}formResetCallback(){this.setFiles([...this.defaultValue??[]])}addFiles(e){if(this.disabled||this.readOnly)return;let a=this.multiple?this.files:[],n=(this.multiple?this.maxFiles??1/0:1)-a.length,o=[],u=[];for(let c of Array.from(e)){let h=z(c,this);if(o.length>=n&&h.push("too-many-files"),h.length>0){u.push(h[0]),this.dispatchEvent(new CustomEvent("file-reject",{detail:{file:c,errors:h},bubbles:!0,composed:!0}));continue}o.push(c)}(0,m.announce)(P(o.length,u)),o.length!==0&&this.setFiles([...a,...o])}removeFile(e){if(this.disabled||this.readOnly)return;let a=this.files,n=a.indexOf(e);n!==-1&&((0,m.announce)(y([e.name])),this.setFiles([...a.slice(0,n),...a.slice(n+1)]))}clearFiles(){if(this.disabled||this.readOnly)return;let e=this.files;e.length!==0&&((0,m.announce)(y(e.map(a=>a.name))),this.setFiles([]))}setFiles(e){this.value===void 0&&(this.internalFiles=e),this.syncFormState(),this.syncDescription(),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast()}registerInput(e){this.inputEl=e}openPicker(){!this.disabled&&!this.readOnly&&this.inputEl?.click()}broadcast(){this.dispatchEvent(new CustomEvent("skdx-file-upload-update",{bubbles:!0,composed:!0}))}render(){return d.html`<slot @slotchange=${this._fillAnatomy}></slot>`}};i.styles=d.css`
     :host {
       display: block;
     }
-  `,n([(0,u.property)({type:String})],r.prototype,"accept",2),n([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"multiple",2),n([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),n([(0,u.property)({attribute:!1})],r.prototype,"value",2),n([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"required",2),n([(0,u.property)({type:String,reflect:!0})],r.prototype,"name",2),n([(0,u.property)({attribute:"required-message"})],r.prototype,"requiredMessage",2),n([(0,u.property)({type:Number,attribute:"max-files"})],r.prototype,"maxFiles",2),n([(0,u.property)({type:Number,attribute:"max-file-size"})],r.prototype,"maxFileSize",2),n([(0,u.property)({type:Number,attribute:"min-file-size"})],r.prototype,"minFileSize",2),n([(0,u.property)({attribute:!1})],r.prototype,"validate",2),r=n([(0,p.customElement)("skdx-file-upload","file-upload","root")],r);0&&(module.exports={SkdxFileUpload});
+  `,s([(0,l.property)({type:String})],i.prototype,"accept",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"multiple",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([(0,l.property)({attribute:!1})],i.prototype,"value",2),s([(0,l.property)({attribute:!1})],i.prototype,"defaultValue",2),s([(0,l.property)({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"invalid",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"directory",2),s([(0,l.property)({type:String})],i.prototype,"capture",2),s([(0,l.property)({converter:w.optOutBoolean,attribute:"prevent-document-drop"})],i.prototype,"preventDocumentDrop",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"required",2),s([(0,l.property)({type:String,reflect:!0})],i.prototype,"name",2),s([(0,l.property)({type:String,attribute:"form",reflect:!0})],i.prototype,"formId",2),s([(0,l.property)({attribute:"required-message"})],i.prototype,"requiredMessage",2),s([(0,l.property)({type:Number,attribute:"max-files"})],i.prototype,"maxFiles",2),s([(0,l.property)({type:Number,attribute:"max-file-size"})],i.prototype,"maxFileSize",2),s([(0,l.property)({type:Number,attribute:"min-file-size"})],i.prototype,"minFileSize",2),s([(0,l.property)({attribute:!1})],i.prototype,"validate",2),s([(0,l.property)({attribute:!1})],i.prototype,"removeLabel",2),s([(0,l.property)({type:Boolean,attribute:"show-list"})],i.prototype,"showList",2),s([(0,l.property)({type:Boolean,attribute:"show-preview"})],i.prototype,"showPreview",2),s([(0,l.property)({attribute:!1})],i.prototype,"fileStatus",2),s([(0,l.property)({attribute:!1})],i.prototype,"renderFile",2),s([(0,l.property)({attribute:!1})],i.prototype,"labelPresent",2),i=s([(0,F.customElement)("skdx-file-upload","file-upload","root")],i);0&&(module.exports={SkdxFileUpload});