Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

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
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<button type="button" class="btn" commandfor="command_dialog" command="show-modal">Open Menu</button>
<dialog id="command_dialog" class="dialog dialog--cmdk" style="--dialog-size: 24rem;" data-controller="dialog" data-action="click->dialog#closeOnClickOutside">
  <cmdk-root label="Command Menu" data-controller="command" data-action="cmdk:select->command#visit">
    <label class="input input--actor flex items-center gap mbe-1">
      <span class="icon icon--search" aria-hidden="true"></span>
      <input type="text" name="search" id="search" autocomplete="off" autofocus="autofocus" placeholder="Type a command or search..." />
    </label>
    <cmdk-list>
      <cmdk-empty>No results found.</cmdk-empty>
      <cmdk-group heading="Navigation">
        <cmdk-item value="Home" data-href="#">
          <span class="icon icon--house" aria-hidden="true"></span>
          <span>Home</span>
          <kbd class="mis-auto text-xs text-subtle">⌘H</kbd>
        </cmdk-item>
        <cmdk-item value="Inbox" data-href="#">
          <span class="icon icon--inbox" aria-hidden="true"></span>
          <span>Inbox</span>
          <kbd class="mis-auto text-xs text-subtle">⌘I</kbd>
        </cmdk-item>
        <cmdk-item value="Documents" data-href="#">
          <span class="icon icon--file-text" aria-hidden="true"></span>
          <span>Documents</span>
          <kbd class="mis-auto text-xs text-subtle">⌘D</kbd>
        </cmdk-item>
        <cmdk-item value="Folders" data-href="#">
          <span class="icon icon--folder" aria-hidden="true"></span>
          <span>Folders</span>
          <kbd class="mis-auto text-xs text-subtle">⌘F</kbd>
        </cmdk-item>
      </cmdk-group>
      <cmdk-separator></cmdk-separator>
      <cmdk-group heading="Actions">
        <cmdk-item value="New File" data-href="#">
          <span class="icon icon--plus" aria-hidden="true"></span>
          <span>New File</span>
          <kbd class="mis-auto text-xs text-subtle">⌘N</kbd>
        </cmdk-item>
        <cmdk-item value="New Folder" data-href="#">
          <span class="icon icon--folder-plus" aria-hidden="true"></span>
          <span>New Folder</span>
          <kbd class="mis-auto text-xs text-subtle">⇧⌘N</kbd>
        </cmdk-item>
        <cmdk-item value="Copy" data-href="#">
          <span class="icon icon--copy" aria-hidden="true"></span>
          <span>Copy</span>
          <kbd class="mis-auto text-xs text-subtle">⌘C</kbd>
        </cmdk-item>
        <cmdk-item value="Cut" data-href="#">
          <span class="icon icon--scissors" aria-hidden="true"></span>
          <span>Cut</span>
          <kbd class="mis-auto text-xs text-subtle">⌘X</kbd>
        </cmdk-item>
        <cmdk-item value="Paste" data-href="#">
          <span class="icon icon--clipboard-paste" aria-hidden="true"></span>
          <span>Paste</span>
          <kbd class="mis-auto text-xs text-subtle">⌘V</kbd>
        </cmdk-item>
        <cmdk-item value="Delete" data-href="#">
          <span class="icon icon--trash" aria-hidden="true"></span>
          <span>Delete</span>
          <kbd class="mis-auto text-xs text-subtle">⌫</kbd>
        </cmdk-item>
      </cmdk-group>
      <cmdk-separator></cmdk-separator>
      <cmdk-group heading="View">
        <cmdk-item value="Grid View" data-href="#">
          <span class="icon icon--layout-grid" aria-hidden="true"></span>
          <span>Grid View</span>
        </cmdk-item>
        <cmdk-item value="List View" data-href="#">
          <span class="icon icon--list" aria-hidden="true"></span>
          <span>List View</span>
        </cmdk-item>
        <cmdk-item value="Zoom In" data-href="#">
          <span class="icon icon--zoom-in" aria-hidden="true"></span>
          <span>Zoom In</span>
          <kbd class="mis-auto text-xs text-subtle">⌘+</kbd>
        </cmdk-item>
        <cmdk-item value="Zoom Out" data-href="#">
          <span class="icon icon--zoom-out" aria-hidden="true"></span>
          <span>Zoom Out</span>
          <kbd class="mis-auto text-xs text-subtle">⌘-</kbd>
        </cmdk-item>
      </cmdk-group>
      <cmdk-separator></cmdk-separator>
      <cmdk-group heading="Account">
        <cmdk-item value="Profile" data-href="#">
          <span class="icon icon--user" aria-hidden="true"></span>
          <span>Profile</span>
          <kbd class="mis-auto text-xs text-subtle">⌘P</kbd>
        </cmdk-item>
        <cmdk-item value="Billing" data-href="#">
          <span class="icon icon--credit-card" aria-hidden="true"></span>
          <span>Billing</span>
          <kbd class="mis-auto text-xs text-subtle">⌘B</kbd>
        </cmdk-item>
        <cmdk-item value="Settings" data-href="#">
          <span class="icon icon--settings" aria-hidden="true"></span>
          <span>Settings</span>
          <kbd class="mis-auto text-xs text-subtle">⌘S</kbd>
        </cmdk-item>
        <cmdk-item value="Notifications" data-href="#">
          <span class="icon icon--bell" aria-hidden="true"></span>
          <span>Notifications</span>
        </cmdk-item>
        <cmdk-item value="Help & Support" data-href="#">
          <span class="icon icon--circle-question-mark" aria-hidden="true"></span>
          <span>Help & Support</span>
        </cmdk-item>
      </cmdk-group>
      <cmdk-separator></cmdk-separator>
      <cmdk-group heading="Tools">
        <cmdk-item value="Calculator" data-href="#">
          <span class="icon icon--calculator" aria-hidden="true"></span>
          <span>Calculator</span>
        </cmdk-item>
        <cmdk-item value="Calendar" data-href="#">
          <span class="icon icon--calendar" aria-hidden="true"></span>
          <span>Calendar</span>
        </cmdk-item>
        <cmdk-item value="Image Editor" data-href="#">
          <span class="icon icon--image" aria-hidden="true"></span>
          <span>Image Editor</span>
        </cmdk-item>
        <cmdk-item value="Code Editor" data-href="#">
          <span class="icon icon--code" aria-hidden="true"></span>
          <span>Code Editor</span>
        </cmdk-item>
      </cmdk-group>
    </cmdk-list>
  </cmdk-root>
