kit

empty

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

empty

No invoices yet. An invoice stands here once a booking is confirmed.

Raise an invoice

A List filtered to nothing, its words naming the filter.

No invoices are overdue.

A Settings section whose list is empty, its Scope line kept.

Sections

Closures

Closures apply to every room in the hall.

No closures yet. Days the hall is shut stand here, and no booking can be taken on them.

A Settings section with several lists under its heading, one empty beside a full one.

Sections

Members

People who can sign in

Margaret Hollingsworth

Takes bookings

Aisha Rahman

Sees the calendar

Invitations waiting for an answer

None right now. An invitation stands here until it is accepted.

An empty Record, its local tabs kept.

This invoice has no lines yet. Lines stand here once a booking is added.

An empty Reports, its controls and count kept.

Period
Compare
Clear filters
Schedule

No scheduled delivery.

No bookings in this period. Figures stand here once a booking is invoiced.

Choose another period

0 hirers

An empty Calendar week with an inert action and disabled More, its hours kept.

View
Mon
Tue
Wed

Nothing booked this week. Start a booking on any day.

Choose a hall before starting a booking.

Choose a hall before importing bookings.

Nothing booked this week. Start a booking on any day.

Choose a hall before starting a booking.

Choose a hall before importing bookings.

An empty Calendar day by Room, one Room's name long.

Skip to content
kit

Calendar

View
Main Hall
Meeting Room
Memorial Room
Upper Room above the Old Schoolhouse Porch
Kitchen
Garden Room
Vestry

Nothing booked this day. Start a booking in any room.

Nothing booked this day. Start a booking in any room.

An empty Calendar month.

View
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Nothing booked this month. Start a booking on any day.

Nothing booked this month. Start a booking on any day.

An empty Field result.

No checks are due in the Meeting Room today.

Back to bookings

A Home whose every region is empty.

Needs your attention

Nothing needs you right now.

Assigned to you

Hires assigned to you show here.

Open the calendar

Followed changes

Changes to records you follow show here. Follow a record from its page.

A Home whose assigned work stands in two groups, one of them empty.

Needs your attention

Nothing needs you right now.

Assigned to you

Today

This week

No hires this week.

Followed changes

Changes to records you follow show here. Follow a record from its page.

A Record whose bookings and history are empty.

Oakmere WI hire

Hirer
Oakmere WI

Bookings

No bookings yet.

New booking

History

Changes to this hire show here.

An empty region whose next action waits, its words beneath it.

Invitations

No invitations yet. People you invite stand here until they accept.

Add an email address before inviting someone.

An empty region with a disabled action and inert More, their words together.

Invitations

No invitations yet. People you invite stand here until they accept.

Add an email address before inviting someone.

Choose a hall before importing invitations.

A Headed region standing alone with nothing in it yet.

Key holders

No key holders yet. Anyone given a key to the hall shows here.

Source
<div data-kit-layout="list">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="rows" data-kit-state="empty" aria-label="Invoices">
    <div data-kit-region="notices" aria-live="polite"></div>
    <p>No invoices yet. An invoice stands here once a booking is confirmed.</p>
    <div data-kit-role="action-group">
      <a data-kit-role="secondary-action" href="../layout-form/#layout-form"><span data-kit-region="label">Raise an invoice</span></a>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Import invoices</span></button>
    </div>
  </section>
</div>
<p class="specimen-case-line">A List filtered to nothing, its words naming the filter.</p>
<div data-kit-layout="list">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="rows" data-kit-state="empty" aria-label="Invoices">
    <div data-kit-region="notices" aria-live="polite"></div>
    <p>No invoices are overdue.</p>
    <div data-kit-role="action-group">
      <a data-kit-role="secondary-action" href="../list/"><span data-kit-region="label">Clear the filter</span></a>
    </div>
  </section>
</div>
<p class="specimen-case-line">A Settings section whose list is empty, its Scope line kept.</p>
<div data-kit-layout="settings" data-kit-holds="form-or-list">
  <div data-kit-region="notices" aria-live="polite"></div>
  <details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" href="../../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../../settings/?section=closures" aria-current="page"><span data-kit-region="name">Closures</span></a></li></ul></nav></details>
  <section data-kit-region="selected-section" aria-labelledby="empty-closures-title">
    <h2 id="empty-closures-title">Closures</h2>
    <p data-kit-role="scope-line">Closures apply to every room in the hall.</p>
    <div data-kit-region="notices" aria-live="polite"></div>
  </section>
  <div data-kit-region="form-or-list" data-kit-state="empty">
    <p>No closures yet. Days the hall is shut stand here, and no booking can be taken on them.</p>
    <div data-kit-role="action-group">
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a closure</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Copy closures from another hall</span></button>
    </div>
  </div>
