Local tabs, current
A saved view with changes to save.
Facets within the current page identify a location.
Views past the width fold into More, which counts what they hold.
More waits for the enquiries.
Source
<nav aria-label="Invoice facets" data-kit-role="local-tabs" id="role-local-tabs-current-invoice-facets">
<a href="#role-local-tabs-current" aria-current="page" data-kit-state="current"><span data-kit-region="name">Details</span><span data-kit-region="reserve" aria-hidden="true">Details</span></a>
<a href="#role-local-tabs-current"><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="role-local-tabs-current-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="role-local-tabs-current-invoice-facets-more" popover="auto">
<ul>
<li hidden><a href="#role-local-tabs-current" aria-current="page"><span data-kit-region="name">Details</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">History</span></a></li>
</ul>
</div>
</div>
</nav>
<p class="specimen-case-line">A saved view with changes to save.</p>
<nav aria-label="Saved invoice views" data-kit-role="local-tabs" id="role-local-tabs-current-saved-views">
<a href="#role-local-tabs-current" aria-current="page" data-kit-state="current"><span data-kit-region="name">Invoices awaiting payment from the autumn term accounts</span><span data-kit-region="reserve" aria-hidden="true">Invoices awaiting payment from the autumn term accounts</span> <span data-kit-region="changed">Changed</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">All invoices</span><span data-kit-region="reserve" aria-hidden="true">All invoices</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="role-local-tabs-current-saved-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="role-local-tabs-current-saved-views-more" popover="auto"><ul>
<li hidden><a href="#role-local-tabs-current" aria-current="page"><span data-kit-region="name">Invoices awaiting payment from the autumn term accounts</span> <span data-kit-region="changed">Changed</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">All invoices</span></a></li>
</ul></div>
</div>
</nav>
<p>Facets within the current page identify a location.</p>
<nav aria-label="Invoice sections" data-kit-role="local-tabs" id="role-local-tabs-current-invoice-sections">
<a href="#role-local-tabs-current" 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="#role-local-tabs-current"><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="role-local-tabs-current-invoice-sections-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="role-local-tabs-current-invoice-sections-more" popover="auto">
<ul>
<li hidden><a href="#role-local-tabs-current" aria-current="location"><span data-kit-region="name">Invoice</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">History</span></a></li>
</ul>
</div>
</div>
</nav>
<nav aria-label="Booking views" data-kit-role="local-tabs" id="role-local-tabs-current-booking-views">
<a href="#role-local-tabs-current" aria-current="location" data-kit-state="current"><span data-kit-region="name">Summary</span><span data-kit-region="reserve" aria-hidden="true">Summary</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Rooms and times</span><span data-kit-region="reserve" aria-hidden="true">Rooms and times</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Charges</span><span data-kit-region="reserve" aria-hidden="true">Charges</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="role-local-tabs-current-booking-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="role-local-tabs-current-booking-views-more" popover="auto">
<ul>
<li hidden><a href="#role-local-tabs-current" aria-current="location"><span data-kit-region="name">Summary</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Rooms and times</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Charges</span></a></li>
</ul>
</div>
</div>
</nav>
<nav aria-label="Collection periods" data-kit-role="local-tabs" id="role-local-tabs-current-collection-periods">
<a href="#role-local-tabs-current"><span data-kit-region="name">January</span><span data-kit-region="reserve" aria-hidden="true">January</span></a>
<a href="#role-local-tabs-current" aria-current="location" data-kit-state="current"><span data-kit-region="name">February</span><span data-kit-region="reserve" aria-hidden="true">February</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">March</span><span data-kit-region="reserve" aria-hidden="true">March</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="role-local-tabs-current-collection-periods-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="role-local-tabs-current-collection-periods-more" popover="auto">
<ul>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">January</span></a></li>
<li hidden><a href="#role-local-tabs-current" aria-current="location"><span data-kit-region="name">February</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">March</span></a></li>
</ul>
</div>
</div>
</nav>
<nav aria-label="Charge periods" data-kit-role="local-tabs" id="role-local-tabs-current-charge-periods">
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-01">January 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-01">January 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-02">February 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-02">February 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-03">March 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-03">March 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-04">April 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-04">April 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-05">May 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-05">May 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-06">June 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-06">June 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-07">July 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-07">July 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-08">August 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-08">August 2025</time></span></a>
<a href="#role-local-tabs-current" aria-current="location" data-kit-state="current"><span data-kit-region="name"><time datetime="2025-09">September 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-09">September 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-10">October 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-10">October 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-11">November 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-11">November 2025</time></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-12">December 2025</time></span><span data-kit-region="reserve" aria-hidden="true"><time datetime="2025-12">December 2025</time></span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="role-local-tabs-current-charge-periods-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="role-local-tabs-current-charge-periods-more" popover="auto">
<ul>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-01">January 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-02">February 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-03">March 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-04">April 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-05">May 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-06">June 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-07">July 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-08">August 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current" aria-current="location"><span data-kit-region="name"><time datetime="2025-09">September 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-10">October 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-11">November 2025</time></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name"><time datetime="2025-12">December 2025</time></span></a></li>
</ul>
</div>
</div>
</nav>
<nav aria-label="Parties to the booking" data-kit-role="local-tabs" id="role-local-tabs-current-parties-to-the-booking">
<a href="#role-local-tabs-current" aria-current="location" data-kit-state="current"><span data-kit-region="name">Oakmere Primary School</span><span data-kit-region="reserve" aria-hidden="true">Oakmere Primary School</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Oakmere Choir</span><span data-kit-region="reserve" aria-hidden="true">Oakmere Choir</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">St Anne’s Scout Group</span><span data-kit-region="reserve" aria-hidden="true">St Anne’s Scout Group</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="role-local-tabs-current-parties-to-the-booking-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="role-local-tabs-current-parties-to-the-booking-more" popover="auto">
<ul>
<li hidden><a href="#role-local-tabs-current" aria-current="location"><span data-kit-region="name">Oakmere Primary School</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Oakmere Choir</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">St Anne’s Scout Group</span></a></li>
</ul>
</div>
</div>
</nav>
<p>Views past the width fold into More, which counts what they hold.</p>
<nav aria-label="Enquiry views" data-kit-role="local-tabs" id="role-local-tabs-current-enquiry-views">
<a href="#role-local-tabs-current" aria-current="page" data-kit-state="current"><span data-kit-region="name">Open</span><span data-kit-region="reserve" aria-hidden="true">Open</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Assigned to me</span><span data-kit-region="reserve" aria-hidden="true">Assigned to me</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Mentioning me</span><span data-kit-region="reserve" aria-hidden="true">Mentioning me</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Waiting on the hirer</span><span data-kit-region="reserve" aria-hidden="true">Waiting on the hirer</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Snoozed</span><span data-kit-region="reserve" aria-hidden="true">Snoozed</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Closed this week</span><span data-kit-region="reserve" aria-hidden="true">Closed this week</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Spam</span><span data-kit-region="reserve" aria-hidden="true">Spam</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Escalated</span><span data-kit-region="reserve" aria-hidden="true">Escalated</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 due</span></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Unassigned</span><span data-kit-region="reserve" aria-hidden="true">Unassigned</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 unread</span></span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="role-local-tabs-current-enquiry-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 unread</span></span></span></button>
<div data-kit-role="popover" id="role-local-tabs-current-enquiry-views-more" popover="auto">
<ul>
<li hidden><a href="#role-local-tabs-current" aria-current="page"><span data-kit-region="name">Open</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Assigned to me</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Mentioning me</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Waiting on the hirer</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Snoozed</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Closed this week</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Spam</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Escalated</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 due</span></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Unassigned</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 unread</span></span></a></li>
</ul>
</div>
</div>
</nav>
<p class="specimen-case-line">More waits for the enquiries.</p>
<nav aria-label="Archived enquiry views" data-kit-role="local-tabs" id="role-local-tabs-current-inert">
<a href="#role-local-tabs-current" aria-current="page" data-kit-state="current"><span data-kit-region="name">Open</span><span data-kit-region="reserve" aria-hidden="true">Open</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Assigned to me</span><span data-kit-region="reserve" aria-hidden="true">Assigned to me</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Mentioning me</span><span data-kit-region="reserve" aria-hidden="true">Mentioning me</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Waiting on the hirer</span><span data-kit-region="reserve" aria-hidden="true">Waiting on the hirer</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Snoozed</span><span data-kit-region="reserve" aria-hidden="true">Snoozed</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Closed this week</span><span data-kit-region="reserve" aria-hidden="true">Closed this week</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Spam</span><span data-kit-region="reserve" aria-hidden="true">Spam</span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Escalated</span><span data-kit-region="reserve" aria-hidden="true">Escalated</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 due</span></span></a>
<a href="#role-local-tabs-current"><span data-kit-region="name">Unassigned</span><span data-kit-region="reserve" aria-hidden="true">Unassigned</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 unread</span></span></a>
<div data-kit-region="more" hidden>
<button type="button" data-kit-role="subtle-action" id="role-local-tabs-current-inert-control" data-kit-state="inert" disabled aria-describedby="role-local-tabs-current-inert-control-words" popovertarget="role-local-tabs-current-inert-more"><span data-kit-region="label"><span data-kit-region="name">More</span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">3 due, 2 unread</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 unread</span></span></span></button>
<div data-kit-role="popover" id="role-local-tabs-current-inert-more" popover="auto">
<ul>
<li hidden><a href="#role-local-tabs-current" aria-current="page"><span data-kit-region="name">Open</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Assigned to me</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Mentioning me</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Waiting on the hirer</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Snoozed</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Closed this week</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Spam</span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Escalated</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 due</span></span></a></li>
<li hidden><a href="#role-local-tabs-current"><span data-kit-region="name">Unassigned</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 unread</span></span></a></li>
</ul>
</div>
</div>
<p data-kit-region="words" id="role-local-tabs-current-inert-control-words">More views wait until the enquiries load.</p>
</nav>