<p class="specimen-case-line">A form that arrives after the task opens.</p>
<details open>
  <summary>Edit a name while it loads</summary>
  <button type="button" id="dialog-loading-opener" data-kit-role="secondary-action" commandfor="dialog-loading" command="show-modal"><span data-kit-region="label">Edit name</span></button>
  <dialog closedby="closerequest" open id="dialog-loading" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-loading-title">
    <h2 data-kit-region="heading" id="dialog-loading-title">Edit name</h2>
    <div data-kit-region="form-groups" data-kit-state="loading" aria-busy="true" data-kit-print-loading="The name had not loaded.">
      <form id="dialog-loading-form">
        <div data-kit-role="form-group" data-kit-width="medium">
          <label for="dialog-loading-name">Name</label>
          <input id="dialog-loading-name" name="name" type="text" />
          <output for="dialog-loading-name">No name given</output>
        </div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-loading-form" id="dialog-loading-save" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="dialog-loading-save-words"><span data-kit-region="label">Save name</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-loading" command="close"><span data-kit-region="label">Cancel</span></button>
      <p data-kit-region="words" id="dialog-loading-save-words">Save waits until the name has loaded.</p>
    </div>
    <p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A name that is ready to save with nothing to wait for.</p>
<details>
  <summary>Save a name that is already loaded</summary>
  <button type="button" id="dialog-loading-without-control-opener" data-kit-role="secondary-action" commandfor="dialog-loading-without-control" command="show-modal"><span data-kit-region="label">Save name</span></button>
  <dialog closedby="closerequest" id="dialog-loading-without-control" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-loading-without-control-title">
    <h2 data-kit-region="heading" id="dialog-loading-without-control-title">Save name</h2>
    <div data-kit-region="form-groups" data-kit-state="loading" aria-busy="true" data-kit-print-loading="The name had not loaded.">
      <form id="dialog-loading-without-control-form">
        <div data-kit-role="form-group" data-kit-width="medium">
          <label for="dialog-loading-without-control-name">Name</label>
          <input id="dialog-loading-without-control-name" name="name" type="text" value="Garden Room" disabled />
          <output for="dialog-loading-without-control-name">Garden Room</output>
        </div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-loading-without-control-form" id="dialog-loading-without-control-save" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="dialog-loading-without-control-save-words"><span data-kit-region="label">Save name</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-loading-without-control" command="close"><span data-kit-region="label">Cancel</span></button>
      <p data-kit-region="words" id="dialog-loading-without-control-save-words">Save waits until the name has loaded.</p>
    </div>
    <p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">Decisions opened from their page.</p>
<details>
  <summary>Cancel bookings</summary>
  <div data-kit-layout="record" data-kit-density="desk">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-region="notices" aria-live="polite"></div>
    <section data-kit-region="facts-related-records" aria-labelledby="dialog-bookings-title">
      <h2 id="dialog-bookings-title">Committee bookings</h2>
    </section>
    <aside data-kit-region="decision-compact-work">
      <div data-kit-role="action-group"><button type="button" id="dialog-bookings-opener" data-kit-role="secondary-action" commandfor="dialog-bookings-task" command="show-modal"><span data-kit-region="label">Cancel bookings</span></button></div>
    </aside>
  </div>
    <dialog closedby="closerequest" id="dialog-bookings-task" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-bookings-task-title">
      <h2 data-kit-region="heading" id="dialog-bookings-task-title">Cancel bookings</h2>
      <div data-kit-region="form-groups">
        <form id="dialog-bookings-form">
          <fieldset data-kit-role="selection-control" data-kit-region="group" id="dialog-bookings-rooms">
            <legend>Bookings</legend>
            <input type="hidden" name="rooms" value="">
            <label><input data-kit-role="selection-control" type="checkbox" name="rooms" value="main-hall"><span>Main Hall</span><output>Not ticked</output></label>
            <label><input data-kit-role="selection-control" type="checkbox" name="rooms" value="garden-room"><span>Garden Room</span><output>Not ticked</output></label>
            <label><input data-kit-role="selection-control" type="checkbox" name="rooms" value="kitchen"><span>Kitchen</span><output>Not ticked</output></label>
          </fieldset>
        </form>
      </div>
      <div data-kit-role="action-group"><div data-kit-region="actions">
        <button type="submit" form="dialog-bookings-form" id="dialog-bookings-cancel" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="dialog-bookings-cancel-words"><span data-kit-region="label">Cancel bookings</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="dialog-bookings-task" command="close"><span data-kit-region="label">Keep them</span></button><p data-kit-region="words" id="dialog-bookings-cancel-words">No booking is ticked. Tick the bookings to cancel, or keep them and close.</p>
      </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
    </div></dialog>
</details>
<details>
  <summary>Cancel booking</summary>
  <div data-kit-layout="record" data-kit-density="desk">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-region="notices" aria-live="polite"></div>
    <section data-kit-region="facts-related-records" aria-labelledby="dialog-record-title">
      <h2 id="dialog-record-title">Committee booking</h2>
    </section>
    <aside data-kit-region="decision-compact-work">
      <div data-kit-role="action-group"><button type="button" id="dialog-record-opener" data-kit-role="secondary-action" commandfor="dialog-record-task" command="show-modal"><span data-kit-region="label">Cancel booking</span></button></div>
    </aside>
  </div>
    <dialog closedby="closerequest" id="dialog-record-task" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-record-task-title">
      <h2 data-kit-region="heading" id="dialog-record-task-title">Cancel booking</h2>
      <div data-kit-region="form-groups">
        <form id="dialog-record-form">
          <div data-kit-role="form-group" data-kit-width="medium">
            <label for="dialog-record-reason">Reason</label>
            <input id="dialog-record-reason" name="reason" type="text" />
            <output for="dialog-record-reason">No reason given</output>
          </div>
          <div data-kit-role="form-group">
            <label for="dialog-record-told">Who to tell</label>
            <input id="dialog-record-told" name="told" type="email" value="office@oakmereprimary.org" />
            <output for="dialog-record-told">office@oakmereprimary.org</output>
          </div>
        </form>
      </div>
      <div data-kit-role="action-group"><div data-kit-region="actions">
        <button type="submit" form="dialog-record-form" data-kit-role="primary-action"><span data-kit-region="label">Cancel booking</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="dialog-record-task" command="close"><span data-kit-region="label">Keep booking</span></button>
      </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
      <p data-kit-role="status-line" role="status" aria-live="polite">Cancelling tells office@oakmereprimary.org and frees Main Hall.</p>
    </div></dialog>
