Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div data-controller="dialog">
  <button class="btn" data-action="dialog#showModal">Show command</button>
  <dialog class="dialog" style="max-inline-size: 430px;" data-dialog-target="menu" data-action="click->dialog#closeOnClickOutside">
    <button class="btn btn--plain dialog__close" data-action="click->dialog#close">
      <img aria-hidden="true" src="/assets/x-2fabf707.svg" width="16" height="16" />
      <span class="sr-only">Close</span>
    </button>
    <div class="command" style="max-inline-size: 450px" data-controller="filter list" data-action="filter:after->list#reset" data-filter-active-class="command__list--filtering" data-filter-selected-class="selected">
      <label class="command__input input input--actor flex items-center gap">
        <img aria-hidden="true" src="/assets/search-fe0b57ec.svg" width="16" height="16" />
        <input type="text" name="search" id="search" data-action="input->filter#filter keydown->list#navigate" autofocus="autofocus" autocomplete="off" placeholder="Filter..." />
      </label>
      <div class="command__list" data-filter-target="list" role="listbox" aria-label="Commands" tabindex="0">
        <div class="command__group" role="group" aria-labelledby="suggestions">
          <span class="command__group-header" id="suggestions">Suggestions</span>
          <a class="btn command__item" data-value="calendar" data-list-target="option" role="option" href="">
            <img aria-hidden="true" src="/assets/calendar-2c1c622b.svg" width="14" height="14" />
            <span>Calendar</span>
          </a>  <a class="btn command__item" data-value="search emoji" data-list-target="option" role="option" href="">
            <img aria-hidden="true" src="/assets/smile-5ac60ee4.svg" width="14" height="14" />
            <span>Seach Emoji</span>
          </a>  <a class="btn command__item" data-value="calculator" aria-disabled="true" role="option">
            <img aria-hidden="true" src="/assets/calculator-765c8d31.svg" width="14" height="14" />
            <span>Calculator</span>
          </a></div>
        <div class="command__group" role="group" aria-labelledby="settings">
          <span class="command__group-header" id="settings">Settings</span>
          <a class="btn command__item" data-value="profile" data-list-target="option" role="option" href="">
            <img aria-hidden="true" src="/assets/user-3d86b14f.svg" width="14" height="14" />
            <span>Profile</span>
            <span class="command__item-key">⌘P</span>
          </a>  <a class="btn command__item" data-value="billing" data-list-target="option" role="option" href="">
            <img aria-hidden="true" src="/assets/credit-card-663de530.svg" width="14" height="14" />
            <span>Billing</span>
            <span class="command__item-key">⌘B</span>
          </a>  <a class="btn command__item" data-value="settings" data-list-target="option" role="option" href="">
            <img aria-hidden="true" src="/assets/settings-4fb8e0ad.svg" width="14" height="14" />
            <span>Settings</span>
            <span class="command__item-key">⌘P</span>
          </a></div>
        <div class="command__empty">Not results found.</div>
      </div>
    </div>
  </dialog>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div data-controller="dialog">
  <button class="btn" data-action="dialog#showModal">Show command</button>
  <dialog class="dialog" style="max-inline-size: 430px;" data-dialog-target="menu" data-action="click->dialog#closeOnClickOutside">
    <button class="btn btn--plain dialog__close" data-action="click->dialog#close">
      <%= image_tag "x.svg", size: 16, aria: { hidden: true } %>
      <span class="sr-only">Close</span>
    </button>
    <div class="command" style="max-inline-size: 450px" data-controller="filter list" data-action="filter:after->list#reset" data-filter-active-class="command__list--filtering" data-filter-selected-class="selected">
      <label class="command__input input input--actor flex items-center gap">
        <%= image_tag "search.svg", size: 16, aria: { hidden: true } %>
        <%= text_field_tag "search", nil, data: { action: "input->filter#filter keydown->list#navigate" }, autofocus: true, autocomplete: "off", placeholder: "Filter..." %>
      </label>
      <div class="command__list" data-filter-target="list" role="listbox" aria-label="Commands" tabindex="0">
        <%= render "command_options" %>
        <div class="command__empty">Not results found.</div>
      </div>
    </div>
  </dialog>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.command {
  border-width: var(--border);
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.command__input {
  --input-background: transparent;
  --input-border-color: transparent;
  --input-outline-size: 0;
  --input-padding: 0.75rem 1rem;
}
.command__list {
  border-block-start-width: var(--border);
  max-block-size: 300px;
  overflow-y: auto;
}
.command__group:not(:first-child) {
  border-block-start-width: var(--border);
}
.command__group {
  display: flex;
  flex-direction: column;
  padding: var(--size-1);
}
.command__group-header {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  padding: var(--size-1_5) var(--size-2);
}
.command__empty {
  display: none;
  font-size: var(--text-sm);
  justify-content: center;
  padding-block: var(--size-6);
}
.command__item {
  --btn-border-color: transparent;
  --btn-font-weight: var(--font-normal);
  --btn-hover-color: var(--color-secondary);
  --btn-justify-content: start;
  --btn-outline-size: 0;
  --btn-padding: var(--size-1_5) var(--size-2);
  &[aria-selected=true] {
    --btn-background: var(--color-secondary);
  }
}
.command__item-key {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  margin-inline-start: auto;
}
.command__list--filtering:not(:has(.selected)) {
  .command__empty { display: flex; }
}
.command__list--filtering {
  .command__group { display: none; }
  .command__group:has(.selected) { display: flex; }
  .command__item { display: none; }
  .command__item:is(.selected) { display: flex; }
}
Java Script is not required or multiple files are needed, check the notes.