</div>
<p class="specimen-case-line">A Settings section with several lists under its heading, one empty beside a full one.</p>
<div data-kit-layout="settings" data-kit-holds="form-or-list">
  <div data-kit-region="notices" aria-live="polite"></div>
  <details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" href="../../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../../settings/?section=members" aria-current="page"><span data-kit-region="name">Members</span></a></li></ul></nav></details>
  <section data-kit-region="selected-section" aria-labelledby="empty-lists-members-title">
    <h2 id="empty-lists-members-title">Members</h2>
    <div data-kit-region="notices" aria-live="polite"></div>
  </section>
  <div data-kit-region="form-or-list">
    <div data-kit-role="headed-region">
      <h3 data-kit-region="heading">People who can sign in</h3>
      <div data-kit-region="content">
        <article data-kit-role="row">
          <div data-kit-region="content-column">
            <div data-kit-region="subject-column">
              <div data-kit-region="line">
                <div data-kit-region="subject-stamp"><span data-kit-region="subject">Margaret Hollingsworth</span></div>
                <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Takes bookings</span></p></div>
              </div>
            </div>
          </div>
        </article>
        <article data-kit-role="row">
          <div data-kit-region="content-column">
            <div data-kit-region="subject-column">
              <div data-kit-region="line">
                <div data-kit-region="subject-stamp"><span data-kit-region="subject">Aisha Rahman</span></div>
                <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Sees the calendar</span></p></div>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
    <div data-kit-role="headed-region" data-kit-state="empty">
      <h3 data-kit-region="heading">Invitations waiting for an answer</h3>
      <div data-kit-region="content">
        <p>None right now. An invitation stands here until it is accepted.</p>
        <div data-kit-role="action-group">
          <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Invite someone</span></button>
          <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Share a sign-up link</span></button>
        </div>
      </div>
    </div>
  </div>
</div>
<p class="specimen-case-line">An empty Record, its local tabs kept.</p>
<div data-kit-layout="record">
  <div data-kit-region="notices" aria-live="polite"></div>
  <nav aria-label="Invoice facets" data-kit-region="local-tabs" data-kit-role="local-tabs" id="state-empty-invoice-facets">
    <a href="#state-empty" aria-current="location" data-kit-state="current"><span data-kit-region="name">Invoice</span><span data-kit-region="reserve" aria-hidden="true">Invoice</span></a>
    <a href="#state-empty"><span data-kit-region="name">History</span><span data-kit-region="reserve" aria-hidden="true">History</span></a>
    <div data-kit-region="more" hidden>
      <button data-kit-role="subtle-action" popovertarget="state-empty-invoice-facets-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
      <div data-kit-role="popover" id="state-empty-invoice-facets-more" popover="auto">
        <ul>
          <li hidden><a href="#state-empty" aria-current="location"><span data-kit-region="name">Invoice</span></a></li>
          <li hidden><a href="#state-empty"><span data-kit-region="name">History</span></a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="subject-region" data-kit-state="empty">
    <p>This invoice has no lines yet. Lines stand here once a booking is added.</p>
    <div data-kit-role="action-group">
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a booking</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a note</span></button>
    </div>
  </div>
</div>
<p class="specimen-case-line">An empty Reports, its controls and count kept.</p>
<div data-kit-layout="reports">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section aria-label="Report controls" data-kit-region="period-filters-schedule">
    <div data-kit-role="form-group" id="empty-report-period">
  <fieldset>
    <legend id="empty-report-period-label">Period</legend>
        <div data-kit-dates="{&quot;direction&quot;:&quot;backward&quot;,&quot;firstDay&quot;:&quot;mon&quot;,&quot;last&quot;:&quot;2025-03-10&quot;,&quot;locale&quot;:&quot;en-GB&quot;,&quot;quarters&quot;:{&quot;names&quot;:[[&quot;1st quarter&quot;,&quot;Q1&quot;],[&quot;2nd quarter&quot;,&quot;Q2&quot;],[&quot;3rd quarter&quot;,&quot;Q3&quot;],[&quot;4th quarter&quot;,&quot;Q4&quot;]],&quot;words&quot;:[]},&quot;today&quot;:&quot;2025-03-10&quot;}" data-kit-role="date-range" id="empty-report-period-control-date-range">
  <span data-kit-region="end"><label for="empty-report-period-control" hidden>From</label><label for="empty-report-period-control">Dates</label><input id="empty-report-period-control" data-kit-region="first" type="text" autocomplete="off" value="Last month" aria-describedby="empty-report-period-control-resolved empty-report-period-control-preset-dates" aria-expanded="false" aria-controls="empty-report-period-control-layer"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2025