</details>
<details>
  <summary>Close the hall</summary>
  <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">H</span><span data-kit-wordmark>Hallkeeper</span></div></div>
    <header data-kit-region="header">
      <div>
        <h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Hall closures</h1>
      </div>
      <div data-kit-region="actions"><button type="button" id="dialog-shell-opener" data-kit-role="secondary-action" commandfor="dialog-shell-task" command="show-modal"><span data-kit-region="label">Close the hall</span></button></div>
    </header>
    <main data-kit-region="body">
      <div data-kit-layout="list">
        <div data-kit-region="notices" aria-live="polite"></div>
        <section data-kit-region="rows" aria-label="Hall closures">
          <div data-kit-region="notices" aria-live="polite"></div>
          <div data-kit-region="table" tabindex="0">
          <table data-kit-table="comparison">
            <caption>Hall closures</caption>
            <thead data-kit-region="column-headings"><tr><th scope="col">Closure</th><th scope="col">Rooms</th></tr></thead>
            <tbody>
            <tr>
              <th scope="row"><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">
                        <a data-kit-region="subject" href="../../../record/">Floor resealing</a>
                      </div>
                    </div>
                  </div>
                </div>
              </article></th>
              <td><div data-kit-region="fact">Main hall</div></td>
            </tr>
            <tr>
              <th scope="row"><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">
                        <a data-kit-region="subject" href="../../../record/">Boiler service</a>
                      </div>
                    </div>
                  </div>
                </div>
              </article></th>
              <td><div data-kit-region="fact">Whole hall</div></td>
            </tr>
            <tr>
              <th scope="row"><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">
                        <a data-kit-region="subject" href="../../../record/">Polling day</a>
                      </div>
                    </div>
                  </div>
                </div>
              </article></th>
              <td><div data-kit-region="fact">Main hall and kitchen</div></td>
            </tr>
            </tbody>
          </table>
          </div>
        </section>
      </div>
      <dialog closedby="closerequest" id="dialog-shell-task" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-shell-task-title">
        <h2 data-kit-region="heading" id="dialog-shell-task-title">Close the hall</h2>
        <div data-kit-region="form-groups">
          <form id="dialog-shell-form">
            <div data-kit-role="form-group" id="dialog-shell-day">
              <label for="dialog-shell-day-control" id="dialog-shell-day-label">Day</label>
              <div data-kit-role="date-field" id="dialog-shell-day-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-09"}'>
                <input id="dialog-shell-day-control" type="text" autocomplete="off" value="" aria-describedby="dialog-shell-day-control-resolved" aria-expanded="false" aria-controls="dialog-shell-day-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span>
                <span id="dialog-shell-day-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
                <button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="dialog-shell-day-control-calendar" aria-label="Calendar" aria-describedby="dialog-shell-day-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button>
                <input type="hidden" name="day" value="">
                <div id="dialog-shell-day-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
              </div>
              <output for="dialog-shell-day-control">No day chosen</output>
            </div>
            <div data-kit-role="form-group" data-kit-width="medium">
              <label for="dialog-shell-reason">Reason</label>
              <input id="dialog-shell-reason" name="reason" type="text" />
              <output for="dialog-shell-reason">No reason given</output>
            </div>
          </form>
        </div>
        <div data-kit-role="action-group"><div data-kit-region="actions">
          <button type="submit" form="dialog-shell-form" data-kit-role="primary-action"><span data-kit-region="label">Close the hall</span></button>
          <button type="button" data-kit-role="secondary-action" commandfor="dialog-shell-task" command="close"><span data-kit-region="label">Keep it open</span></button>
        </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div></dialog>
    </main>
  </div>
</details>
<details>
  <summary>Show the open attribute alone</summary>
  <div data-kit-layout="record" data-kit-density="desk">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-region="notices" aria-live="polite"></div>
    <section data-kit-region="facts-related-records" aria-labelledby="dialog-native-title">
      <h2 id="dialog-native-title">Committee booking</h2>
    </section>
  </div>
    <dialog closedby="closerequest" id="dialog-native-task" data-kit-role="dialog" open aria-labelledby="dialog-native-task-title">
      <h2 data-kit-region="heading" id="dialog-native-task-title">Cancel booking</h2>
      <div data-kit-region="form-groups">
        <form id="dialog-native-form">
          <div data-kit-role="form-group" data-kit-width="medium">
            <label for="dialog-native-reason">Reason</label>
            <input id="dialog-native-reason" name="reason" type="text" />
            <output for="dialog-native-reason">No reason given</output>
          </div>
          <div data-kit-role="form-group">
            <label for="dialog-native-told">Who to tell</label>
            <input id="dialog-native-told" name="told" type="email" value="office@oakmereprimary.org" />
            <output for="dialog-native-told">office@oakmereprimary.org</output>
          </div>
        </form>
      </div>
      <div data-kit-role="action-group"><div data-kit-region="actions">
        <button type="submit" form="dialog-native-form" data-kit-role="primary-action"><span data-kit-region="label">Cancel booking</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="dialog-native-task" command="close"><span data-kit-region="label">Keep booking</span></button>
      </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
    </div></dialog>
</details>
<p class="specimen-case-line">A Dialog over the page's own work, its lead a Primary action.</p>
<details>
  <summary>Send the invoice</summary>
  <button type="button" id="dialog-invoice-opener" data-kit-role="secondary-action" commandfor="dialog-invoice" command="show-modal"><span data-kit-region="label">Send the invoice</span></button>
  <dialog closedby="closerequest" id="dialog-invoice" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-invoice-title">
    <h2 data-kit-region="heading" id="dialog-invoice-title">Send the invoice</h2>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Send the Oakmere WI invoice">
      <h3 data-kit-region="subject">Oakmere WI invoice</h3>
      <p data-kit-region="consequence">Sending this invoice emails it to Oakmere WI with its payment link.</p>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path"></p>
    </section>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send invoice</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-invoice" command="close"><span data-kit-region="label">Keep editing</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A task that sends an email, its preview after the form.</p>
