add size and contained variants to uncap indicator

src/lib/components/uncap/TranscendenceStar.svelte

@@ -11,6 +11,7 @@
 		editable?: boolean
 		interactive?: boolean
 		tabindex?: number
+		size?: 'regular' | 'small'
 		onStarClick?: () => void
 		onFragmentClick?: (newStage: number) => void
 		onFragmentHover?: (newStage: number) => void
@@ -23,6 +24,7 @@
 		editable = false,
 		interactive = false,
 		tabindex,
+		size = 'regular',
 		onStarClick,
 		onFragmentClick,
 		onFragmentHover
@@ -165,6 +167,7 @@
 	class:stage3={stage === 3}
 	class:stage4={stage === 4}
 	class:stage5={stage === 5}
+	class:small={size === 'small'}
 	onclick={handleClick}
 	onmouseleave={interactive ? handleMouseLeave : undefined}
 	bind:this={starElement}
@@ -211,6 +214,10 @@
 		position: relative;
 		cursor: pointer;
 
+		&.small {
+			--size: 12px;
+		}
+
 		&:hover {
 			transform: scale(1.2);
 		}
@@ -332,6 +339,10 @@
 				transform: scale(1.2);
 			}
 		}
+
+		&.small .figure {
+			--size: 12px;
+		}
 	}
 
 	.popover {

src/lib/components/uncap/UncapIndicator.svelte

@@ -15,6 +15,8 @@
 		special?: boolean | undefined
 		className?: string | undefined
 		editable?: boolean | undefined
+		contained?: boolean | undefined
+		size?: 'regular' | 'small' | undefined
 		updateUncap?: ((index: number) => void) | undefined
 		updateTranscendence?: ((index: number) => void) | undefined
 	}
@@ -27,6 +29,7 @@
 		ulb?: boolean
 		index: number
 		tabindex?: number
+		size?: 'regular' | 'small'
 		onStarClick: (index: number, empty: boolean) => void
 	}
 
@@ -38,6 +41,7 @@
 		editable?: boolean
 		interactive?: boolean
 		tabindex?: number
+		size?: 'regular' | 'small'
 		onStarClick?: () => void
 		onFragmentClick?: (newStage: number) => void
 		onFragmentHover?: (newStage: number) => void
@@ -58,6 +62,8 @@
 		special = false,
 		className,
 		editable = false,
+		contained = false,
+		size = 'regular',
 		updateUncap,
 		updateTranscendence
 	}: Props = $props()
@@ -119,6 +125,7 @@
 					type,
 					editable,
 					interactive: editable,
+					size,
 					onFragmentClick: editable ? handleTranscendenceUpdate : undefined
 				}
 			}
@@ -137,6 +144,7 @@
 				ulb: options.ulb,
 				special: options.special,
 				tabindex: editable ? 0 : undefined,
+				size,
 				onStarClick: editable ? toggleStar : () => {}
 			}
 		}
@@ -194,7 +202,7 @@
 	}
 </script>
 
-<div class="uncap-indicator {className || ''}">
+<div class="uncap-indicator {className || ''}" class:contained class:small={size === 'small'}>
 	<ul class="stars">
 		{#each Array(numStars) as _, i}
 			{@const star = renderStar(i)}
@@ -210,8 +218,20 @@
 </div>
 
 <style lang="scss">
+	@use '$src/themes/spacing' as spacing;
+
 	.uncap-indicator {
 		display: inline-block;
+
+		&.contained {
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 999px;
+			padding: spacing.$unit;
+
+			&.small {
+				padding: spacing.$unit-half;
+			}
+		}
 	}
 
 	.stars {

src/lib/components/uncap/UncapStar.svelte

@@ -8,6 +8,7 @@
 		ulb?: boolean
 		index: number
 		tabindex?: number
+		size?: 'regular' | 'small'
 		onStarClick: (index: number, empty: boolean) => void
 	}
 
@@ -18,6 +19,7 @@
 		ulb = false,
 		index,
 		tabindex,
+		size = 'regular',
 		onStarClick
 	}: Props = $props()
 
@@ -33,6 +35,7 @@
 	class:mlb={!special}
 	class:flb
 	class:ulb
+	class:small={size === 'small'}
 	{tabindex}
 	onclick={handleClick}
 	role="button"
@@ -49,6 +52,10 @@
 		width: var(--size);
 		cursor: pointer;
 
+		&.small {
+			--size: 12px;
+		}
+
 		&:hover {
 			transform: scale(1.2);
 		}
@@ -101,6 +108,10 @@
 			--size: 14px;
 			background-size: cover;
 
+			&.small {
+				--size: 12px;
+			}
+
 			&:hover {
 				transform: scale(1);
 			}