@skdx/vue 0.27.0 → 0.29.0

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

@@ -0,0 +1,248 @@
+/** 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. */
+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. */
+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 to the root on 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. */
+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. */
+export declare const FIELD_CHARACTER_COUNT_ATTRIBUTE = "data-skdx-field-character-count";
+/** Marks a Field whose async validator is still running. */
+export declare const FIELD_PENDING_ATTRIBUTE = "data-skdx-field-pending";
+/** Marks the re-dispatched submit after async validators have settled. */
+export declare const FIELD_RESUBMIT_ATTRIBUTE = "data-skdx-field-resubmit";
+/** Marks a FormField root, allowing error summary to list both Field and FormField failures. */
+export declare const FORM_FIELD_ATTRIBUTE = "data-skdx-form-field";
+/** Marks a rendered FormMessage so the error summary shows the user's displayed message. */
+export declare const FORM_MESSAGE_ATTRIBUTE = "data-skdx-form-message";
+/** Events a Form ErrorSummary should re-scan on. */
+export declare const ERROR_SUMMARY_RESCAN_EVENTS: readonly ["validity-change", "invalid", "change", "blur"];
+/** Marks a Form's ErrorSummary so the engine knows whether to suppress the Field's own announcement. */
+export declare const FIELD_ERROR_SUMMARY_ATTRIBUTE = "data-skdx-error-summary";
+/** Delay in milliseconds before character count announces remaining count. */
+export declare const CHARACTER_COUNT_ANNOUNCE_DELAY_MS = 1000;
+/** What a Field's character count is configured with. */
+export interface FieldCharacterCountOptions {
+    /** The soft limit, not the native `maxlength` which truncates silently. */
+    maxLength: number;
+    /**
+     * Percentage of `maxLength` before the count appears; `0` shows it immediately.
+     * @default 0
+     */
+    threshold?: number | undefined;
+}
+/** Default count message; negative 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;
+/** Fallback message when native constraint validation has no `validationMessage`. */
+export declare const NATIVE_INVALID_FALLBACK_MESSAGE = "This field is invalid.";
+/** Marks an element as this Field's control, an escape hatch for composites in shadow DOM. */
+export declare const FIELD_CONTROL_ATTRIBUTE = "data-skdx-field-control";
+/** Selector to find a Field's control, matching first in document order. */
+export declare const FIELD_CONTROL_SELECTOR: string;
+/** Marks a Field's required indicator for styling and assertion verification. */
+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;
+    /** The value has been edited at least once. */
+    dirty: boolean;
+    /** The control currently holds a value. */
+    filled: boolean;
+    /** Length of the control's value, tracked only while a character count is configured. */
+    count: number;
+    /** The discovered control's live `ValidityState`, or `null` when none; compared by identity to detect swaps. */
+    validity: ValidityState | null;
+}
+/** The props the framework layer forwards into the controller on every render. */
+export interface FieldControllerProps {
+    /** See {@link FieldValidator}. */
+    validate?: FieldValidator | undefined;
+    /**
+     * When validation first runs; re-validates on input after any failure.
+     * @default 'blur'
+     */
+    mode?: FieldMode | undefined;
+    /** Server-injected errors, always shown, listed before anything `validate` produces. */
+    errors?: string | string[] | undefined;
+    /** Value handed to `validate`; `undefined` reads it off the control instead. */
+    value?: unknown;
+    /** Field name, used as the error-summary link text when no error element is rendered. */
+    name?: string | undefined;
+    /**
+     * Whether an answer is mandatory, reflected as native `required` or `aria-required="true"`.
+     * @default undefined — not required.
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the field is unavailable, applied as native `disabled` or `aria-disabled="true"`.
+     * @default undefined — not disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Formats the character-count message; negative `remaining` means over-limit.
+     * @default undefined — {@link characterCountMessage}'s English wording.
+     */
+    getCharacterCountMessage?: ((remaining: number) => string) | undefined;
+    /**
+     * Fallback message when native constraint validation fails without a message.
+     * @default undefined — 'This field is invalid.'
+     */
+    invalidMessage?: string | undefined;
+    /**
+     * Delay in milliseconds before `change` mode validates; `0` validates every keystroke.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number | undefined;
+}
+/** Everything the controller needs that the framework layer owns. */
+export interface FieldControllerOptions {
+    /** Id of the Label element, used for a group's `aria-labelledby`. */
+    labelId: string;
+    /** Id of the Description element. */
+    descriptionId: string;
+    /** Id of the Error element. */
+    errorId: string;
+    /** Fallback id assigned to a control that has none of its own. */
+    controlId: string;
+    /** True for fieldsets where Label is legend and control uses aria-labelledby. */
+    grouped: boolean;
+    /** Called whenever the snapshot changes, so the framework layer can re-render. */
+    onSnapshotChange: (snapshot: FieldSnapshot) => void;
+    /** Announces messages to the live region with politeness picked per message. */
+    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. */
+export declare function findFieldControl(root: Element): HTMLElement | null;
+/** Reads the current value from a control, checking checked state, value property, or hidden input. */
+export declare function readControlValue(control: HTMLElement | null): unknown;
+/** Whether a value counts as entered, for `data-filled`. */
+export declare function isFilled(value: unknown): boolean;
+/** One failing field, as listed by a Form's ErrorSummary. */
+export interface FieldErrorEntry {
+    /** The control's id — the link's `href` target. */
+    id: string;
+    /** The message shown as the link text. */
+    message: string;
+}
+/** Returns the form or skdx-form a summary should scan, falling back to its parent. */
+export declare function errorSummaryScope(root: Element): Element;
+/** Returns all currently-failing fields in scope, in document order. */
+export declare function collectFieldErrors(scope: ParentNode): FieldErrorEntry[];
+/** Runs all Fields in scope without short-circuiting, so all errors appear in ErrorSummary. */
+export declare function validateFields(scope: ParentNode): Promise<boolean>;
+/** Resets every Field's state when the form is reset, clearing messages and interaction flags. */
+export declare function resetFields(scope: ParentNode): void;
+/** Sends focus to a failing field, or to the first control inside a group. */
+export declare function focusFieldTarget(id: string, doc?: Document): void;
+/** Owns one Field's state machine, connected to its root element and re-synced on every render. */
+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;
+    /** The `aria-labelledby` the consumer put on the control themselves, preserved across rewrites. */
+    private baseLabelledBy;
+    /** Whether this controller wrote aria-labelledby; only we may withdraw it. */
+    private wroteLabelledBy;
+    /** Whether this controller wrote required/disabled; only we may withdraw them. */
+    private wroteRequired;
+    private wroteDisabled;
+    private wroteGroupDisabled;
+    /** Bumped on every validation run; a resolution from a superseded run is discarded. */
+    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;
+    /** Pending {@link FieldControllerProps.validationDebounceTime} run, cancelled by the next keystroke or a blur. */
+    private validationTimer;
+    /** Whether a submit is waiting on this Field's async validator to settle. */
+    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. */
+    setProps(props: FieldControllerProps): void;
+    /** Registers or clears the character count configuration. */
+    setCharacterCount(options: FieldCharacterCountOptions | null): void;
+    /** Length of the control's current value; `0` when it holds something that is not text. */
+    private readCount;
+    /** The count copy, in the consumer's wording when they supplied one. */
+    private countMessage;
+    /** True once the value is longer than the configured soft limit. */
+    private isOverLimit;
+    /** Composes errors: server errors, validation results, then over-limit message. */
+    private composeErrors;
+    /** Announces the count politely one pause after the last keystroke, or assertively on over-limit. */
+    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 injected attributes. */
+    sync(): void;
+    private applyDescribedBy;
+    private applyLabelledBy;
+    /** Sets required and disabled on control using native attributes or ARIA as appropriate. */
+    private applyConstraintState;
+    /** A group container needs its radios disabled individually; only undo what this controller set. */
+    private applyGroupDisabled;
+    /** Runs validation now, resolving to whether the field is valid. */
+    validate(): Promise<boolean>;
+    /** Resets the field to mount state and bumps the token to cancel any async validation run. */
+    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;
+    /** Runs validation, returning messages synchronously for sync validators. */
+    private runValidation;
+    private commit;
+    private update;
+    private readonly handleInput;
+    /** Runs validator with debounce in change mode, immediately in blur/submit mode. */
+    private scheduleValidation;
+    /** Whether this Field's form has an ErrorSummary; queried per submit since it renders conditionally. */
+    private hasErrorSummary;
+    private readonly handleFocusOut;
+    /** Whether this submit is the re-dispatch from {@link resubmitIfSettled}, which must not re-run validators. */
+    private isEngineResubmit;
+    private readonly handleSubmit;
+    /** Re-dispatches submit once all async validators have settled, avoiding loops via FIELD_RESUBMIT_ATTRIBUTE. */
+    private resubmitIfSettled;
+}

package/dist/utils/field-core.js

@@ -0,0 +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};