<details>
  <summary>Invite a volunteer</summary>
  <button type="button" id="dialog-invite-opener" data-kit-role="secondary-action" commandfor="dialog-invite" command="show-modal"><span data-kit-region="label">Invite a volunteer</span></button>
  <dialog closedby="closerequest" id="dialog-invite" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-invite-title">
    <h2 data-kit-region="heading" id="dialog-invite-title">Invite a volunteer</h2>
    <div data-kit-region="form-groups">
      <form id="dialog-invite-form">
        <div data-kit-role="form-group">
          <label for="dialog-invite-email">Email</label>
          <input id="dialog-invite-email" name="email" type="email" value="aisha@oakmereprimary.org" />
          <output for="dialog-invite-email">aisha@oakmereprimary.org</output>
        </div>
      </form>
    </div>
    <div data-kit-role="headed-region">
      <h3 data-kit-region="heading">The invitation, as Aisha will get it</h3>
      <div data-kit-region="content">
        <article data-kit-role="outbound-preview">
          <div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Channel</dt><dd data-kit-region="value">Email to <span data-kit-region="email"><span><span>aisha@</span><wbr /><span>oakmereprimary.org</span></span></span></dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Subject</dt><dd data-kit-region="value">Help run Oakmere Village Hall</dd></dl>
          </div>
          <iframe data-kit-region="body" srcdoc="<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}p{margin:0 0 12px;font-size:15px;line-height:1.5}</style></head><body><p>Hello Aisha,</p><p>You are invited to help run the bookings at Oakmere Village Hall.</p><p>You will be able to see the hall’s calendar, answer booking requests and help visitors find a room for their event.</p><p>Before your first shift, we will show you how to check a booking, arrange the room and leave the hall ready for the next group.</p><p>The main hall holds the larger gatherings. The Garden room is on the ground floor, through the main entrance and past the kitchen.</p><p>Keys are kept at the welcome desk. Collect them when you arrive and return them there before you leave.</p><p>If a visitor needs help with access or has a question you cannot answer, ask the volunteer at the welcome desk.</p><p>You can choose the shifts that suit you. Tell us before a shift if you can no longer come so another volunteer can take it.</p><p>Reply to this email if you would like to visit the hall before you begin. We will arrange a time to meet you and answer your questions.</p><p>Accept within 7 days.</p><p>Oakmere Village Hall</p></body></html>" title="Help run Oakmere Village Hall" sandbox="allow-same-origin"></iframe>
        </article>
        <p data-kit-region="time">Goes when you send it.</p>
      </div>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-invite-form" data-kit-role="primary-action"><span data-kit-region="label">Send invitation</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-invite" command="close"><span data-kit-region="label">Cancel</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A refund and what it returns, before its amount and reason.</p>
<details>
  <summary>Refund the deposit</summary>
  <button type="button" id="dialog-refund-opener" data-kit-role="secondary-action" commandfor="dialog-refund" command="show-modal"><span data-kit-region="label">Refund the deposit</span></button>
  <dialog closedby="closerequest" id="dialog-refund" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-refund-title">
    <h2 data-kit-region="heading" id="dialog-refund-title">Refund the deposit</h2>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Refund St Anne’s Scout Group deposit">
      <h3 data-kit-region="subject">St Anne’s Scout Group deposit</h3>
      <p data-kit-region="consequence">Refunding £50.00 returns it to St Anne’s Scout Group’s card.</p>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path">A refund cannot be taken back.</p>
    </section>
    <div data-kit-region="form-groups">
      <form id="dialog-refund-form">
        <div data-kit-role="form-group" data-kit-width="short">
          <label for="dialog-refund-amount">Amount</label>
          <input id="dialog-refund-amount" name="amount" type="text" value="£50.00" />
          <output for="dialog-refund-amount">£50.00</output>
        </div>
        <div data-kit-role="form-group" data-kit-width="medium">
          <label for="dialog-refund-reason">Reason</label>
          <input id="dialog-refund-reason" name="reason" type="text" />
          <output for="dialog-refund-reason">No reason given</output>
        </div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-refund-form" data-kit-role="primary-action"><span data-kit-region="label">Refund deposit</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-refund" command="close"><span data-kit-region="label">Keep the deposit</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A task that publishes a page, its preview before the actions.</p>
<details>
  <summary>Publish the autumn programme</summary>
  <button type="button" id="dialog-publish-opener" data-kit-role="secondary-action" commandfor="dialog-publish" command="show-modal"><span data-kit-region="label">Publish the autumn programme</span></button>
  <dialog closedby="closerequest" id="dialog-publish" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-publish-title">
    <h2 data-kit-region="heading" id="dialog-publish-title">Publish the autumn programme</h2>
    <div data-kit-role="headed-region">
      <h3 data-kit-region="heading">The programme, as visitors will see it</h3>
      <div data-kit-region="content">
        <article data-kit-role="outbound-preview">
          <div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Page</dt><dd data-kit-region="value">Autumn programme</dd></dl>
          </div>
          <iframe data-kit-region="body" srcdoc="<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}h1{margin:0 0 16px;font-size:22px;font-weight:normal}ul{margin:0;padding:0;list-style:none}li{padding:12px 0;border-top:1px solid #dddddd;font-size:15px;line-height:1.5}b{display:block}</style></head><body><h1>Autumn programme</h1><ul><li><b>Pilates</b>Mondays at 7pm, 12 places</li><li><b>Chair yoga</b>Wednesdays at 10am, 8 places</li><li><b>Watercolour</b>Thursdays at 2pm, 10 places</li></ul></body></html>" title="Autumn programme" sandbox="allow-same-origin"></iframe>
        </article>
        <p data-kit-region="time">Goes live when bookings open on 1 September.</p>
      </div>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Publish when bookings open</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-publish" command="close"><span data-kit-region="label">Cancel</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A creation in steps, at its first step and at its last.</p>
