Save status

A text-only presentation for state the host already knows.

State and label contract

Use .save-status[data-save-state] for a stable text line beside an editor’s controls. The host owns the state and visible wording. The CSS hook never observes an input, request, fetch result or clock.

Host state	Default label	Meaning
`ready`	Ready	No claim of a newly confirmed save.
`dirty`	Unsaved changes	Current edits are not confirmed saved.
`saving`	Saving…	The host says a save is pending.
`saved`	Draft saved	The host confirmed the stated save scope.
`failed`	Couldn’t save draft	The host reported a rejection or failure.
`unknown`	Save not confirmed	The host cannot confirm the save outcome.

Use the exact scope in a success label. For example, if text saved but rules or collaborators remain pending, show Text saved and put Rules and collaborators still need saving. in a separate supporting element inside the same status region so both messages are announced together. Do not claim the whole draft is saved.

Markup

<div class="cluster items-baseline">
  <button
    type="button"
  >
    Done editing
  </button>
  <div role="status"
       aria-atomic="true">
    <p
      class="save-status"
      data-save-status
      data-save-state="saved"
    >
      Text saved
    </p>
    <p>Rules and collaborators
      still need saving.</p>
  </div>
</div>
<p>
  Publishing and editing
  completion are separate
  actions.
</p>

The component supplies no layout. The host places the text line beside its own controls. Add items-baseline to a flex parent such as cluster when the status should share a text baseline with adjacent buttons or text. role="status" supplies a polite status region containing the short label and essential supporting feedback; retain one region for each independent editor and do not mirror the same event in a second live region.

State and announcement ownership

Update the state and visible label together from the host’s explicit result. Never derive state from the label text, fetch completion or a timeout.
Keep the status element at a stable DOM location. Do not move focus to it.
Announce meaningful state transitions, not every keystroke. The host should set dirty once when the editor first becomes dirty, not on each input event.
Color reinforces the words. The labels remain meaningful when colors are unavailable or overridden in forced-colors mode.
Keep recovery instructions outside the short status line. Keep retry, reload, publish and Done editing controls outside the status region.
A saved draft is neither published nor necessarily finished being edited.

Downstream ownership

Templ #21 may adopt this text and state hook in a later change; its component markup should not bake in layout primitives. Baseplate #1203 remains responsible for autosave protocol, request identity, races, persistence, errors and scope. Live Wires does not duplicate those responsibilities. This manual and its reference simulation are presentation examples, not a production save implementation.

Reference simulation

Open the Save Status reference to inspect all states and deterministic simulated scenarios in inherited, light and dark color schemes.