package/dist/utils/focus-targets.cjs

@@ -0,0 +1 @@
+const s=require("./tabbable.cjs"),o=require("./dismissal.cjs");var f={Dialog:"the Cancel button when present, then the first tabbable element, then the panel itself",Drawer:"the first tabbable element, then the panel itself",Popover:"the first tabbable element, then the panel itself"},d={Dialog:"[data-skdx-dialog-cancel]"},p={Dialog:"the dialog panel",Drawer:"the drawer panel",Popover:"the popover panel"};function u(e,n,t,r){if(!n)return null;let l;try{l=e.querySelector(n)}catch{return console.warn(`[skdx] ${r}: ${t}="${n}" is not a valid CSS selector. Falling back to the default focus target.`),null}return l||console.warn(t==="initialFocus"?`[skdx] ${r}: initialFocus="${n}" matched no element inside ${p[r]}. Falling back to ${f[r]}.`:`[skdx] ${r}: finalFocus="${n}" matched no element in the document. Falling back to the element that was focused before it opened.`),l}function h(e,n){const t=d[n];return t?e.querySelector(t):null}function c(e,n,t){const r=u(e,n,"initialFocus",t)??h(e,t);if(r){r.focus({preventScroll:!0});return}if(e.contains(document.activeElement))return;const l=e.querySelector(s.TABBABLE_SELECTOR)??e;l===e&&e.tabIndex<0&&(e.tabIndex=-1),l.focus?.({preventScroll:!0})}function i(e,n){const t=u(document,e,"finalFocus",n);return t?(t.focus({preventScroll:!0}),!0):!1}function F(e,n,t,r,l){const a=document.activeElement;return o.autoFocusEvent("open-auto-focus",r)?(c(e,n,t),!0):(document.activeElement===a&&l?.isConnected&&e.contains(a)&&l.focus({preventScroll:!0}),!1)}function b(e,n,t,r){return o.autoFocusEvent("close-auto-focus",r)?i(e,n)?!0:!t?.isConnected||t===document.body||t===document.documentElement?!1:(t.focus({preventScroll:!0}),!0):!1}exports.applyFinalFocus=i;exports.applyInitialFocus=c;exports.applyOpenAutoFocus=F;exports.resolveFocusSelector=u;exports.returnFocus=b;

