Editable

Accessible name of the field (e.g. "Task title"). Also prefixes the control buttons' labels.

Accessible labels of the control buttons.

Text shown (muted) when the value is empty.

Form field name: renders a hidden `<input>` carrying the committed value.

Start in edit mode.

The initial committed text when `value` isn't passed.

Disable editing; the preview is dimmed and not focusable.

Whether the component is editing. Pass it to control edit mode.

Mark the field invalid (red edit border, `aria-invalid`).

Show the value without allowing edits.

The committed text. Pass it to control the value; the component still owns the draft while editing and adopts a changed `value`.

Hover / editing tint. `none` for rows that paint their own hover.

Show an edit button beside the preview (on hover / focus) and save / cancel buttons while editing.

How edit mode looks: `seamless` turns the text editable in place (no border or fill); `field` shows an input box, for form-like rows.

Sit inline with the surrounding text instead of taking the line.

Pull the hover / edit box outward by its padding, so the text lines up with the content around it (a title with its meta row, a word in a sentence). Turn it off at an edge with no room for the box (an edge-to-edge row, an `overflow: hidden` cell).

What enters edit mode from the preview.

Maximum number of characters.

Allow line breaks: Enter inserts a newline and Mod+Enter (⌘/Ctrl+Enter) submits. Single-line text still wraps; newlines are stripped.

Submitting an empty (or whitespace-only) draft reverts to the previous value instead of committing it.

Where the caret lands when editing starts.

What commits the draft.

Called when edit mode starts or ends.

Called with the draft on every edit keystroke.

Called with the new value when a submit changes it.

Called with the kept value when an edit is cancelled or an empty draft reverts.

Bound reference to the root element (`bind:this`).

Per-slot style and HTML-attribute overrides.

Astro / vanilla: serialize the props into `data-editable-config` so the client runtime hydrates this instance and `getPindoba(el, "editable")` can `update()` it. Frameworks with their own reactivity don't need it.