x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<button type="button" class="btn" popovertarget="dropdown" aria-haspopup="true"> Actions</button><div popover id="dropdown" class="popover popover--block-end-start" style="--popover-size: 8rem;" role="menu" aria-label="Menu"> <div class="menu" data-controller="menu"> <div class="menu__group" role="group"> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="#"> <span class="icon icon--pencil" aria-hidden="true"></span> <span>Edit</span> </a> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="#"> <span class="icon icon--share" aria-hidden="true"></span> <span>Share</span> </a> </div> <hr class="menu__separator" role="separator"> <div class="menu__group" role="group"> <a class="btn menu__item text-negative" data-menu-target="item" role="menuitem" href="#"> <span class="icon icon--trash" aria-hidden="true"></span> <span>Delete</span> </a> </div> </div></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
<button type="button" class="btn" popovertarget="dropdown" aria-haspopup="true"> Actions</button><div popover id="dropdown" class="popover popover--block-end-start" style="--popover-size: 8rem;" role="menu" aria-label="Menu"> <div class="menu" data-controller="menu"> <div class="menu__group" role="group"> <%= link_to "#", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" do %> <span class="icon icon--pencil" aria-hidden="true"></span> <span>Edit</span> <% end %> <%= link_to "#", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" do %> <span class="icon icon--share" aria-hidden="true"></span> <span>Share</span> <% end %> </div> <hr class="menu__separator" role="separator"> <div class="menu__group" role="group"> <%= link_to "#", class: "btn menu__item text-negative", data: { menu_target: "item" }, role: "menuitem" do %> <span class="icon icon--trash" aria-hidden="true"></span> <span>Delete</span> <% end %> </div> </div></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
.menu { background-color: var(--color-surface); display: flex; flex-direction: column; padding: var(--size-1); row-gap: var(--size-1);}.menu__header { color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: var(--font-medium); padding: var(--size-1) var(--size-1_5);}.menu__group { display: flex; flex-direction: column; row-gap: 1px;}.menu__separator { margin-inline: -0.25rem;}.menu__item { --btn-border-color: transparent; --btn-box-shadow: none; --btn-font-weight: var(--font-normal); --btn-justify-content: start; --btn-outline-size: 0; --btn-padding: var(--size-1) var(--size-1_5); --btn-radius: var(--rounded-md); &:focus-visible { --btn-background: var(--color-border-light); }}.menu__item-key { color: var(--color-text-subtle); font-size: var(--text-xs); margin-inline-start: auto;}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
import { Controller } from "@hotwired/stimulus"import { rovingIndex } from "https://esm.sh/roving-ux@1.0.5?standalone"export default class extends Controller { static targets = [ "item" ] #observer initialize() { this.#observer = new IntersectionObserver(this.#reset.bind(this)) } connect() { this.#observer.observe(this.element) } disconnect() { this.#observer.disconnect() } #reset([ entry ]) { entry.isIntersecting && this.#start() } #start() { this.#rovingIndex() this.#focus() } #rovingIndex() { rovingIndex({ element: this.element, target: "[data-menu-target='item']" }) } #focus() { this.itemTargets[0].focus() }}No notes provided.