@skdx/vue 0.30.0 → 0.32.0

package/dist/utils/field-core.js

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

package/dist/utils/media-query.cjs

@@ -0,0 +1 @@
+function d(e){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(e).matches}function c(e,t){if(typeof window>"u"||typeof window.matchMedia!="function")return()=>{};const n=window.matchMedia(e),i=a=>t(a.matches);return n.addEventListener("change",i),()=>n.removeEventListener("change",i)}exports.matchesMediaQuery=d;exports.subscribeMediaQuery=c;

package/dist/utils/media-query.d.cts

@@ -0,0 +1,7 @@
+/** Whether `query` currently matches; `false` wherever `matchMedia` is missing (SSR, some test runners). */
+export declare function matchesMediaQuery(query: string): boolean;
+/**
+ * Calls `onChange` with the new match state whenever `query` flips, and returns the unsubscribe.
+ * A no-op returning a no-op wherever `matchMedia` is missing.
+ */
+export declare function subscribeMediaQuery(query: string, onChange: (matches: boolean) => void): () => void;

package/dist/utils/media-query.d.ts

@@ -0,0 +1,7 @@
+/** Whether `query` currently matches; `false` wherever `matchMedia` is missing (SSR, some test runners). */
+export declare function matchesMediaQuery(query: string): boolean;
+/**
+ * Calls `onChange` with the new match state whenever `query` flips, and returns the unsubscribe.
+ * A no-op returning a no-op wherever `matchMedia` is missing.
+ */
+export declare function subscribeMediaQuery(query: string, onChange: (matches: boolean) => void): () => void;

package/dist/utils/media-query.js

@@ -0,0 +1 @@
+function e(e){return!(typeof window>"u"||"function"!=typeof window.matchMedia)&&window.matchMedia(e).matches}function n(e,n){if(typeof window>"u"||"function"!=typeof window.matchMedia)return()=>{};const t=window.matchMedia(e),i=e=>n(e.matches);return t.addEventListener("change",i),()=>t.removeEventListener("change",i)}export{e as matchesMediaQuery,n as subscribeMediaQuery};

package/dist/utils/useDismiss.cjs

@@ -1 +1 @@
-const n=require("./dismissal.cjs");let l=require("vue");function L({enabled:w,onEscapeKeyDown:E,onPointerDownOutside:p,onFocusOutside:y,onInteractOutside:r},i){if(typeof document>"u")return;let s,o;const u={insideElements:()=>i.map(e=>e.value)},c=e=>!i.some(t=>t.value?.contains(e)),d=e=>{n.handleEscapeKeyDown(e,u,E)},a=e=>{const t=e.target;t&&c(t)&&(r?.(e),p?.(e))},m=e=>{const t=n.focusOutsideTarget(e);if(!t||!c(t))return;const v=n.focusOutsideEvent(e);r?.(v),y?.(v)};function D(){o=n.pushDismissLayer(u),document.addEventListener("keydown",d),s=setTimeout(()=>{document.addEventListener("pointerdown",a,!0),document.addEventListener("focusin",m,!0)},0)}function f(){o?.(),o=void 0,document.removeEventListener("keydown",d),clearTimeout(s),document.removeEventListener("pointerdown",a,!0),document.removeEventListener("focusin",m,!0)}(0,l.watch)(w,e=>{f(),e&&D()},{immediate:!0}),(0,l.onBeforeUnmount)(f)}exports.backdropPointerDown=n.backdropPointerDown;exports.useDismiss=L;
+const n=require("./dismissal.cjs");let l=require("vue");function D({enabled:w,onEscapeKeyDown:E,onPointerDownOutside:y,onFocusOutside:L,onInteractOutside:r},s){if(typeof document>"u")return;let u,o;const i={insideElements:()=>s.map(e=>e.value)},c=e=>!s.some(t=>t.value?.contains(e))&&!n.nestedLayerContains(i,e),d=e=>{n.handleEscapeKeyDown(e,i,E)},a=e=>{const t=e.target;t&&c(t)&&(r?.(e),y?.(e))},m=e=>{const t=n.focusOutsideTarget(e);if(!t||!c(t))return;const v=n.focusOutsideEvent(e);r?.(v),L?.(v)};function p(){o=n.pushDismissLayer(i),document.addEventListener("keydown",d),u=setTimeout(()=>{document.addEventListener("pointerdown",a,!0),document.addEventListener("focusin",m,!0)},0)}function f(){o?.(),o=void 0,document.removeEventListener("keydown",d),clearTimeout(u),document.removeEventListener("pointerdown",a,!0),document.removeEventListener("focusin",m,!0)}(0,l.watch)(w,e=>{f(),e&&p()},{immediate:!0}),(0,l.onBeforeUnmount)(f)}exports.backdropPointerDown=n.backdropPointerDown;exports.useDismiss=D;

package/dist/utils/useDismiss.js