package/dist/utils/focus-targets.d.cts

@@ -0,0 +1,77 @@
+import { type AutoFocusEvent } from './dismissal.cjs';
+/**
+ * Resolution of initialFocus/finalFocus selectors for overlay families
+ * (Dialog, Drawer, Popover). Uses CSS selector strings (not
+ * element handles) so members survive as attributes on `<skdx-*-content>` —
+ * a DOM node cannot cross HTML attribute boundaries.
+ *
+ * A miss falls back to the overlay's automatic target (the whole point).
+ * Wrong selectors warn on console even in production (a selector pointing at
+ * nothing is a defect regardless).
+ * @internal
+ */
+export type FocusTargetFamily = 'Dialog' | 'Drawer' | 'Popover';
+/**
+ * Resolves one focus-target selector against `root`, or returns `null` and
+ * warns when it names nothing.
+ *
+ * @param root Content for `initialFocus` (the target is part of the panel by
+ * definition, and a loose selector must not reach into the page behind it), the
+ * document for `finalFocus` (whose target is outside Content by definition).
+ * @internal
+ */
+export declare function resolveFocusSelector(root: ParentNode, selector: string | undefined, prop: 'initialFocus' | 'finalFocus', family: FocusTargetFamily): HTMLElement | null;
+/**
+ * Element initial focus should land on inside content: the selector's match or
+ * the default (a Cancel part when present, then first tabbable, then panel).
+ * @internal
+ */
+export declare function initialFocusTarget(content: HTMLElement, selector: string | undefined, family: FocusTargetFamily): HTMLElement;
+/**
+ * Places initial focus for a native `<dialog>` after `showModal()`: the selector's match, then the family's own
+ * default target, else — unless the platform already focused inside the panel — the first tabbable, then the panel itself.
+ * @internal
+ */
+export declare function applyInitialFocus(content: HTMLElement, selector: string | undefined, family: FocusTargetFamily): void;
+/**
+ * Sends focus where finalFocus names, resolved at document level (panel is
+ * closing and the opening element may be gone). Returns whether focus was placed.
+ * @internal
+ */
+export declare function applyFinalFocus(selector: string | undefined, family: FocusTargetFamily): boolean;
+/**
+ * The open-time focus move under its veto: `open-auto-focus` fires *before*
+ * anything moves, so a consumer preventing it keeps focus where the user left
+ * it. A native `<dialog>` is the exception — `showModal()` has already moved
+ * focus into the panel by the time any handler can run, so a veto has to put it
+ * back rather than merely decline to move it. A veto that places focus itself is the
+ * documented way to take initial focus over, so that undo only runs when the handler
+ * left focus where the platform put it.
+ *
+ * @param content the overlay panel
+ * @param selector the `initialFocus` selector, or `undefined` for the default chain
+ * @param family which overlay family, for the console warning a missed selector prints
+ * @param handler the consumer's `open-auto-focus` handler
+ * @param previouslyFocused what had focus before the platform moved it, for the undo
+ * @returns whether focus was placed inside the panel
+ * @internal
+ */
+export declare function applyOpenAutoFocus(content: HTMLElement, selector: string | undefined, family: FocusTargetFamily, handler?: (event: AutoFocusEvent) => void, previouslyFocused?: HTMLElement | null): boolean;
+/**
+ * The close-time focus return, run on every close route (Escape, outside press,
+ * the close button, a controlled `open` flipping) so focus never strands on a
+ * panel that is going away. `close-auto-focus` fires *before* the move, and a
+ * veto leaves focus alone; otherwise `finalFocus` wins, and the element that
+ * opened the overlay is the fallback — skipped when it has left the document,
+ * since focusing a detached node silently drops focus onto `<body>`, and skipped
+ * when it *is* `<body>` or `<html>`, which means nothing was focused when the
+ * overlay opened rather than that the page root should take focus.
+ *
+ * @param selector the `finalFocus` selector, or `undefined` to go straight to the opener
+ * @param family which overlay family, for the console warning a missed selector prints
+ * @param opener the element focused before the overlay opened
+ * @param handler the consumer's `close-auto-focus` handler
+ * @returns whether focus was placed
+ * @internal
+ */
+export declare function returnFocus(selector: string | undefined, family: FocusTargetFamily, opener: HTMLElement | null | undefined, handler?: (event: AutoFocusEvent) => void): boolean;