<details>
  <summary>New event</summary>
  <button type="button" id="dialog-event-opener" data-kit-role="secondary-action" commandfor="dialog-event" command="show-modal"><span data-kit-region="label">New event</span></button>
  <dialog closedby="closerequest" id="dialog-event" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-event-title">
    <h2 data-kit-region="heading" id="dialog-event-title">New event</h2>
    <ol data-kit-role="progress" data-kit-region="progress" aria-label="Steps">
      <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Name</span></li>
      <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Organiser</span></li>
      <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Room</span></li>
    </ol>
    <div data-kit-region="form-groups">
      <form id="dialog-event-form">
        <div data-kit-role="form-group" data-kit-width="medium">
          <label for="dialog-event-name">Event name</label>
          <input id="dialog-event-name" name="name" type="text" />
          <output for="dialog-event-name">No name given</output>
        </div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-event-form" data-kit-role="primary-action"><span data-kit-region="label">Continue</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-event" command="close"><span data-kit-region="label">Cancel</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<details>
  <summary>New event at its last step</summary>
  <button type="button" id="dialog-event-room-opener" data-kit-role="secondary-action" commandfor="dialog-event-room" command="show-modal"><span data-kit-region="label">New event</span></button>
  <dialog closedby="closerequest" id="dialog-event-room" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-event-room-title">
    <h2 data-kit-region="heading" id="dialog-event-room-title">New event</h2>
    <ol data-kit-role="progress" data-kit-region="progress" aria-label="Steps">
      <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Name</span></li>
      <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Organiser</span></li>
      <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Room</span></li>
    </ol>
    <div data-kit-region="form-groups">
      <form id="dialog-event-room-form">
        <fieldset data-kit-role="selection-control" data-kit-region="group" id="dialog-event-room-rooms">
          <legend>Room</legend>
          <label><input data-kit-role="selection-control" type="radio" name="room" value="main-hall"><span>Main Hall</span><output>Not chosen</output></label>
          <label><input data-kit-role="selection-control" type="radio" name="room" value="garden-room"><span>Garden Room</span><output>Not chosen</output></label>
          <label><input data-kit-role="selection-control" type="radio" name="room" value="kitchen"><span>Kitchen</span><output>Not chosen</output></label>
        </fieldset>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-event-room-form" data-kit-role="primary-action"><span data-kit-region="label">Create event</span></button>
      <button type="button" data-kit-role="secondary-action"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-event-room" command="close"><span data-kit-region="label">Cancel</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A task with the subject it acts on, its consequence holding each amount it changes.</p>
<details>
  <summary>Split the charge</summary>
  <button type="button" id="dialog-split-opener" data-kit-role="secondary-action" commandfor="dialog-split" command="show-modal"><span data-kit-region="label">Split the charge</span></button>
  <dialog closedby="closerequest" id="dialog-split" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-split-title">
    <h2 data-kit-region="heading" id="dialog-split-title">Split the charge</h2>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Split the Autumn programme hire charge">
      <h3 data-kit-region="subject">Autumn programme hire charge</h3>
      <p data-kit-region="consequence">Splitting the £180.00 charge across three payers changes what each one owes.</p>
      <div data-kit-region="table" tabindex="0">
      <table data-kit-table="comparison">
        <caption>What each payer owes</caption>
        <thead data-kit-region="column-headings"><tr><th scope="col">Payer</th><th scope="col" data-kit-column="amount">Before</th><th scope="col" data-kit-column="amount">After</th></tr></thead>
        <tbody>
          <tr><th scope="row">Oakmere Primary School</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£180.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£90.00</div></td></tr>
          <tr><th scope="row">Oakmere WI</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£50.00</div></td></tr>
          <tr><th scope="row">St Anne’s Scout Group</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£40.00</div></td></tr>
        </tbody>
      </table>
      </div>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path">To change the split later, split the charge again from its record.</p>
    </section>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Charge</dt><dd data-kit-region="value">Autumn programme hire</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount</dt><dd data-kit-region="value" data-kit-role="amount">£180.00</dd></dl>
    </div>
    <div data-kit-region="form-groups">
      <form id="dialog-split-form">
        <div data-kit-role="form-group" data-kit-width="short">
          <label for="dialog-split-school">Oakmere Primary School</label>
          <input id="dialog-split-school" name="school" type="text" value="£90.00" />
          <output for="dialog-split-school">£90.00</output>
        </div>
        <div data-kit-role="form-group" data-kit-width="short">
          <label for="dialog-split-wi">Oakmere WI</label>
          <input id="dialog-split-wi" name="wi" type="text" value="£50.00" />
          <output for="dialog-split-wi">£50.00</output>
        </div>
        <div data-kit-role="form-group" data-kit-width="short">
          <label for="dialog-split-scouts">St Anne’s Scout Group</label>
          <input id="dialog-split-scouts" name="scouts" type="text" value="£40.00" />
          <output for="dialog-split-scouts">£40.00</output>
        </div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-split-form" data-kit-role="primary-action"><span data-kit-region="label">Split charge</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-split" command="close"><span data-kit-region="label">Keep one charge</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">The same task while its form loads, the subject standing.</p>
<details>
  <summary>Split the charge while it loads</summary>
  <button type="button" id="dialog-split-loading-opener" data-kit-role="secondary-action" commandfor="dialog-split-loading" command="show-modal"><span data-kit-region="label">Split the charge</span></button>
  <dialog closedby="closerequest" id="dialog-split-loading" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-split-loading-title">
    <h2 data-kit-region="heading" id="dialog-split-loading-title">Split the charge</h2>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Charge</dt><dd data-kit-region="value">Autumn programme hire</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount</dt><dd data-kit-region="value" data-kit-role="amount">£180.00</dd></dl>
    </div>
    <div data-kit-region="form-groups" data-kit-state="loading" aria-busy="true" data-kit-print-loading="The payers had not loaded.">
      <form id="dialog-split-loading-form">
        <div data-kit-role="form-group" data-kit-width="short">
          <label for="dialog-split-loading-first">First payer</label>
          <input id="dialog-split-loading-first" name="first" type="text" />
          <output for="dialog-split-loading-first">No share given</output>
        </div>
        <div data-kit-role="form-group" data-kit-width="short">
          <label for="dialog-split-loading-second">Second payer</label>
          <input id="dialog-split-loading-second" name="second" type="text" />
          <output for="dialog-split-loading-second">No share given</output>
        </div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-split-loading-form" id="dialog-split-loading-split" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="dialog-split-loading-split-words"><span data-kit-region="label">Split charge</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-split-loading" command="close"><span data-kit-region="label">Keep one charge</span></button>
      <p data-kit-region="words" id="dialog-split-loading-split-words">Split waits until the payers have loaded.</p>
    </div>
    <p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A decision whose consequence holds each amount it changes.</p>
