Reordering

On List

Rows in an order you set, one selected, and Main hall waiting for the order to be saved.

Select Main hall

Main hall

Seats 120

Save the room order before moving Main hall.

Select Garden room

Garden room

Seats 30

Select Committee room

Committee room

Seats 12

A List's records table with its handle column, one row selected, and Move in each row's actions.

1 selected

Waiting list for Saturday mornings
	Request	Hirer
Select Choir rehearsal	Choir rehearsal	Oakmere Singers
Select Yoga class	Yoga class	Priya Shah
Select Toddler group	Toddler group	Tom Reid

A table of records grouped by standing, the last group closed, whose Move dialog offers the groups, and one row whose move was refused.

Requests for Saturday mornings by standing
	Request	Hirer responsible for the request
	Confirmed2
	Choir rehearsal	Oakmere Singers
	Yoga class	Priya Shah
	Waiting2
	Toddler group	Tom Reid
	Chess club Chess club was not moved to Confirmed: Saturday mornings are fully booked.	Ana Lima
	Declined0

Records with identifier subjects.

Records by number
Record	Name
`PD/RCT/0001`	Saturday hire
`PD/RCT/0001/REVISION/00000000000000000000000000000000000000000000000000000001`	Revised Saturday hire

Identifier subjects in the rows print form.

Records by number
Record	Name
`PD/RCT/0001`	Saturday hire
`PD/RCT/0001/REVISION/00000000000000000000000000000000000000000000000000000001`	Revised Saturday hire

A total without a supporting price.

Hire price
Item	Price
Room hire	£680.00
Total due	£680.00

A total with a credit card price underneath.

Hire price
Item	Price
Room hire	£680.00
Total due	£680.00 Price when paying by credit card, including the processing fee: £701.94

The same total, printed as labelled rows.

Hire price
Item	Price
Room hire	£680.00
Total due	£680.00 Price when paying by credit card, including the processing fee: £701.94

A total with a credit card price beneath its name.

Hire price
Item	Price
Room hire	£680.00
Total duePrice when paying by credit card, including the processing fee: £701.94	£680.00

The Move dialog, opened on its own.

Source

