#Editable Text

Moves safely between reading and editing a short value while retaining save, cancel, validation, and focus-return paths.

npm install @a3s-lab/ui

<div
  class="editable-text"
  data-editable-required
  data-editable-save-delay="1200"
>
  <div data-editable-display>
    <span data-editable-value>Release notes</span>
    <button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="edit">Edit</button>
  </div>
  <form data-editable-form>
    <input class="input" value="Release notes" aria-label="Title" maxlength="80" />
    <button type="submit" class="btn" data-size="sm" data-editable-action="save">Save</button>
    <button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="cancel">Cancel</button>
  </form>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<div
  class="editable-text"
  data-editable-required
  data-editable-save-delay="1200"
>
  <div data-editable-display>
    <span data-editable-value>Release notes</span>
    <button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="edit">Edit</button>
  </div>
  <form data-editable-form>
    <input class="input" value="Release notes" aria-label="Title" maxlength="80" />
    <button type="submit" class="btn" data-size="sm" data-editable-action="save">Save</button>
    <button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="cancel">Cancel</button>
  </form>
</div>

data-editable-required rejects empty commits into error with aria-invalid. data-editable-save-delay keeps saving / aria-busy until the host delay elapses so duplicate edits cannot race acceptance.

#Standalone controller

import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/editable-text";

const component = document.querySelector(".editable-text");
component.getState();

The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

#Contract

#Product boundary

Inline editing suits one low-risk value. Multi-field changes, long content, protected actions, and approval work belong in a full form or dialog flow.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Editing, saving, and cancelling are keyboard reachable. Escape restores the prior value and returns focus to Edit. Empty required commits stay in error with aria-invalid. While aria-busy="true", the field stays disabled so duplicate saves cannot race the first acceptance.