@@ -1 +1 @@
-import{backdropPointerDown as e,focusOutsideEvent as n,focusOutsideTarget as t,handleEscapeKeyDown as o,pushDismissLayer as s}from"./dismissal.js";import{onBeforeUnmount as i,watch as r}from"vue";function a({enabled:e,onEscapeKeyDown:a,onPointerDownOutside:d,onFocusOutside:u,onInteractOutside:c},m){if(typeof document>"u")return;let v,f;const p={insideElements:()=>m.map(e=>e.value)},w=e=>!m.some(n=>n.value?.contains(e)),E=e=>{o(e,p,a)},l=e=>{const n=e.target;n&&w(n)&&(c?.(e),d?.(e))},D=e=>{const o=t(e);if(!o||!w(o))return;const s=n(e);c?.(s),u?.(s)};function L(){f?.(),f=void 0,document.removeEventListener("keydown",E),clearTimeout(v),document.removeEventListener("pointerdown",l,!0),document.removeEventListener("focusin",D,!0)}r(e,e=>{L(),e&&(f=s(p),document.addEventListener("keydown",E),v=setTimeout(()=>{document.addEventListener("pointerdown",l,!0),document.addEventListener("focusin",D,!0)},0))},{immediate:!0}),i(L)}export{e as backdropPointerDown,a as useDismiss};
+import{backdropPointerDown as e,focusOutsideEvent as n,focusOutsideTarget as t,handleEscapeKeyDown as o,nestedLayerContains as s,pushDismissLayer as i}from"./dismissal.js";import{onBeforeUnmount as a,watch as r}from"vue";function d({enabled:e,onEscapeKeyDown:d,onPointerDownOutside:u,onFocusOutside:c,onInteractOutside:m},v){if(typeof document>"u")return;let f,p;const w={insideElements:()=>v.map(e=>e.value)},E=e=>!v.some(n=>n.value?.contains(e))&&!s(w,e),l=e=>{o(e,w,d)},L=e=>{const n=e.target;n&&E(n)&&(m?.(e),u?.(e))},y=e=>{const o=t(e);if(!o||!E(o))return;const s=n(e);m?.(s),c?.(s)};function D(){p?.(),p=void 0,document.removeEventListener("keydown",l),clearTimeout(f),document.removeEventListener("pointerdown",L,!0),document.removeEventListener("focusin",y,!0)}r(e,e=>{D(),e&&(p=i(w),document.addEventListener("keydown",l),f=setTimeout(()=>{document.addEventListener("pointerdown",L,!0),document.addEventListener("focusin",y,!0)},0))},{immediate:!0}),a(D)}export{e as backdropPointerDown,d as useDismiss};

package/dist/utils/useMediaQuery.cjs

@@ -0,0 +1 @@
+const i=require("./media-query.cjs");let e=require("vue");function o(s){const u=(0,e.ref)(!1);let r=()=>{};return(0,e.watch)(()=>(0,e.toValue)(s),a=>{r(),u.value=i.matchesMediaQuery(a),r=i.subscribeMediaQuery(a,t=>{u.value=t})},{immediate:!0}),(0,e.onScopeDispose)(()=>r()),(0,e.readonly)(u)}exports.useMediaQuery=o;

package/dist/utils/useMediaQuery.d.cts

@@ -0,0 +1,11 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+/**
+ * Whether `query` matches, as a read-only ref kept live through `matchMedia`;
+ * `false` wherever `matchMedia` is missing, such as on the server.
+ *
+ * @example
+ * ```ts
+ * const narrow = useMediaQuery('(max-width: 600px)');
+ * ```
+ */
+export declare function useMediaQuery(query: MaybeRefOrGetter<string>): Readonly<Ref<boolean>>;

package/dist/utils/useMediaQuery.d.ts

@@ -0,0 +1,11 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+/**
+ * Whether `query` matches, as a read-only ref kept live through `matchMedia`;
+ * `false` wherever `matchMedia` is missing, such as on the server.
+ *
+ * @example
+ * ```ts
+ * const narrow = useMediaQuery('(max-width: 600px)');
+ * ```
+ */
+export declare function useMediaQuery(query: MaybeRefOrGetter<string>): Readonly<Ref<boolean>>;

package/dist/utils/useMediaQuery.js

@@ -0,0 +1 @@
+import{matchesMediaQuery as e,subscribeMediaQuery as a}from"./media-query.js";import{onScopeDispose as s,readonly as r,ref as o,toValue as u,watch as i}from"vue";function t(t){const m=o(!1);let c=()=>{};return i(()=>u(t),s=>{c(),m.value=e(s),c=a(s,e=>{m.value=e})},{immediate:!0}),s(()=>c()),r(m)}export{t as useMediaQuery};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skdx/vue",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "Vue 3 (Composition API) components for the SkandaDX design system",
   "license": "MIT",
   "publishConfig": {
@@ -93,6 +93,16 @@
         "default": "./dist/avatar/index.cjs"
       }
     },