<p class="specimen-case-line">Rows in an order you set, one selected, and Main hall waiting for the order to be saved.</p>
<div data-kit-role="reordering" id="reordering-rooms">
  <article data-kit-role="row" id="reordering-rooms-main-hall">
    <button type="button" tabindex="-1" data-kit-region="handle" id="reordering-rooms-main-hall-handle" aria-label="Move" aria-labelledby="reordering-rooms-main-hall-handle reordering-rooms-main-hall-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button>
    <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="room" value="main-hall"><span>Select Main hall</span></label>
    <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" id="reordering-rooms-main-hall-subject" href="#role-reordering">Main hall</a>
          </div>
          <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">120</span></span></p></div>
        </div>
      </div>
      <div data-kit-region="actions" data-kit-holds="words"><button type="button" data-kit-role="subtle-action" data-kit-region="move" id="reordering-rooms-main-hall-move" aria-labelledby="reordering-rooms-main-hall-move reordering-rooms-main-hall-subject" data-kit-state="inert" disabled aria-describedby="reordering-rooms-main-hall-move-words"><span data-kit-region="label">Move</span></button><p data-kit-region="words" id="reordering-rooms-main-hall-move-words">Save the room order before moving Main hall.</p></div>
    </div>
  </article>
  <article data-kit-role="row" id="reordering-rooms-garden-room">
    <button type="button" tabindex="-1" data-kit-region="handle" id="reordering-rooms-garden-room-handle" aria-label="Move" aria-labelledby="reordering-rooms-garden-room-handle reordering-rooms-garden-room-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button>
    <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="room" value="garden-room" checked><span>Select Garden room</span></label>
    <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" id="reordering-rooms-garden-room-subject" href="#role-reordering">Garden room</a>
          </div>
          <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">30</span></span></p></div>
        </div>
      </div>
      <div data-kit-region="actions"><button type="button" data-kit-role="subtle-action" data-kit-region="move" id="reordering-rooms-garden-room-move" aria-labelledby="reordering-rooms-garden-room-move reordering-rooms-garden-room-subject"><span data-kit-region="label">Move</span></button></div>
    </div>
  </article>
  <article data-kit-role="row" id="reordering-rooms-committee-room">
    <button type="button" tabindex="-1" data-kit-region="handle" id="reordering-rooms-committee-room-handle" aria-label="Move" aria-labelledby="reordering-rooms-committee-room-handle reordering-rooms-committee-room-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button>
    <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="room" value="committee-room"><span>Select Committee room</span></label>
    <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" id="reordering-rooms-committee-room-subject" href="#role-reordering">Committee room</a>
          </div>
          <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">12</span></span></p></div>
        </div>
      </div>
      <div data-kit-region="actions"><button type="button" data-kit-role="subtle-action" data-kit-region="move" id="reordering-rooms-committee-room-move" aria-labelledby="reordering-rooms-committee-room-move reordering-rooms-committee-room-subject"><span data-kit-region="label">Move</span></button></div>
    </div>
  </article>
  <div data-kit-region="drop-line" hidden aria-hidden="true"></div>
  <dialog id="reordering-rooms-move" data-kit-role="dialog" data-kit-region="move" aria-labelledby="reordering-rooms-move-heading">
    <h2 data-kit-region="heading" id="reordering-rooms-move-heading">Move <span data-kit-region="subject"></span></h2>
    <div data-kit-region="form-groups">
      <div data-kit-role="form-group" id="reordering-rooms-move-place"><label for="reordering-rooms-move-place-control">Place it</label><div data-kit-region="select"><select id="reordering-rooms-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
      <div data-kit-role="form-group" id="reordering-rooms-move-row"><label for="reordering-rooms-move-row-control">Room</label><div data-kit-region="select"><select id="reordering-rooms-move-row-control" name="row"><option value="reordering-rooms-main-hall">Main hall</option><option value="reordering-rooms-garden-room">Garden room</option><option value="reordering-rooms-committee-room">Committee room</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-role="action-group"><div data-kit-region="actions">
      <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Move</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="reordering-rooms-move" command="close"><span data-kit-region="label">Keep the order</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</div>
