@skdx/react 0.26.0 → 0.28.0

package/dist/field/Field.js

@@ -1 +1 @@
-import*as a from"react";import{useComposedRefs as V}from"../utils/composeRefs.js";import{createSafeContext as de}from"../utils/createContext.js";import{announce as ue}from"../utils/liveAnnouncer.js";import{skdxPart as ce}from"../utils/part.js";import{Primitive as k}from"../utils/primitive.js";import{useCallbackRef as he}from"../utils/useCallbackRef.js";var P="validity-change",C="data-skdx-field",R="data-skdx-field-name",I="data-skdx-field-message",A="data-skdx-field-description",E="data-skdx-field-error",x="data-skdx-field-character-count",Z=1e3;function F(r){let e=Math.abs(r),t=e===1?"character":"characters";return r<0?`You have ${e} ${t} too many`:`You have ${e} ${t} remaining`}function b(r,e,t=0){return t<=0?!0:r>=e*t/100}var O="This field is invalid.",D="data-skdx-field-control",N=[`[${D}]`,'input:not([type="hidden"])',"select","textarea",'[role="textbox"]','[role="searchbox"]','[role="combobox"]','[role="listbox"]','[role="radiogroup"]','[role="group"]','[role="slider"]','[role="spinbutton"]','[role="checkbox"]','[role="radio"]','[role="switch"]'].join(", "),ee=new Set(["radiogroup","group"]),te=['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(t=>typeof t=="string"&&t.trim()!=="")}function _(r){for(let e of Array.from(r.querySelectorAll(N)))if(e.getAttribute("aria-hidden")!=="true"&&e.closest(`[${C}]`)===r)return e;return null}function L(r,e){for(let t of Array.from(r.querySelectorAll(e)))if(t.closest(`[${C}]`)===r)return t;return null}function re(r){if(!r)return;let e=r;return e.type==="checkbox"||e.type==="radio"?e.checked:"value"in r?e.value:r.querySelector('input[aria-hidden="true"]')?.value}function f(r){return r==null||r===!1||r===""?!1:!(Array.isArray(r)&&r.length===0)}function p(r,e,t){t?r.setAttribute(e,""):r.removeAttribute(e)}function oe(r,...e){let t=r.split(/\s+/).filter(Boolean);for(let o of e)o&&!t.includes(o)&&t.push(o);return t.join(" ")}function ie(r){return r.closest("form, skdx-form")??r.parentElement??r}function ne(r){return Array.from(r.querySelectorAll(`[${C}][data-invalid]`)).flatMap(t=>{let o=_(t),n=L(t,`[${E}]`)?.textContent?.trim()||t.getAttribute(I)||t.getAttribute(R)||"";return!o?.id||!n?[]:[{id:o.id,message:n}]})}function se(r,e=document){let t=e.getElementById(r);if(!t)return;let o=t.getAttribute("role"),n=(t.tagName==="FIELDSET"||o!==null&&ee.has(o)?t.querySelector(te):null)??t;n.focus(),n.scrollIntoView?.({block:"center"})}var g=class{constructor(e){this.options=e;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 e=this.isOverLimit(this.snapshot.count),t=this.readCount();this.update({dirty:!0,filled:f(this.resolveValue()),count:t,errors:this.composeErrors(t)}),this.scheduleCountAnnouncement(t,e),(this.props.mode==="change"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleFocusOut=()=>{let e=this.readCount();this.update({touched:!0,filled:f(this.resolveValue()),count:e,errors:this.composeErrors(e)}),((this.props.mode??"blur")==="blur"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleSubmit=e=>{if(e.target!==this.form)return;this.markTouched();let t=this.runValidation({silent:!0});if(S(t)){e.preventDefault();return}(t.length>0||this.pending)&&e.preventDefault()};this.snapshot={controlId:e.controlId,errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0}}get state(){return this.snapshot}setProps(e){let t=this.props.value;this.props=e;let o=M(e.errors??null),i=!ae(this.injected,o);i&&(this.injected=o);let n=e.value!==t;if(!i&&!n)return;let s=this.readCount();this.update({count:s,filled:f(this.resolveValue()),errors:this.composeErrors(s)})}setCharacterCount(e){if((this.characterCount?.maxLength??null)===(e?.maxLength??null)&&(this.characterCount?.threshold??0)===(e?.threshold??0))return;this.characterCount=e;let o=this.readCount();this.update({count:o,errors:this.composeErrors(o)})}readCount(){let e=this.resolveValue();return typeof e=="string"?e.length:0}countMessage(e){return(this.props.getCharacterCountMessage??F)(e)}isOverLimit(e){return this.characterCount!==null&&e>this.characterCount.maxLength}composeErrors(e=this.snapshot.count){let t=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(e)&&t.push(this.countMessage(this.characterCount.maxLength-e)),t}scheduleCountAnnouncement(e,t){let o=this.characterCount;if(!o)return;if(clearTimeout(this.announceTimer),this.isOverLimit(e)){t||this.options.announce(this.countMessage(o.maxLength-e),"assertive");return}if(!b(e,o.maxLength,o.threshold))return;let i=o.maxLength-e;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(i),"polite")},1e3)}connect(e){this.root=e,e.setAttribute(C,""),e.addEventListener("input",this.handleInput,!0),e.addEventListener("change",this.handleInput,!0),e.addEventListener("focusout",this.handleFocusOut,!0),this.form=e.closest("form"),this.form&&e.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();let t=this.readCount();this.update({filled:f(this.resolveValue()),count:t,errors:this.composeErrors(t)})}disconnect(){clearTimeout(this.announceTimer);let e=this.root;e&&(e.removeEventListener("input",this.handleInput,!0),e.removeEventListener("change",this.handleInput,!0),e.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&e.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),this.root=null,this.form=null,this.control=null)}sync(){let e=this.root;if(!e)return;let t=_(e);t!==this.control&&(this.control=t,this.baseDescribedBy=t?.getAttribute("aria-describedby")??"");let{name:o}=this.props;o?e.setAttribute(R,o):e.removeAttribute(R);let i=this.snapshot.errors.join(" ");if(i?e.setAttribute(I,i):e.removeAttribute(I),this.applyStateAttributes(e),!t)return;t.id||(t.id=this.options.controlId),t.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:t.id},this.options.onSnapshotChange(this.snapshot));let n=L(e,`[${A}]`)!==null,s=L(e,`[${E}]`)!==null,l=oe(this.baseDescribedBy,n?this.options.descriptionId:void 0,s?this.options.errorId:void 0);l?t.setAttribute("aria-describedby",l):t.removeAttribute("aria-describedby"),this.snapshot.errors.length>0?t.setAttribute("aria-invalid","true"):t.removeAttribute("aria-invalid");let d=e.ownerDocument.getElementById(this.options.labelId)!==null;this.options.grouped&&d?t.setAttribute("aria-labelledby",this.options.labelId):t.getAttribute("aria-labelledby")===this.options.labelId&&t.removeAttribute("aria-labelledby"),this.applyStateAttributes(t)}validate(){return Promise.resolve(this.runValidation()).then(e=>e.length===0)}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(e){let{errors:t,touched:o,dirty:i,filled:n,count:s}=this.snapshot;p(e,"data-invalid",t.length>0),p(e,"data-valid",t.length===0),p(e,"data-touched",o),p(e,"data-dirty",i),p(e,"data-filled",n),p(e,"data-over-limit",this.isOverLimit(s))}resolveValue(){return this.props.value!==void 0?this.props.value:re(this.control)}nativeMessage(){let e=this.control;return!e?.validity||e.validity.valid?null:e.validationMessage||this.props.invalidMessage||O}runValidation(e={}){let t=++this.runToken,o=this.props.validate?.(this.resolveValue());return S(o)?(this.pending=!0,Promise.resolve(o).then(i=>t!==this.runToken?this.snapshot.errors:(this.pending=!1,this.commit(i,e)))):this.commit(o,e)}commit(e,t){if(this.custom=M(e),this.custom.length===0&&this.injected.length===0){let l=this.nativeMessage();l&&(this.custom=[l])}let o=this.readCount(),i=this.composeErrors(o),n=this.snapshot.errors.length===0;this.update({errors:i,count:o,filled:f(this.resolveValue())});let s=i[0];return s&&n&&!t.silent&&this.options.announce(s,"assertive"),i}update(e){let t={...this.snapshot,...e,valid:!0};t.valid=t.errors.length===0,!le(this.snapshot,t)&&(this.snapshot=t,this.sync(),this.options.onSnapshotChange(t),this.root?.dispatchEvent(new CustomEvent(P,{bubbles:!0,composed:!0,detail:{valid:t.valid,errors:t.errors,touched:t.touched,dirty:t.dirty,filled:t.filled,count:t.count}})))}};function S(r){return typeof r?.then=="function"}function ae(r,e){return r.length===e.length&&r.every((t,o)=>t===e[o])}function le(r,e){return r.controlId===e.controlId&&r.valid===e.valid&&r.touched===e.touched&&r.dirty===e.dirty&&r.filled===e.filled&&r.count===e.count&&r.errors.length===e.errors.length&&r.errors.every((t,o)=>t===e.errors[o])}import{jsx as T}from"react/jsx-runtime";var[H,c]=de("Field");function w(r,e,t){let o=a.useId(),i=a.useMemo(()=>({labelId:`${o}label`,descriptionId:`${o}description`,errorId:`${o}error`,controlId:`${o}control`}),[o]),[n,s]=a.useState(()=>({controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0})),l=he(r.onValidityChange),d=a.useMemo(()=>new g({...i,grouped:e,onSnapshotChange:u=>{s(u);let{controlId:v,...X}=u;l(X)},announce:ue}),[i,e,l]);a.useEffect(()=>{let u=t.current;if(u)return d.connect(u),s(d.state),()=>d.disconnect()},[d,t]),a.useEffect(()=>{d.setProps({validate:r.validate,mode:r.mode,errors:r.errors,value:r.value,name:r.name,getCharacterCountMessage:r.getCharacterCountMessage,invalidMessage:r.invalidMessage}),d.sync()});let m=a.useCallback(u=>d.setCharacterCount(u),[d]);return{...i,controlId:n.controlId||void 0,errors:n.errors,grouped:e,count:n.count,setCharacterCount:m,getCharacterCountMessage:r.getCharacterCountMessage}}var U=a.forwardRef(({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l,...d},m)=>{let h=a.useRef(null),u=w({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l},!1,h),v=V(m,h);return T(H,{...u,children:T(k.div,{...d,...ce("field","root",d.className),ref:v})})});U.displayName="Field";var B=a.forwardRef(({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l,...d},m)=>{let h=a.useRef(null),u=w({validate:r,mode:e,errors:t,value:o,name:i,onValidityChange:n,getCharacterCountMessage:s,invalidMessage:l},!0,h),v=V(m,h);return T(H,{...u,children:T(k.fieldset,{...d,ref:v})})});B.displayName="Fieldset";import*as Y from"react";import{skdxPart as $}from"../utils/part.js";import{Primitive as G}from"../utils/primitive.js";import{jsx as j}from"react/jsx-runtime";var q=Y.forwardRef((r,e)=>{let t=c("FieldLabel");return t.grouped?j(G.legend,{id:t.labelId,...r,...$("field","label",r.className),ref:e}):j(G.label,{id:t.labelId,htmlFor:t.controlId,...r,...$("field","label",r.className),ref:e})});q.displayName="FieldLabel";import*as K from"react";import{skdxPart as pe}from"../utils/part.js";import{Primitive as me}from"../utils/primitive.js";import{jsx as fe}from"react/jsx-runtime";var z=K.forwardRef((r,e)=>{let t=c("FieldDescription");return fe(me.span,{id:t.descriptionId,[A]:"",...r,...pe("field","description",r.className),ref:e})});z.displayName="FieldDescription";import*as W from"react";import{skdxPart as ve}from"../utils/part.js";import{Primitive as ge}from"../utils/primitive.js";import{jsx as Ce}from"react/jsx-runtime";var J=W.forwardRef(({children:r,...e},t)=>{let o=c("FieldError");return o.errors.length===0?null:Ce(ge.span,{id:o.errorId,[E]:"",...e,...ve("field","error",e.className),ref:t,children:r??o.errors.join(" ")})});J.displayName="FieldError";import*as y from"react";import{skdxPart as Ee}from"../utils/part.js";import{Primitive as Fe}from"../utils/primitive.js";import{jsx as be}from"react/jsx-runtime";var Q=y.forwardRef(({maxLength:r,threshold:e=0,children:t,...o},i)=>{let n=c("FieldCharacterCount"),{setCharacterCount:s}=n;if(y.useEffect(()=>(s({maxLength:r,threshold:e}),()=>s(null)),[s,r,e]),!b(n.count,r,e))return null;let l=r-n.count;return be(Fe.span,{[x]:"","data-over-limit":l<0?"":void 0,...o,...Ee("field","character-count",o.className),ref:i,children:t??(n.getCharacterCountMessage??F)(l)})});Q.displayName="FieldCharacterCount";export{Z as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,x as FIELD_CHARACTER_COUNT_ATTRIBUTE,D as FIELD_CONTROL_ATTRIBUTE,N as FIELD_CONTROL_SELECTOR,P as FIELD_VALIDITY_CHANGE_EVENT,U as Field,Q as FieldCharacterCount,z as FieldDescription,J as FieldError,q as FieldLabel,B as Fieldset,O as NATIVE_INVALID_FALLBACK_MESSAGE,F as characterCountMessage,b as characterCountVisible,ne as collectFieldErrors,ie as errorSummaryScope,_ as findFieldControl,se as focusFieldTarget};
+import*as s from"react";import{createSafeContext as We}from"../utils/createContext.js";import{announce as Xe}from"../utils/liveAnnouncer.js";import{skdxPart as Je}from"../utils/part.js";import{Primitive as me}from"../utils/primitive.js";import{useCallbackRef as Ze}from"../utils/useCallbackRef.js";import*as re from"react";import{skdxPart as we}from"../utils/part.js";import{Primitive as ke}from"../utils/primitive.js";var Z="validity-change",v="data-skdx-field",g="data-skdx-field-name",O="data-skdx-field-message",H="data-skdx-field-description",L="data-skdx-field-error",B="data-skdx-field-character-count",z="data-skdx-field-pending",M="data-skdx-field-resubmit",I="data-skdx-form-field",ee="data-skdx-form-message",Fe=["validity-change","invalid","change","blur"],ge="data-skdx-error-summary",ye=1e3;function x(r){let e=Math.abs(r),t=e===1?"character":"characters";return r<0?`You have ${e} ${t} too many`:`You have ${e} ${t} remaining`}function _(r,e,t=0){return t<=0?!0:r>=e*t/100}var te="This field is invalid.",S="data-skdx-field-control",U=[`[${S}]`,'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(", "),q="data-skdx-field-required-indicator",Ce=new Set(["INPUT","SELECT","TEXTAREA"]),Ie=new Set(["radiogroup","group"]),Ae=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function W(r){return r==null?[]:(Array.isArray(r)?r:[r]).filter(t=>typeof t=="string"&&t.trim()!=="")}function $(r){for(let e of Array.from(r.querySelectorAll(U)))if(e.getAttribute("aria-hidden")!=="true"&&e.closest(`[${v}]`)===r)return e;return null}function N(r,e){return V(r,v,e)}function V(r,e,t){for(let i of Array.from(r.querySelectorAll(t)))if(i.closest(`[${e}]`)===r)return i;return null}function Le(r){if(!r)return;let e=r;return e.type==="checkbox"||e.type==="radio"?e.checked:"value"in r?e.value:r.querySelector('input[aria-hidden="true"]')?.value}function b(r){return r==null||r===!1||r===""?!1:!(Array.isArray(r)&&r.length===0)}function E(r,e,t){t?r.setAttribute(e,""):r.removeAttribute(e)}function X(r,...e){let t=r.split(/\s+/).filter(Boolean);for(let i of e)i&&!t.includes(i)&&t.push(i);return t.join(" ")}function xe(r){return r.closest("form, skdx-form")??r.parentElement??r}function _e(r){let e=$(r),i=N(r,`[${L}]`)?.textContent?.trim()||r.getAttribute(O)||r.getAttribute(g)||"";return!e?.id||!i?[]:[{id:e.id,message:i}]}function Se(r){let e=V(r,I,U);if(!e?.id||e.getAttribute("aria-invalid")!=="true")return[];let i=V(r,I,`[${ee}]:not([hidden])`)?.textContent?.trim()||r.getAttribute(g)||"";return i?[{id:e.id,message:i}]:[]}function Pe(r){return Array.from(r.querySelectorAll(`[${v}][data-invalid], [${I}]`)).flatMap(t=>(t.hasAttribute(v)?_e:Se)(t))}var w="__skdxFieldCheckValidity",k="__skdxFieldReset";async function De(r){let e=Array.from(r.querySelectorAll(`[${v}]`));return(await Promise.all(e.map(i=>i[w]?.()??!0))).every(Boolean)}function Me(r){for(let e of Array.from(r.querySelectorAll(`[${v}]`)))e[k]?.()}function Oe(r,e=document){let t=e.getElementById(r);if(!t)return;let i=t.getAttribute("role"),n=(t.tagName==="FIELDSET"||i!==null&&Ie.has(i)?t.querySelector(Ae):null)??t;n.focus(),n.scrollIntoView?.({block:"center"})}var A=class{constructor(e){this.options=e;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 e=this.isOverLimit(this.snapshot.count),t=this.readCount();this.update({dirty:!0,filled:b(this.resolveValue()),count:t,errors:this.composeErrors(t)}),this.scheduleCountAnnouncement(t,e),(this.props.mode==="change"||this.snapshot.errors.length>0)&&this.scheduleValidation()};this.handleFocusOut=()=>{let e=this.readCount();this.update({touched:!0,filled:b(this.resolveValue()),count:e,errors:this.composeErrors(e)});let t=this.validationTimer!==void 0;clearTimeout(this.validationTimer),this.validationTimer=void 0;let i=this.props.mode??"blur";(t||i==="blur"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleSubmit=e=>{if(e.target!==this.form||this.isEngineResubmit(e))return;this.markTouched();let t=this.runValidation({silent:this.hasErrorSummary()});if(J(t)){e.preventDefault(),this.awaitingSubmit=!0,Promise.resolve(t).then(()=>{this.awaitingSubmit&&(this.awaitingSubmit=!1,this.resubmitIfSettled())});return}(t.length>0||this.pending)&&e.preventDefault()};this.snapshot={controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null}}get state(){return this.snapshot}setProps(e){let t=this.props.value;this.props=e;let i=W(e.errors??null),o=!Ne(this.injected,i);o&&(this.injected=i);let n=e.value!==t;if(!o&&!n)return;let a=this.readCount();this.update({count:a,filled:b(this.resolveValue()),errors:this.composeErrors(a)})}setCharacterCount(e){if((this.characterCount?.maxLength??null)===(e?.maxLength??null)&&(this.characterCount?.threshold??0)===(e?.threshold??0))return;this.characterCount=e;let i=this.readCount();this.update({count:i,errors:this.composeErrors(i)})}readCount(){let e=this.resolveValue();return typeof e=="string"?e.length:0}countMessage(e){return(this.props.getCharacterCountMessage??x)(e)}isOverLimit(e){return this.characterCount!==null&&e>this.characterCount.maxLength}composeErrors(e=this.snapshot.count){let t=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(e)&&t.push(this.countMessage(this.characterCount.maxLength-e)),t}scheduleCountAnnouncement(e,t){let i=this.characterCount;if(!i)return;if(clearTimeout(this.announceTimer),this.isOverLimit(e)){t||this.options.announce(this.countMessage(i.maxLength-e),"assertive");return}if(!_(e,i.maxLength,i.threshold))return;let o=i.maxLength-e;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(o),"polite")},1e3)}connect(e){this.root=e,e.setAttribute(v,""),Object.defineProperty(e,w,{value:()=>this.validate(),configurable:!0,enumerable:!1,writable:!0}),Object.defineProperty(e,k,{value:()=>this.reset(),configurable:!0,enumerable:!1,writable:!0}),e.addEventListener("input",this.handleInput,!0),e.addEventListener("change",this.handleInput,!0),e.addEventListener("focusout",this.handleFocusOut,!0),this.form=e.closest("form"),this.form&&e.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();let t=this.readCount();this.update({filled:b(this.resolveValue()),count:t,errors:this.composeErrors(t)})}disconnect(){clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.awaitingSubmit=!1;let e=this.root;e&&(e.removeEventListener("input",this.handleInput,!0),e.removeEventListener("change",this.handleInput,!0),e.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&e.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),delete e[w],delete e[k],this.root=null,this.form=null,this.control=null)}sync(){let e=this.root;if(!e)return;let t=$(e);t!==this.control&&(this.control=t,this.baseDescribedBy=t?.getAttribute("aria-describedby")??"",this.baseLabelledBy=t?.getAttribute("aria-labelledby")??"",this.wroteLabelledBy=!1,this.wroteRequired=!1,this.wroteDisabled=!1);let{name:i}=this.props;i?e.setAttribute(g,i):e.removeAttribute(g);let o=this.snapshot.errors.join(" ");if(o?e.setAttribute(O,o):e.removeAttribute(O),this.applyStateAttributes(e),!t)return;t.id||(t.id=this.options.controlId),t.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:t.id,validity:this.readValidity()},this.options.onSnapshotChange(this.snapshot));let n=N(e,`[${H}]`)!==null,a=N(e,`[${L}]`)!==null,l=X(this.baseDescribedBy,n?this.options.descriptionId:void 0,a?this.options.errorId:void 0);l?t.setAttribute("aria-describedby",l):t.removeAttribute("aria-describedby"),this.snapshot.errors.length>0?t.setAttribute("aria-invalid","true"):t.removeAttribute("aria-invalid");let p=e.ownerDocument.getElementById(this.options.labelId)!==null;this.options.grouped&&p?(t.setAttribute("aria-labelledby",X(this.baseLabelledBy,this.options.labelId)),this.wroteLabelledBy=!0):this.wroteLabelledBy&&(this.baseLabelledBy?t.setAttribute("aria-labelledby",this.baseLabelledBy):t.removeAttribute("aria-labelledby"),this.wroteLabelledBy=!1),this.applyConstraintState(t),this.applyStateAttributes(t)}applyConstraintState(e){let t=Ce.has(e.tagName),i=this.props.required===!0,o=this.props.disabled===!0;i?(t?e.setAttribute("required",""):e.setAttribute("aria-required","true"),this.wroteRequired=!0):this.wroteRequired&&(e.removeAttribute(t?"required":"aria-required"),this.wroteRequired=!1),o?(t?e.setAttribute("disabled",""):e.setAttribute("aria-disabled","true"),this.wroteDisabled=!0):this.wroteDisabled&&(e.removeAttribute(t?"disabled":"aria-disabled"),this.wroteDisabled=!1)}validate(){return Promise.resolve(this.runValidation()).then(e=>e.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 e=this.readCount();this.update({touched:!1,dirty:!1,count:e,filled:b(this.resolveValue()),errors:this.composeErrors(e)}),this.sync()}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(e){let{errors:t,touched:i,dirty:o,filled:n,count:a}=this.snapshot;E(e,"data-invalid",t.length>0),E(e,"data-valid",t.length===0),E(e,"data-touched",i),E(e,"data-dirty",o),E(e,"data-filled",n),E(e,"data-over-limit",this.isOverLimit(a)),E(e,"data-disabled",this.props.disabled===!0)}resolveValue(){return this.props.value!==void 0?this.props.value:Le(this.control)}readValidity(){return this.control?.validity??null}markPending(e){this.root&&E(this.root,z,e)}nativeMessage(){let e=this.control;return!e?.validity||e.validity.valid?null:e.validationMessage||this.props.invalidMessage||te}runValidation(e={}){let t=++this.runToken,i=this.props.validate?.(this.resolveValue());return J(i)?(this.pending=!0,this.markPending(!0),Promise.resolve(i).then(o=>t!==this.runToken?this.snapshot.errors:(this.pending=!1,this.markPending(!1),this.commit(o,e)))):this.commit(i,e)}commit(e,t){this.custom=W(e);let i=this.nativeMessage();i&&!this.custom.includes(i)&&!this.injected.includes(i)&&(this.custom=[...this.custom,i]);let o=this.readCount(),n=this.composeErrors(o),a=this.snapshot.errors.length===0;this.update({errors:n,count:o,filled:b(this.resolveValue())});let l=n[0];return l&&a&&!t.silent&&this.options.announce(l,"assertive"),n}update(e){let t={...this.snapshot,...e,valid:!0,validity:this.readValidity()};t.valid=t.errors.length===0,!Ve(this.snapshot,t)&&(this.snapshot=t,this.sync(),this.options.onSnapshotChange(t),this.root?.dispatchEvent(new CustomEvent(Z,{bubbles:!0,composed:!0,detail:{valid:t.valid,errors:t.errors,touched:t.touched,dirty:t.dirty,filled:t.filled,count:t.count,validity:t.validity}})))}scheduleValidation(){clearTimeout(this.validationTimer),this.validationTimer=void 0;let e=this.props.mode==="change"?this.props.validationDebounceTime??0:0;if(e<=0){this.runValidation();return}this.validationTimer=setTimeout(()=>{this.validationTimer=void 0,this.runValidation()},e)}hasErrorSummary(){return this.form?.querySelector(`[${ge}]`)!=null}isEngineResubmit(e){return this.form?.hasAttribute(M)?(this.snapshot.errors.length>0&&e.preventDefault(),!0):!1}resubmitIfSettled(){let e=this.form;if(!(!e||typeof e.requestSubmit!="function")&&!e.querySelector(`[${z}]`)&&!e.querySelector(`[${v}][data-invalid]`)){e.setAttribute(M,"");try{e.requestSubmit()}finally{e.removeAttribute(M)}}}};function J(r){return typeof r?.then=="function"}function Ne(r,e){return r.length===e.length&&r.every((t,i)=>t===e[i])}function Ve(r,e){return r.controlId===e.controlId&&r.valid===e.valid&&r.touched===e.touched&&r.dirty===e.dirty&&r.filled===e.filled&&r.count===e.count&&r.validity===e.validity&&r.errors.length===e.errors.length&&r.errors.every((t,i)=>t===e.errors[i])}import{jsx as He}from"react/jsx-runtime";var Y=re.forwardRef(({as:r="span",...e},t)=>{let i=c("FieldDescription"),o=ke[r];return He(o,{id:i.descriptionId,[H]:"",...e,...we("field","description",e.className),ref:t})});Y.displayName="FieldDescription";import*as ie from"react";import{skdxPart as Be}from"../utils/part.js";import{Primitive as Ue}from"../utils/primitive.js";import{jsx as qe}from"react/jsx-runtime";var G=ie.forwardRef(({as:r="span",children:e,...t},i)=>{let o=c("FieldError");if(o.errors.length===0)return null;let n=Ue[r];return qe(n,{id:o.errorId,[L]:"",...t,...Be("field","error",t.className),ref:i,children:e??o.errors.join(" ")})});G.displayName="FieldError";import*as de from"react";import{skdxPart as oe}from"../utils/part.js";import{composeEventHandlers as ne,Primitive as se}from"../utils/primitive.js";import{jsx as le}from"react/jsx-runtime";function ae(r){!r.defaultPrevented&&r.detail>1&&r.preventDefault()}var j=de.forwardRef((r,e)=>{let t=c("FieldLabel");return t.grouped?le(se.legend,{id:t.labelId,...r,...oe("field","label",r.className),ref:e,onMouseDown:ne(r.onMouseDown,ae)}):le(se.label,{id:t.labelId,htmlFor:t.controlId,...r,...oe("field","label",r.className),ref:e,onMouseDown:ne(r.onMouseDown,ae)})});j.displayName="FieldLabel";import*as ue from"react";import{skdxPart as $e}from"../utils/part.js";import{Primitive as Ye}from"../utils/primitive.js";import{jsx as Ge}from"react/jsx-runtime";var Q=ue.forwardRef(({children:r,...e},t)=>c("FieldRequiredIndicator").required?Ge(Ye.span,{[q]:"",...e,...$e("field","required-indicator",e.className),ref:t,children:r??"*"}):null);Q.displayName="FieldRequiredIndicator";import{Fragment as je,jsx as K,jsxs as ce}from"react/jsx-runtime";function he({label:r,description:e,children:t}){return ce(je,{children:[r?ce(j,{children:[r,K(Q,{})]}):null,t,e?K(Y,{children:e}):null,K(G,{})]})}import*as h from"react";var Qe=new Set(["input","select","textarea"]),Ke=new Set(["textbox","searchbox","combobox","listbox","radiogroup","group","slider","spinbutton","checkbox","radio","switch"]);function ze(r){let e=r.props;return e["aria-hidden"]===!0||e["aria-hidden"]==="true"?!1:e[S]!==void 0||typeof e.role=="string"&&Ke.has(e.role)?!0:typeof r.type!="string"||!Qe.has(r.type)?!1:!(r.type==="input"&&e.type==="hidden")}function P(r,e,t){if(t.found||!r)return r;if(Array.isArray(r))return h.Children.map(r,o=>P(o,e,t));if(!h.isValidElement(r))return r;let i=r;return i.type===h.Fragment?h.cloneElement(i,void 0,P(i.props.children,e,t)):ze(i)?(t.found=!0,typeof i.props.id=="string"&&i.props.id!==""?(t.controlId=i.props.id,i):(t.controlId=e,h.cloneElement(i,{id:e}))):typeof i.type=="string"&&i.props.children!==void 0?h.cloneElement(i,void 0,P(i.props.children,e,t)):r}function pe(r,e){let t={controlId:void 0,found:!1};return{children:P(r,e,t),controlId:t.controlId}}import{jsx as y}from"react/jsx-runtime";var[fe,c]=We("Field");function Ee(r,e,t,i){let o=s.useId(),n=s.useMemo(()=>({labelId:`${o}label`,descriptionId:`${o}description`,errorId:`${o}error`,controlId:`${o}control`}),[o]),a=pe(i,n.controlId),[l,p]=s.useState(()=>({controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null})),R=Ze(r.onValidityChange),d=s.useMemo(()=>new A({...n,grouped:e,onSnapshotChange:u=>{p(u);let{controlId:C,...F}=u;R(F)},announce:Xe}),[n,e,R]);s.useEffect(()=>{let u=t.current;if(u)return d.connect(u),p(d.state),()=>d.disconnect()},[d,t]),s.useEffect(()=>{d.setProps({validate:r.validate,mode:r.mode,errors:r.errors,value:r.value,name:r.name,required:r.required,disabled:r.disabled,getCharacterCountMessage:r.getCharacterCountMessage,invalidMessage:r.invalidMessage,validationDebounceTime:r.validationDebounceTime}),d.sync()});let m=s.useCallback(u=>d.setCharacterCount(u),[d]),T=s.useMemo(()=>({checkValidity:()=>d.validate(),reset:()=>d.reset()}),[d]);return{context:{...n,controlId:l.controlId||a.controlId,errors:l.errors,grouped:e,required:r.required===!0,count:l.count,setCharacterCount:m,getCharacterCountMessage:r.getCharacterCountMessage},children:a.children,handle:T}}function ve(r,e,t){s.useImperativeHandle(r,()=>e.current?Object.assign(e.current,t):t)}var Re=s.forwardRef(({validate:r,mode:e,errors:t,value:i,name:o,required:n,disabled:a,onValidityChange:l,getCharacterCountMessage:p,invalidMessage:R,validationDebounceTime:d,...m},T)=>{let f=s.useRef(null),{context:u,children:C,handle:F}=Ee({validate:r,mode:e,errors:t,value:i,name:o,required:n,disabled:a,onValidityChange:l,getCharacterCountMessage:p,invalidMessage:R,validationDebounceTime:d},!1,f,m.children);return ve(T,f,F),y(fe,{...u,children:y(me.div,{...m,...Je("field","root",m.className),ref:f,children:C})})});Re.displayName="FieldRoot";var be=s.forwardRef(({label:r,description:e,children:t,...i},o)=>y(Re,{...i,ref:o,children:he({label:r,description:e,children:t})}));be.displayName="Field";var Te=s.forwardRef(({validate:r,mode:e,errors:t,value:i,name:o,required:n,disabled:a,onValidityChange:l,getCharacterCountMessage:p,invalidMessage:R,validationDebounceTime:d,...m},T)=>{let f=s.useRef(null),{context:u,children:C,handle:F}=Ee({validate:r,mode:e,errors:t,value:i,name:o,required:n,disabled:a,onValidityChange:l,getCharacterCountMessage:p,invalidMessage:R,validationDebounceTime:d},!0,f,m.children);return ve(T,f,F),y(fe,{...u,children:y(me.fieldset,{...m,ref:f,children:C})})});Te.displayName="Fieldset";import*as D from"react";import{skdxPart as et}from"../utils/part.js";import{Primitive as tt}from"../utils/primitive.js";import{jsx as it}from"react/jsx-runtime";var rt=D.forwardRef(({maxLength:r,threshold:e=0,children:t,...i},o)=>{let n=c("FieldCharacterCount"),{setCharacterCount:a}=n;if(D.useEffect(()=>(a({maxLength:r,threshold:e}),()=>a(null)),[a,r,e]),!_(n.count,r,e))return null;let l=r-n.count;return it(tt.span,{[B]:"","data-over-limit":l<0?"":void 0,...i,...et("field","character-count",i.className),ref:o,children:t??(n.getCharacterCountMessage??x)(l)})});rt.displayName="FieldCharacterCount";export{ye as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,Fe as ERROR_SUMMARY_RESCAN_EVENTS,B as FIELD_CHARACTER_COUNT_ATTRIBUTE,S as FIELD_CONTROL_ATTRIBUTE,U as FIELD_CONTROL_SELECTOR,g as FIELD_NAME_ATTRIBUTE,q as FIELD_REQUIRED_INDICATOR_ATTRIBUTE,Z as FIELD_VALIDITY_CHANGE_EVENT,I as FORM_FIELD_ATTRIBUTE,ee as FORM_MESSAGE_ATTRIBUTE,be as Field,rt as FieldCharacterCount,Y as FieldDescription,G as FieldError,j as FieldLabel,fe as FieldProvider,Q as FieldRequiredIndicator,Re as FieldRoot,Te as Fieldset,te as NATIVE_INVALID_FALLBACK_MESSAGE,x as characterCountMessage,_ as characterCountVisible,Pe as collectFieldErrors,xe as errorSummaryScope,$ as findFieldControl,Oe as focusFieldTarget,Me as resetFields,c as useFieldContext,De as validateFields};

package/dist/field/FieldAnatomy.d.cts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+/**
+ * Field anatomy from `label`/`description` — plain function, not component (to avoid hydration mismatch).
+ *
+ * @internal
+ */
+export declare function FieldAnatomy({ label, description, children, }: {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+}): React.ReactNode;

package/dist/field/FieldAnatomy.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+/**
+ * Field anatomy from `label`/`description` — plain function, not component (to avoid hydration mismatch).
+ *
+ * @internal
+ */
+export declare function FieldAnatomy({ label, description, children, }: {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+}): React.ReactNode;

package/dist/field/FieldCharacterCount.d.cts

@@ -1,20 +1,8 @@
 import * as React from 'react';
 import type { FieldCharacterCountProps } from './types.cjs';
 /**
- * A running character count for the control a {@link Field} wraps — GOV.UK's
- * pattern, which works the same for a `Textarea` and a `TextField` because the
- * count belongs to the field, not to the control.
- *
- * `maxLength` is a *soft* limit: it is deliberately not set as the control's
- * native `maxlength`, because that truncates silently and leaves the user with
- * no idea their text was cut. Going over it instead makes the Field invalid
- * through the same path as any other error — `data-invalid`, `aria-invalid` on
- * the control, a message in `FieldError`, and a blocked submit — plus
- * `data-over-limit` here and on the Field for styling.
- *
- * Nothing here is a live region. The count is announced through the shared
- * announcer one typing pause after the last keystroke, so a screen reader hears
- * one number instead of a running commentary over every character typed.
+ * Running character count. `maxLength` is soft: sets `data-over-limit` on
+ * Field, not truncate. Announced once per pause, not per character.
  *
  * @example
  * ```tsx

package/dist/field/FieldCharacterCount.d.ts

@@ -1,20 +1,8 @@
 import * as React from 'react';
 import type { FieldCharacterCountProps } from './types.js';
 /**
- * A running character count for the control a {@link Field} wraps — GOV.UK's
- * pattern, which works the same for a `Textarea` and a `TextField` because the
- * count belongs to the field, not to the control.
- *
- * `maxLength` is a *soft* limit: it is deliberately not set as the control's
- * native `maxlength`, because that truncates silently and leaves the user with
- * no idea their text was cut. Going over it instead makes the Field invalid
- * through the same path as any other error — `data-invalid`, `aria-invalid` on
- * the control, a message in `FieldError`, and a blocked submit — plus
- * `data-over-limit` here and on the Field for styling.
- *
- * Nothing here is a live region. The count is announced through the shared
- * announcer one typing pause after the last keystroke, so a screen reader hears
- * one number instead of a running commentary over every character typed.
+ * Running character count. `maxLength` is soft: sets `data-over-limit` on
+ * Field, not truncate. Announced once per pause, not per character.
  *
  * @example
  * ```tsx

package/dist/field/FieldDescription.d.cts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import type { FieldDescriptionProps } from './types.cjs';
 /**
- * Help text for a {@link Field}. Its generated `id` is added to the wrapped
- * control's `aria-describedby`, so screen readers announce it *with* the
- * control instead of leaving it to be discovered by browsing.
+ * Help text for a {@link Field}. Its `id` is added to the wrapped control's
+ * `aria-describedby` so screen readers announce it with the control.
  *
  * @example
  * ```tsx

package/dist/field/FieldDescription.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import type { FieldDescriptionProps } from './types.js';
 /**
- * Help text for a {@link Field}. Its generated `id` is added to the wrapped
- * control's `aria-describedby`, so screen readers announce it *with* the
- * control instead of leaving it to be discovered by browsing.
+ * Help text for a {@link Field}. Its `id` is added to the wrapped control's
+ * `aria-describedby` so screen readers announce it with the control.
  *
  * @example
  * ```tsx

package/dist/field/FieldError.d.cts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import type { FieldErrorProps } from './types.cjs';
 /**
- * The error text for a {@link Field}. Renders nothing while the field is
- * valid; once it renders, its generated `id` joins the control's
- * `aria-describedby` and the control gains `aria-invalid="true"`.
- *
- * With no children it renders the field's current messages, which is also
- * the text a `FormErrorSummary` uses for its link — pass your own children to
- * override the copy.
+ * Error text for a Field. Renders nothing while valid; when rendered, joins `aria-describedby` and sets `aria-invalid`.
  *
  * @example
  * ```tsx

package/dist/field/FieldError.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import type { FieldErrorProps } from './types.js';
 /**
- * The error text for a {@link Field}. Renders nothing while the field is
- * valid; once it renders, its generated `id` joins the control's
- * `aria-describedby` and the control gains `aria-invalid="true"`.
- *
- * With no children it renders the field's current messages, which is also
- * the text a `FormErrorSummary` uses for its link — pass your own children to
- * override the copy.
+ * Error text for a Field. Renders nothing while valid; when rendered, joins `aria-describedby` and sets `aria-invalid`.
  *
  * @example
  * ```tsx

package/dist/field/FieldRequiredIndicator.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { FieldRequiredIndicatorProps } from './types.cjs';
+/**
+ * "This field is required" marker for a {@link Field}, renders inside `FieldLabel` only.
+ *
+ * Inside the label it joins the control's accessible name — screen readers announce the requirement. Not `aria-hidden` because that would announce it only to sighted users.
+ *
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <FieldLabel>
+ *     Email <FieldRequiredIndicator>(required)</FieldRequiredIndicator>
+ *   </FieldLabel>
+ *   <input type="email" />
+ * </Field>
+ * ```
+ */
+export declare const FieldRequiredIndicator: React.ForwardRefExoticComponent<Omit<FieldRequiredIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/field/FieldRequiredIndicator.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { FieldRequiredIndicatorProps } from './types.js';
+/**
+ * "This field is required" marker for a {@link Field}, renders inside `FieldLabel` only.
+ *
+ * Inside the label it joins the control's accessible name — screen readers announce the requirement. Not `aria-hidden` because that would announce it only to sighted users.
+ *
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <FieldLabel>
+ *     Email <FieldRequiredIndicator>(required)</FieldRequiredIndicator>
+ *   </FieldLabel>
+ *   <input type="email" />
+ * </Field>
+ * ```
+ */
+export declare const FieldRequiredIndicator: React.ForwardRefExoticComponent<Omit<FieldRequiredIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/field/fieldControlId.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/** What {@link withFieldControlId} resolved for one render. */
+export interface FieldControlIdResult {
+    /** The children to render, with the generated id cloned onto the control when one was found. */
+    children: React.ReactNode;
+    /**
+     * The id the control carries in this render's markup, or `undefined` when no
+     * control was recognisable from the element tree — in which case the label
+     * emits no `for` at all rather than one that resolves to nothing.
+     */
+    controlId: string | undefined;
+}
+/**
+ * Finds the Field's control in `children` and gives it `generatedId`, so the
+ * `for`/`id` pair exists in server markup instead of appearing only after
+ * hydration.
+ *
+ * @param children the Field's children, exactly as passed
+ * @param generatedId the Field's own generated control id
+ */
+export declare function withFieldControlId(children: React.ReactNode, generatedId: string): FieldControlIdResult;

package/dist/field/fieldControlId.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/** What {@link withFieldControlId} resolved for one render. */
+export interface FieldControlIdResult {
+    /** The children to render, with the generated id cloned onto the control when one was found. */
+    children: React.ReactNode;
+    /**
+     * The id the control carries in this render's markup, or `undefined` when no
+     * control was recognisable from the element tree — in which case the label
+     * emits no `for` at all rather than one that resolves to nothing.
+     */
+    controlId: string | undefined;
+}
+/**
+ * Finds the Field's control in `children` and gives it `generatedId`, so the
+ * `for`/`id` pair exists in server markup instead of appearing only after
+ * hydration.
+ *
+ * @param children the Field's children, exactly as passed
+ * @param generatedId the Field's own generated control id
+ */
+export declare function withFieldControlId(children: React.ReactNode, generatedId: string): FieldControlIdResult;