<details>
  <summary>Cancel the charge</summary>
  <button type="button" id="dialog-cancel-charge-opener" data-kit-role="secondary-action" commandfor="dialog-cancel-charge" command="show-modal"><span data-kit-region="label">Cancel the charge</span></button>
  <dialog closedby="closerequest" id="dialog-cancel-charge" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-cancel-charge-title">
    <h2 data-kit-region="heading" id="dialog-cancel-charge-title">Cancel the charge</h2>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Cancel the Autumn programme hire charge">
      <h3 data-kit-region="subject">Autumn programme hire charge</h3>
      <p data-kit-region="consequence">Cancelling the £180.00 charge removes what each payer owes, and cannot be undone.</p>
      <div data-kit-region="table" tabindex="0">
      <table data-kit-table="comparison">
        <caption>What each payer owes</caption>
        <thead data-kit-region="column-headings"><tr><th scope="col">Payer</th><th scope="col" data-kit-column="amount">Before</th><th scope="col" data-kit-column="amount">After</th></tr></thead>
        <tbody>
          <tr><th scope="row">Oakmere Primary School</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£90.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td></tr>
          <tr><th scope="row">Oakmere WI</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£50.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td></tr>
          <tr><th scope="row">St Anne’s Scout Group</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£40.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td></tr>
        </tbody>
      </table>
      </div>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path">To charge the payers again, add a new charge from the programme’s record.</p>
    </section>
    <div data-kit-region="form-groups">
      <div data-kit-role="form-group" data-kit-width="medium">
        <label for="dialog-cancel-charge-name">Charge name</label>
        <input id="dialog-cancel-charge-name" name="name" type="text" autofocus />
        <output for="dialog-cancel-charge-name">No name typed</output>
      </div>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="button" id="dialog-cancel-charge-cancel" data-kit-role="destructive-action" data-kit-state="inert" disabled aria-describedby="dialog-cancel-charge-cancel-words" data-kit-confirm-name="Autumn programme hire"><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">Cancel the charge</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-cancel-charge" command="close"><span data-kit-region="label">Keep the charge</span></button><p data-kit-region="words" id="dialog-cancel-charge-cancel-words">Type Autumn programme hire to cancel it.</p>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A task whose agreement is signed with the actor’s full name.</p>
<details>
  <summary>Save a card to charge later</summary>
  <button type="button" id="dialog-signed-opener" data-kit-role="secondary-action" commandfor="dialog-signed" command="show-modal"><span data-kit-region="label">Save card</span></button>
  <dialog closedby="closerequest" id="dialog-signed" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-signed-title">
    <h2 data-kit-region="heading" id="dialog-signed-title">Save card</h2>
    <div data-kit-region="form-groups">
      <form id="dialog-signed-card" action="#dialog-signed" method="get">
        <div data-kit-role="form-group" data-kit-width="medium"><label for="dialog-signed-name">Name on card</label><input id="dialog-signed-name" name="name" autocomplete="cc-name" value="Aisha Khan" /><output for="dialog-signed-name">Aisha Khan</output></div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <div data-kit-role="agreement">
        <p data-kit-region="text">By saving this card, you allow Oakmere Village Hall to charge it for later invoices on their due date. You can remove the card from your account at any time.</p>
        <div data-kit-role="action-group" data-kit-region="action"><div data-kit-role="form-group" data-kit-width="medium"><label for="dialog-signed-signature">Your full name, to sign</label><input id="dialog-signed-signature" name="signature" autocomplete="name" form="dialog-signed-card" /><output for="dialog-signed-signature">Not signed</output></div><button type="submit" form="dialog-signed-card" data-kit-role="primary-action"><span data-kit-region="label">Save card</span></button></div>
      </div>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-signed" command="close"><span data-kit-region="label">Keep current card</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A step whose Number fields answer one question, with the set's help.</p>
<details>
  <summary>How many of each size</summary>
  <button type="button" id="dialog-sizes-opener" data-kit-role="secondary-action" commandfor="dialog-sizes" command="show-modal"><span data-kit-region="label">Add items</span></button>
  <dialog closedby="closerequest" id="dialog-sizes" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-sizes-title">
    <h2 data-kit-region="heading" id="dialog-sizes-title">Add items</h2>
    <ol data-kit-role="progress" data-kit-region="progress" aria-label="Steps">
      <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Sizes</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>
    <div data-kit-region="form-groups">
      <form id="dialog-sizes-form" novalidate>
        <fieldset data-kit-region="form-group-set" id="dialog-sizes-set" aria-describedby="dialog-sizes-set-help">
          <legend>How many of each size</legend>
          <div data-kit-role="form-group" id="dialog-sizes-small">
            <label for="dialog-sizes-small-control" id="dialog-sizes-small-label">Small</label>
            <div data-kit-role="number-field" data-kit-width="short" id="dialog-sizes-small-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="dialog-sizes-small-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="small" value="0" /></div>
            <output for="dialog-sizes-small-control">0</output>
          </div>
          <div data-kit-role="form-group" id="dialog-sizes-medium">
            <label for="dialog-sizes-medium-control" id="dialog-sizes-medium-label">Medium</label>
            <div data-kit-role="number-field" data-kit-width="short" id="dialog-sizes-medium-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="dialog-sizes-medium-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="medium" value="0" /></div>
            <output for="dialog-sizes-medium-control">0</output>
          </div>
          <div data-kit-role="form-group" id="dialog-sizes-large">
            <label for="dialog-sizes-large-control" id="dialog-sizes-large-label">Large</label>
            <div data-kit-role="number-field" data-kit-width="short" id="dialog-sizes-large-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="dialog-sizes-large-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="large" value="0" /></div>
            <output for="dialog-sizes-large-control">0</output>
          </div>
          <span data-kit-region="help" id="dialog-sizes-set-help">Use 0 for a size you are not adding.</span>
        </fieldset>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-sizes-form" data-kit-role="primary-action"><span data-kit-region="label">Continue</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-sizes" command="close"><span data-kit-region="label">Cancel</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
  </dialog>
</details>
<p class="specimen-case-line">The same step with the set's error, its help kept.</p>
<details>
  <summary>How many of each size with an error</summary>
  <button type="button" id="dialog-sizes-error-opener" data-kit-role="secondary-action" commandfor="dialog-sizes-error" command="show-modal"><span data-kit-region="label">Add items</span></button>
  <dialog closedby="closerequest" id="dialog-sizes-error" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-sizes-error-title">
    <h2 data-kit-region="heading" id="dialog-sizes-error-title">Add items</h2>
    <ol data-kit-role="progress" data-kit-region="progress" aria-label="Steps">
      <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Sizes</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>
    <div data-kit-region="form-groups">
      <form id="dialog-sizes-error-form" novalidate>
        <fieldset data-kit-region="form-group-set" data-kit-state="error" id="dialog-sizes-error-set" aria-describedby="dialog-sizes-error-set-help dialog-sizes-error-set-error" aria-invalid="true">
          <legend>How many of each size</legend>
          <div data-kit-role="form-group" id="dialog-sizes-error-small">
            <label for="dialog-sizes-error-small-control" id="dialog-sizes-error-small-label">Small</label>
            <div data-kit-role="number-field" data-kit-width="short" id="dialog-sizes-error-small-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="dialog-sizes-error-small-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="small" value="0" /></div>
            <output for="dialog-sizes-error-small-control">0</output>
          </div>
          <div data-kit-role="form-group" id="dialog-sizes-error-medium">
            <label for="dialog-sizes-error-medium-control" id="dialog-sizes-error-medium-label">Medium</label>
            <div data-kit-role="number-field" data-kit-width="short" id="dialog-sizes-error-medium-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="dialog-sizes-error-medium-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="medium" value="0" /></div>
            <output for="dialog-sizes-error-medium-control">0</output>
          </div>
          <div data-kit-role="form-group" id="dialog-sizes-error-large">
            <label for="dialog-sizes-error-large-control" id="dialog-sizes-error-large-label">Large</label>
            <div data-kit-role="number-field" data-kit-width="short" id="dialog-sizes-error-large-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="dialog-sizes-error-large-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="large" value="0" /></div>
            <output for="dialog-sizes-error-large-control">0</output>
          </div>
          <span data-kit-region="help" id="dialog-sizes-error-set-help">Use 0 for a size you are not adding.</span>
          <span data-kit-region="error" id="dialog-sizes-error-set-error">Enter at least one item across the sizes.</span>
        </fieldset>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-sizes-error-form" data-kit-role="primary-action"><span data-kit-region="label">Continue</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-sizes-error" command="close"><span data-kit-region="label">Cancel</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
  </dialog>