28 February 2025
28 March 2025
28 April 2025
28 May 2025
28 June 2025
28 July 2025
28 August 2025
28 September 2025
28 October 2025
28 November 2025
28 December 2025</span><span data-kit-region="preset-names" aria-hidden="true">Today
Last 7 days
Last 30 days
Month to date
Last month
Year to date</span></span>
  <span data-kit-region="end"><label for="empty-report-period-control-last">Until</label><input id="empty-report-period-control-last" data-kit-region="last" type="text" autocomplete="off" value="" aria-describedby="empty-report-period-control-resolved" hidden><span data-kit-region="widest-dates" aria-hidden="true">28 January 2025
28 February 2025
28 March 2025
28 April 2025
28 May 2025
28 June 2025
28 July 2025
28 August 2025
28 September 2025
28 October 2025
28 November 2025
28 December 2025</span></span>
  <span id="empty-report-period-control-preset-dates" data-kit-region="preset-dates"><time datetime="2025-03-10/2025-03-10" aria-hidden="true">10 March 2025</time><time datetime="2025-03-04/2025-03-10" aria-hidden="true"><span>4 – </span><wbr><span>10 March 2025</span></time><time datetime="2025-02-09/2025-03-10" aria-hidden="true"><span>9 February – </span><wbr><span>10 March 2025</span></time><time datetime="2025-03-01/2025-03-10" aria-hidden="true"><span>1 – </span><wbr><span>10 March 2025</span></time><time datetime="2025-02-01/2025-02-28">February 2025</time><time datetime="2025-01-01/2025-03-10" aria-hidden="true"><span>1 January – </span><wbr><span>10 March 2025</span></time></span>
  <span id="empty-report-period-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button aria-label="Calendar" data-kit-region="calendar" data-kit-role="icon-action" id="empty-report-period-control-calendar" type="button">
  <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"></path></svg>
</button>
  <input type="hidden" name="period[first]" value="2025-02-01">
  <input type="hidden" name="period[last]" value="2025-02-28">
  <input type="hidden" name="period[preset]" value="last_month">
  <input type="hidden" name="period[compare]" value="previous_period">
  <input type="hidden" name="period[compare_first]" value="2025-01-04">
  <input type="hidden" name="period[compare_last]" value="2025-01-31">
  <div data-kit-role="popover" id="empty-report-period-control-layer" popover="manual" data-kit-region="presets-and-months">
    <ul data-kit-region="presets">
      <li>
        <button type="button" value="today">
          <span data-kit-region="name">Today</span>
          <time datetime="2025-03-10/2025-03-10">10 March 2025</time>
        </button>
      </li><li>
        <button type="button" value="last_7_days">
          <span data-kit-region="name">Last 7 days</span>
          <time datetime="2025-03-04/2025-03-10"><span>4 – </span><wbr><span>10 March 2025</span></time>
        </button>
      </li><li>
        <button type="button" value="last_30_days">
          <span data-kit-region="name">Last 30 days</span>
          <time datetime="2025-02-09/2025-03-10"><span>9 February – </span><wbr><span>10 March 2025</span></time>
        </button>
      </li><li>
        <button type="button" value="month_to_date">
          <span data-kit-region="name">Month to date</span>
          <time datetime="2025-03-01/2025-03-10"><span>1 – </span><wbr><span>10 March 2025</span></time>
        </button>
      </li><li>
        <button aria-current="true" type="button" value="last_month">
          <span data-kit-region="name">Last month</span>
          <time datetime="2025-02-01/2025-02-28">February 2025</time>
        </button>
      </li><li>
        <button type="button" value="year_to_date">
          <span data-kit-region="name">Year to date</span>
          <time datetime="2025-01-01/2025-03-10"><span>1 January – </span><wbr><span>10 March 2025</span></time>
        </button>
      </li>
    </ul>
    <div id="empty-report-period-control-months" data-kit-region="months"></div>
    <div data-kit-region="compare">
      <span id="empty-report-period-control-compare">Compare</span>
      <ul aria-labelledby="empty-report-period-control-compare">
        <li>
          <button type="button" value="previous_period" aria-current="true">
            <span data-kit-region="name">Previous period</span>
            <time datetime="2025-01-04/2025-01-31"><span>4 – </span><wbr><span>31 January 2025</span></time>
          </button>
        </li><li>
          <button type="button" value="previous_year">
            <span data-kit-region="name">Same period last year</span>
            <time datetime="2024-02-01/2024-02-28"><span>1 – </span><wbr><span>28 February 2024</span></time>
          </button>
        </li><li>
          <button type="button" value="none">
            <span data-kit-region="name">None</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>
  </fieldset>
