@skdx/vue 0.27.0 → 0.29.0

package/dist/drawer/context.d.ts

@@ -1,24 +1,8 @@
-import type { InjectionKey, Ref } from 'vue';
-/**
- * Which viewport edge the drawer is anchored to, expressed **logically**:
- * `start`/`end` follow the writing direction (start is the left edge under
- * `dir="ltr"` and the right edge under `dir="rtl"`), `top`/`bottom` are
- * physical. `bottom` is the bottom-sheet case.
- */
+/** Which viewport edge the drawer is anchored to: `start`/`end` follow the writing direction, `top`/`bottom` are physical. */
 export type DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
-/** @internal Injection key a Drawer provides so its parts can read/drive shared state. */
-export interface DrawerContext {
-    triggerRef: Ref<HTMLElement | null>;
-    contentRef: Ref<HTMLElement | null>;
-    contentId: string;
-    titleId: string;
-    descriptionId: string;
-    open: Readonly<Ref<boolean>>;
-    placement: Readonly<Ref<DrawerPlacement>>;
-    isModal: Readonly<Ref<boolean>>;
-    setOpen(open: boolean): void;
-}
-/** @internal Injection key the Drawer root provides so its parts share open state, placement and part ids. */
-export declare const DRAWER_CONTEXT: InjectionKey<DrawerContext>;
+/** Which dismissal channels are allowed to close the drawer: `'any'`, `'escape'`, `'outside'`, or `'none'`. */
+export type DrawerDismiss = 'any' | 'escape' | 'outside' | 'none';
+/** @internal Drawer shares Dialog's context: one engine, told which family it is rendering for. */
+export declare const DRAWER_CONTEXT: import("vue").InjectionKey<import("../dialog/context.js").DialogContext>;
 /** @internal Generates a unique id for one of Drawer's parts. */
 export declare function nextDrawerId(part: 'content' | 'title' | 'description'): string;

package/dist/drawer/context.js

@@ -1 +1 @@
-import{nextId as r}from"../utils/id.js";var t=/* @__PURE__ */Symbol("skdx-drawer-context");function e(t){return r(`drawer-${t}`)}export{t as DRAWER_CONTEXT,e as nextDrawerId};
+import{nextId as r}from"../utils/id.js";import{DIALOG_CONTEXT as t}from"../dialog/context.js";var a=t;function o(t){return r(`drawer-${t}`)}export{a as DRAWER_CONTEXT,o as nextDrawerId};

package/dist/drawer/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Drawer.vue.cjs"),e=require("./DrawerTrigger.vue.cjs"),a=require("./DrawerPortal.vue.cjs"),t=require("./DrawerOverlay.vue.cjs"),i=require("./DrawerContent.vue.cjs"),u=require("./DrawerTitle.vue.cjs"),o=require("./DrawerDescription.vue.cjs"),l=require("./DrawerClose.vue.cjs");exports.SkdxDrawer=r.default;exports.SkdxDrawerClose=l.default;exports.SkdxDrawerContent=i.default;exports.SkdxDrawerDescription=o.default;exports.SkdxDrawerOverlay=t.default;exports.SkdxDrawerPortal=a.default;exports.SkdxDrawerTitle=u.default;exports.SkdxDrawerTrigger=e.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Drawer.vue.cjs");exports.SkdxDrawer=e.default;

package/dist/drawer/index.d.cts

@@ -1,9 +1,2 @@
 export { default as SkdxDrawer } from './Drawer.vue.cjs';
-export { default as SkdxDrawerTrigger } from './DrawerTrigger.vue.cjs';
-export { default as SkdxDrawerPortal } from './DrawerPortal.vue.cjs';
-export { default as SkdxDrawerOverlay } from './DrawerOverlay.vue.cjs';
-export { default as SkdxDrawerContent } from './DrawerContent.vue.cjs';
-export { default as SkdxDrawerTitle } from './DrawerTitle.vue.cjs';
-export { default as SkdxDrawerDescription } from './DrawerDescription.vue.cjs';
-export { default as SkdxDrawerClose } from './DrawerClose.vue.cjs';
-export type { DrawerPlacement } from './context.cjs';
+export type { DrawerDismiss, DrawerPlacement } from './context.cjs';

package/dist/drawer/index.d.ts

@@ -1,9 +1,2 @@
 export { default as SkdxDrawer } from './Drawer.vue.js';
-export { default as SkdxDrawerTrigger } from './DrawerTrigger.vue.js';
-export { default as SkdxDrawerPortal } from './DrawerPortal.vue.js';
-export { default as SkdxDrawerOverlay } from './DrawerOverlay.vue.js';
-export { default as SkdxDrawerContent } from './DrawerContent.vue.js';
-export { default as SkdxDrawerTitle } from './DrawerTitle.vue.js';
-export { default as SkdxDrawerDescription } from './DrawerDescription.vue.js';
-export { default as SkdxDrawerClose } from './DrawerClose.vue.js';
-export type { DrawerPlacement } from './context.js';
+export type { DrawerDismiss, DrawerPlacement } from './context.js';

package/dist/drawer/index.js

@@ -1 +1 @@
-import r from"./Drawer.vue.js";import e from"./DrawerTrigger.vue.js";import a from"./DrawerPortal.vue.js";import o from"./DrawerOverlay.vue.js";import s from"./DrawerContent.vue.js";import t from"./DrawerTitle.vue.js";import D from"./DrawerDescription.vue.js";import i from"./DrawerClose.vue.js";export{r as SkdxDrawer,i as SkdxDrawerClose,s as SkdxDrawerContent,D as SkdxDrawerDescription,o as SkdxDrawerOverlay,a as SkdxDrawerPortal,t as SkdxDrawerTitle,e as SkdxDrawerTrigger};
+import r from"./Drawer.vue.js";export{r as SkdxDrawer};

