From 0147489c10dcb0ffdce1ac315d3d6a1441b0c3ac Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Sat, 12 Apr 2025 23:24:59 +0200
Subject: [PATCH] Iterate Switcher, replace groupName prop with built-in .id()

---
 .../src/Switcher/Switcher.stories.svelte      |  9 +-
 components/src/Switcher/Switcher.svelte       | 88 +++++++++----------
 2 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte
index 622e19a..b4f366b 100644
--- a/components/src/Switcher/Switcher.stories.svelte
+++ b/components/src/Switcher/Switcher.stories.svelte
@@ -12,13 +12,7 @@
 
 <Story name="Two Options">
 	<DesignTokens>
-		<Switcher
-			options={['Option A', 'Option B']}
-			groupName="two-options"
-			value="Option A"
-			size="default"
-			label="Label"
-		/>
+		<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
 	</DesignTokens>
 </Story>
 
@@ -41,7 +35,6 @@
 	<DesignTokens>
 		<Switcher
 			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
-			groupName="four-options"
 			value="Oranges"
 			label="Label"
 			size="small"
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 43ada24..e015026 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
 	interface SwitcherProps {
 		/**
-		 * Human-readable label for the input.
+		 * Human-readable label
 		 */
 		label: string;
-		options: string[];
 		/**
-		 * Machine-readable name for the input. Should be unique across the document.
+		 * Available options
 		 */
-		groupName: string;
+		options: string[];
 		/**
-		 * Type size
+		 * Display size
 		 */
 		size?: 'default' | 'small';
 		/**
@@ -19,18 +18,12 @@
 		value: string | null;
 	}
 
-	let {
-		label,
-		options,
-		groupName,
-		size = 'default',
-		value = $bindable(null)
-	}: SwitcherProps = $props();
+	let { label, options, size = 'default', value = $bindable(null) }: SwitcherProps = $props();
+
+	const groupId = $props.id();
+	const groupName = 'select-' + groupId;
 
 	function optionToID(o: string) {
-		// TODO: This should use $id() when it comes out, so
-		// input IDs are guaranteed unique across the app
-		// See: https://github.com/sveltejs/svelte/issues/13108
 		return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
 	}
 </script>
@@ -42,12 +35,6 @@
 			<li class:is-selected={o === value}>
 				<label for={optionToID(o)}>
 					{o}
-					<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-						<path
-							d="M19.7054 6.29119C20.0969 6.68077 20.0984 7.31393 19.7088 7.7054L9.75697 17.7054C9.56928 17.894 9.31416 18 9.04809 18C8.78201 18 8.52691 17.8939 8.33925 17.7053L4.2911 13.6365C3.90157 13.245 3.90318 12.6118 4.2947 12.2223C4.68621 11.8327 5.31938 11.8344 5.7089 12.2259L9.04825 15.5823L18.2912 6.2946C18.6808 5.90314 19.3139 5.90161 19.7054 6.29119Z"
-							fill="currentColor"
-						/>
-					</svg>
 				</label>
 				<input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
 			</li>
@@ -56,6 +43,8 @@
 </fieldset>
 
 <style lang="scss">
+	@use '../styles/base.scss';
+
 	fieldset {
 		border: 0;
 		font-family: var(--swr-sans);
@@ -63,29 +52,34 @@
 
 	legend {
 		font-size: var(--fs-small-2);
-		margin-bottom: 0.25em;
+		font-weight: 500;
+		margin-bottom: 0.35em;
 	}
 
 	ul {
 		width: 100%;
 		display: flex;
-		flex-direction: row;
-		border-radius: var(--br-small);
+		flex-direction: column;
 		overflow: hidden;
 		padding: 0;
 		margin: 0;
-		overflow: hidden;
 		border: 1px solid currentColor;
+		border-radius: var(--br-small);
+
+		@media (min-width: base.$break-phone) {
+			flex-flow: row;
+		}
 
 		&:focus-within,
 		&:active {
-			outline: 3px solid rgba(white, 0.5);
+			outline: 2px solid var(--blue-light-2);
 		}
 	}
 	li {
 		display: contents;
 		&:last-child label {
 			border-right: 0;
+			border-bottom: 0;
 		}
 	}
 	input {
@@ -94,41 +88,45 @@
 	}
 	.small label {
 		font-size: var(--fs-small-1);
+		height: 2.25em;
+		padding: 0 0.65em;
 	}
 	label {
 		font-size: var(--fs-base);
-		height: 2.5em;
 		line-height: 1;
+		white-space: nowrap;
+		padding: 0 1em;
 		cursor: pointer;
 		margin: 0;
-		flex-basis: 0;
-		flex-grow: 1;
 		align-items: center;
 		display: flex;
-		justify-content: center;
 		color: currentColor;
 		position: relative;
 		transition: var(--fast);
-		text-underline-offset: 0.1em;
-		border-right: 1px solid currentColor;
+		text-underline-offset: 0.2em;
+		border-bottom: 1px solid currentColor;
+		height: 2.25em;
+		@media (min-width: base.$break-phone) {
+			justify-content: center;
+			padding: 0 1em;
+			flex-basis: 0;
+			flex-grow: 1;
+			border-right: 1px solid currentColor;
+			border-bottom: 0;
+		}
+		@media (min-width: base.$break-tablet) {
+			height: 2.5em;
+		}
 		&:hover,
 		&:focus-visible {
 			text-decoration: underline;
 		}
-		svg {
-			position: absolute;
-			left: 0.65em;
-			width: 1em;
-			height: auto;
-			opacity: 0;
-			transition: var(--fast);
-			display: block;
-		}
 		.is-selected & {
-			background: white;
-			color: black;
-			svg {
-				opacity: 1;
+			background: rgb(247, 247, 247);
+			font-weight: 700;
+			box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
+			@media (min-width: base.$break-phone) {
+				box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
 			}
 		}
 	}