</div>
    <button type="button" data-kit-role="secondary-action" popovertarget="empty-report-filters"><span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span></span></button>
    <div data-kit-region="filters" id="empty-report-filters" data-kit-role="phone-sheet" popover="auto">
      <div data-kit-region="filter">
        <button type="button" data-kit-role="secondary-action" popovertarget="empty-report-hirer-filter"><span data-kit-region="label"><span data-kit-region="name">Hirer</span> <span data-kit-region="value">Oakmere Primary School</span></span></button>
        <div data-kit-role="popover" id="empty-report-hirer-filter" popover="auto">
          <div data-kit-role="form-group" id="empty-report-hirer-form-group"><label for="empty-report-hirer">Hirer</label><div data-kit-region="control"><input enterkeyhint="search" id="empty-report-hirer" name="hirer" type="search" value="Oakmere Primary School"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="empty-report-hirer-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
        </div>
        <a data-kit-role="icon-action" data-kit-region="clear" href="?period=last_month" aria-label="Clear Hirer"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a>
      </div>
      <a data-kit-region="clear-filters" href="?period=last_month">Clear filters</a>
    </div>
    <details data-kit-role="disclosure">
  <summary>Schedule</summary>
  <div data-kit-region="content"><p>No scheduled delivery.</p></div>
</details>
  </section>
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="subject-region" data-kit-state="empty">
    <p>No bookings in this period. Figures stand here once a booking is invoiced.</p>
    <div data-kit-role="action-group">
      <a data-kit-role="secondary-action" href="#state-empty"><span data-kit-region="label">Choose another period</span></a>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Clear the filters</span></button>
    </div>
  </div>
  <footer data-kit-region="count-continuation"><p><span data-kit-role="amount">0</span> hirers</p></footer>
</div>
<p class="specimen-case-line" id="state-empty-menu-subject">An empty Calendar week with an inert action and disabled More, its hours kept.</p>
<div data-kit-layout="calendar">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="toolbar" aria-label="Calendar controls">
    <div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2025-04-21/2025-04-23"><span>21 – </span><wbr><span>23 April 2025</span></time></strong><button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button><a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a><a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a><div data-kit-region="date"><div data-kit-role="form-group" id="empty-date"><label for="empty-date-control" id="empty-date-label">Go to a date</label><div data-kit-role="date-field" id="empty-date-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-21"}'><input id="empty-date-control" type="text" autocomplete="off" value="Monday, 21 April 2025" aria-describedby="empty-date-control-resolved" aria-expanded="false" aria-controls="empty-date-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="empty-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="empty-date-control-calendar" aria-label="Calendar" aria-describedby="empty-date-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="date" value="2025-04-21"><div id="empty-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></div>
    <div data-kit-region="scope"><div data-kit-role="form-group"><label for="state-empty-calendar-scope">Hall</label><div data-kit-region="select"><select id="state-empty-calendar-scope"><option value="all">All halls</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></div>
    <div data-kit-region="view"><div data-kit-role="form-group" id="state-empty-calendar-view-form-group"><fieldset><legend id="state-empty-calendar-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="state-empty-calendar-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="state-empty-calendar-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="state-empty-calendar-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="state-empty-calendar-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div></div>
    <div data-kit-region="actions"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">New booking</span></button></div>
  </section>
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="desk-grid" data-kit-state="empty" style="--kit-calendar-columns: 3; --kit-calendar-hours: 4;">
    <div data-kit-region="heads">
      <div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-21">21 Apr</time></span></div>
      <div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-22">22 Apr</time></span></div>
      <div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-23">23 Apr</time></span></div>
      <div>
        <p>Nothing booked this week. Start a booking on any day.</p>
        <div data-kit-role="action-group" data-kit-holds="words">
          <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="empty-calendar-new" aria-describedby="empty-calendar-new-words"><span data-kit-region="label">New booking</span></button><p data-kit-region="words" id="empty-calendar-new-words">Choose a hall before starting a booking.</p>
          <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a closure</span></button>
<div data-kit-role="action-menu" id="empty-calendar-more"><button type="button" data-kit-role="icon-action" disabled id="empty-calendar-more-trigger" aria-label="More actions for this calendar" aria-haspopup="menu" aria-controls="empty-calendar-more-layer" aria-describedby="empty-calendar-more-trigger-words"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="empty-calendar-more-layer" popover="manual" role="menu" aria-labelledby="empty-calendar-more-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="empty-calendar-more-layer/0-0" role="menuitem"><span data-kit-region="name">Import bookings</span></button></li><li role="none"><button type="button" data-kit-region="item" id="empty-calendar-more-layer/0-1" role="menuitem"><span data-kit-region="name">Copy bookings from another week</span></button></li></ul></li></ul></div><p data-kit-region="words" id="empty-calendar-more-trigger-words">Choose a hall before importing bookings.</p>
        </div>
      </div>
    </div>
    <div data-kit-region="time-grid">
      <aside data-kit-region="time-gutter" aria-label="Times">
        <div data-kit-region="hours">
          <time datetime="09:00">09:00</time>
          <time datetime="10:00">10:00</time>
          <time datetime="11:00">11:00</time>
          <time datetime="12:00">12:00</time>
        </div>
      </aside>
      <div data-kit-region="column"></div>
      <div data-kit-region="column"></div>
      <div data-kit-region="column"></div>
    </div>
  </div>
  <div data-kit-region="days" data-kit-state="empty">
    <div>
      <p>Nothing booked this week. Start a booking on any day.</p>
      <div data-kit-role="action-group" data-kit-holds="words">
        <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="empty-calendar-new-days" aria-describedby="empty-calendar-new-days-words"><span data-kit-region="label">New booking</span></button><p data-kit-region="words" id="empty-calendar-new-days-words">Choose a hall before starting a booking.</p>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a closure</span></button>
