@skdx/vue 0.27.0 → 0.28.0

package/dist/editable/EditableTextarea.vue.d.cts

@@ -1,14 +1,7 @@
 /**
- * The multi-line editor for a `SkdxEditable` — a drop-in alternative to
- * `SkdxEditableInput`, never rendered alongside it. Renders nothing outside
- * edit mode, and a controlled `<textarea>` inside it, taking value,
- * `placeholder`, `disabled`, `readOnly`, `required` and `maxLength` from the root.
- *
- * The one behavioural difference is Enter, and it matters: in a multi-line
- * field Enter has to insert a newline, so **Cmd/Ctrl+Enter** submits instead
- * (still gated on `submitMode` including `'enter'`). A plain Enter is left
- * entirely alone. Escape still cancels, and blur still submits under
- * `submitMode` `'blur'`/`'both'`.
+ * Multi-line editor inside SkdxEditable. Controlled textarea with
+ * auto-resize (optional maxRows/minRows). Cmd/Ctrl+Enter submits; Enter
+ * inserts newline. Accessible name required (aria-label/labelledby or label).
  *
  * @example
  * ```vue
@@ -18,6 +11,23 @@
  * </SkdxEditable>
  * ```
  */
-type __VLS_Props = {};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = {
+    /**
+     * Grow to fit content instead of scrolling. @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Cap auto-resize growth (past cap, scrolls). @default undefined
+     */
+    maxRows?: number;
+    /**
+     * Opening size and minimum height for auto-resize growth. @default 2
+     */
+    minRows?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    autoResize: boolean;
+    maxRows: number;
+    minRows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/editable/EditableTextarea.vue.d.ts

@@ -1,14 +1,7 @@
 /**
- * The multi-line editor for a `SkdxEditable` — a drop-in alternative to
- * `SkdxEditableInput`, never rendered alongside it. Renders nothing outside
- * edit mode, and a controlled `<textarea>` inside it, taking value,
- * `placeholder`, `disabled`, `readOnly`, `required` and `maxLength` from the root.
- *
- * The one behavioural difference is Enter, and it matters: in a multi-line
- * field Enter has to insert a newline, so **Cmd/Ctrl+Enter** submits instead
- * (still gated on `submitMode` including `'enter'`). A plain Enter is left
- * entirely alone. Escape still cancels, and blur still submits under
- * `submitMode` `'blur'`/`'both'`.
+ * Multi-line editor inside SkdxEditable. Controlled textarea with
+ * auto-resize (optional maxRows/minRows). Cmd/Ctrl+Enter submits; Enter
+ * inserts newline. Accessible name required (aria-label/labelledby or label).
  *
  * @example
  * ```vue
@@ -18,6 +11,23 @@
  * </SkdxEditable>
  * ```
  */
-type __VLS_Props = {};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = {
+    /**
+     * Grow to fit content instead of scrolling. @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Cap auto-resize growth (past cap, scrolls). @default undefined
+     */
+    maxRows?: number;
+    /**
+     * Opening size and minimum height for auto-resize growth. @default 2
+     */
+    minRows?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    autoResize: boolean;
+    maxRows: number;
+    minRows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/editable/EditableTextarea.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("../utils/reassertValue.cjs"),s=require("./context.cjs");let t=require("vue");var c=["value","placeholder","disabled","readonly","required","maxlength","data-empty"],f=(0,t.defineComponent)({__name:"EditableTextarea",setup(v){const u=(0,t.inject)(s.EDITABLE_CONTEXT);if(!u)throw new Error("<SkdxEditableTextarea> must be used inside <SkdxEditable>.");const e=u;function l(a){const r=a.target;e.setValue(r.value),o.reassertValue(r,()=>e.value.value)}function n(a){if(a.key==="Escape"){a.preventDefault(),e.cancel();return}a.key==="Enter"&&(!a.metaKey&&!a.ctrlKey||e.submitMode.value!=="enter"&&e.submitMode.value!=="both"||(a.preventDefault(),e.submit()))}function i(){(e.submitMode.value==="blur"||e.submitMode.value==="both")&&e.submit()}return(a,r)=>(0,t.unref)(e).editing.value?((0,t.openBlock)(),(0,t.createElementBlock)("textarea",{key:0,class:"skdx-editable__textarea","data-part":"textarea",ref:d=>(0,t.unref)(e).inputRef.value=d,value:(0,t.unref)(e).value.value,placeholder:(0,t.unref)(e).placeholder.value,disabled:(0,t.unref)(e).disabled.value,readonly:(0,t.unref)(e).readOnly.value,required:(0,t.unref)(e).required.value,maxlength:(0,t.unref)(e).maxLength.value,"data-state":"editing","data-empty":(0,t.unref)(e).value.value===""?"":void 0,onInput:l,onKeydown:n,onBlur:i},null,40,c)):(0,t.createCommentVNode)("",!0)}});exports.default=f;
+const y=require("../utils/reassertValue.cjs"),w=require("./context.cjs");let t=require("vue");var _=["id","rows","value","placeholder","disabled","readonly","required","aria-required","aria-invalid","maxlength","data-empty","data-invalid"],R=(0,t.defineComponent)({__name:"EditableTextarea",props:{autoResize:{type:Boolean,default:!1},maxRows:{default:void 0},minRows:{default:2}},setup(l){const u=l,s=(0,t.inject)(w.EDITABLE_CONTEXT);if(!s)throw new Error("<SkdxEditableTextarea> must be used inside <SkdxEditable>.");const e=s,c=(0,t.ref)(null);function v(){const a=c.value;if(!a||!u.autoResize)return;const i=getComputedStyle(a),r=d=>parseFloat(d)||0,f=r(i.borderTopWidth)+r(i.borderBottomWidth),m=r(i.paddingTop)+r(i.paddingBottom),h=i.boxSizing==="border-box",o=r(i.lineHeight),x=d=>d*o+(h?m+f:0);a.style.height="auto";let n=a.scrollHeight+(h?f:-m);u.minRows!=null&&o>0&&(n=Math.max(n,x(u.minRows))),u.maxRows!=null&&o>0&&(n=Math.min(n,x(u.maxRows))),a.style.height=`${n}px`}(0,t.watch)([()=>e.editing.value,()=>e.value.value],async()=>{await(0,t.nextTick)(),v()},{immediate:!0});function b(a){const i=a.target;e.setValue(i.value),v(),y.reassertValue(i,()=>e.value.value)}function p(a){if(a.key==="Escape"){a.preventDefault(),e.cancel();return}a.key==="Enter"&&(!a.metaKey&&!a.ctrlKey||e.submitMode.value!=="enter"&&e.submitMode.value!=="both"||(a.preventDefault(),e.submit()))}function g(){(e.submitMode.value==="blur"||e.submitMode.value==="both")&&e.submit()}return(a,i)=>(0,t.unref)(e).editing.value?((0,t.openBlock)(),(0,t.createElementBlock)("textarea",{key:0,class:"skdx-editable__textarea","data-part":"textarea",ref:r=>{(0,t.unref)(e).inputRef.value=r,c.value=r},id:(0,t.unref)(e).editorId,rows:l.autoResize?void 0:l.minRows,style:(0,t.normalizeStyle)(l.autoResize?{overflow:"hidden",resize:"none"}:void 0),value:(0,t.unref)(e).value.value,placeholder:(0,t.unref)(e).editPlaceholder.value,disabled:(0,t.unref)(e).disabled.value,readonly:(0,t.unref)(e).readOnly.value,required:(0,t.unref)(e).required.value,"aria-required":(0,t.unref)(e).required.value||void 0,"aria-invalid":(0,t.unref)(e).invalid.value||void 0,maxlength:(0,t.unref)(e).maxLength.value,"data-state":"editing","data-empty":(0,t.unref)(e).value.value===""?"":void 0,"data-invalid":(0,t.unref)(e).invalid.value?"":void 0,onInput:b,onKeydown:p,onBlur:g},null,44,_)):(0,t.createCommentVNode)("",!0)}});exports.default=R;

package/dist/editable/EditableTextarea.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{reassertValue as e}from"../utils/reassertValue.js";import{EDITABLE_CONTEXT as a}from"./context.js";import{createCommentVNode as t,createElementBlock as l,defineComponent as u,inject as r,openBlock as n,unref as d}from"vue";var o=["value","placeholder","disabled","readonly","required","maxlength","data-empty"],s=/* @__PURE__ */u({__name:"EditableTextarea",setup(u){const s=r(a);if(!s)throw new Error("<SkdxEditableTextarea> must be used inside <SkdxEditable>.");const i=s;function v(a){const t=a.target;i.setValue(t.value),e(t,()=>i.value.value)}function m(e){if("Escape"===e.key)return e.preventDefault(),void i.cancel();"Enter"===e.key&&(!e.metaKey&&!e.ctrlKey||"enter"!==i.submitMode.value&&"both"!==i.submitMode.value||(e.preventDefault(),i.submit()))}function c(){("blur"===i.submitMode.value||"both"===i.submitMode.value)&&i.submit()}return(e,a)=>d(i).editing.value?(n(),l("textarea",{key:0,class:"skdx-editable__textarea","data-part":"textarea",ref:e=>d(i).inputRef.value=e,value:d(i).value.value,placeholder:d(i).placeholder.value,disabled:d(i).disabled.value,readonly:d(i).readOnly.value,required:d(i).required.value,maxlength:d(i).maxLength.value,"data-state":"editing","data-empty":""===d(i).value.value?"":void 0,onInput:v,onKeydown:m,onBlur:c},null,40,o)):t("",!0)}});export{s as default};
+import{reassertValue as e}from"../utils/reassertValue.js";import{EDITABLE_CONTEXT as a}from"./context.js";import{createCommentVNode as t,createElementBlock as i,defineComponent as l,inject as o,nextTick as d,normalizeStyle as r,openBlock as u,ref as n,unref as s,watch as v}from"vue";var m=["id","rows","value","placeholder","disabled","readonly","required","aria-required","aria-invalid","maxlength","data-empty","data-invalid"],c=/* @__PURE__ */l({__name:"EditableTextarea",props:{autoResize:{type:Boolean,default:!1},maxRows:{default:void 0},minRows:{default:2}},setup(l){const c=l,p=o(a);if(!p)throw new Error("<SkdxEditableTextarea> must be used inside <SkdxEditable>.");const b=p,f=n(null);function h(){const e=f.value;if(!e||!c.autoResize)return;const a=getComputedStyle(e),t=e=>parseFloat(e)||0,i=t(a.borderTopWidth)+t(a.borderBottomWidth),l=t(a.paddingTop)+t(a.paddingBottom),o="border-box"===a.boxSizing,d=t(a.lineHeight),r=e=>e*d+(o?l+i:0);e.style.height="auto";let u=e.scrollHeight+(o?i:-l);null!=c.minRows&&d>0&&(u=Math.max(u,r(c.minRows))),null!=c.maxRows&&d>0&&(u=Math.min(u,r(c.maxRows))),e.style.height=`${u}px`}function x(a){const t=a.target;b.setValue(t.value),h(),e(t,()=>b.value.value)}function y(e){if("Escape"===e.key)return e.preventDefault(),void b.cancel();"Enter"===e.key&&(!e.metaKey&&!e.ctrlKey||"enter"!==b.submitMode.value&&"both"!==b.submitMode.value||(e.preventDefault(),b.submit()))}function g(){("blur"===b.submitMode.value||"both"===b.submitMode.value)&&b.submit()}return v([()=>b.editing.value,()=>b.value.value],async()=>{await d(),h()},{immediate:!0}),(e,a)=>s(b).editing.value?(u(),i("textarea",{key:0,class:"skdx-editable__textarea","data-part":"textarea",ref:e=>{s(b).inputRef.value=e,f.value=e},id:s(b).editorId,rows:l.autoResize?void 0:l.minRows,style:r(l.autoResize?{overflow:"hidden",resize:"none"}:void 0),value:s(b).value.value,placeholder:s(b).editPlaceholder.value,disabled:s(b).disabled.value,readonly:s(b).readOnly.value,required:s(b).required.value,"aria-required":s(b).required.value||void 0,"aria-invalid":s(b).invalid.value||void 0,maxlength:s(b).maxLength.value,"data-state":"editing","data-empty":""===s(b).value.value?"":void 0,"data-invalid":s(b).invalid.value?"":void 0,onInput:x,onKeydown:y,onBlur:g},null,44,m)):t("",!0)}});export{c as default};

package/dist/editable/context.cjs

@@ -1 +1 @@
-var E=Symbol("skdx-editable-context");exports.EDITABLE_CONTEXT=E;
+var t=Symbol("skdx-editable-context");function e(i){return i===void 0?{edit:void 0,preview:void 0}:typeof i=="string"?{edit:i,preview:i}:{edit:i.edit,preview:i.preview}}exports.EDITABLE_CONTEXT=t;exports.splitPlaceholder=e;

package/dist/editable/context.d.cts

@@ -1,35 +1,75 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
 /** The element `SkdxEditableInput` or `SkdxEditableTextarea` renders — whichever one the consumer mounted. */
 export type EditableInputElement = HTMLInputElement | HTMLTextAreaElement;
-/** How interacting with `SkdxEditablePreview` enters edit mode. Keyboard activation (Enter/Space) always works, in every mode. */
-export type EditableActivationMode = 'click' | 'dblclick' | 'focus';
+/**
+ * How to enter edit mode from preview. Enter/Space always work (button tab stop,
+ * can't remove activation on focusable control).
+ */
+export type EditableActivationMode = 'click' | 'dblclick' | 'focus' | 'none';
+/** `value-revert` emit payload. */
+export interface EditableRevertDetail {
+    /** Restored text on screen. */
+    value: string;
+    /**
+     * Draft that was abandoned (only place it exists, enables undo affordance).
+     */
+    previousValue: string;
+}
 /** Which gestures commit the draft. `'none'` leaves committing entirely to `SkdxEditableSubmitTrigger`. */
 export type EditableSubmitMode = 'blur' | 'enter' | 'both' | 'none';
-/** @internal Shared state a `SkdxEditable` provides so its parts can read the draft, the mode, and the transitions. */
+/**
+ * Two placeholder roles: `edit` is a hint (disappears with content),
+ * `preview` is both text and accessible name (reads as a label).
+ * One string does both; object separates them.
+ */
+export interface EditablePlaceholder {
+    /** Editor's `placeholder` (hint, not name). */
+    edit: string;
+    /** Preview's text and accessible name (write as label). */
+    preview: string;
+}
+/** @internal Editable parts share: draft, mode, transitions. */
 export interface EditableContext {
     value: ComputedRef<string>;
     editing: ComputedRef<boolean>;
-    placeholder: ComputedRef<string | undefined>;
+    /** Editor's placeholder (resolved from union). */
+    editPlaceholder: ComputedRef<string | undefined>;
+    /** Preview's placeholder (resolved from union). */
+    previewPlaceholder: ComputedRef<string | undefined>;
     disabled: ComputedRef<boolean>;
     readOnly: ComputedRef<boolean>;
     required: ComputedRef<boolean>;
+    invalid: ComputedRef<boolean>;
     maxLength: ComputedRef<number | undefined>;
     activationMode: ComputedRef<EditableActivationMode>;
     submitMode: ComputedRef<EditableSubmitMode>;
-    /** Set by whichever of `SkdxEditableInput`/`SkdxEditableTextarea` is mounted, so the root can focus it on entering edit mode. */
+    /** Whichever input is mounted (root focuses on enter edit). */
     inputRef: Ref<EditableInputElement | null>;
-    /** Set by `SkdxEditablePreview`, so the root can return focus to it on leaving edit mode. */
+    /** Preview ref (root returns focus on exit edit). */
     previewRef: Ref<HTMLElement | null>;
     /**
-     * True only for the instant the root is programmatically returning focus to
-     * the preview. `activationMode="focus"` reads it to avoid re-entering edit
-     * mode on the focus it just caused — otherwise submitting would loop forever.
+     * Instant root returns focus to preview (`activationMode="focus"` reads it
+     * to avoid re-entering edit loop).
      */
     returningFocus: Ref<boolean>;
+    /** Mounted editor's id (`SkdxEditableLabel` `for` target). */
+    editorId: string;
+    /** Mounted label's id (preview's `aria-labelledby` target). */
+    labelId: string;
+    /** Whether label is mounted (prevents dangling IDREF). */
+    labelPresent: Ref<boolean>;
     setValue: (value: string) => void;
     activate: () => void;
     submit: () => void;
     cancel: () => void;
 }
-/** @internal Injection key a `SkdxEditable` provides so its parts share the draft value, the edit mode, and the transitions. */
+/** @internal Injection key for Editable parts. */
 export declare const EDITABLE_CONTEXT: InjectionKey<EditableContext>;
+/**
+ * @internal Split `placeholder` union into edit and preview strings.
+ * Plain string sets both; object form separates for different roles.
+ */
+export declare function splitPlaceholder(placeholder: string | EditablePlaceholder | undefined): {
+    edit: string | undefined;
+    preview: string | undefined;
+};

package/dist/editable/context.d.ts

@@ -1,35 +1,75 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
 /** The element `SkdxEditableInput` or `SkdxEditableTextarea` renders — whichever one the consumer mounted. */
 export type EditableInputElement = HTMLInputElement | HTMLTextAreaElement;
-/** How interacting with `SkdxEditablePreview` enters edit mode. Keyboard activation (Enter/Space) always works, in every mode. */
-export type EditableActivationMode = 'click' | 'dblclick' | 'focus';
+/**
+ * How to enter edit mode from preview. Enter/Space always work (button tab stop,
+ * can't remove activation on focusable control).
+ */
+export type EditableActivationMode = 'click' | 'dblclick' | 'focus' | 'none';
+/** `value-revert` emit payload. */
+export interface EditableRevertDetail {
+    /** Restored text on screen. */
+    value: string;
+    /**
+     * Draft that was abandoned (only place it exists, enables undo affordance).
+     */
+    previousValue: string;
+}
 /** Which gestures commit the draft. `'none'` leaves committing entirely to `SkdxEditableSubmitTrigger`. */
 export type EditableSubmitMode = 'blur' | 'enter' | 'both' | 'none';
-/** @internal Shared state a `SkdxEditable` provides so its parts can read the draft, the mode, and the transitions. */
+/**
+ * Two placeholder roles: `edit` is a hint (disappears with content),
+ * `preview` is both text and accessible name (reads as a label).
+ * One string does both; object separates them.
+ */
+export interface EditablePlaceholder {
+    /** Editor's `placeholder` (hint, not name). */
+    edit: string;
+    /** Preview's text and accessible name (write as label). */
+    preview: string;
+}
+/** @internal Editable parts share: draft, mode, transitions. */
 export interface EditableContext {
     value: ComputedRef<string>;
     editing: ComputedRef<boolean>;
-    placeholder: ComputedRef<string | undefined>;
+    /** Editor's placeholder (resolved from union). */
+    editPlaceholder: ComputedRef<string | undefined>;
+    /** Preview's placeholder (resolved from union). */
+    previewPlaceholder: ComputedRef<string | undefined>;
     disabled: ComputedRef<boolean>;
     readOnly: ComputedRef<boolean>;
     required: ComputedRef<boolean>;
+    invalid: ComputedRef<boolean>;
     maxLength: ComputedRef<number | undefined>;
     activationMode: ComputedRef<EditableActivationMode>;
     submitMode: ComputedRef<EditableSubmitMode>;
-    /** Set by whichever of `SkdxEditableInput`/`SkdxEditableTextarea` is mounted, so the root can focus it on entering edit mode. */
+    /** Whichever input is mounted (root focuses on enter edit). */
     inputRef: Ref<EditableInputElement | null>;
-    /** Set by `SkdxEditablePreview`, so the root can return focus to it on leaving edit mode. */
+    /** Preview ref (root returns focus on exit edit). */
     previewRef: Ref<HTMLElement | null>;
     /**
-     * True only for the instant the root is programmatically returning focus to
-     * the preview. `activationMode="focus"` reads it to avoid re-entering edit
-     * mode on the focus it just caused — otherwise submitting would loop forever.
+     * Instant root returns focus to preview (`activationMode="focus"` reads it
+     * to avoid re-entering edit loop).
      */
     returningFocus: Ref<boolean>;
+    /** Mounted editor's id (`SkdxEditableLabel` `for` target). */
+    editorId: string;
+    /** Mounted label's id (preview's `aria-labelledby` target). */
+    labelId: string;
+    /** Whether label is mounted (prevents dangling IDREF). */
+    labelPresent: Ref<boolean>;
     setValue: (value: string) => void;
     activate: () => void;
     submit: () => void;
     cancel: () => void;
 }
-/** @internal Injection key a `SkdxEditable` provides so its parts share the draft value, the edit mode, and the transitions. */
+/** @internal Injection key for Editable parts. */
 export declare const EDITABLE_CONTEXT: InjectionKey<EditableContext>;
+/**
+ * @internal Split `placeholder` union into edit and preview strings.
+ * Plain string sets both; object form separates for different roles.
+ */
+export declare function splitPlaceholder(placeholder: string | EditablePlaceholder | undefined): {
+    edit: string | undefined;
+    preview: string | undefined;
+};

package/dist/editable/context.js

@@ -1 +1 @@
-var e=/* @__PURE__ */Symbol("skdx-editable-context");export{e as EDITABLE_CONTEXT};
+var e=/* @__PURE__ */Symbol("skdx-editable-context");function i(e){return void 0===e?{edit:void 0,preview:void 0}:"string"==typeof e?{edit:e,preview:e}:{edit:e.edit,preview:e.preview}}export{e as EDITABLE_CONTEXT,i as splitPlaceholder};

package/dist/editable/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Editable.vue.cjs"),r=require("./EditableCancelTrigger.vue.cjs"),i=require("./EditableEditTrigger.vue.cjs"),t=require("./EditableInput.vue.cjs"),d=require("./EditablePreview.vue.cjs"),a=require("./EditableSubmitTrigger.vue.cjs"),u=require("./EditableTextarea.vue.cjs");exports.SkdxEditable=e.default;exports.SkdxEditableCancelTrigger=r.default;exports.SkdxEditableEditTrigger=i.default;exports.SkdxEditableInput=t.default;exports.SkdxEditablePreview=d.default;exports.SkdxEditableSubmitTrigger=a.default;exports.SkdxEditableTextarea=u.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Editable.vue.cjs");exports.SkdxEditable=e.default;

package/dist/editable/index.d.cts

@@ -1,8 +1,2 @@
 export { default as SkdxEditable } from './Editable.vue.cjs';
-export { default as SkdxEditableCancelTrigger } from './EditableCancelTrigger.vue.cjs';
-export { default as SkdxEditableEditTrigger } from './EditableEditTrigger.vue.cjs';
-export { default as SkdxEditableInput } from './EditableInput.vue.cjs';
-export { default as SkdxEditablePreview } from './EditablePreview.vue.cjs';
-export { default as SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.vue.cjs';
-export { default as SkdxEditableTextarea } from './EditableTextarea.vue.cjs';
-export type { EditableActivationMode, EditableSubmitMode } from './context.cjs';
+export type { EditableActivationMode, EditablePlaceholder, EditableRevertDetail, EditableSubmitMode, } from './context.cjs';

package/dist/editable/index.d.ts

@@ -1,8 +1,2 @@
 export { default as SkdxEditable } from './Editable.vue.js';
-export { default as SkdxEditableCancelTrigger } from './EditableCancelTrigger.vue.js';
-export { default as SkdxEditableEditTrigger } from './EditableEditTrigger.vue.js';
-export { default as SkdxEditableInput } from './EditableInput.vue.js';
-export { default as SkdxEditablePreview } from './EditablePreview.vue.js';
-export { default as SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.vue.js';
-export { default as SkdxEditableTextarea } from './EditableTextarea.vue.js';
-export type { EditableActivationMode, EditableSubmitMode } from './context.js';
+export type { EditableActivationMode, EditablePlaceholder, EditableRevertDetail, EditableSubmitMode, } from './context.js';

package/dist/editable/index.js

@@ -1 +1 @@
-import e from"./Editable.vue.js";import i from"./EditableCancelTrigger.vue.js";import r from"./EditableEditTrigger.vue.js";import t from"./EditableInput.vue.js";import a from"./EditablePreview.vue.js";import d from"./EditableSubmitTrigger.vue.js";import b from"./EditableTextarea.vue.js";export{e as SkdxEditable,i as SkdxEditableCancelTrigger,r as SkdxEditableEditTrigger,t as SkdxEditableInput,a as SkdxEditablePreview,d as SkdxEditableSubmitTrigger,b as SkdxEditableTextarea};
+import e from"./Editable.vue.js";export{e as SkdxEditable};

package/dist/editable/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./EditableCancelTrigger.vue.cjs"),r=require("./EditableInput.vue.cjs"),i=require("./EditablePreview.vue.cjs"),t=require("./EditableSubmitTrigger.vue.cjs"),d=require("./EditableTextarea.vue.cjs"),a=require("./Editable.vue.cjs"),l=require("./EditableEditTrigger.vue.cjs"),u=require("./EditableLabel.vue.cjs");exports.SkdxEditable=a.default;exports.SkdxEditableCancelTrigger=e.default;exports.SkdxEditableEditTrigger=l.default;exports.SkdxEditableInput=r.default;exports.SkdxEditableLabel=u.default;exports.SkdxEditablePreview=i.default;exports.SkdxEditableSubmitTrigger=t.default;exports.SkdxEditableTextarea=d.default;

package/dist/editable/primitives.d.cts

@@ -0,0 +1,30 @@
+/**
+ * Advanced primitives for `SkdxEditable` — the parts the recipe composes.
+ * Use when you need a different structure. Editable here is the barrel export,
+ * derives anatomy when given no children.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxEditable, SkdxEditableCancelTrigger, SkdxEditableInput, SkdxEditablePreview, SkdxEditableSubmitTrigger } from '@skdx/vue/primitives/editable';
+ * </script>
+ *
+ * <template>
+ *   <SkdxEditable default-value="Untitled" placeholder="Add a title">
+ *     <SkdxEditablePreview />
+ *     <SkdxEditableInput aria-label="Title" />
+ *     <SkdxEditableSubmitTrigger>Save</SkdxEditableSubmitTrigger>
+ *     <SkdxEditableCancelTrigger>Cancel</SkdxEditableCancelTrigger>
+ *   </SkdxEditable>
+ * </template>
+ * ```
+ */
+export { default as SkdxEditable } from './Editable.vue.cjs';
+export { default as SkdxEditableCancelTrigger } from './EditableCancelTrigger.vue.cjs';
+export { default as SkdxEditableEditTrigger } from './EditableEditTrigger.vue.cjs';
+export { default as SkdxEditableInput } from './EditableInput.vue.cjs';
+export { default as SkdxEditableLabel } from './EditableLabel.vue.cjs';
+export { default as SkdxEditablePreview } from './EditablePreview.vue.cjs';
+export { default as SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.vue.cjs';
+export { default as SkdxEditableTextarea } from './EditableTextarea.vue.cjs';
+export type { EditableActivationMode, EditablePlaceholder, EditableRevertDetail, EditableSubmitMode, } from './context.cjs';

package/dist/editable/primitives.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Advanced primitives for `SkdxEditable` — the parts the recipe composes.
+ * Use when you need a different structure. Editable here is the barrel export,
+ * derives anatomy when given no children.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxEditable, SkdxEditableCancelTrigger, SkdxEditableInput, SkdxEditablePreview, SkdxEditableSubmitTrigger } from '@skdx/vue/primitives/editable';
+ * </script>
+ *
+ * <template>
+ *   <SkdxEditable default-value="Untitled" placeholder="Add a title">
+ *     <SkdxEditablePreview />
+ *     <SkdxEditableInput aria-label="Title" />
+ *     <SkdxEditableSubmitTrigger>Save</SkdxEditableSubmitTrigger>
+ *     <SkdxEditableCancelTrigger>Cancel</SkdxEditableCancelTrigger>
+ *   </SkdxEditable>
+ * </template>
+ * ```
+ */
+export { default as SkdxEditable } from './Editable.vue.js';
+export { default as SkdxEditableCancelTrigger } from './EditableCancelTrigger.vue.js';
+export { default as SkdxEditableEditTrigger } from './EditableEditTrigger.vue.js';
+export { default as SkdxEditableInput } from './EditableInput.vue.js';
+export { default as SkdxEditableLabel } from './EditableLabel.vue.js';
+export { default as SkdxEditablePreview } from './EditablePreview.vue.js';
+export { default as SkdxEditableSubmitTrigger } from './EditableSubmitTrigger.vue.js';
+export { default as SkdxEditableTextarea } from './EditableTextarea.vue.js';
+export type { EditableActivationMode, EditablePlaceholder, EditableRevertDetail, EditableSubmitMode, } from './context.js';

package/dist/editable/primitives.js

@@ -0,0 +1 @@
+import e from"./EditableCancelTrigger.vue.js";import i from"./EditableInput.vue.js";import r from"./EditablePreview.vue.js";import t from"./EditableSubmitTrigger.vue.js";import a from"./EditableTextarea.vue.js";import d from"./Editable.vue.js";import b from"./EditableEditTrigger.vue.js";import l from"./EditableLabel.vue.js";export{d as SkdxEditable,e as SkdxEditableCancelTrigger,b as SkdxEditableEditTrigger,i as SkdxEditableInput,l as SkdxEditableLabel,r as SkdxEditablePreview,t as SkdxEditableSubmitTrigger,a as SkdxEditableTextarea};

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

@@ -1,29 +1,19 @@
 import type { FieldValidityDetail } from './context.cjs';
 import type { FieldMode, FieldValidator } from './fieldCore.cjs';
 /**
- * The Vue implementation of the shared Field contract (see `@skdx/shared`'s
- * `fieldContract`). Wraps one form control and wires its `SkdxFieldLabel`,
- * `SkdxFieldDescription`, and `SkdxFieldError` to it: generated ids,
- * `aria-describedby`, `aria-invalid`, and the
- * `data-valid`/`data-invalid`/`data-touched`/`data-dirty`/`data-filled` state
- * hooks on both the Field and the control. Any control works — an skdx
- * component, a native `<input>`, or a third-party widget — because the Field
- * finds it in its own subtree rather than expecting it to cooperate.
- *
- * Also owns the field's validation model: `validate` (sync or async), `mode`,
- * server errors through `errors`, and the wrapped control's own native
- * constraint validation as a fallback, so a plain `required` works with no
- * configuration.
- *
- * Renders a plain `<div>`.
+ * Field wrapper: wires label, description, and error to any control.
+ * Owns validation model: sync/async validate, mode, server errors.
+ * Derives label, required indicator, help text, and error display.
  *
  * @example
  * ```vue
- * <SkdxField :validate="(value) => (value ? null : 'Enter your name')">
- *   <SkdxFieldLabel>Name</SkdxFieldLabel>
+ * <SkdxField
+ *   label="Name"
+ *   description="As shown on your passport."
+ *   required
+ *   :validate="(value) => (value ? null : 'Enter your name')"
+ * >
  *   <input />
- *   <SkdxFieldDescription>As shown on your passport.</SkdxFieldDescription>
- *   <SkdxFieldError />
  * </SkdxField>
  * ```
  */
@@ -46,6 +36,26 @@ type __VLS_Props = {
     value?: unknown;
     /** Field name, used as the `SkdxFormErrorSummary` link text when the field renders no error of its own. */
     name?: string;
+    /**
+     * Whether an answer is mandatory. Reflected onto the wrapped control as the
+     * native `required` attribute when it is an `<input>`/`<select>`/
+     * `<textarea>`, and as `aria-required="true"` when it is a group or a
+     * widget-role element, which has no native `required` to set.
+     *
+     * The derived label carries a `SkdxFieldRequiredIndicator` so it is also
+     * visible; its text joins the control's accessible name.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is unavailable. Applied to the wrapped control — the
+     * native `disabled` attribute where there is one, `aria-disabled="true"`
+     * otherwise, because a disabled *widget* stays focusable and stays
+     * announced — and mirrored as `data-disabled` on the Field root and the
+     * control for styling.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Words the character-count copy — the text `SkdxFieldCharacterCount`
      * renders, the message announced one typing pause later, and the error
@@ -64,23 +74,70 @@ type __VLS_Props = {
      * @default undefined — `NATIVE_INVALID_FALLBACK_MESSAGE` ('This field is invalid.').
      */
     invalidMessage?: string;
+    /**
+     * How long, in milliseconds, `mode: 'change'` waits after the last
+     * keystroke before running `validate`. Only `change` mode is debounced, and
+     * a blur flushes the pending run immediately — the delay exists to keep a
+     * validator quiet *while* the user types, and a blur means they have
+     * stopped.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number;
+    /**
+     * The control's label, rendered as the derived `SkdxFieldLabel` — a
+     * `<label for>` pointing at whatever control the Field discovers.
+     * @default undefined — no derived label; supply one from the primitives.
+     */
+    label?: string;
+    /**
+     * Help text, rendered as the derived `SkdxFieldDescription`. Its
+     * generated id joins the control's `aria-describedby`, so it is announced
+     * with the control rather than left to be discovered by browsing.
+     * @default undefined — no derived description.
+     */
+    description?: string;
 };
-declare var __VLS_1: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /**
+     * Runs this field's validation now — server `errors`, the `validate` prop,
+     * the discovered control's native constraint validation, and the character
+     * count — and resolves to whether it is valid. The imperative half of the
+     * shared contract, reached through a template ref on this component.
+     *
+     * Named for the platform's own method rather than `validate()`: that name
+     * cannot coexist with the `validate` *prop* on one object, which is why
+     * `<skdx-field>` had to call the prop `validator` and Angular and Svelte
+     * aliased theirs internally.
+     */
+    checkValidity: () => Promise<boolean>;
+    /**
+     * Clears the messages and the `touched`/`dirty` state, then re-derives
+     * `filled`/`count` from whatever the control holds now — what a form that
+     * submits successfully and stays mounted needs. Clear the `errors` prop too:
+     * it is declarative and is re-applied on the next render.
+     */
+    reset: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "validity-change": (detail: FieldValidityDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onValidity-change"?: ((detail: FieldValidityDetail) => any) | undefined;
 }>, {
-    name: string;
+    label: string;
+    disabled: boolean;
+    description: string;
     value: undefined;
-    mode: FieldMode;
+    required: boolean;
+    name: string;
     errors: string | string[];
     validate: FieldValidator;
+    mode: FieldMode;
     getCharacterCountMessage: (remaining: number) => string;
     invalidMessage: string;
+    validationDebounceTime: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;