<p class="specimen-case-line">A List's records table with its handle column, one row selected, and Move in each row's actions.</p>
<div data-kit-layout="list" id="reordering-waiting-list">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="columns-selection-actions" data-kit-holds="action-group" aria-label="Selection actions">
    <p data-kit-role="status-line" role="status" aria-live="polite"><span data-kit-role="amount">1</span> selected</p><button type="button" data-kit-region="clear-selection">Clear selection</button><div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Contact hirers</span></button></div>
  </section>
  <section data-kit-region="rows" aria-label="Waiting list">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="reordering" id="reordering-requests">
      <div data-kit-region="table" tabindex="0"><table data-kit-table="records">
        <caption>Waiting list for Saturday mornings</caption>
        <thead data-kit-region="column-headings"><tr><td data-kit-column="handle"></td><th scope="col" data-kit-column="selection"></th><th scope="col" data-kit-column="subject">Request</th><th scope="col">Hirer</th><td data-kit-column="actions"></td></tr></thead>
        <tbody>
          <tr id="reordering-requests-choir"><td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-requests-choir-handle" aria-label="Move" aria-labelledby="reordering-requests-choir-handle reordering-requests-choir-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Choir rehearsal</span></label></td><th scope="row" data-kit-column="subject" id="reordering-requests-choir-subject"><a href="#role-reordering">Choir rehearsal</a></th><td data-label="Hirer"><div data-kit-region="fact">Oakmere Singers</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action" data-kit-region="move" id="reordering-requests-choir-move" aria-labelledby="reordering-requests-choir-move reordering-requests-choir-subject"><span data-kit-region="label">Move</span></button></div></td></tr>
          <tr id="reordering-requests-yoga"><td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-requests-yoga-handle" aria-label="Move" aria-labelledby="reordering-requests-yoga-handle reordering-requests-yoga-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" checked /><span>Select Yoga class</span></label></td><th scope="row" data-kit-column="subject" id="reordering-requests-yoga-subject"><a href="#role-reordering">Yoga class</a></th><td data-label="Hirer"><div data-kit-region="fact">Priya Shah</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action" data-kit-region="move" id="reordering-requests-yoga-move" aria-labelledby="reordering-requests-yoga-move reordering-requests-yoga-subject"><span data-kit-region="label">Move</span></button></div></td></tr>
          <tr id="reordering-requests-toddlers"><td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-requests-toddlers-handle" aria-label="Move" aria-labelledby="reordering-requests-toddlers-handle reordering-requests-toddlers-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Toddler group</span></label></td><th scope="row" data-kit-column="subject" id="reordering-requests-toddlers-subject"><a href="#role-reordering">Toddler group</a></th><td data-label="Hirer"><div data-kit-region="fact">Tom Reid</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action" data-kit-region="move" id="reordering-requests-toddlers-move" aria-labelledby="reordering-requests-toddlers-move reordering-requests-toddlers-subject"><span data-kit-region="label">Move</span></button></div></td></tr>
        </tbody>
      </table></div>
      <div data-kit-region="drop-line" hidden aria-hidden="true"></div>
      <dialog id="reordering-requests-move" data-kit-role="dialog" data-kit-region="move" aria-labelledby="reordering-requests-move-heading">
        <h2 data-kit-region="heading" id="reordering-requests-move-heading">Move <span data-kit-region="subject"></span></h2>
        <div data-kit-region="form-groups">
          <div data-kit-role="form-group" id="reordering-requests-move-place"><label for="reordering-requests-move-place-control">Place it</label><div data-kit-region="select"><select id="reordering-requests-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
          <div data-kit-role="form-group" id="reordering-requests-move-row"><label for="reordering-requests-move-row-control">Request</label><div data-kit-region="select"><select id="reordering-requests-move-row-control" name="row"><option value="reordering-requests-choir">Choir rehearsal</option><option value="reordering-requests-yoga">Yoga class</option><option value="reordering-requests-toddlers">Toddler group</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-role="action-group"><div data-kit-region="actions">
          <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Move</span></button>
          <button type="button" data-kit-role="secondary-action" commandfor="reordering-requests-move" command="close"><span data-kit-region="label">Keep the order</span></button>
        </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
      </div></dialog>
    </div>
  </section>
</div>
<p class="specimen-case-line">A table of records grouped by standing, the last group closed, whose Move dialog offers the groups, and one row whose move was refused.</p>
<div data-kit-role="reordering" id="reordering-standing">
  <div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <caption>Requests for Saturday mornings by standing</caption>
  <thead data-kit-region="column-headings">
<tr><td data-kit-column="handle"></td><th data-kit-column="subject" scope="col">Request</th><th scope="col">Hirer responsible for the request</th><td data-kit-column="actions"></td></tr>
  </thead>
  <tbody data-kit-region="group" id="reordering-standing-confirmed">
<tr data-kit-region="group-heading"><td data-kit-column="handle"></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="settled">Confirmed</span></span><span data-kit-region="count">2</span></summary></details></div></th></tr>
<tr id="reordering-standing-choir">
  <td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-standing-choir-handle" aria-label="Move" aria-labelledby="reordering-standing-choir-handle reordering-standing-choir-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td>
  <th data-kit-column="subject" id="reordering-standing-choir-subject" scope="row"><a href="#role-reordering">Choir rehearsal</a></th>
  <td data-label="Hirer responsible for the request"><div data-kit-region="fact">Oakmere Singers</div></td>
  <td data-kit-column="actions"><div data-kit-region="actions"><button aria-labelledby="reordering-standing-choir-move reordering-standing-choir-subject" data-kit-region="move" data-kit-role="subtle-action" id="reordering-standing-choir-move" type="button"><span data-kit-region="label">Move</span></button></div></td>