<div data-kit-role="action-menu" id="empty-calendar-more-days"><button type="button" data-kit-role="icon-action" disabled id="empty-calendar-more-days-trigger" aria-label="More actions for this calendar" aria-haspopup="menu" aria-controls="empty-calendar-more-days-layer" aria-describedby="empty-calendar-more-trigger-days-words"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="empty-calendar-more-days-layer" popover="manual" role="menu" aria-labelledby="empty-calendar-more-days-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="empty-calendar-more-days-layer/0-0" role="menuitem"><span data-kit-region="name">Import bookings</span></button></li><li role="none"><button type="button" data-kit-region="item" id="empty-calendar-more-days-layer/0-1" role="menuitem"><span data-kit-region="name">Copy bookings from another week</span></button></li></ul></li></ul></div><p data-kit-region="words" id="empty-calendar-more-trigger-days-words">Choose a hall before importing bookings.</p>
      </div>
    </div>
  </div>
</div>
<p class="specimen-case-line">An empty Calendar day by Room, one Room's name long.</p>
<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Calendar</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-24">24 April 2025</time></span></p></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="calendar">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="toolbar" aria-label="Calendar controls">
        <div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2025-04-24">24 April 2025</time></strong><button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button><a data-kit-role="icon-action" data-kit-region="previous" href="?day=previous" rel="prev" aria-label="Previous day"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a><a data-kit-role="icon-action" data-kit-region="next" href="?day=next" rel="next" aria-label="Next day"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a><div data-kit-region="date"><div data-kit-role="form-group" id="empty-date-2"><label for="empty-date-2-control" id="empty-date-2-label">Go to a date</label><div data-kit-role="date-field" id="empty-date-2-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-24"}'><input id="empty-date-2-control" type="text" autocomplete="off" value="Thursday, 24 April 2025" aria-describedby="empty-date-2-control-resolved" aria-expanded="false" aria-controls="empty-date-2-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="empty-date-2-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="empty-date-2-control-calendar" aria-label="Calendar" aria-describedby="empty-date-2-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="date" value="2025-04-24"><div id="empty-date-2-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></div>
        <div data-kit-region="scope"><div data-kit-role="form-group"><label for="state-empty-rooms-scope">Hall</label><div data-kit-region="select"><select id="state-empty-rooms-scope"><option value="all">All halls</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></div>
        <div data-kit-region="view"><div data-kit-role="form-group" id="state-empty-rooms-view-form-group"><fieldset><legend id="state-empty-rooms-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="state-empty-rooms-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="state-empty-rooms-view" value="week"><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="state-empty-rooms-view" value="day" checked><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="state-empty-rooms-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div></div>
        <div data-kit-region="actions"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">New booking</span></button></div>
      </section>
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="desk-grid" data-kit-state="empty" style="--kit-calendar-columns: 7; --kit-calendar-hours: 16;">
        <div data-kit-region="heads">
          <div data-kit-region="column-head"><span><strong>Main Hall</strong></span></div>
          <div data-kit-region="column-head"><span><strong>Meeting Room</strong></span></div>
          <div data-kit-region="column-head"><span><strong>Memorial Room</strong></span></div>
          <div data-kit-region="column-head"><span><strong>Upper Room above the Old Schoolhouse Porch</strong></span></div>
          <div data-kit-region="column-head"><span><strong>Kitchen</strong></span></div>
          <div data-kit-region="column-head"><span><strong>Garden Room</strong></span></div>
          <div data-kit-region="column-head"><span><strong>Vestry</strong></span></div>
          <div>
            <p>Nothing booked this day. Start a booking in any room.</p>
            <div data-kit-role="action-group">
              <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">New booking</span></button>
              <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a closure</span></button>
            </div>
          </div>
        </div>
        <div data-kit-region="time-grid">
          <aside data-kit-region="time-gutter" aria-label="Times">
            <div data-kit-region="hours">
              <time datetime="07:00">07:00</time>
              <time datetime="08:00">08:00</time>
              <time datetime="09:00">09:00</time>
              <time datetime="10:00">10:00</time>
              <time datetime="11:00">11:00</time>
              <time datetime="12:00">12:00</time>
              <time datetime="13:00">13:00</time>
              <time datetime="14:00">14:00</time>
              <time datetime="15:00">15:00</time>
              <time datetime="16:00">16:00</time>
              <time datetime="17:00">17:00</time>
              <time datetime="18:00">18:00</time>
              <time datetime="19:00">19:00</time>
              <time datetime="20:00">20:00</time>
              <time datetime="21:00">21:00</time>
              <time datetime="22:00">22:00</time>
            </div>
          </aside>
          <div data-kit-region="column"></div>
          <div data-kit-region="column"></div>
          <div data-kit-region="column"></div>
          <div data-kit-region="column"></div>
          <div data-kit-region="column"></div>
          <div data-kit-region="column"></div>
          <div data-kit-region="column"></div>
        </div>
      </div>
      <div data-kit-region="days" data-kit-state="empty">
        <div>
          <p>Nothing booked this day. Start a booking in any room.</p>
          <div data-kit-role="action-group">
            <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">New booking</span></button>
            <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a closure</span></button>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<p class="specimen-case-line">An empty Calendar month.</p>