package/dist/utils/focus-targets.d.ts

@@ -0,0 +1,77 @@
+import { type AutoFocusEvent } from './dismissal.js';
+/**
+ * Resolution of initialFocus/finalFocus selectors for overlay families
+ * (Dialog, Drawer, Popover). Uses CSS selector strings (not
+ * element handles) so members survive as attributes on `<skdx-*-content>` —
+ * a DOM node cannot cross HTML attribute boundaries.
+ *
+ * A miss falls back to the overlay's automatic target (the whole point).
+ * Wrong selectors warn on console even in production (a selector pointing at
+ * nothing is a defect regardless).
+ * @internal
+ */
+export type FocusTargetFamily = 'Dialog' | 'Drawer' | 'Popover';
+/**
+ * Resolves one focus-target selector against `root`, or returns `null` and
+ * warns when it names nothing.
+ *
+ * @param root Content for `initialFocus` (the target is part of the panel by
+ * definition, and a loose selector must not reach into the page behind it), the
+ * document for `finalFocus` (whose target is outside Content by definition).
+ * @internal
+ */
+export declare function resolveFocusSelector(root: ParentNode, selector: string | undefined, prop: 'initialFocus' | 'finalFocus', family: FocusTargetFamily): HTMLElement | null;
+/**
+ * Element initial focus should land on inside content: the selector's match or
+ * the default (a Cancel part when present, then first tabbable, then panel).
+ * @internal
+ */
+export declare function initialFocusTarget(content: HTMLElement, selector: string | undefined, family: FocusTargetFamily): HTMLElement;
+/**
+ * Places initial focus for a native `<dialog>` after `showModal()`: the selector's match, then the family's own
+ * default target, else — unless the platform already focused inside the panel — the first tabbable, then the panel itself.
+ * @internal
+ */
+export declare function applyInitialFocus(content: HTMLElement, selector: string | undefined, family: FocusTargetFamily): void;
+/**
+ * Sends focus where finalFocus names, resolved at document level (panel is
+ * closing and the opening element may be gone). Returns whether focus was placed.
+ * @internal
+ */
+export declare function applyFinalFocus(selector: string | undefined, family: FocusTargetFamily): boolean;
+/**
+ * The open-time focus move under its veto: `open-auto-focus` fires *before*
+ * anything moves, so a consumer preventing it keeps focus where the user left
+ * it. A native `<dialog>` is the exception — `showModal()` has already moved
+ * focus into the panel by the time any handler can run, so a veto has to put it
+ * back rather than merely decline to move it. A veto that places focus itself is the
+ * documented way to take initial focus over, so that undo only runs when the handler
+ * left focus where the platform put it.
+ *
+ * @param content the overlay panel
+ * @param selector the `initialFocus` selector, or `undefined` for the default chain
+ * @param family which overlay family, for the console warning a missed selector prints
+ * @param handler the consumer's `open-auto-focus` handler
+ * @param previouslyFocused what had focus before the platform moved it, for the undo
+ * @returns whether focus was placed inside the panel
+ * @internal
+ */
+export declare function applyOpenAutoFocus(content: HTMLElement, selector: string | undefined, family: FocusTargetFamily, handler?: (event: AutoFocusEvent) => void, previouslyFocused?: HTMLElement | null): boolean;
+/**
+ * The close-time focus return, run on every close route (Escape, outside press,
+ * the close button, a controlled `open` flipping) so focus never strands on a
+ * panel that is going away. `close-auto-focus` fires *before* the move, and a
+ * veto leaves focus alone; otherwise `finalFocus` wins, and the element that
+ * opened the overlay is the fallback — skipped when it has left the document,
+ * since focusing a detached node silently drops focus onto `<body>`, and skipped
+ * when it *is* `<body>` or `<html>`, which means nothing was focused when the
+ * overlay opened rather than that the page root should take focus.
+ *
+ * @param selector the `finalFocus` selector, or `undefined` to go straight to the opener
+ * @param family which overlay family, for the console warning a missed selector prints
+ * @param opener the element focused before the overlay opened
+ * @param handler the consumer's `close-auto-focus` handler
+ * @returns whether focus was placed
+ * @internal
+ */
+export declare function returnFocus(selector: string | undefined, family: FocusTargetFamily, opener: HTMLElement | null | undefined, handler?: (event: AutoFocusEvent) => void): boolean;

