Refine ISAC selection controls and icons

src/lib/components/SegmentedChoice.svelte

@@ -7,6 +7,7 @@
 		label: string;
 		className?: string;
 		icon?: GameIconName;
+		iconOnly?: boolean;
 	};
 
 	let {
@@ -18,6 +19,7 @@
 		selected = $bindable([]),
 		columns = options.length,
 		required = false,
+		showIndicator = true,
 		onchange
 	}: {
 		legend: string;
@@ -28,6 +30,7 @@
 		selected?: string[];
 		columns?: number;
 		required?: boolean;
+		showIndicator?: boolean;
 		onchange?: (values: string[]) => void;
 	} = $props();
 
@@ -55,9 +58,9 @@
 					{required}
 					onchange={(event) => change(option.value, event.currentTarget.checked)}
 				/>
-				<span class={option.className ?? ''}>
-					{#if option.icon}<GameIcon name={option.icon} decorative/>{:else}<i aria-hidden="true"></i>{/if}
-					<b>{option.label}</b>
+				<span class:icon-only={option.iconOnly} class={option.className ?? ''} title={option.iconOnly ? option.label : undefined}>
+					{#if option.icon}<GameIcon name={option.icon} decorative/>{:else if showIndicator}<i aria-hidden="true"></i>{/if}
+					<b class:sr-only={option.iconOnly}>{option.label}</b>
 				</span>
 			</label>
 		{/each}