package/dist/drawer/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./DrawerClose.vue.cjs"),e=require("./DrawerContent.vue.cjs"),t=require("./DrawerDescription.vue.cjs"),a=require("./DrawerOverlay.vue.cjs"),i=require("./DrawerPortal.vue.cjs"),u=require("./DrawerTitle.vue.cjs"),o=require("./DrawerRoot.vue.cjs"),l=require("./DrawerTrigger.vue.cjs");exports.SkdxDrawerClose=r.default;exports.SkdxDrawerContent=e.default;exports.SkdxDrawerDescription=t.default;exports.SkdxDrawerOverlay=a.default;exports.SkdxDrawerPortal=i.default;exports.SkdxDrawerRoot=o.default;exports.SkdxDrawerTitle=u.default;exports.SkdxDrawerTrigger=l.default;

package/dist/drawer/primitives.d.cts

@@ -0,0 +1,31 @@
+/**
+ * Primitives for `SkdxDrawer` — composable building blocks for a custom layout.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxDrawerClose, SkdxDrawerContent, SkdxDrawerOverlay, SkdxDrawerPortal, SkdxDrawerRoot, SkdxDrawerTitle, SkdxDrawerTrigger } from '@skdx/vue/primitives/drawer';
+ * </script>
+ *
+ * <template>
+ *   <SkdxDrawerRoot v-model:open="open" placement="start">
+ *     <SkdxDrawerTrigger>Menu</SkdxDrawerTrigger>
+ *     <SkdxDrawerPortal>
+ *       <SkdxDrawerOverlay />
+ *       <SkdxDrawerContent>
+ *         <SkdxDrawerTitle>Navigation</SkdxDrawerTitle>
+ *         <SkdxDrawerClose>Close</SkdxDrawerClose>
+ *       </SkdxDrawerContent>
+ *     </SkdxDrawerPortal>
+ *   </SkdxDrawerRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxDrawerRoot } from './DrawerRoot.vue.cjs';
+export { default as SkdxDrawerClose } from './DrawerClose.vue.cjs';
+export { default as SkdxDrawerContent } from './DrawerContent.vue.cjs';
+export { default as SkdxDrawerDescription } from './DrawerDescription.vue.cjs';
+export { default as SkdxDrawerOverlay } from './DrawerOverlay.vue.cjs';
+export { default as SkdxDrawerPortal } from './DrawerPortal.vue.cjs';
+export { default as SkdxDrawerTitle } from './DrawerTitle.vue.cjs';
+export { default as SkdxDrawerTrigger } from './DrawerTrigger.vue.cjs';

package/dist/drawer/primitives.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Primitives for `SkdxDrawer` — composable building blocks for a custom layout.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxDrawerClose, SkdxDrawerContent, SkdxDrawerOverlay, SkdxDrawerPortal, SkdxDrawerRoot, SkdxDrawerTitle, SkdxDrawerTrigger } from '@skdx/vue/primitives/drawer';
+ * </script>
+ *
+ * <template>
+ *   <SkdxDrawerRoot v-model:open="open" placement="start">
+ *     <SkdxDrawerTrigger>Menu</SkdxDrawerTrigger>
+ *     <SkdxDrawerPortal>
+ *       <SkdxDrawerOverlay />
+ *       <SkdxDrawerContent>
+ *         <SkdxDrawerTitle>Navigation</SkdxDrawerTitle>
+ *         <SkdxDrawerClose>Close</SkdxDrawerClose>
+ *       </SkdxDrawerContent>
+ *     </SkdxDrawerPortal>
+ *   </SkdxDrawerRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxDrawerRoot } from './DrawerRoot.vue.js';
+export { default as SkdxDrawerClose } from './DrawerClose.vue.js';
+export { default as SkdxDrawerContent } from './DrawerContent.vue.js';
+export { default as SkdxDrawerDescription } from './DrawerDescription.vue.js';
+export { default as SkdxDrawerOverlay } from './DrawerOverlay.vue.js';
+export { default as SkdxDrawerPortal } from './DrawerPortal.vue.js';
+export { default as SkdxDrawerTitle } from './DrawerTitle.vue.js';
+export { default as SkdxDrawerTrigger } from './DrawerTrigger.vue.js';

package/dist/drawer/primitives.js

@@ -0,0 +1 @@
+import r from"./DrawerClose.vue.js";import e from"./DrawerContent.vue.js";import o from"./DrawerDescription.vue.js";import a from"./DrawerOverlay.vue.js";import t from"./DrawerPortal.vue.js";import s from"./DrawerTitle.vue.js";import D from"./DrawerRoot.vue.js";import i from"./DrawerTrigger.vue.js";export{r as SkdxDrawerClose,e as SkdxDrawerContent,o as SkdxDrawerDescription,a as SkdxDrawerOverlay,t as SkdxDrawerPortal,D as SkdxDrawerRoot,s as SkdxDrawerTitle,i as SkdxDrawerTrigger};

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

@@ -1,34 +1,10 @@
-import { type EditableActivationMode, type EditableSubmitMode } from './context.cjs';
+import { type EditableActivationMode, type EditablePlaceholder, type EditableRevertDetail, type EditableSubmitMode } from './context.cjs';
 /**
- * The Vue implementation of the shared Editable contract (see
- * `@skdx/shared`'s `editableContract`). Root of a click-to-edit inline text
- * field: owns the text **and** the preview/edit mode, and `provide()`s both to
- * its parts. Renders a plain `<div>` carrying `data-state="editing" | "preview"`
- * and `data-empty` — how preview and input sit in the layout is entirely your CSS.
- *
- * Both pieces of state are independently controllable, each with the usual
- * `v-model:x` pair plus a `default*` seed: `value`/`defaultValue`/`value-change`
- * for the text, `editing`/`defaultEditing`/`edit-change` for the mode. `value`
- * tracks the live draft, so it changes per keystroke; `value-commit` is the one
- * that fires once, on a successful submit.
- *
- * The state machine, in full:
- * - **Enter edit** — the gesture named by `activationMode` on the preview, or
- *   Enter/Space while the preview has focus, or `SkdxEditableEditTrigger`. The
- *   pre-edit text is snapshotted, then the input is focused with everything
- *   selected (`selectOnFocus`, default) or the caret at the end.
- * - **Submit** — the gestures named by `submitMode`, or
- *   `SkdxEditableSubmitTrigger`. Commits, unless `required` and the draft is
- *   blank, in which case the snapshot is restored instead and nothing is committed.
- * - **Cancel** — Escape, always, whatever `submitMode` says, or
- *   `SkdxEditableCancelTrigger`. Restores the snapshot.
- * - **Either exit returns focus to the preview.** Losing focus to `<body>`
- *   after an inline edit strands keyboard users mid-page, so the root drives
- *   this rather than leaving it to the unmounting input.
+ * Click-to-edit inline text field that owns text and preview/edit mode and renders `<div data-state="editing"|"preview">`.
  *
  * @example
  * ```vue
- * <SkdxEditable default-value="Untitled" placeholder="Name this board" @value-commit="save">
+ * <SkdxEditable default-value="Untitled" @value-commit="save">
  *   <SkdxEditablePreview />
  *   <SkdxEditableInput aria-label="Board name" />
  * </SkdxEditable>
@@ -36,115 +12,131 @@ import { type EditableActivationMode, type EditableSubmitMode } from './context.
  */
 type __VLS_Props = {
     /**
-     * Current text, for controlled usage. Pair with `v-model:value` or
-     * `@value-change`. Note this tracks the *live* draft while editing, not
-     * only committed text — listen to `@value-commit` if you only care about
-     * the submitted result.
+     * Current text for controlled usage; pairs with `v-model:value` or `@value-change`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial text, for uncontrolled usage, seeding the first render.
      * @default '' — starts empty, so the preview shows `placeholder` and the root carries `data-empty`.
      */
     defaultValue?: string;
     /**
-     * Whether the input is showing instead of the preview, for controlled
-     * usage. Pair with `v-model:editing` or `@edit-change`.
+     * Renders `SkdxEditableTextarea` instead of `SkdxEditableInput` in the derived anatomy.
+     * @default false — the derived anatomy is a single-line `SkdxEditableInput`.
+     */
+    multiline?: boolean;
+    /**
+     * Whether the input is showing instead of the preview, for controlled usage.
      * @default undefined — uncontrolled, tracks its own edit state internally.
      */
-    editing?: boolean;
+    editing?: boolean | undefined;
     /**
-     * Whether to start in edit mode, for uncontrolled usage. Starting `true`
-     * focuses the input on mount, so use it only when the edit is the reason
-     * the surface appeared (a freshly added row), never on a page the user
-     * just landed on.
+     * Whether to start in edit mode, for uncontrolled usage.
      * @default false — starts showing the preview.
      */
     defaultEditing?: boolean;
     /**
-     * Text rendered by `SkdxEditablePreview` when the value is empty, and set as
-     * the input's `placeholder`. It doubles as the preview's accessible name
-     * while empty, so an editable with no placeholder and no value renders a
-     * button with no name — always supply one, or an `aria-label` on the preview.
+     * Text for `SkdxEditablePreview` when empty and the editor's `placeholder`; a string sets both, or `{ edit, preview }` sets them separately.
      * @default undefined — an empty value renders an empty preview.
      */
-    placeholder?: string;
+    placeholder?: string | EditablePlaceholder | undefined;
+    /**
+     * Function returning where focus goes when the edit ends, overriding the default of the preview.
+     * @default undefined — focus returns to `SkdxEditablePreview`.
+     */
+    finalFocusEl?: (() => HTMLElement | null) | undefined;
     /**
      * Blocks editing entirely and takes the preview out of the tab order.
      * @default false — the preview is a tab stop and can open an edit.
      */
     disabled?: boolean;
     /**
-     * Shows the value but blocks entering edit mode. The preview stays
-     * focusable (unlike `disabled`), so the text is still reachable by keyboard.
+     * Shows the value but blocks entering edit mode, keeping the preview focusable.
      * @default false — the value can be edited.
      */
     readOnly?: boolean;
     /**
-     * Rejects a submit that would leave the value blank: the pre-edit text is
-     * restored, `value-commit` does not fire, and edit mode closes. Whitespace
-     * counts as blank.
+     * Rejects a submit that would leave the value blank, restoring the pre-edit text instead.
      * @default false — an empty submit is committed like any other.
      */
     required?: boolean;
+    /**
+     * Marks the current value as invalid, publishing `data-invalid` on the root, preview and editor.
+     * @default false — the value is treated as valid.
+     */
+    invalid?: boolean;
     /**
      * Maximum number of characters the input accepts, forwarded to the native
      * `maxlength` attribute.
      * @default undefined — no limit.
      */
-    maxLength?: number;
+    maxLength?: number | undefined;
     /**
      * Which pointer gesture on `SkdxEditablePreview` enters edit mode.
-     * `'focus'` makes the field editable as soon as it is tabbed to —
-     * convenient in a form, hostile in a read-mostly page, where `'dblclick'`
-     * avoids editing on a stray click.
      * @default 'click' — a single click on the preview starts editing.
      */
     activationMode?: EditableActivationMode;
     /**
-     * Which gestures commit the draft: `'enter'` (Enter key), `'blur'` (focus
-     * leaves the input), `'both'`, or `'none'` — which leaves committing to
-     * `SkdxEditableSubmitTrigger` alone. Escape always cancels regardless.
+     * Which gestures commit the draft: `'enter'`, `'blur'`, `'both'`, or `'none'`.
      * @default 'both' — Enter and blur each submit.
      */
     submitMode?: EditableSubmitMode;
     /**
-     * Select the whole value when edit mode opens, so typing replaces it. With
-     * `false` the caret is placed at the end instead, so typing appends.
+     * Selects the whole value when edit mode opens, so typing replaces it.
      * @default true — entering edit mode selects everything.
      */
     selectOnFocus?: boolean;
+    /**
+     * Form field name; when set, renders a hidden input carrying the committed value.
+     * @default undefined — no hidden input is rendered; the value is not part of any form.
+     */
+    name?: string | undefined;
+    /**
+     * Id of the `<form>` to submit with, mirroring the native `form` attribute.
+     * @default undefined — associates with the nearest ancestor `<form>`.
+     */
+    form?: string | undefined;
+    /**
+     * Whether the derived anatomy renders a Submit/Cancel trigger pair after the editor.
+     * @default false
+     */
+    showControls?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => 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, {
+    /** Moves keyboard focus to whichever part is showing — the editor while editing, the preview otherwise. */
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string) => any;
     "value-change": (value: string) => any;
     "value-commit": (value: string) => any;
+    "value-revert": (detail: EditableRevertDetail) => any;
     "update:editing": (editing: boolean) => any;
     "edit-change": (editing: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string) => any) | undefined;