package/dist/utils/focus-targets.js

@@ -0,0 +1 @@
+import{TABBABLE_SELECTOR as e}from"./tabbable.js";import{autoFocusEvent as t}from"./dismissal.js";var n={Dialog:"the Cancel button when present, then the first tabbable element, then the panel itself",Drawer:"the first tabbable element, then the panel itself",Popover:"the first tabbable element, then the panel itself"},o={Dialog:"[data-skdx-dialog-cancel]"},l={Dialog:"the dialog panel",Drawer:"the drawer panel",Popover:"the popover panel"};function a(e,t,o,a){if(!t)return null;let c;try{c=e.querySelector(t)}catch{return console.warn(`[skdx] ${a}: ${o}="${t}" is not a valid CSS selector. Falling back to the default focus target.`),null}return c||console.warn("initialFocus"===o?`[skdx] ${a}: initialFocus="${t}" matched no element inside ${l[a]}. Falling back to ${n[a]}.`:`[skdx] ${a}: finalFocus="${t}" matched no element in the document. Falling back to the element that was focused before it opened.`),c}function c(t,n,l){const c=a(t,n,"initialFocus",l)??function(e,t){const n=o[t];return n?e.querySelector(n):null}(t,l);if(c)return void c.focus({preventScroll:!0});if(t.contains(document.activeElement))return;const r=t.querySelector(e)??t;r===t&&t.tabIndex<0&&(t.tabIndex=-1),r.focus?.({preventScroll:!0})}function r(e,t){const n=a(document,e,"finalFocus",t);return!!n&&(n.focus({preventScroll:!0}),!0)}function s(e,n,o,l,a){const r=document.activeElement;return t("open-auto-focus",l)?(c(e,n,o),!0):(document.activeElement===r&&a?.isConnected&&e.contains(r)&&a.focus({preventScroll:!0}),!1)}function u(e,n,o,l){return!(!t("close-auto-focus",l)||!r(e,n)&&(!o?.isConnected||o===document.body||o===document.documentElement||(o.focus({preventScroll:!0}),0)))}export{r as applyFinalFocus,c as applyInitialFocus,s as applyOpenAutoFocus,a as resolveFocusSelector,u as returnFocus};