</dialog>
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<button type="button" class="btn" commandfor="command_dialog" command="show-modal">Open Menu</button>
<dialog id="command_dialog" class="dialog dialog--cmdk" style="--dialog-size: 24rem;" data-controller="dialog" data-action="click->dialog#closeOnClickOutside">
  <cmdk-root label="Command Menu" data-controller="command" data-action="cmdk:select->command#visit">
    <label class="input input--actor flex items-center gap mbe-1">
      <span class="icon icon--search" aria-hidden="true"></span>
      <%= text_field_tag "search", nil, autocomplete: "off", autofocus: true, placeholder: "Type a command or search..." %>
    </label>
    <cmdk-list>
      <cmdk-empty>No results found.</cmdk-empty>
      <cmdk-group heading="Navigation">
        <cmdk-item value="Home" data-href="#">
          <span class="icon icon--house" aria-hidden="true"></span>
          <span>Home</span>
          <kbd class="mis-auto text-xs text-subtle">⌘H</kbd>
        </cmdk-item>
        <cmdk-item value="Inbox" data-href="#">
          <span class="icon icon--inbox" aria-hidden="true"></span>
          <span>Inbox</span>
          <kbd class="mis-auto text-xs text-subtle">⌘I</kbd>
        </cmdk-item>
        <cmdk-item value="Documents" data-href="#">
          <span class="icon icon--file-text" aria-hidden="true"></span>
          <span>Documents</span>
          <kbd class="mis-auto text-xs text-subtle">⌘D</kbd>
        </cmdk-item>
        <cmdk-item value="Folders" data-href="#">
          <span class="icon icon--folder" aria-hidden="true"></span>
          <span>Folders</span>
          <kbd class="mis-auto text-xs text-subtle">⌘F</kbd>
        </cmdk-item>
      </cmdk-group>
      <cmdk-separator></cmdk-separator>
      <cmdk-group heading="Actions">
        <cmdk-item value="New File" data-href="#">
          <span class="icon icon--plus" aria-hidden="true"></span>
          <span>New File</span>
          <kbd class="mis-auto text-xs text-subtle">⌘N</kbd>
        </cmdk-item>
        <cmdk-item value="New Folder" data-href="#">
          <span class="icon icon--folder-plus" aria-hidden="true"></span>
          <span>New Folder</span>
          <kbd class="mis-auto text-xs text-subtle">⇧⌘N</kbd>
        </cmdk-item>
        <cmdk-item value="Copy" data-href="#">
          <span class="icon icon--copy" aria-hidden="true"></span>
          <span>Copy</span>
          <kbd class="mis-auto text-xs text-subtle">⌘C</kbd>
        </cmdk-item>
        <cmdk-item value="Cut" data-href="#">
          <span class="icon icon--scissors" aria-hidden="true"></span>
          <span>Cut</span>
          <kbd class="mis-auto text-xs text-subtle">⌘X</kbd>
        </cmdk-item>
        <cmdk-item value="Paste" data-href="#">
          <span class="icon icon--clipboard-paste" aria-hidden="true"></span>
          <span>Paste</span>
          <kbd class="mis-auto text-xs text-subtle">⌘V</kbd>
        </cmdk-item>
        <cmdk-item value="Delete" data-href="#">
          <span class="icon icon--trash" aria-hidden="true"></span>
          <span>Delete</span>
          <kbd class="mis-auto text-xs text-subtle">⌫</kbd>
        </cmdk-item>
      </cmdk-group>
      <cmdk-separator></cmdk-separator>
      <cmdk-group heading="View">
        <cmdk-item value="Grid View" data-href="#">
          <span class="icon icon--layout-grid" aria-hidden="true"></span>
          <span>Grid View</span>
        </cmdk-item>
        <cmdk-item value="List View" data-href="#">
          <span class="icon icon--list" aria-hidden="true"></span>
          <span>List View</span>
        </cmdk-item>
        <cmdk-item value="Zoom In" data-href="#">
          <span class="icon icon--zoom-in" aria-hidden="true"></span>
          <span>Zoom In</span>
          <kbd class="mis-auto text-xs text-subtle">⌘+</kbd>
        </cmdk-item>
        <cmdk-item value="Zoom Out" data-href="#">
          <span class="icon icon--zoom-out" aria-hidden="true"></span>
          <span>Zoom Out</span>
          <kbd class="mis-auto text-xs text-subtle">⌘-</kbd>
        </cmdk-item>
      </cmdk-group>
      <cmdk-separator></cmdk-separator>
      <cmdk-group heading="Account">
        <cmdk-item value="Profile" data-href="#">
          <span class="icon icon--user" aria-hidden="true"></span>
          <span>Profile</span>
          <kbd class="mis-auto text-xs text-subtle">⌘P</kbd>
        </cmdk-item>
        <cmdk-item value="Billing" data-href="#">
          <span class="icon icon--credit-card" aria-hidden="true"></span>
          <span>Billing</span>
          <kbd class="mis-auto text-xs text-subtle">⌘B</kbd>
        </cmdk-item>
        <cmdk-item value="Settings" data-href="#">
          <span class="icon icon--settings" aria-hidden="true"></span>
          <span>Settings</span>
          <kbd class="mis-auto text-xs text-subtle">⌘S</kbd>
        </cmdk-item>
        <cmdk-item value="Notifications" data-href="#">
          <span class="icon icon--bell" aria-hidden="true"></span>
          <span>Notifications</span>
        </cmdk-item>
        <cmdk-item value="Help & Support" data-href="#">
          <span class="icon icon--circle-question-mark" aria-hidden="true"></span>
          <span>Help & Support</span>
        </cmdk-item>
      </cmdk-group>
      <cmdk-separator></cmdk-separator>
      <cmdk-group heading="Tools">
        <cmdk-item value="Calculator" data-href="#">
          <span class="icon icon--calculator" aria-hidden="true"></span>
          <span>Calculator</span>
        </cmdk-item>
        <cmdk-item value="Calendar" data-href="#">
          <span class="icon icon--calendar" aria-hidden="true"></span>
          <span>Calendar</span>
        </cmdk-item>
        <cmdk-item value="Image Editor" data-href="#">
          <span class="icon icon--image" aria-hidden="true"></span>
          <span>Image Editor</span>
        </cmdk-item>
        <cmdk-item value="Code Editor" data-href="#">
          <span class="icon icon--code" aria-hidden="true"></span>
          <span>Code Editor</span>
        </cmdk-item>
      </cmdk-group>
    </cmdk-list>
  </cmdk-root>
