Editable

<%# Markup for the editable (inline editing) demo.
    Click / Enter / F2 on the display element (a button) enters edit mode, focusing the
    input and selecting all. The library handles mode switching (data-mode), focus /
    select-all, and the commit event; the look lives in demo.css.
    Two variants are shown:
      1. Single-line <input>: Enter saves, Escape cancels.
      2. Multiline <textarea>: Enter inserts a newline, Ctrl+Enter saves, Escape cancels.
    submitOnBlur=true also saves on blur for both. %>
<div class="editable-demo">
  <%# 1. Single-line inline edit. %>
  <div class="editable" data-controller="stimeo--editable"
       data-stimeo--editable-submit-on-blur-value="true">
    <span class="editable__hint"><%= t("components.editable.demo.hint") %></span>
    <button
      type="button"
      class="editable__display"
      aria-label="<%= t("components.editable.demo.aria_label") %>"
      data-stimeo--editable-target="display"
      data-action="click->stimeo--editable#edit keydown->stimeo--editable#onDisplayKeydown">
      <%= t("components.editable.demo.value") %>
    </button>
    <input
      type="text"
      class="editable__input"
      hidden
      aria-label="<%= t("components.editable.demo.aria_label") %>"
      data-stimeo--editable-target="input"
      data-action="keydown->stimeo--editable#onKeydown blur->stimeo--editable#onBlur" />
  </div>

  <%# 2. Multiline inline edit. The controller detects the <textarea> and treats Enter as a
      newline, so saving is Ctrl+Enter (or blur). The display uses white-space: pre-line so
      saved line breaks render. %>
  <div class="editable" data-controller="stimeo--editable"
       data-stimeo--editable-submit-on-blur-value="true">
    <span class="editable__hint"><%= t("components.editable.demo.multiline.hint") %></span>
    <button
      type="button"
      class="editable__display editable__display--multiline"
      aria-label="<%= t("components.editable.demo.multiline.aria_label") %>"
      data-stimeo--editable-target="display"
      data-action="click->stimeo--editable#edit
                   keydown->stimeo--editable#onDisplayKeydown"><%= t(
        "components.editable.demo.multiline.value"
      ) %></button>
    <textarea
      class="editable__input editable__input--multiline"
      hidden
      rows="3"
      aria-label="<%= t("components.editable.demo.multiline.aria_label") %>"
      data-stimeo--editable-target="input"
      data-action="keydown->stimeo--editable#onKeydown blur->stimeo--editable#onBlur"></textarea>
  </div>
</div>

/*
 * Presentation-only styles for the editable demo.
 * The library switches modes via data-mode and each element's hidden attribute.
 * Here we give the display element an "editable-looking" appearance and style the
 * input while editing.
 */

.editable-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.editable {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 16rem;
}

.editable__hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.editable__display {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 1px dashed transparent;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--fg, var(--color-text));
  font: inherit;
  font-weight: 600;
  cursor: text;
}

.editable__display:hover {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}

/* Multiline display: render saved line breaks (textContent keeps the newlines). */
.editable__display--multiline {
  white-space: pre-line;
}

.editable__input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--accent, var(--color-primary));
  border-radius: 0.375rem;
  font: inherit;
  color: var(--fg, var(--color-text));
}

.editable__input--multiline {
  resize: vertical;
}