mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
62 lines
1.5 KiB
Plaintext
62 lines
1.5 KiB
Plaintext
<wa-dialog id="site-search" no-header>
|
|
<div id="site-search-container">
|
|
{# Header #}
|
|
<header>
|
|
<div id="site-search-input-wrapper">
|
|
<wa-input
|
|
id="site-search-input"
|
|
type="search"
|
|
filled
|
|
size="large"
|
|
clearable
|
|
placeholder="Search"
|
|
autofocus
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
enterkeyhint="go"
|
|
spellcheck="false"
|
|
maxlength="100"
|
|
role="combobox"
|
|
aria-autocomplete="list"
|
|
aria-expanded="true"
|
|
aria-controls="site-search-listbox"
|
|
aria-haspopup="listbox"
|
|
aria-activedescendant
|
|
>
|
|
<wa-icon slot="prefix" name="search"></wa-icon>
|
|
</wa-input>
|
|
</div>
|
|
</header>
|
|
|
|
{# Body #}
|
|
<div id="site-search-body">
|
|
<ul
|
|
id="site-search-listbox"
|
|
role="listbox"
|
|
aria-label="Search results"
|
|
></ul>
|
|
<div id="site-search-empty">
|
|
<wa-icon name="web-awesome" family="brands"></wa-icon>
|
|
No results
|
|
</div>
|
|
</div>
|
|
|
|
{# Footer #}
|
|
<footer>
|
|
<small>
|
|
<kbd aria-label="Up"><wa-icon name="arrow-up" family="micro"></wa-icon></kbd>
|
|
<kbd aria-label="Down"><wa-icon name="arrow-down" family="micro"></wa-icon></kbd>
|
|
Navigate
|
|
</small>
|
|
|
|
<small>
|
|
<kbd>Enter</kbd>
|
|
Select
|
|
</small>
|
|
|
|
<small><kbd>Esc</kbd> Close</small>
|
|
</footer>
|
|
</div>
|
|
</wa-dialog>
|