Copy over a few more playground examples

src/routes/menu/menu-with-transition.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "$lib";
+
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+  function resolveClass({ active, disabled }) {
+    return classNames(
+      "flex justify-between w-full px-4 py-2 text-sm leading-5 text-left",
+      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+      disabled && "cursor-not-allowed opacity-50"
+    );
+  }
+</script>
+
+<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+  <div class="relative inline-block text-left">
+    <Menu>
+      <span class="rounded-md shadow-sm">
+        <MenuButton
+          class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
+        >
+          <span>Options</span>
+          <svg
+            class="w-5 h-5 ml-2 -mr-1"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </MenuButton>
+      </span>
+
+      <Transition
+        enter="transition duration-1000 ease-out"
+        enterFrom="transform scale-95 opacity-0"
+        enterTo="transform scale-100 opacity-100"
+        leave="transition duration-1000 ease-out"
+        leaveFrom="transform scale-100 opacity-100"
+        leaveTo="transform scale-95 opacity-0"
+      >
+        <MenuItems
+          class="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
+        >
+          <div class="px-4 py-3">
+            <p class="text-sm leading-5">Signed in as</p>
+            <p class="text-sm font-medium leading-5 text-gray-900 truncate">
+              tom@example.com
+            </p>
+          </div>
+
+          <div class="py-1">
+            <MenuItem as="a" href="#account-settings" class={resolveClass}>
+              Account settings
+            </MenuItem>
+            <MenuItem as="a" href="#support" class={resolveClass}>
+              Support
+            </MenuItem>
+            <MenuItem as="a" disabled href="#new-feature" class={resolveClass}>
+              New feature (soon)
+            </MenuItem>
+            <MenuItem as="a" href="#license" class={resolveClass}>
+              License
+            </MenuItem>
+          </div>
+
+          <div class="py-1">
+            <MenuItem as="a" href="#sign-out" class={resolveClass}>
+              Sign out
+            </MenuItem>
+          </div>
+        </MenuItems>
+      </Transition>
+    </Menu>
+  </div>
+</div>