• Logos are added inside the utility-1_button by using the SVG Import App
• Focus state is applied natively in the style panel to the utility-1_button

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
	document.querySelectorAll(".utility-1_component").forEach(function (component) {
		if (component.hasAttribute("data-utility-1")) return;
		component.setAttribute("data-utility-1", "");

		const link = component.querySelector(".utility-1_link");
		const trigger = component.querySelector(".utility-1_trigger");
		const position = component.querySelector(".utility-1_position");
		const menu = component.querySelector(".utility-1_menu");
		const items = menu.querySelectorAll("[role='menuitem']");
		gsap.set(position, { display: "none" });

		let tl = gsap.timeline({ paused: true, defaults: { duration: 0.3 } });
		tl.set(position, { display: "block" });
		tl.from(position, { opacity: 0, y: "1.5rem", duration: 0.5 });
		tl.from(items, { opacity: 0, y: "1rem", stagger: 0.06 }, "<");

		function openMenu() {
			tl.timeScale(1).play();
			trigger.setAttribute("aria-expanded", "true");
			setTimeout(() => items[0]?.focus(), 100);
		}

		function closeMenu() {
			tl.timeScale(1.5).reverse();
			trigger.setAttribute("aria-expanded", "false");
			trigger.focus();
		}

		link.addEventListener("contextmenu", e => { e.preventDefault(); openMenu(); });
		trigger.addEventListener("click", openMenu);
		document.addEventListener("mousedown", e => { if (tl.progress() > 0 && !component.contains(e.target)) closeMenu(); });

		menu.addEventListener("keydown", e => {
			const i = [...items].indexOf(document.activeElement);
			if (e.key === "ArrowDown") { e.preventDefault(); items[(i + 1) % items.length]?.focus(); }
			else if (e.key === "ArrowUp") { e.preventDefault(); items[(i - 1 + items.length) % items.length]?.focus(); }
			else if (e.key === "Escape") { e.preventDefault(); closeMenu(); }
			else if (e.key === "Tab") closeMenu();
		});

		items.forEach(item => {
			item.addEventListener("mouseenter", () => item.focus());
			item.addEventListener("click", () => {
				const text = item.querySelector(".utility-1_text");
				const originalText = text.textContent;
				const svg = item.querySelector(".utility-1_svg-to-copy");
				if (!svg) return;
				navigator.clipboard?.writeText(svg.outerHTML.trim()).catch(console.error);
				text.textContent = "Copied";
				setTimeout(() => {
					closeMenu();
					setTimeout(() => text.textContent = originalText, 1000);
				}, 1000);
			});
		});
	});
});
</script>