<div data-kit-layout="calendar">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="toolbar" aria-label="Calendar controls">
    <div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2027-02-01">February 2027</time></strong><button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button><a data-kit-role="icon-action" data-kit-region="previous" href="?month=previous" rel="prev" aria-label="Previous month"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a><a data-kit-role="icon-action" data-kit-region="next" href="?month=next" rel="next" aria-label="Next month"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a><div data-kit-region="date"><div data-kit-role="form-group" id="empty-date-3"><label for="empty-date-3-control" id="empty-date-3-label">Go to a date</label><div data-kit-role="date-field" id="empty-date-3-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":"2027-02-01"}'><input id="empty-date-3-control" type="text" autocomplete="off" value="Monday, 1 February 2027" aria-describedby="empty-date-3-control-resolved" aria-expanded="false" aria-controls="empty-date-3-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Friday, 22 January 2027
Saturday, 23 January 2027
Sunday, 24 January 2027
Monday, 25 January 2027
Tuesday, 26 January 2027
Wednesday, 27 January 2027
Thursday, 28 January 2027
Monday, 22 February 2027
Tuesday, 23 February 2027
Wednesday, 24 February 2027
Thursday, 25 February 2027
Friday, 26 February 2027
Saturday, 27 February 2027
Sunday, 28 February 2027
Monday, 22 March 2027
Tuesday, 23 March 2027
Wednesday, 24 March 2027
Thursday, 25 March 2027
Friday, 26 March 2027
Saturday, 27 March 2027
Sunday, 28 March 2027
Thursday, 22 April 2027
Friday, 23 April 2027
Saturday, 24 April 2027
Sunday, 25 April 2027
Monday, 26 April 2027
Tuesday, 27 April 2027
Wednesday, 28 April 2027
Saturday, 22 May 2027
Sunday, 23 May 2027
Monday, 24 May 2027
Tuesday, 25 May 2027
Wednesday, 26 May 2027
Thursday, 27 May 2027
Friday, 28 May 2027
Tuesday, 22 June 2027
Wednesday, 23 June 2027
Thursday, 24 June 2027
Friday, 25 June 2027
Saturday, 26 June 2027
Sunday, 27 June 2027
Monday, 28 June 2027
Thursday, 22 July 2027
Friday, 23 July 2027
Saturday, 24 July 2027
Sunday, 25 July 2027
Monday, 26 July 2027
Tuesday, 27 July 2027
Wednesday, 28 July 2027
Sunday, 22 August 2027
Monday, 23 August 2027
Tuesday, 24 August 2027
Wednesday, 25 August 2027
Thursday, 26 August 2027
Friday, 27 August 2027
Saturday, 28 August 2027
Wednesday, 22 September 2027
Thursday, 23 September 2027
Friday, 24 September 2027
Saturday, 25 September 2027
Sunday, 26 September 2027
Monday, 27 September 2027
Tuesday, 28 September 2027
Friday, 22 October 2027
Saturday, 23 October 2027
Sunday, 24 October 2027
Monday, 25 October 2027
Tuesday, 26 October 2027
Wednesday, 27 October 2027
Thursday, 28 October 2027
Monday, 22 November 2027
Tuesday, 23 November 2027
Wednesday, 24 November 2027
Thursday, 25 November 2027
Friday, 26 November 2027
Saturday, 27 November 2027
Sunday, 28 November 2027
Wednesday, 22 December 2027
Thursday, 23 December 2027
Friday, 24 December 2027
Saturday, 25 December 2027
Sunday, 26 December 2027
Monday, 27 December 2027
Tuesday, 28 December 2027</span><span id="empty-date-3-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="empty-date-3-control-calendar" aria-label="Calendar" aria-describedby="empty-date-3-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="date" value="2027-02-01"><div id="empty-date-3-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></div>
    <div data-kit-region="scope"><div data-kit-role="form-group"><label for="state-empty-month-scope">Hall</label><div data-kit-region="select"><select id="state-empty-month-scope"><option value="all">All halls</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></div>
    <div data-kit-region="view"><div data-kit-role="form-group" id="state-empty-month-view-form-group"><fieldset><legend id="state-empty-month-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="state-empty-month-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="state-empty-month-view" value="week"><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="state-empty-month-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="state-empty-month-view" value="month" checked><span data-kit-region="segment-name">Month</span></label></div></fieldset></div></div>
    <div data-kit-region="actions"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">New booking</span></button></div>
  </section>
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="month-grid" data-kit-state="empty" style="--kit-calendar-columns: 7;">
    <div data-kit-region="heads">
      <div data-kit-region="column-head"><span><strong>Mon</strong></span></div>
      <div data-kit-region="column-head"><span><strong>Tue</strong></span></div>
      <div data-kit-region="column-head"><span><strong>Wed</strong></span></div>
      <div data-kit-region="column-head"><span><strong>Thu</strong></span></div>
      <div data-kit-region="column-head"><span><strong>Fri</strong></span></div>
      <div data-kit-region="column-head"><span><strong>Sat</strong></span></div>
      <div data-kit-region="column-head"><span><strong>Sun</strong></span></div>
    </div>
    <div>
      <p>Nothing booked this month. Start a booking on any day.</p>
      <div data-kit-role="action-group">
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">New booking</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a closure</span></button>
      </div>
    </div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-01">1</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-02">2</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-03">3</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-04">4</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-05">5</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-06">6</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-07">7</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-08">8</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-09">9</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-10">10</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-11">11</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-12">12</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-13">13</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-14">14</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-15">15</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-16">16</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-17">17</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-18">18</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-19">19</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-20">20</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-21">21</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-22">22</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-23">23</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-24">24</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-25">25</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-26">26</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-27">27</time></span></div>
    <div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-28">28</time></span></div>
  </div>
  <div data-kit-region="days" data-kit-state="empty">
    <div>
      <p>Nothing booked this month. Start a booking on any day.</p>
      <div data-kit-role="action-group">
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">New booking</span></button>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a closure</span></button>
      </div>
    </div>
  </div>