</tr>
<tr id="reordering-standing-yoga">
  <td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-standing-yoga-handle" aria-label="Move" aria-labelledby="reordering-standing-yoga-handle reordering-standing-yoga-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td>
  <th data-kit-column="subject" id="reordering-standing-yoga-subject" scope="row"><a href="#role-reordering">Yoga class</a></th>
  <td data-label="Hirer responsible for the request"><div data-kit-region="fact">Priya Shah</div></td>
  <td data-kit-column="actions"><div data-kit-region="actions"><button aria-labelledby="reordering-standing-yoga-move reordering-standing-yoga-subject" data-kit-region="move" data-kit-role="subtle-action" id="reordering-standing-yoga-move" type="button"><span data-kit-region="label">Move</span></button></div></td>
</tr>
  </tbody><tbody data-kit-region="group" id="reordering-standing-waiting">
<tr data-kit-region="group-heading"><td data-kit-column="handle"></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="attention">Waiting</span></span><span data-kit-region="count">2</span></summary></details></div></th></tr>
<tr id="reordering-standing-toddlers">
  <td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-standing-toddlers-handle" aria-label="Move" aria-labelledby="reordering-standing-toddlers-handle reordering-standing-toddlers-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td>
  <th data-kit-column="subject" id="reordering-standing-toddlers-subject" scope="row"><a href="#role-reordering">Toddler group</a></th>
  <td data-label="Hirer responsible for the request"><div data-kit-region="fact">Tom Reid</div></td>
  <td data-kit-column="actions"><div data-kit-region="actions"><button aria-labelledby="reordering-standing-toddlers-move reordering-standing-toddlers-subject" data-kit-region="move" data-kit-role="subtle-action" id="reordering-standing-toddlers-move" type="button"><span data-kit-region="label">Move</span></button></div></td>
</tr>
<tr id="reordering-standing-chess">
  <td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-standing-chess-handle" aria-label="Move" aria-labelledby="reordering-standing-chess-handle reordering-standing-chess-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td>
  <th data-kit-column="subject" id="reordering-standing-chess-subject" scope="row"><a href="#role-reordering">Chess club</a><div data-kit-region="standing" data-kit-state="failed"><p role="alert">Chess club was not moved to Confirmed: Saturday mornings are fully booked.</p></div></th>
  <td data-label="Hirer responsible for the request"><div data-kit-region="fact">Ana Lima</div></td>
  <td data-kit-column="actions"><div data-kit-region="actions"><button aria-labelledby="reordering-standing-chess-move reordering-standing-chess-subject" data-kit-region="move" data-kit-role="subtle-action" id="reordering-standing-chess-move" type="button"><span data-kit-region="label">Move</span></button></div></td>
</tr>
  </tbody><tbody data-kit-region="group" id="reordering-standing-declined">
<tr data-kit-region="group-heading"><td data-kit-column="handle"></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="neutral">Declined</span></span><span data-kit-region="count">0</span></summary></details></div></th></tr>

  </tbody>
</table></div>
  <div data-kit-region="drop-line" hidden aria-hidden="true"></div>
  <dialog id="reordering-standing-move" data-kit-role="dialog" data-kit-region="move" aria-labelledby="reordering-standing-move-heading">
    <h2 data-kit-region="heading" id="reordering-standing-move-heading">Move <span data-kit-region="subject"></span></h2>
    <div data-kit-region="form-groups">
      <div data-kit-role="form-group" id="reordering-standing-move-group"><label for="reordering-standing-move-group-control">Standing</label><div data-kit-region="select"><select id="reordering-standing-move-group-control" name="group"><option value="reordering-standing-confirmed">Confirmed</option><option value="reordering-standing-waiting">Waiting</option><option value="reordering-standing-declined">Declined</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
      <div data-kit-role="form-group" id="reordering-standing-move-place"><label for="reordering-standing-move-place-control">Place it</label><div data-kit-region="select"><select id="reordering-standing-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
      <div data-kit-role="form-group" id="reordering-standing-move-row"><label for="reordering-standing-move-row-control">Request</label><div data-kit-region="select"><select id="reordering-standing-move-row-control" name="row"><optgroup label="Confirmed"><option value="reordering-standing-choir">Choir rehearsal</option><option value="reordering-standing-yoga">Yoga class</option></optgroup><optgroup label="Waiting"><option value="reordering-standing-toddlers">Toddler group</option><option value="reordering-standing-chess">Chess club</option></optgroup><optgroup label="Declined"></optgroup></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-role="action-group"><div data-kit-region="actions">
      <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Move</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="reordering-standing-move" command="close"><span data-kit-region="label">Keep the order</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</div>
