Labelled fact

<p class="specimen-case-line">Amount, Stamp, Tag and Image values keep their roles.</p>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount due</dt><dd data-kit-region="value"><span data-kit-role="amount">£84.00</span></dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Standing</dt><dd data-kit-region="value"><span data-kit-role="stamp" data-kit-state="neutral">Draft</span></dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Tags</dt><dd data-kit-region="value"><span data-kit-region="tags"><span data-kit-role="tag"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Regular</span></span></span></dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Condition photo</dt><dd data-kit-region="value"><a data-kit-role="image" id="fact-photo" href="#fact-photo-overlay"><img src="../chair-damage.svg" alt="Chair with a split seat, photographed after a hall booking." width="800" height="500" style="--kit-image-natural-width: 800; --kit-image-natural-height: 500"><span hidden>The photo cannot be shown.</span></a></dd></dl>
</div>
<div data-kit-role="image-overlay" id="fact-photo-overlay" tabindex="-1" aria-labelledby="fact-photo-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image"><img src="../chair-damage.svg" width="800" height="500" alt="Chair with a split seat, photographed after a hall booking."><span hidden>The photo cannot be shown.</span></div>
    <figcaption data-kit-region="caption" id="fact-photo-overlay-caption">Split chair seat</figcaption>
    <nav data-kit-region="actions" aria-label="Condition photo">
      <a data-kit-role="secondary-action" href="../chair-damage.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#fact-photo"><span data-kit-region="label">Close</span></a>
    </nav>
  </figure>
  <div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Standing</dt>
  <dd data-kit-region="value" data-kit-role="stamp" data-kit-state="neutral">Draft</dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Booking</dt>
  <dd data-kit-region="value" data-kit-role="stamp" data-kit-state="settled ended">Cancelled</dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Amount due</dt>
  <dd data-kit-region="value" data-kit-role="amount">£84.00</dd>
  <dd data-kit-region="supporting"><span data-kit-role="amount">1</span> booking</dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Issued</dt>
  <dd data-kit-region="value"><time datetime="2025-04-03">3 April 2025</time></dd>
  <dd data-kit-region="supporting">By Maya Patel at <time datetime="2025-04-03T09:12+01:00">09:12</time></dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Bookings</dt>
  <dd data-kit-region="value" data-kit-role="amount">3</dd>
  <dd data-kit-region="supporting">Main Hall, <time datetime="2025-04-12">12 April 2025</time></dd>
  <dd data-kit-region="supporting">Meeting Room, <time datetime="2025-04-15">15 April 2025</time></dd>
  <dd data-kit-region="supporting">Main Hall, <time datetime="2025-04-19">19 April 2025</time>, the spring term choir rehearsal</dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Hirers' rating</dt>
  <dd data-kit-region="value"><span data-kit-role="rating" role="img" aria-label="4.5 out of 5, from 38 reviews"><span data-kit-region="stars" style="--kit-rating: 4.5"></span><span data-kit-region="score"><span data-kit-role="amount">4.5</span> from <span data-kit-role="amount">38</span> reviews</span></span></dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Email</dt>
  <dd data-kit-region="value"><span data-kit-region="email"><span><span>penelope<wbr />.quintanilla<wbr />.wexford@</span><wbr /><span>meetingrooms<wbr />.bookings<wbr />.oakmereprimaryschoolhall.example</span></span></span></dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Booking reference</dt>
  <dd data-kit-region="value"><code>BH2025021413001600MEETINGROOM00580PD198LOCKBOX0412Q7</code></dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Correction</dt>
  <dd data-kit-region="value">Reissued with the corrected billing address as <code><span>OH-</span><span>INV-</span><span>2025-</span><span>0003-</span><span>R1</span></code></dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Purchase order</dt>
  <dd data-kit-region="value">Not known</dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Billing contact</dt>
  <dd data-kit-region="value">Aisha Khan</dd>
  <dd data-kit-region="supporting">Billing address not confirmed</dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Purpose of hire</dt>
  <dd data-kit-region="value">Weekly choir rehearsal for the spring term, with the piano moved to the stage end, forty chairs set in rows facing it and the serving hatch open for tea in the interval</dd>
  <dd data-kit-region="supporting">Agreed with the caretaker on <time datetime="2025-03-28">28 March 2025</time>, on the condition that the hall is cleared by <time datetime="21:30">21:30</time> and the chairs are stacked in the store room</dd>