</div>
<p class="specimen-case-line">An empty Field result.</p>
<section data-kit-layout="field-result" data-kit-role="field-result" data-kit-state="empty">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="notices" aria-live="polite"></div>
  <div>
    <p>No checks are due in the Meeting Room today.</p>
    <div data-kit-role="action-group">
      <a data-kit-role="secondary-action" href="#state-empty"><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 to bookings</span></a>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Choose another room</span></button>
    </div>
  </div>
</section>
<p class="specimen-case-line">A Home whose every region is empty.</p>
<div data-kit-layout="home" data-kit-holds="assigned-upcoming">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="attention" data-kit-state="empty" aria-labelledby="state-empty-attention-title">
    <h2 id="state-empty-attention-title">Needs your attention</h2>
    <div data-kit-region="notices" aria-live="polite"></div>
    <p>Nothing needs you right now.</p>
  </section>
  <section data-kit-region="assigned-upcoming" data-kit-state="empty" aria-labelledby="state-empty-assigned-title">
    <h2 id="state-empty-assigned-title">Assigned to you</h2>
    <p>Hires assigned to you show here.</p>
    <div data-kit-role="action-group">
      <a data-kit-role="secondary-action" href="../layout-calendar/#layout-calendar"><span data-kit-region="label">Open the calendar</span></a>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">New booking</span></button>
    </div>
  </section>
  <section data-kit-region="followed-changes" data-kit-state="empty" aria-labelledby="state-empty-changes-title">
    <h2 id="state-empty-changes-title">Followed changes</h2>
    <p>Changes to records you follow show here. Follow a record from its page.</p>
  </section>