-    "onValue-change"?: ((value: string) => any) | undefined;
-    "onValue-commit"?: ((value: string) => any) | undefined;
-    "onUpdate:editing"?: ((editing: boolean) => any) | undefined;
-    "onEdit-change"?: ((editing: boolean) => any) | undefined;
+    "onUpdate:value"?: (value: string) => any;
+    "onValue-change"?: (value: string) => any;
+    "onValue-commit"?: (value: string) => any;
+    "onValue-revert"?: (detail: EditableRevertDetail) => any;
+    "onUpdate:editing"?: (editing: boolean) => any;
+    "onEdit-change"?: (editing: boolean) => any;
 }>, {
     disabled: boolean;
-    required: boolean;
-    value: string;
-    placeholder: string;
     defaultValue: string;
-    activationMode: EditableActivationMode;
     readOnly: boolean;
-    maxLength: number;
-    editing: boolean;
+    required: boolean;
+    invalid: boolean;
+    activationMode: EditableActivationMode;
+    selectOnFocus: boolean;
+    showControls: boolean;
+    editing: boolean | undefined;
+    multiline: boolean;
     defaultEditing: boolean;
     submitMode: EditableSubmitMode;
-    selectOnFocus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,34 +1,10 @@
-import { type EditableActivationMode, type EditableSubmitMode } from './context.js';
+import { type EditableActivationMode, type EditablePlaceholder, type EditableRevertDetail, type EditableSubmitMode } from './context.js';
 /**
- * The Vue implementation of the shared Editable contract (see
- * `@skdx/shared`'s `editableContract`). Root of a click-to-edit inline text
- * field: owns the text **and** the preview/edit mode, and `provide()`s both to
- * its parts. Renders a plain `<div>` carrying `data-state="editing" | "preview"`
- * and `data-empty` — how preview and input sit in the layout is entirely your CSS.
- *
- * Both pieces of state are independently controllable, each with the usual
- * `v-model:x` pair plus a `default*` seed: `value`/`defaultValue`/`value-change`
- * for the text, `editing`/`defaultEditing`/`edit-change` for the mode. `value`
- * tracks the live draft, so it changes per keystroke; `value-commit` is the one
- * that fires once, on a successful submit.
- *
- * The state machine, in full:
- * - **Enter edit** — the gesture named by `activationMode` on the preview, or
- *   Enter/Space while the preview has focus, or `SkdxEditableEditTrigger`. The
- *   pre-edit text is snapshotted, then the input is focused with everything
- *   selected (`selectOnFocus`, default) or the caret at the end.
- * - **Submit** — the gestures named by `submitMode`, or
- *   `SkdxEditableSubmitTrigger`. Commits, unless `required` and the draft is
- *   blank, in which case the snapshot is restored instead and nothing is committed.
- * - **Cancel** — Escape, always, whatever `submitMode` says, or
- *   `SkdxEditableCancelTrigger`. Restores the snapshot.
- * - **Either exit returns focus to the preview.** Losing focus to `<body>`
- *   after an inline edit strands keyboard users mid-page, so the root drives
- *   this rather than leaving it to the unmounting input.
+ * Click-to-edit inline text field that owns text and preview/edit mode and renders `<div data-state="editing"|"preview">`.
  *
  * @example
  * ```vue
- * <SkdxEditable default-value="Untitled" placeholder="Name this board" @value-commit="save">
+ * <SkdxEditable default-value="Untitled" @value-commit="save">
  *   <SkdxEditablePreview />
  *   <SkdxEditableInput aria-label="Board name" />
  * </SkdxEditable>
@@ -36,115 +12,131 @@ import { type EditableActivationMode, type EditableSubmitMode } from './context.
  */
 type __VLS_Props = {
     /**
-     * Current text, for controlled usage. Pair with `v-model:value` or
-     * `@value-change`. Note this tracks the *live* draft while editing, not
-     * only committed text — listen to `@value-commit` if you only care about
-     * the submitted result.
+     * Current text for controlled usage; pairs with `v-model:value` or `@value-change`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial text, for uncontrolled usage, seeding the first render.
      * @default '' — starts empty, so the preview shows `placeholder` and the root carries `data-empty`.
      */
     defaultValue?: string;
     /**
-     * Whether the input is showing instead of the preview, for controlled
-     * usage. Pair with `v-model:editing` or `@edit-change`.
+     * Renders `SkdxEditableTextarea` instead of `SkdxEditableInput` in the derived anatomy.
+     * @default false — the derived anatomy is a single-line `SkdxEditableInput`.
+     */
+    multiline?: boolean;
+    /**
+     * Whether the input is showing instead of the preview, for controlled usage.
      * @default undefined — uncontrolled, tracks its own edit state internally.
      */
-    editing?: boolean;
+    editing?: boolean | undefined;
     /**
-     * Whether to start in edit mode, for uncontrolled usage. Starting `true`
-     * focuses the input on mount, so use it only when the edit is the reason
-     * the surface appeared (a freshly added row), never on a page the user
-     * just landed on.
+     * Whether to start in edit mode, for uncontrolled usage.
      * @default false — starts showing the preview.
      */
     defaultEditing?: boolean;
     /**
-     * Text rendered by `SkdxEditablePreview` when the value is empty, and set as
-     * the input's `placeholder`. It doubles as the preview's accessible name
-     * while empty, so an editable with no placeholder and no value renders a
-     * button with no name — always supply one, or an `aria-label` on the preview.
+     * Text for `SkdxEditablePreview` when empty and the editor's `placeholder`; a string sets both, or `{ edit, preview }` sets them separately.
      * @default undefined — an empty value renders an empty preview.
      */
-    placeholder?: string;
+    placeholder?: string | EditablePlaceholder | undefined;
+    /**
+     * Function returning where focus goes when the edit ends, overriding the default of the preview.
+     * @default undefined — focus returns to `SkdxEditablePreview`.
+     */
+    finalFocusEl?: (() => HTMLElement | null) | undefined;
     /**
      * Blocks editing entirely and takes the preview out of the tab order.
      * @default false — the preview is a tab stop and can open an edit.
      */
     disabled?: boolean;
     /**
-     * Shows the value but blocks entering edit mode. The preview stays
-     * focusable (unlike `disabled`), so the text is still reachable by keyboard.
+     * Shows the value but blocks entering edit mode, keeping the preview focusable.
      * @default false — the value can be edited.
      */
     readOnly?: boolean;
     /**
-     * Rejects a submit that would leave the value blank: the pre-edit text is
-     * restored, `value-commit` does not fire, and edit mode closes. Whitespace
-     * counts as blank.
+     * Rejects a submit that would leave the value blank, restoring the pre-edit text instead.
      * @default false — an empty submit is committed like any other.
      */
     required?: boolean;
+    /**
+     * Marks the current value as invalid, publishing `data-invalid` on the root, preview and editor.
+     * @default false — the value is treated as valid.
+     */
+    invalid?: boolean;
     /**
      * Maximum number of characters the input accepts, forwarded to the native
      * `maxlength` attribute.
      * @default undefined — no limit.
      */
-    maxLength?: number;
+    maxLength?: number | undefined;
     /**
      * Which pointer gesture on `SkdxEditablePreview` enters edit mode.
-     * `'focus'` makes the field editable as soon as it is tabbed to —
-     * convenient in a form, hostile in a read-mostly page, where `'dblclick'`
-     * avoids editing on a stray click.
      * @default 'click' — a single click on the preview starts editing.
      */
     activationMode?: EditableActivationMode;
     /**
-     * Which gestures commit the draft: `'enter'` (Enter key), `'blur'` (focus
-     * leaves the input), `'both'`, or `'none'` — which leaves committing to
-     * `SkdxEditableSubmitTrigger` alone. Escape always cancels regardless.
+     * Which gestures commit the draft: `'enter'`, `'blur'`, `'both'`, or `'none'`.
      * @default 'both' — Enter and blur each submit.
      */
     submitMode?: EditableSubmitMode;
     /**
-     * Select the whole value when edit mode opens, so typing replaces it. With
-     * `false` the caret is placed at the end instead, so typing appends.
+     * Selects the whole value when edit mode opens, so typing replaces it.
      * @default true — entering edit mode selects everything.
      */
     selectOnFocus?: boolean;
+    /**
+     * Form field name; when set, renders a hidden input carrying the committed value.
+     * @default undefined — no hidden input is rendered; the value is not part of any form.
+     */
+    name?: string | undefined;
+    /**
+     * Id of the `<form>` to submit with, mirroring the native `form` attribute.
+     * @default undefined — associates with the nearest ancestor `<form>`.
+     */
+    form?: string | undefined;
+    /**
+     * Whether the derived anatomy renders a Submit/Cancel trigger pair after the editor.
+     * @default false
+     */
+    showControls?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => 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, {
+    /** Moves keyboard focus to whichever part is showing — the editor while editing, the preview otherwise. */
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string) => any;
     "value-change": (value: string) => any;
     "value-commit": (value: string) => any;
+    "value-revert": (detail: EditableRevertDetail) => any;
     "update:editing": (editing: boolean) => any;
     "edit-change": (editing: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string) => any) | undefined;
-    "onValue-change"?: ((value: string) => any) | undefined;
-    "onValue-commit"?: ((value: string) => any) | undefined;
-    "onUpdate:editing"?: ((editing: boolean) => any) | undefined;
-    "onEdit-change"?: ((editing: boolean) => any) | undefined;
+    "onUpdate:value"?: (value: string) => any;
+    "onValue-change"?: (value: string) => any;
+    "onValue-commit"?: (value: string) => any;
+    "onValue-revert"?: (detail: EditableRevertDetail) => any;
+    "onUpdate:editing"?: (editing: boolean) => any;
+    "onEdit-change"?: (editing: boolean) => any;
 }>, {
     disabled: boolean;
-    required: boolean;
-    value: string;
-    placeholder: string;
     defaultValue: string;
-    activationMode: EditableActivationMode;
     readOnly: boolean;
-    maxLength: number;
-    editing: boolean;
+    required: boolean;
+    invalid: boolean;
+    activationMode: EditableActivationMode;
+    selectOnFocus: boolean;
+    showControls: boolean;
+    editing: boolean | undefined;
+    multiline: boolean;
     defaultEditing: boolean;
     submitMode: EditableSubmitMode;
-    selectOnFocus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/editable/Editable.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const E=require("./context.cjs");let t=require("vue");var B=["data-state","data-empty","data-disabled","data-readonly"],O=(0,t.defineComponent)({__name:"Editable",props:{value:{default:void 0},defaultValue:{default:""},editing:{type:Boolean,default:void 0},defaultEditing:{type:Boolean,default:!1},placeholder:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxLength:{default:void 0},activationMode:{default:"click"},submitMode:{default:"both"},selectOnFocus:{type:Boolean,default:!0}},emits:["update:value","value-change","value-commit","update:editing","edit-change"],setup(n,{emit:g}){const a=n,d=g,s=(0,t.ref)(a.defaultValue),l=(0,t.computed)(()=>a.value===void 0?s.value:a.value),f=(0,t.ref)(a.defaultEditing),u=(0,t.computed)(()=>a.editing===void 0?f.value:a.editing),v=(0,t.ref)(null),p=(0,t.ref)(null),o=(0,t.ref)(!1);let r=l.value;function c(e){e!==l.value&&(a.value===void 0&&(s.value=e),d("update:value",e),d("value-change",e))}function i(e){e!==u.value&&(a.editing===void 0&&(f.value=e),d("update:editing",e),d("edit-change",e))}function y(){a.disabled||a.readOnly||u.value||(r=l.value,i(!0))}function b(){u.value&&(c(r),i(!1))}function h(){if(u.value){if(a.required&&l.value.trim()===""){c(r),i(!1);return}i(!1),d("value-commit",l.value)}}function m(){const e=v.value;e&&(e.focus(),a.selectOnFocus?e.select():e.setSelectionRange(e.value.length,e.value.length))}function _(){const e=document.activeElement;e&&e!==document.body||(o.value=!0,p.value?.focus(),o.value=!1)}return(0,t.watch)(u,async e=>{await(0,t.nextTick)(),e===u.value&&(e?m():_())}),(0,t.onMounted)(()=>{u.value&&m()}),(0,t.provide)(E.EDITABLE_CONTEXT,{value:l,editing:u,placeholder:(0,t.computed)(()=>a.placeholder),disabled:(0,t.computed)(()=>a.disabled),readOnly:(0,t.computed)(()=>a.readOnly),required:(0,t.computed)(()=>a.required),maxLength:(0,t.computed)(()=>a.maxLength),activationMode:(0,t.computed)(()=>a.activationMode),submitMode:(0,t.computed)(()=>a.submitMode),inputRef:v,previewRef:p,returningFocus:o,setValue:c,activate:y,submit:h,cancel:b}),(e,q)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-editable","data-part":"root","data-skdx-component":"editable","data-state":u.value?"editing":"preview","data-empty":l.value===""?"":void 0,"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0},[(0,t.renderSlot)(e.$slots,"default")],8,B))}});exports.default=O;
+const B=require("../utils/id.cjs"),E=require("./context.cjs"),N=require("./EditableAnatomy.vue.cjs");let e=require("vue");var R=["data-state","data-empty","data-disabled","data-readonly","data-invalid"],_=["name","form","disabled","^value"],S=(0,e.defineComponent)({inheritAttrs:!1,__name:"Editable",props:{value:{},defaultValue:{default:""},multiline:{type:Boolean,default:!1},editing:{type:Boolean,default:void 0},defaultEditing:{type:Boolean,default:!1},placeholder:{},finalFocusEl:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},maxLength:{},activationMode:{default:"click"},submitMode:{default:"both"},selectOnFocus:{type:Boolean,default:!0},name:{},form:{},showControls:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit","value-revert","update:editing","edit-change"],setup(u,{expose:w,emit:q}){const a=u,d=q,p=(0,e.ref)(a.defaultValue),i=(0,e.computed)(()=>a.value===void 0?p.value:a.value),b=(0,e.ref)(a.defaultEditing),l=(0,e.computed)(()=>a.editing===void 0?b.value:a.editing),n=(0,e.ref)(null),r=(0,e.ref)(null),c=(0,e.ref)(!1);let s=i.value;const k=(0,e.computed)(()=>l.value?s:i.value);function y(t){t!==i.value&&(a.value===void 0&&(p.value=t),d("update:value",t),d("value-change",t))}function v(t){t!==l.value&&(a.editing===void 0&&(b.value=t),d("update:editing",t),d("edit-change",t))}function V(){a.disabled||a.readOnly||l.value||v(!0)}(0,e.watch)(l,t=>{t&&(s=i.value)},{flush:"sync"});function h(){const t=i.value,o=s;y(o),v(!1),d("value-revert",{value:o,previousValue:t})}function x(){l.value&&h()}function O(){if(l.value){if(a.required&&i.value.trim()===""){h();return}v(!1),d("value-commit",i.value)}}function f(){const t=n.value;t&&(t.focus(),a.selectOnFocus?t.select():t.setSelectionRange(t.value.length,t.value.length))}function A(){const t=document.activeElement;t&&t!==document.body||(c.value=!0,(a.finalFocusEl?.()??r.value)?.focus(),c.value=!1)}(0,e.watch)(l,async t=>{await(0,e.nextTick)(),t===l.value&&(t?f():A())}),(0,e.onMounted)(()=>{l.value&&f()});const M=B.nextId("editable-editor"),F=B.nextId("editable-label"),I=(0,e.ref)(!1),g=(0,e.computed)(()=>E.splitPlaceholder(a.placeholder)),m=(0,e.useAttrs)(),L=(0,e.computed)(()=>m["aria-label"]),C=(0,e.computed)(()=>m["aria-labelledby"]),P=(0,e.computed)(()=>{const{"aria-label":t,"aria-labelledby":o,...T}=m;return T});return(0,e.provide)(E.EDITABLE_CONTEXT,{value:i,editing:l,editPlaceholder:(0,e.computed)(()=>g.value.edit),previewPlaceholder:(0,e.computed)(()=>g.value.preview),editorId:M,labelId:F,labelPresent:I,disabled:(0,e.computed)(()=>a.disabled),readOnly:(0,e.computed)(()=>a.readOnly),required:(0,e.computed)(()=>a.required),invalid:(0,e.computed)(()=>a.invalid),maxLength:(0,e.computed)(()=>a.maxLength),activationMode:(0,e.computed)(()=>a.activationMode),submitMode:(0,e.computed)(()=>a.submitMode),inputRef:n,previewRef:r,returningFocus:c,setValue:y,activate:V,submit:O,cancel:x}),w({focus:()=>n.value?f():r.value?.focus()}),(t,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({class:"skdx-editable","data-part":"root","data-skdx-component":"editable","data-state":l.value?"editing":"preview","data-empty":i.value===""?"":void 0,"data-disabled":u.disabled?"":void 0,"data-readonly":u.readOnly?"":void 0,"data-invalid":u.invalid?"":void 0},P.value),[(0,e.renderSlot)(t.$slots,"default",{},()=>[(0,e.createVNode)(N.default,{multiline:u.multiline,"show-controls":u.showControls,"aria-label":L.value,"aria-labelledby":C.value},null,8,["multiline","show-controls","aria-label","aria-labelledby"])]),u.name?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,type:"text","aria-hidden":"true",tabindex:"-1",name:u.name,form:u.form,disabled:u.disabled,"^value":k.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,_)):(0,e.createCommentVNode)("",!0)],16,R))}});exports.default=S;

package/dist/editable/Editable.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{EDITABLE_CONTEXT as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as d,nextTick as l,onMounted as u,openBlock as i,provide as o,ref as n,renderSlot as v,watch as c}from"vue";var s=["data-state","data-empty","data-disabled","data-readonly"],r=/* @__PURE__ */d({__name:"Editable",props:{value:{default:void 0},defaultValue:{default:""},editing:{type:Boolean,default:void 0},defaultEditing:{type:Boolean,default:!1},placeholder:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxLength:{default:void 0},activationMode:{default:"click"},submitMode:{default:"both"},selectOnFocus:{type:Boolean,default:!0}},emits:["update:value","value-change","value-commit","update:editing","edit-change"],setup(d,{emit:r}){const f=d,p=r,m=n(f.defaultValue),g=a(()=>void 0===f.value?m.value:f.value),y=n(f.defaultEditing),b=a(()=>void 0===f.editing?y.value:f.editing),h=n(null),B=n(null),x=n(!1);let E=g.value;function O(e){e!==g.value&&(void 0===f.value&&(m.value=e),p("update:value",e),p("value-change",e))}function M(e){e!==b.value&&(void 0===f.editing&&(y.value=e),p("update:editing",e),p("edit-change",e))}function k(){const e=h.value;e&&(e.focus(),f.selectOnFocus?e.select():e.setSelectionRange(e.value.length,e.value.length))}return c(b,async e=>{await l(),e===b.value&&(e?k():function(){const e=document.activeElement;e&&e!==document.body||(x.value=!0,B.value?.focus(),x.value=!1)}())}),u(()=>{b.value&&k()}),o(e,{value:g,editing:b,placeholder:a(()=>f.placeholder),disabled:a(()=>f.disabled),readOnly:a(()=>f.readOnly),required:a(()=>f.required),maxLength:a(()=>f.maxLength),activationMode:a(()=>f.activationMode),submitMode:a(()=>f.submitMode),inputRef:h,previewRef:B,returningFocus:x,setValue:O,activate:function(){f.disabled||f.readOnly||b.value||(E=g.value,M(!0))},submit:function(){if(b.value){if(f.required&&""===g.value.trim())return O(E),void M(!1);M(!1),p("value-commit",g.value)}},cancel:function(){b.value&&(O(E),M(!1))}}),(e,a)=>(i(),t("div",{class:"skdx-editable","data-part":"root","data-skdx-component":"editable","data-state":b.value?"editing":"preview","data-empty":""===g.value?"":void 0,"data-disabled":d.disabled?"":void 0,"data-readonly":d.readOnly?"":void 0},[v(e.$slots,"default")],8,s))}});export{r as default};
+import{nextId as e}from"../utils/id.js";import{EDITABLE_CONTEXT as a,splitPlaceholder as l}from"./context.js";import t from"./EditableAnatomy.vue.js";import{computed as i,createCommentVNode as d,createElementBlock as o,createVNode as n,defineComponent as u,mergeProps as s,nextTick as r,onMounted as v,openBlock as c,provide as m,ref as f,renderSlot as p,useAttrs as b,watch as y}from"vue";var h=["data-state","data-empty","data-disabled","data-readonly","data-invalid"],g=["name","form","disabled","^value"],x=/* @__PURE__ */u({inheritAttrs:!1,__name:"Editable",props:{value:{},defaultValue:{default:""},multiline:{type:Boolean,default:!1},editing:{type:Boolean,default:void 0},defaultEditing:{type:Boolean,default:!1},placeholder:{},finalFocusEl:{},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},maxLength:{},activationMode:{default:"click"},submitMode:{default:"both"},selectOnFocus:{type:Boolean,default:!0},name:{},form:{},showControls:{type:Boolean,default:!1}},emits:["update:value","value-change","value-commit","value-revert","update:editing","edit-change"],setup(u,{expose:x,emit:B}){const w=u,E=B,O=f(w.defaultValue),k=i(()=>void 0===w.value?O.value:w.value),M=f(w.defaultEditing),V=i(()=>void 0===w.editing?M.value:w.editing),C=f(null),F=f(null),P=f(!1);let q=k.value;const A=i(()=>V.value?q:k.value);function I(e){e!==k.value&&(void 0===w.value&&(O.value=e),E("update:value",e),E("value-change",e))}function L(e){e!==V.value&&(void 0===w.editing&&(M.value=e),E("update:editing",e),E("edit-change",e))}function T(){const e=k.value,a=q;I(a),L(!1),E("value-revert",{value:a,previousValue:e})}function j(){const e=C.value;e&&(e.focus(),w.selectOnFocus?e.select():e.setSelectionRange(e.value.length,e.value.length))}y(V,e=>{e&&(q=k.value)},{flush:"sync"}),y(V,async e=>{await r(),e===V.value&&(e?j():function(){const e=document.activeElement;e&&e!==document.body||(P.value=!0,(w.finalFocusEl?.()??F.value)?.focus(),P.value=!1)}())}),v(()=>{V.value&&j()});const N=e("editable-editor"),R=e("editable-label"),_=f(!1),S=i(()=>l(w.placeholder)),D=b(),X=i(()=>D["aria-label"]),$=i(()=>D["aria-labelledby"]),z=i(()=>{const{"aria-label":e,"aria-labelledby":a,...l}=D;return l});return m(a,{value:k,editing:V,editPlaceholder:i(()=>S.value.edit),previewPlaceholder:i(()=>S.value.preview),editorId:N,labelId:R,labelPresent:_,disabled:i(()=>w.disabled),readOnly:i(()=>w.readOnly),required:i(()=>w.required),invalid:i(()=>w.invalid),maxLength:i(()=>w.maxLength),activationMode:i(()=>w.activationMode),submitMode:i(()=>w.submitMode),inputRef:C,previewRef:F,returningFocus:P,setValue:I,activate:function(){w.disabled||w.readOnly||V.value||L(!0)},submit:function(){if(V.value){if(w.required&&""===k.value.trim())return void T();L(!1),E("value-commit",k.value)}},cancel:function(){V.value&&T()}}),x({focus:()=>C.value?j():F.value?.focus()}),(e,a)=>(c(),o("div",s({class:"skdx-editable","data-part":"root","data-skdx-component":"editable","data-state":V.value?"editing":"preview","data-empty":""===k.value?"":void 0,"data-disabled":u.disabled?"":void 0,"data-readonly":u.readOnly?"":void 0,"data-invalid":u.invalid?"":void 0},z.value),[p(e.$slots,"default",{},()=>[n(t,{multiline:u.multiline,"show-controls":u.showControls,"aria-label":X.value,"aria-labelledby":$.value},null,8,["multiline","show-controls","aria-label","aria-labelledby"])]),u.name?(c(),o("input",{key:0,type:"text","aria-hidden":"true",tabindex:"-1",name:u.name,form:u.form,disabled:u.disabled,"^value":A.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,g)):d("",!0)],16,h))}});export{x as default};

package/dist/editable/EditableAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./EditableAnatomy.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;