</dl>
<dl data-kit-role="labelled-fact" data-kit-holds="authored-text">
  <dt data-kit-region="name">Access note</dt>
  <dd data-kit-region="value" data-kit-authored-text="true"><h5>Before you arrive</h5><p>Ask <a data-kit-region="mention" href="#role-labelled-fact">@Aisha Khan</a> to confirm <strong>the address</strong> for <span data-kit-region="mention">B-1042 Garden room</span> before <time datetime="2025-03-14">14 March 2025</time>.<br>Read the <a href="https://example.com/hire-terms">hire terms</a> first, <em>then</em> use <code>4721</code> at the gate.</p><ul><li><p>Bring your own chairs.</p></li><li><p>Leave the hall by ten.</p></li></ul><ol><li><p>Ring the bell by the side gate.</p></li><li><p>Wait for the caretaker.</p></li></ol><ul><li><svg data-kit-icon="check-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"></path></svg><span data-kit-region="spoken">Done</span><p>Deposit paid</p></li><li><svg data-kit-icon="square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z"></path></svg><span data-kit-region="spoken">Not done</span><p>Key returned</p></li></ul><blockquote><p>The side door sticks in the cold.</p></blockquote><pre><code>Gate: 4721
Alarm: 0990</code></pre><p>Floor plan: <a href="#role-labelled-fact">garden-room-plan.pdf</a></p></dd>
</dl>
</div>
<p>Send the signed form to <span data-kit-region="email"><span><span>aisha<wbr />.khan@</span><wbr /><span>oakmereprimaryschool.example</span></span></span>, and the hall confirms the booking.</p>
<p>Questions about the invoice go to <a href="mailto:penelope.quintanilla.wexford@meetingrooms.bookings.oakmereprimaryschoolhall.example"><span data-kit-region="email"><span><span>penelope<wbr />.quintanilla<wbr />.wexford@</span><wbr /><span>meetingrooms<wbr />.bookings<wbr />.oakmereprimaryschoolhall.example</span></span></span></a>, who answers within two days.</p>
<p>Billing email edited where it stands.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact" data-kit-holds="edit">
  <dt data-kit-region="name">Billing email</dt>
  <dd data-kit-region="value"><span data-kit-region="email"><span><span>accounts@</span><wbr /><span>oakmereprimary.org</span></span></span><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Edit billing email"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
  <dd data-kit-region="supporting">Invoices for every hire go here</dd>
  <dd data-kit-region="edit-form" id="billing-email-edit" hidden>
    <form>
      <div data-kit-role="form-group" data-kit-holds="help">
        <label for="billing-email-edit-control">Billing email</label>
        <input id="billing-email-edit-control" name="email" type="email" value="accounts@oakmereprimary.org" aria-describedby="billing-email-edit-help">
        <output for="billing-email-edit-control">accounts@oakmereprimary.org</output>
        <span data-kit-region="help" id="billing-email-edit-help">Use the address that receives the hirer’s invoices.</span>
      </div>
      <div data-kit-role="action-group">
        <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </form>
  </dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Hirer</dt>
  <dd data-kit-region="value">Oakmere Primary School</dd>
</dl>
</div>
<p class="specimen-case-line">Billing email waiting to be edited.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact" data-kit-holds="edit">
  <dt data-kit-region="name">Billing email</dt>
  <dd data-kit-region="value"><span data-kit-region="email"><span><span>accounts@</span><wbr /><span>oakmereprimary.org</span></span></span><button type="button" data-kit-role="icon-action" data-kit-region="edit" id="billing-email-inert-action" data-kit-state="inert" disabled aria-describedby="billing-email-inert-action-words" aria-label="Edit billing email"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
  <dd data-kit-region="supporting">Invoices for every hire go here</dd>
  <dd data-kit-region="words" id="billing-email-inert-action-words">Confirm the billing contact before editing.</dd>
  <dd data-kit-region="edit-form" id="billing-email-inert" hidden>
    <form>
      <div data-kit-role="form-group" data-kit-holds="help">
        <label for="billing-email-inert-control">Billing email</label>
        <input id="billing-email-inert-control" name="email" type="email" value="accounts@oakmereprimary.org" aria-describedby="billing-email-inert-help">
        <output for="billing-email-inert-control">accounts@oakmereprimary.org</output>
        <span data-kit-region="help" id="billing-email-inert-help">Use the address that receives the hirer’s invoices.</span>
      </div>
      <div data-kit-role="action-group">
        <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </form>
  </dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Hirer</dt>
  <dd data-kit-region="value">Oakmere Primary School</dd>
