wip: more tailwind alignment

src/components/VersionSelector.astro

@@ -7,18 +7,23 @@ interface Props {
 const { currentVersion, versions } = Astro.props;
 ---
 
-<div class="version-selector relative" data-version-selector>
+<div class="relative" data-version-selector>
   <!-- Trigger button -->
   <button
     type="button"
-    class="version-trigger"
     data-version-trigger
     aria-haspopup="listbox"
     aria-expanded="false"
+    class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
+           border border-gray-200 dark:border-gray-800
+           rounded-md bg-transparent cursor-pointer transition-colors
+           text-gray-600 dark:text-gray-400
+           hover:border-sky-600 hover:text-gray-950 dark:hover:text-gray-50"
   >
-    <span class="font-mono">v{currentVersion}</span>
+    <span>v{currentVersion}</span>
     <svg
-      class="arrow-icon"
+      data-arrow-icon
+      class="w-3.5 h-3.5 transition-transform duration-150"
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"
@@ -33,18 +38,32 @@ const { currentVersion, versions } = Astro.props;
 
   <!-- Dropdown menu -->
   <div
-    class="version-dropdown"
     data-version-dropdown
     role="listbox"
     aria-label="Select version"
+    class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
+           bg-gray-50 dark:bg-gray-900
+           border border-gray-200 dark:border-gray-800
+           rounded-lg shadow-lg
+           opacity-0 invisible -translate-y-1 transition-all duration-150
+           data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"
   >
     {
       versions.map((v) => (
         <a
           href={`/spec/${v}`}
-          class:list={["version-option", { active: v === currentVersion }]}
           role="option"
           aria-selected={v === currentVersion}
+          class:list={[
+            "block px-3 py-2 font-mono text-sm rounded transition-colors",
+            "text-gray-600 dark:text-gray-400",
+            "hover:bg-gray-100 dark:hover:bg-gray-800",
+            "hover:text-gray-950 dark:hover:text-gray-50",
+            v === currentVersion && [
+              "bg-sky-500/15 dark:bg-sky-500/20",
+              "text-sky-600 dark:text-sky-400",
+            ],
+          ]}
         >
           v{v}
         </a>
@@ -67,158 +86,54 @@ const { currentVersion, versions } = Astro.props;
       const dropdown = selector.querySelector(
         "[data-version-dropdown]"
       ) as HTMLElement;
+      const arrow = selector.querySelector(
+        "[data-arrow-icon]"
+      ) as HTMLElement;
 
       if (!trigger || !dropdown) return;
 
-      // Toggle dropdown
+      const open = () => {
+        dropdown.dataset.open = "true";
+        trigger.setAttribute("aria-expanded", "true");
+        if (arrow) arrow.style.transform = "rotate(180deg)";
+      };
+
+      const close = () => {
+        delete dropdown.dataset.open;
+        trigger.setAttribute("aria-expanded", "false");
+        if (arrow) arrow.style.transform = "";
+      };
+
       trigger.addEventListener("click", (e) => {
         e.stopPropagation();
-        const isOpen = dropdown.classList.contains("open");
+        const isOpen = dropdown.dataset.open === "true";
 
-        // Close all other dropdowns first
-        document.querySelectorAll("[data-version-dropdown].open").forEach((d) => {
-          d.classList.remove("open");
-          d.previousElementSibling?.setAttribute("aria-expanded", "false");
-        });
+        // Close all other dropdowns
+        document.querySelectorAll("[data-version-dropdown][data-open]")
+          .forEach((d) => {
+            delete (d as HTMLElement).dataset.open;
+            const t = d.previousElementSibling as HTMLElement;
+            t?.setAttribute("aria-expanded", "false");
+            const a = t?.querySelector("[data-arrow-icon]") as HTMLElement;
+            if (a) a.style.transform = "";
+          });
 
-        if (!isOpen) {
-          dropdown.classList.add("open");
-          trigger.setAttribute("aria-expanded", "true");
-        }
+        isOpen ? close() : open();
       });
 
-      // Close on click outside
       document.addEventListener("click", (e) => {
-        if (!selector.contains(e.target as Node)) {
-          dropdown.classList.remove("open");
-          trigger.setAttribute("aria-expanded", "false");
-        }
+        if (!selector.contains(e.target as Node)) close();
       });
 
-      // Close on escape
       document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape" && dropdown.classList.contains("open")) {
-          dropdown.classList.remove("open");
-          trigger.setAttribute("aria-expanded", "false");
+        if (e.key === "Escape" && dropdown.dataset.open === "true") {
+          close();
           trigger.focus();
         }
       });
     });
   }
 
-  // Initialize on load
   initVersionSelectors();
-
-  // Re-initialize on Astro page transitions
   document.addEventListener("astro:after-swap", initVersionSelectors);
 </script>
-
-<style>
-  .version-selector {
-    position: relative;
-  }
-
-  .version-trigger {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.375rem 0.625rem;
-    font-size: 0.8125rem;
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    background-color: transparent;
-    color: var(--color-text-secondary);
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  :global(.dark) .version-trigger {
-    border-color: var(--color-dark-border);
-    color: var(--color-dark-text-secondary);
-  }
-
-  .version-trigger:hover {
-    border-color: var(--color-accent);
-    color: var(--color-text-primary);
-  }
-
-  :global(.dark) .version-trigger:hover {
-    color: var(--color-dark-text-primary);
-  }
-
-  .arrow-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-    transition: transform 150ms ease;
-  }
-
-  .version-trigger[aria-expanded="true"] .arrow-icon {
-    transform: rotate(180deg);
-  }
-
-  .version-dropdown {
-    position: absolute;
-    top: calc(100% + 0.5rem);
-    left: 0;
-    min-width: 100%;
-    padding: 0.375rem;
-    background-color: var(--color-bg-primary);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    box-shadow: var(--shadow-lg);
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-4px);
-    transition:
-      opacity 150ms ease,
-      transform 150ms ease,
-      visibility 150ms ease;
-    z-index: 100;
-  }
-
-  :global(.dark) .version-dropdown {
-    background-color: var(--color-dark-bg-secondary);
-    border-color: var(--color-dark-border);
-  }
-
-  .version-dropdown.open {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-
-  .version-option {
-    display: block;
-    padding: 0.5rem 0.75rem;
-    font-family: var(--font-mono);
-    font-size: 0.8125rem;
-    color: var(--color-text-secondary);
-    text-decoration: none;
-    border-radius: 4px;
-    transition: all 150ms ease;
-  }
-
-  :global(.dark) .version-option {
-    color: var(--color-dark-text-secondary);
-  }
-
-  .version-option:hover {
-    background-color: var(--color-bg-secondary);
-    color: var(--color-text-primary);
-  }
-
-  :global(.dark) .version-option:hover {
-    background-color: var(--color-dark-bg-code);
-    color: var(--color-dark-text-primary);
-  }
-
-  .version-option.active {
-    background-color: var(--color-accent-muted);
-    color: var(--color-accent);
-  }
-
-  :global(.dark) .version-option.active {
-    background-color: var(--color-dark-accent-muted);
-    color: var(--color-accent-light);
-  }
-</style>