</details>

<details>
  <summary>Add a room</summary>
  <button type="button" id="dialog-unsaved-opener" data-kit-role="secondary-action" commandfor="dialog-unsaved" command="show-modal"><span data-kit-region="label">Add a room</span></button>
  <dialog closedby="closerequest" id="dialog-unsaved" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-unsaved-title">
    <h2 data-kit-region="heading" id="dialog-unsaved-title">Add a room</h2>
    <div data-kit-region="form-groups" id="dialog-unsaved-form-groups" data-kit-keep="aisha-khan/rooms/new" data-kit-keep-version="1">
      <form id="dialog-unsaved-form">
        <div data-kit-role="form-group" data-kit-width="medium">
          <label for="dialog-unsaved-name">Room name</label>
          <input id="dialog-unsaved-name" name="name" type="text" value="Garden Room" />
          <output for="dialog-unsaved-name">Garden Room</output>
        </div>
        <div data-kit-role="form-group" data-kit-width="narrow">
          <label for="dialog-unsaved-seats">Seats</label>
          <input id="dialog-unsaved-seats" name="seats" type="text" inputmode="numeric" value="40" />
          <output for="dialog-unsaved-seats">40</output>
        </div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-unsaved-form" data-kit-role="primary-action"><span data-kit-region="label">Add room</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-unsaved" command="close"><span data-kit-region="label">Cancel</span></button>
    </div>
    <p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p>
  </div></dialog>
</details>

<p class="specimen-case-line">A long room form with changes not yet saved.</p>
<details>
  <summary>Add a room with more details</summary>
  <button type="button" id="dialog-unsaved-long-opener" data-kit-role="secondary-action" commandfor="dialog-unsaved-long" command="show-modal"><span data-kit-region="label">Add a room</span></button>
  <dialog closedby="closerequest" id="dialog-unsaved-long" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-unsaved-long-title">
    <h2 data-kit-region="heading" id="dialog-unsaved-long-title">Add a room</h2>
    <div data-kit-region="form-groups"><form id="dialog-unsaved-long-form">
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-long-name-form-group"><label for="dialog-unsaved-long-name">Room name</label><input id="dialog-unsaved-long-name" name="name" type="text" value="Garden Room" /><output for="dialog-unsaved-long-name">Garden Room</output></div>
        <div data-kit-role="form-group" data-kit-width="narrow" id="dialog-unsaved-long-seats-form-group"><label for="dialog-unsaved-long-seats">Seats</label><input id="dialog-unsaved-long-seats" name="seats" type="text" value="40" /><output for="dialog-unsaved-long-seats">40</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-long-building-form-group"><label for="dialog-unsaved-long-building">Building</label><input id="dialog-unsaved-long-building" name="building" type="text" value="Community centre" /><output for="dialog-unsaved-long-building">Community centre</output></div>
        <div data-kit-role="form-group" data-kit-width="short" id="dialog-unsaved-long-floor-form-group"><label for="dialog-unsaved-long-floor">Floor</label><input id="dialog-unsaved-long-floor" name="floor" type="text" value="Ground floor" /><output for="dialog-unsaved-long-floor">Ground floor</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-long-contact-form-group"><label for="dialog-unsaved-long-contact">Contact name</label><input id="dialog-unsaved-long-contact" name="contact" type="text" value="Aisha Khan" /><output for="dialog-unsaved-long-contact">Aisha Khan</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-long-email-form-group"><label for="dialog-unsaved-long-email">Contact email</label><input id="dialog-unsaved-long-email" name="email" type="text" value="aisha@example.org" /><output for="dialog-unsaved-long-email">aisha@example.org</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-long-telephone-form-group"><label for="dialog-unsaved-long-telephone">Telephone</label><input id="dialog-unsaved-long-telephone" name="telephone" type="text" value="01632 960123" /><output for="dialog-unsaved-long-telephone">01632 960123</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-long-street-form-group"><label for="dialog-unsaved-long-street">Street address</label><input id="dialog-unsaved-long-street" name="street" type="text" value="12 Garden Street" /><output for="dialog-unsaved-long-street">12 Garden Street</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-long-town-form-group"><label for="dialog-unsaved-long-town">Town</label><input id="dialog-unsaved-long-town" name="town" type="text" value="Oakmere" /><output for="dialog-unsaved-long-town">Oakmere</output></div>
        <div data-kit-role="form-group" data-kit-width="narrow" id="dialog-unsaved-long-postcode-form-group"><label for="dialog-unsaved-long-postcode">Postcode</label><input id="dialog-unsaved-long-postcode" name="postcode" type="text" value="OX1 1AA" /><output for="dialog-unsaved-long-postcode">OX1 1AA</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-long-access-form-group"><label for="dialog-unsaved-long-access">Access</label><input id="dialog-unsaved-long-access" name="access" type="text" value="Step-free entrance" /><output for="dialog-unsaved-long-access">Step-free entrance</output></div>
        <div data-kit-role="form-group" id="dialog-unsaved-long-notes-form-group"><label for="dialog-unsaved-long-notes">Notes</label><input id="dialog-unsaved-long-notes" name="notes" type="text" value="Key held at reception" /><output for="dialog-unsaved-long-notes">Key held at reception</output></div>
    </form></div>
    <div data-kit-role="action-group">
      <div data-kit-region="actions">
        <button type="submit" form="dialog-unsaved-long-form" data-kit-role="primary-action"><span data-kit-region="label">Add room</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="dialog-unsaved-long" command="close"><span data-kit-region="label">Cancel</span></button>
      </div>
      <p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p>
    </div>
  </dialog>
