{#if selection.fillTargets.length > 0 || selection.strokeTargets.length > 0 || selection.fillOpacityTargets.length > 0 || selection.strokeOpacityTargets.length > 0} Appearance {#if selection.fillTargets.length > 0} Fill {/if} {#if selection.strokeTargets.length > 0} Stroke {/if} {#if selection.fillOpacityTargets.length > 0} {@render OpacityControl('Fill opacity', selection.fillOpacityState, (event) => handleOpacityChange(event, 'fillOpacity') )} {/if} {#if selection.strokeOpacityTargets.length > 0} {@render OpacityControl('Stroke opacity', selection.strokeOpacityState, (event) => handleOpacityChange(event, 'strokeOpacity') )} {/if} {#if selection.selectionCount > 0} {@render OpacityControl('Opacity', selection.opacityState, (event) => handleOpacityChange(event, 'opacity') )} {/if} {/if} {#snippet OpacityControl( label: string, state: { value: number; mixed: boolean }, onChange: (event: Event) => void )} {label} {state.mixed ? 'Mixed' : `${Math.round(state.value * 100)}%`} {/snippet}