<p class="specimen-case-line">Records with identifier subjects.</p>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records" id="records-identifier-subjects">
  <caption>Records by number</caption>
  <thead data-kit-region="column-headings"><tr><th data-kit-column="subject" scope="col">Record</th><th scope="col">Name</th></tr></thead>
  <tbody>
    <tr><th data-kit-column="subject" scope="row"><a href="#role-reordering"><code>PD/RCT/0001</code></a></th><td data-label="Name"><div data-kit-region="fact">Saturday hire</div></td></tr>
    <tr><th data-kit-column="subject" scope="row"><a href="#role-reordering"><code>PD/RCT/0001/REVISION/00000000000000000000000000000000000000000000000000000001</code></a></th><td data-label="Name"><div data-kit-region="fact">Revised Saturday hire</div></td></tr>
  </tbody>
</table></div>
<p class="specimen-case-line">Identifier subjects in the rows print form.</p>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records" data-kit-print-form="rows" id="records-identifier-subjects-rows">
  <caption>Records by number</caption>
  <thead data-kit-region="column-headings"><tr><th data-kit-column="subject" scope="col">Record</th><th scope="col">Name</th></tr></thead>
  <tbody>
    <tr><th data-kit-column="subject" data-label="Record" scope="row"><div data-kit-region="value"><a href="#role-reordering"><code>PD/RCT/0001</code></a></div></th><td data-label="Name"><div data-kit-region="value"><div data-kit-region="fact">Saturday hire</div></div></td></tr>
    <tr><th data-kit-column="subject" data-label="Record" scope="row"><div data-kit-region="value"><a href="#role-reordering"><code>PD/RCT/0001/REVISION/00000000000000000000000000000000000000000000000000000001</code></a></div></th><td data-label="Name"><div data-kit-region="value"><div data-kit-region="fact">Revised Saturday hire</div></div></td></tr>
  </tbody>
</table></div>
<p class="specimen-case-line">A total without a supporting price.</p>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records" id="records-total">
  <caption>Hire price</caption>
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Item</th><th scope="col" data-kit-column="amount">Price</th></tr></thead>
  <tbody><tr><th scope="row" data-kit-column="subject">Room hire</th><td data-kit-column="amount" data-label="Price"><div data-kit-region="fact" data-kit-role="amount">£680.00</div></td></tr></tbody>
  <tfoot data-kit-region="total"><tr><th scope="row" data-kit-column="subject">Total due</th><td data-kit-column="amount" data-label="Price"><div data-kit-region="fact" data-kit-role="amount">£680.00</div></td></tr></tfoot>
</table></div>
<p class="specimen-case-line">A total with a credit card price underneath.</p>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records" id="records-total-supporting">
  <caption>Hire price</caption>
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Item</th><th scope="col" data-kit-column="amount">Price</th></tr></thead>
  <tbody><tr><th scope="row" data-kit-column="subject">Room hire</th><td data-kit-column="amount" data-label="Price"><div data-kit-region="fact" data-kit-role="amount">£680.00</div></td></tr></tbody>
  <tfoot data-kit-region="total"><tr><th scope="row" data-kit-column="subject">Total due</th><td data-kit-column="amount" data-label="Price"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£680.00</div><span data-kit-region="supporting">Price when paying by credit card, including the processing fee: <span data-kit-role="amount">£701.94</span></span></div></td></tr></tfoot>