</details>

<p class="specimen-case-line">A long room form whose last submission was refused.</p>
<details>
  <summary>Add a room after a refusal</summary>
  <button type="button" id="dialog-unsaved-refused-opener" data-kit-role="secondary-action" commandfor="dialog-unsaved-refused" command="show-modal"><span data-kit-region="label">Add a room</span></button>
  <dialog closedby="closerequest" id="dialog-unsaved-refused" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-unsaved-refused-title">
    <h2 data-kit-region="heading" id="dialog-unsaved-refused-title">Add a room</h2>
    <div data-kit-region="form-groups"><form id="dialog-unsaved-refused-form">
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-refused-name-form-group"><label for="dialog-unsaved-refused-name">Room name</label><input id="dialog-unsaved-refused-name" name="name" type="text" value="Garden Room" /><output for="dialog-unsaved-refused-name">Garden Room</output></div>
        <div data-kit-role="form-group" data-kit-width="narrow" id="dialog-unsaved-refused-seats-form-group"><label for="dialog-unsaved-refused-seats">Seats</label><input id="dialog-unsaved-refused-seats" name="seats" type="text" value="40" /><output for="dialog-unsaved-refused-seats">40</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-refused-building-form-group"><label for="dialog-unsaved-refused-building">Building</label><input id="dialog-unsaved-refused-building" name="building" type="text" value="Community centre" /><output for="dialog-unsaved-refused-building">Community centre</output></div>
        <div data-kit-role="form-group" data-kit-width="short" id="dialog-unsaved-refused-floor-form-group"><label for="dialog-unsaved-refused-floor">Floor</label><input id="dialog-unsaved-refused-floor" name="floor" type="text" value="Ground floor" /><output for="dialog-unsaved-refused-floor">Ground floor</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-refused-contact-form-group"><label for="dialog-unsaved-refused-contact">Contact name</label><input id="dialog-unsaved-refused-contact" name="contact" type="text" value="Aisha Khan" /><output for="dialog-unsaved-refused-contact">Aisha Khan</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-refused-email-form-group"><label for="dialog-unsaved-refused-email">Contact email</label><input id="dialog-unsaved-refused-email" name="email" type="text" value="aisha@example.org" /><output for="dialog-unsaved-refused-email">aisha@example.org</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-refused-telephone-form-group"><label for="dialog-unsaved-refused-telephone">Telephone</label><input id="dialog-unsaved-refused-telephone" name="telephone" type="text" value="01632 960123" /><output for="dialog-unsaved-refused-telephone">01632 960123</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-refused-street-form-group"><label for="dialog-unsaved-refused-street">Street address</label><input id="dialog-unsaved-refused-street" name="street" type="text" value="12 Garden Street" /><output for="dialog-unsaved-refused-street">12 Garden Street</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-refused-town-form-group"><label for="dialog-unsaved-refused-town">Town</label><input id="dialog-unsaved-refused-town" name="town" type="text" value="Oakmere" /><output for="dialog-unsaved-refused-town">Oakmere</output></div>
        <div data-kit-role="form-group" data-kit-width="narrow" id="dialog-unsaved-refused-postcode-form-group"><label for="dialog-unsaved-refused-postcode">Postcode</label><input id="dialog-unsaved-refused-postcode" name="postcode" type="text" value="OX1 1AA" /><output for="dialog-unsaved-refused-postcode">OX1 1AA</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-refused-access-form-group"><label for="dialog-unsaved-refused-access">Access</label><input id="dialog-unsaved-refused-access" name="access" type="text" value="Step-free entrance" /><output for="dialog-unsaved-refused-access">Step-free entrance</output></div>
        <div data-kit-role="form-group" id="dialog-unsaved-refused-notes-form-group"><label for="dialog-unsaved-refused-notes">Notes</label><input id="dialog-unsaved-refused-notes" name="notes" type="text" value="Key held at reception" /><output for="dialog-unsaved-refused-notes">Key held at reception</output></div>
    </form></div>
    <div data-kit-role="action-group">
      <div data-kit-role="refusal" id="dialog-unsaved-refused-refusal" role="alert" aria-atomic="true"><p data-kit-region="line">Room not added. A room with this name already exists.</p><ul data-kit-region="causes"><li><a href="#dialog-unsaved-refused-name">Choose another room name</a></li></ul></div>
      <div data-kit-region="actions">
        <button type="submit" form="dialog-unsaved-refused-form" data-kit-role="primary-action"><span data-kit-region="label">Add room</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="dialog-unsaved-refused" command="close"><span data-kit-region="label">Cancel</span></button>
      </div>
      <p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p>
    </div>
  </dialog>
</details>

