One at a Time <mv-one-at-a-time>

node scripts/add.mjs one-at-a-time --out ./src/marvelous

<mv-one-at-a-time>
  <form>
    <label>Email <input name="email" type="email" required></label>
    <label>VAT number <input name="vat" required data-one-at-a-time-message="Your VAT number is needed to issue invoices."></label>
    <button>Continue</button>
  </form>
</mv-one-at-a-time>

<div id="oat-demo" style="width:min(100%,62rem);margin-inline:auto">
  <style>
    #oat-demo .oat-layout { display:grid; grid-template-columns:minmax(0,1fr) 16.5rem; gap:1.25rem; align-items:start }
    #oat-demo .oat-card { min-width:0; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm) }
    #oat-demo .oat-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 1.25rem; border-bottom:1px solid var(--mv-border) }
    #oat-demo .oat-head h3 { margin:0; font-size:1rem; letter-spacing:-.01em }
    #oat-demo .oat-head p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #oat-demo form { display:grid; gap:1.125rem; padding:1.25rem }
    #oat-demo .oat-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
    #oat-demo .oat-row[data-cols="3"] { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) }
    #oat-demo .oat-foot { display:flex; align-items:center; justify-content:flex-end; gap:.5rem; margin:.25rem -1.25rem -1.25rem; padding:.875rem 1.25rem; border-top:1px solid var(--mv-border); border-radius:0 0 var(--mv-radius-xl) var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #oat-demo .oat-foot .oat-note { order:-2; margin-right:auto; color:var(--mv-fg-muted); font-size:.75rem }
    #oat-demo .oat-foot [formnovalidate] { order:-1 }
    #oat-demo .oat-done { display:none; align-items:center; gap:.75rem; margin:1.25rem 1.25rem 0; padding:.75rem 1rem; border:1px solid color-mix(in oklab, var(--mv-success) 35%, var(--mv-border)); border-radius:var(--mv-radius-lg); background:color-mix(in oklab, var(--mv-success) 7%, var(--mv-surface)); font-size:.8125rem }
    #oat-demo .oat-done[data-show] { display:flex }
    #oat-demo .oat-done svg { flex:none; width:1.125rem; height:1.125rem; color:var(--mv-success) }
    #oat-demo .oat-side { position:sticky; top:1rem; display:grid; gap:1rem; padding:1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface-raised); box-shadow:var(--mv-shadow-sm); font-size:.8125rem }
    #oat-demo .oat-side h4 { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:0; font-size:.8125rem; font-weight:600 }
    #oat-demo .oat-k { color:var(--mv-fg-muted); font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
    #oat-demo .oat-queue { display:grid; gap:.375rem; margin:0; padding:0; list-style:none }
    #oat-demo .oat-queue li { display:flex; align-items:baseline; gap:.5rem; color:var(--mv-fg-muted); font-size:.75rem }
    #oat-demo .oat-queue li b { color:var(--mv-fg); font-weight:500 }
    #oat-demo .oat-queue li[data-now] b { color:var(--mv-accent) }
    #oat-demo .oat-queue li span { margin-left:auto; white-space:nowrap }
    #oat-demo .oat-queue .oat-empty { color:var(--mv-fg-subtle) }
    #oat-demo .oat-log { display:grid; gap:.25rem; margin:0; padding:0; list-style:none; font:.6875rem/1.45 var(--mv-font-mono); color:var(--mv-fg-muted) }
    #oat-demo .oat-log li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #oat-demo .oat-log li b { color:var(--mv-fg); font-weight:500 }
    #oat-demo .oat-sep { height:1px; background:var(--mv-border) }
    #oat-demo .oat-actions { display:flex; flex-wrap:wrap; gap:.5rem }
    #oat-demo .mv-choice { font-size:.8125rem }
    #oat-demo .oat-hint { margin:.875rem 0 0; color:var(--mv-fg-muted); font-size:.75rem; text-align:center }
    @media (max-width:52rem) {
      #oat-demo .oat-layout { grid-template-columns:minmax(0,1fr) }
      #oat-demo .oat-side { position:static }
    }
    @media (max-width:34rem) {
      #oat-demo .oat-row, #oat-demo .oat-row[data-cols="3"] { grid-template-columns:minmax(0,1fr) }
    }
  </style>

  <div class="oat-layout">
    <section class="oat-card" aria-labelledby="oat-title">
      <div class="oat-head">
        <div>
          <h3 id="oat-title">Billing details</h3>
          <p>Kestrel Labs workspace · Step 3 of 3</p>
        </div>
        <span class="mv-badge" data-variant="secondary">Pro · $240 / month</span>
      </div>
      <div class="oat-done" id="oat-done" role="status">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9.5"/><path d="m8 12.5 2.8 2.8L16.5 9.5"/></svg>
        <span id="oat-done-text">Workspace created. The first invoice goes out on October 1, 2026.</span>
      </div>

      <mv-one-at-a-time id="oat">
        <form id="oat-form" aria-labelledby="oat-title">
          <div class="mv-field">
            <label class="mv-label" for="oat-company" data-required>Company name</label>
            <input class="mv-input" id="oat-company" name="company" value="Kestrel Labs GmbH" required autocomplete="organization">
          </div>

          <div class="mv-field">
            <label class="mv-label" for="oat-email" data-required>Billing email</label>
            <input class="mv-input" id="oat-email" name="email" type="email" value="dana.whitfield.example.com" required autocomplete="email" spellcheck="false">
          </div>

          <div class="oat-row">
            <div class="mv-field">
              <label class="mv-label" for="oat-country" data-required>Country</label>
              <select class="mv-select" id="oat-country" name="country" required autocomplete="country-name">
                <option value="">Select a country</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
                <option value="DE" selected>Germany</option>
                <option value="FR">France</option>
                <option value="NL">Netherlands</option>
                <option value="GB">United Kingdom</option>
                <option value="JP">Japan</option>
              </select>
            </div>
            <div class="mv-field">
              <label class="mv-label" for="oat-vat">VAT number</label>
              <input class="mv-input" id="oat-vat" name="vat" placeholder="DE123456789" autocomplete="off" spellcheck="false">
            </div>
          </div>

          <div class="oat-row" data-cols="3">
            <div class="mv-field">
              <label class="mv-label" for="oat-street" data-required>Street address</label>
              <input class="mv-input" id="oat-street" name="street" value="Torstraße 128" required autocomplete="street-address">
            </div>
            <div class="mv-field">
              <label class="mv-label" for="oat-zip" data-required>Postal code</label>
              <input class="mv-input" id="oat-zip" name="zip" value="10119" required pattern="[0-9A-Za-z \-]{3,10}" autocomplete="postal-code" data-one-at-a-time-message="Use the postal code printed on your company registration.">
            </div>
            <div class="mv-field">
              <label class="mv-label" for="oat-city" data-required>City</label>
              <input class="mv-input" id="oat-city" name="city" value="Berlin" required autocomplete="address-level2">
            </div>
          </div>

          <div class="mv-field">
            <label class="mv-label" for="oat-phone" data-optional="optional">Phone</label>
            <input class="mv-input" id="oat-phone" name="phone" type="tel" placeholder="+49 30 1234567" autocomplete="tel"
              data-one-at-a-time-suggest="Your onboarding specialist can call you to set up SSO and invite your team.">
          </div>

          <label class="mv-choice">
            <input type="checkbox" class="mv-checkbox" id="oat-terms" name="terms" required
              data-one-at-a-time-label="Terms of Service"
              data-one-at-a-time-message="Accept the Terms of Service and the Data Processing Agreement to create the workspace.">
            I agree to the Terms of Service and the Data Processing Agreement
          </label>

          <div class="oat-foot">
            <span class="oat-note">You can change this later in Settings.</span>
            <!-- The primary button comes first in the DOM: it is the one Enter submits with. -->
            <button type="submit" class="mv-button">Create workspace</button>
            <button type="submit" class="mv-button" data-variant="ghost" formnovalidate>Save draft</button>
          </div>
        </form>
      </mv-one-at-a-time>
    </section>

    <aside class="oat-side" aria-label="Validation monitor">
      <h4>Still to check <span class="mv-badge" data-variant="secondary" data-shape="pill" id="oat-count">-</span></h4>
      <ol class="oat-queue" id="oat-queue"><li class="oat-empty">Nothing yet</li></ol>
      <div class="oat-sep"></div>
      <div style="display:grid;gap:.5rem">
        <span class="oat-k">Events</span>
        <ol class="oat-log" id="oat-log"><li>Press <b>Create workspace</b></li></ol>
      </div>
      <div class="oat-sep"></div>
      <label class="mv-choice" data-control="end">
        <input type="checkbox" role="switch" class="mv-switch" id="oat-auto" checked>
        <span class="mv-choice-text"><span class="mv-choice-title">Move on after a choice</span></span>
      </label>
      <div class="oat-actions">
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="oat-all">Show everything</button>
        <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="oat-reset">Start over</button>
      </div>
    </aside>
  </div>
  <p class="oat-hint">Fix the field in the prompt, then press Enter or Continue · Esc hides the prompt · the VAT rule only applies to EU countries</p>

  <script type="module">
    const oat = document.getElementById("oat");
    const form = document.getElementById("oat-form");
    const $ = (id) => document.getElementById(id);
    const EU = new Set(["DE", "FR", "NL"]);

    // App rules: a priority above the native checks, because invoices cannot be issued without it.
    oat.rules = [
      {
        id: "vat",
        field: "vat",
        priority: 10,
        message: "Your company’s VAT number is needed to issue invoices in the EU.",
        validate: (value, { get }) => !EU.has(get("country")) || /^[A-Z]{2}[0-9A-Z]{8,12}$/.test(value.replace(/\s+/g, "").toUpperCase()) || (value.trim() ? "That doesn’t look like an EU VAT number (e.g. DE123456789)." : false),
      },
    ];

    await customElements.whenDefined("mv-one-at-a-time");

    let fresh = true;
    const log = (name, text) => {
      const list = $("oat-log");
      if (fresh) { list.replaceChildren(); fresh = false; }
      const li = document.createElement("li");
      const b = document.createElement("b");
      b.textContent = name;
      li.append(b, ` ${text}`);
      list.prepend(li);
      while (list.children.length > 5) list.lastElementChild.remove();
    };

    const renderQueue = () => {
      const issues = oat.issues;
      const q = $("oat-queue");
      $("oat-count").textContent = issues.length ? `${issues.length} left` : "clear";
      $("oat-count").dataset.variant = issues.length ? "secondary" : "success";
      if (!issues.length) {
        q.replaceChildren(Object.assign(document.createElement("li"), { className: "oat-empty", textContent: "Nothing left to check" }));
        return;
      }
      q.replaceChildren(...issues.map((i, n) => {
        const li = document.createElement("li");
        if (n === 0) li.dataset.now = "";
        const b = document.createElement("b");
        b.textContent = i.label;
        const s = document.createElement("span");
        s.textContent = n === 0 ? "asking" : i.blocking ? "needed" : "optional";
        li.append(b, s);
        return li;
      }));
    };

    oat.addEventListener("mv-present", (e) => {
      log("mv-present", `${e.detail.issue.label} · ${e.detail.remaining} more`);
      queueMicrotask(renderQueue);
    });
    oat.addEventListener("mv-skip", (e) => log("mv-skip", e.detail.issue.label));
    oat.addEventListener("mv-all-clear", (e) => {
      log("mv-all-clear", e.detail.skipped.length ? `${e.detail.skipped.length} skipped` : "submitting");
      queueMicrotask(renderQueue);
    });
    form.addEventListener("submit", (e) => {
      e.preventDefault(); // demo: no real request
      if (e.submitter?.formNoValidate) { log("submit", "draft saved, not checked"); return; }
      $("oat-done").dataset.show = "";
      log("submit", "workspace created");
    });

    $("oat-auto").addEventListener("change", (e) => { oat.manual = !e.target.checked; });
    $("oat-all").addEventListener("click", () => oat.showAll());
    $("oat-reset").addEventListener("click", () => {
      // A real reset also clears the browser's “user interacted” flags (and the component's state).
      form.reset();
      delete $("oat-done").dataset.show;
      fresh = true;
      log("reset", "form restored");
      setTimeout(() => { oat.present({ focus: false, scroll: false }); renderQueue(); });
    });

    // Show the mechanic right away, without moving focus or scrolling the page.
    oat.present({ focus: false, scroll: false });
    renderQueue();
  </script>
</div>