</table></div>
<p class="specimen-case-line">The same total, printed as labelled rows.</p>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records" data-kit-print-form="rows" id="records-total-supporting-rows">
  <caption>Hire price</caption>
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Item</th><th scope="col" data-kit-column="amount">Price</th></tr></thead>
  <tbody><tr><th scope="row" data-kit-column="subject" data-label="Item"><div data-kit-region="value">Room hire</div></th><td data-kit-column="amount" data-label="Price"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£680.00</div></div></td></tr></tbody>
  <tfoot data-kit-region="total"><tr><th scope="row" data-kit-column="subject" data-label="Item"><div data-kit-region="value">Total due</div></th><td data-kit-column="amount" data-label="Price"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£680.00</div><span data-kit-region="supporting">Price when paying by credit card, including the processing fee: <span data-kit-role="amount">£701.94</span></span></div></td></tr></tfoot>
</table></div>
<p class="specimen-case-line">A total with a credit card price beneath its name.</p>
<div data-kit-region="table" tabindex="0"><table data-kit-table="comparison" id="comparison-total-supporting">
  <caption>Hire price</caption>
  <thead data-kit-region="column-headings"><tr><th scope="col">Item</th><th scope="col" data-kit-column="amount">Price</th></tr></thead>
  <tbody><tr><th scope="row">Room hire</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£680.00</div></td></tr></tbody>
  <tfoot data-kit-region="total"><tr><th scope="row">Total due<span data-kit-region="supporting">Price when paying by credit card, including the processing fee: <span data-kit-role="amount">£701.94</span></span></th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£680.00</div></td></tr></tfoot>
</table></div>
<p class="specimen-case-line">The Move dialog, opened on its own.</p>
<button type="button" data-kit-role="secondary-action" commandfor="reordering-rooms-move" command="show-modal"><span data-kit-region="label">Show the Move dialog</span></button>

Reordering, moving

Show it carried

Source

<div data-kit-role="reordering" id="reordering-moving-standing">
  <div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <caption>Requests for Saturday mornings by standing</caption>
  <thead data-kit-region="column-headings">
<tr><td data-kit-column="handle"></td><th data-kit-column="subject" scope="col">Request</th><th scope="col">Hirer responsible for the request</th><td data-kit-column="actions"></td></tr>
  </thead>
  <tbody data-kit-region="group" id="reordering-moving-standing-confirmed">
<tr data-kit-region="group-heading"><td data-kit-column="handle"></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="settled">Confirmed</span></span><span data-kit-region="count">2</span></summary></details></div></th></tr>
<tr id="reordering-moving-standing-choir">
  <td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-moving-standing-choir-handle" aria-label="Move" aria-labelledby="reordering-moving-standing-choir-handle reordering-moving-standing-choir-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td>
  <th data-kit-column="subject" id="reordering-moving-standing-choir-subject" scope="row"><a href="../#role-reordering-moving">Choir rehearsal</a></th>
  <td data-label="Hirer responsible for the request"><div data-kit-region="fact">Oakmere Singers</div></td>
  <td data-kit-column="actions"><div data-kit-region="actions"><button aria-labelledby="reordering-moving-standing-choir-move reordering-moving-standing-choir-subject" data-kit-region="move" data-kit-role="subtle-action" id="reordering-moving-standing-choir-move" type="button"><span data-kit-region="label">Move</span></button></div></td>
</tr>
<tr id="reordering-moving-standing-yoga">
  <td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-moving-standing-yoga-handle" aria-label="Move" aria-labelledby="reordering-moving-standing-yoga-handle reordering-moving-standing-yoga-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td>
  <th data-kit-column="subject" id="reordering-moving-standing-yoga-subject" scope="row"><a href="../#role-reordering-moving">Yoga class</a></th>
  <td data-label="Hirer responsible for the request"><div data-kit-region="fact">Priya Shah</div></td>
  <td data-kit-column="actions"><div data-kit-region="actions"><button aria-labelledby="reordering-moving-standing-yoga-move reordering-moving-standing-yoga-subject" data-kit-region="move" data-kit-role="subtle-action" id="reordering-moving-standing-yoga-move" type="button"><span data-kit-region="label">Move</span></button></div></td>
