Use Shoelace for the theme picker

css/style.css

@@ -49,18 +49,26 @@ header {
 		font-size: 1.2em;
 		font-weight: 300;
 
-		select {
-			font: inherit;
-			font-weight: 900;
-			color: var(--theme-color, inherit);
-			background: inherit;
-			border: none;
-			field-sizing: content;
+		.theme-picker {
+			sl-button::part(base) {
+				font-weight: 900;
+				font-size: 1.1em;
+				color: var(--theme-color, inherit);
+				border: none;
+			}
 
-			&:focus-visible {
+			sl-button::part(base):hover {
+				background-color: color-mix(in oklab, var(--theme-color) 10%, transparent 90%)
+			}
+
+			sl-button::part(base):focus-visible {
 				outline: 2px dotted var(--theme-color, currentColor);
 				outline-offset: .07em;
 			}
+
+			sl-button::part(label) {
+				padding-inline-end: .1em;
+			}
 		}
 
 		button {

index.html

@@ -11,6 +11,10 @@
 	<link rel="stylesheet prefetch" href="https://get.mavo.io/mavo.min.css" />
 	<script src="https://get.mavo.io/mavo.min.js"></script>
 
+	<!-- Shoelace -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
+	<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>
+
 	<link rel="stylesheet prefetch" href="css/style.css" />
 	<link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🧠</text></svg>' />
 	<title>Memory Game</title>
@@ -19,21 +23,23 @@
 	<header mv-app="header" style="--theme-color: [game.color || 'initial']">
 		<h1>Memory Game</h1>
 		<h2>
-			<select
-				property="themeNumber"
-				title="Choose a theme to play"
-				mv-action="
-					set(game.card.flipped, false)
-					set(game.card.state, '')
-					set(game.move, 0)
-					set(game.gameStarted, false)
-					set(game.symbols, shuffle(game.symbols))
-				"
-			>
-				<optgroup label="Themes" mv-list mv-value="themes.theme">
-					<option value="[$index]" mv-group>[name]</option>
-				</optgroup>
-			</select>
+			<meta property="themeNumber" mv-default="[random(0, count(themes.theme) - 1)]" mv-mode="read" />
+			<sl-dropdown class="theme-picker">
+				<sl-button slot="trigger" caret mv-value="get(game.gameTheme, 'name')">Emoji</sl-button>
+				<sl-menu mv-list mv-value="themes.theme">
+					<sl-menu-item
+						value="[$index]"
+						mv-group
+						mv-action="if(themeNumber != $index,
+							set(game.card.flipped, false) &
+							set(game.card.state, '') &
+							set(game.move, 0) &
+							set(game.gameStarted, false) &
+							set(themeNumber, $index) &
+							set(game.symbols, shuffle(game.symbols))
+						)">[name]</sl-menu-item>
+				</sl-menu>
+			</sl-dropdown>
 			<button mv-action="
 				set(game.card.flipped, false)
 				set(game.card.state, '')
@@ -230,14 +236,5 @@ <h2 class="[if(game.gameOver, boom)]">Congratulations!
 			</symbol>
 		</defs>
 	</svg>
-
-	<script>
-		if (!CSS.supports("field-sizing", "content")) {
-			// Polyfill for `field-sizing: content`. Stretchy is globally available thanks to Mavo.
-			// Caution: Weird behavior in Safari.
-			Stretchy.selectors.filter = "select[property]";
-			Stretchy.init();
-		}
-	</script>
 </body>
 </html>