package/dist/utils/format-file-size.cjs

@@ -0,0 +1 @@
+var i=["byte","kilobyte","megabyte","gigabyte","terabyte"];function r(a,n){let t=a,e=0;for(;t>=1e3&&e<i.length-1;)t/=1e3,e+=1;return new Intl.NumberFormat(n,{style:"unit",unit:i[e],unitDisplay:"narrow",maximumFractionDigits:1}).format(t)}exports.formatFileSize=r;

package/dist/utils/format-file-size.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Formats a byte count as short, localised, readable text — `999B`, `1.5kB`,
+ * `1.2MB` — for a FileUpload file row.
+ *
+ * @param bytes - A `File.size`, in bytes.
+ * @param locale - BCP 47 tag, or omitted for the runtime's own locale.
+ * @returns The formatted size, e.g. `'1.5kB'`.
+ */
+export declare function formatFileSize(bytes: number, locale?: string): string;

package/dist/utils/format-file-size.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Formats a byte count as short, localised, readable text — `999B`, `1.5kB`,
+ * `1.2MB` — for a FileUpload file row.
+ *
+ * @param bytes - A `File.size`, in bytes.
+ * @param locale - BCP 47 tag, or omitted for the runtime's own locale.
+ * @returns The formatted size, e.g. `'1.5kB'`.
+ */
+export declare function formatFileSize(bytes: number, locale?: string): string;

package/dist/utils/format-file-size.js

@@ -0,0 +1 @@
+var t=["byte","kilobyte","megabyte","gigabyte","terabyte"];function e(e,i){let r=e,a=0;for(;r>=1e3&&a<t.length-1;)r/=1e3,a+=1;return new Intl.NumberFormat(i,{style:"unit",unit:t[a],unitDisplay:"narrow",maximumFractionDigits:1}).format(r)}export{e as formatFileSize};

package/dist/utils/glyph-data.cjs

@@ -0,0 +1 @@
+var h=1.5,l=(r,e="0 0 16 16")=>({viewBox:e,d:r,fill:!1}),M=(r,e="0 0 16 16")=>({viewBox:e,d:r,fill:!0}),a={check:l("M3 8.5l3 3 7-7"),dash:l("M4 8h8"),close:l("M4 4l8 8M12 4l-8 8"),dot:M("M8 5a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"),star:M("M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z","0 0 20 20"),"chevron-down":l("M4 6l4 4 4-4"),"chevron-right":l("M6 4l4 4-4 4"),"chevron-left":l("M10 4l-4 4 4 4"),"arrow-right":l("M3 8h10M9 4l4 4-4 4"),"arrow-left":l("M13 8H3M7 4L3 8l4 4"),"chevrons-right":l("M3 4l4 4-4 4M9 4l4 4-4 4"),"chevrons-left":l("M13 4L9 8l4 4M7 4L3 8l4 4"),play:M("M5 3.5l7 4.5-7 4.5z"),pause:M("M4.5 3h2.5v10H4.5zM9 3h2.5v10H9z")};exports.GLYPHS=a;exports.GLYPH_STROKE_WIDTH=h;

package/dist/utils/glyph-data.d.cts

@@ -0,0 +1,13 @@
+/** A built-in glyph name. */
+export type GlyphName = 'check' | 'dash' | 'close' | 'dot' | 'star' | 'chevron-down' | 'chevron-right' | 'chevron-left' | 'arrow-right' | 'arrow-left' | 'chevrons-right' | 'chevrons-left' | 'play' | 'pause';
+/** The shape behind a {@link GlyphName}. */
+export interface Glyph {
+    viewBox: string;
+    d: string;
+    /** Filled with currentColor rather than stroked. */
+    fill: boolean;
+}
+/** Stroke width every stroked glyph is drawn at. */
+export declare const GLYPH_STROKE_WIDTH = 1.5;
+/** Every built-in glyph, keyed by name. */
+export declare const GLYPHS: Record<GlyphName, Glyph>;