</tr>
  </tbody><tbody data-kit-region="group" id="reordering-moving-standing-waiting">
<tr data-kit-region="group-heading"><td data-kit-column="handle"></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="attention">Waiting</span></span><span data-kit-region="count">2</span></summary></details></div></th></tr>
<tr id="reordering-moving-standing-toddlers">
  <td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-moving-standing-toddlers-handle" aria-label="Move" aria-labelledby="reordering-moving-standing-toddlers-handle reordering-moving-standing-toddlers-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td>
  <th data-kit-column="subject" id="reordering-moving-standing-toddlers-subject" scope="row"><a href="../#role-reordering-moving">Toddler group</a></th>
  <td data-label="Hirer responsible for the request"><div data-kit-region="fact">Tom Reid</div></td>
  <td data-kit-column="actions"><div data-kit-region="actions"><button aria-labelledby="reordering-moving-standing-toddlers-move reordering-moving-standing-toddlers-subject" data-kit-region="move" data-kit-role="subtle-action" id="reordering-moving-standing-toddlers-move" type="button"><span data-kit-region="label">Move</span></button></div></td>
</tr>
<tr id="reordering-moving-standing-chess">
  <td data-kit-column="handle"><button type="button" tabindex="-1" data-kit-region="handle" id="reordering-moving-standing-chess-handle" aria-label="Move" aria-labelledby="reordering-moving-standing-chess-handle reordering-moving-standing-chess-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button></td>
  <th data-kit-column="subject" id="reordering-moving-standing-chess-subject" scope="row"><a href="../#role-reordering-moving">Chess club</a></th>
  <td data-label="Hirer responsible for the request"><div data-kit-region="fact">Ana Lima</div></td>
  <td data-kit-column="actions"><div data-kit-region="actions"><button aria-labelledby="reordering-moving-standing-chess-move reordering-moving-standing-chess-subject" data-kit-region="move" data-kit-role="subtle-action" id="reordering-moving-standing-chess-move" type="button"><span data-kit-region="label">Move</span></button></div></td>
</tr>
  </tbody><tbody data-kit-region="group" id="reordering-moving-standing-declined">
<tr data-kit-region="group-heading"><td data-kit-column="handle"></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="neutral">Declined</span></span><span data-kit-region="count">0</span></summary></details></div></th></tr>
  </tbody>
</table></div>
  <div data-kit-region="drop-line" hidden aria-hidden="true"></div>
  <dialog id="reordering-moving-standing-move" data-kit-role="dialog" data-kit-region="move" aria-labelledby="reordering-moving-standing-move-heading">
    <h2 data-kit-region="heading" id="reordering-moving-standing-move-heading">Move <span data-kit-region="subject"></span></h2>
    <div data-kit-region="form-groups">
      <div data-kit-role="form-group" id="reordering-moving-standing-move-group"><label for="reordering-moving-standing-move-group-control">Standing</label><div data-kit-region="select"><select id="reordering-moving-standing-move-group-control" name="group"><option value="reordering-moving-standing-confirmed">Confirmed</option><option value="reordering-moving-standing-waiting">Waiting</option><option value="reordering-moving-standing-declined">Declined</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
      <div data-kit-role="form-group" id="reordering-moving-standing-move-place"><label for="reordering-moving-standing-move-place-control">Place it</label><div data-kit-region="select"><select id="reordering-moving-standing-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
      <div data-kit-role="form-group" id="reordering-moving-standing-move-row"><label for="reordering-moving-standing-move-row-control">Request</label><div data-kit-region="select"><select id="reordering-moving-standing-move-row-control" name="row"><optgroup label="Confirmed"><option value="reordering-moving-standing-choir">Choir rehearsal</option><option value="reordering-moving-standing-yoga">Yoga class</option></optgroup><optgroup label="Waiting"><option value="reordering-moving-standing-toddlers">Toddler group</option><option value="reordering-moving-standing-chess">Chess club</option></optgroup><optgroup label="Declined"></optgroup></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-role="action-group"><div data-kit-region="actions">
      <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Move</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="reordering-moving-standing-move" command="close"><span data-kit-region="label">Keep the order</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</div>