</dl>
</div>
<p>Billing email being edited.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact" data-kit-holds="edit">
  <dt data-kit-region="name">Billing email</dt>
  <dd data-kit-region="value"><span data-kit-region="email"><span><span>accounts@</span><wbr /><span>oakmereprimary.org</span></span></span><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Edit billing email"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
  <dd data-kit-region="supporting">Invoices for every hire go here</dd>
  <dd data-kit-region="edit-form" id="billing-email-editing">
    <form>
      <div data-kit-role="form-group" data-kit-holds="help">
        <label for="billing-email-editing-control">Billing email</label>
        <input id="billing-email-editing-control" name="email" type="email" value="accounts@oakmereprimary.org" aria-describedby="billing-email-editing-help">
        <output for="billing-email-editing-control">accounts@oakmereprimary.org</output>
        <span data-kit-region="help" id="billing-email-editing-help">Use the address that receives the hirer’s invoices.</span>
      </div>
      <div data-kit-role="action-group">
        <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </form>
  </dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Hirer</dt>
  <dd data-kit-region="value">Oakmere Primary School</dd>
</dl>
</div>
<p>Billing email refused on save.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact" data-kit-holds="edit">
  <dt data-kit-region="name">Billing email</dt>
  <dd data-kit-region="value"><span data-kit-region="email"><span><span>accounts@</span><wbr /><span>oakmereprimary.org</span></span></span><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Edit billing email"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
  <dd data-kit-region="supporting">Invoices for every hire go here</dd>
  <dd data-kit-region="edit-form" id="billing-email-refused">
    <form>
      <div data-kit-role="form-group" data-kit-holds="help" data-kit-state="error">
        <label for="billing-email-refused-control">Billing email</label>
        <input id="billing-email-refused-control" name="email" type="email" value="accounts@" aria-invalid="true" aria-describedby="billing-email-refused-help billing-email-refused-error">
        <output for="billing-email-refused-control">accounts@</output>
        <span data-kit-region="help" id="billing-email-refused-help">Use the address that receives the hirer’s invoices.</span>
        <span data-kit-region="error" id="billing-email-refused-error">Enter a complete billing email, such as aisha@oakmereprimary.org.</span>
      </div>
      <div data-kit-role="action-group">
        <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </form>
  </dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Hirer</dt>
  <dd data-kit-region="value">Oakmere Primary School</dd>
</dl>
</div>
<p>Billing email reopened holding a kept entry.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact" data-kit-holds="edit">
  <dt data-kit-region="name">Billing email</dt>
  <dd data-kit-region="value"><span data-kit-region="email"><span><span>accounts@</span><wbr /><span>oakmereprimary.org</span></span></span><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Edit billing email"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
  <dd data-kit-region="supporting">Invoices for every hire go here</dd>
  <dd data-kit-region="edit-form" id="billing-email-kept">
    <form id="billing-email-kept-form" data-kit-keep="aisha-khan/hirer/oakmere-primary/billing-email" data-kit-keep-version="12">
      <div data-kit-role="form-group" data-kit-holds="help">
        <label for="billing-email-kept-control">Billing email</label>
        <input id="billing-email-kept-control" name="email" type="email" value="bursar@oakmereprimary.org" aria-describedby="billing-email-kept-help">
        <output for="billing-email-kept-control">bursar@oakmereprimary.org</output>
        <span data-kit-region="help" id="billing-email-kept-help">Use the address that receives the hirer’s invoices.</span>
      </div>
      <div data-kit-role="action-group">
        <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
        <p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p>
      </div>
    </form>
  </dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Hirer</dt>
  <dd data-kit-region="value">Oakmere Primary School</dd>