</dialog>
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
74
75
76
@import url("https://esm.sh/cmdk-zero@0.0.3/dist/cmdk-zero.css");
cmdk-root {
  --cmdk-padding: var(--size-2);
  --cmdk-radius: var(--rounded-xl);
  --cmdk-background: var(--color-surface);
  --cmdk-border-width: var(--border);
  --cmdk-border-color: var(--color-border);
  --cmdk-shadow: var(--shadow-xs);
  --cmdk-color: var(--color-text);
  --cmdk-muted-color: var(--color-text-subtle);
  --cmdk-font-family: var(--font-system-ui);
  --cmdk-font-size: var(--text-sm);
  --cmdk-input-font-size: var(--text-sm);
  --cmdk-input-padding: 0;
  --cmdk-input-gap: 0;
  --cmdk-placeholder-color: var(--color-text-subtle);
  --cmdk-list-height-limit: var(--size-72);
  --cmdk-list-max-height: var(--size-72);
  --cmdk-item-height: var(--size-8);
  --cmdk-item-padding: 0 var(--size-2);
  --cmdk-item-gap: var(--size-2);
  --cmdk-item-spacing: 0;
  --cmdk-item-radius: var(--rounded-lg);
  --cmdk-item-color: var(--color-text);
  --cmdk-item-selected-background: var(--color-border-light);
  --cmdk-item-selected-color: var(--color-text);
  --cmdk-item-active-background: var(--color-border-light);
  --cmdk-item-disabled-color: var(--color-text-subtle);
  --cmdk-heading-font-size: var(--text-xs);
  --cmdk-heading-padding: var(--size-1_5) var(--size-2);
  --cmdk-heading-spacing: 0;
  --cmdk-group-spacing: var(--size-1);
  --cmdk-separator-color: var(--color-border);
  --cmdk-separator-spacing: var(--size-1);
  --cmdk-empty-height: var(--size-16);
  --cmdk-transition-duration: var(--time-100);
  --cmdk-transition-easing: var(--ease-out-3);
  .input {
    --input-background: var(--color-border-light);
    --input-border-color: var(--color-border-light);
    --input-box-shadow: none;
    --input-outline-size: 0;
    --icon-color: var(--color-text-subtle);
  }
  [data-cmdk-input] {
    border-block-end: 0;
  }
}
cmdk-list {
  scrollbar-width: none;
}
cmdk-group-heading {
  font-weight: var(--font-medium);
}
cmdk-item > kbd {
  font-family: var(--font-system-ui);
  letter-spacing: var(--tracking-widest);
}
.dialog--cmdk {
  overflow: clip;
}
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
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  #observer
  initialize() {
    this.#observer = new IntersectionObserver(this.#reset.bind(this))
  }
  connect() {
    this.#observer.observe(this.element)
  }
  disconnect() {
    this.#observer.disconnect()
  }
  visit({ target }) {
    Turbo.visit(target.dataset.href, { action: "advance" })
  }
  #reset([ entry ]) {
    entry.isIntersecting && this.#start()
  }
  #start() {
    this.element.reset()
  }
}

No notes provided.