| 27 | } |
| 28 | |
| 29 | const update = () => { |
| 30 | if (!$options.isConnected) return; |
| 31 | const $active = $options.querySelector(".active"); |
| 32 | if ($active) { |
| 33 | const optionsRect = $options.getBoundingClientRect(); |
| 34 | const activeRect = $active.getBoundingClientRect(); |
| 35 | if (!activeRect.width) return; |
| 36 | const targetLeft = activeRect.left - optionsRect.left; |
| 37 | const targetWidth = activeRect.width; |
| 38 | const targetTransform = `translate3d(${targetLeft}px, 0, 0)`; |
| 39 | $indicator.style.width = `${targetWidth}px`; |
| 40 | if (document.body.classList.contains("no-animation")) { |
| 41 | $indicator.style.transform = targetTransform; |
| 42 | } else { |
| 43 | animate( |
| 44 | $indicator, |
| 45 | { |
| 46 | transform: targetTransform, |
| 47 | }, |
| 48 | { |
| 49 | type: "spring", |
| 50 | stiffness: 380, |
| 51 | damping: 30, |
| 52 | }, |
| 53 | ).then(() => { |
| 54 | $indicator.style.width = `${targetWidth}px`; |
| 55 | $indicator.style.transform = targetTransform; |
| 56 | }); |
| 57 | } |
| 58 | } |
| 59 | }; |
| 60 | |
| 61 | // Observe changes to 'class' attribute of child tab spans |
| 62 | const observer = new MutationObserver((mutations) => { |