+    "./backdrop": {
+      "import": {
+        "types": "./dist/backdrop/index.d.ts",
+        "default": "./dist/backdrop/index.js"
+      },
+      "require": {
+        "types": "./dist/backdrop/index.d.cts",
+        "default": "./dist/backdrop/index.cjs"
+      }
+    },
     "./badge": {
       "import": {
         "types": "./dist/badge/index.d.ts",
@@ -193,6 +203,16 @@
         "default": "./dist/checkbox-group/index.cjs"
       }
     },
+    "./chip": {
+      "import": {
+        "types": "./dist/chip/index.d.ts",
+        "default": "./dist/chip/index.js"
+      },
+      "require": {
+        "types": "./dist/chip/index.d.cts",
+        "default": "./dist/chip/index.cjs"
+      }
+    },
     "./clipboard": {
       "import": {
         "types": "./dist/clipboard/index.d.ts",
@@ -263,6 +283,26 @@
         "default": "./dist/date-picker/index.cjs"
       }
     },
+    "./date-range-picker": {
+      "import": {
+        "types": "./dist/date-range-picker/index.d.ts",
+        "default": "./dist/date-range-picker/index.js"
+      },
+      "require": {
+        "types": "./dist/date-range-picker/index.d.cts",
+        "default": "./dist/date-range-picker/index.cjs"
+      }
+    },
+    "./date-time-picker": {
+      "import": {
+        "types": "./dist/date-time-picker/index.d.ts",
+        "default": "./dist/date-time-picker/index.js"
+      },
+      "require": {
+        "types": "./dist/date-time-picker/index.d.cts",
+        "default": "./dist/date-time-picker/index.cjs"
+      }
+    },
     "./dialog": {
       "import": {
         "types": "./dist/dialog/index.d.ts",
@@ -303,6 +343,16 @@
         "default": "./dist/editable/index.cjs"
       }
     },
+    "./fab": {
+      "import": {
+        "types": "./dist/fab/index.d.ts",
+        "default": "./dist/fab/index.js"
+      },
+      "require": {
+        "types": "./dist/fab/index.d.cts",
+        "default": "./dist/fab/index.cjs"
+      }
+    },
     "./field": {
       "import": {
         "types": "./dist/field/index.d.ts",
@@ -343,6 +393,26 @@
         "default": "./dist/form/index.cjs"
       }
     },
+    "./gauge": {
+      "import": {
+        "types": "./dist/gauge/index.d.ts",
+        "default": "./dist/gauge/index.js"
+      },
+      "require": {
+        "types": "./dist/gauge/index.d.cts",
+        "default": "./dist/gauge/index.cjs"
+      }
+    },
+    "./grid": {
+      "import": {
+        "types": "./dist/grid/index.d.ts",
+        "default": "./dist/grid/index.js"
+      },
+      "require": {
+        "types": "./dist/grid/index.d.cts",
+        "default": "./dist/grid/index.cjs"
+      }
+    },
     "./heading": {
       "import": {
         "types": "./dist/heading/index.d.ts",
@@ -483,6 +553,16 @@
         "default": "./dist/pagination/index.cjs"
       }
     },
+    "./paper": {
+      "import": {
+        "types": "./dist/paper/index.d.ts",
+        "default": "./dist/paper/index.js"
+      },
+      "require": {
+        "types": "./dist/paper/index.d.cts",
+        "default": "./dist/paper/index.cjs"
+      }
+    },
     "./password-input": {
       "import": {
         "types": "./dist/password-input/index.d.ts",
@@ -643,6 +723,16 @@
         "default": "./dist/split-button/index.cjs"
       }
     },
+    "./stack": {
+      "import": {
+        "types": "./dist/stack/index.d.ts",
+        "default": "./dist/stack/index.js"
+      },
+      "require": {
+        "types": "./dist/stack/index.d.cts",
+        "default": "./dist/stack/index.cjs"
+      }
+    },
     "./stepper": {
       "import": {
         "types": "./dist/stepper/index.d.ts",
@@ -803,6 +893,16 @@
         "default": "./dist/toolbar/index.cjs"
       }
     },
+    "./tooltip": {
+      "import": {
+        "types": "./dist/tooltip/index.d.ts",
+        "default": "./dist/tooltip/index.js"
+      },
+      "require": {
+        "types": "./dist/tooltip/index.d.cts",
+        "default": "./dist/tooltip/index.cjs"
+      }
+    },
     "./tour": {
       "import": {
         "types": "./dist/tour/index.d.ts",
@@ -1498,7 +1598,7 @@
     "vitest": "^4.1.10",
     "vue": "^3.5.39",
     "vue-tsc": "^2.0.0",
-    "@skdx/shared": "0.30.0"
+    "@skdx/shared": "0.32.0"
   },
   "scripts": {
     "lint": "eslint . --cache --cache-location node_modules/.cache/eslint/",