package/dist/utils/glyph-data.d.ts

@@ -0,0 +1,13 @@
+/** A built-in glyph name. */
+export type GlyphName = 'check' | 'dash' | 'close' | 'dot' | 'star' | 'chevron-down' | 'chevron-right' | 'chevron-left' | 'arrow-right' | 'arrow-left' | 'chevrons-right' | 'chevrons-left' | 'play' | 'pause';
+/** The shape behind a {@link GlyphName}. */
+export interface Glyph {
+    viewBox: string;
+    d: string;
+    /** Filled with currentColor rather than stroked. */
+    fill: boolean;
+}
+/** Stroke width every stroked glyph is drawn at. */
+export declare const GLYPH_STROKE_WIDTH = 1.5;
+/** Every built-in glyph, keyed by name. */
+export declare const GLYPHS: Record<GlyphName, Glyph>;

package/dist/utils/glyph-data.js

@@ -0,0 +1 @@
+var l=1.5,M=(l,M="0 0 16 16")=>({viewBox:M,d:l,fill:!1}),r=(l,M="0 0 16 16")=>({viewBox:M,d:l,fill:!0}),e={check:M("M3 8.5l3 3 7-7"),dash:M("M4 8h8"),close:M("M4 4l8 8M12 4l-8 8"),dot:r("M8 5a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"),star:r("M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z","0 0 20 20"),"chevron-down":M("M4 6l4 4 4-4"),"chevron-right":M("M6 4l4 4-4 4"),"chevron-left":M("M10 4l-4 4 4 4"),"arrow-right":M("M3 8h10M9 4l4 4-4 4"),"arrow-left":M("M13 8H3M7 4L3 8l4 4"),"chevrons-right":M("M3 4l4 4-4 4M9 4l4 4-4 4"),"chevrons-left":M("M13 4L9 8l4 4M7 4L3 8l4 4"),play:r("M5 3.5l7 4.5-7 4.5z"),pause:r("M4.5 3h2.5v10H4.5zM9 3h2.5v10H9z")};export{e as GLYPHS,l as GLYPH_STROKE_WIDTH};

package/dist/utils/id.d.cts

@@ -1,24 +1,4 @@
-/**
- * @internal `useId()` where the running Vue has it (3.5+), otherwise undefined.
- *
- * The namespace import is deliberate: a named `useId` import would fail to
- * resolve on Vue 3.3/3.4 — inside the declared peer range — instead of
- * degrading. Only valid during `setup()`.
- */
+/** @internal Vue's `useId()` if available (3.5+), else undefined; only valid during `setup()`. */
 export declare function stableUid(): string | undefined;
-/**
- * @internal Generates a unique id like `skdx-<prefix>-<n>` for internal DOM
- * wiring (aria-*, htmlFor, etc.). Must be called during `setup()`.
- *
- * The tail comes from Vue 3.5's `useId()`, which yields the same value on the
- * server and on the client. The module-level counter cannot: it is a process
- * singleton, so in a long-lived Node server the second request emits
- * `skdx-tabs-4711` where the freshly-loaded client bundle emits `skdx-tabs-1` on
- * hydrate — both renders succeed, and every `aria-labelledby`/`for` written on
- * the server silently points at nothing. The counter stays as the fallback for
- * the 3.3/3.4 peer floor, where nothing was SSR-stable to begin with.
- *
- * ponytail: two Vue apps on one page both default `useId()` to the `v` prefix
- * and could collide; set `app.config.idPrefix` per app if that ever happens.
- */
+/** @internal Generates a unique id like `skdx-<prefix>-<n>` for internal DOM wiring; must be called during `setup()`. */
 export declare function nextId(prefix: string): string;

package/dist/utils/id.d.ts

@@ -1,24 +1,4 @@
-/**
- * @internal `useId()` where the running Vue has it (3.5+), otherwise undefined.
- *
- * The namespace import is deliberate: a named `useId` import would fail to
- * resolve on Vue 3.3/3.4 — inside the declared peer range — instead of
- * degrading. Only valid during `setup()`.
- */
+/** @internal Vue's `useId()` if available (3.5+), else undefined; only valid during `setup()`. */
 export declare function stableUid(): string | undefined;