<p class="specimen-case-line">A long room form with its entry saved and its actions in place.</p>
<details>
  <summary>Add a room with its entry saved</summary>
  <button type="button" id="dialog-unsaved-saved-opener" data-kit-role="secondary-action" commandfor="dialog-unsaved-saved" command="show-modal"><span data-kit-region="label">Add a room</span></button>
  <dialog closedby="closerequest" id="dialog-unsaved-saved" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-unsaved-saved-title">
    <h2 data-kit-region="heading" id="dialog-unsaved-saved-title">Add a room</h2>
    <div data-kit-region="form-groups"><form id="dialog-unsaved-saved-form">
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-saved-name-form-group"><label for="dialog-unsaved-saved-name">Room name</label><input id="dialog-unsaved-saved-name" name="name" type="text" value="Garden Room" /><output for="dialog-unsaved-saved-name">Garden Room</output></div>
        <div data-kit-role="form-group" data-kit-width="narrow" id="dialog-unsaved-saved-seats-form-group"><label for="dialog-unsaved-saved-seats">Seats</label><input id="dialog-unsaved-saved-seats" name="seats" type="text" value="40" /><output for="dialog-unsaved-saved-seats">40</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-saved-building-form-group"><label for="dialog-unsaved-saved-building">Building</label><input id="dialog-unsaved-saved-building" name="building" type="text" value="Community centre" /><output for="dialog-unsaved-saved-building">Community centre</output></div>
        <div data-kit-role="form-group" data-kit-width="short" id="dialog-unsaved-saved-floor-form-group"><label for="dialog-unsaved-saved-floor">Floor</label><input id="dialog-unsaved-saved-floor" name="floor" type="text" value="Ground floor" /><output for="dialog-unsaved-saved-floor">Ground floor</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-saved-contact-form-group"><label for="dialog-unsaved-saved-contact">Contact name</label><input id="dialog-unsaved-saved-contact" name="contact" type="text" value="Aisha Khan" /><output for="dialog-unsaved-saved-contact">Aisha Khan</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-saved-email-form-group"><label for="dialog-unsaved-saved-email">Contact email</label><input id="dialog-unsaved-saved-email" name="email" type="text" value="aisha@example.org" /><output for="dialog-unsaved-saved-email">aisha@example.org</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-saved-telephone-form-group"><label for="dialog-unsaved-saved-telephone">Telephone</label><input id="dialog-unsaved-saved-telephone" name="telephone" type="text" value="01632 960123" /><output for="dialog-unsaved-saved-telephone">01632 960123</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-saved-street-form-group"><label for="dialog-unsaved-saved-street">Street address</label><input id="dialog-unsaved-saved-street" name="street" type="text" value="12 Garden Street" /><output for="dialog-unsaved-saved-street">12 Garden Street</output></div>
        <div data-kit-role="form-group" data-kit-width="medium" id="dialog-unsaved-saved-town-form-group"><label for="dialog-unsaved-saved-town">Town</label><input id="dialog-unsaved-saved-town" name="town" type="text" value="Oakmere" /><output for="dialog-unsaved-saved-town">Oakmere</output></div>
        <div data-kit-role="form-group" data-kit-width="narrow" id="dialog-unsaved-saved-postcode-form-group"><label for="dialog-unsaved-saved-postcode">Postcode</label><input id="dialog-unsaved-saved-postcode" name="postcode" type="text" value="OX1 1AA" /><output for="dialog-unsaved-saved-postcode">OX1 1AA</output></div>
        <div data-kit-role="form-group" data-kit-width="wide" id="dialog-unsaved-saved-access-form-group"><label for="dialog-unsaved-saved-access">Access</label><input id="dialog-unsaved-saved-access" name="access" type="text" value="Step-free entrance" /><output for="dialog-unsaved-saved-access">Step-free entrance</output></div>
        <div data-kit-role="form-group" id="dialog-unsaved-saved-notes-form-group"><label for="dialog-unsaved-saved-notes">Notes</label><input id="dialog-unsaved-saved-notes" name="notes" type="text" value="Key held at reception" /><output for="dialog-unsaved-saved-notes">Key held at reception</output></div>
    </form></div>
    <div data-kit-role="action-group">
      <div data-kit-region="actions">
        <button type="submit" form="dialog-unsaved-saved-form" data-kit-role="primary-action"><span data-kit-region="label">Add room</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="dialog-unsaved-saved" command="close"><span data-kit-region="label">Cancel</span></button>
      </div>
      <p data-kit-role="status-line" role="status" aria-live="polite"></p>
    </div>
  </dialog>
</details>

<p class="specimen-case-line">A Dialog whose Primary lead waits.</p>
<details>
  <summary>Send the invoice</summary>
  <button type="button" id="dialog-inert-invoice-opener" data-kit-role="secondary-action" commandfor="dialog-inert-invoice" command="show-modal"><span data-kit-region="label">Send the invoice</span></button>
  <dialog closedby="closerequest" id="dialog-inert-invoice" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-inert-invoice-title">
    <h2 data-kit-region="heading" id="dialog-inert-invoice-title">Send the invoice</h2>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Send the Oakmere WI invoice">
      <h3 data-kit-region="subject">Oakmere WI invoice</h3>
      <p data-kit-region="consequence">Sending this invoice emails it to Oakmere WI with its payment link.</p>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path"></p>
    </section>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="button" id="dialog-inert-invoice-send" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="dialog-inert-invoice-send-words"><span data-kit-region="label">Send invoice</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-inert-invoice" command="close"><span data-kit-region="label">Keep editing</span></button>
      <p data-kit-region="words" id="dialog-inert-invoice-send-words">Send waits until the invoice has been prepared.</p>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A Dialog whose Destructive lead waits.</p>
<details>
  <summary>Delete the booking</summary>
  <button type="button" id="dialog-inert-delete-opener" data-kit-role="secondary-action" commandfor="dialog-inert-delete" command="show-modal"><span data-kit-region="label">Delete the booking</span></button>
  <dialog closedby="closerequest" id="dialog-inert-delete" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-inert-delete-title">
    <h2 data-kit-region="heading" id="dialog-inert-delete-title">Delete the booking</h2>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Delete the Oakmere WI booking">
      <h3 data-kit-region="subject">Oakmere WI booking</h3>
      <p data-kit-region="consequence">Deleting this booking frees Tuesday in the Main Hall and removes its invoice.</p>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path"></p>
    </section>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="button" id="dialog-inert-delete-delete" data-kit-role="destructive-action" data-kit-state="inert" disabled aria-describedby="dialog-inert-delete-delete-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 booking</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-inert-delete" command="close"><span data-kit-region="label">Keep the booking</span></button>
      <p data-kit-region="words" id="dialog-inert-delete-delete-words">Delete waits until the booking’s invoice has been checked.</p>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A creation in steps whose Continue waits.</p>
<details>
  <summary>New event</summary>
  <button type="button" id="dialog-inert-event-opener" data-kit-role="secondary-action" commandfor="dialog-inert-event" command="show-modal"><span data-kit-region="label">New event</span></button>
  <dialog closedby="closerequest" id="dialog-inert-event" data-kit-role="dialog" data-kit-state="open" aria-labelledby="dialog-inert-event-title">
    <h2 data-kit-region="heading" id="dialog-inert-event-title">New event</h2>
    <ol data-kit-role="progress" data-kit-region="progress" aria-label="Steps">
      <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Name</span></li>
      <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Organiser</span></li>
      <li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Room</span></li>
    </ol>
    <div data-kit-region="form-groups">
      <form id="dialog-inert-event-form">
        <div data-kit-role="form-group" data-kit-width="medium">
          <label for="dialog-inert-event-name">Event name</label>
          <input id="dialog-inert-event-name" name="name" type="text" value="Autumn programme hire" />
          <output for="dialog-inert-event-name">Autumn programme hire</output>
        </div>
      </form>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="submit" form="dialog-inert-event-form" id="dialog-inert-event-continue" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="dialog-inert-event-continue-words"><span data-kit-region="label">Continue</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="dialog-inert-event" command="close"><span data-kit-region="label">Cancel</span></button>
      <p data-kit-region="words" id="dialog-inert-event-continue-words">Continue waits until the event name has been checked.</p>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>