On Shell
Palette, open
A query, with its matches marked and Search for last.
A line waiting on its answer.
Source
<dialog id="role-palette" data-kit-role="palette" aria-labelledby="role-palette-label" data-kit-selection="3 invoices">
<div data-kit-region="query">
<div id="role-palette-context" data-kit-region="context"></div>
<label id="role-palette-label" for="role-palette-query" data-kit-region="label">Commands</label>
<svg data-kit-icon="magnifying-glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/></svg>
<input id="role-palette-query" type="search" placeholder="Type a command or a name" autocomplete="off" value="">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="role-palette-query-clear" aria-label="Clear" hidden><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 id="role-palette-lines" data-kit-region="lines">
<ul data-kit-region="group">
<li data-kit-region="group-name">Recent</li>
<li id="role-palette-line-send-reminder" data-value="send-reminder"><svg data-kit-icon="envelope-simple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"/></svg><span data-kit-region="name">Send reminder</span></li>
</ul>
<ul data-kit-region="group">
<li data-kit-region="group-name">Actions</li>
<li id="role-palette-line-mark-paid" data-value="mark-paid"><svg data-kit-icon="check-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></svg><span data-kit-region="name">Mark as paid</span><span data-kit-region="keys"><kbd>P</kbd></span></li>
<li id="role-palette-line-change-status" data-value="change-status" data-kit-opens="values"><svg data-kit-icon="tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z"/></svg><span data-kit-region="name">Change status</span></li>
<li id="role-palette-line-export" data-value="export"><svg data-kit-icon="export" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"/></svg><span data-kit-region="name">Export</span></li>
</ul>
<ul data-kit-region="group">
<li data-kit-region="group-name">Commands</li>
<li id="role-palette-line-go-invoices" data-value="go-invoices"><svg data-kit-icon="arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg><span data-kit-region="name">Go to invoices</span><span data-kit-region="keys"><kbd>G</kbd><kbd>I</kbd></span></li>
<li id="role-palette-line-new-invoice" data-value="new-invoice"><svg data-kit-icon="plus" 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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg><span data-kit-region="name">New invoice</span><span data-kit-region="keys"><kbd>N</kbd></span></li>
</ul>
</div>
</dialog>
<dialog id="role-palette-in-flow" data-kit-role="palette" aria-labelledby="role-palette-in-flow-label" data-kit-selection="3 invoices" open>
<div data-kit-region="query">
<div id="role-palette-in-flow-context" data-kit-region="context"></div>
<label id="role-palette-in-flow-label" for="role-palette-in-flow-query" data-kit-region="label">Commands</label>
<svg data-kit-icon="magnifying-glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/></svg>
<input id="role-palette-in-flow-query" type="search" placeholder="Type a command or a name" autocomplete="off" value="">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="role-palette-in-flow-query-clear" aria-label="Clear" hidden><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 id="role-palette-in-flow-lines" data-kit-region="lines">
<ul data-kit-region="group">
<li data-kit-region="group-name">Recent</li>
<li id="role-palette-in-flow-line-send-reminder" data-value="send-reminder"><svg data-kit-icon="envelope-simple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"/></svg><span data-kit-region="name">Send reminder</span></li>
</ul>
<ul data-kit-region="group">
<li data-kit-region="group-name">Actions</li>
<li id="role-palette-in-flow-line-mark-paid" data-value="mark-paid"><svg data-kit-icon="check-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></svg><span data-kit-region="name">Mark as paid</span><span data-kit-region="keys"><kbd>P</kbd></span></li>
<li id="role-palette-in-flow-line-change-status" data-value="change-status" data-kit-opens="values"><svg data-kit-icon="tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z"/></svg><span data-kit-region="name">Change status</span></li>
<li id="role-palette-in-flow-line-export" data-value="export"><svg data-kit-icon="export" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"/></svg><span data-kit-region="name">Export</span></li>
</ul>
<ul data-kit-region="group">
<li data-kit-region="group-name">Commands</li>
<li id="role-palette-in-flow-line-go-invoices" data-value="go-invoices"><svg data-kit-icon="arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg><span data-kit-region="name">Go to invoices</span><span data-kit-region="keys"><kbd>G</kbd><kbd>I</kbd></span></li>
<li id="role-palette-in-flow-line-new-invoice" data-value="new-invoice"><svg data-kit-icon="plus" 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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg><span data-kit-region="name">New invoice</span><span data-kit-region="keys"><kbd>N</kbd></span></li>
</ul>
</div>
</dialog>
<p class="specimen-case-line">A query, with its matches marked and Search for last.</p>
<dialog id="role-palette-with-query" data-kit-role="palette" aria-labelledby="role-palette-with-query-label" data-kit-selection="3 invoices" open>
<div data-kit-region="query">
<div id="role-palette-with-query-context" data-kit-region="context"></div>
<label id="role-palette-with-query-label" for="role-palette-with-query-query" data-kit-region="label">Commands</label>
<svg data-kit-icon="magnifying-glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/></svg>
<input id="role-palette-with-query-query" type="search" placeholder="Type a command or a name" autocomplete="off" value="invoice">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="role-palette-with-query-query-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 id="role-palette-with-query-lines" data-kit-region="lines">
<ul data-kit-region="group">
<li data-kit-region="group-name">Commands</li>
<li id="role-palette-with-query-line-go-invoices" data-value="go-invoices"><svg data-kit-icon="arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg><span data-kit-region="name">Go to <mark>invoice</mark>s</span><span data-kit-region="keys"><kbd>G</kbd><kbd>I</kbd></span></li>
<li id="role-palette-with-query-line-new-invoice" data-value="new-invoice"><svg data-kit-icon="plus" 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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg><span data-kit-region="name">New <mark>invoice</mark></span><span data-kit-region="keys"><kbd>N</kbd></span></li>
</ul>
<ul data-kit-region="group">
<li id="role-palette-with-query-search-for" data-value="role-palette-with-query-search-for" data-kit-region="search-for">Search for <span data-kit-region="query">invoice</span></li>
</ul>
</div>
</dialog>
<p class="specimen-case-line">A line waiting on its answer.</p>
<dialog id="role-palette-waiting" data-kit-role="palette" aria-labelledby="role-palette-waiting-label" data-kit-selection="3 invoices" open>
<div data-kit-region="query">
<div id="role-palette-waiting-context" data-kit-region="context"></div>
<label id="role-palette-waiting-label" for="role-palette-waiting-query" data-kit-region="label">Commands</label>
<svg data-kit-icon="magnifying-glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/></svg>
<input id="role-palette-waiting-query" type="search" placeholder="Type a command or a name" autocomplete="off" value="">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="role-palette-waiting-query-clear" aria-label="Clear" hidden><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 id="role-palette-waiting-lines" data-kit-region="lines">
<ul data-kit-region="group">
<li data-kit-region="group-name">Commands</li>
<li id="role-palette-waiting-line-go-invoices" data-value="go-invoices" aria-busy="true"><svg data-kit-icon="arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg><span data-kit-region="name">Go to invoices</span><span data-kit-region="keys"><kbd>G</kbd><kbd>I</kbd></span></li>
<li id="role-palette-waiting-line-new-invoice" data-value="new-invoice"><svg data-kit-icon="plus" 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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg><span data-kit-region="name">New invoice</span><span data-kit-region="keys"><kbd>N</kbd></span></li>
</ul>
</div>
</dialog>