@@ -79,8 +79,8 @@ function toggle() {
7979 if (isOpen .value ) {
8080 close ()
8181 } else {
82- if (triggerRef .value ) {
83- const rect = triggerRef .value .getBoundingClientRect ()
82+ if (triggerRef .value ?. buttonRef ) {
83+ const rect = triggerRef .value .buttonRef . getBoundingClientRect ()
8484 dropdownPosition .value = {
8585 top: rect .bottom + 4 ,
8686 right: rect .right ,
@@ -101,7 +101,7 @@ function close() {
101101function select(id : string ) {
102102 scrollToAnchor (id , { scrollFn: props .scrollToHeading })
103103 close ()
104- triggerRef .value ?.focus ()
104+ triggerRef .value ?.buttonRef ?. focus ()
105105}
106106
107107function getIndex(id : string ): number {
@@ -138,25 +138,25 @@ function handleKeydown(event: KeyboardEvent) {
138138 }
139139 case ' Escape' :
140140 close ()
141- triggerRef .value ?.focus ()
141+ triggerRef .value ?.buttonRef ?. focus ()
142142 break
143143 }
144144}
145145 </script >
146146
147147<template >
148- <button
148+ <ButtonBase
149149 ref =" triggerRef"
150150 type =" button"
151- class =" flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover hover:text-fg"
152151 :aria-expanded =" isOpen"
153152 aria-haspopup =" listbox"
154153 :aria-label =" $t('package.readme.toc_title')"
155154 :aria-controls =" listboxId"
156155 @click =" toggle"
157156 @keydown =" handleKeydown"
157+ classicon =" i-carbon:list"
158+ class =" px-2.5 flex items-center"
158159 >
159- <span class =" i-carbon:list w-3.5 h-3.5" aria-hidden =" true" />
160160 <span
161161 class =" i-carbon:chevron-down w-3 h-3"
162162 :class =" [
@@ -165,7 +165,7 @@ function handleKeydown(event: KeyboardEvent) {
165165 ]"
166166 aria-hidden =" true"
167167 />
168- </button >
168+ </ButtonBase >
169169
170170 <Teleport to =" body" >
171171 <Transition
0 commit comments