</dl>
</div>
<p>Class ages being edited, an age range chosen.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact" data-kit-holds="edit">
  <dt data-kit-region="name">Ages</dt>
  <dd data-kit-region="value">5 to 11, and all older dancers<button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Edit ages"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
  <dd data-kit-region="edit-form" id="class-ages-editing">
    <form>
      <fieldset data-kit-role="selection-control" data-kit-region="group" id="class-ages-editing-group">
        <legend>Ages</legend>
        <label><input data-kit-role="selection-control" type="radio" name="class-ages" value="all"><span>All ages</span><output>Not chosen</output></label>
        <label><input data-kit-role="selection-control" type="radio" name="class-ages" value="range" aria-controls="class-ages-editing-group-range-fields" checked><span>An age range</span><output>Chosen</output></label>
        <div data-kit-region="choice-fields" id="class-ages-editing-group-range-fields">
          <div data-kit-role="form-group" data-kit-width="narrow">
            <label for="class-ages-editing-youngest">Youngest age</label>
            <input id="class-ages-editing-youngest" name="youngest-age" inputmode="numeric" value="5">
            <output for="class-ages-editing-youngest">5</output>
          </div>
          <div data-kit-role="form-group" data-kit-width="narrow">
            <label for="class-ages-editing-oldest">Oldest age</label>
            <input id="class-ages-editing-oldest" name="oldest-age" inputmode="numeric" value="11">
            <output for="class-ages-editing-oldest">11</output>
          </div>
          <div data-kit-role="selection-control" data-kit-region="group" id="class-ages-editing-older">
            <input type="hidden" name="include-older" value="">
            <label><input data-kit-role="selection-control" type="checkbox" name="include-older" value="true" checked><span>Include all older dancers</span><output>Included</output></label>
          </div>
        </div>
        <label><input data-kit-role="selection-control" type="radio" name="class-ages" value="audition"><span>By audition</span><output>Not chosen</output></label>
      </fieldset>
      <div data-kit-role="action-group">
        <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </form>
  </dd>
</dl>
</div>
<p class="specimen-case-line">A value in words carries its Amount within the sentence.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Deposit</dt>
  <dd data-kit-region="value"><span data-kit-role="amount">£50.00</span>, returned once the hall is cleared</dd>
</dl>
</div>
<p class="specimen-case-line">A value written across lines stands under its label, beside a sentence carrying an Amount.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Hire fee</dt>
  <dd data-kit-region="value" data-kit-role="amount">
    £120.00
  </dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Cleaning</dt>
  <dd data-kit-region="value">Charged at <span data-kit-role="amount">£25.00</span> when the kitchen is left unwashed after the hire</dd>
</dl>
</div>
<p class="specimen-case-line">A Labelled fact in a records table cell keeps its sentence.</p>
<div data-kit-region="rows">
  <div data-kit-region="table" tabindex="0">
    <table data-kit-table="records">
      <caption>Deposits</caption>
      <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Hire</th><th scope="col">Deposit</th></tr></thead>
      <tbody>
        <tr><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere WI</a></th><td data-label="Deposit"><div data-kit-region="fact"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Kept</dt><dd data-kit-region="value"><span data-kit-role="amount">£20.00</span> for cleaning the kitchen</dd></dl></div></td></tr>
      </tbody>
    </table>
  </div>
</div>
<p class="specimen-case-line">A value given an address stands inside a link named by its label; the current one is marked.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name" id="fact-invoiced-name">Invoiced</dt>
  <dd data-kit-region="value" data-kit-role="amount"><a id="fact-invoiced" aria-labelledby="fact-invoiced-name fact-invoiced" href="?measure=invoiced" aria-current="true" data-kit-state="current">£2,096.00</a></dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name" id="fact-collected-name">Collected</dt>
  <dd data-kit-region="value" data-kit-role="amount"><a id="fact-collected" aria-labelledby="fact-collected-name fact-collected" href="?measure=collected">£1,640.00</a></dd>
</dl>
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name" id="fact-deposit-name">Deposit</dt>
  <dd data-kit-region="value" data-kit-role="stamp" data-kit-state="attention"><a id="fact-deposit" aria-labelledby="fact-deposit-name fact-deposit" href="?view=deposit">Unpaid</a></dd>
