style tweaks

apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dropdown, Icon } from '@sveltejs/site-kit/components';
+	import { Dropdown, HoverMenu, Icon } from '@sveltejs/site-kit/components';
 	import { get_app_context } from '../../app-context';
 	import type { User } from '$lib/db/session';
 
@@ -19,8 +19,10 @@
 	</div>
 
 	{#snippet dropdown()}
-		<a href="/apps">Your saved apps</a>
-		<button onclick={logout}>Log out</button>
+		<HoverMenu>
+			<a href="/apps">Your saved apps</a>
+			<button onclick={logout}>Log out</button>
+		</HoverMenu>
 	{/snippet}
 </Dropdown>
 

packages/repl/src/lib/Input/ComponentSelector.svelte

@@ -277,9 +277,12 @@
 		title="add new component"
 	></button>
 
-	<div class="runes-info"><RunesInfo {runes} /></div>
+	<div class="runes">
+		<RunesInfo {runes} />
+		<Migrate />
+	</div>
 
-	<div class="migrate-info"><Migrate /></div>
+	<!-- <div class="migrate-info"></div> -->
 </div>
 
 <style>
@@ -429,20 +432,13 @@
 		color: var(--sk-theme-3) !important;
 	}
 
-	.runes-info {
+	.runes {
 		flex: 1;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
 	}
 
-	.migrate-info {
-		flex: 0 1 0;
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-	}
-
 	svg {
 		position: relative;
 		overflow: hidden;

packages/repl/src/lib/Input/Migrate.svelte

@@ -4,20 +4,18 @@
 	const { migrate } = get_repl_context();
 </script>
 
-<div class="container">
-	<button on:click={migrate} title="Migrate this component towards the new syntax">migrate</button>
-</div>
+<button class="raised" on:click={migrate} title="Migrate this component towards the new syntax">
+	migrate
+</button>
 
 <style>
-	/* TODO this is duplicated with RunesInfo.svelte */
 	button {
 		position: relative;
 		display: flex;
+		align-items: center;
 		text-transform: uppercase;
 		font: var(--sk-font-ui-small);
-		padding: 0.8rem;
-		gap: 0.5rem;
-		margin-right: 0.3rem;
-		z-index: 9999;
+		padding: 0 0.8rem;
+		height: 3.2rem;
 	}
 </style>

packages/repl/src/lib/Input/RunesInfo.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Dropdown } from '@sveltejs/site-kit/components';
 	import { get_repl_context } from '../context';
 
 	let { runes }: { runes: boolean } = $props();
@@ -14,40 +15,35 @@
 	}}
 />
 
-<div class="container">
-	<button class:active={runes} class:open onclick={() => (open = !open)}>
-		<svg viewBox="0 0 24 24">
-			<path d="M9.4,1H19l-5.9,7.7h8L8.3,23L11,12.6H3.5L9.4,1z" />
-		</svg>
+<Dropdown align="right">
+	<div class="target">
+		<span class="lightning" class:active={runes} role="presentation"></span>
 
-		runes
-	</button>
+		<span>runes</span>
+	</div>
 