</div>
<p class="specimen-case-line">A Home whose assigned work stands in two groups, one of them empty.</p>
<div data-kit-layout="home" data-kit-holds="assigned-upcoming">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="attention" data-kit-state="empty" aria-labelledby="state-empty-grouped-attention-title">
    <h2 id="state-empty-grouped-attention-title">Needs your attention</h2>
    <div data-kit-region="notices" aria-live="polite"></div>
    <p>Nothing needs you right now.</p>
  </section>
  <section data-kit-region="assigned-upcoming" aria-labelledby="state-empty-grouped-assigned-title">
    <h2 id="state-empty-grouped-assigned-title">Assigned to you</h2>
    <div data-kit-role="headed-region">
      <h3 data-kit-region="heading">Today</h3>
      <div data-kit-region="content">
        <article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../layout-record/#layout-record">Oakmere WI</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Main Hall</span></p></div></div></div></div></article>
      </div>
    </div>
    <div data-kit-role="headed-region" data-kit-state="empty">
      <h3 data-kit-region="heading">This week</h3>
      <div data-kit-region="content">
        <p>No hires this week.</p>
      </div>
    </div>
  </section>
  <section data-kit-region="followed-changes" data-kit-state="empty" aria-labelledby="state-empty-grouped-changes-title">
    <h2 id="state-empty-grouped-changes-title">Followed changes</h2>
    <p>Changes to records you follow show here. Follow a record from its page.</p>
  </section>
</div>
<p class="specimen-case-line">A Record whose bookings and history are empty.</p>
<div data-kit-layout="record">
  <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="state-empty-hire-title">
    <h2 id="state-empty-hire-title">Oakmere WI hire</h2>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hirer</dt><dd data-kit-region="value">Oakmere WI</dd></dl>
    </div>
    <div data-kit-role="headed-region" data-kit-state="empty">
      <h3 data-kit-region="heading">Bookings</h3>
      <div data-kit-region="content">
        <p>No bookings yet.</p>
        <div data-kit-role="action-group">
          <a data-kit-role="secondary-action" href="../layout-calendar/#layout-calendar"><span data-kit-region="label">New booking</span></a>
          <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Import bookings</span></button>
        </div>
      </div>
    </div>
  </section>
  <section data-kit-region="notes-files-history" data-kit-state="empty" aria-labelledby="state-empty-history-title">
    <h2 id="state-empty-history-title">History</h2>
    <p>Changes to this hire show here.</p>
  </section>
</div>
<p class="specimen-case-line" id="state-empty-inert-action">An empty region whose next action waits, its words beneath it.</p>
<div data-kit-role="headed-region" data-kit-state="empty">
  <h3 data-kit-region="heading">Invitations</h3>
  <div data-kit-region="content">
    <p>No invitations yet. People you invite stand here until they accept.</p>
    <div data-kit-role="action-group" data-kit-holds="words">
      <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="empty-invitation-waiting" aria-describedby="empty-invitation-waiting-words"><span data-kit-region="label">Invite someone</span></button>
      <p data-kit-region="words" id="empty-invitation-waiting-words">Add an email address before inviting someone.</p>
    </div>
  </div>
</div>
<p class="specimen-case-line" id="state-empty-menu-region">An empty region with a disabled action and inert More, their words together.</p>
<div data-kit-role="headed-region" data-kit-state="empty">
  <h3 data-kit-region="heading">Invitations</h3>
  <div data-kit-region="content">
    <p>No invitations yet. People you invite stand here until they accept.</p>
    <div data-kit-role="action-group" data-kit-holds="words">
      <button type="button" data-kit-role="secondary-action" disabled id="empty-invitation-new" aria-describedby="empty-invitation-new-words"><span data-kit-region="label">Invite someone</span></button><p data-kit-region="words" id="empty-invitation-new-words">Add an email address before inviting someone.</p>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Share a sign-up link</span></button>
      <div data-kit-role="action-menu" id="empty-invitation-more"><button type="button" data-kit-role="icon-action" data-kit-state="inert" disabled id="empty-invitation-more-trigger" aria-label="More actions for invitations" aria-haspopup="menu" aria-controls="empty-invitation-more-layer" aria-describedby="empty-invitation-more-trigger-words"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="empty-invitation-more-layer" popover="manual" role="menu" aria-labelledby="empty-invitation-more-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="empty-invitation-more-layer/0-0" role="menuitem"><span data-kit-region="name">Import invitations</span></button></li><li role="none"><button type="button" data-kit-region="item" id="empty-invitation-more-layer/0-1" role="menuitem"><span data-kit-region="name">Copy invitations from another hall</span></button></li></ul></li></ul></div><p data-kit-region="words" id="empty-invitation-more-trigger-words">Choose a hall before importing invitations.</p>
    </div>
  </div>
</div>
<p class="specimen-case-line">A Headed region standing alone with nothing in it yet.</p>
<div data-kit-role="headed-region" data-kit-state="empty">
  <h3 data-kit-region="heading">Key holders</h3>
  <div data-kit-region="content">
    <p>No key holders yet. Anyone given a key to the hall shows here.</p>
    <div data-kit-role="action-group">
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a key holder</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Copy key holders from another hall</span></button>
    </div>
  </div>
</div>