</dl>
</div>
<p class="specimen-case-line">A Labelled fact in its div form holding a note.</p>
<div data-kit-role="fact-group">
<div data-kit-role="labelled-fact" data-kit-holds="authored-text">
  <span data-kit-region="name">Closing up</span>
  <div data-kit-region="value" data-kit-authored-text="true"><p>Leave by the side gate.</p><ul><li><svg data-kit-icon="check-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"></path></svg><span data-kit-region="spoken">Done</span><p>Heating off</p></li><li><svg data-kit-icon="square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z"></path></svg><span data-kit-region="spoken">Not done</span><p>Gate locked</p></li></ul></div>
</div>
</div>

<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Standing</dt>
  <dd data-kit-region="value" data-kit-role="stamp" data-kit-state="settled">Cancelled</dd>
  <dd data-kit-region="supporting">By Maya Patel on <time datetime="2025-04-18">18 April 2025</time></dd>
  <dd data-kit-region="standing" data-kit-state="failed">
    <p role="alert">This meeting was not reinstated: the connection dropped before it saved.</p>
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button>
  </dd>
</dl>
</div>
<p class="specimen-case-line">With Try again unavailable.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Standing</dt>
  <dd data-kit-region="value" data-kit-role="stamp" data-kit-state="settled">Cancelled</dd>
  <dd data-kit-region="supporting">By Maya Patel on <time datetime="2025-04-18">18 April 2025</time></dd>
  <dd data-kit-region="standing" data-kit-state="failed">
    <p role="alert">This meeting was not reinstated: the connection dropped before it saved.</p>
    <button type="button" id="role-labelled-fact-failed-try-again" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-labelled-fact-failed-try-again-words"><span data-kit-region="label">Try again</span></button>
    <p data-kit-region="words" id="role-labelled-fact-failed-try-again-words">Try again once you are back online.</p>
  </dd>
</dl>
</div>
<p class="specimen-case-line">With the edit open.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact" data-kit-holds="edit">
  <dt data-kit-region="name">Billing email</dt>
  <dd data-kit-region="value"><span data-kit-region="email"><span><span>accounts@</span><wbr /><span>oakmereprimary.org</span></span></span><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Edit billing email"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
  <dd data-kit-region="supporting">Invoices for every hire go here</dd>
  <dd data-kit-region="standing" data-kit-state="failed">
    <p role="alert">Billing email was not changed to finance@oakmereprimary.org: the connection dropped before it saved.</p>
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button>
  </dd>
  <dd data-kit-region="edit-form" id="role-labelled-fact-failed-editing">
    <form>
      <div data-kit-role="form-group" data-kit-holds="help">
        <label for="role-labelled-fact-failed-editing-control">Billing email</label>
        <input id="role-labelled-fact-failed-editing-control" name="email" type="email" value="finance@oakmereprimary.org" aria-describedby="role-labelled-fact-failed-editing-help">
        <output for="role-labelled-fact-failed-editing-control">finance@oakmereprimary.org</output>
        <span data-kit-region="help" id="role-labelled-fact-failed-editing-help">Use the address that receives the hirer’s invoices.</span>
      </div>
      <div data-kit-role="action-group">
        <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
        <p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div>
    </form>
  </dd>
</dl>
</div>

<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Room</dt>
  <dd data-kit-region="value">Garden Room</dd>
  <dd data-kit-region="standing" data-kit-state="conflict">
    <p role="alert">Maya Patel moved this meeting to the Garden Room while you were moving it to the Main Hall.</p>
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Move it to the Main Hall</span></button>
  </dd>
</dl>
</div>
<p class="specimen-case-line">With the action unavailable.</p>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Room</dt>
  <dd data-kit-region="value">Garden Room</dd>
  <dd data-kit-region="standing" data-kit-state="conflict">
    <p role="alert">Maya Patel moved this meeting to the Garden Room while you were moving it to the Main Hall.</p>
    <button type="button" id="role-labelled-fact-conflict-action" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-labelled-fact-conflict-action-words"><span data-kit-region="label">Move it to the Main Hall</span></button>
    <p data-kit-region="words" id="role-labelled-fact-conflict-action-words">The Main Hall is taken at that time.</p>
  </dd>
</dl>
</div>

<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Standing</dt>
  <dd data-kit-region="value" data-kit-role="stamp" data-kit-state="settled">Scheduled</dd>
  <dd data-kit-region="standing" data-kit-state="processing">
    <p role="status">Reinstating this meeting…</p>
  </dd>
</dl>
</div>