<p class="specimen-case-line">Rooms waiting for their order to be checked.</p>
<details>
  <summary>Move a room</summary>
  <div data-kit-role="reordering" id="reordering-inert-rooms">
    <article data-kit-role="row" id="reordering-inert-rooms-garden-room">
      <button type="button" tabindex="-1" data-kit-region="handle" id="reordering-inert-rooms-garden-room-handle" aria-label="Move" aria-labelledby="reordering-inert-rooms-garden-room-handle reordering-inert-rooms-garden-room-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button>
      <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" id="reordering-inert-rooms-garden-room-subject" href="../#role-reordering-moving">Garden room</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">30</span></span></p></div></div></div>
        <div data-kit-region="actions"><button type="button" data-kit-role="subtle-action" data-kit-region="move" id="reordering-inert-rooms-garden-room-move" aria-labelledby="reordering-inert-rooms-garden-room-move reordering-inert-rooms-garden-room-subject"><span data-kit-region="label">Move</span></button></div>
      </div>
    </article>
    <article data-kit-role="row" id="reordering-inert-rooms-committee-room">
      <button type="button" tabindex="-1" data-kit-region="handle" id="reordering-inert-rooms-committee-room-handle" aria-label="Move" aria-labelledby="reordering-inert-rooms-committee-room-handle reordering-inert-rooms-committee-room-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" /></svg></button>
      <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" id="reordering-inert-rooms-committee-room-subject" href="../#role-reordering-moving">Committee room</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">12</span></span></p></div></div></div>
        <div data-kit-region="actions"><button type="button" data-kit-role="subtle-action" data-kit-region="move" id="reordering-inert-rooms-committee-room-move" aria-labelledby="reordering-inert-rooms-committee-room-move reordering-inert-rooms-committee-room-subject"><span data-kit-region="label">Move</span></button></div>
      </div>
    </article>
    <div data-kit-region="drop-line" hidden aria-hidden="true"></div>
    <dialog id="reordering-inert-rooms-move" data-kit-role="dialog" data-kit-region="move" aria-labelledby="reordering-inert-rooms-move-heading">
      <h2 data-kit-region="heading" id="reordering-inert-rooms-move-heading">Move <span data-kit-region="subject"></span></h2>
      <div data-kit-region="form-groups">
        <div data-kit-role="form-group" id="reordering-inert-rooms-move-place"><label for="reordering-inert-rooms-move-place-control">Place it</label><div data-kit-region="select"><select id="reordering-inert-rooms-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
        <div data-kit-role="form-group" id="reordering-inert-rooms-move-row"><label for="reordering-inert-rooms-move-row-control">Room</label><div data-kit-region="select"><select id="reordering-inert-rooms-move-row-control" name="row"><option value="reordering-inert-rooms-garden-room">Garden room</option><option value="reordering-inert-rooms-committee-room">Committee room</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-role="action-group"><div data-kit-region="actions">
        <button type="button" id="reordering-inert-rooms-commit" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="reordering-inert-rooms-commit-words"><span data-kit-region="label">Move</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="reordering-inert-rooms-move" command="close"><span data-kit-region="label">Keep the order</span></button>
        <p data-kit-region="words" id="reordering-inert-rooms-commit-words">Move waits until the room order has been checked.</p>
      </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
    </div></dialog>
  </div>
</details>

Previous, Row Next, Card

Human support

Reordering

Reordering, moving