-	{#if open}
-		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions
-			(This is taken care of by the <svelte:window> above) -->
-		<div class="modal-backdrop" onclick={() => (open = false)}></div>
+	{#snippet dropdown()}
 		<div class="popup">
 			{#if $selected_name.endsWith('.svelte.js')}
 				<p>
 					Files with a <code>.svelte.js</code> extension are always in
-					<a href="https://svelte.dev/blog/runes">runes mode</a>.
+					<a href="/blog/runes">runes mode</a>.
 				</p>
 			{:else if $selected_name.endsWith('.js')}
 				<p>
-					To use <a href="https://svelte.dev/blog/runes">runes</a> in a JavaScript file, change the
-					extension to <code>.svelte.js</code>.
+					To use <a href="/blog/runes">runes</a> in a JavaScript file, change the extension to
+					<code>.svelte.js</code>.
 				</p>
 			{:else if $selected_name.endsWith('.svelte')}
 				{#if runes}
 					<p>
 						This component is in
-						<a href="https://svelte.dev/blog/runes">runes mode</a>.
+						<a href="/blog/runes">runes mode</a>.
 					</p>
 					<p>To disable runes mode, add the following to the top of your component:</p>
 					<pre><code>&lt;svelte:options runes={'{false}'} /&gt;</code></pre>
 				{:else}
-					<p>This component is not in <a href="https://svelte.dev/blog/runes">runes mode</a>.</p>
+					<p>This component is not in <a href="/blog/runes">runes mode</a>.</p>
 					<p>
 						To enable runes mode, either start using runes in your code, or add the following to the
 						top of your component:
@@ -57,85 +53,69 @@
 			{:else}
 				<p>
 					Edit a <code>.svelte</code>, <code>.svelte.js</code> or <code>.js</code> file to see
-					information on <a href="https://svelte.dev/blog/runes">runes mode</a>
+					information on <a href="/blog/runes">runes mode</a>
 				</p>
 			{/if}
 		</div>
-	{/if}
-</div>
+	{/snippet}
+</Dropdown>
 
 <style>
-	button {
-		position: relative;
-		display: flex;
+	.target {
 		text-transform: uppercase;
 		font: var(--sk-font-ui-small);
-		padding: 0.8rem;
-		gap: 0.5rem;
-		margin-right: 0.3rem;
-		z-index: 9999;
-	}
-
-	button.open {
-		background: var(--sk-back-3);
-	}
+		position: relative;
+		display: flex;
+		align-items: center;
 
-	svg {
-		width: 1.6rem !important;
-		height: 1.6rem !important;
-		top: 0.05rem;
+		height: 100%;
+		padding: 0 0.8rem;
+		gap: 0.5rem;
+		z-index: 2;
 	}
 
-	path {
-		stroke: #ccc;
-		fill: transparent;
-		transition:
-			stroke 0.2s,
-			fill 0.2s;
-	}
+	span.lightning {
+		--icon-size: 1.8rem;
+		width: 1.8rem;
+		height: 1.8rem;
+		z-index: 9999;
+		background: url(./runes-off-light.svg) no-repeat 50% 50%;
+		background-size: contain;
 
-	.active svg {
-		animation: bump 0.4s;
-	}
+		:root.dark &:not(.active) {
+			background-image: url(./runes-off-dark.svg);
+		}
 
-	.active path {
-		stroke: #ff3e00;
-		fill: #ff3e00;
+		&.active {
+			background-image: url(./runes-on-light.svg);
+			animation: bump 0.4s;
+		}
 	}
 
 	@keyframes bump {
 		0% {
-			transform: scale(1);
+			background-size: var(--icon-size);
 		}
 		50% {
-			transform: scale(1.3);
+			background-size: calc(1.3 * var(--icon-size));
 		}
 		100% {
-			transform: scale(1);
+			background-size: var(--icon-size);
 		}
 	}
 
-	.modal-backdrop {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		background: var(--sk-back-1);
-		opacity: 0.7;
-		backdrop-filter: blur(5px);
-		z-index: 9998;
-	}
-
 	.popup {
 		position: absolute;
-		top: 2.2em;
-		right: 0;
+		right: -6rem;
 		width: 100vw;
 		max-width: 320px;
 		z-index: 9999;
 		background: var(--sk-back-3);
 		padding: 1em;
+
+		p {
+			font: var(--sk-font-ui-medium);
+		}
 	}
 
 	.popup p:first-child {

packages/site-kit/src/lib/components/Dropdown.svelte

@@ -32,42 +32,14 @@
 		top: calc(50% + min(50%, 1.5rem));
 		background-color: var(--sk-back-2);
 		z-index: 1;
-		box-shadow: var(--sk-shadow);
+		filter: var(--sk-shadow);
 		border-radius: var(--sk-border-radius);
-		overflow: hidden;
 		z-index: 999;
 
 		&.align-right {
 			left: auto;
 			right: -1rem;
 		}
-
-		:global {
-			a,
-			button {
-				color: var(--sk-text-2);
-				padding: 1rem 1.3rem;
-				display: block;
-				font: var(--sk-font-ui-medium);
-				text-decoration: none;
-				line-height: 1;
-				width: 100%;
-				text-align: left;
-
-				&:first-child {
-					padding-top: 1.3rem;
-				}
-
-				&:last-child {
-					padding-bottom: 1.3rem;
-				}
-			}
-
-			a:hover,
-			button:hover {
-				background-color: var(--sk-back-4);
-			}
-		}
 	}
 
 	.dropdown:hover .dropdown-content,

packages/site-kit/src/lib/components/HoverMenu.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="hover-menu">
+	{@render children()}
+</div>
+
+<style>
+	.hover-menu {
+		:global {
+			a,
+			button {
+				color: var(--sk-text-2);
+				padding: 1rem 1.3rem;
+				display: block;
+				font: var(--sk-font-ui-medium);
+				text-decoration: none;
+				line-height: 1;
+				width: 100%;
+				text-align: left;
+
+				&:first-child {
+					padding-top: 1.3rem;
+					border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
+				}
+
+				&:last-child {
+					padding-bottom: 1.3rem;
+					border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
+				}
+			}
+
+			a:hover,
+			button:hover {
+				background-color: var(--sk-back-4);
+			}
+		}
+	}
+</style>

packages/site-kit/src/lib/components/Icons.svelte

@@ -137,16 +137,12 @@ Provides a list of svg icons that can be referenced through the `Icon` component
 			/>
 		</symbol>
 
-		<symbol id="chevron" class="icon" viewBox="0 0 24 24">
-			<path d="M2,7 L12,17 L20,7" />
-		</symbol>
-
 		<symbol id="chevron-up" class="icon" viewBox="0 0 24 24">
 			<polyline points="18 15 12 9 6 15" />
 		</symbol>
 
 		<symbol id="chevron-down" class="icon" viewBox="0 0 24 24">
-			<polyline points="6 9 12 15 18 9" />
+			<path d="m6 9 6 6 6-6" />
 		</symbol>
 
 		<symbol id="delete" class="icon" viewBox="0 0 24 24">