-/**
- * @internal Generates a unique id like `skdx-<prefix>-<n>` for internal DOM
- * wiring (aria-*, htmlFor, etc.). Must be called during `setup()`.
- *
- * The tail comes from Vue 3.5's `useId()`, which yields the same value on the
- * server and on the client. The module-level counter cannot: it is a process
- * singleton, so in a long-lived Node server the second request emits
- * `skdx-tabs-4711` where the freshly-loaded client bundle emits `skdx-tabs-1` on
- * hydrate — both renders succeed, and every `aria-labelledby`/`for` written on
- * the server silently points at nothing. The counter stays as the fallback for
- * the 3.3/3.4 peer floor, where nothing was SSR-stable to begin with.
- *
- * ponytail: two Vue apps on one page both default `useId()` to the `v` prefix
- * and could collide; set `app.config.idPrefix` per app if that ever happens.
- */
+/** @internal Generates a unique id like `skdx-<prefix>-<n>` for internal DOM wiring; must be called during `setup()`. */
 export declare function nextId(prefix: string): string;

package/dist/utils/injectRequired.cjs

@@ -0,0 +1 @@
+let n=require("vue");function i(r,t){const e=(0,n.inject)(r);if(!e)throw new Error(t);return e}exports.injectRequired=i;

package/dist/utils/injectRequired.d.cts

@@ -0,0 +1,8 @@
+import { type InjectionKey } from 'vue';
+/**
+ * @internal Injects a context a part cannot work without, throwing `message` when the part renders outside its root.
+ *
+ * @param key the injection key its root provides
+ * @param message the error thrown when nothing provided that key
+ */
+export declare function injectRequired<T>(key: InjectionKey<T>, message: string): T;

package/dist/utils/injectRequired.d.ts

@@ -0,0 +1,8 @@
+import { type InjectionKey } from 'vue';
+/**
+ * @internal Injects a context a part cannot work without, throwing `message` when the part renders outside its root.
+ *
+ * @param key the injection key its root provides
+ * @param message the error thrown when nothing provided that key
+ */
+export declare function injectRequired<T>(key: InjectionKey<T>, message: string): T;

package/dist/utils/injectRequired.js

@@ -0,0 +1 @@
+import{inject as r}from"vue";function e(e,t){const n=r(e);if(!n)throw new Error(t);return n}export{e as injectRequired};

package/dist/utils/liveAnnouncer.cjs

@@ -1 +1 @@
-var u=150,a="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;",r=new Map;function d(n){const o=r.get(n);if(o?.node.isConnected)return o;const e=document.createElement("div");e.setAttribute("aria-live",n),e.setAttribute("aria-atomic","true"),e.setAttribute("data-skdx-live-announcer",n),e.style.cssText=a,document.body.appendChild(e);const t={node:e,timer:void 0};return r.set(n,t),t}function i(n,o="polite"){if(typeof document>"u")return;const e=n.trim();if(!e)return;const t=d(o);clearTimeout(t.timer),t.timer=setTimeout(()=>{t.timer=void 0,t.node.textContent!==e&&(t.node.textContent=e)},150)}function c(n){for(const[o,e]of r)n!==void 0&&o!==n||(clearTimeout(e.timer),e.timer=void 0,e.node.textContent="")}var m={announce:i,clear:c};function s(){return m}exports.ANNOUNCE_DEBOUNCE_MS=u;exports.announce=i;exports.clearAnnouncements=c;exports.useLiveAnnouncer=s;
+const c=require("./announcer.cjs");var u=new c.Announcer;function a(){const n=document.querySelectorAll("dialog[open]"),e=n[n.length-1]??document.body;for(const o of document.querySelectorAll("[data-skdx-live-announcer]"))o.parentElement!==e&&e.append(o)}function r(n,e="polite"){u.announce(n,e),typeof document<"u"&&a()}function t(n){u.clear(n)}var i={announce:r,clear:t};function l(){return i}exports.ANNOUNCE_DEBOUNCE_MS=c.ANNOUNCE_DEBOUNCE_MS;exports.announce=r;exports.clearAnnouncements=t;exports.useLiveAnnouncer=l;