Stepped flow

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Stepped flow</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../layout-stepped-flow/#layout-stepped-flow">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow" data-kit-holds="summary" id="layout-stepped-flow-current-summary">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
      </ol>
      <form data-kit-region="current-step" id="current-summary-preview-step" aria-labelledby="current-summary-preview-title">
        <h2 id="current-summary-preview-title">Preview hirer import</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group"><label for="current-summary-billing-email">Billing email</label><input id="current-summary-billing-email" name="billing-email" type="email" value="aisha@oakmereprimary.org"><output for="current-summary-billing-email">aisha@oakmereprimary.org</output></div>
      </form>
      <aside data-kit-region="summary">
        <h2>Import summary</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">File</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Uploaded</dt><dd data-kit-region="value">hirers.csv</dd></dl></div>
            <a href="../form/" aria-label="Change File">Change</a>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Mapping</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Columns</dt><dd data-kit-region="value">All 9 columns matched to your fields</dd></dl></div>
            <a href="../form/" aria-label="Change Mapping">Change</a>
          </div>
        </div>
        <div data-kit-role="headed-region" aria-current="step">
          <h3 data-kit-region="heading">Preview</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Billing email</dt><dd data-kit-region="value"><span data-kit-region="email"><span><span>aisha@</span><wbr /><span>oakmereprimary.org</span></span></span></dd></dl></div>
          </div>
        </div>
      </aside>
    </div>
    <div data-kit-layout="stepped-flow" data-kit-holds="summary">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
      </ol>
      <aside data-kit-region="summary">
        <h2>Import summary</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">File</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Uploaded</dt><dd data-kit-region="value">hirers-2025-05-12.csv, <span data-kit-role="amount">42&nbsp;rows</span> found</dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Ready to import</dt><dd data-kit-region="value"><span data-kit-role="amount">40&nbsp;rows</span></dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Matched to hirers you have</dt><dd data-kit-region="value"><span data-kit-role="amount">2&nbsp;rows</span></dd></dl>
              <dl data-kit-role="labelled-fact" id="summary-row-17"><dt data-kit-region="name">Row 17, Riverside Scouts</dt><dd data-kit-region="value">Matches two hirers: Riverside Scouts and Riverside Scout Group</dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Last import</dt><dd data-kit-region="value"><time datetime="2025-02-12">12 February 2025</time>, <span data-kit-role="amount">38&nbsp;hirers</span></dd></dl>
            </div>
            <a href="../form/" aria-label="Change File">Change</a>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Mapping</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Columns</dt><dd data-kit-region="value">All 9 columns matched to your fields</dd></dl>
            </div>
            <a href="../form/" aria-label="Change Mapping">Change</a>
          </div>
        </div>
      </aside>
      <form data-kit-region="current-step" id="preview-step" aria-labelledby="preview-title">
        <h2 id="preview-title">Preview hirer import</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group"><label for="preview-billing-email">Billing email</label><input id="preview-billing-email" name="billing-email" type="email" value="aisha@oakmereprimary.org"><output for="preview-billing-email">aisha@oakmereprimary.org</output></div>
        <div data-kit-role="form-group"><label for="preview-telephone">Telephone</label><input id="preview-telephone" name="telephone" type="tel" value="01632 960 123"><output for="preview-telephone">01632 960 123</output></div>
        <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Oakmere Primary School</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><span data-kit-role="amount">40&nbsp;rows</span> ready ·&nbsp;Row 17 needs a decision</span></p></div></div></div></div></article>
        <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Import Oakmere Primary School">
          <h3 data-kit-region="subject">Oakmere Primary School</h3>
          <p data-kit-region="consequence">Importing adds the hirer and starts their first agreement.</p>
          <p data-kit-region="effective-time">The import runs as soon as you continue.</p>
          <p data-kit-region="correction-path">You can remove an imported hirer for 30 days after the import.</p>
        </section>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><div data-kit-region="refusal"><div data-kit-role="refusal" id="preview-refused" role="alert" aria-atomic="true">
          <p data-kit-region="line">Import is refused while row 17 matches more than one hirer:</p>
          <ul data-kit-region="causes"><li><a href="#summary-row-17">Row 17, Riverside Scouts</a></li></ul>
        </div>
      </div>
      <a href="../form/" data-kit-role="way-back"><span data-kit-region="label">Back to mapping</span></a><button type="submit" form="preview-step" data-kit-role="primary-action"><span data-kit-region="label">Import hirers</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </div>
    <div data-kit-layout="stepped-flow" id="layout-stepped-flow-result">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Result</span></li>
      </ol>
      <form data-kit-region="current-step" id="result-step" aria-labelledby="result-title">
        <h2 id="result-title">Hirers imported</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Oakmere Primary School</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><span data-kit-role="amount">40&nbsp;rows</span> imported ·&nbsp;<span data-kit-role="amount">2&nbsp;rows</span> skipped as hirers you have</span></p></div></div></div></div></article>
        <div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Undo import</span></button></div>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><button type="submit" form="result-step" data-kit-role="primary-action"><span data-kit-region="label">Finish</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </div>
    <div data-kit-layout="stepped-flow" id="layout-stepped-flow-empty-region">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
      </ol>
      <aside data-kit-region="summary"></aside>
      <form data-kit-region="current-step" id="empty-region-preview-step" aria-labelledby="empty-region-preview-title">
        <h2 id="empty-region-preview-title">Preview hirer import</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><a href="../form/" data-kit-role="way-back"><span data-kit-region="label">Back to mapping</span></a><button type="submit" form="empty-region-preview-step" data-kit-role="primary-action"><span data-kit-region="label">Import hirers</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Stepped flow</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-no-summary">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
      </ol>
      <form data-kit-region="current-step" id="stepped-flow-no-summary-step" aria-labelledby="stepped-flow-no-summary-title">
        <h2 id="stepped-flow-no-summary-title">Preview hirer import</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group"><label for="stepped-flow-no-summary-email">Billing email</label><input id="stepped-flow-no-summary-email" name="billing-email" type="email" value="aisha@oakmereprimary.org"><output for="stepped-flow-no-summary-email">aisha@oakmereprimary.org</output></div>
        <div data-kit-role="form-group"><label for="stepped-flow-no-summary-telephone">Telephone</label><input id="stepped-flow-no-summary-telephone" name="telephone" type="tel" value="01632 960 123"><output for="stepped-flow-no-summary-telephone">01632 960 123</output></div>
        <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Import Oakmere Primary School">
          <h3 data-kit-region="subject">Oakmere Primary School</h3>
          <p data-kit-region="consequence">Importing adds the hirer and starts their first agreement.</p>
          <p data-kit-region="effective-time">The import runs as soon as you continue.</p>
          <p data-kit-region="correction-path">You can remove an imported hirer for 30 days after the import.</p>
        </section>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><a href="../../form/" data-kit-role="way-back"><span data-kit-region="label">Back to mapping</span></a><button type="submit" form="stepped-flow-no-summary-step" data-kit-role="primary-action"><span data-kit-region="label">Import hirers</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Import hires</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-preview">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow" data-kit-holds="summary">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
      </ol>
      <aside data-kit-region="summary">
        <h2>Import summary</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">File</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Uploaded</dt><dd data-kit-region="value">hires-may.csv</dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Rows</dt><dd data-kit-region="value">6</dd></dl>
            </div>
            <a href="../" aria-label="Change File">Change</a>
          </div>
        </div>
      </aside>
      <form data-kit-region="current-step" id="stepped-flow-preview-step" aria-labelledby="stepped-flow-preview-title">
        <h2 id="stepped-flow-preview-title">Check 6 hires</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group"><label for="stepped-flow-preview-existing">When a hire is already here</label><div data-kit-region="select"><select id="stepped-flow-preview-existing" name="existing"><option value="keep" selected>Keep the one here</option><option value="replace">Replace it</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Ready to add</h3>
          <div data-kit-region="content">
            <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Oakmere WI</span><span data-kit-role="stamp" data-kit-state="settled">Ready</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-05-06T19:00+01:00"><span>Tuesday, 6 May 2025</span><wbr><span>, 19:00–</span><wbr><span>21:00</span></time> ·&nbsp;Main Hall</span></p></div></div></div><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Skip</span></button></div></div></article>
            <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">St Anne’s Scout Group</span><span data-kit-role="stamp" data-kit-state="settled">Ready</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-05-07T18:00+01:00"><span>Wednesday, 7 May 2025</span><wbr><span>, 18:00–</span><wbr><span>19:30</span></time> ·&nbsp;Main Hall</span></p></div></div></div><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Skip</span></button></div></div></article>
            <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Garden club</span><span data-kit-role="stamp" data-kit-state="settled">Ready</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-05-10T10:00+01:00"><span>Saturday, 10 May 2025</span><wbr><span>, 10:00–</span><wbr><span>12:00</span></time> ·&nbsp;Garden room</span></p></div></div></div><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Skip</span></button></div></div></article>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Needs a decision</h3>
          <div data-kit-region="content">
            <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="hartford-keep">Hartford Dance Studio</span><span data-kit-role="stamp" data-kit-state="attention">Clash</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-05-08T17:00+01:00"><span>Thursday, 8 May 2025</span><wbr><span>, 17:00–</span><wbr><span>20:00</span></time> ·&nbsp;Main Hall</span></p></div></div><fieldset data-kit-role="selection-control" data-kit-region="group" id="hartford-keep-choices" aria-labelledby="hartford-keep"><label><input data-kit-role="selection-control" type="radio" name="hartford-keep" value="keep"><span>Keep</span><output>Not chosen</output></label><label><input data-kit-role="selection-control" type="radio" name="hartford-keep" value="skip"><span>Skip</span><output>Not chosen</output></label></fieldset></div></div></article>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Skipped</h3>
          <div data-kit-region="content">
            <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Row 5</span><span data-kit-role="stamp" data-kit-state="neutral">Skipped</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">No date given</span></p></div></div></div></div></article>
            <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Row 6</span><span data-kit-role="stamp" data-kit-state="neutral">Skipped</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">No room called Annexe</span></p></div></div></div></div></article>
          </div>
        </div>
        <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Import 4 hires">
          <h3 data-kit-region="subject">hires-may.csv</h3>
          <p data-kit-region="consequence">Importing adds 4 hires to the diary.</p>
          <p data-kit-region="effective-time">The hires join the diary as soon as you import them.</p>
          <p data-kit-region="correction-path">You can undo the import from its result.</p>
        </section>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><a href="../" data-kit-role="way-back"><span data-kit-region="label">Back</span></a><button type="submit" form="stepped-flow-preview-step" data-kit-role="primary-action"><span data-kit-region="label">Import 4 hires</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </div>
    <div data-kit-layout="stepped-flow" data-kit-holds="summary">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
      </ol>
      <aside data-kit-region="summary">
        <h2>Import summary</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">File</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Uploaded</dt><dd data-kit-region="value">hire-details.csv</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Rows</dt><dd data-kit-region="value">1</dd></dl>
          </div><a href="../" aria-label="Change File">Change</a></div>
        </div>
      </aside>
      <form data-kit-region="current-step" id="stepped-flow-records-step" aria-labelledby="stepped-flow-records-title">
        <h2 id="stepped-flow-records-title">Check 1 hire</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group"><label for="stepped-flow-records-existing">When a hire is already here</label><div data-kit-region="select"><select id="stepped-flow-records-existing" name="existing"><option value="keep" selected>Keep the one here</option><option value="replace">Replace it</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
        <div data-kit-region="table" tabindex="0"><table data-kit-table="records">
          <caption>Rows in hire-details.csv</caption>
          <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Hire</th><th scope="col">When</th><th scope="col">Room</th><th scope="col">Contact</th><th scope="col">Outcome</th></tr></thead>
          <tbody><tr id="stepped-flow-records-hire"><th scope="row" data-kit-column="subject">Riverside community choir</th><td data-label="When"><div data-kit-region="fact"><span>Every Thursday ·&nbsp;</span><time datetime="18:00"><span>18:00–</span><wbr><span>20:00</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Garden room</div></td><td data-label="Contact"><div data-kit-region="fact">Aisha Khan</div></td><td data-label="Outcome"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="alert">Room unavailable</span></div></td></tr></tbody>
        </table></div>
        <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Import 1 hire"><h3 data-kit-region="subject">hire-details.csv</h3><p data-kit-region="consequence">Importing adds 1 hire to the diary.</p><p data-kit-region="effective-time">The hire joins the diary as soon as you import it.</p><p data-kit-region="correction-path">You can undo the import from its result.</p></section>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit">
        <div data-kit-region="refusal"><div data-kit-role="refusal" id="stepped-flow-records-refused" role="alert" aria-atomic="true"><p data-kit-region="line">Import is refused because the room is unavailable.</p><ul data-kit-region="causes"><li><a href="#stepped-flow-records-hire">Riverside community choir: Garden room is unavailable.</a></li></ul></div></div>
        <a href="../" data-kit-role="way-back"><span data-kit-region="label">Back</span></a><button type="submit" form="stepped-flow-records-step" data-kit-role="primary-action"><span data-kit-region="label">Import 1 hire</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Import hires</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-result">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow" data-kit-holds="summary">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Result</span></li>
      </ol>
      <form data-kit-region="current-step" id="stepped-flow-result-step" aria-labelledby="stepped-flow-result-title">
        <h2 id="stepped-flow-result-title">Imported 4 hires</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="table" tabindex="0">
          <table data-kit-table="records">
            <caption>Rows in hires-may.csv</caption>
            <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Hire</th><th scope="col">When</th><th scope="col">Room</th><th scope="col">Outcome</th></tr></thead>
            <tbody>
              <tr><th scope="row" data-kit-column="subject">Oakmere WI</th><td data-label="When"><div data-kit-region="fact"><time datetime="2025-05-06T19:00+01:00"><span>Tuesday, 6 May 2025</span><wbr><span>, 19:00–</span><wbr><span>21:00</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Outcome"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="settled">Added</span></div></td></tr>
              <tr><th scope="row" data-kit-column="subject">St Anne’s Scout Group</th><td data-label="When"><div data-kit-region="fact"><time datetime="2025-05-07T18:00+01:00"><span>Wednesday, 7 May 2025</span><wbr><span>, 18:00–</span><wbr><span>19:30</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Outcome"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="settled">Added</span></div></td></tr>
              <tr><th scope="row" data-kit-column="subject">Hartford Dance Studio</th><td data-label="When"><div data-kit-region="fact"><time datetime="2025-05-08T17:00+01:00"><span>Thursday, 8 May 2025</span><wbr><span>, 17:00–</span><wbr><span>20:00</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Outcome"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="settled">Added</span></div></td></tr>
              <tr><th scope="row" data-kit-column="subject">Garden club</th><td data-label="When"><div data-kit-region="fact"><time datetime="2025-05-10T10:00+01:00"><span>Saturday, 10 May 2025</span><wbr><span>, 10:00–</span><wbr><span>12:00</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Garden room</div></td><td data-label="Outcome"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="settled">Added</span></div></td></tr>
              <tr><th scope="row" data-kit-column="subject">Row 5</th><td data-label="When"><div data-kit-region="fact">No date given</div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Outcome"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="neutral">Skipped</span></div></td></tr>
              <tr><th scope="row" data-kit-column="subject">Row 6</th><td data-label="When"><div data-kit-region="fact">No room called Annexe</div></td><td data-label="Room"><div data-kit-region="fact">Annexe</div></td><td data-label="Outcome"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="neutral">Skipped</span></div></td></tr>
            </tbody>
          </table>
        </div>
        <div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Undo the import</span></button><a href="../../list/" data-kit-role="way-back"><span data-kit-region="label">Back to hires</span></a></div>
      </form>
      <aside data-kit-region="summary">
        <h2>Import summary</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">File</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Uploaded</dt><dd data-kit-region="value">hires-may.csv</dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Rows</dt><dd data-kit-region="value">6</dd></dl>
            </div>
            <a href="../" aria-label="Change File">Change</a>
          </div>
        </div>
      </aside>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Stepped flow</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-refused-undo">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow" data-kit-holds="summary">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-role="refusal" id="stepped-flow-undo-refused-1" role="alert" aria-atomic="true">
        <p data-kit-region="line">Undo is refused: row 4 is no longer in the file you uploaded.</p>
      </div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
      </ol>
      <aside data-kit-region="summary">
        <h2>Import summary</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">File</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Uploaded</dt><dd data-kit-region="value">hirers-2025-05-12.csv, <span data-kit-role="amount">42&nbsp;rows</span> found</dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Ready to import</dt><dd data-kit-region="value"><span data-kit-role="amount">40&nbsp;rows</span></dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Matched to hirers you have</dt><dd data-kit-region="value"><span data-kit-role="amount">2&nbsp;rows</span></dd></dl>
              <dl data-kit-role="labelled-fact" id="summary-row-17"><dt data-kit-region="name">Row 17, Riverside Scouts</dt><dd data-kit-region="value">Matches two hirers: Riverside Scouts and Riverside Scout Group</dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Last import</dt><dd data-kit-region="value"><time datetime="2025-02-12">12 February 2025</time>, <span data-kit-role="amount">38&nbsp;hirers</span></dd></dl>
            </div>
            <a href="../../form/" aria-label="Change File">Change</a>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Mapping</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Columns</dt><dd data-kit-region="value">All 9 columns matched to your fields</dd></dl>
            </div>
            <a href="../../form/" aria-label="Change Mapping">Change</a>
          </div>
        </div>
      </aside>
      <form data-kit-region="current-step" id="preview-step" aria-labelledby="preview-title">
        <h2 id="preview-title">Preview hirer import</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group"><label for="preview-billing-email">Billing email</label><input id="preview-billing-email" name="billing-email" type="email" value="aisha@oakmereprimary.org"><output for="preview-billing-email">aisha@oakmereprimary.org</output></div>
        <div data-kit-role="form-group"><label for="preview-telephone">Telephone</label><input id="preview-telephone" name="telephone" type="tel" value="01632 960 123"><output for="preview-telephone">01632 960 123</output></div>
        <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Oakmere Primary School</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><span data-kit-role="amount">40&nbsp;rows</span> ready ·&nbsp;Row 17 needs a decision</span></p></div></div></div></div></article>
        <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Import Oakmere Primary School">
          <h3 data-kit-region="subject">Oakmere Primary School</h3>
          <p data-kit-region="consequence">Importing adds the hirer and starts their first agreement.</p>
          <p data-kit-region="effective-time">The import runs as soon as you continue.</p>
          <p data-kit-region="correction-path">You can remove an imported hirer for 30 days after the import.</p>
        </section>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><div data-kit-region="refusal"><div data-kit-role="refusal" id="preview-refused" role="alert" aria-atomic="true">
          <p data-kit-region="line">Import is refused while row 17 matches more than one hirer:</p>
          <ul data-kit-region="causes"><li><a href="#summary-row-17">Row 17, Riverside Scouts</a></li></ul>
        </div>
      </div>
      <a href="../../form/" data-kit-role="way-back"><span data-kit-region="label">Back to mapping</span></a><button type="submit" form="preview-step" data-kit-role="primary-action"><span data-kit-region="label">Import hirers</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Stepped flow</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-unsaved">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Preview</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
      </ol>
      <form data-kit-region="current-step" id="stepped-flow-unsaved-step" data-kit-keep="aisha-khan/import/hirers/mapping" data-kit-keep-version="2" aria-labelledby="stepped-flow-unsaved-title">
        <h2 id="stepped-flow-unsaved-title">Match the columns</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group" data-kit-width="wide"><label for="stepped-flow-unsaved-name">Column holding the hirer's name</label><input id="stepped-flow-unsaved-name" name="name-column" value="School name"><output for="stepped-flow-unsaved-name">School name</output></div>
        <div data-kit-role="form-group" data-kit-width="wide"><label for="stepped-flow-unsaved-email">Column holding the billing email</label><input id="stepped-flow-unsaved-email" name="email-column" value="Office email"><output for="stepped-flow-unsaved-email">Office email</output></div>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><a href="../../stepped-flow/" data-kit-role="way-back"><span data-kit-region="label">Back to file</span></a><button type="submit" form="stepped-flow-unsaved-step" data-kit-role="primary-action"><span data-kit-region="label">Continue to preview</span></button><p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p></div>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Stepped flow</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-signed">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow" data-kit-holds="summary">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Booking progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Hall</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Your details</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Check and book</span></li>
      </ol>
      <aside data-kit-region="summary">
        <h2>Booking summary</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Hall</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hall</dt><dd data-kit-region="value">Main hall, up to 120 people</dd></dl>
            </div>
            <a href="../../form/" aria-label="Change Hall">Change</a>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Your details</h3>
          <div data-kit-region="content">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hirer</dt><dd data-kit-region="value">Aisha Khan, Oakmere Primary School</dd></dl>
            </div>
            <a href="../../form/" aria-label="Change Your details">Change</a>
          </div>
        </div>
      </aside>
      <form data-kit-region="current-step" id="stepped-flow-signed-step" aria-labelledby="stepped-flow-signed-title">
        <h2 id="stepped-flow-signed-title">Check your booking</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Main hall</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-06-14T10:00+01:00"><span>Saturday, 14 June 2025</span><wbr><span>, 10:00–</span><wbr><span>16:00</span></time> ·&nbsp;<span data-kit-role="amount">£84.00</span></span></p></div></div></div></div></article>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit">
        <div data-kit-role="agreement">
          <p data-kit-region="text">By booking, you agree to the <a href="../../role-agreement/#role-agreement-terms">hire terms</a>.</p>
          <div data-kit-role="action-group" data-kit-region="action"><div data-kit-role="form-group" data-kit-width="medium"><label for="stepped-flow-signed-signature">Your full name, to sign</label><input id="stepped-flow-signed-signature" name="signature" autocomplete="name" form="stepped-flow-signed-step"><output for="stepped-flow-signed-signature">Not signed</output></div><button type="submit" form="stepped-flow-signed-step" data-kit-role="primary-action"><span data-kit-region="label">Book hall</span></button></div>
        </div>
        <a href="../../form/" data-kit-role="way-back"><span data-kit-region="label">Back to your details</span></a>
      <p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Stepped flow</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-inert">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Preview</span></li>
      </ol>
      <form data-kit-region="current-step" id="flow-inert-mapping" aria-labelledby="flow-inert-mapping-title">
        <h2 id="flow-inert-mapping-title">Match the columns</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group" id="flow-inert-column-form-group">
          <label for="flow-inert-column">Billing email column</label>
          <div data-kit-region="select"><select id="flow-inert-column" name="column"><option value="">Choose a column</option><option value="email">Email</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
          <output for="flow-inert-column">No column chosen</output>
        </div>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit" data-kit-holds="words">
        <a href="../../form/" data-kit-role="way-back"><span data-kit-region="label">Back to file</span></a>
        <button type="submit" form="flow-inert-mapping" id="flow-inert-continue" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="flow-inert-continue-words"><span data-kit-region="label">Continue</span></button>
        <p data-kit-region="words" id="flow-inert-continue-words">Choose the billing email column before continuing.</p>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </div>
    <p class="specimen-case-line">A commit that waits.</p>
    <div data-kit-layout="stepped-flow">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
      </ol>
      <form data-kit-region="current-step" id="flow-inert-preview" aria-labelledby="flow-inert-preview-title">
        <h2 id="flow-inert-preview-title">Preview hirer import</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Import Oakmere Primary School">
          <h3 data-kit-region="subject">Oakmere Primary School</h3>
          <p data-kit-region="consequence">Importing adds the hirer and starts their first agreement.</p>
          <p data-kit-region="effective-time">The import runs as soon as you continue.</p>
          <p data-kit-region="correction-path">You can remove an imported hirer for 30 days after the import.</p>
        </section>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit" data-kit-holds="words">
        <a href="../../form/" data-kit-role="way-back"><span data-kit-region="label">Back to mapping</span></a>
        <button type="submit" form="flow-inert-preview" id="flow-inert-import" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="flow-inert-import-words"><span data-kit-region="label">Import hirers</span></button>
        <p data-kit-region="words" id="flow-inert-import-words">Resolve the matching hirers before importing.</p>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </div>
    <p class="specimen-case-line">A destructive commit that waits.</p>
    <div data-kit-layout="stepped-flow">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Deletion progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Choose</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Confirm</span></li>
      </ol>
      <form data-kit-region="current-step" id="flow-inert-delete" aria-labelledby="flow-inert-delete-title">
        <h2 id="flow-inert-delete-title">Delete a hirer</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Delete Riverside Scouts">
          <h3 data-kit-region="subject">Riverside Scouts</h3>
          <p data-kit-region="consequence">Deleting Riverside Scouts removes their bookings and invoices, and cannot be undone.</p>
          <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
          <p data-kit-region="correction-path"></p>
        </section>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit" data-kit-holds="words">
        <a href="../../form/" data-kit-role="way-back"><span data-kit-region="label">Back to hirers</span></a>
        <button type="submit" form="flow-inert-delete" id="flow-inert-destructive" data-kit-role="destructive-action" data-kit-state="inert" disabled aria-describedby="flow-inert-destructive-words"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the hirer</span></button>
        <p data-kit-region="words" id="flow-inert-destructive-words">The hirer can be deleted once their last booking is over.</p>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Stepped flow</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-middle-step">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow" data-kit-holds="summary">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Request progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Details</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Place</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Schedule</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Attendance</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Access</span></li>
        <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Review</span></li>
      </ol>
      <form data-kit-region="current-step" id="middle-step" aria-labelledby="middle-step-title">
        <h2 id="middle-step-title">Choose room access</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group"><label for="middle-step-access">Entrance</label><div data-kit-region="select"><select id="middle-step-access" name="access"><option value="step-free" selected>Step-free entrance</option><option value="front">Front entrance</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div><output for="middle-step-access">Step-free entrance</output></div>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><a href="../../form/" data-kit-role="way-back"><span data-kit-region="label">Back</span></a><button type="submit" form="middle-step" data-kit-role="primary-action"><span data-kit-region="label">Continue</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
      <aside data-kit-region="summary">
        <h2>Request summary</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Details</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Name</dt><dd data-kit-region="value">Aisha Khan</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Email</dt><dd data-kit-region="value">aisha@example.org</dd></dl>
          </div><a href="../../form/" aria-label="Change Details">Change</a></div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Place</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main hall</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Capacity</dt><dd data-kit-region="value">Up to 120 people</dd></dl>
          </div><a href="../../form/" aria-label="Change Place">Change</a></div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Schedule</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Day</dt><dd data-kit-region="value">Thursday mornings</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Frequency</dt><dd data-kit-region="value">Every week</dd></dl>
          </div><a href="../../form/" aria-label="Change Schedule">Change</a></div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Attendance</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">People</dt><dd data-kit-region="value">24</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Seating</dt><dd data-kit-region="value">Chairs in a circle</dd></dl>
          </div><a href="../../form/" aria-label="Change Attendance">Change</a></div>
        </div>
      </aside>
    </div>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Stepped flow</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-stepped-flow/#layout-stepped-flow-review-step">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="stepped-flow">
      <div data-kit-region="notices" aria-live="polite"></div>
      <ol data-kit-role="progress" data-kit-region="progress" aria-label="Request progress">
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Details</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Place</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Schedule</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Attendance</span></li>
        <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Access</span></li>
        <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Review</span></li>
      </ol>
      <form data-kit-region="current-step" id="review-step" aria-labelledby="review-step-title">
        <h2 id="review-step-title">Check your request</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Details</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Name</dt><dd data-kit-region="value">Aisha Khan</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Email</dt><dd data-kit-region="value">aisha@example.org</dd></dl>
          </div><a href="../../form/" aria-label="Change Details">Change</a></div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Place</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main hall</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Capacity</dt><dd data-kit-region="value">Up to 120 people</dd></dl>
          </div><a href="../../form/" aria-label="Change Place">Change</a></div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Schedule</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Day</dt><dd data-kit-region="value">Thursday mornings</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Frequency</dt><dd data-kit-region="value">Every week</dd></dl>
          </div><a href="../../form/" aria-label="Change Schedule">Change</a></div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Attendance</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">People</dt><dd data-kit-region="value">24</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Seating</dt><dd data-kit-region="value">Chairs in a circle</dd></dl>
          </div><a href="../../form/" aria-label="Change Attendance">Change</a></div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Access</h3>
          <div data-kit-region="content"><div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Entrance</dt><dd data-kit-region="value">Step-free entrance</dd></dl>
          </div><a href="../../form/" aria-label="Change Access">Change</a></div>
        </div>
      </form>
      <div data-kit-role="action-group" data-kit-region="back-continue-or-commit">
        <div data-kit-region="refusal"><div data-kit-role="refusal" id="review-step-refusal" role="alert" aria-atomic="true"><p data-kit-region="line">Save is refused: the main hall is no longer available.</p><ul data-kit-region="causes"><li><a href="../../form/">Choose another place</a></li></ul></div></div>
        <a href="../../form/" data-kit-role="way-back"><span data-kit-region="label">Back</span></a><button type="submit" form="review-step" data-kit-role="primary-action"><span data-kit-region="label">Save request</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </div>
  </main>
</div>